/* ============================================================
   GUIDE TEMPLATE v2.0  —  Presentation-layer enhancement
   ------------------------------------------------------------
   Carries the Homepage v2 / Article Template v2 experience into
   the long-form Survival Guides. Purely ADDITIVE and presentation
   only: it restyles the guide-specific class names that live
   OUTSIDE the shared article template (guide-covers, worksheets,
   checklists, timelines, warning boxes, guide FAQ, the guide lead
   form, related grids and inline CTA blocks).

   It deliberately does NOT redefine anything already elevated by
   /article-v2.css (.blog-hero, .quick-answer, .article, .callout,
   .county-cta, .explore-related, .blog-form-card, .twr …). Those
   components are reused as-is so the guides share one design
   language with the articles.

   Load order: linked immediately AFTER /article-v2.css (and after
   each guide's inline <style> and /search.css) so equal-specificity
   rules win without !important.

   Design language: unchanged tokens (navy / gold / cream,
   Cormorant Garamond + DM Sans). Calm, premium, family-friendly.
   No DOM, content, heading, schema, SEO, navigation or
   CTA-destination changes.
   ============================================================ */

:root{
  /* Mirror the Homepage v2 / Article v2 motion + elevation tokens so
     this file is self-sufficient regardless of load order. */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --shadow-hover:0 18px 50px rgba(15,31,56,.14),0 6px 18px rgba(0,0,0,.08);
  --read-measure:720px;
  /* Shared amber used across every "act quickly" caution surface */
  --amber:#c9943e;
  --amber-ink:#8a5a1e;
}

/* ============================================================
   1 · "THIS GUIDE COVERS"  —  premium orientation card
   Was a flat cream strip (in /search.css). Lifts it into a
   bordered card with a calm gold rhythm that matches the hero
   and quick-answer, without touching the copy inside.
   ============================================================ */
.guide-covers{
  padding:2.25rem 4rem;
  background:linear-gradient(180deg,var(--cream),#fbf9f5);
  border-bottom:1px solid var(--border);
}
.guide-covers-inner{
  max-width:900px;margin:0 auto;
  background:var(--white);
  border:1px solid var(--border-gold);
  border-radius:var(--radius-lg,12px);
  padding:1.75rem 2rem;
  box-shadow:var(--shadow-sm);
}
.guide-covers-title{
  margin:0 0 1.15rem;
  padding-bottom:.85rem;
  border-bottom:1px solid rgba(184,156,106,.22);
  font-size:.78rem;letter-spacing:.16em;
}
.guide-covers-grid{gap:.65rem 2.25rem}
.guide-covers-item{
  font-size:.9rem;line-height:1.55;color:var(--tm);
  padding:.4rem 0;gap:.7rem;
}
.guide-covers-item svg{
  width:17px;height:17px;color:var(--gold);
  margin-top:1px;
}

/* ============================================================
   2 · STYLED CHECKLISTS  —  calm, scannable action lists
   ============================================================ */
.styled-checklist{
  box-shadow:var(--shadow-sm);
  border-color:rgba(184,156,106,.28)!important;
  border-radius:var(--radius-lg,12px)!important;
  background:linear-gradient(180deg,rgba(184,156,106,.07),rgba(184,156,106,.03))!important;
}
.styled-checklist li{line-height:1.7}
.styled-checklist li::before{
  background:var(--gold);color:var(--white);
  border-color:var(--gold);font-weight:700;
}

/* ============================================================
   3 · WORKSHEET CARDS  —  print-ready planning blocks
   Consistent elevation + real focus states on the fill-in fields.
   ============================================================ */
.worksheet-card{
  box-shadow:var(--shadow-sm);
  border-color:rgba(184,156,106,.28);
  background:linear-gradient(180deg,var(--cream),#fbf9f5);
}
.worksheet-grid{gap:.85rem 1.1rem}
.worksheet-field{
  transition:border-color .2s var(--ease-soft),box-shadow .2s var(--ease-soft),transform .2s var(--ease-out);
}
.worksheet-field:hover,.worksheet-field:focus-within{
  border-color:var(--border-gold);
  box-shadow:var(--shadow-sm);
}
.worksheet-field span{color:var(--navy)}
.worksheet-line{border-bottom-color:rgba(184,156,106,.5)}

/* ============================================================
   4 · RELATED READING GRIDS  —  homepage situation-card feel
   Covers both guide variants: .related-card-grid (chaptered
   guides) and .related-grid (reverse-mortgage guide).
   ============================================================ */
.related-reading{
  border-color:var(--border-gold);
  box-shadow:var(--shadow-sm);
}
.related-card-grid{gap:.75rem 1.1rem}
.related-card-grid a,
.related-grid a{
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .3s,color .2s;
}
.related-card-grid a:hover,
.related-grid a:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-hover);
  border-color:var(--border-gold);
  color:var(--navy);
}

/* Chaptered guides' county resource links — quiet, consistent hover */
.county-grid a{
  transition:color .2s var(--ease-soft),border-color .2s var(--ease-soft),padding-left .2s var(--ease-soft);
}
.county-grid a:hover{padding-left:.35rem;border-color:var(--gold)}

/* ============================================================
   5 · TIMELINE  —  a calm vertical progression with gold nodes
   Turns the reverse-mortgage guide's flat steps into a proper
   timeline that reads as one clear sequence.
   ============================================================ */
.timeline-step{
  position:relative;
  border-left-width:2px;
  border-left-color:rgba(184,156,106,.35);
  padding:.35rem 0 .95rem 1.6rem;
  margin-left:.4rem;
  transition:border-left-color .25s var(--ease-soft);
}
.timeline-step::before{
  content:'';position:absolute;left:-7px;top:.9rem;
  width:12px;height:12px;border-radius:50%;
  background:var(--white);border:2px solid var(--gold);
  box-shadow:0 0 0 3px rgba(184,156,106,.12);
}
.timeline-step:hover{border-left-color:var(--gold)}
.timeline-step:last-child{padding-bottom:.35rem}

/* ============================================================
   6 · WARNING / CAUTION BOXES  —  one consistent amber treatment
   Unifies the two slightly-different .warning-box variants across
   the guides into a single calm, premium caution surface.
   ============================================================ */
.warning-box{
  background:linear-gradient(180deg,rgba(201,148,62,.11),rgba(201,148,62,.05));
  border:1px solid rgba(201,148,62,.32);
  border-left:3px solid var(--amber);
  border-radius:0 var(--radius-lg,12px) var(--radius-lg,12px) 0;
  padding:1.5rem 1.85rem;margin:2.25rem 0;
  box-shadow:var(--shadow-sm);
  max-width:var(--read-measure);
}
.warning-box strong{color:var(--amber-ink)}
.warning-box p,.warning-box li{line-height:1.75}

/* ============================================================
   7 · GUIDE FAQ  —  quiet card rhythm for the Q&A blocks
   Only the reverse-mortgage guide wraps FAQ items in .faq-item;
   the chaptered guides use plain .article h3/p (already styled by
   /article-v2.css), so this leaves those untouched.
   ============================================================ */
.faq-item{
  padding:1.35rem 1.5rem;
  margin-bottom:1rem;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius-lg,12px);
  box-shadow:var(--shadow-sm);
  transition:border-color .25s var(--ease-soft),box-shadow .25s var(--ease-out);
}
.faq-item:hover{border-color:var(--border-gold);box-shadow:var(--shadow-hover)}
.faq-item h3{margin-top:0;line-height:1.35}
.faq-item p{margin-bottom:0}

/* ============================================================
   8 · GUIDE LEAD FORM  —  aligned to the homepage / article card
   The reverse-mortgage guide ships its own .lead-form-wrap. Bring
   its focus states, button motion and elevation into line with
   the shared .blog-form-card / .bfc treatment.
   ============================================================ */
.lead-form-wrap{box-shadow:var(--shadow-card)}
.lf-field input,.lf-field select,.lf-field textarea{
  transition:border-color .2s var(--ease-soft),box-shadow .2s var(--ease-soft),background .2s;
}
.lead-form-body button{
  transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),background .25s,border-color .25s;
}
.lead-form-body button:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(184,156,106,.32);
}

/* ============================================================
   9 · INLINE DECISION-POINT CTAs  —  premium gold accent blocks
   The reverse-mortgage guide places mid-content CTA prompts as
   .callout.cta-decision-point / .cta-mid-guidance. Their colour is
   set via inline style (left untouched); this only adds the shared
   elevation, radius and rhythm so they feel intentional.
   ============================================================ */
.cta-decision-point,.cta-mid-guidance{
  border-radius:var(--radius-lg,12px);
  box-shadow:var(--shadow-md);
  padding:1.75rem 2rem;
  margin:2.5rem 0;
  max-width:var(--read-measure);
}
.cta-decision-point a[href="/contact"],
.cta-mid-guidance a[href="/contact"]{
  transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),background .25s;
}
.cta-decision-point a[href="/contact"]:hover,
.cta-mid-guidance a[href="/contact"]:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(184,156,106,.32);
}

/* ============================================================
   10 · REVERSE-MORTGAGE GUIDE  —  single-column reading document
   Scoped to .guide-doc (a body hook) so these base-element rules
   never leak onto the chaptered guides, which wrap content in
   .article. Brings the calm cream page + reading rhythm of the
   article template to the guide that renders straight in <body>.
   ============================================================ */
.guide-doc .intro{
  border-left-width:3px;
  padding:.5rem 0 .5rem 1.25rem;
  color:var(--td);
}
.guide-doc h2{padding-top:.4rem}
.guide-doc h2:first-of-type{margin-top:2.25rem}
.guide-doc ul li::marker,.guide-doc ol li::marker{color:var(--gold)}
.guide-doc footer{margin-top:3rem}

/* ============================================================
   ACCESSIBILITY  —  visible focus + honour reduced-motion
   ============================================================ */
.related-card-grid a:focus-visible,
.related-grid a:focus-visible,
.county-grid a:focus-visible,
.faq-item a:focus-visible,
.worksheet-field:focus-within,
.src-chip:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
  border-radius:4px;
}
@media(prefers-reduced-motion:reduce){
  .related-card-grid a,.related-grid a,.worksheet-field,
  .faq-item,.lead-form-body button,.timeline-step,
  .cta-decision-point a,.cta-mid-guidance a{
    transition-duration:.01ms!important;
  }
  .related-card-grid a:hover,.related-grid a:hover,
  .lead-form-body button:hover,
  .cta-decision-point a:hover,.cta-mid-guidance a:hover{transform:none}
}

/* ============================================================
   RESPONSIVE  —  mirror existing guide breakpoints; keep mobile intact
   ============================================================ */
@media(max-width:768px){
  .guide-covers{padding:1.5rem 1.25rem}
  .guide-covers-inner{padding:1.4rem 1.35rem}
  .guide-covers-grid{gap:.35rem}
  .warning-box{padding:1.35rem 1.35rem}
  .cta-decision-point,.cta-mid-guidance{padding:1.5rem 1.35rem}
  .faq-item{padding:1.2rem 1.25rem}
}