/* ============================================================
   chrome.css — the ONE shared header + footer stylesheet for BOTH
   site families (Hover product pages on style.css / solutions.css,
   and the Nebli corporate pages on nebli.css).

   Why this file exists (hov-1ey96): the header + footer had drifted
   into multiple renderers with per-family copies of the lockup/nav/
   footer CSS (style.css, solutions.css, nebli.css, plus inline blocks
   in the schools + compare templates). A family missing a rule =
   visible chrome drift. This file is the single copy; both families
   link it (busted via meta.chrome_buster). Exactly one copy of the
   header + footer CSS lives here now.

   SELF-SUFFICIENT + ALWAYS-DARK. The chrome does NOT inherit any
   family token (style.css --t and --bg ramps, solutions.css --t1 /
   --olive, nebli.css --surface and --text ramps): those tokens differ
   per family and some are undefined on the others, which is exactly
   what broke. Every
   value here is either a concrete literal or a --chrome-* property
   defined below. The bar is always dark (like the already-hardcoded
   dark footer) so it renders pixel-identically on the always-dark
   product pages AND the cream corporate pages — a dark header + dark
   footer bookend the content on every page.
   ============================================================ */

.site-header,
.site-footer {
  /* Ground tokens — concrete, no family inheritance. */
  --chrome-bg: #0A0A0A;                       /* dark page ground        */
  --chrome-header-bg: rgba(10, 10, 10, 0.88); /* translucent sticky bar  */
  --chrome-fg: #ECECEF;                        /* off-white text          */
  --chrome-fg-muted: #A6A59B;                  /* muted / captions        */
  --chrome-line: rgba(236, 236, 239, 0.12);    /* hairline on dark        */
  --chrome-line-strong: #2C2B25;               /* footer base divider     */
  --chrome-olive: #BBB06A;                     /* brand accent / wedge    */
  --chrome-olive-hover: #C8C074;               /* primary button hover    */
  --chrome-ink: #0A0A0E;                       /* text on olive fills     */

  --chrome-font-display: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --chrome-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --chrome-font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
}

/* ============================================================
   Brand lockup — shared by header AND footer.
   Nebli falcon + NEBLI wordmark (always the dark-adapted falcon, since
   the chrome is always dark), optional divider + ◉ HOVER product mark.
   ============================================================ */
.site-header .brand-lockup,
.site-footer .brand-lockup { display: inline-flex; align-items: center; gap: 12px; }

.site-header .brand-falcon,
.site-footer .brand-falcon { width: auto; display: block; }
.site-header .brand-falcon { height: 32px; }
.site-footer .brand-falcon { height: 38px; }
/* Always-dark chrome → always show the dark-adapted falcon art. */
.site-header .brand-falcon--light,
.site-footer .brand-falcon--light { display: none; }
.site-header .brand-falcon--dark,
.site-footer .brand-falcon--dark { display: block; }

.site-header .brand-nebli,
.site-footer .brand-nebli { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }

.site-header .brand-nebli-wm,
.site-footer .brand-nebli-wm {
  font-family: var(--chrome-font-display);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--chrome-fg); line-height: 1;
  display: inline-flex; margin-right: -0.22em; white-space: nowrap;
}
.site-header .brand-nebli-wm { font-size: 19.2px; }
.site-footer .brand-nebli-wm { font-size: 22.8px; }
.site-header .brand-nebli-n,
.site-footer .brand-nebli-n { position: relative; }
.site-header .brand-nebli-wedge,
.site-footer .brand-nebli-wedge {
  position: absolute; top: 0.27em; left: 0.17em; width: 0.135em; height: 0.2em;
  background: var(--chrome-olive); clip-path: polygon(0 0, 100% 0, 0 100%);
}
.site-header .brand-div,
.site-footer .brand-div { width: 1px; height: 22px; background: var(--chrome-line-strong); display: inline-block; }

/* ◉ HOVER product mark (header only, product context). */
.site-header .brand-hover {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--chrome-font-body); font-weight: 600; font-size: 15px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--chrome-fg); text-decoration: none;
}
.site-header .brand-hover i,
.site-header .brand-hover em { font-style: normal; color: var(--chrome-olive); margin-left: -4px; }
.site-header .brand-hover__mk {
  width: 21px; height: 21px; border: 1.5px solid var(--chrome-olive); border-radius: 50%;
  position: relative; flex: none;
}
.site-header .brand-hover__mk::after {
  content: ""; position: absolute; inset: 4.5px; background: var(--chrome-olive); border-radius: 50%;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--chrome-header-bg);
  -webkit-backdrop-filter: saturate(1.1) blur(10px);
  backdrop-filter: saturate(1.1) blur(10px);
  border-bottom: 1px solid var(--chrome-line);
}
.site-header__inner {
  /* Match .container (style.css): content column is 1200px with 28px gutters. */
  max-width: 1200px; margin: 0 auto;
  padding: 16px 28px;
  display: flex; align-items: center; gap: 32px;
}
.site-nav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.site-nav__link {
  font-family: var(--chrome-font-body); font-size: 14px; font-weight: 500;
  color: var(--chrome-fg-muted); text-decoration: none; padding: 6px 2px;
  letter-spacing: 0.01em; position: relative; white-space: nowrap;
  transition: color 0.14s ease;
}
.site-nav__link:hover { color: var(--chrome-fg); }
.site-nav__link[aria-current="true"],
.site-nav__link.is-current { color: var(--chrome-fg); }
.site-nav__link[aria-current="true"]::after,
.site-nav__link.is-current::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -17px; height: 2px; background: var(--chrome-olive);
}
.site-header__actions { display: flex; align-items: center; gap: 12px; }

/* In-nav language switch — compact, dependency-free <details> dropdown (product
   + schools pages that carry a locale set). The summary shows the CURRENT locale
   + a caret; the panel lists the OTHER locales. No JS needed to open (native
   <details>); a tiny inline script in the header partial closes it on outside
   click. Mono, uppercase, always-dark to match the rest of the chrome. */
.site-header .chrome-lang-dd { position: relative; display: inline-flex; }
.site-header .chrome-lang-dd > summary {
  list-style: none; cursor: pointer; user-select: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--chrome-font-mono); font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--chrome-fg-muted);
  padding: 6px 6px; border-radius: 6px; transition: color 0.14s ease, background 0.14s ease;
}
.site-header .chrome-lang-dd > summary::-webkit-details-marker { display: none; }
.site-header .chrome-lang-dd > summary::marker { content: ""; }
.site-header .chrome-lang-dd > summary:hover,
.site-header .chrome-lang-dd[open] > summary { color: var(--chrome-fg); }
.site-header .chrome-lang-dd > summary:focus-visible {
  outline: 2px solid var(--chrome-olive); outline-offset: 2px;
}
.site-header .chrome-lang-dd__caret {
  width: 0; height: 0; flex: none;
  border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor; opacity: 0.75;
  transition: transform 0.14s ease;
}
.site-header .chrome-lang-dd[open] .chrome-lang-dd__caret { transform: rotate(180deg); }
.site-header .chrome-lang-dd__panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  display: flex; flex-direction: column; gap: 1px; min-width: 88px;
  padding: 5px; border-radius: 8px;
  background: var(--chrome-bg); border: 1px solid var(--chrome-line-strong);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
.site-header .chrome-lang-dd__panel a {
  font-family: var(--chrome-font-mono); font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--chrome-fg-muted);
  text-decoration: none; padding: 7px 12px; border-radius: 5px; white-space: nowrap;
  transition: color 0.14s ease, background 0.14s ease;
}
.site-header .chrome-lang-dd__panel a:hover { color: var(--chrome-fg); background: rgba(236, 236, 239, 0.07); }

/* Chrome buttons — ONE button system for the header CTAs (Log in / Sign up /
   See the platform). Namespaced .chrome-btn so it never collides with the
   on-page .btn / .nb-btn systems that remain in the family stylesheets. */
.site-header .chrome-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--chrome-font-body); font-size: 13.5px; font-weight: 600;
  letter-spacing: 0.02em; line-height: 1; white-space: nowrap;
  padding: 9px 16px; border-radius: 6px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer; transition: background 0.14s, border-color 0.14s, color 0.14s;
}
.site-header .chrome-btn--primary { background: var(--chrome-olive); color: var(--chrome-ink); border-color: var(--chrome-olive); }
.site-header .chrome-btn--primary:hover { background: var(--chrome-olive-hover); border-color: var(--chrome-olive-hover); }
.site-header .chrome-btn--ghost { background: transparent; color: var(--chrome-fg); border-color: var(--chrome-line-strong); }
.site-header .chrome-btn--ghost:hover { border-color: var(--chrome-olive); }

/* Mobile burger + panel (product pages only; corporate just hides the nav). */
.site-nav__burger {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; padding: 0 9px;
  background: none; border: 1px solid var(--chrome-line-strong); border-radius: 8px; cursor: pointer;
}
.site-nav__burger span { display: block; height: 2px; width: 100%; background: var(--chrome-fg); border-radius: 2px; transition: transform .2s, opacity .2s; }
.site-nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.site-nav__mobile { display: none; flex-direction: column; padding: 6px 28px 18px; }
.site-header.is-open .site-nav__mobile { display: flex; }
.site-nav__mobile a { color: var(--chrome-fg-muted); font-size: 17px; text-decoration: none; padding: 13px 2px; border-bottom: 1px solid var(--chrome-line); }
.site-nav__mobile a:hover { color: var(--chrome-fg); }
.site-nav__mobile-lang { padding: 16px 2px 0; font-family: var(--chrome-font-mono); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--chrome-fg-muted); }
.site-nav__mobile-lang a { display: inline; padding: 0; border: none; font-size: 14px; color: var(--chrome-fg-muted); text-decoration: none; }
.site-nav__mobile-lang [aria-current="page"] { color: var(--chrome-olive); font-weight: 600; }
.site-nav__mobile-lang .chrome-lang__sep { color: var(--chrome-line-strong); }

@media (max-width: 900px) {
  .site-nav { display: none; }
  /* Product pages expose the burger; corporate pages have no burger, so the
     nav simply hides (matches the prior corporate mobile behaviour). */
  .site-header--mobile .site-nav__burger { display: inline-flex; }
  .site-header__actions { margin-left: auto; }
  /* Secondary CTA (ghost / Log in) folds into the menu; primary stays inline. */
  .site-header--mobile .site-header__actions .chrome-btn--ghost { display: none; }
}

/* ============================================================
   FOOTER  (always dark — hardcoded data-theme="dark" on the element)
   ============================================================ */
.site-footer { background: var(--chrome-bg); color: var(--chrome-fg); padding-top: 5rem; padding-bottom: 2.5rem; }
.site-footer__inner { max-width: 1200px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr 1fr; gap: 2.5rem; }
.foot-col { display: flex; flex-direction: column; gap: 0.75rem; }
.foot-col__h {
  font-family: var(--chrome-font-body); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--chrome-fg-muted); margin-bottom: 4px;
}
.foot-link {
  font-family: var(--chrome-font-body); font-size: 0.875rem; color: var(--chrome-fg);
  text-decoration: none; opacity: 0.82; transition: opacity 0.14s ease;
}
.foot-link:hover { opacity: 1; }

/* Brand column — tagline + blurb under the lockup. */
.site-footer .foot-tagline {
  font-family: var(--chrome-font-display); font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.22em; color: var(--chrome-olive); font-size: 12px; margin-top: 14px;
}
.site-footer .foot-blurb { color: var(--chrome-fg-muted); font-size: 13px; line-height: 1.5; max-width: 30ch; margin-top: 10px; }

.site-footer__base {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--chrome-line-strong); flex-wrap: wrap;
}
.foot-meta { font-family: var(--chrome-font-mono); font-size: 11px; color: var(--chrome-fg-muted); letter-spacing: 0.03em; }

@media (max-width: 900px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .site-footer__grid { grid-template-columns: 1fr; gap: 2rem; }
}

@media print { .site-header { position: static; } }

/* Small screens: the actions row (lang dropdown + CTA + burger) must never
   exceed the viewport. The mobile menu carries the language list, so the
   desktop dropdown hides and the row tightens. */
@media (max-width: 600px) {
  .site-header__inner { gap: 14px; padding: 14px 16px; }
  .site-header__actions { gap: 8px; }
  .site-header__actions > .chrome-lang-dd { display: none; }
  /* CTAs live inside the burger menu on phones; the bar keeps lockup + burger. */
  .site-header__actions > .chrome-btn { display: none; }
}