/* nav-unify.css — canonical full site header + mobile menu + premium footer for
   the static marketing/legal pages. Injected by applyFullSiteHeader() in
   src/server/app.ts so every non-homepage marketing/legal page ships the SAME
   navigation as landing.html (Solutions dropdown, Pricing, Compare, Demo, theme
   toggle, Sign in, CTA, mobile hamburger) plus the full premium footer.

   The homepage header lives in landing.html and is styled by the landing-*.css
   bundle scoped to `body.qf-wft.landing-v2`. Those pages don't carry that body
   class, so this file re-expresses the SAME design token-first (theme-aware via
   style.css :root / html[data-theme="light"]) and unscoped by body — the
   .site-header / .nav-dd / .site-mobile-menu / .premium-footer classes are
   unique to this injected chrome, so unscoped rules are safe. */

/* ───────────────────────── Header shell ───────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 70;
  padding: 12px 20px 0;
  background: transparent;
}
.site-header-inner {
  max-width: 1180px;
  margin: 0 auto;
  min-height: 52px;
  padding: 10px 22px;
  display: flex;
  align-items: center;
  gap: 20px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
html[data-theme="light"] .site-header-inner {
  box-shadow: 0 1px 0 var(--border), 0 6px 20px rgba(10, 37, 64, 0.06);
}

/* Brand */
.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-size: 19px;
  text-decoration: none;
  white-space: nowrap;
}
.site-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.site-logo .qf-brand-mark {
  display: block;
  width: auto;
  height: 30px;
  transform-origin: center;
  transition: transform 0.18s ease;
}
.site-brand:hover .qf-brand-mark,
.site-brand:focus-visible .qf-brand-mark {
  transform: scale(1.08);
}

/* Primary nav */
.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}
.site-nav a,
.site-actions .signin {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 8px;
  transition: color 0.15s ease, background 0.15s ease;
}
.site-nav a:hover,
.site-nav a:focus-visible,
.site-actions .signin:hover,
.site-actions .signin:focus-visible {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Solutions dropdown */
.nav-dd { position: relative; }
.nav-dd-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--muted);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
  transition: color 0.15s ease;
}
.nav-dd-trigger:hover,
.nav-dd-trigger:focus-visible,
.nav-dd.is-open .nav-dd-trigger {
  color: var(--accent);
}
.nav-dd-caret {
  width: 12px;
  height: 12px;
  transition: transform 0.18s ease;
}
.nav-dd.is-open .nav-dd-caret { transform: rotate(180deg); }
.nav-dd-panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 16px 32px;
  margin: 0;
  padding: 16px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
  z-index: 80;
}
html[data-theme="light"] .nav-dd-panel {
  box-shadow: 0 18px 42px rgba(10, 37, 64, 0.14);
}
.nav-dd-panel[hidden] { display: none; }
.nav-dd-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nav-dd-head {
  margin: 0 0 8px;
  padding: 0 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
}
.nav-dd-panel a {
  display: block;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  padding: 8px 12px;
  border-radius: 8px;
}
.nav-dd-panel a:hover,
.nav-dd-panel a:focus-visible {
  color: var(--ink);
  background: var(--surface-2);
}
/* One-line descriptor inside a panel group (e.g. For Importers → what it does) */
.nav-dd-sub {
  display: block;
  padding: 4px 12px 0;
  max-width: 230px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  white-space: normal;
}
/* The rightmost dropdown (For Importers) anchors to the right edge of its
   trigger so a menu near the end of the bar never overflows the viewport. */
.nav-dd-panel--end { left: auto; right: 0; }

/* Actions cluster */
.site-actions {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.site-actions .btn-secondary {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--ink);
  border-radius: 10px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
}
.site-actions .btn-secondary .arr { color: currentColor; }
.site-actions .btn-secondary:hover {
  background: var(--surface-3);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

/* Burger — hidden on desktop */
.site-burger { display: none; }
.site-mobile-menu { display: none; }

/* ───────────────────── Mobile (≤ 640px) ───────────────────── */
@media (max-width: 640px) {
  .site-header {
    padding: 0;
  }
  .site-header-inner {
    max-width: none;
    margin: 0;
    padding: 12px 16px;
    gap: 12px;
    justify-content: space-between;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid var(--border);
    box-shadow: none;
    background: var(--surface-2);
  }
  html[data-theme="light"] .site-header-inner {
    background: var(--surface);
  }
  .site-nav,
  .site-actions .signin,
  .site-actions .btn-secondary {
    display: none;
  }
  .site-actions { gap: 8px; }
  .site-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    color: var(--ink);
    cursor: pointer;
    flex: none;
  }
  .site-burger svg { width: 20px; height: 20px; display: block; }
  .site-burger .ico-close { display: none; }
  .site-burger[aria-expanded="true"] .ico-open { display: none; }
  .site-burger[aria-expanded="true"] .ico-close { display: block; }

  .site-mobile-menu:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 8px 12px 0;
    padding: 8px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
  }
  html[data-theme="light"] .site-mobile-menu:not([hidden]) {
    box-shadow: 0 12px 28px rgba(10, 37, 64, 0.14);
  }
  .site-mobile-menu a {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--ink-soft);
    text-decoration: none;
    padding: 12px 14px;
    border-radius: 10px;
    transition: color 0.15s ease, background 0.15s ease;
  }
  .site-mobile-menu a:hover,
  .site-mobile-menu a:focus-visible {
    color: var(--accent);
    background: var(--surface-2);
  }
  /* Collapsible audience group: <details class="mm-group"><summary class="mm-head"> */
  .site-mobile-menu .mm-group { border-top: 1px solid var(--border); }
  .site-mobile-menu .mm-group:first-child { border-top: 0; }
  .site-mobile-menu .mm-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    padding: 12px 16px;
    min-height: 44px;
    list-style: none;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--muted);
  }
  .site-mobile-menu .mm-head::-webkit-details-marker { display: none; }
  .site-mobile-menu summary.mm-head::after {
    content: '▾';
    font-size: 11px;
    color: var(--muted);
    transition: transform 0.18s ease;
  }
  .site-mobile-menu .mm-group[open] > summary.mm-head::after { transform: rotate(180deg); }
  .site-mobile-menu summary.mm-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 10px; }
  .site-mobile-menu .mm-group > a { display: block; padding-left: 24px; }
  .site-mobile-menu .mm-account {
    margin-top: 8px;
    border-top: 1px solid var(--border);
    padding-top: 12px;
    font-weight: 600;
  }
  @media (prefers-reduced-motion: reduce) {
    .site-mobile-menu summary.mm-head::after { transition: none; }
  }
}

/* Tablet: tighten nav item padding so it never overflows */
@media (min-width: 641px) and (max-width: 900px) {
  .site-nav a,
  .nav-dd-trigger { padding-left: 8px; padding-right: 8px; }
  .site-actions .signin { white-space: nowrap; }
}

/* ───────────────────────── Premium footer ───────────────────────── */
.premium-footer {
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  padding: 54px 24px 34px;
}
.premium-footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 32px;
}
.premium-footer .footer-brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}
.premium-footer .qf-footer-brand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  margin: 0;
  text-decoration: none;
}
.premium-footer .footer-brand .qf-footer-logo {
  width: auto;
  height: 60px;
  max-width: 100%;
}
.premium-footer .qf-footer-brandtext {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.premium-footer .qf-footer-wordmark {
  font-size: 19px;
  font-weight: 850;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}
.premium-footer .footer-brand .qf-footer-tagline {
  margin: 0;
  max-width: 340px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}
.footer-col h4 {
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.footer-col a {
  display: block;
  color: var(--muted);
  text-decoration: none;
  padding: 5px 0;
  font-size: 14px;
}
.footer-col a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.qf-footer-trustbar {
  max-width: 1120px;
  margin: 32px auto 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--border);
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
}
.qf-footer-trustbar li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}
.qf-footer-trustbar svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  opacity: 0.85;
}
.premium-footer .footer-bottom {
  max-width: 1120px;
  margin: 34px auto 0;
  border-top: 1px solid var(--border);
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--muted);
}
.premium-footer .footer-bottom .qf-foot-operator,
.premium-footer .footer-bottom strong {
  color: var(--muted);
  font-weight: 400;
}

@media (max-width: 980px) {
  .premium-footer-inner { grid-template-columns: 1fr 1fr; }
  .premium-footer .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .premium-footer { padding: 42px 18px 28px; }
  .premium-footer-inner { gap: 24px 16px; }
  .premium-footer .footer-brand { gap: 12px; }
  .premium-footer .footer-brand .qf-footer-logo { height: 52px; }
  .qf-footer-trustbar { gap: 8px 16px; }
  .premium-footer .footer-bottom { display: grid; font-size: 11.5px; }
}

/* ── Auth-gated nav items (hydrated by /nav-auth.js) ────────────────────────
   Personal-workspace links (data-nav-auth="user") ship `hidden` from the
   server and are revealed client-side once /api/directory/auth/me confirms a
   session. The server HTML stays byte-identical for anonymous and signed-in
   visitors, which is what keeps the CDN-cached directory pages safe to share.

   `[hidden]`'s UA rule is only `display:none` at element specificity, so an
   author rule like `.nav-dd-panel a{display:block}` or
   `.site-mobile-menu a{display:block}` silently beats it and the link stays on
   screen for logged-out visitors. Make the attribute authoritative. */
.site-nav [hidden],
.site-actions [hidden],
.nav-dd-panel a[hidden],
.site-mobile-menu a[hidden] { display: none !important; }