/*
 * CareGiving Navigator — components.css
 *
 * Component styles for the v2 Part 8 Component Register. Every visual
 * decision pulls from brand.css custom properties — never hardcoded.
 * Components map 1:1 with Gutenberg block patterns under
 * /gutenberg-patterns/components/.
 */

/* ============================================================
   PrimaryCTA — orange action button
   ============================================================ */
.cg-cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cg-space-2);
  background: var(--cg-orange);
  color: var(--cg-navy);
  font-family: var(--cg-font-sans);
  font-weight: 600;
  font-size: var(--cg-fs-body);
  letter-spacing: var(--cg-tracking-cta);
  padding: var(--cg-space-3) var(--cg-space-6);
  border: none;
  border-radius: var(--cg-radius-md);
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--cg-dur-base) var(--cg-easing-out),
    color var(--cg-dur-base) var(--cg-easing-out),
    transform var(--cg-dur-fast) var(--cg-easing-out);
}
.cg-cta-primary:hover {
  background: var(--cg-navy);
  color: var(--cg-orange);
}
.cg-cta-primary:active {
  transform: scale(0.96);
}

/* ============================================================
   SecondaryCTA — outlined teal button or text link with chevron
   ============================================================ */
.cg-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--cg-space-2);
  background: transparent;
  color: var(--cg-teal);
  font-weight: 600;
  font-size: var(--cg-fs-body);
  padding: var(--cg-space-2) var(--cg-space-4);
  border: 2px solid var(--cg-teal);
  border-radius: var(--cg-radius-md);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--cg-dur-base) var(--cg-easing-out);
}
.cg-cta-secondary:hover {
  background: var(--cg-teal-tint);
  color: var(--cg-navy);
}

.cg-cta-text {
  display: inline-flex;
  align-items: center;
  gap: var(--cg-space-1);
  color: var(--cg-orange);
  font-weight: 600;
  text-decoration: none;
}
.cg-cta-text::after {
  content: '›';
  display: inline-block;
  font-size: 1.25em;
  line-height: 1;
  transition: transform var(--cg-dur-base) var(--cg-easing-out);
}
.cg-cta-text:hover::after { transform: translateX(3px); }

/* ============================================================
   ActionCallout — bordered, numbered actions, calm-accent surface
   The single most-important block on outcome pages.

   Priority modifiers added Stage 4 (May 4, 2026) to match Lovable's
   outcome visual register. Three levels:
     --urgent  safety-first, hospital-discharge       (red)
     --high    recent-change, living-situation,        (amber)
               daily-activities, legal-readiness
     --normal  (reserved — no current CGNav page)     (neutral green)
   Colors sourced from Lovable Spec Analysis §3.3.
   ============================================================ */
.cg-action-callout {
  background: var(--cg-teal-tint);
  border-left: 4px solid var(--cg-teal);
  border-radius: var(--cg-radius-md);
  padding: var(--cg-space-6);
  margin-block: var(--cg-space-7);
}

/* Urgent — immediate safety concern, post-medical event */
.cg-action-callout--urgent {
  background: #FBEDED;
  border-left-color: #D43030;
  /* subtle full-perimeter tint via inset shadow — keeps border-left dominant */
  box-shadow: inset 0 0 0 1px rgba(212, 48, 48, 0.18);
}
/* High — recent change, living situation, daily help, legal gap */
.cg-action-callout--high {
  background: #FDF5E6;
  border-left-color: #C89A18;
  box-shadow: inset 0 0 0 1px rgba(200, 154, 24, 0.22);
}
/* Normal — stable, time to prepare (reserved, no current CGNav page) */
.cg-action-callout--normal {
  background: #F4F1E9;
  border-left-color: #5A8C6E;
  box-shadow: inset 0 0 0 1px rgba(90, 140, 110, 0.18);
}

/* Priority icon on the "Do this first" heading via ::before —
   purely decorative, aria-hidden context provided by section label */
.cg-action-callout--urgent .cg-action-callout__heading::before {
  content: '⚠\00a0';
  color: #D43030;
  font-style: normal;
}
.cg-action-callout--high .cg-action-callout__heading::before {
  content: '⚠\00a0';
  color: #C89A18;
  font-style: normal;
}
.cg-action-callout--normal .cg-action-callout__heading::before {
  content: '✓\00a0';
  color: #5A8C6E;
  font-style: normal;
}
.cg-action-callout__heading {
  font-size: var(--cg-fs-h3);
  font-weight: 700;
  color: var(--cg-navy);
  margin: 0 0 var(--cg-space-4);
  text-transform: none;
}
.cg-action-callout ol {
  margin: 0;
  padding-left: 0;
  list-style: none;
  counter-reset: cg-action;
}
.cg-action-callout ol > li {
  counter-increment: cg-action;
  padding-left: var(--cg-space-7);
  position: relative;
  margin-block: var(--cg-space-4);
  line-height: var(--cg-lh-loose);
}
.cg-action-callout ol > li::before {
  content: counter(cg-action);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.75rem;
  height: 1.75rem;
  background: var(--cg-navy);
  color: var(--cg-warm-white);
  border-radius: 50%;
  font-weight: 700;
  font-size: var(--cg-fs-meta);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cg-action-callout ol > li strong {
  color: var(--cg-navy);
  font-weight: 700;
}

/* ============================================================
   AuthorCard — Ron portrait + name + pronunciation + bio
   ============================================================ */
.cg-author-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--cg-space-5);
  align-items: start;
  background: var(--cg-white);
  border: 1px solid var(--cg-navy-soft);
  border-radius: var(--cg-radius-lg);
  padding: var(--cg-space-5);
  margin-block: var(--cg-space-7);
  box-shadow: var(--cg-shadow-card);
}
.cg-author-card__photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--cg-navy);
}
.cg-author-card__name {
  margin: 0;
  font-size: var(--cg-fs-h3);
  font-weight: 700;
  color: var(--cg-navy);
  line-height: 1.2;
}
.cg-author-card__pronunciation {
  font-size: var(--cg-fs-meta);
  color: var(--cg-warm-grey);
  font-style: italic;
  margin: var(--cg-space-1) 0 var(--cg-space-3);
}
.cg-author-card__bio {
  margin: 0;
  font-size: var(--cg-fs-body);
  color: var(--cg-navy);
  line-height: var(--cg-lh-loose);
}

/* ============================================================
   CaptureForm — GHL iframe wrapper + consent line

   Stage 4 (May 4, 2026): restyled from dark navy to Lovable light
   register. Navy background was the primary dark-register offender
   on outcome pages. Now uses warm sunken-band tone (#F4F1E9) matching
   Lovable's surface-sunken token, with navy text throughout.
   ============================================================ */
.cg-capture-form {
  background: #F4F1E9;
  border: 1px solid #E2DDD0;
  border-radius: var(--cg-radius-lg);
  padding: var(--cg-space-7) var(--cg-space-6);
  margin-block: var(--cg-space-7);
  color: var(--cg-navy);
}
.cg-capture-form__heading {
  font-size: var(--cg-fs-h3);
  font-weight: 700;
  color: var(--cg-navy);
  margin: 0 0 var(--cg-space-3);
}
.cg-capture-form__subhead {
  font-size: var(--cg-fs-body);
  color: var(--cg-navy);
  opacity: 0.80;
  margin: 0 0 var(--cg-space-5);
  line-height: var(--cg-lh-loose);
}
.cg-capture-form__iframe-wrap {
  background: #FCFAF8;
  border: 1px solid #E2DDD0;
  border-radius: var(--cg-radius-md);
  overflow: hidden;
}
.cg-capture-form__iframe-wrap iframe {
  width: 100%;
  border: 0;
  display: block;
}
.cg-capture-form__consent {
  margin-top: var(--cg-space-3);
  font-size: var(--cg-fs-meta);
  color: var(--cg-warm-grey);
  opacity: 1;
  line-height: var(--cg-lh-meta);
}

/* ============================================================
   Tile + TileGrid — 3-tile onward grid
   ============================================================ */
.cg-tile-grid {
  display: grid;
  gap: var(--cg-space-4);
  margin-block: var(--cg-space-7);
}
@media (min-width: 48rem) {
  .cg-tile-grid--three { grid-template-columns: repeat(3, 1fr); }
  .cg-tile-grid--two   { grid-template-columns: repeat(2, 1fr); }
}

.cg-tile {
  display: flex;
  flex-direction: column;
  gap: var(--cg-space-3);
  background: var(--cg-white);
  border: 1px solid var(--cg-navy-soft);
  border-radius: var(--cg-radius-lg);
  padding: var(--cg-space-5);
  text-decoration: none;
  color: var(--cg-navy);
  transition:
    transform var(--cg-dur-base) var(--cg-easing-out),
    box-shadow var(--cg-dur-base) var(--cg-easing-out),
    border-color var(--cg-dur-base) var(--cg-easing-out);
}
@media (hover: hover) {
  .cg-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--cg-shadow-lift);
    border-color: var(--cg-teal);
  }
}
.cg-tile__title {
  font-size: var(--cg-fs-h3);
  font-weight: 600;
  color: var(--cg-navy);
  margin: 0;
  line-height: 1.3;
}
.cg-tile__body {
  font-size: var(--cg-fs-body);
  color: var(--cg-navy);
  margin: 0;
  line-height: var(--cg-lh-loose);
}
.cg-tile__cta {
  margin-top: auto;
  font-size: var(--cg-fs-meta);
  font-weight: 600;
  color: var(--cg-orange);
}

/* ============================================================
   DisclaimerStrip — italic, calm, end-of-page
   ============================================================ */
.cg-disclaimer {
  margin-block: var(--cg-space-7);
  padding: var(--cg-space-4) var(--cg-space-5);
  border-top: 1px solid var(--cg-navy-soft);
  border-bottom: 1px solid var(--cg-navy-soft);
  font-size: var(--cg-fs-meta);
  font-style: italic;
  color: var(--cg-warm-grey);
  line-height: var(--cg-lh-meta);
}
.cg-disclaimer p { margin: 0; }
.cg-disclaimer p + p { margin-top: var(--cg-space-2); }

/* ============================================================
   Outcome page chrome — situation-mirror headline + orientation
   ============================================================ */
.cg-outcome-hero {
  padding: var(--cg-space-8) var(--cg-space-5) var(--cg-space-5);
  max-width: var(--cg-content-max);
  margin-inline: auto;
}
.cg-outcome-hero__breadcrumb {
  font-size: var(--cg-fs-meta);
  color: var(--cg-warm-grey);
  margin-bottom: var(--cg-space-3);
}
.cg-outcome-hero__headline {
  font-size: var(--cg-fs-display);
  font-weight: 700;
  line-height: var(--cg-lh-tight);
  color: var(--cg-navy);
  margin: 0 0 var(--cg-space-5);
}
.cg-outcome-hero__orientation {
  font-size: var(--cg-fs-lead);
  line-height: var(--cg-lh-loose);
  color: var(--cg-navy);
  margin: 0;
}

.cg-outcome-body {
  max-width: var(--cg-content-max);
  margin-inline: auto;
  padding: 0 var(--cg-space-5);
}

/* Stage 4: restyled to teal link matching Lovable's "Restart the decision
   tree" treatment. Phase 1 used warm-grey muted — Lovable uses primary-green
   (teal) for this action link. */
.cg-restart-link {
  display: block;
  text-align: center;
  margin-block: var(--cg-space-7);
  font-size: var(--cg-fs-body);
  font-weight: 600;
  color: var(--cg-teal);
  text-decoration: none;
}
.cg-restart-link:hover {
  color: var(--cg-navy);
}

/* Breadcrumb link on outcome hero — "From the Decision Tree" wraps in <a>
   Stage 4: adds ← arrow via ::before so HTML text stays verbatim */
.cg-outcome-hero__breadcrumb a {
  color: var(--cg-teal);
  font-weight: 500;
  text-decoration: none;
}
.cg-outcome-hero__breadcrumb a::before {
  content: '\2190\00a0'; /* ← + non-breaking space */
}
.cg-outcome-hero__breadcrumb a:hover {
  color: var(--cg-navy);
}

/* ============================================================
   PillarHero (week 2) — navy gradient bg, pillar name, framing line
   ============================================================ */
.cg-pillar-hero {
  background: linear-gradient(180deg, var(--cg-navy) 0%, #2c3548 100%);
  color: var(--cg-warm-white);
  padding: var(--cg-space-9) var(--cg-space-5) var(--cg-space-7);
  text-align: center;
}
.cg-pillar-hero__title {
  font-size: var(--cg-fs-display);
  font-weight: 700;
  color: var(--cg-warm-white);
  margin: 0 0 var(--cg-space-3);
  line-height: var(--cg-lh-tight);
}
.cg-pillar-hero__frame {
  font-size: var(--cg-fs-lead);
  color: var(--cg-warm-white);
  opacity: 0.9;
  max-width: 36rem;
  margin-inline: auto;
  line-height: var(--cg-lh-loose);
}

/* ============================================================
   Footer
   ============================================================ */
.cg-footer {
  background: var(--cg-navy);
  color: var(--cg-warm-white);
  padding: var(--cg-space-9) var(--cg-space-5) var(--cg-space-6);
  margin-top: var(--cg-space-10);
}
.cg-footer__inner {
  max-width: var(--cg-wide-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cg-space-7);
}
@media (min-width: 48rem) {
  .cg-footer__inner { grid-template-columns: 1.5fr 1fr 1fr; }
}
.cg-footer a { color: var(--cg-orange); }
.cg-footer__legal {
  border-top: 1px solid rgba(245, 244, 241, 0.15);
  margin-top: var(--cg-space-7);
  padding-top: var(--cg-space-5);
  font-size: var(--cg-fs-meta);
  color: var(--cg-warm-white);
  opacity: 0.7;
  text-align: center;
  line-height: var(--cg-lh-meta);
}

/* ============================================================
   BottomNav — retired May 2026; replaced by hamburger top-nav.
   ============================================================ */
.cg-bottom-nav { display: none !important; }

/* ============================================================
   Header
   ============================================================ */
.cg-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--cg-warm-white);
  border-bottom: 1px solid var(--cg-navy-soft);
  padding: var(--cg-space-3) 0;
}
.cg-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 64px;
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 47.999rem) {
  .cg-header__inner {
    padding: 0 20px;
  }
}
.cg-header__logo img {
  height: 36px;
  width: auto;
}
/* Right-side controls wrapper: search + hamburger */
.cg-header__controls {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}
.cg-header__search {
  background: transparent;
  border: 0;
  cursor: pointer;
  width: var(--cg-tap-min);
  height: var(--cg-tap-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cg-navy);
  padding: 0;
  flex-shrink: 0;
}
.cg-header__search svg {
  width: 22px;
  height: 22px;
}
@media (max-width: 47.999rem) {
  .cg-header__search svg {
    width: 26px;
    height: 26px;
  }
}

/* ============================================================
   Hamburger toggle — mobile only, top-right of header
   ============================================================ */
.cg-header__mobile-toggle {
  display: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  width: var(--cg-tap-min);
  height: var(--cg-tap-min);
  align-items: center;
  justify-content: center;
  color: var(--cg-navy);
  padding: 0;
  flex-shrink: 0;
  margin-left: var(--cg-space-1);
}
.cg-header__mobile-toggle svg {
  width: 26px;
  height: 26px;
}
@media (max-width: 47.999rem) {
  .cg-header__mobile-toggle { display: inline-flex; }
  /* Hide desktop nav on mobile — it was already hidden via customizer but be explicit */
  .cg-header__nav { display: none; }
}

/* ============================================================
   Mobile nav drawer — slides in from top below header
   ============================================================ */
.cg-mobile-nav {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 39;
  background: var(--cg-warm-white);
  overflow-y: auto;
  padding-top: 70px; /* clear sticky header */
  padding-bottom: var(--cg-space-8);
}
.cg-mobile-nav.is-open {
  display: block;
}
.cg-mobile-nav__list {
  list-style: none;
  margin: 0;
  padding: var(--cg-space-4) var(--cg-space-5);
}
.cg-mobile-nav__item {
  border-bottom: 1px solid var(--cg-navy-soft);
}
.cg-mobile-nav__item:last-child {
  border-bottom: 0;
}
.cg-mobile-nav__link {
  display: block;
  padding: var(--cg-space-4) var(--cg-space-2);
  font-size: var(--cg-fs-lead);
  font-weight: 600;
  color: var(--cg-navy);
  text-decoration: none;
}
.cg-mobile-nav__link.is-active,
.cg-mobile-nav__link[aria-current="page"] {
  color: var(--cg-orange);
}
.cg-mobile-nav__link:hover {
  color: var(--cg-teal);
}
/* Sub-items under Library */
.cg-mobile-nav__sub {
  list-style: none;
  margin: 0 0 var(--cg-space-3) 0;
  padding: 0 0 0 var(--cg-space-5);
}
.cg-mobile-nav__sub-link {
  display: block;
  padding: var(--cg-space-2) var(--cg-space-2);
  font-size: var(--cg-fs-body);
  font-weight: 400;
  color: var(--cg-navy);
  text-decoration: none;
}
.cg-mobile-nav__sub-link:hover {
  color: var(--cg-teal);
}

/* ============================================================
   Resources Hub — disclaimer block (Stage 6b, May 5, 2026)

   Long-form guidance disclaimer that sits above the cross-link
   footer on Resources Hub pages where the page itself constitutes
   editorial recommendation a family could act on for clinical,
   legal, or financial decisions with significant or irreversible
   consequences if wrong.

   Distinct from .cg-disclaimer (short medical-strip used inline).
   This is the longer guidance block. Italicized body, cream-secondary
   background, hairline border with a 4px teal left for visual weight
   without invoking the urgent-red palette (these are guidance, not
   warnings). Wrapped in <aside role="note"> for screen-reader a11y.

   Trigger rule for when to apply lives in EditorialDirector-Memory.md
   Part 7 ("Resources Hub disclaimer-pattern rule"). Source files mark
   the block with the .cg-disclaimer-block wrapper at conversion time.

   Currently applied to: financial-and-legal, end-of-life,
   medical-and-logistical, senior-housing.
   ============================================================ */
.cg-disclaimer-block {
  background: #F8F6F2;
  border: 1px solid #E2DDD0;
  border-left: 4px solid var(--cg-teal);
  border-radius: var(--cg-radius-md);
  padding: var(--cg-space-5) var(--cg-space-6);
  margin-block: var(--cg-space-7) var(--cg-space-5);
  font-style: italic;
  font-size: var(--cg-fs-body);
  color: var(--cg-navy);
  line-height: var(--cg-lh-loose);
}
.cg-disclaimer-block p {
  margin: 0;
}
.cg-disclaimer-block p + p {
  margin-top: var(--cg-space-3);
}
@media (max-width: 47.999rem) {
  .cg-disclaimer-block {
    padding: var(--cg-space-4) var(--cg-space-5);
  }
}

/* ============================================================
   Resources Hub — trigger-quoted scenarios (Stage 6b, May 5, 2026)

   The "Where to start if you're not sure" section on the Resources
   Hub index. Six pairs of bold quoted family-trigger lines followed
   by routing to specific topic hubs. These are the moment-of-panic
   entry points for the entire hub — visual treatment makes them
   stand out as clickable starting points without using the
   urgent-red palette reserved for outcome-page callouts.

   Layout: bold quoted line + indented routing line per pair, with a
   subtle teal left rule on desktop for visual weight. Mobile drops
   the rule (vertical real estate too tight at 375px) but preserves
   the indent so the pair structure stays legible.
   ============================================================ */
.cg-trigger-scenarios {
  margin-block: var(--cg-space-7);
}
.cg-trigger-pair {
  margin-bottom: var(--cg-space-6);
  padding-left: var(--cg-space-4);
}
.cg-trigger-pair:last-child {
  margin-bottom: 0;
}
@media (min-width: 48rem) {
  .cg-trigger-pair {
    border-left: 3px solid var(--cg-teal);
    padding-left: var(--cg-space-5);
  }
}
.cg-trigger-quote {
  font-size: var(--cg-fs-lead);
  font-weight: 700;
  color: var(--cg-navy);
  line-height: var(--cg-lh-relaxed);
  margin: 0 0 var(--cg-space-2);
}
.cg-trigger-route {
  font-size: var(--cg-fs-body);
  color: var(--cg-navy);
  line-height: var(--cg-lh-loose);
  margin: 0;
  padding-left: var(--cg-space-4);
}
.cg-trigger-route a {
  font-weight: 600;
}

/* ============================================================
   Resources Hub — cross-link footer (Stage 6b, May 5, 2026)

   The italic "Pages on this site that pair with this hub: A · B · C"
   line at the bottom of every Resources Hub page (and the pillar hub
   pages that adopt the same pattern). Sits below the disclaimer block
   when one is present.
   ============================================================ */
.cg-cross-link-footer {
  margin-top: var(--cg-space-7);
  padding-top: var(--cg-space-5);
  border-top: 1px solid var(--cg-navy-soft);
  font-style: italic;
  font-size: var(--cg-fs-meta);
  color: var(--cg-warm-grey);
  line-height: var(--cg-lh-meta);
}
.cg-cross-link-footer a {
  color: var(--cg-teal);
  text-decoration-thickness: 1px;
}
.cg-cross-link-footer a:hover {
  color: var(--cg-navy);
}

/* ============================================================
   Resources Hub — back link (Stage 6b, May 5, 2026)
   Folded from Customizer Additional CSS into theme source
   at Stage 6c (May 6, 2026) for theme self-containment.

   Previously lived only in Customizer Additional CSS and would
   have disappeared on a Customizer reset. Now canonical here
   per Stage 6c carry-forward brief. Matches the CSS-variable
   architecture of lines 556–652 above.

   Used on all 8 Resources Hub topic pages as the
   "← Back to all resources" navigation link.
   ============================================================ */
.cg-resources-back {
  display: inline-flex;
  align-items: center;
  gap: var(--cg-space-1);
  margin-bottom: var(--cg-space-5);
  font-size: var(--cg-fs-meta);
  color: var(--cg-teal);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--cg-dur-base) var(--cg-easing-out);
}
.cg-resources-back:hover {
  color: var(--cg-navy);
}

/* ============================================================
   Pillar hub — lede / positioning paragraph (Stage 6c, May 6, 2026)

   The ~80-word positioning paragraph that appears at the top of
   each pillar hub page, immediately below the h1. Sets scope and
   reader frame before the intro essay begins. Larger and lighter
   than body text; warm-grey to signal "orientation" not "content."
   ============================================================ */
.cg-pillar-hero-lede {
  font-size: var(--cg-fs-lead);
  color: var(--cg-warm-grey);
  line-height: var(--cg-lh-loose);
  margin-top: var(--cg-space-4);
  margin-bottom: var(--cg-space-7);
  padding-bottom: var(--cg-space-6);
  border-bottom: 1px solid var(--cg-navy-soft);
}

/* ============================================================
   Pillar hub — Caregiver Reset / lead magnet CTA block
   (Stage 6c, May 6, 2026)

   Teal-tint callout block used between the intro essay and the
   self-check section on the Caregiver Wellbeing pillar hub.
   Follows the ActionCallout visual register (teal-tint bg,
   teal border-left) but is wider / less urgent than the orange
   outcome callouts. Not used on the finances hub at v1.
   ============================================================ */
.cg-pillar-cta {
  background: var(--cg-teal-tint);
  border: 1px solid rgba(62, 116, 98, 0.18);
  border-left: 4px solid var(--cg-teal);
  border-radius: var(--cg-radius-lg);
  padding: var(--cg-space-6) var(--cg-space-7);
  margin-block: var(--cg-space-8);
}
.cg-pillar-cta h3 {
  margin-top: 0;
  color: var(--cg-teal);
  font-size: var(--cg-fs-h3);
}
.cg-pillar-cta p {
  margin-bottom: var(--cg-space-5);
}
@media (max-width: 47.999rem) {
  .cg-pillar-cta {
    padding: var(--cg-space-5) var(--cg-space-5);
  }
}

/* ============================================================
   Pillar hub — inline glossary term strip (Stage 6c, May 6, 2026)

   The italic "Glossary terms on this page: A · B · C" strip
   that appears at the bottom of each pillar hub's intro essay
   section, before the depth-content sub-sections begin.
   Mirrors the cross-link-footer visual register but lighter —
   positioned inline, not at the page bottom.

   Note: /glossary#caregiver-burnout is staged — hold that
   specific link until the Caregiver Burnout glossary entry is
   live (queued for next glossary expansion pass).
   ============================================================ */
.cg-glossary-strip {
  font-size: var(--cg-fs-meta);
  font-style: italic;
  color: var(--cg-warm-grey);
  line-height: var(--cg-lh-meta);
  margin-block: var(--cg-space-5);
}
.cg-glossary-strip a {
  color: var(--cg-teal);
  text-decoration-thickness: 1px;
}
.cg-glossary-strip a:hover {
  color: var(--cg-navy);
}

/* ============================================================
   Glossary page — letter-section heading (Stage 6c, May 6, 2026)

   The single-letter section dividers (A, C, D, etc.) on the
   /glossary/ page. Teal, large, with a 2px teal rule below —
   visually distinct from content h2s so the page scans as a
   reference document, not a long-form article.
   ============================================================ */
.cg-glossary-letter {
  font-size: var(--cg-fs-h2);
  font-weight: 700;
  color: var(--cg-teal);
  border-bottom: 2px solid var(--cg-teal);
  padding-bottom: var(--cg-space-2);
  margin-top: var(--cg-space-9);
  margin-bottom: var(--cg-space-5);
}
.cg-glossary-letter:first-of-type {
  margin-top: var(--cg-space-6);
}

/* ============================================================
   Glossary page — individual term entry (Stage 6c, May 6, 2026)

   Each term lives in a .cg-glossary-entry wrapper. h3 carries
   the term name (and the anchor id). Hairline border-bottom
   separates entries; last entry in each letter section drops
   its border so the letter heading above the next section
   provides natural separation.
   ============================================================ */
.cg-glossary-entry {
  padding: var(--cg-space-5) 0;
  border-bottom: 1px solid var(--cg-navy-soft);
}
.cg-glossary-entry:last-child {
  border-bottom: none;
  padding-bottom: var(--cg-space-6);
}
.cg-glossary-entry h3 {
  margin-top: 0;
  margin-bottom: var(--cg-space-2);
  font-size: var(--cg-fs-h3);
  font-weight: 600;
  color: var(--cg-navy);
}
.cg-glossary-entry p {
  margin: 0;
  font-size: var(--cg-fs-body);
  line-height: var(--cg-lh-loose);
  color: var(--cg-navy);
}

/* ============================================================
   Conversation Guides hub — series tiles (Stage 6c, May 6, 2026)

   The "Five Family Conversations" numbered series on /guides/.
   Two tile states: live (clickable, full opacity) and coming-soon
   (pointer-events off, 55% opacity, slightly different bg).
   Each tile carries a .cg-guide-number badge in teal above the h3.

   Stacks vertically on mobile, stacks vertically on desktop too
   (these are editorial entries, not a card grid — readability
   matters more than density).
   ============================================================ */
.cg-guide-series {
  display: flex;
  flex-direction: column;
  gap: var(--cg-space-5);
  margin-block: var(--cg-space-6) var(--cg-space-8);
}
.cg-guide-tile {
  border: 1px solid var(--cg-navy-soft);
  border-radius: var(--cg-radius-md);
  padding: var(--cg-space-5) var(--cg-space-6);
  background: var(--cg-warm-white);
  transition: border-color var(--cg-dur-base) var(--cg-easing-out),
              box-shadow var(--cg-dur-base) var(--cg-easing-out);
}
.cg-guide-tile:hover {
  border-color: var(--cg-teal);
  box-shadow: var(--cg-shadow-card);
}
.cg-guide-tile--coming-soon {
  opacity: 0.55;
  pointer-events: none;
  background: #F8F6F2;
  cursor: default;
}
.cg-guide-tile--coming-soon:hover {
  border-color: var(--cg-navy-soft);
  box-shadow: none;
}
.cg-guide-number {
  display: block;
  font-size: var(--cg-fs-meta);
  font-weight: 700;
  color: var(--cg-teal);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--cg-space-2);
}
.cg-guide-tile h3 {
  margin-top: 0;
  margin-bottom: var(--cg-space-2);
  font-size: var(--cg-fs-h3);
  color: var(--cg-navy);
}
.cg-guide-tile p {
  margin: var(--cg-space-2) 0 var(--cg-space-3);
  font-size: var(--cg-fs-body);
  color: var(--cg-navy);
}
.cg-guide-tile a.cg-guide-read {
  display: inline-block;
  font-size: var(--cg-fs-meta);
  font-weight: 600;
  color: var(--cg-orange);
  text-decoration: none;
}
.cg-guide-tile a.cg-guide-read:hover {
  color: var(--cg-navy);
}
.cg-guide-coming {
  display: inline-block;
  font-size: var(--cg-fs-meta);
  color: var(--cg-warm-grey);
  font-style: italic;
  margin-top: var(--cg-space-2);
}
@media (max-width: 47.999rem) {
  .cg-guide-tile {
    padding: var(--cg-space-4) var(--cg-space-5);
  }
}

/* ============================================================
   Individual conversation guide — blockquote openers
   (Stage 6c, May 6, 2026)

   The verbatim conversation-opening lines in guide pages
   (e.g., "Mom, I want to make sure you can keep living the way
   you want to..."). These are not standard blockquotes — they're
   actionable scripts. Teal left rule, teal-tint background,
   italic body, no attribution line.
   ============================================================ */
.cg-conversation-opener {
  background: var(--cg-teal-tint);
  border-left: 4px solid var(--cg-teal);
  border-radius: 0 var(--cg-radius-md) var(--cg-radius-md) 0;
  padding: var(--cg-space-4) var(--cg-space-5);
  margin-block: var(--cg-space-4);
  font-style: italic;
  font-size: var(--cg-fs-body);
  color: var(--cg-navy);
  line-height: var(--cg-lh-loose);
}
.cg-conversation-opener p {
  margin: 0;
}
.cg-conversation-opener p + p {
  margin-top: var(--cg-space-3);
}

/* ============================================================
   /the-book/ — pre-order stub (Layer 5, 2026-05-06)

   The pre-order section on /the-book/ is deployed in the DOM
   but hidden pending September 15, 2026 activation.
   To activate: remove this rule (or the class from the element).
   The section will then render with existing structural styles.

   Surfaces: /the-book/ (page id 22) only.
   Source-side wrapper: <div class="cg-pre-order-stub">
   Activation date: September 15, 2026.
   ============================================================ */
.cg-pre-order-stub {
  display: none;
}

/* ============================================================
   /watch/ — shorts grid (Layer 5, 2026-05-06)

   Responsive 3-column grid for YouTube short embeds on /watch/.
   Each card holds a YouTube iframe (aspect-ratio 9/16) or a
   placeholder div. All iframes use loading="lazy" per the
   performance budget rule (Layer 5 brief).

   At desktop: 3 cards per row.
   At tablet (48rem–63.999rem): 2 cards per row.
   At mobile (<48rem): 1 card per row (full width).

   Surfaces: /watch/ (page id 23) only.
   Source-side wrapper: <div class="cg-shorts-grid">
   Card wrapper: <div class="cg-shorts-card">
   ============================================================ */
.cg-shorts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--cg-space-4);
  margin-block: var(--cg-space-6);
}
.cg-shorts-card {
  border: 1px solid var(--cg-navy-soft);
  border-radius: var(--cg-radius-md);
  overflow: hidden;
  background: var(--cg-card-lift);
  aspect-ratio: 9 / 16;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cg-shorts-card iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.cg-shorts-card--placeholder {
  background: var(--cg-sunken-band);
}
@media (max-width: 63.999rem) {
  .cg-shorts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 47.999rem) {
  .cg-shorts-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   /consultation/ — steps list (Layer 5, 2026-05-06)

   The 3-step "How It Works" numbered block on /consultation/.
   Navy circle number badge left of the step body text.
   Follows the ActionCallout counter pattern but is a standalone
   component (no background fill — steps live in the page flow).

   Surfaces: /consultation/ (page id 150).
   Source-side wrapper: <div class="cg-steps-list">
   Step item: <div class="cg-steps-item">
   Number badge: <div class="cg-steps-number">
   ============================================================ */
.cg-steps-list {
  display: flex;
  flex-direction: column;
  gap: var(--cg-space-5);
  margin-block: var(--cg-space-6);
}
.cg-steps-item {
  display: flex;
  gap: var(--cg-space-4);
  align-items: flex-start;
}
.cg-steps-number {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  background: var(--cg-navy);
  color: #fff;
  border-radius: 50%;
  font-weight: 700;
  font-size: var(--cg-fs-body);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin-top: 2px;
}
.cg-steps-body {
  flex: 1;
}

/* ============================================================
   Interactive Checklist — /checklists/ page
   (Website Punchlist fix #1, May 9, 2026)

   Converts <ul> lists to tappable checkbox lists with localStorage
   state persistence. Scoped to /checklists/ via JS conditional load.
   ============================================================ */
.cg-checklist {
  list-style: none;
  padding-left: 0;
  margin: var(--cg-space-5) 0 0;
}

.cg-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: var(--cg-space-3);
  padding: var(--cg-space-3) var(--cg-space-2);
  border-radius: var(--cg-radius-sm, 4px);
  cursor: pointer;
  transition: background-color var(--cg-dur-base) var(--cg-easing-out);
  user-select: none;
  -webkit-user-select: none;
}

.cg-checklist__item:hover {
  background: var(--cg-sunken-band, #F0EDE3);
}

.cg-checklist__item:focus-visible {
  outline: 2px solid var(--cg-teal);
  outline-offset: 1px;
}

.cg-checklist__box {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--cg-navy);
  border-radius: 3px;
  margin-top: 2px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: transparent;
  transition:
    background-color var(--cg-dur-base) var(--cg-easing-out),
    border-color var(--cg-dur-base) var(--cg-easing-out),
    color var(--cg-dur-base) var(--cg-easing-out);
}

.cg-checklist__item--checked .cg-checklist__box {
  background: var(--cg-teal);
  border-color: var(--cg-teal);
  color: #fff;
}

.cg-checklist__label {
  line-height: var(--cg-lh-loose);
  color: var(--cg-navy);
  transition:
    color var(--cg-dur-base) var(--cg-easing-out),
    text-decoration-color var(--cg-dur-base) var(--cg-easing-out);
}

.cg-checklist__item--checked .cg-checklist__label {
  text-decoration: line-through;
  text-decoration-color: var(--cg-warm-grey);
  color: var(--cg-warm-grey);
}

.cg-checklist__footer {
  display: flex;
  align-items: center;
  gap: var(--cg-space-5);
  margin-top: var(--cg-space-4);
  margin-bottom: var(--cg-space-6);
  padding-top: var(--cg-space-3);
  border-top: 1px solid var(--cg-navy-soft);
}

.cg-checklist__progress {
  font-size: var(--cg-fs-meta);
  color: var(--cg-warm-grey);
  font-style: italic;
}

.cg-checklist__progress--complete {
  color: var(--cg-teal);
  font-weight: 600;
  font-style: normal;
}

.cg-checklist__reset {
  font-size: var(--cg-fs-meta) !important;
  color: var(--cg-warm-grey) !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid var(--cg-navy-soft) !important;
  border-radius: var(--cg-radius-sm, 4px) !important;
  padding: var(--cg-space-1) var(--cg-space-3) !important;
  cursor: pointer;
  box-shadow: none !important;
  transition:
    color var(--cg-dur-base) var(--cg-easing-out),
    border-color var(--cg-dur-base) var(--cg-easing-out);
}

.cg-checklist__reset:hover {
  color: var(--cg-navy) !important;
  border-color: var(--cg-navy) !important;
  background: transparent !important;
}

/* ============================================================
   /consultation/ — pricing callout (Layer 5, 2026-05-06)

   Boxed rate/policy summary on /consultation/. Uses card-lift
   background with hairline border and a 4px orange left accent
   (orange = action/pricing surface in the brand palette).
   Distinct from .cg-disclaimer-block (teal left rule, advisory)
   and .cg-pillar-cta (teal, wider marketing feel).

   Surfaces: /consultation/ (page id 150).
   Source-side wrapper: <div class="cg-pricing-callout">
   ============================================================ */
.cg-pricing-callout {
  background: var(--cg-card-lift);
  border: 1px solid var(--cg-hairline);
  border-left: 4px solid var(--cg-orange);
  border-radius: var(--cg-radius-md);
  padding: var(--cg-space-5) var(--cg-space-6);
  margin-block: var(--cg-space-5);
  color: var(--cg-navy);
  line-height: var(--cg-lh-loose);
}
.cg-pricing-callout p {
  margin: 0;
}
.cg-pricing-callout p + p {
  margin-top: var(--cg-space-4);
}
@media (max-width: 47.999rem) {
  .cg-pricing-callout {
    padding: var(--cg-space-4) var(--cg-space-5);
  }
}

/* ============================================================
   Free Chapter page — cg-fc-* layout components
   page-free-chapter.php — added 2026-05-16
   Single-job lead-magnet page: lean, centered, no distractions.
   ============================================================ */

.cg-page-free-chapter {
  background: var(--cg-warm-white);
  color: var(--cg-navy);
  font-family: var(--cg-font-sans);
}

/* Shared inner container — content-width centred */
.cg-fc-inner {
  max-width: var(--cg-content-max);
  margin-inline: auto;
  padding-inline: var(--cg-space-5);
}

/* ── Hero ─────────────────────────────────────────────────── */
.cg-fc-hero {
  background: var(--cg-navy);
  color: var(--cg-warm-white);
  padding-block: var(--cg-space-10) var(--cg-space-9);
  text-align: center;
}
.cg-fc-kicker {
  font-size: var(--cg-fs-meta);
  color: var(--cg-orange);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 0.75rem;
}
.cg-fc-headline {
  font-size: clamp(1.75rem, 5vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 1.5rem;
  color: var(--cg-warm-white);
}
.cg-fc-subhead {
  font-size: var(--cg-fs-lead);
  line-height: 1.6;
  opacity: 0.88;
  margin: 0;
}
.cg-fc-inside {
  padding: 4rem 0;
  border-bottom: 1px solid rgba(34, 42, 57, 0.08);
}
.cg-fc-section-heading {
  font-size: var(--cg-fs-h2);
  font-weight: 700;
  margin: 0 0 1.5rem;
  color: var(--cg-navy);
}
.cg-fc-list {
  padding-left: 1.5rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.cg-fc-list li {
  font-size: var(--cg-fs-body);
  line-height: 1.6;
  color: var(--cg-navy);
}
.cg-fc-form-section {
  padding: 4rem 0;
  border-bottom: 1px solid rgba(34, 42, 57, 0.08);
}
.cg-fc-credibility {
  padding: 3rem 0;
}
.cg-fc-byline {
  font-size: var(--cg-fs-meta);
  color: var(--cg-warm-grey);
  line-height: 1.6;
  border-left: 3px solid var(--cg-teal);
  padding-left: 1rem;
  margin: 0;
}

/* ============================================================
   Site footer — cgnav-footer
   template-parts/footer.php — added 2026-05-18
   Matches the cgnav-footer design from the homepage.
   ============================================================ */

.cgnav-footer {
  background: var(--cgnav-sunken, var(--cg-sunken-band, #F0EDE3));
  padding: 64px 32px 32px;
}
.cgnav-footer-grid {
  max-width: 1152px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
}
.cgnav-footer-col h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--cgnav-heading, var(--cg-navy, #222A39));
  margin: 0 0 16px;
}
.cgnav-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cgnav-footer-col a {
  color: var(--cgnav-fg, var(--cg-navy, #222A39));
  text-decoration: none;
  font-size: 14px;
  transition: color 120ms ease;
}
.cgnav-footer-col a:hover {
  color: var(--cgnav-primary, var(--cg-teal, #3E7462));
}
.cgnav-footer-brand .logo {
  height: 36px;
  margin-bottom: 16px;
}
.cgnav-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.cgnav-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.cgnav-logo-text-top,
.cgnav-logo-text-bot {
  font-size: 16px;
  font-weight: 700;
  color: var(--cgnav-heading, #222A39);
  letter-spacing: -0.01em;
}
.cgnav-footer-brand p.blurb {
  font-size: 14px;
  color: var(--cgnav-muted-fg, var(--cg-warm-grey, #887A7E));
  margin: 0 0 16px;
  line-height: 1.55;
}
.cgnav-footer-byline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}
.cgnav-footer-byline img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}
.cgnav-footer-byline a {
  color: var(--cgnav-fg, #222A39);
  font-size: 14px;
  text-decoration: none;
}
.cgnav-footer-newsletter h5 {
  font-size: 14px;
  font-weight: 600;
  color: var(--cgnav-heading, #222A39);
  margin: 0 0 4px;
}
.cgnav-footer-newsletter p {
  font-size: 13px;
  color: var(--cgnav-muted-fg, #887A7E);
  margin: 0 0 12px;
}
.cgnav-footer-newsletter form {
  display: flex;
  gap: 8px;
}
.cgnav-footer-newsletter input[type="email"] {
  flex: 1;
  padding: 12px 14px;
  border: 0.77px solid var(--cgnav-border, #E2DDD0);
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  color: var(--cgnav-fg, #222A39);
  font-family: inherit;
}
.cgnav-footer-newsletter input[type="email"]:focus {
  outline: 2px solid var(--cgnav-primary, #3E7462);
  outline-offset: 2px;
}
.cgnav-footer-newsletter .cgnav-btn {
  height: 44px;
  padding: 0 20px;
  font-size: 15px;
  background: var(--cgnav-accent, #EC9213);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  transition: background 120ms ease;
}
.cgnav-footer-newsletter .cgnav-btn:hover {
  background: var(--cgnav-accent-dark, #d4820d);
}
.cgnav-footer-disclaimer {
  max-width: 1152px;
  margin: 48px auto 0;
  padding-top: 24px;
  border-top: 0.77px solid var(--cgnav-border, #E2DDD0);
  text-align: center;
  font-size: 13px;
  color: var(--cgnav-muted-fg, #887A7E);
  line-height: 1.55;
}
.cgnav-footer-bottom {
  max-width: 1152px;
  margin: 16px auto 0;
  text-align: center;
  font-size: 13px;
  color: var(--cgnav-muted-fg, #887A7E);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.cgnav-footer-bottom a {
  color: var(--cgnav-muted-fg, #887A7E);
  text-decoration: none;
}
.cgnav-footer-bottom a:hover {
  color: var(--cgnav-primary, #3E7462);
  text-decoration: underline;
}

/* cgnav-footer responsive */
@media (max-width: 960px) {
  .cgnav-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}
@media (max-width: 600px) {
  .cgnav-footer {
    padding: 48px 20px 24px;
  }
  .cgnav-footer-grid {
    grid-template-columns: 1fr;
  }
}