/* Header · sticky top bar + mobile drawer
 * States (modifiers on .gl-header):
 *   .is-scrolled     - past 8px scroll, applies glass
 *   .is-on-dark      - over a dark/saturated hero, transparent w/ white nav
 *   .is-on-light     - over a light hero (e.g. Press's gray-200 shape),
 *                      transparent but text/logo stay default (dark)
 * Exactly one transparency modifier should apply at a time.
 * Hover handled with CSS :hover (no React state).
 */

/* ── Outer ────────────────────────────────────────────────────────── */
.gl-header {
  /* Fixed (out of flow) so the header's actual rendered height never restricts
   * the page beneath it. Padding + logo height drive the height freely; a
   * ResizeObserver in app.jsx publishes the live height to :root --header-h
   * for layouts that need to clear the header (e.g. .gl-page-hero padding). */
  position: fixed;
  top: 0;
  left: 0;
  /* right tracks --scrollbar-comp so the header's right edge stays at the
   * same x when a modal/drawer locks body scroll and removes the scrollbar.
   * Without this, the fixed header visually widens by sbw on the right. */
  right: var(--scrollbar-comp, 0px);
  z-index: 50;
  background: var(--gray-0);
  border-bottom: 1px solid transparent;
  transition: background var(--duration-base) var(--ease-out),
              backdrop-filter var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}
.gl-header.is-scrolled {
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
          backdrop-filter: blur(20px) saturate(180%);
  border-bottom-color: rgba(226, 232, 240, 0.8);
}
.gl-header.is-on-dark,
.gl-header.is-on-light {
  background: transparent;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  border-bottom-color: transparent;
}
/* is-on-light intentionally has no text/logo overrides — defaults (dark) win */

/* ── Desktop / Mobile responsive switch (replaces .header-desktop/.header-mobile) ──
 *
 * Default :  padding: 2rem 3rem        (32px vertical breathing + 48px gutter)
 * Scrolled:  padding: 1rem 3rem        (16px vertical, header thins out)
 *
 * The header's actual rendered height is published as :root --header-h by
 * app.jsx (ResizeObserver), so layouts beneath (e.g. .gl-page-hero) follow
 * automatically. No hard-coded heights anywhere downstream. */
.gl-header__desktop {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
  margin: 0 auto;
  padding: 2rem 3rem;
  transition: padding var(--duration-base) var(--ease-out);
}
.gl-header.is-scrolled .gl-header__desktop { padding: 1rem 3rem; }

.gl-header__mobile {
  display: none;
  padding: 1rem var(--container-pad-x);
  align-items: center;
  justify-content: space-between;
  transition: padding var(--duration-base) var(--ease-out);
}
.gl-header.is-scrolled .gl-header__mobile { padding: 0.75rem var(--container-pad-x); }
.gl-header__mobile-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 1024px) {
  .gl-header__desktop { display: none; }
  .gl-header__mobile  { display: flex; }
  /* Mobile only · smooth height transition for the brand SVG so the
   * 60→32px shrink on `.is-scrolled` reads as a slide rather than a snap. */
  .gl-header__brand-link svg {
    transition: height var(--duration-base) var(--ease-out);
  }
}

/* ── Brand ────────────────────────────────────────────────────────── */
.gl-header__brand {
  display: flex;
  align-items: center;
  justify-self: start;
}
.gl-header__brand-link {
  display: flex;
  align-items: center;
  cursor: pointer;
}

/* ── Nav ──────────────────────────────────────────────────────────── */
.gl-header__nav {
  display: flex;
  gap: 16px;
  justify-self: center;
}
.gl-header__nav-link {
  position: relative;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--gray-700);
  background: transparent;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.gl-header__nav-link:hover {
  color: var(--gray-900);
  background: var(--gray-200);
}
.gl-header__nav-link.is-active {
  color: var(--gray-900);
  font-weight: 600;
  background: transparent;
}
.gl-header.is-on-dark .gl-header__nav-link {
  color: rgba(255, 255, 255, 0.78);
}
.gl-header.is-on-dark .gl-header__nav-link:hover {
  color: var(--gray-0);
  background: rgba(255, 255, 255, 0.18);
}
.gl-header.is-on-dark .gl-header__nav-link.is-active {
  color: var(--gray-0);
  background: transparent;
}

.gl-header__nav-underline {
  position: absolute;
  left: 50%;
  /* Fixed offset matching the scrolled-state header bottom. Default state's
   * larger header padding would visually disconnect the bar — keeping a
   * consistent -1rem keeps the underline tight to the link. */
  bottom: -1rem;
  width: 20px;
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--gray-0);
  transform: translateX(-50%);
  transition: background var(--duration-base) var(--ease-out);
}
.gl-header.is-scrolled .gl-header__nav-underline {
  background: var(--blue-500);
}
/* Over a dark hero · keep white even if scrolled-but-still-over-hero. */
.gl-header.is-on-dark .gl-header__nav-underline {
  background: var(--gray-0);
}

/* ── Trailing controls (lang toggle + CTA) ────────────────────────── */
.gl-header__trailing {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 20px;
}

.gl-lang-toggle {
  display: flex;
  gap: 0;
  padding: 3px;
  border-radius: var(--radius-full);
  background: var(--gray-100);
  border: 1px solid transparent;
  transition: background var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}
.gl-header.is-on-dark .gl-lang-toggle {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.16);
}

.gl-lang-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--gray-600);
  box-shadow: none;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.gl-lang-btn.is-active {
  background: var(--gray-0);
  color: var(--gray-900);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.gl-header.is-on-dark .gl-lang-btn {
  color: rgba(255, 255, 255, 0.7);
}
.gl-header.is-on-dark .gl-lang-btn.is-active {
  background: rgba(255, 255, 255, 0.95);
  color: var(--gray-900);
}

/* ── Theme toggle (sun · moon) · mirrors the language toggle pattern ── */
.gl-theme-toggle {
  display: flex;
  gap: 0;
  padding: 3px;
  border-radius: var(--radius-full);
  background: var(--gray-100);
  border: 1px solid transparent;
  transition: background var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}
.gl-header.is-on-dark .gl-theme-toggle {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.15);
}
.gl-theme-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 5px 8px;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--gray-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.gl-theme-btn.is-active {
  background: var(--gray-0);
  color: var(--gray-900);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.gl-header.is-on-dark .gl-theme-btn { color: rgba(255, 255, 255, 0.7); }
.gl-header.is-on-dark .gl-theme-btn.is-active {
  background: rgba(255, 255, 255, 0.95);
  color: var(--gray-900);
}

/* Drawer · theme + lang side-by-side row */
.gl-drawer__toggles {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ── Mobile hamburger ─────────────────────────────────────────────── */
.gl-header__hamburger {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--gray-900);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--duration-fast) var(--ease-out);
}
.gl-header__hamburger:hover {
  background: var(--gray-100);
}
.gl-header.is-on-dark .gl-header__hamburger {
  color: var(--gray-0);
}
.gl-header.is-on-dark .gl-header__hamburger:hover {
  background: rgba(255, 255, 255, 0.10);
}

/* ── Mobile drawer ────────────────────────────────────────────────── */
.gl-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--gray-0);
  display: flex;
  flex-direction: column;
  animation: fadeIn 180ms var(--ease-out);
}

.gl-drawer__header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Padding mirrors `.gl-header__mobile` so the drawer header height
   * tracks the main header's scroll-driven shrink, no fixed height. */
  padding: 1rem var(--container-pad-x);
  padding-right: 30px;
  border-bottom: 1px solid var(--gray-200);
  transition: padding var(--duration-base) var(--ease-out);
}
.gl-drawer.is-scrolled .gl-drawer__header {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.gl-drawer__close {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--gray-900);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--duration-fast) var(--ease-out);
}
.gl-drawer__close:hover { background: var(--gray-100); }

.gl-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 24px var(--container-pad-x) 32px;
  /* compensate scrollbar comp on right padding */
  padding-right: calc(var(--container-pad-x) + var(--scrollbar-comp, 0px));
}

.gl-drawer__nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 4px;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gray-800);
  cursor: pointer;
}
.gl-drawer__nav-link.is-active {
  color: var(--gray-900);
  font-weight: 700;
}
.gl-drawer__nav-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--blue-500);
}

.gl-drawer__footer {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px var(--container-pad-x) calc(24px + env(safe-area-inset-bottom));
  padding-right: calc(var(--container-pad-x) + var(--scrollbar-comp, 0px));
  border-top: 1px solid var(--gray-200);
}

.gl-drawer__lang-toggle {
  display: flex;
  align-self: flex-start;
  padding: 3px;
  border-radius: var(--radius-full);
  background: var(--gray-100);
}

.gl-drawer__lang-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--gray-600);
}
.gl-drawer__lang-btn.is-active {
  background: var(--gray-0);
  color: var(--gray-900);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.gl-drawer__copy {
  margin: 32px 0 0;
  padding-bottom: env(safe-area-inset-bottom);
  font-size: 12px;
  color: var(--gray-500);
  letter-spacing: -0.005em;
}

.gl-drawer__nav-cta {
  margin-top: 24px;
  padding: 4px;
}