/* ─────────────────────────────────────────────────────────────────────────────
   site.css — shared, ADDITIVE stylesheet for TherapySupervisor (2026-09-02)

   This file exists only to provide a small set of NEW shared classes. It is
   linked BEFORE each page's existing inline <style> block, so every existing
   inline rule still wins the cascade and no existing page rendering changes.

   The :root tokens below are copied verbatim from landing.html's :root. They
   are here so the NEW classes below have values to consume on pages whose own
   :root omits a token (e.g. login/forgot/reset define --text-light but not
   --text-muted). Verified at build time: no page uses any of these tokens
   without also defining it locally, so these declarations never override an
   existing page's palette.

   Do not migrate existing pages onto these tokens or classes as a cleanup.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  --navy:           #1a2744;
  --navy-hover:     #12203a;
  --navy-mid:       #2d3f6b;
  --bg:             #e8e4dc;
  --surface:        #f7f5f0;
  --border:         #d4cfc5;
  --text:           #1a2744;
  --text-body:      #2d3f6b;
  --text-secondary: #5a6b7a;
  --text-muted:     #8c9baa;
  --teal:           #3d7878;

  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ─── Section heading ─────────────────────────────────────────────────────────
   The one canonical "real section heading" style. Matches landing.html's
   existing .section-headline treatment (1.72em / 500 / navy / 1.25 / 20px).
   Applied where a major section title needs to read as substantial rather than
   as metadata. */
.section-h2 {
  font-family: var(--font-serif);
  font-size: 1.72em;
  font-weight: 500;
  color: var(--navy);
  line-height: 1.25;
  margin-bottom: 20px;
}

/* ─── Layout ──────────────────────────────────────────────────────────────────
   .container-wide is the outer page wrapper; .prose is the inner text measure.
   Paragraph copy goes in .prose so widening .container-wide never stretches
   running text edge to edge. */
.container-wide {
  max-width: 1080px;
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
}

.prose {
  max-width: 660px;
}

/* ─── Quiet footer navs ───────────────────────────────────────────────────────
   .site-footer-nav  — logged-out pages.
   .app-footer-nav   — authenticated pages. Identical for every account: no
                       entitlement gating, no conditional rendering, and no
                       Cases/casework link. Casework navigation is handled
                       entirely by the existing case-selector in index.html.

   Both match landing.html's .footer-links treatment. Sized in rem, not em, so
   the links render at landing.html's ~13px on every page regardless of the
   host footer's own font-size (faq/for-programs/contact footers are 12px, and
   0.82em of that would be ~10px).

   Used two ways:
     <nav class="site-footer-nav">   inside an existing <footer> (no chrome)
     <footer class="site-footer-nav"> as the footer itself (padding + rule) */
.site-footer-nav,
.app-footer-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 16px;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  line-height: 1.6;
}

.site-footer-nav a,
.app-footer-nav a {
  font-size: inherit;
  font-weight: 400;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s;
  cursor: pointer;
  touch-action: manipulation;
}

.site-footer-nav a:hover,
.app-footer-nav a:hover {
  color: var(--navy);
}

.site-footer-nav .site-footer-sep,
.app-footer-nav .site-footer-sep {
  color: var(--text-muted);
  user-select: none;
}

/* Standalone form: the nav IS the page footer (auth pages, app shell). */
footer.site-footer-nav,
footer.app-footer-nav {
  flex-shrink: 0;
  padding: 20px 24px;
  border-top: 0.5px solid var(--border);
}

/* ─── Phase 1 visual contract — PREVIEW VALUES, NOT FINAL ───────────────────
   These sizes/spacing are starting points for the Landing preview. They are
   explicitly not approved design tokens until confirmed against the preview
   on mobile + desktop + wide desktop. Do not treat implementation as approval. */

.h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.2em, 4.5vw, 3.2em);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--navy);
}

/* .h2 intentionally matches the existing .section-h2 values from the prior
   pass — same treatment, alias name for the Phase 1 contract's vocabulary.
   Do not change .section-h2 itself; add this as a second class. */
.h2 {
  font-family: var(--font-serif);
  font-size: 1.72em;
  font-weight: 500;
  color: var(--navy);
  line-height: 1.25;
}

.body-text {
  font-family: var(--font-sans);
  font-size: 1em;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-body);
}

/* ─── H3 — question / subsection heading ─────────────────────────────────────
   First use: FAQ questions. Derived from the approved hierarchy, not imported
   from FAQ's old local .faq-q style (16px/500/serif — too close to the shared
   .body-text's 1em to read as "clearly stronger than body" once body copy
   itself moved to the shared treatment). Deliberately serif, matching H1/H2,
   so all three heading levels read as one family; deliberately far below H2's
   1.72em and clearly above body's 1em. */
.h3 {
  font-family: var(--font-serif);
  font-size: 1.25em;
  font-weight: 500;
  color: var(--navy);
  line-height: 1.4;
}

.btn-primary {
  background: var(--navy);
  color: #fff;
  border: none;
  padding: 14px 32px;
  font-family: var(--font-sans);
  font-size: 1em;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  transition: background 0.15s;
}
.btn-primary:hover { background: var(--navy-hover); }
.btn-primary:visited { color: #fff; }

/* Secondary = existing ghost/outline treatment, reused per ruling. Must read
   as clearly clickable and visually related to .btn-primary. */
.btn-secondary {
  background: transparent;
  border: 1px solid var(--navy);
  color: var(--navy);
  padding: 13px 31px; /* 1px less than btn-primary padding to compensate for the border, so both buttons render the same outer height */
  font-family: var(--font-sans);
  font-size: 1em;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  transition: background 0.15s, color 0.15s;
}
.btn-secondary:hover { background: var(--navy); color: #fff; }
.btn-secondary:visited { color: var(--navy); }
.btn-secondary:hover:visited { color: #fff; }

/* Vertical rhythm scale — PREVIEW VALUES. Subject to visual judgment on
   desktop, particularly section-to-section and content-to-CTA spacing. */
:root {
  /* Corrections round 1 (2026-09-02): 64px → 48px. Hero-to-opening gap only —
     no other rhythm value changed. The @media (max-width:768px) override in
     landing.html sets this to 48px too and is deliberately left alone. */
  --rhythm-hero-to-section: 48px;
  --rhythm-section-to-section: 56px;
  --rhythm-h2-to-body: 20px;
  --rhythm-paragraph: 16px;
  --rhythm-content-to-cta: 48px;
  --rhythm-content-to-footer: 64px;
}

/* ─── Collision guard — DELETE WHEN for-programs.html IS MIGRATED ────────────
   The Phase 1 spec calls .body-text a NEW class. It is not: for-programs.html
   already defines and uses its own .body-text, as `class="body-text prose"` on
   four live content blocks.

   That page links site.css BEFORE its inline <style>, so every property it
   declares itself still wins (font-family, font-size, color) — but it does NOT
   declare font-weight, and its <p> children compute to the initial 400. The
   .body-text rule above would therefore silently restyle four blocks of live
   production copy from weight 400 to weight 300. Phase 1 is preview-only and
   changes no production surface, so that leak is pinned shut here.

   Scoped to the .body-text + .prose pair because that is exactly and only
   for-programs.html's usage. private/preview/landing.html deliberately does not
   combine the two classes on one element (it puts .body-text on the <p> and
   .prose on the wrapper), so the preview is unaffected by this guard.

   Delete this rule in the phase that migrates for-programs.html onto the shared
   .body-text treatment — at that point the weight change becomes intentional. */
.body-text.prose { font-weight: 400; }