/* Crawford Site — shared page chrome (nav + footer)
   ==================================================
   Extracted 2026-08-21. Linked AFTER /assets/theme.css and BEFORE each page's
   inline <style>, so a page overrides anything here just by keeping its own
   declaration — which is how every deviation survived the extraction.

   WHAT IS IN HERE, AND THE RULE THAT DECIDED IT
   ---------------------------------------------
   A declaration ships only if ALL ELEVEN pages below define that selector AND
   give the property an identical value. Absence counts as a value, so no page
   can silently GAIN a declaration it never had. An earlier attempt used a
   majority rule instead and check-computed-styles.mjs caught it immediately:
   crawford-whole.html and crawford-coaching.html picked up footer-logo and
   footer-social styling they had never carried, and growth-zone's overlay CTA
   dropped from 1.1rem to 0.85rem. Majority is the wrong rule for a refactor
   that promises zero visual change.

   SCOPE — 19 pages, across BOTH grounds:
     light (15)  about, coaching, contact, feelings, growth-zone, motivation,
                 optimism, strengths, subscribe, unsubscribe, whole,
                 core-values, task-triage, writing, writing-all
     dark  (4)   sign-in, synergize, synergize-members, synergize-register

   ONE FILE SERVES BOTH GROUNDS, and that is the whole point of the role
   tokens. Every colour here is --text / --text-muted / --bg-rgb / --surface,
   which theme.css redefines per ground, so the same declaration paints dark
   chrome on Synergize and light chrome on About. The dark pages reached it by
   swapping palette tokens for the roles theme.css literally defines them as
   (--text:var(--white), --text-muted:var(--pale), --bg:var(--ink),
   --surface:var(--slate)) — 6 declarations, provably zero visual change,
   confirmed by an IDENTICAL capture.

   Dark pages keep ONE override: `.footer { background: var(--surface) }`. That
   is a real design difference, not drift — their footer is a raised panel
   where a light page's is flush with the ground.

   STILL DELIBERATELY OUTSIDE:
     homepage    .nav is position:absolute over the photo hero, z-index 10, no
                 backdrop or border, with a fade-down; its CTA takes
                 --cream-rgb because it sits on a dark image, and its 40px logo
                 is intentional
     assistant   .nav is position:relative and the footer is --ink: a
                 full-height dark app shell, not a scrolling content page
     timer, quick-emom, synergize-sessions, synergize-intake-review,
     auth-callback, synergize-forms — these carry no standard nav/footer at
     all (timer uses .site-nav, quick-emom a .stepper), so there is nothing
     here for them to share.

   ONLY TOP-LEVEL RULES LIVE HERE. The 90 nav/footer rules inside @media blocks
   stay in their pages, where they still win by source order.

   Verify any change with:  node scripts/check-computed-styles.mjs
*/

.nav {
  align-items: center;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(var(--text-rgb), 0.08);
  display: flex;
  justify-content: space-between;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 100;
}
.nav__logo img {
  display: block;
  height: 36px;
  width: auto;
}
.nav__links {
  display: flex;
  gap: 2.5rem;
  list-style: none;
}
.nav__links a {
  color: var(--text-muted);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 300;
  letter-spacing: 0.18em;
  opacity: 0.85;
  text-decoration: none;
  text-transform: uppercase;
  transition: opacity 0.2s, color 0.2s;
}
.nav__links a:hover {
  color: var(--text);
  opacity: 1;
}
.nav__cta {
  border: 1px solid rgba(var(--text-rgb), 0.40);
  border-radius: 1px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  padding: 0.5rem 1.3rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.25s, border-color 0.25s;
}
.nav__cta:hover {
  border-color: rgba(var(--text-rgb), 0.70);
}
.nav__toggle {
  -webkit-tap-highlight-color: transparent;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  display: none;
  flex-direction: column;
  height: 44px;
  justify-content: center;
  padding: 0.5rem;
  width: 44px;
  z-index: 200;
}
.nav__toggle span {
  background: var(--text-muted);
  display: block;
  height: 1.5px;
  margin: 5px 0;
  transform-origin: center;
  transition: transform 0.3s ease, opacity 0.2s ease;
  width: 22px;
}
.nav__toggle.open span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav__toggle.open span:nth-child(2) {
  opacity: 0;
}
.nav__toggle.open span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}
.nav__overlay {
  -webkit-backdrop-filter: blur(20px);
  align-items: center;
  backdrop-filter: blur(20px);
  background: rgba(var(--bg-rgb), 0.97);
  display: none;
  flex-direction: column;
  gap: 0;
  inset: 0;
  justify-content: center;
  opacity: 0;
  position: fixed;
  transition: opacity 0.35s ease;
  z-index: 90;
}
.nav__overlay.open {
  display: flex;
  opacity: 1;
}
.nav__overlay a {
  color: var(--text-muted);
  font-family: var(--sans);
  font-size: 1.1rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  padding: 0.9rem 0;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.2s, opacity 0.2s;
}
.nav__overlay a:hover, .nav__overlay a.active {
  color: var(--text);
  opacity: 1;
}
.footer {
  align-items: center;
  background: var(--bg);
  display: flex;
  justify-content: space-between;
}
.footer__logo img {
  display: block;
  height: 32px;
  width: auto;
}
.footer__copy {
  font-family: var(--sans);
}
.footer__links {
  display: flex;
  gap: 2rem;
  list-style: none;
}
.footer__links a {
  font-family: var(--sans);
  text-decoration: none;
  transition: color 0.2s;
}