/* ============================================================
   AUTHORITY HUB EXPERIENCE v2.0  —  Presentation-layer enhancement
   ------------------------------------------------------------
   Carries the Homepage v2 / Article Template v2 / Guide Template
   v2 experience into the shared Authority Hub (resource center)
   pages. Purely ADDITIVE and presentation only: it restyles the
   hub-specific class names (the "rc-" resource-center system and
   the "lcf" lead form) so the hubs share one design language with
   the articles and guides.

   It deliberately does NOT redefine anything already elevated by
   /article-v2.css (.quick-answer, .county-cta-btn, .twr …). Those
   components are reused as-is. Load /article-v2.css BEFORE this
   file so the shared Quick Answer + Talk-With-Ray styling is
   available, then this file adds the hub-only polish.

   Load order: linked immediately before </head>, AFTER each hub's
   inline <style>, /search.css and /article-v2.css, so these rules
   win at equal specificity without needing !important.

   Scope of change: NONE of the following are touched — DOM,
   content, headings, internal links, schema, breadcrumbs, search,
   sitemap, navigation, footer, NAP, or CTA destinations. This file
   only changes how existing markup looks and feels.

   Design language: unchanged tokens (navy / gold / cream,
   Cormorant Garamond + DM Sans). Calm, premium, family-friendly.
   The goal is a guided "which situation am I in?" reading path:
   Quick Answer -> Situation Selection -> Educational Resources ->
   Guides -> Talk With Ray -> Next Step.
   ============================================================ */

: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);
}

/* ============================================================
   1 · HERO  —  more air, calmer hierarchy, warmer reassurance
   Restyles existing .rc-hero* classes only. Animations preserved.
   ============================================================ */
.rc-hero h1{letter-spacing:-.01em}
.rc-hero-subtitle{letter-spacing:.005em}
.rc-hero .eyebrow{letter-spacing:.24em}

/* "This Guide Covers" trust panel — lift to a calm bordered card that
   echoes the article/guide orientation cards. */
.rc-hero-trust{
  background:rgba(255,255,255,.05);
  border-color:rgba(184,156,106,.18);
  box-shadow:0 12px 40px rgba(6,13,26,.28);
}
.rc-hero-trust h4{
  padding-bottom:.7rem;margin-bottom:.5rem;
  border-bottom:1px solid rgba(184,156,106,.18);
}
.rc-hero-trust-item{transition:color .2s var(--ease-soft)}

/* ============================================================
   2 · SITUATION SELECTION  —  "which situation sounds like mine?"
   The top "Related Situations" nav + the in-content "rc-icon-cards"
   are the hub's situation picker. Give them clearer card affordance
   and comfortable tap targets, without changing their links.
   ============================================================ */
.rc-related{
  background:linear-gradient(180deg,var(--cream),#fbf9f5);
  border:1px solid var(--border-gold);
  box-shadow:var(--shadow-sm);
  transition:box-shadow .3s var(--ease-out);
}
.rc-related h4{
  padding-bottom:.7rem;margin-bottom:1rem;
  border-bottom:1px solid var(--border-gold);
}
.rc-related-grid a{
  padding:.7rem .65rem;
  min-height:44px;
  border-bottom-color:rgba(0,0,0,.06);
  border-radius:6px;
  transition:color .2s var(--ease-soft),background .2s var(--ease-soft),padding-left .2s var(--ease-soft);
}
.rc-related-grid a:hover{
  color:var(--navy);
  background:rgba(184,156,106,.08);
  padding-left:.85rem;
}
.rc-related-grid a:focus-visible{
  outline:2px solid var(--gold);outline-offset:2px;border-radius:6px;
}

/* Situation cards (icon cards) — a touch more elevation + clear focus. */
.rc-icon-card{transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .2s var(--ease-soft)}
.rc-icon-card:hover{box-shadow:var(--shadow-hover);border-color:var(--border-gold)}
.rc-icon-card:focus-within{border-color:var(--border-gold);box-shadow:var(--shadow-md)}

/* ============================================================
   3 · READING HIERARCHY  —  calm rhythm through long content
   Restyles .rc-section*, .rc-toc*, .rc-chip only.
   ============================================================ */
.rc-section-num{letter-spacing:.14em}
.rc-section h2{letter-spacing:.004em}
.rc-content strong{font-weight:600}

/* Sticky table of contents — clearer active state, gentle affordance. */
.rc-toc li a{transition:color .2s var(--ease-soft),padding-left .2s var(--ease-soft)}
.rc-toc li a:hover{padding-left:.25rem}
.rc-toc li a.active{color:var(--navy);font-weight:500}
.rc-toc li a.active::before{opacity:1}

/* Topic chips — comfortable, tappable, consistent hover. */
.rc-chip{transition:color .2s var(--ease-soft),background .2s var(--ease-soft),border-color .2s var(--ease-soft)}
.rc-chip:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ============================================================
   4 · RELATED GUIDES / OFFICIAL RESOURCES  —  consistent cards
   Restyles .rc-official-card* only. Same elevation language as
   the article/guide resource cards.
   ============================================================ */
.rc-official-card{transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),border-color .2s var(--ease-soft)}
.rc-official-card:hover{box-shadow:var(--shadow-hover)}
.rc-official-card:focus-within{border-color:var(--border-gold);box-shadow:var(--shadow-md)}
.rc-official-card-body a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}

/* Download / guide promo block — reinforce it as the "guides" step. */
.rc-download{box-shadow:var(--shadow-lg)}
.rc-download-btn:focus-visible,.btn-primary:focus-visible,.btn-outline-white:focus-visible{
  outline:2px solid var(--goldl);outline-offset:3px;
}

/* ============================================================
   5 · TALK WITH RAY  —  reused component, hub placement polish
   The shared .twr component (styled in /article-v2.css) is mounted
   inside .rc-content, before the FAQ. Here it just gets breathing
   room appropriate to the hub content column.
   ============================================================ */
.rc-content .twr{margin:2.5rem 0 3rem}

/* ============================================================
   6 · NEXT STEP (footer CTA) + LEAD FORM  —  conversion polish
   Restyles .rc-footer-cta* and .lcf-* only. CTA destinations
   (tel/sms/#/contact/Formspree) are untouched.
   ============================================================ */
.rc-footer-cta .btn-primary{box-shadow:0 10px 30px rgba(184,156,106,.28)}
.rc-footer-cta-item a{transition:color .2s var(--ease-soft)}

.lcf-card{box-shadow:var(--shadow-card)}
.lcf-submit{transition:background .25s var(--ease-soft),border-color .25s var(--ease-soft),transform .2s var(--ease-out)}
.lcf-submit:hover{transform:translateY(-1px)}
.lcf-field input:focus-visible,.lcf-field select:focus-visible,.lcf-field textarea:focus-visible{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,156,106,.14);
}

/* ============================================================
   7 · ACCESSIBILITY  —  visible focus + reduced motion
   ============================================================ */
.rc-faq-trigger:focus-visible,.rc-chip:focus-visible,.nlinks a:focus-visible,
.ncta:focus-visible,.mobile-sticky-cta a:focus-visible{
  outline:2px solid var(--gold);outline-offset:2px;
}
.rc-faq-body-inner a.inline-link:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:2px}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rc-icon-card:hover,.rc-official-card:hover,.rc-related-grid a:hover,.lcf-submit:hover{transform:none}
}

/* ============================================================
   8 · MOBILE  —  preserve the existing responsive layout, only
   guarantee comfortable tap targets and spacing on the guided
   elements. Matches the inline mobile breakpoint (max-width:768px).
   ============================================================ */
@media(max-width:768px){
  .rc-related-grid a{min-height:48px;padding:.85rem .65rem}
  .rc-official-card{padding:1.25rem 1.35rem}
  .rc-content .twr{margin:2rem 0 2.5rem}
  .rc-toc li a{padding:.6rem 0}
}