/* ============================================================================
   Signostic by Njord — Brand tokens v1
   ----------------------------------------------------------------------------
   Mirrors njord/assets/css/tokens.css (Polished Copper · Night Sky Indigo ·
   Newsreader · Geist) with Signostic-specific aliases for the Cormorant
   Garamond ø-slash italic wordmark and legacy variable names from the
   pre-endorsement Signostic codebase.

   Loading this file is the visible re-skin: amber-on-paper-cream becomes
   copper-on-night-sky. Page-level component CSS keeps working unchanged
   because every old Signostic token (--amber, --ink, --clinic, --gold, etc.)
   is aliased into the new Njord system below.

   Njord palette (the Maritime Crest):
     Night Sky Indigo  #0D1320   primary text / dark surface
     Teal Nebula       #276366   secondary / data series / links
     Polished Copper   #BB9365   signature accent · wealth / treasure
     Aureus Cream      #F6F2C8   warm light surface
   ============================================================================ */

:root {

  /* === TYPEFACES =========================================================== */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans:    "Geist", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "Geist Mono", "SF Mono", ui-monospace, monospace;

  /* Signostic-distinctive: Cormorant Garamond italic carries the ø-slash
     wordmark IP. Preserved across the re-skin — only the colour changes. */
  --italic-display: "Cormorant Garamond", "Newsreader", Georgia, serif;

  /* === NEUTRALS — Night Sky Indigo ramp ==================================== */
  --ink-950: #070A12;
  --ink-900: #0D1320;   /* NIGHT SKY INDIGO — primary text */
  --ink-800: #161F32;
  --ink-700: #243049;
  --ink-600: #3C4866;
  --ink-500: #5C6889;
  --ink-400: #8A95B0;
  --ink-300: #B6BFD2;
  --ink-200: #D7DCE7;
  --ink-100: #E9ECF3;
  --ink-50:  #F3F5F9;

  /* === SURFACES — warm cream + dark indigo dual mode ======================= */
  --aureus:         #F6F2C8;
  --paper:          #FBF9EF;
  --surface:        #FFFFFF;
  --surface-warm:   #F6F2C8;
  --surface-sunken: #F3F1E4;
  --surface-dark:   #0D1320;
  --surface-dark-2: #161F32;
  --hairline-warm:  #E7E2CE;

  /* === ACCENT — POLISHED COPPER (the signature) ============================ */
  --copper:        #BB9365;
  --copper-bright: #CFA97C;
  --copper-hover:  #AC8456;
  --copper-deep:   #9A7748;
  --copper-tint:   #F0E7D8;
  --copper-tint-2: #E4D4BD;

  /* === SECONDARY — TEAL NEBULA ============================================= */
  --teal:        #276366;
  --teal-bright: #3E8E90;
  --teal-deep:   #184A4D;
  --teal-tint:   #E0ECEC;

  /* === PRIMARY ACTION — indigo on light, copper on dark ==================== */
  --action:       #0D1320;
  --action-hover: #243049;

  /* === FUNCTIONAL — traffic-signal model =================================== */
  --go:      #1E8E5A;  --go-ink:      #0C5A38;  --go-tint:      #E4F2EA;
  --caution: #D99A1C;  --caution-ink: #7E5C0E;  --caution-tint: #FAF1D9;
  --stop:    #CF3B45;  --stop-ink:    #8E2128;  --stop-tint:    #FBE7E8;
  --info:    #2E69C9;  --info-ink:    #1C448C;  --info-tint:    #E6EDFA;

  /* === DATA VISUALISATION ================================================== */
  --viz-1: #276366;  /* teal */
  --viz-2: #BB9365;  /* copper */
  --viz-3: #3E5C8A;  /* indigo-blue */
  --viz-4: #5C6889;  /* slate */
  --viz-5: #9A7748;  /* deep copper */
  --viz-6: #3E8E90;  /* bright teal */
  --viz-grid-light: #E7E2CE;
  --viz-grid-dark:  #243049;
  --viz-axis:       #8A95B0;

  /* === ELEVATION =========================================================== */
  --shadow-xs:    0 1px 1px rgba(7,10,18,0.05);
  --shadow-sm:    0 1px 2px rgba(7,10,18,0.07), 0 1px 1px rgba(7,10,18,0.04);
  --shadow-md:    0 2px 8px rgba(7,10,18,0.09), 0 1px 2px rgba(7,10,18,0.05);
  --shadow-lg:    0 12px 32px rgba(7,10,18,0.12), 0 2px 6px rgba(7,10,18,0.06);
  --shadow-focus: 0 0 0 3px rgba(187,147,101,0.32);

  /* === BORDERS / RADII ===================================================== */
  --hairline:        1px solid var(--ink-200);
  --hairline-strong: 1px solid var(--ink-300);
  --border-dark:     1px solid var(--ink-700);
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* === SPACING ============================================================= */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;

  /* === TYPE SCALE ========================================================== */
  --fs-12: 12px; --lh-12: 16px; --tr-12: 0.02em;
  --fs-14: 14px; --lh-14: 20px; --tr-14: 0.005em;
  --fs-16: 16px; --lh-16: 25px; --tr-16: 0;
  --fs-18: 18px; --lh-18: 28px; --tr-18: 0;
  --fs-20: 20px; --lh-20: 30px; --tr-20: -0.005em;
  --fs-24: 24px; --lh-24: 32px; --tr-24: -0.01em;
  --fs-32: 32px; --lh-32: 40px; --tr-32: -0.015em;
  --fs-48: 48px; --lh-48: 52px; --tr-48: -0.02em;
  --fs-64: 64px; --lh-64: 66px; --tr-64: -0.025em;


  /* ==========================================================================
     SIGNOSTIC LEGACY ALIASES
     --------------------------------------------------------------------------
     The pre-endorsement Signostic codebase used a different variable
     vocabulary (--amber, --ink, --clinic, --gold, --bone, --mist, etc.).
     Aliasing each old name to the new Njord system here lets every existing
     page-level CSS rule keep working unchanged — the visible re-skin rides
     entirely through this alias layer. Delete an alias only after auditing
     for downstream references.
     ========================================================================== */

  /* Surfaces */
  --bg:   var(--paper);
  --bg2:  var(--surface-warm);
  --bg3:  var(--surface-sunken);
  --bone: var(--surface-warm);
  --mist: var(--surface-sunken);
  --stone: var(--ink-400);

  /* Ink ramp */
  --ink:       var(--ink-900);
  --void:      var(--ink-950);
  --graphite:  var(--ink-700);
  --navy-deep: var(--ink-900);
  --text:      var(--ink-900);
  --muted:     var(--ink-600);
  --muted-lt:  var(--ink-500);
  --muted2:    var(--ink-400);
  --border:    rgba(13, 19, 32, 0.10);

  /* Accent — old amber/gold/accent → Polished Copper */
  --amber:     var(--copper);
  --amber-ink: var(--copper-deep);
  --amber-rgb: 187, 147, 101;
  --accent:    var(--copper);
  --accent-lt: var(--copper-bright);
  --accent-bg: rgba(187, 147, 101, 0.08);
  --gold:      var(--copper);
  --gold-lt:   var(--copper-bright);
  --gold-bg:   rgba(187, 147, 101, 0.12);

  /* Status — clinic / alarm → traffic signals */
  --clinic: var(--go);
  --alarm:  var(--stop);

  /* Font shortnames */
  --serif:  var(--font-display);
  --sans:   var(--font-sans);
  --mono:   var(--font-mono);
  --italic: var(--italic-display);
  --fd:     var(--font-display);
  --fb:     var(--font-sans);
  --fs:     var(--italic-display);
  --fm:     var(--font-mono);

  /* Layout */
  --px:         clamp(1.25rem, 5vw, 5rem);
  --section-py: clamp(3rem, 6vw, 6.5rem);

  /* Legacy named tokens — kept for any deep references */
  --paper-legacy:           #F6F5F2;
  --signostic-amber-legacy: #E8A55B;
}

/* ============================================================================
   GLOBAL TYPE HYGIENE — kill widows/orphans across the site
   ============================================================================ */
h1, h2, h3, h4, h5 { text-wrap: balance; }
p, li, blockquote   { text-wrap: pretty; }


/* ============================================================================
   SITE POSITIONING BAR
   ----------------------------------------------------------------------------
   Persistent strip directly below the nav, threaded across every page.
   Reinforces the single-vertical positioning: "Digital marketing audits &
   performance diagnosis for insurance companies." Subtle Aureus surface,
   mono copper-deep type so it reads as service-context, not a CTA.
   ============================================================================ */
.site-positioning-bar {
  background: var(--surface-warm);
  border-bottom: 1px solid var(--hairline-warm);
  /* Pinned to an explicit height (border-box) so bar-bottom === nav top ===
     body padding-top (all 38px). Padding+line-height math left a ~2px sliver
     between bar and nav that page content scrolled through. Flex-centre the
     single line instead. Mobile overrides (≤768/≤480) drop the height to
     match their own body padding-top values. */
  height: 38px;
  padding: 0 var(--px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}
/* Push the existing fixed nav and body content down to clear the bar.
   Bar is 38px on desktop (single line) and 32px on mobile (tightened). */
body:has(.site-positioning-bar) { padding-top: 38px; }
body:has(.site-positioning-bar) > nav,
body:has(.site-positioning-bar) > header > nav,
body:has(.site-positioning-bar) header > nav { top: 38px; }
.site-positioning-bar p {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--copper-deep);
  margin: 0;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.site-positioning-bar strong {
  color: var(--ink-900);
  font-weight: 600;
}
.site-positioning-bar .dot {
  color: var(--ink-400);
  margin: 0 .5em;
  font-weight: 400;
}
@media (max-width: 768px) {
  .site-positioning-bar {
    padding: 0 .7rem;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .site-positioning-bar p {
    font-size: .56rem;
    letter-spacing: .05em;
    white-space: nowrap;
  }
  .site-positioning-bar .dot { margin: 0 .3em; }
  body:has(.site-positioning-bar) { padding-top: 26px; }
  body:has(.site-positioning-bar) > nav,
  body:has(.site-positioning-bar) > header > nav,
  body:has(.site-positioning-bar) header > nav { top: 26px; }
}
@media (max-width: 480px) {
  .site-positioning-bar {
    padding: 0 .6rem;
    height: 24px;
  }
  .site-positioning-bar p {
    font-size: .46rem;
    letter-spacing: .03em;
  }
  .site-positioning-bar .dot { margin: 0 .22em; }
  body:has(.site-positioning-bar) { padding-top: 24px; }
  body:has(.site-positioning-bar) > nav,
  body:has(.site-positioning-bar) > header > nav,
  body:has(.site-positioning-bar) header > nav { top: 24px; }
}


/* ============================================================================
   NJORD ENDORSEMENT BAND
   ----------------------------------------------------------------------------
   Site-wide footer band that endorses Signostic as the diagnostic engine of
   Njord. Sits directly above the existing <footer>. Aureus cream surface
   differentiates it from the page body; copper CTA carries the handoff to
   buildmygrowthengine.com (no audit payload — keeps the Njord tool untouched).
   ============================================================================ */
.njord-endorsement {
  background: var(--surface-warm);
  border-top: 1px solid var(--hairline-warm);
  padding: 2.5rem var(--px);
  position: relative;
  z-index: 1;
}
.njord-endorsement-inner {
  /* Full content-width (gutter to gutter) so the endorsement band lines up
     with the .page-bridge bars above it — both share `2.5rem var(--px)` outer
     padding, so text-left and CTA-right edges now match. The copy stays
     readable via the 640px cap on .njord-endorsement-copy below, so dropping
     the old 1100px centred cap doesn't stretch the text. */
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.njord-endorsement-copy {
  font-family: var(--font-sans);
  font-size: .95rem;
  line-height: 1.55;
  color: var(--ink-700);
  margin: 0;
  max-width: 640px;
}
.njord-endorsement-copy strong {
  color: var(--ink-900);
  font-weight: 600;
}
.njord-endorsement-cta {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: var(--copper);
  color: #fff;
  font-family: var(--font-sans);
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: -.005em;
  padding: .85rem 1.55rem;
  border-radius: 2px;
  text-decoration: none;
  transition: background .2s;
  white-space: nowrap;
}
.njord-endorsement-cta:hover,
.njord-endorsement-cta:focus {
  background: var(--copper-hover);
  color: #fff;
}
.njord-endorsement-cta .arr {
  display: inline-block;
  transition: transform .3s;
}
.njord-endorsement-cta:hover .arr {
  transform: translateX(4px);
}
@media (max-width: 768px) {
  .njord-endorsement-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
  }
}


/* ============================================================================
   DESKTOP NAV LAYOUT — overrides for ≥1101px
   ----------------------------------------------------------------------------
   Per-page nav-links CSS sets `gap:1.25rem` with no min-margin from the brand
   and no `white-space:nowrap` on links. Result: multi-word items like
   "After the fix" and "AI Visibility" wrap onto 2–3 lines, and the "· by
   Njord" endorsement butts directly into "Services". These overrides fix
   both with a single rule applied via tokens.css.
   ============================================================================ */
nav .nav-links     { margin-left: 1.5rem; gap: 1.1rem; }
nav .nav-links a   { white-space: nowrap; }


/* ============================================================================
   MOBILE NAV PLACEMENT — overrides for ≤640px
   ----------------------------------------------------------------------------
   Every page declares its nav at 120px (desktop) / 88px (≤1100px). On a
   375px viewport the 88px stacked logo + "Book with Chris" CTA + burger
   crowd the row and total fixed chrome eats 18% of the viewport. Tighten
   the logo and CTA at the true mobile breakpoint. Selectors are scoped
   under `nav` to beat per-page `.nav-logo-img` rules without per-page edits.
   ============================================================================ */
/* Hide the "· by Njord" endorsement on tablet-portrait + mobile so the
   nav row doesn't get crowded once the burger replaces the link list. */
@media (max-width: 768px) {
  nav .nav-endorsement    { display: none !important; }
}
@media (max-width: 640px) {
  nav .nav-logo-img       { height: 56px; }
  nav .nav-brand          { gap: .5rem; }
  nav .nav-cta            { font-size: .78rem; padding: .55rem .9rem; }
  nav .nav-burger         { margin-left: .3rem; width: 36px; height: 36px; }
  nav                     { padding: 6px 16px; gap: .5rem; background: #fff !important; }
  /* Hide the trailing "Canada-wide" segment so the bar fits one line cleanly */
  .site-positioning-bar .bar-tail { display: none; }
}
@media (max-width: 380px) {
  nav .nav-logo-img       { height: 50px; }
  nav .nav-cta            { font-size: .72rem; padding: .5rem .75rem; }
}


/* ============================================================================
   SITE FOOTER — unified clean layout (site-wide, all 56 pages)
   ----------------------------------------------------------------------------
   Replaces the old fragile flex footer where logo + copy + links + disclaimer
   all competed in one space-between row (and wrapped badly once links were
   added). New flow is a clean vertical stack:
     1. footer-bar : logo (left)  ·  nav links (right)   — divider underneath
     2. footer-copy: the copyright / NAP line, full width, left-aligned
     3. footer-disclaimer: the AI fine print, smaller + faded
   Selectors are scoped under `footer` / `body footer` so they override every
   page's inline footer CSS without per-page edits. Markup was rebuilt to this
   structure across all pages (see _rebuild_footers.py history).
   ============================================================================ */
body footer {
  display: block;
  padding: 2.75rem var(--px) 3.5rem;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
footer .footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2.5rem;
  flex-wrap: wrap;
  padding-bottom: 1.6rem;
  margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--border);
}
footer .footer-logo { flex-shrink: 0; display: inline-block; line-height: 1; }
footer .footer-logo-img { height: 60px; width: auto; display: block; }
footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
footer .footer-links li { margin: 0; }
footer .footer-links a {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color .2s ease;
}
footer .footer-links a:hover,
footer .footer-links a:focus-visible { color: var(--accent); }
footer .footer-copy {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .015em;
  line-height: 1.75;
  color: var(--muted);
  margin: 0;
  text-align: left;
  max-width: none;
  flex: none;
}
footer .footer-copy a {
  color: var(--copper-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-warm);
  transition: color .2s ease, border-color .2s ease;
}
footer .footer-copy a:hover,
footer .footer-copy a:focus-visible { color: var(--accent); border-color: var(--accent); }
footer .footer-disclaimer {
  font-family: var(--font-mono);
  font-size: .66rem;
  line-height: 1.6;
  color: var(--muted);
  opacity: .68;
  margin: 1.1rem 0 0;
  text-align: left;
  max-width: none;
  min-width: 0;
  padding: 0;
}
@media (max-width: 640px) {
  body footer { padding: 2rem var(--px) 2.75rem; }
  footer .footer-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    padding-bottom: 1.3rem;
    margin-bottom: 1.3rem;
  }
  footer .footer-logo-img { height: 50px; }
}