/* ============================================================
   HiveMind Landing Page — §1 Chrome: nav header + footer (HM-435 / LP-03)
   Owns .site-header and .site-footer styling only. Loads AFTER css/main.css,
   so every override below wins purely by source order / descendant specificity —
   css/main.css is never edited. The lockup reproduces the brand-sheet .lockup
   construction (assets/reference/clickt-brand-sheet.html) — geometry verbatim;
   the divname color is adapted to Sage for dark-ground contrast (see below).
   Colors / type / spacing from css/tokens.css.
   ============================================================ */

/* Sticky-header clearance for in-page anchor targets (header is ~77–78px;
   5rem = 80px clears it). Additive :root custom property (not a tokens.css edit). */
:root {
  --nav-h: 5rem;
}

/* ---- Header surface: raise to 92% --ink and soften the blur so the bar reads
        near-solid, not glass (DESIGN.md bans glassmorphism). Overrides the
        baseline 88% + blur(8px) by source order; sticky/z/border stay baseline. */
.site-header {
  background-color: color-mix(in srgb, var(--ink) 92%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* ============================================================
   Brand lockup — duotone "c" mark + clickt | HiveMind, per brand sheet.
   Scoped to chrome lockups so the bare descendant classes (.mark/.word/.sep/
   .divname) can never collide with section markup elsewhere.
   ============================================================ */
.site-header .lockup,
.site-footer .lockup {
  gap: 0;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: normal;        /* neutralize baseline .lockup -0.02em; per-part below */
  font-weight: 400;              /* per-part weights below */
}

/* Duotone mark: two overlapping "c" glyphs (decorative — aria-hidden in markup). */
.site-header .lockup .mark,
.site-footer .lockup .mark {
  position: relative;
  display: inline-block;
  font-weight: 900;
}
.site-header .lockup .mark .back,
.site-footer .lockup .mark .back { color: var(--hive-100); }   /* --lk-back */
.site-header .lockup .mark .front,
.site-footer .lockup .mark .front {
  position: absolute;
  left: -0.15em;
  top: 0.052em;
  color: var(--hive-500);                                      /* --lk-front */
}

/* "clickt" wordmark */
.site-header .lockup .word,
.site-footer .lockup .word {
  font-weight: 900;
  letter-spacing: -0.055em;
  color: var(--offwhite);                                      /* --lk-word */
  margin-left: 0.30em;
}

/* Hairline separator */
.site-header .lockup .sep,
.site-footer .lockup .sep {
  width: 1px;
  align-self: stretch;
  background: currentColor;
  opacity: 0.25;
  margin: 0.14em 0.58em;
  color: var(--offwhite);
}

/* "HiveMind" division name. DESIGN.md: teal (--hive-500) is banned for text on
   dark (fails WCAG AA contrast at nav size — ~3.8:1); accent text on dark uses
   Sage (--hive-300, ~6.97:1). The duotone MARK keeps the issue-pinned teal
   (--lk-front); only the divname TEXT shifts to Sage. */
.site-header .lockup .divname,
.site-footer .lockup .divname {
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--hive-300);
}

/* Lockup sizes: compact in the bar, a larger endorsement mark in the footer. */
.site-header .lockup { font-size: 1.375rem; }
.site-footer .lockup--endorse { font-size: clamp(1.75rem, 4vw, 2.5rem); }

/* THE single Ember-colored element on the entire page — the footer lockup dot
   (period after "HiveMind"). Never use --brand-ember anywhere else. */
.site-footer .lockup__dot { color: var(--brand-ember); }

/* ============================================================
   Navigation bar layout
   ============================================================ */
/* On mobile the lockup takes the slack so the toggle + CTA sit together right.
   Tighten the gap and compact the lockup + CTA so all three fit one clean row
   at 375px (otherwise the wide "Start free trial" wraps the bar to two rows). */
@media (max-width: 768px) {
  .site-header nav { gap: var(--space-xs); }
  .site-header .lockup { margin-right: auto; font-size: 1.0625rem; }
  .site-header .btn--primary { padding: 0.5rem 0.85rem; font-size: var(--fs-sm); white-space: nowrap; }
}

/* ============================================================
   Mobile disclosure menu.
   The toggle and the collapsed panel exist ONLY with JS. Under no-JS the toggle
   stays hidden and the links remain in normal, visible flow (they wrap). The
   collapse is gated on .js — never applied statically — so no-JS never hides the
   links (HM-434 lesson: JS-only state must be applied/gated by JS).
   ============================================================ */
.nav-toggle { display: none; }   /* hidden by default: no-JS everywhere + JS on desktop */

/* Visually hidden but assistive-tech-readable accessible name. */
.nav-toggle__label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Hamburger glyph (center bar + two pseudo bars). */
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  display: block;
  width: 22px; height: 2px;
  background: var(--offwhite);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before { position: absolute; top: -7px; left: 0; }
.nav-toggle__bars::after  { position: absolute; top:  7px; left: 0; }

/* Open state morphs the hamburger into an X (chrome.js sets .is-open). */
.nav-toggle.is-open .nav-toggle__bars { background: transparent; }
.nav-toggle.is-open .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle__bars::after  { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
  .js .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;              /* comfortable touch target */
    padding: 0;
    background: transparent;
    border: 1px solid var(--line-dark);
    border-radius: var(--radius-button);
    color: inherit;
    cursor: pointer;
  }

  /* Make the bar the containing block for the absolute panel. Overrides the
     baseline .site-header nav by source order; baseline flex props untouched. */
  .site-header nav { position: relative; }

  .js .nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: color-mix(in srgb, var(--ink) 96%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--line-dark);
    padding-block: var(--space-sm) var(--space-md);
    /* Collapsed: clipped to zero height AND visibility:hidden so the links leave
       the paint, tab, and a11y trees. visibility flips instantly (it is NOT in
       the transition list) so the closed state is never focusable. */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.25s ease, opacity 0.2s ease;
  }
  .js .nav-menu.is-open {
    max-height: 75svh;
    overflow: auto;
    opacity: 1;
    visibility: visible;
  }
  /* Stacked, full-width tap rows aligned to the container content edge. */
  .js .nav-menu .nav-links {
    flex-direction: column;
    gap: 0;
    font-size: var(--fs-body);
    color: var(--offwhite);
  }
  .js .nav-menu .nav-links a {
    display: block;
    padding-block: var(--space-sm);
  }
}

/* ============================================================
   In-page anchor offset — clear the sticky header. CSS owns scrolling
   (main.css: html{scroll-behavior:smooth} + reduced-motion → auto); chrome.js
   never scrolls. JS-collapsed mobile bar is short, so --nav-h covers it; the
   no-JS mobile header wraps taller, so reserve extra there (best-effort — a rare
   no-JS + mobile + anchor combination).
   ============================================================ */
#top,
#how-it-works,
#what-it-does,
#security,
#pricing,
#faq {
  scroll-margin-top: var(--nav-h);
}
@media (max-width: 768px) {
  html.no-js :is(#top, #how-it-works, #what-it-does, #security, #pricing, #faq) {
    scroll-margin-top: 12rem;
  }
}

/* ============================================================
   Footer layout
   ============================================================ */
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-xl) var(--space-2xl);
}
.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.footer__endorse {
  color: var(--muted-dark);
  max-width: 44ch;
}
.footer__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: flex-start;
}
.footer__divisions {
  color: var(--muted-dark);
}
.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
}
.footer__links a:hover,
.footer__links a:focus-visible {
  color: var(--offwhite);
}

@media (min-width: 769px) {
  .footer__meta {
    align-items: flex-end;
    text-align: right;
  }
}