/*
 * design-system.css — Inspire Recovery Design System (production bundle)
 *
 * GENERATED FILE — do not edit directly.
 * Source: assets/css/main.css @imports, concatenated in cascade order.
 * To regenerate: cat tokens base layout typography navigation components forms animations > design-system
 * (or re-run the build step in inc/enqueue.php comments).
 *
 * Source files (edit these, then regenerate):
 *   tokens.css      — design tokens
 *   base.css        — element reset + body defaults
 *   layout.css      — .wrap, .measure, section rhythm
 *   typography.css  — heading scale, inline text components
 *   navigation.css  — sticky header, desktop + mobile nav
 *   components.css  — buttons, hero, final, steps, footer, placeholders
 *   forms.css       — form field + card styles
 *   animations.css  — scroll-reveal + prefers-reduced-motion
 */
/* ── tokens.css ────────────────────────────────────────────────────── */

/* Self-hosted typography */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/roboto-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/roboto-slab-latin.woff2') format('woff2');
}

/*
 * tokens.css — Inspire Recovery Design System
 * ALL CSS custom properties. Single source of truth.
 * The Inspire Recovery logo is the source of truth for color.
 *
 * BRAND HIERARCHY
 *   Primary:       #73D7EE — aqua (INSPIRE text, left butterfly wing)
 *   Secondary:     #613915 — warm brown (RECOVERY text)
 *   Deep emphasis: #004CFF — vivid blue (inner butterfly wing) — occasional, justified use only
 *   Accents:       #FFAFC7 · #732982 · #FF8C00 · #008026 · #FFED00 · #E40303
 *                  (icon-level details, hover states, tiny marks — never section backgrounds)
 *   Foundation:    White
 *
 * Production: wp-content/themes/inspire-recovery/assets/css/tokens.css
 */

:root {

  /* ── BRAND AQUA — primary ─────────────────────────────────────────────
     Source: "INSPIRE" letterforms + left butterfly wing in official logo. */

  --brand-aqua:       #73D7EE;   /* logo aqua — primary buttons, CTA section              */
  --brand-aqua-hover: #0E5F7A;   /* dark teal — links, focus rings, hover — AA on white   */
  --brand-aqua-soft:  #E8F9FD;   /* aqua wash — soft section backgrounds                  */

  /* ── BRAND BROWN — secondary ──────────────────────────────────────────
     Source: "RECOVERY" letterforms in official logo.
     Contrast: #613915 on white ≈ 10.4:1 (WCAG AAA). */

  --brand-brown:       #613915;  /* warm chocolate — secondary actions, story sections     */
  --brand-brown-hover: #4A2208;  /* deeper brown — hover/active states                    */
  --brand-brown-soft:  #F0E8E0;  /* brown wash — warm section backgrounds                 */

  /* ── BRAND DEEP — deep emphasis ──────────────────────────────────────
     Source: inner butterfly wing in official logo.
     Use only where strong emotional emphasis is justified. */

  --brand-deep:        #004CFF;  /* vivid blue — rare emphasis, one section per page max   */

  /* ── ACCENT COLORS ────────────────────────────────────────────────────
     Icons, decorative lines, hover states, tiny details only.
     Never as section backgrounds. */

  --accent-trans-pink: #FFAFC7;  /* trans pride flag pink — right butterfly wing           */
  --accent-purple:     #732982;  /* LGBTQIA+ rainbow — limited decorative use              */
  --accent-orange:     #FF8C00;  /* LGBTQIA+ rainbow                                       */
  --accent-green:      #008026;  /* LGBTQIA+ rainbow                                       */
  --accent-yellow:     #FFED00;  /* LGBTQIA+ rainbow                                       */
  --accent-red:        #E40303;  /* LGBTQIA+ rainbow                                       */

  --lime:              #B7E51C;  /* DEPRECATED — no longer applied to any rendered element */

  /* ── SURFACES ─────────────────────────────────────────────────────────  */

  --surface-warm:      #FFFFFF;   /* page background foundation (white)                   */
  --surface-white:     #FFFFFF;   /* cards, form fields, overlays                         */
  --surface-soft-blue: #E8F9FD;   /* aqua wash — soft brand-primary section backgrounds   */
  --surface-community: #003DB0;   /* homepage community — rich deep blue, white text      */
  --surface-dark:      #001244;   /* footer — deep navy derived from brand-deep            */

  /* ── TEXT ─────────────────────────────────────────────────────────────  */

  --text-primary:   #1E1A17;             /* headings, body, primary labels               */
  --text-secondary: rgba(22,32,31,.72);  /* leads, body copy on white                    */
  --text-tertiary:  rgba(22,32,31,.56);  /* captions, fine print                         */
  --text-on-dark:   #FFFFFF;             /* text on dark/community sections              */

  /* ── BORDER ───────────────────────────────────────────────────────────  */

  --border-light: rgba(22,32,31,.11);    /* hairlines, dividers, input borders           */

  /* ── CONTRAST NOTE ────────────────────────────────────────────────────
   * White text fails on --brand-aqua #73D7EE (ratio ≈ 3.6:1). Aqua sections
   * always use --text-primary (dark) for body text.
   * --brand-aqua-hover #0E5F7A passes AA on white (≈ 6.5:1).
   * White on --surface-community #003DB0 ≈ 8.5:1 (WCAG AAA).
   * White on --surface-dark #001244 ≈ 17.7:1 (WCAG AAA).
   */

  /* ── BACKWARD-COMPAT ALIASES — migrate CSS files then remove ─────────
     These ensure existing CSS continues to resolve during the migration.
     Do NOT use these names in new CSS. */

  --paper:         var(--surface-warm);
  --ink:           var(--text-primary);
  --ink-70:        var(--text-secondary);
  --ink-55:        var(--text-tertiary);
  --blue:          var(--brand-aqua);
  --blue-soft:     var(--surface-soft-blue);
  --blue-deep:     var(--brand-aqua-hover);
  --line:          var(--border-light);

  /* ── SHAPE TOKENS ─────────────────────────────────────────────────────  */

  --r-lg: 36px;
  --r-md: 24px;
  --r-sm: 16px;

  /* ── SHADOW ───────────────────────────────────────────────────────────  */

  --shadow: 0 24px 64px rgba(16,19,18,.12);

  /* ── LAYOUT ───────────────────────────────────────────────────────────  */

  --wide:    1160px;
  --measure:  720px;
  --tight:    620px;

  /* ── SPACING SCALE ───────────────────────────────────────────────────
     Four named tiers replace one-off clamp() values in page CSS.
     --space keeps backward compat as an alias for --space-lg.          */

  --space-xl: clamp(86px, 11vh, 140px);  /* major emphasis sections                      */
  --space-lg: clamp(72px,  9vh, 108px);  /* standard sections                            */
  --space-md: clamp(44px,  6vh,  68px);  /* compact / beat sections                      */
  --space-sm: clamp(28px, 3.5vh,  44px); /* tight strips (promise bar, etc.)             */

  --space: var(--space-lg);              /* backward-compat alias — use named tiers       */

  /* ── IMAGE PLACEHOLDERS ───────────────────────────────────────────────  */

  --placeholder-bg:      #EDEEEC;
  --placeholder-bg-dark: #212A2B;

  /* ── COLOR SCHEME ─────────────────────────────────────────────────────  */

  color-scheme: light;
}

/* ── base.css ────────────────────────────────────────────────────── */

/*
 * base.css — Inspire Recovery Design System
 * Universal reset and root element defaults.
 * Everything here applies to every page unconditionally.
 *
 * Production: becomes wp-content/themes/inspire-recovery/assets/css/base.css
 */

*  { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface-warm);
  color: var(--ink);
  font-family: Roboto, -apple-system, Segoe UI, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-wrap: pretty;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--placeholder-bg);
}

a { color: inherit; }

a:focus-visible {
  outline: 3px solid var(--brand-aqua-hover);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Remove default margin from all headings and paragraphs.
 * Spacing between elements is handled by parent section and component rules. */
h1, h2, h3, p { margin: 0; }

/* ── layout.css ────────────────────────────────────────────────────── */

/*
 * layout.css — Inspire Recovery Design System
 * Global layout utilities: constrained width wrapper, measure, section rhythm.
 * These classes are used on every page.
 *
 * Production: becomes wp-content/themes/inspire-recovery/assets/css/layout.css
 */

/* ── Width containers ────────────────────────────────────────────────── */

/* .wrap: the standard content container — caps at --wide (1160px), leaves 22px
 * horizontal gutter on each side below that, always centered. */
.wrap { width: min(var(--wide), calc(100% - 44px)); margin: 0 auto; }

/* .measure: constrains a text block to a comfortable reading width (720px).
 * Applied to copy regions inside .wrap, not to the wrap itself. */
.measure { max-width: var(--measure); }

/* ── Section rhythm ───────────────────────────────────────────────────── */

/* Standard section top/bottom padding — uses the named scale token. */
section { padding: var(--space-lg) 0; }

/* Offset for sticky header when jumping to anchored sections. */
section[id] { scroll-margin-top: 92px; }

/* ── Screen-reader utility ───────────────────────────────────────────── */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── typography.css ────────────────────────────────────────────────────── */

/*
 * typography.css — Inspire Recovery Design System
 * Type scale, heading styles, and inline text components.
 * Roboto Slab carries emotional headlines. Roboto carries body and UI.
 *
 * Font loading (Google Fonts, loaded in <head> of each page):
 *   <link rel="preconnect" href="https://fonts.googleapis.com">
 *   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 *   <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500;600&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
 * Production: self-host fonts and use @font-face here instead (see implementation plan §9).
 *
 * Production: becomes wp-content/themes/inspire-recovery/assets/css/typography.css
 */

/* ── Headings ─────────────────────────────────────────────────────────── */

h1, h2, h3 {
  font-family: "Roboto Slab", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(2.7rem, 5.6vw, 4.6rem);
  line-height: 1.02;
}

h2 {
  font-size: clamp(1.95rem, 3.8vw, 3rem);
  line-height: 1.08;
}

h3 {
  font-size: 1.3rem;
  line-height: 1.25;
}

/* Balanced wrapping for display headings */
h1, h2 { text-wrap: balance; }

/* ── Lead paragraph ───────────────────────────────────────────────────── */

.lead {
  font-size: clamp(1.14rem, 1.8vw, 1.36rem);
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ── Eyebrow label ────────────────────────────────────────────────────── */
/*
 * Used at the top of most sections to name the section with a warm lime tick.
 * Structure: <p class="eyebrow">Label text</p>
 * The lime tick is the ::before pseudo-element — a 30×3px pill.
 */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  font-size: .79rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-aqua-hover);
}

.eyebrow::before {
  content: "";
  width: 30px;
  height: 3px;
  border-radius: 3px;
  background: var(--accent-trans-pink);
  flex-shrink: 0;
}

/* ── navigation.css ────────────────────────────────────────────────────── */

/*
 * navigation.css — Inspire Recovery Design System
 * Global sticky header, primary desktop navigation, mobile menu toggle,
 * and mobile navigation panel. Identical across all pages.
 *
 * Responsive breakpoints:
 *   Desktop nav appears at ≥1024px (global-design-system.md §3).
 *   Below 1024px: the menu toggle is shown; nav is hidden.
 *
 * Typography:
 *   Primary nav: Roboto 13px / uppercase / weight 400 / letter-spacing 0.08em
 *   Header CTA: Roboto 11px / uppercase / weight 600 / letter-spacing 0.09em
 *   Mobile nav: Roboto 13px / uppercase / weight 500 / letter-spacing 0.07em
 *
 * Accessibility: the mobile menu uses aria-expanded + hidden attribute toggling
 * via navigation.js. Desktop nav links use aria-current="page" for the active page.
 * Focus ring: 3px solid --blue-deep, 3px offset.
 * Touch targets: ≥44px min-height on all interactive elements.
 */

/* ── Site header ─────────────────────────────────────────────────────── */

header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-light);
}

.header-inner {
  width: min(var(--wide), calc(100% - 44px));
  margin: 0 auto;
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 50px;
}

/* ── Logo / brand ─────────────────────────────────────────────────────── */

.brand {
  display: inline-flex;
  align-items: center;
  width: clamp(160px, 16vw, 200px);
  flex-shrink: 0;
}

.brand img {
  width: 100%;
  height: auto;
  object-fit: contain;
  background: transparent;
}

/* ── Primary desktop navigation ───────────────────────────────────────── */

nav.primary {
  display: none;
  gap: 32px;
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-aqua-hover);
}

nav.primary a {
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s;
}

nav.primary a:hover {
  color: var(--brand-aqua-hover);
}

nav.primary a[aria-current="page"] {
  color: var(--brand-aqua-hover);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--brand-aqua);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* ── Header actions (CTA + menu toggle) ──────────────────────────────── */

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  margin-left: auto;
}

/* Header CTA — same component as .btn; overrides only size/spacing for the header context */
.header-actions .btn {
  min-height: 40px;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
}

/* ── Mobile menu toggle button ───────────────────────────────────────── */

.menu-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 41px;
  padding: 0 16px;
  border: 1.5px solid rgba(14,95,122,.38);
  border-radius: 999px;
  background: transparent;
  color: var(--brand-aqua-hover);
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
}

.menu-toggle:hover { background: rgba(118,198,221,.14); }

.menu-toggle:focus-visible {
  outline: 3px solid var(--brand-aqua-hover);
  outline-offset: 3px;
}

/* ── Mobile navigation panel ─────────────────────────────────────────── */

.mobile-nav {
  border-top: 1px solid var(--border-light);
  background: rgba(255,255,255,.98);
  padding: 8px 22px 20px;
}

.mobile-nav a {
  display: block;
  padding: 16px 2px;
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--border-light);
}

.mobile-nav a:last-child { border-bottom: none; }

.mobile-nav a:hover,
.mobile-nav a:focus-visible { color: var(--brand-aqua-hover); }

/* ── Responsive: show desktop nav at 1024px ──────────────────────────── */

@media (min-width:1024px) {
  nav.primary  { display: flex; gap: 20px; }
  .header-inner { gap: 38px; }
  .menu-toggle { display: none; }
  .mobile-nav  { display: none !important; }
}

/* ── Hide the header CTA below 1193px to prevent horizontal overflow.
   At ≥1024px (desktop nav visible), the six nav items span ~675px; combined
   with brand (200px), gaps (76px), and the CTA btn (207px) the total reaches
   1158px — within the 1160px --wide cap. Below 1193px the container shrinks
   below that threshold, so the CTA is hidden and the nav items are the CTA
   proxy (Admissions link). Below 1024px the mobile toggle replaces the nav. */
@media (max-width: 1192px) {
  .header-actions .btn { display: none; }
}

/* ── Treatment dropdown — desktop ──────────────────────────────────────── */

.nav-dropdown-group {
  position: relative;
  display: flex;
  align-items: center;
  gap: 3px;
}

.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--brand-aqua-hover);
  cursor: pointer;
  opacity: .65;
  transition: opacity .15s;
  flex-shrink: 0;
}

.nav-dropdown-toggle:hover { opacity: 1; }

.nav-dropdown-toggle:focus-visible {
  outline: 3px solid var(--brand-aqua-hover);
  outline-offset: 2px;
  border-radius: 4px;
  opacity: 1;
}

.nav-toggle-chevron {
  display: inline-block;
  font-size: 9px;
  line-height: 1;
  transition: transform .2s ease;
}

.nav-dropdown-toggle[aria-expanded="true"] .nav-toggle-chevron {
  transform: rotate(180deg);
}

.nav-submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 8px;
  min-width: 230px;
  padding: 6px 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--r-sm);
  box-shadow: 0 8px 28px rgba(14,32,31,.11);
  z-index: 100;
}

/* Invisible hover bridge — fills the margin-top gap so :hover isn't lost
   when the pointer moves from the nav group downward into the submenu. */
.nav-submenu::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}

/* Show on CSS hover or keyboard focus-within */
.nav-dropdown-group:hover .nav-submenu,
.nav-dropdown-group:focus-within .nav-submenu { display: block; }

/* JS sets .is-closed to force-hide during Escape or explicit toggle-close.
   Cleared on next mouseenter so hover resumes normally. */
.nav-dropdown-group.is-closed .nav-submenu { display: none !important; }

.nav-submenu-link {
  display: block;
  padding: 11px 20px;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background .1s, color .1s;
}

.nav-submenu-link:hover {
  background: var(--surface-soft-blue);
  color: var(--brand-aqua-hover);
}

.nav-submenu-link:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--brand-aqua-hover);
  background: var(--surface-soft-blue);
  color: var(--brand-aqua-hover);
}

/* ── Treatment submenu — mobile ─────────────────────────────────────────── */

.mobile-nav-group {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border-light);
}

.mobile-nav-group > a {
  flex: 1;
  border-bottom: none;
}

.mobile-nav-expand {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 52px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--brand-aqua-hover);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: color .15s;
}

.mobile-nav-expand:hover,
.mobile-nav-expand:focus-visible { color: var(--ink); }

.mobile-nav-expand:focus-visible {
  outline: 3px solid var(--brand-aqua-hover);
  outline-offset: 2px;
}

.mobile-nav-sub {
  background: var(--surface-soft-blue);
  border-bottom: 1px solid var(--border-light);
}

.mobile-nav-sub a {
  padding-left: 28px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  border-color: rgba(22,32,31,.08);
}

.mobile-nav-sub a:last-child { border-bottom: none; }

/* ── components.css ────────────────────────────────────────────────────── */

/*
 * components.css — Inspire Recovery Design System
 * Reusable UI components shared across two or more pages:
 * buttons, action groups, links, image placeholders,
 * the shared two-column hero variant, the final invitation section,
 * the family panel, numbered steps, and the footer.
 * Also includes the prototype-note banner (excluded in production).
 *
 * Production: becomes wp-content/themes/inspire-recovery/assets/css/components.css
 */


/* ═══════════════════════════════════════════════════════════════════════
   PROTOTYPE BANNER
   — Only shown in local prototypes. Remove from production theme.
   ═══════════════════════════════════════════════════════════════════════ */

.prototype-note {
  padding: 7px 16px;
  text-align: center;
  background: var(--surface-dark);
  color: rgba(255,255,255,.7);
  font-size: .76rem;
}


/* ═══════════════════════════════════════════════════════════════════════
   BUTTONS
   All pages. Two-button system: primary (blue fill) and ghost (outline).
   Light variant used on dark/blue sections.
   ═══════════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--brand-aqua);
  color: var(--text-primary);
  font-family: inherit;
  font-weight: 700;
  font-size: .875rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, transform .2s;
}

.btn:hover {
  background: #5BBFD6;
  transform: translateY(-1px);
}

.btn:focus-visible {
  outline: 3px solid var(--brand-aqua-hover);
  outline-offset: 3px;
}

/* Ghost: brown border + text — secondary action (RECOVERY brown) */
.btn.ghost {
  background: transparent;
  color: var(--brand-brown);
  border-color: rgba(97,57,21,.4);
}

.btn.ghost:hover { background: rgba(97,57,21,.08); }

/* Light: white fill with deep-blue text — used inside the blue .final section */
.btn.light { background: #fff; color: var(--brand-aqua-hover); }
.btn.light:hover { background: #fff; }

/*
 * Brand Aqua section overrides — never place the aqua-fill .btn on the aqua .final background.
 * CTA buttons on the aqua surface become white/ink. .form-card sits on white, so its submit
 * button is restored to aqua by the more-specific .final .form-card .btn rule below.
 * Single source of truth for all six pages — page-level duplicates have been removed.
 */
.final .btn             { background: #fff; color: var(--ink); }
.final .btn:hover       { background: #EEF2F1; transform: translateY(-1px); }
.final .btn.ghost       { background: transparent; color: var(--ink); border-color: rgba(22,32,31,.44); }
.final .btn.ghost:hover { background: rgba(22,32,31,.07); transform: none; }
/* Restore: form card sits on white, so its submit button keeps the standard aqua fill */
.final .form-card .btn        { background: var(--brand-aqua); color: var(--text-primary); }
.final .form-card .btn:hover  { background: #5BBFD6; transform: translateY(-1px); }

/* ── Action group (button cluster) ──────────────────────────────────── */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 34px;
}


/* ═══════════════════════════════════════════════════════════════════════
   CALL LINK
   Used on Admissions, Who We Help, Therapies: a click-to-call phone link
   rendered as inline text with a chevron hover.
   ═══════════════════════════════════════════════════════════════════════ */

.calllink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--brand-aqua-hover);
  text-decoration: none;
}

.calllink:hover { text-decoration: underline; }


/* ═══════════════════════════════════════════════════════════════════════
   MORE LINK (soft arrow link)
   Used on WRLL, Admissions, Who We Help, Therapies: a text link with
   a right-arrow that nudges on hover. See global-design-system.md §6.
   ═══════════════════════════════════════════════════════════════════════ */

.morelink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  color: var(--brand-aqua-hover);
  font-weight: 600;
  text-decoration: none;
}

.morelink::after {
  content: "\2192";
  transition: transform .2s ease;
}

.morelink:hover::after { transform: translateX(4px); }

/* Non-clickable approach block: suppress arrow on span.morelink (no destination yet). */
span.morelink::after { content: ''; }

.morelink:focus-visible {
  outline: 3px solid var(--brand-aqua-hover);
  outline-offset: 3px;
  border-radius: 3px;
}


/* ═══════════════════════════════════════════════════════════════════════
   PHOTOGRAPHY PLACEHOLDERS
   Used on WRLL, Admissions, Who We Help, Therapies.
   Neutral fill reserving the exact space of the final image so real
   photography drops in with zero layout shift. Every placeholder has
   a role="img" and aria-label describing the intended photograph.
   ═══════════════════════════════════════════════════════════════════════ */

.ph {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--placeholder-bg);
  box-shadow: inset 0 0 0 1px rgba(22,32,31,.07);
  overflow: hidden;
}

/* Dark variant for charcoal/peak sections */
.ph.dark {
  background: var(--placeholder-bg-dark);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

/* The small label inside each placeholder */
.ph .ph-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.ph.dark .ph-label { color: rgba(255,255,255,.6); }

/* Small frame icon before the label text */
.ph .ph-label::before {
  content: "";
  width: 18px;
  height: 14px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  opacity: .6;
}


/* ═══════════════════════════════════════════════════════════════════════
   TWO-COLUMN HERO (shared variant)
   Used on WRLL, Admissions, Who We Help, Therapies.
   Copy left / large rounded photo right on a soft blue-to-paper gradient.
   The homepage and About heroes are different and live in their page files.
   ═══════════════════════════════════════════════════════════════════════ */

/*
 * The hero section background: a soft gradient from --blue-soft down to --paper.
 * Page files may override this background for the homepage (scrim/full-bleed)
 * and About page (dark cinematic scrim).
 */
.hero { background: linear-gradient(180deg, var(--surface-soft-blue), var(--surface-warm)); }

.hero-grid {
  display: grid;
  gap: clamp(32px, 4vw, 60px);
  align-items: center;
  padding: clamp(28px, 4vh, 60px) 0;
}

.hero-copy h1 { margin-bottom: 22px; }

/* The photo frame: asymmetric rounding (large top, small bottom-right) */
.hero-photo {
  border-radius: var(--r-lg) var(--r-lg) var(--r-sm) var(--r-lg);
  height: min(66vh, 560px);
  overflow: hidden;
  box-shadow: var(--shadow);
}

/* Two-column hero at 860px */
@media (min-width:860px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; }
}


/* ═══════════════════════════════════════════════════════════════════════
   FINAL INVITATION SECTION (shared base)
   Used on all six pages (Admissions varies significantly — see admissions.css).
   Bright --blue background, --ink text, centered layout.
   Page files add max-width overrides on .final .inner and .final .lead.
   ═══════════════════════════════════════════════════════════════════════ */

.final {
  background: var(--brand-aqua);
  color: var(--text-primary);
  text-align: center;
}

.final .inner {
  max-width: 860px;
  margin: 0 auto;
}

.final .eyebrow {
  color: var(--text-primary);
  justify-content: center;
}

.final .eyebrow::before { background: var(--accent-trans-pink); }

.final h2 { color: var(--ink); }

/* .final .lead inherits ink from .final { color: --ink } but the default
 * .lead rule uses --ink-70. This override restores readable dark text. */
.final .lead {
  color: var(--ink);
  margin: 22px auto 0;
}

.final .actions {
  justify-content: center;
  margin-top: 30px;
}

.final .calllink { color: var(--ink); }


/* ═══════════════════════════════════════════════════════════════════════
   FAMILY PANEL (on-ramp for families and partners)
   Used on WRLL and Admissions. A compact horizontal panel with a blue
   gradient background and a soft link to family resources.
   The section itself uses compact spacing: clamp(44px,6vh,76px) 0.
   Page files may override h2 max-width and p max-width.
   ═══════════════════════════════════════════════════════════════════════ */

.family { background: var(--surface-warm); padding: var(--space-md) 0; }

.family-panel {
  background: linear-gradient(120deg, var(--surface-soft-blue), #C7EFF8);
  border-radius: var(--r-lg);
  padding: clamp(30px, 4vw, 52px);
  display: grid;
  gap: 22px;
  align-items: center;
}

.family-panel h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  margin-bottom: 12px;
}

.family-panel p { color: var(--text-secondary); }

/* Remove the default margin-top from .morelink when inside the panel */
.family-panel .morelink { margin-top: 0; }

/* Two-column panel at 760px: text wide-left, link auto-right */
@media (min-width:760px) {
  .family-panel { grid-template-columns: 1.5fr auto; }
}


/* ═══════════════════════════════════════════════════════════════════════
   NUMBERED STEPS (lime circle, Roboto Slab number)
   Used on Homepage (admissions section) and Admissions page.
   The parent container differs per page; only the step item is shared.
   ═══════════════════════════════════════════════════════════════════════ */

.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
}

/* Brown circle with white number — brown = RECOVERY, these mark recovery steps */
.step .num {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-brown);
  color: #fff;
  font-family: "Roboto Slab", serif;
  font-weight: 600;
}

/* Step body text */
.step p { color: var(--text-secondary); }

.step strong { color: var(--ink); font-weight: 700; }


/* ═══════════════════════════════════════════════════════════════════════
   FOOTER (shared across all pages)
   ═══════════════════════════════════════════════════════════════════════ */

/* Accreditations bar — single horizontal strip above the dark footer */
.footer-accred {
  background: #fff;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  padding: 24px 0;
}

.accred-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.accred-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 clamp(24px, 4vw, 52px);
}

.accred-logo {
  max-height: 60px;
  width: auto;
  object-fit: contain;
  flex: none;
  mix-blend-mode: multiply;
  background: transparent;
}
.legitscript-seal {
  flex: none;
  width: 60px;
  height: 60px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
}
.legitscript-seal > * { transform-origin: top left; }
.legitscript-seal img,
.legitscript-seal a,
.legitscript-seal a img,
.legitscript-seal div { max-width: 60px !important; max-height: 60px !important; width: auto !important; height: auto !important; background: transparent !important; box-shadow: none !important; }

/* Ensure blend mode works — parent must not create a new stacking context */
.accred-item { isolation: auto; }

.accred-text { display: flex; flex-direction: column; gap: 3px; }

.accred-label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.accred-sub {
  font-size: .74rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
}

.accred-sub a {
  color: var(--brand-aqua-hover);
  text-decoration: none;
}
.accred-sub a:hover { text-decoration: underline; }

.accred-divider {
  width: 1px;
  height: 48px;
  background: var(--border-light);
  flex: none;
}

footer {
  background: var(--surface-dark);
  color: rgba(255,255,255,.66);
  padding: 40px 0;
  font-size: .92rem;
}


/* ══════════════════════════════════════════════════════════════════════════════
   SECTION BROWN — editorial foundation
   Shared base for all brown background sections: background + white text.
   Applied as a modifier class alongside the section's own class.
   Page CSS handles layout (padding, grid, max-widths); this sets color only.
   ══════════════════════════════════════════════════════════════════════════════ */

.section-brown { background: #7F4E20; color: #fff; }
.section-brown .eyebrow { color: rgba(255,255,255,.80); }
.section-brown .eyebrow::before { background: var(--accent-trans-pink); }
.section-brown h2 { color: #fff; }
.section-brown p { color: rgba(255,255,255,.82); }
.section-brown .morelink { color: #fff !important; }
.section-brown .morelink:hover { color: rgba(255,255,255,.80) !important; }
.section-brown a { color: rgba(255,255,255,.90); text-decoration: underline; text-underline-offset: 2px; }
.section-brown a:hover { color: #fff; text-decoration: underline; }
.section-brown a:focus-visible { outline: 2px solid rgba(255,255,255,.70); outline-offset: 2px; }


/* ══════════════════════════════════════════════════════════════════════════════
   HERO COMPACT — above-fold CTA modifier
   Reduces H1 and lead sizes on two-column heroes where CTAs must remain
   visible above the fold (Admissions, Therapies, What Recovery Looks Like).
   Applied as 'hero-compact' class on the <section class="hero"> element.
   ══════════════════════════════════════════════════════════════════════════════ */

.hero-compact .hero-copy h1 {
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.08;
  margin-bottom: 14px;
}
.hero-compact .hero-copy .lead { font-size: clamp(.95rem, 1.4vw, 1.05rem); }

.footer-inner { display: grid; gap: 16px; }
.footer-inner > div:first-child { padding-top: 8px; }

.footer-links { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { color: var(--brand-aqua); }

/* Footer two-column at 760px: text left, links right */
@media (min-width:760px) {
  .footer-inner { grid-template-columns: 1fr auto; align-items: start; }
  .footer-links { padding-top: 4px; }
}

/* ── forms.css ────────────────────────────────────────────────────── */

/*
 * forms.css — Inspire Recovery Design System
 * Form field styles, the contact form card, and the "not ready" bridge link.
 * Currently used on the Admissions page. In production, these styles target
 * Contact Form 7 (.wpcf7) or FluentForms (.fluent-form) plugin output —
 * the theme does not rebuild form logic, only overrides visual styles.
 *
 * PHI discipline: forms must not ask for diagnostic or clinical detail.
 * See production-implementation-plan.md §8.
 *
 * Production: becomes wp-content/themes/inspire-recovery/assets/css/forms.css
 */

/* ── Field wrapper ─────────────────────────────────────────────────────── */

.field {
  display: grid;
  gap: 7px;
  margin-bottom: 16px;
}

.field label {
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink);
}

/* ── Text inputs, select, textarea ────────────────────────────────────── */

.field input,
.field select,
.field textarea {
  font-family: inherit;
  font-size: 1rem;
  padding: 12px 14px;
  border: 1px solid var(--border-light);
  border-radius: var(--r-sm);
  background: var(--surface-warm);
  color: var(--ink);
  width: 100%;
}

.field textarea {
  min-height: 96px;
  resize: vertical;
}

/* AA-accessible focus ring: 3px solid --blue-deep */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--brand-aqua-hover);
  outline-offset: 2px;
  border-color: var(--brand-aqua-hover);
}

/* ── Form card ─────────────────────────────────────────────────────────── */
/*
 * The white card that wraps the admissions contact form.
 * Rendered on the bright --blue .final section, so the white card
 * provides contrast. Rounded asymmetric corners (large top, small bottom-right).
 */

.form-card {
  background: #fff;
  border-radius: var(--r-lg) var(--r-lg) var(--r-sm) var(--r-lg);
  box-shadow: var(--shadow);
  padding: clamp(24px, 3.4vw, 40px);
}

.form-card .formtitle {
  font-family: "Roboto Slab", serif;
  font-size: 1.2rem;
  margin-bottom: 4px;
}

.form-note {
  font-size: .9rem;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

/* Submit button spans full card width */
.form-card .btn { width: 100%; margin-top: 6px; }

/* ── FluentForms overrides ─────────────────────────────────────────────────── */
/*
 * Map FluentForms plugin markup to the IR design system.
 * Targets .ff-el-group (field wrapper), .ff-el-form-control (inputs/textarea),
 * .ff-el-form-label (labels), and the submit button.
 * We do not rebuild form logic — only visual style.
 */

.form-card .ff-el-group {
  display: grid;
  gap: 7px;
  margin-bottom: 16px;
}

/* Never override FluentForms' own hidden-field display:none */
.form-card .ff-el-group[style*="display: none"],
.form-card .ff-el-group[style*="display:none"],
.form-card .ff-el-group.ff-el-is-hidden,
.form-card .ff-el-group:has(> input[type="hidden"]),
.form-card .ff-el-group:has(> .ff-el-input--hidden) {
  display: none !important;
}

.form-card .ff-el-form-label label,
.form-card .ff-el-form-label .ff-el-is-required {
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink);
}

.form-card .ff-el-form-label .ff-el-is-required { color: var(--brand-brown); }

.form-card .ff-el-form-control {
  font-family: inherit;
  font-size: 1rem;
  padding: 12px 14px;
  border: 1px solid var(--border-light);
  border-radius: var(--r-sm);
  background: var(--surface-warm);
  color: var(--ink);
  width: 100%;
  box-shadow: none;
  transition: border-color .15s, outline .15s;
}

.form-card textarea.ff-el-form-control {
  min-height: 96px;
  resize: vertical;
}

.form-card .ff-el-form-control:focus-visible {
  outline: 3px solid var(--brand-aqua-hover);
  outline-offset: 2px;
  border-color: var(--brand-aqua-hover);
}

/* Submit button — match .btn style; !important overrides FluentForms inline green */
.form-card .ff-btn-submit,
.form-card button[type="submit"],
.form-card .ff-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 52px !important;
  margin-top: 6px !important;
  padding: 0 28px !important;
  background: var(--brand-aqua) !important;
  color: var(--ink) !important;
  font-family: inherit !important;
  font-size: .85rem !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  transition: background .18s, color .18s !important;
}

.form-card .ff-btn-submit:hover,
.form-card button[type="submit"]:hover,
.form-card .ff-btn:hover {
  background: var(--brand-aqua-hover) !important;
  color: #fff !important;
}

/* Error messages */
.form-card .error {
  font-size: .85rem;
  color: var(--brand-brown);
  margin-top: 4px;
}

/* Success message */
.form-card .ff-message-success {
  padding: 20px;
  background: var(--surface-soft-blue);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-size: 1rem;
  text-align: center;
}

/* ── Fluent Forms hidden-type fields — pre-init CSS fix ─────────────────── */
/*
 * Fluent Forms marks hidden-type fields with .hiddenfield on the .ff-el-group
 * wrapper. Without this rule, those fields render at full height until jQuery
 * loads and Fluent Forms JS hides them — producing a visible collapse flash
 * (observed on /admissions/verify-insurance/ and /admissions/).
 *
 * This rule fires at first paint with no JS dependency, covering all pages and
 * all forms. It does not affect user-facing fields — only elements Fluent Forms
 * has already designated as hidden field types.
 *
 * The Contact page has an older scoped rule (.con-hero-form .hiddenfield) in
 * contact-us.css — this global rule supersedes it but both are harmless.
 */
.fluentform .ff-el-group.hiddenfield,
.fluentform .hiddenfield {
  display: none !important;
  visibility: hidden !important;
}

/* ── “Not ready” bridge ─────────────────────────────────────────────────── */
/*
 * A soft, centered paragraph with a morelink below the final form,
 * providing a no-pressure exit to the Recovery Library.
 */

.bridge {
  margin-top: clamp(40px, 6vh, 64px);
  text-align: center;
}

.bridge p {
  color: var(--ink);
  max-width: 56ch;
  margin: 0 auto;
}

.bridge .morelink {
  margin-top: 16px;
  color: var(--ink);
}

/* ── animations.css ────────────────────────────────────────────────────── */

/*
 * animations.css — Inspire Recovery Design System
 * Scroll-reveal animation and the prefers-reduced-motion kill-switch.
 * The .reveal class is applied in HTML; the JS in scroll-reveal.js adds .in
 * via IntersectionObserver when each element enters the viewport.
 *
 * If IntersectionObserver is unavailable or prefers-reduced-motion is set,
 * scroll-reveal.js adds .in to all .reveal elements immediately, so content
 * is visible without animation in all cases.
 *
 * Production: becomes wp-content/themes/inspire-recovery/assets/css/animations.css
 */

/* ── Scroll reveal ─────────────────────────────────────────────────────── */
/*
 * Progressive enhancement: content is visible by default.
 * scroll-reveal.js adds .scroll-reveal-ready to <html> only after it has
 * pre-marked every currently-in-viewport .reveal element with .in, so those
 * elements are never hidden. Only out-of-viewport elements animate in on scroll.
 * This prevents a blank page when an optimization plugin (e.g. Hummingbird)
 * delays the script until first user interaction.
 */

.scroll-reveal-ready .reveal {
  opacity: 0;
  transform: translateY(16px);
  /* No transition on the hide state — elements jump instantly to hidden on init
     so no visible fade-out of below-fold content when the script first runs. */
}

.scroll-reveal-ready .reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity .7s ease, transform .7s ease;
}

/* ── Hover micro-interactions ─────────────────────────────────────────── */
/*
 * Button lift and morelink arrow nudge are defined alongside their components
 * in components.css. Scroll-based transitions live here.
 */

/* ── Reduced-motion kill-switch ───────────────────────────────────────── */
/*
 * Fully disables all motion: reveal shows immediately, scroll is instant,
 * morelink arrow does not animate.
 */

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal-ready .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html { scroll-behavior: auto; }

  .morelink::after { transition: none; }
}