/* Clear & Trustworthy: site-level polish layered over the Theme Studio blocks.
   Loaded via config/site.php "site_css". Verified via workbench render.

   IMPORTANT cascade note: the engine emits site_css BEFORE the per-block <style>,
   so an equal-specificity rule here LOSES to the block rule (which comes later in
   source order). Every override below is therefore scoped under `body.ts-page`
   (the class the Theme Studio public render puts on <body>), which raises
   specificity above the block rules so these win regardless of source order.
   Do NOT drop the `body.ts-page` prefix or the footer/callout/card overrides
   silently stop working (they did, until this was caught). */

:root {
  /* Translucent surface for the sticky nav blur (block expects this var;
     theme.json cannot define it, it is not one of the 49 registry tokens). */
  --ts-color-surface-1-translucent: rgba(255, 255, 255, 0.82);

  /* Dark brand band for the footer. The footer block uses white text on its
     surface-2 background, unreadable on a light surface-2; a dark bg fixes it. */
  --ht-footer-bg: #0f2a44;
  --ts-color-link-on-dark: rgba(255, 255, 255, 0.82);
  --ts-color-link-on-dark-hover: #ffffff;

  /* Soft, brand-tinted shadows (the elevated-card token reuses the heavy hero
     overlay; these are gentle). */
  --ht-shadow-sm: 0 1px 2px rgba(16, 38, 64, 0.06);
  --ht-shadow-md: 0 6px 20px rgba(16, 38, 64, 0.10);
  --ht-shadow-lg: 0 12px 28px rgba(16, 38, 64, 0.14);
}

/* White reading surface so the prose column blends into the page instead of
   floating as a hard-edged white block on a pale tint. Rhythm comes from the
   tinted bands (hero, stats, cards) and the dark footer, not the body color. */
body.ts-page {
  background-color: #ffffff;
}

/* Navigation: lift + clearer divider. */
body.ts-page .ts-nav-light-blur-sticky {
  box-shadow: var(--ht-shadow-sm);
  border-bottom-color: var(--ts-color-border);
}

/* 8-item top nav: the shared block caps the bar at the 880px reading column
   (--ts-content-width-md), too narrow for the brand + 8 links, so the last item
   (FAQ) wrapped to a second line on every screen width. Widen the bar past the
   reading column and tighten each item's side padding so all 8 stay on one row.
   Desktop only (min-width 769px); at 768px and below the block's burger menu
   takes over and is left exactly as designed. */
@media (min-width: 769px) {
  body.ts-page .ts-nav-light-blur-sticky .ts-nav-inner {
    max-width: 1080px;
  }
  body.ts-page .ts-nav-light-blur-sticky .ts-nav-item {
    padding-left: var(--ts-space-xs);
    padding-right: var(--ts-space-xs);
  }
}

/* Hero: a soft branded band instead of plain white. */
body.ts-page .ts-hero-minimal-text-only {
  background-image: linear-gradient(180deg, #e8eff9 0%, #ffffff 100%);
  background-color: transparent;
  border-bottom: 1px solid var(--ts-color-border);
}
body.ts-page .ts-hero-minimal-text-only .ts-hero-cta {
  box-shadow: 0 4px 12px rgba(29, 78, 137, 0.25);
}
/* Hero finish: a short brand rule under the title anchors the text hero so it
   reads as designed rather than empty, and a constrained subtitle measure keeps
   the band tidy. Mirrors the accent rule under the cards heading for consistency. */
body.ts-page .ts-hero-minimal-text-only .ts-minimal-title::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin-top: var(--ts-space-md);
  background-color: var(--ts-color-primary);
  border-radius: 2px;
}
body.ts-page .ts-hero-minimal-text-only.ts-align-center .ts-minimal-title::after {
  margin-left: auto;
  margin-right: auto;
}
body.ts-page .ts-hero-minimal-text-only.ts-align-left .ts-minimal-title::after {
  margin-left: 0;
}
body.ts-page .ts-hero-minimal-text-only .ts-minimal-subtitle {
  max-width: 640px;
}
body.ts-page .ts-hero-minimal-text-only.ts-align-center .ts-minimal-subtitle {
  margin-left: auto;
  margin-right: auto;
}

/* Callout: centered in the reading column. */
body.ts-page .ts-callout {
  margin-left: auto;
  margin-right: auto;
}

/* Topic cards: light band so the white cards stand out (page rhythm). */
body.ts-page .ts-cards-3up {
  background-color: #eef2f8;
}
/* Short brand-blue rule under the section heading. */
body.ts-page .ts-cards-3up .ts-cards-heading::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin: var(--ts-space-sm) auto 0;
  background-color: var(--ts-color-primary);
  border-radius: 2px;
}
/* Cards: soft shadow, hairline border, brand top-accent, hover lift. */
body.ts-page .ts-cards-3up .ts-card {
  background-color: var(--ts-color-surface-1);
  border: 1px solid var(--ts-color-border);
  border-top: 3px solid var(--ts-color-primary);
  box-shadow: var(--ht-shadow-md);
  transition: transform 180ms ease-out, box-shadow 180ms ease-out;
}
body.ts-page .ts-cards-3up .ts-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ht-shadow-lg);
}

/* Footer: dark, branded band that anchors the page (also fixes the
   white-on-light readability bug in the footer-three-column block). */
body.ts-page .ts-footer-three-column {
  background-color: var(--ht-footer-bg);
  color: var(--ts-color-text-on-dark);
}
body.ts-page .ts-footer-three-column .ts-footer-bottom {
  border-top-color: rgba(255, 255, 255, 0.14);
}

/* Section rhythm: a SHORT centered hairline between two stacked content
   sections (the FAQ groups, or a pillar's stacked prose sections) marks a
   deliberate section break while letting the H2 below it carry the section
   weight. The full-width rule (the prior version) read heavy stacked above the
   big serif H2 (reported 2026-06-19). Drawn as a 25%-wide pseudo-element
   (~160px on the 640px narrow reading column) centered at the block's top edge,
   so it sits exactly where the old border-top did. 25% (not a fixed px) so it
   stays proportional across breakpoints. Workbench-compared full vs half vs
   quarter vs 100px before picking. The selector only matches prose-after-prose,
   so sections already separated by a callout or cards block are left alone. */
body.ts-page .ts-prose-narrow + .ts-prose-narrow {
  position: relative;
}
body.ts-page .ts-prose-narrow + .ts-prose-narrow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 25%;
  height: 1px;
  background-color: var(--ts-color-border);
}
/* The divider-joined section's leading heading also carries its own large
   top margin (--ts-space-xl) on top of the block's top padding, so the gap
   BELOW the hairline was much larger than the gap above it (the uneven,
   oversized section break reported 2026-06-19). Zero the leading element's
   top margin in a joined prose section so the space is balanced: the block's
   top padding below the line mirrors the previous block's bottom padding above
   it. Applies to whichever element leads the section (usually the H2). */
body.ts-page .ts-prose-narrow + .ts-prose-narrow > .ts-prose-content > :first-child {
  margin-top: 0;
}

/* Current page underline on the active top-nav link. Applies when the link
   carries .ts-nav-current / aria-current="page". NOTE: inert until the engine
   marks the active nav item at render. This site's Theme Studio pages emit
   site_css but not site_js and add no slug to <body>, so there is no
   site-scoped way to set the active state; that is a deferred engine task.
   Desktop only; the open mobile menu uses a tinted row instead (below). */
@media (min-width: 769px) {
  body.ts-page .ts-nav-light-blur-sticky .ts-nav-item.ts-nav-current,
  body.ts-page .ts-nav-light-blur-sticky .ts-nav-item[aria-current="page"] {
    text-decoration: underline;
    text-decoration-color: var(--ts-color-primary);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
  }
}

/* Mobile menu polish (<=768px), where the block's burger menu takes over. */
@media (max-width: 768px) {
  /* Solid, lifted panel: the default open menu is translucent and the hero
     bleeds through, which reads as unfinished. Make it opaque and elevate it. */
  body.ts-page .ts-nav-light-blur-sticky .ts-nav-items {
    background-color: var(--ts-color-surface-1);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: var(--ht-shadow-md);
  }
  /* Tidy list: a hairline under each row. */
  body.ts-page .ts-nav-light-blur-sticky .ts-nav-item {
    border-bottom: 1px solid var(--ts-color-surface-2);
  }
  /* Discoverable control: box the burger so it reads as a tappable button
     instead of three loose bars that are easy to miss. */
  body.ts-page .ts-nav-light-blur-sticky .ts-nav-burger {
    border: 1px solid var(--ts-color-border);
    border-radius: var(--ts-radius-md);
    background-color: var(--ts-color-surface-1);
  }
  /* Current page in the open menu: a soft brand-tinted row. */
  body.ts-page .ts-nav-light-blur-sticky .ts-nav-item.ts-nav-current,
  body.ts-page .ts-nav-light-blur-sticky .ts-nav-item[aria-current="page"] {
    background-color: var(--ts-color-surface-2);
  }
}
