/* ============================================================
   XB CAR — header.css
   Sticky header, brand, desktop nav, theme + lang toggles,
   mobile hamburger drawer.
   ============================================================ */

.site-hdr{
  position:sticky; top:0; z-index:50;
  background:var(--scrim);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s;
}
.site-hdr.stuck{ border-bottom-color:var(--line); box-shadow:var(--shadow-sm); }
:root[data-theme="dark"] .site-hdr.stuck{ background:rgba(17,20,23,.94); }
:root[data-theme="light"] .site-hdr.stuck{ background:rgba(255,255,255,.94); }

.nav{ display:flex; align-items:center; gap:12px; height:var(--hdr-h); }

/* ---- brand ----------------------------------------------- */
.brand{
  display:flex; align-items:center; gap:9px; flex:none;
  font-family:var(--ff-en); font-weight:800; font-size:19px; letter-spacing:.02em;
}
.brand .mark{
  width:30px; height:30px; border-radius:7px; flex:none;
  background:linear-gradient(145deg,var(--green),var(--green-hover));
  color:var(--on-green); display:grid; place-items:center;
  font-size:13px; font-weight:800;
  box-shadow:0 0 16px rgba(126,211,33,.34);
  transition:transform .3s var(--ease-back);
}
.brand:hover .mark{ transform:rotate(-8deg) scale(1.08); }
.brand-sub{
  display:none; font-family:var(--ff); font-size:9.5px; font-weight:600;
  color:var(--muted); letter-spacing:.06em; line-height:1; margin-top:2px;
}
.brand-txt{ display:flex; flex-direction:column; line-height:1; }

/* ---- desktop nav ----------------------------------------- */
.nav-links{ display:none; gap:26px; margin-inline-start:34px; }
.nav-links a{
  font-size:14.5px; font-weight:500; color:var(--muted);
  transition:color .2s; position:relative; padding-block:6px;
}
.nav-links a:hover{ color:var(--text); }
.nav-links a::after{
  content:""; position:absolute; inset-inline-start:0; bottom:0; height:2px; width:0;
  background:var(--green); transition:width .25s var(--ease);
}
.nav-links a:hover::after{ width:100%; }
.nav-links a.active{ color:var(--green-ink); font-weight:700; }
.nav-links a.active::after{ width:100%; }

/* ---- right cluster --------------------------------------- */
.nav-cta{ display:flex; align-items:center; gap:7px; margin-inline-start:auto; }

/* The theme toggle lives in <wa-float> as a floating button
   (see .theme-fab in base.css), not in the header. */

.lang{
  border:1px solid var(--line-strong); background:transparent;
  border-radius:999px; padding:7px 15px; font-size:12.5px; font-weight:700;
  cursor:pointer; color:var(--text); white-space:nowrap; min-width:64px;
  transition:border-color .2s, background .2s, color .2s, transform .2s var(--ease);
}
.lang:hover{ border-color:var(--green); background:var(--green-soft); color:var(--green-ink); }
.lang:active{ transform:scale(.95); }

.nav-book{ display:none; }

/* ---- hamburger ------------------------------------------- */
.burger{
  width:38px; height:38px; border-radius:10px; display:grid; place-items:center; gap:0;
  border:1px solid var(--line); background:transparent; cursor:pointer; flex:none;
  transition:border-color .2s, background .2s;
}
.burger:hover{ border-color:var(--green); }
.burger span{
  display:block; width:17px; height:2px; background:var(--text); border-radius:2px;
  transition:transform .3s var(--ease), opacity .2s;
}
.burger span + span{ margin-top:4px; }
.burger.on span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger.on span:nth-child(2){ opacity:0; }
.burger.on span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ---- mobile drawer --------------------------------------- */
.drawer-scrim{
  position:fixed; inset:0; z-index:54; background:rgba(0,0,0,.55);
  opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s;
  backdrop-filter:blur(3px);
}
.drawer-scrim.on{ opacity:1; visibility:visible; }

.drawer{
  position:fixed; top:0; bottom:0; inset-inline-end:0; z-index:55;
  width:min(84vw, 320px);
  background:var(--surface); border-inline-start:1px solid var(--line);
  padding:20px 22px calc(20px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:6px;
  /* RTL: inline-end resolves to the LEFT edge, so it hides to the left.
     LTR: inline-end is the right edge, so it hides to the right. */
  transform:translateX(-100%);
  transition:transform .38s var(--ease);
  overflow-y:auto; box-shadow:var(--shadow);
}
html[dir="ltr"] .drawer{ transform:translateX(100%); }
.drawer.on,
html[dir="ltr"] .drawer.on{ transform:translateX(0); }

.drawer-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.drawer-links{ display:flex; flex-direction:column; gap:2px; }
.drawer-links a{
  display:flex; align-items:center; gap:12px; padding:13px 12px; border-radius:11px;
  font-size:15px; font-weight:600; color:var(--text-dim);
  transition:background .2s, color .2s, padding-inline-start .2s var(--ease);
}
.drawer-links a:hover{ background:var(--surface-2); color:var(--text); padding-inline-start:18px; }
.drawer-links a.active{ background:var(--green-soft); color:var(--green-ink); font-weight:700; }
.drawer-links a svg{ width:17px; height:17px; flex:none; opacity:.7; }
.drawer-links a.active svg{ opacity:1; }
.drawer-foot{ margin-top:auto; padding-top:18px; border-top:1px solid var(--line); display:grid; gap:12px; }
.drawer-foot .btn{ width:100%; }
.drawer-soc{ display:flex; gap:8px; justify-content:center; }
.drawer-soc a{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line); color:var(--muted); transition:all .2s;
}
.drawer-soc a:hover{ border-color:var(--green); color:var(--green-ink); background:var(--green-soft); }
.drawer-soc svg{ width:16px; height:16px; }
.drawer-note{ font-size:11px; color:var(--muted); text-align:center; line-height:1.6; }

/* ---- announcement bar ------------------------------------ */
.annc{
  background:linear-gradient(90deg,var(--green),var(--green-hover));
  color:var(--on-green);
  position:relative; z-index:60;
  overflow:hidden; padding-block:9px;
  /* fade the edges so items enter and leave cleanly */
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.annc-track{
  display:flex; width:max-content;
  animation:anncSlide 46s linear infinite;
}
/* the track is built LTR; in RTL run it the other way so text reads naturally */
html[dir="rtl"] .annc-track{ animation-direction:reverse; }
.annc:hover .annc-track{ animation-play-state:paused; }
.annc-item{
  display:inline-flex; align-items:center; gap:8px;
  padding-inline:22px; white-space:nowrap;
  font-size:12.5px; font-weight:700; letter-spacing:.01em;
}
.annc-item svg{ width:13px; height:13px; flex:none; opacity:.65; }
@keyframes anncSlide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

@media(prefers-reduced-motion:reduce){
  .annc-track{ animation:none; }
  .annc{ -webkit-mask-image:none; mask-image:none; }
  .annc-item{ padding-inline:14px; }
}

/* ---- responsive ------------------------------------------ */
@media(min-width:600px){
  .brand-sub{ display:block; }
}
@media(min-width:960px){
  .nav-links{ display:flex; }
  .burger{ display:none; }
  .nav-book{ display:inline-flex; }
}