/* ============================================================
   HEADER.CSS — site header, desktop nav, dropdown, language
   toggle, mobile burger trigger, and the mobile nav layout.
   Rendered by partials/header.php on every page.
   ============================================================ */

header.site{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--header-h);
  display:flex; align-items:center;
  transition:box-shadow .35s var(--ease);
}
/* Background/blur live on ::before (not on header.site itself) so the header
   never gets `backdrop-filter` directly — that property forces an element to
   become the containing block for `position:fixed` descendants, which would
   break #mainNav's viewport-relative fixed positioning once .scrolled is on. */
header.site::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(0,0,0,30%);
  transition:background .35s var(--ease);
}
header.site.scrolled{box-shadow:0 4px 24px rgba(0,0,0,.06);}
header.site.scrolled::before{background:rgba(255,255,255,.96); backdrop-filter:blur(10px);}
header.site .container{display:flex; align-items:center; justify-content:space-between; gap:24px; width:100%;}
.logo{display:flex; align-items:center; gap:10px; font-family:var(--serif); font-weight:700; font-size:22px; color:var(--white);}
header.site.scrolled .logo{color:var(--teal);}
.logo img{height:38px; width:auto; border-radius:6px;}

nav.main-nav{display:flex; align-items:center; gap:30px;}
nav.main-nav > ul{display:flex; align-items:center; gap:28px;}
nav.main-nav > ul > li{position:relative;}
nav.main-nav a.nav-link{
  font-weight:600; font-size:14.5px; color:#fff; padding:10px 0;
  display:flex; align-items:center; gap:6px; transition:color .25s;
}
header.site.scrolled nav.main-nav a.nav-link{color:var(--charcoal);}
nav.main-nav a.nav-link:hover{color:var(--gold);}
nav.main-nav a.nav-link.active{color:var(--gold); font-weight:800;}
header.site.scrolled nav.main-nav a.nav-link.active{color:var(--gold);}
nav.main-nav a.nav-link svg{width:13px; height:13px; transition:transform .25s;}
li.has-dropdown:hover a.nav-link svg{transform:rotate(180deg);}

.dropdown{
  position:absolute; top:100%; left:0; min-width:260px;
  background:#fff; border-radius:12px; box-shadow:0 18px 48px rgba(10,79,82,.16);
  padding:12px; opacity:0; visibility:hidden; transform:translateY(8px);
  transition:all .25s var(--ease);
}
li.has-dropdown:hover .dropdown{opacity:1; visibility:visible; transform:translateY(0);}
.dropdown a{display:flex; flex-direction:column; gap:2px; padding:10px 14px; border-radius:8px; color:var(--charcoal); font-size:14px; font-weight:600; transition:background .2s;}
.dropdown a span{font-size:12px; font-weight:400; color:var(--gray);}
.dropdown a:hover{background:var(--ivory); color:var(--teal);}

.header-cta{display:flex; align-items:center; gap:14px;}
.lang-toggle{
  font-size:13px; font-weight:700; color:#fff; border:1px solid rgba(255,255,255,.4);
  border-radius:999px; padding:7px 14px; display:flex; gap:6px; transition:all .25s;
}
header.site.scrolled .lang-toggle{color:var(--teal); border-color:var(--line);}
.lang-toggle span.active{opacity:1;} .lang-toggle span{opacity:.5;}
.lang-toggle:hover{border-color:var(--gold);}

.burger{display:none; flex-direction:column; gap:5px; width:26px; cursor:pointer; background:none; border:none;}
.burger span{height:2px; width:100%; background:#fff; border-radius:2px; transition:.3s;}
header.site.scrolled .burger span{background:var(--charcoal);}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.nav-close{display:none;}

/* ===== MOBILE NAV ===== */
@media(max-width:1100px){
  nav.main-nav{position:fixed; top:var(--header-h); left:0; right:0; bottom:0; background:#fff; flex-direction:column; align-items:flex-start; padding:28px 24px; overflow-y:auto; transform:translateX(100%); transition:transform .35s var(--ease); justify-content:flex-start; gap:0;}
  nav.main-nav.open{transform:translateX(0);}
  nav.main-nav > ul{flex-direction:column; align-items:flex-start; width:100%; gap:4px;}
  nav.main-nav > ul > li{width:100%;}
  nav.main-nav a.nav-link{color:var(--charcoal); width:100%; padding:14px 0; justify-content:space-between; border-bottom:1px solid var(--line);}
  .dropdown{position:static; box-shadow:none; opacity:1; visibility:visible; transform:none; display:none; min-width:100%; padding:0 0 0 16px;}
  li.has-dropdown.open .dropdown{display:flex; flex-direction:column;}
  .header-cta{gap:10px;}
  .header-cta .btn-sm.btn-outline-light{display:none;}
  .burger{display:flex;}
  body.nav-open{overflow:hidden;}
  .nav-close{
    display:flex; align-items:center; justify-content:center; gap:8px;
    margin-top:auto; width:100%; padding:16px 0; margin-bottom:4px;
    background:none; border:none; border-top:1px solid var(--line);
    color:var(--charcoal); font-weight:700; font-size:15px; cursor:pointer;
  }
  .nav-close svg{width:18px; height:18px;}
}

/* ===== ARABIC / RTL ===== */
html[dir="rtl"] .dropdown{left:auto; right:0;}
html[dir="rtl"] .lang-toggle span:first-child{order:2;}
@media(max-width:1100px){
  html[dir="rtl"] .dropdown{padding:0 16px 0 0;}
}

@media (max-width: 480px) {
  .header-cta .btn-sm {
    display: none;
  }
}