/* =========================================================================
   header.css - (1) HEADER + overlay menu.
   Figma: CTA 1:50 at (76,50) light variant · logo 1:45 centred (887,24 146x87)
          · menu icon 1:69 at (1807,42) 40x40 #36190B.
   Top of page: transparent, Figma geometry (calc(N * var(--u))).
   Scrolled (.is-stuck from main.js): white translucent bar, 84px high,
   items centred vertically, CTA swapped to the dark variant by main.js.
   ========================================================================= */

#site-header {
  --hh: max(64px, calc(135 * var(--u)));       /* bar height at the top */
  --tg: max(44px, calc(40 * var(--u)));        /* menu button box */
  --logo-w: max(96px, calc(152.4 * var(--u)));  /* glyphs span 888-1031 like 1:45 */
  --logo-h: calc(var(--logo-w) * 0.5357);      /* official SVG 2240x1200 */
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  block-size: var(--hh);
  background: transparent;
  transition: background-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              block-size var(--dur) var(--ease);
}

/* ---- CTA (physical left) ------------------------------------------------- */
#site-header .site-header__cta {
  position: absolute;
  left: max(16px, calc(76 * var(--u)));
  top: max(12px, calc(50 * var(--u)));
  transition: top var(--dur) var(--ease);
}

/* ---- logo (centre) - official SVG used as a mask, tinted ink --------------- */
#site-header .site-header__brand {
  position: absolute;
  left: 50%;
  top: calc(25 * var(--u));
  transform: translateX(-50%);
  display: block;
  line-height: 0;
  border-radius: 4px;
  transition: top var(--dur) var(--ease);
}
#site-header .site-header__logo {
  display: block;
  inline-size: var(--logo-w);
  block-size: var(--logo-h);
  background: var(--fg-ink);
  -webkit-mask: url(../../assets/icons/ruth-logo-transparent.svg) center / contain no-repeat;
          mask: url(../../assets/icons/ruth-logo-transparent.svg) center / contain no-repeat;
  transition: inline-size var(--dur) var(--ease), block-size var(--dur) var(--ease);
}

/* ---- menu button (physical right), centre of 1:69 = (1827,62) ------------- */
#site-header .site-header__toggle {
  position: absolute;
  right: calc(max(16px, 93 * var(--u) - var(--tg) / 2));
  top: calc(62 * var(--u) - var(--tg) / 2);
  inline-size: var(--tg);
  block-size: var(--tg);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--fg-ink);
  cursor: pointer;
  transition: top var(--dur) var(--ease), background-color var(--dur-fast) var(--ease);
}
#site-header .site-header__toggle svg {
  inline-size: max(28px, calc(31.667 * var(--u)));
  block-size: auto;
  fill: currentColor;
}
#site-header .site-header__toggle:hover { background: rgba(93, 40, 9, .08); }

#site-header .site-header__brand:focus-visible,
#site-header .site-header__toggle:focus-visible {
  outline: 2px solid var(--fg-brown);
  outline-offset: 3px;
}

/* ---- scrolled state ------------------------------------------------------- */
#site-header.is-stuck {
  --hh: var(--header-h);                         /* 84px - matches anchor offset */
  --logo-w: 104px;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(93, 40, 9, .12);
}
#site-header.is-stuck .site-header__cta    { top: calc((var(--hh) - max(40px, 39 * var(--u))) / 2); }
#site-header.is-stuck .site-header__brand  { top: calc((var(--hh) - var(--logo-h)) / 2); }
#site-header.is-stuck .site-header__toggle { top: calc((var(--hh) - var(--tg)) / 2); }

/* ---- small screens -------------------------------------------------------- */
@media (max-width: 767.98px) {
  #site-header {
    --hh: 64px;
    --logo-w: 92px;
  }
  #site-header.is-stuck { --hh: 60px; --logo-w: 84px; }
  #site-header .site-header__brand  { top: calc((var(--hh) - var(--logo-h)) / 2); }
  #site-header .site-header__cta    { top: calc((var(--hh) - 40px) / 2); }
  #site-header .site-header__toggle { top: calc((var(--hh) - var(--tg)) / 2); right: 10px; }
  /* keep only the outlined pill so it never collides with the centred logo */
  #site-header .site-header__cta .rs-cta__neck,
  #site-header .site-header__cta .rs-cta__disc { display: none; }
  #site-header .site-header__cta .rs-cta__pill {
    min-inline-size: 0;
    padding-inline: 16px;
    font-size: 16px;
  }
}

/* =========================================================================
   OVERLAY MENU (#site-menu) - caramel panel with the hero grain, slides in
   from the right (reading start). main.js toggles [hidden] + .is-open.
   ========================================================================= */
#site-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-top);            /* above the floating WhatsApp button (1000) */
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
#site-menu.is-open { opacity: 1; visibility: visible; }

#site-menu .site-menu__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(54, 25, 11, .45);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}

#site-menu .site-menu__panel {
  position: absolute;
  inset-block: 0;
  right: 0;
  z-index: var(--z-menu);
  inline-size: min(480px, 100vw);
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 5vh, 56px);
  padding: 24px clamp(24px, 4vw, 56px) 32px;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--fg-paper);
  background: url(../../assets/figma/hero-grain-soft.svg) 0 0 / 256px 256px repeat, #93552F;   /* = hero panel */
  box-shadow: -24px 0 60px rgba(54, 25, 11, .25);
  transform: translateX(100%);
  transition: transform var(--dur) var(--ease-out);
}
#site-menu.is-open .site-menu__panel { transform: none; }

#site-menu .site-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block-end: 20px;
  border-block-end: 1px solid rgba(255, 255, 255, .35);
}
#site-menu .site-menu__logo {
  inline-size: 110px;
  block-size: 59px;
  background: var(--fg-paper);
  -webkit-mask: url(../../assets/icons/ruth-logo-transparent.svg) center / contain no-repeat;
          mask: url(../../assets/icons/ruth-logo-transparent.svg) center / contain no-repeat;
}
#site-menu .site-menu__close {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 50%;
  background: transparent;
  color: var(--fg-paper);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease);
}
#site-menu .site-menu__close:hover { background: rgba(255, 255, 255, .14); }

#site-menu .site-menu__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.4vh, 14px);
}
#site-menu .site-menu__link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-block-size: 44px;
  font-family: var(--font-heb);
  font-weight: var(--fw-light);
  font-size: clamp(26px, 2.3vw, 36px);
  line-height: 1.1;
  color: var(--fg-paper);
  text-decoration: none;
}
#site-menu .site-menu__link::before {
  content: "";
  inline-size: 14px;
  block-size: 14px;
  background: var(--fg-paper);
  -webkit-mask: url(../../assets/icons/sparkle.svg) center / contain no-repeat;
          mask: url(../../assets/icons/sparkle.svg) center / contain no-repeat;
  opacity: 0;
  transform: scale(.4);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
#site-menu .site-menu__link:hover::before,
#site-menu .site-menu__link:focus-visible::before { opacity: 1; transform: none; }

#site-menu a:focus-visible,
#site-menu button:focus-visible {
  outline: 2px solid var(--fg-paper);
  outline-offset: 3px;
}

#site-menu .site-menu__foot {
  margin-block-start: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-block-start: 20px;
  border-block-start: 1px solid rgba(255, 255, 255, .35);
  font-family: var(--font-heb);
  font-weight: var(--fw-light);
  font-size: 18px;
}
#site-menu .site-menu__contact-line {
  display: inline-flex;
  gap: .4em;
  min-block-size: 36px;
  align-items: center;
  color: rgba(255, 255, 255, .88);
  text-decoration: none;
}
#site-menu a.site-menu__contact-line:hover { color: var(--fg-paper); text-decoration: underline; text-underline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  #site-header, #site-header *,
  #site-menu, #site-menu .site-menu__panel { transition: none; }
}