/* ═══════════════════════════════════════════════════════════════════
   chrome.css — HEDj site chrome: header, mobile nav, footer.

   Paired with js/site-chrome.js, which INJECTS the header + mobile-nav +
   footer markup into every page at runtime. This file styles that markup.
   Keeping the two together means the whole site frame is one portable
   module: any page that loads them gets a consistent header and footer.

   Depends on:
     • css/tokens.css  → design tokens (colours, spacing, radii, fonts)
     • a few shared utilities from css/styles.css (.container, .btn, .eyebrow)

   Load order on every page:  tokens.css → styles.css → chrome.css

   NEW PAGE CHECKLIST — to get the header/footer on a brand-new page, add:
     <link rel="stylesheet" href="/css/tokens.css">
     <link rel="stylesheet" href="/css/styles.css">
     <link rel="stylesheet" href="/css/chrome.css">
     <script src="/js/tools-data.js"></script>
     <script src="/js/site-chrome.js"></script>
   Nothing else is required — the chrome injects and styles itself.
   ═══════════════════════════════════════════════════════════════════ */

/* ════════════════════════ HEADER ════════ */
.site-header { position:fixed; inset:0 0 auto 0; z-index:1000; height:var(--header-h); display:flex; align-items:center;
  transition:background .3s var(--ease), border-color .3s; border-bottom:1px solid transparent; color:var(--ink); }
.site-header__inner { width:100%; max-width:var(--container-wide); margin:0 auto; padding-inline:var(--pad-x);
  display:flex; align-items:center; gap:1.75rem; }
.site-header.scrolled { background:color-mix(in srgb, var(--bone) 88%, transparent); backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px); border-bottom-color:var(--ink); }
.logo { display:flex; align-items:center; gap:.7rem; flex-shrink:0; }
.logo__img { height:36px; width:auto; }
.logo__text { display:flex; flex-direction:column; line-height:1; }
.logo__name { display:inline-flex; align-items:center; }
/* brand wordmark image (from the supplied logo) — swaps by theme so it reads on both */
.logo__word { display:block; width:auto; height:1.35rem; }
.logo__word--dark { display:none; }
[data-theme="dark"] .logo__word--light { display:none; }
[data-theme="dark"] .logo__word--dark { display:block; }
.logo__tagline { font-family:var(--font-mono); font-size:.5rem; letter-spacing:.16em; text-transform:uppercase; opacity:.62; margin-top:.32em; }
.nav { display:flex; align-items:center; gap:1.5rem; margin-left:auto; flex-shrink:0; }
.nav__link { position:relative; font-size:.9rem; font-weight:600; transition:color .2s; white-space:nowrap; }
.nav__link::after { content:''; position:absolute; left:0; bottom:-5px; width:100%; height:3px; background:var(--lime); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); }
.nav__link:hover::after { transform:scaleX(1); }
.nav__drop { position:relative; display:inline-flex; align-items:center; }
/* font/line-height/padding must be inherited/reset — otherwise the <button>
   uses the UA button font metrics and sits ~1px lower than the <a> nav links */
.nav__drop-btn { background:none; border:none; margin:0; padding:0; color:inherit; cursor:pointer;
  font-family:inherit; font-size:.9rem; font-weight:600; line-height:1;
  display:inline-flex; align-items:center; gap:.35em; white-space:nowrap; }
.nav__drop-btn svg { width:.7em; height:.7em; }
.nav__drop-menu { position:absolute; top:calc(100% + 14px); right:0; min-width:248px; padding:.85rem; background:var(--paper);
  border:2px solid var(--ink); box-shadow:var(--sh-card); opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s; }
.nav__drop:hover .nav__drop-menu { opacity:1; visibility:visible; transform:translateY(0); }
.badge-soon { display:inline-block; font-family:var(--font-mono); font-size:.6rem; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; color:var(--lime-ink); background:var(--lime); border:1px solid var(--ink); padding:.25em .7em; margin-bottom:.6rem; }
.nav__drop-item { display:block; padding:.5em .6em; font-size:.85rem; color:var(--text-muted); opacity:.5; pointer-events:none; }
/* clickable dropdown links (About Us, Tools) */
.nav__drop-link { display:block; padding:.5em .6em; font-size:.85rem; font-weight:500; color:var(--text-muted); border-radius:4px;
  white-space:nowrap; transition:background .2s, color .2s; }
.nav__drop-link:hover { color:var(--ink); background:color-mix(in srgb, var(--lime) 14%, transparent); }
/* Tools mega-menu — 4 columns, centred under the header */
.nav__drop--mega { position:static; }
.nav__drop-menu--mega { left:50%; right:auto; transform:translate(-50%,8px); width:min(940px,94vw);
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.1rem 1.2rem; padding:1.4rem 1.6rem; }
.nav__drop--mega:hover .nav__drop-menu--mega,
.nav__drop--mega:focus-within .nav__drop-menu--mega { transform:translate(-50%,0); }
.nav__mega-col { display:flex; flex-direction:column; }
.nav__mega-title { font-family:var(--font-mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-soft); margin:.1rem .6em .55rem; }
.header-actions { display:flex; align-items:center; gap:.7rem; flex-shrink:0; }
/* actions must not shrink, or the CTA button (overflow:hidden) silently clips its
   label instead of overflowing — which would hide the overflow from fitChrome. */
.header-actions .btn--primary, .header-cta-login { flex-shrink:0; }
/* uniform height for EVERY header control so their boxes line up (switcher,
   Log In, Get Early Access, theme). Each otherwise sizes off its own font, so
   they came out at 33 / 41 / 47 px. Higher specificity than the switcher's own
   injected .hedj-lang-btn rule and the .btn height, so it wins. */
.header-actions .hedj-lang-btn,
.header-actions .header-cta-login,
.header-actions .btn--primary,
.header-actions .theme-toggle {
  height: 2.6rem;
  min-height: 2.6rem;
  padding-block: 0;
}
.header-actions .theme-toggle { width: 2.6rem; }
.theme-toggle { display:inline-flex; align-items:center; justify-content:center; width:2.4em; height:2.4em; border:2px solid var(--ink);
  border-radius:var(--r-md); background:none; color:var(--ink); transition:background .2s,color .2s; }
@media (hover:hover){ .theme-toggle:hover { background:var(--ink); color:var(--bone); } }
.theme-toggle svg { width:1em; height:1em; stroke:currentColor; stroke-width:2; fill:none; }
.theme-toggle .moon { display:none; }
[data-theme="dark"] .theme-toggle .sun { display:none; }
[data-theme="dark"] .theme-toggle .moon { display:block; }
.header-cta-login { font-size:.9rem; font-weight:700; display:inline-flex; align-items:center; padding:.5em .9em;
  border:2px solid var(--ink); border-radius:var(--r-md); background:var(--ink); color:var(--bone); transition:background .2s,color .2s; }
.header-cta-login:hover { background:transparent; color:var(--ink); }
.burger { display:none; flex-direction:column; gap:5px; width:2.6em; height:2.6em; align-items:center; justify-content:center; border:2px solid var(--ink); background:none; }
.burger span { display:block; width:18px; height:2px; background:var(--ink); transition:transform .3s var(--ease), opacity .3s; }
body.nav-open .burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.nav-open .burger span:nth-child(2){ opacity:0; }
body.nav-open .burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* current-page markers set by site-chrome.js */
.nav__drop-link.is-current { color:var(--ink); font-weight:700; }
.nav__link.is-active { color:var(--ink); }
.nav__link.is-active::after { transform:scaleX(1); }

/* ════════════════════════ MOBILE NAV ════════ */
/* theme-aware panel: cream in light mode, forest-dark in dark mode (tokens flip) */
.mobile-nav { position:fixed; inset:0; z-index:999; background:var(--bone); color:var(--text); display:flex; flex-direction:column;
  justify-content:flex-start; gap:.15rem; padding:calc(var(--header-h) + 1.4rem) var(--pad-x) 1.25rem; overflow-y:auto;
  counter-reset:mnav; border-top:2px solid var(--ink);
  opacity:0; visibility:hidden; transform:translateY(-2%);
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s; }
body.nav-open .mobile-nav { opacity:1; visibility:visible; transform:translateY(0); }
.mobile-nav a { display:flex; align-items:baseline; gap:.8em; counter-increment:mnav;
  font-family:var(--font-display); font-size:clamp(1.35rem,5.6vw,1.7rem); font-weight:600;
  padding:.5em 0; border-bottom:1px solid var(--line); color:var(--text); }
.mobile-nav a::before { content:counter(mnav, decimal-leading-zero); font-family:var(--font-mono);
  font-size:.56em; font-weight:500; color:var(--green-3); letter-spacing:.05em; }
.mobile-nav__label { font-family:var(--font-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-soft); margin-top:1.5rem; margin-bottom:.15rem; }
.mobile-nav__label:first-child { margin-top:0; }
/* actions follow the menu (was margin-top:auto, which left a big void now that
   Tools/News/Industries/Careers are hidden and the menu is short) */
.mobile-nav .mobile-actions { display:flex; flex-direction:column; gap:.7rem;
  margin-top:clamp(1.6rem,5vh,2.6rem); padding-top:1.6rem; border-top:2px solid var(--ink);
  padding-bottom:max(.5rem, env(safe-area-inset-bottom)); }
.mobile-nav .mobile-actions .btn { width:100%; height:3.4em; }
.mobile-nav .mobile-actions .btn--on-dark-ghost { background:transparent; color:var(--ink); border-color:var(--ink); }
/* action buttons are buttons, not menu entries — no counter, btn typography,
   and center the label (the menu-item baseline/gap must not leak in) */
.mobile-nav .mobile-actions a { counter-increment:none; justify-content:center; align-items:center; gap:.5em;
  font-family:var(--font-sans); font-size:var(--fs-sm); font-weight:700; padding:0 1.5em; }
/* keep the full 2px button border — the menu-link hairline was eating the bottom edge */
.mobile-nav .mobile-actions .btn { border:2px solid var(--ink); }
.mobile-nav .mobile-actions a::before { content:none; }

/* ════════════════════════ FOOTER ════════ */
/* footer follows the page theme: white bg in light mode, near-black in dark mode */
.site-footer { background:var(--bone); color:var(--text-muted); padding-block:clamp(3.5rem,6vw,5rem) 2rem; }
.footer-brand { display:flex; align-items:center; gap:.9rem; margin-bottom:3rem; }
.footer-brand img { height:40px; }
.footer-brand .logo__name { color:var(--ink); font-size:1.5rem; }
.footer-brand .logo__word { height:1.55rem; }
.footer-brand .logo__tagline { color:var(--text-soft); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1.1fr 1fr; gap:clamp(2rem,4vw,4rem); padding-bottom:3rem; border-bottom:1px solid var(--line); }
.footer-col h4 { font-family:var(--font-display); font-size:1.05rem; font-weight:600; color:var(--ink); margin-bottom:1.1rem; }
.footer-col h4:not(:first-child) { margin-top:1.6rem; }
.footer-col p { font-size:.9rem; line-height:1.6; margin-bottom:.7rem; }
.footer-col p strong { color:var(--text); }
.footer-link { display:block; font-size:.9rem; padding:.3em 0; color:var(--text-muted); transition:color .2s, padding-left .2s; }
.footer-link:hover { color:var(--lime); padding-left:.4em; }
.footer-link.disabled { opacity:.4; pointer-events:none; }
/* footer-link--btn: reuses footer-link's look on a real <button> (Cookie Settings
   reopens the consent panel — it isn't a navigable href) */
.footer-link--btn { background:none; border:none; font:inherit; text-align:left; cursor:pointer; width:100%; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; padding-top:1.8rem; font-size:.82rem; color:var(--text-soft); }
.footer-bottom__links { display:flex; gap:1.4rem; align-items:center; }
.footer-bottom__links a:hover { color:var(--lime); }
.footer-bottom__link-btn { background:none; border:none; font:inherit; color:inherit; cursor:pointer; padding:0; }
.footer-bottom__link-btn:hover { color:var(--lime); }

/* ════════════════════════ COOKIE CONSENT ════════ */
.consent-banner { position:fixed; inset:auto 0 0 0; z-index:2000; background:var(--paper); border-top:2px solid var(--ink);
  box-shadow:0 -12px 40px rgba(0,0,0,.18); }
.consent-banner__inner { max-width:var(--container-wide); margin:0 auto; padding:1.4rem var(--pad-x);
  display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap; }
.consent-banner__text { flex:1 1 420px; font-size:.88rem; line-height:1.6; color:var(--text-muted); margin:0; }
.consent-banner__text a { color:var(--ink); text-decoration:underline; }
.consent-banner__actions { display:flex; gap:.7rem; flex-wrap:wrap; flex-shrink:0; }
.consent-banner__actions .btn { height:2.6em; padding:0 1.1em; font-size:.82rem; white-space:nowrap; }

.consent-modal { position:fixed; inset:0; z-index:2100; background:rgba(17,17,17,.55); display:flex; align-items:center; justify-content:center; padding:1.5rem; }
.consent-modal__panel { width:min(520px,100%); max-height:85vh; overflow-y:auto; background:var(--paper); border:2px solid var(--ink);
  box-shadow:var(--sh-card); padding:2rem; }
.consent-modal__title { font-family:var(--font-display); font-size:1.4rem; font-weight:600; color:var(--ink); margin-bottom:1.3rem; }
.consent-modal__row { display:flex; align-items:flex-start; justify-content:space-between; gap:1.2rem; padding:1rem 0; border-top:1px solid var(--line); }
.consent-modal__row:first-of-type { border-top:none; }
.consent-modal__copy strong { display:block; font-size:.94rem; color:var(--ink); margin-bottom:.25rem; }
.consent-modal__copy p { font-size:.84rem; line-height:1.55; color:var(--text-muted); margin:0; }
.consent-modal__row input[type="checkbox"] { width:20px; height:20px; accent-color:var(--lime); flex-shrink:0; margin-top:.15rem; }
.consent-modal__actions { display:flex; justify-content:flex-end; gap:.7rem; margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid var(--line); }
.consent-modal__actions .btn { height:2.7em; padding:0 1.3em; font-size:.85rem; }
@media (max-width:640px) {
  .consent-banner__actions { width:100%; }
  .consent-banner__actions .btn { flex:1 1 auto; }
}

.header-cta-login { white-space:nowrap; }
.header-actions .btn--primary .btn__label { white-space:nowrap; }
.nav__link, .nav__drop-btn { white-space:nowrap; }

/* ── responsive header (width-based, reliable in every language) ──────────
   Translated labels (German/French/…) are wider than English, so the
   breakpoints target the WIDEST language. At wide widths EVERY element is
   visible in EVERY language (logo + tagline + full nav + switcher + Log In +
   Get Early Access + theme). As the width shrinks, the least important things
   drop first. Pure CSS, so it never depends on Google Translate's timing. */

/* ≤1440px — drop the decorative logo tagline to reclaim space */
@media (max-width:1440px){
  .logo__tagline { display:none; }
}
/* ≤1280px — tighten spacing + fonts so the FULL nav and ALL buttons keep
   fitting (nav is NOT hidden here — every element stays visible) */
@media (max-width:1280px){
  .site-header__inner { gap:.8rem; }
  .nav { gap:.85rem; }
  .nav__link, .nav__drop-btn { font-size:.8rem; }
  .header-actions { gap:.4rem; }
  .header-cta-login { padding:.45em .65em; font-size:.82rem; }
  .header-actions .btn--primary { padding:.5em .8em; }
  .header-actions .btn--primary .btn__label { font-size:.82rem; }
}
/* ≤960px — only now is it genuinely too tight (even the widest language,
   German, overflows below ~945px): fold the nav into the burger menu.
   Get Early Access + Log In + switcher + theme stay visible. */
@media (max-width:960px){
  .nav, .header-actions .nav__drop { display:none; }
  #google_translate_element { order:1; }
  .theme-toggle { order:1; }
  .header-cta-login { order:2; }
  .header-actions .btn--primary { order:3; }
  .burger { display:flex; order:4; }
  .mobile-nav { display:flex; }
  .site-header__inner { gap:.9rem; }
}


/* ════════════════════════ RESPONSIVE ════════ */
@media (max-width:1080px){
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  /* header collapses to logo + actions + burger (nav hidden) */
  .nav,.header-actions .nav__drop,.header-actions .btn--primary { display:none; }
  .burger { display:flex; }
  .site-header__inner { gap:.75rem; }
  .logo__tagline { display:none; }                 /* free up room for the header buttons */
  .header-actions { gap:.5rem; margin-left:auto; flex-shrink:0; }
  .header-cta-login { padding:.45em .75em; font-size:.8rem; order:3; white-space:nowrap; }
  .theme-toggle { order:1; }
  .burger { order:2; }
  /* compact footer: company info full-width on top, link groups in 2 tidy columns */
  .site-footer { padding-block:2.4rem 1.4rem; }
  .footer-brand { margin-bottom:1.5rem; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:1.5rem 1.1rem; padding-bottom:1.6rem; }
  .footer-col:first-child { grid-column:1 / -1; }
  .footer-col h4 { font-size:.92rem; margin-bottom:.65rem; }
  .footer-col h4:not(:first-child) { margin-top:1.3rem; }
  .footer-col p { font-size:.85rem; margin-bottom:.5rem; }
  .footer-link { font-size:.85rem; padding:.28em 0; }
  .footer-bottom { flex-direction:column; align-items:flex-start; gap:.6rem; padding-top:1.3rem; }
}
@media (min-width:961px){ .mobile-nav { display:none; } }
@media (max-width:560px){
  .site-header__inner { padding-inline:16px; }
  /* the language switcher now occupies a header slot; on phones drop the header
     Log In (it still lives in the burger menu) so logo + switcher + theme +
     burger fit without crowding — matters most for longer translated labels */
  .header-cta-login { display:none; }
  .logo { gap:.5rem; }
  .logo__img { height:30px; }
  .logo__name { font-size:1.2rem; }
  .logo__tagline { font-size:.44rem; letter-spacing:.1em; }
  .theme-toggle { width:2.2em; height:2.2em; }
  .burger { width:2.3em; height:2.3em; }
}