/* Menu / header styles (extracted + deduped) */
header{
  position:sticky;
  top:0;
  z-index:50;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}

.bar{
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:nowrap;
}

.brand{ display:flex; align-items:center; gap:14px; }
.logoBox{
  width:auto;
  height:64px;
  border-radius:0;
  overflow:visible;
  border:0;
  background:transparent;
  box-shadow:none;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:flex-start;
}
.logoBox img{
  width:auto;
  height:64px;
  object-fit:contain;
  display:block;
}

/* Desktop nav */
nav.desktopNav{
  display:flex;
  gap:10px;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:flex-end;
  white-space:nowrap;
}
nav.desktopNav a,
nav.desktopNav button{
  padding:8px 10px;
  border-radius:12px;
  font-weight:600;
  font-size:17.5px;
  letter-spacing:.01em;
}
nav.desktopNav a:hover,
nav.desktopNav button:hover{
  background:#f3f3f3;
}

/* Right side */
.headerRight{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:nowrap;
  white-space:nowrap;
}
.headerActions{ display:flex; gap:10px; align-items:center; }

/* Header buttons */
.btnHeader{
  padding:10px 12px;
  border-radius:14px;
  font-weight:900;
  border:1px solid rgba(0,0,0,.10);
  box-shadow: var(--shadow);
  line-height:1;
}
.btnHeaderLight{
  background: rgba(44, 160, 90, .10) !important;
  border-color: rgba(44, 160, 90, .25) !important;
  color:#145a33 !important;
}
.btnHeaderLight:hover{ background: rgba(44, 160, 90, .14); }
.btnHeaderDark{
  background: rgba(27, 125, 67, .92) !important;
  border-color: rgba(27, 125, 67, .35) !important;
  color:#fff !important;
}
.btnHeaderDark:hover{ filter: brightness(1.02); }

/* Dropdown */
.navItem{ position:relative; }
.dropBtn{
  border:1px solid transparent;
  background: transparent;
  padding:8px 10px;
  border-radius:12px;
  cursor:pointer;
  font-weight:700;
  font-size:15.5px;
  letter-spacing:.01em;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.dropBtn:hover{ background:#f3f3f3; }

.dropMenu{
  position:absolute;
  top:100%;
  left:0;
  min-width: 240px;
  background:#fff;
  border:1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding:8px;

  /* consistent dropdown behavior (no display:none gaps) */
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}

.dropMenu a{
  display:block;
  padding:10px 10px;
  border-radius:12px;
  font-weight:700;
  font-size:15px;
}
.dropMenu a:hover{ background:#f6f6f6; }

/* Open without JS (hover + keyboard) */
.desktopNav .navItem:hover .dropMenu,
.desktopNav .navItem:focus-within .dropMenu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform: translateY(0);
}
.langDropdown .dropMenu{
  left:auto;
  right:0;
  min-width:140px;
}

/* Mobile */
.hamburger{
  display:none;
  border:1px solid var(--line);
  background:#fff;
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  box-shadow: var(--shadow);
  font-weight:900;
}

.mobilePanel{ display:none; border-top:1px solid var(--line); background:#fff; }
.mobileLinks{ display:grid; gap:8px; padding:14px 16px 16px; }
.mobileLinks a{
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  font-weight:700;
  font-size:15.5px;
  letter-spacing:.01em;
}
.mobileLinks a:hover{ background:#f6f6f6; }
.mobileRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 16px 16px;
}

.mobileAccBtn{
  width:100%;
  text-align:left;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  cursor:pointer;
  font: inherit;
  font-weight:700;
  font-size:15.5px;
  letter-spacing:.01em;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.mobileAccBtn:hover{ background:#f6f6f6; }
.mobileAccList{
  display:grid;
  gap:8px;
  padding-left:10px;
  margin-top:8px;
}
.mobileAccList a{ background:#fff; }

@media (max-width: 900px){
  nav.desktopNav{ display:none !important; }
  .hamburger{ display:inline-flex !important; align-items:center; gap:8px; }
  .mobilePanel{ display:none; } /* JS toggles */
  .logoBox{ height:54px !important; }
  .logoBox img{ height:54px !important; }
  /* Keep language dropdown visible, move CTAs into hamburger panel */
  .headerActions{ display:none !important; }
}

@media (min-width: 1000px){
  .brand{ flex:0 0 auto; }
  .headerRight{ flex:0 0 auto; }
}

/* Hover-bridge so the pointer can move from button to menu without closing */
.desktopNav .dropMenu::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-10px;
  height:10px;
}
.langDropdown:hover .dropMenu,
.langDropdown:focus-within .dropMenu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform: translateY(0);
}