/* ============================================================
   COUNTY EXPERIENCE v2.0  —  Presentation-layer enhancement
   ------------------------------------------------------------
   Brings the shared County Template into the Viera Design System
   (Homepage v2 / Article v2 / Guide v2 / Authority Hub v2). Purely
   ADDITIVE and presentation only.

   It REUSES /article-v2.css for every shared component — the
   Quick Answer card, article reading rhythm, callouts, the mid-page
   .county-cta, the .cta-box buttons and the .twr "Talk With Ray"
   trust module. This file adds ONLY the county-specific polish that
   lives outside (or nested differently within) the shared article
   template:

     · the county hero (.hero)              — articles use .blog-hero
     · the desktop reading surface          — cream page + white card
     · the "Quick Answer" nested-in-.article corrections
     · the county situation / scenario blocks
     · the "More Resources" / "Nearby Counties" grids (.related*)
     · the wide county lead form (.cwf*)

   Nothing else is created; no CSS or JS is duplicated.

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

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

   Design language: unchanged tokens (navy / gold / cream,
   Cormorant Garamond + DM Sans). Calm, premium, family-friendly.
   ============================================================ */

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

/* ============================================================
   1 · HERO  —  county identity, more air, calm gold glow
   Articles use .blog-hero; county pages keep their own .hero, so
   the same premium treatment is applied here: a soft radial glow,
   a clearer eyebrow (which county you are on) and a breadcrumb that
   is separated with a quiet gold rule for quick orientation.
   ============================================================ */
.hero{position:relative;overflow:hidden;padding:8rem 4rem 3.5rem}
.hero::after{
  content:'';position:absolute;right:-8%;top:-30%;width:60%;height:120%;
  background:radial-gradient(closest-side,rgba(184,156,106,.14),rgba(184,156,106,0) 70%);
  z-index:0;pointer-events:none;
}
.hero>*{position:relative;z-index:1}
.hero .eyebrow{letter-spacing:.24em;margin-bottom:1.2rem}
.hero h1{letter-spacing:-.01em;line-height:1.14}
.hero .meta{font-size:.78rem;letter-spacing:.05em;color:rgba(255,255,255,.5);margin-bottom:.9rem}
.hero .breadcrumb{
  font-size:.75rem;line-height:1.6;padding-top:.9rem;
  border-top:1px solid rgba(184,156,106,.18);color:rgba(255,255,255,.55);
}
.hero .breadcrumb a{color:rgba(255,255,255,.68);transition:color .2s var(--ease-soft)}
.hero .breadcrumb a:hover{color:var(--goldl)}

/* ============================================================
   2 · DESKTOP READING SURFACE
   Same premium cream page + white article card as the article
   template, so a county page set beside an article reads as the
   same platform. Mobile layout is deliberately untouched.
   ============================================================ */
@media(min-width:1025px){
  body{
    background:linear-gradient(90deg,#e9e1d3 0%,#f4f0e8 16%,#f6f2ec 50%,#f4f0e8 84%,#e9e1d3 100%);
    background-attachment:fixed;
  }
  .article{
    background:var(--white);
    border:1px solid rgba(184,156,106,.12);
    border-radius:16px;
    box-shadow:0 1px 2px rgba(15,31,56,.04),0 14px 44px rgba(15,31,56,.07);
    margin:2.75rem auto;
  }
}

/* ============================================================
   3 · QUICK ANSWER  —  nested-in-.article corrections
   On county pages the Quick Answer card sits INSIDE .article (on
   articles it precedes .article). Re-assert the shared Quick Answer
   component with .article-scoped selectors so the generic .article
   typography from /article-v2.css does not leak into it: keep the
   white header text, the gold "Key Facts" label and the checkmark
   facts list, and suppress the section-heading accent bar here.
   ============================================================ */
.article .quick-answer-header h2{
  color:var(--white);
  margin:0;padding-top:0;
  font-size:1.4rem;line-height:1.3;
}
.article .quick-answer-header h2::before{content:none;display:none}
.article .quick-answer-body>p:first-child{max-width:none}
.article .quick-answer-body p{max-width:none}
.article .quick-answer-facts-title{
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);font-weight:600;max-width:none;margin:.35rem 0 .75rem;
}
.article .quick-answer-facts{
  list-style:none;margin:0;padding:0;max-width:none;
  display:grid;gap:.6rem;
}
.article .quick-answer-facts li{
  list-style:none;position:static;display:flex;align-items:flex-start;
  gap:.65rem;padding-left:0;margin-bottom:0;
  font-size:.88rem;line-height:1.6;color:var(--tm);
}
.article .quick-answer-facts li::before{
  content:'\2713';position:static;top:auto;left:auto;
  width:auto;height:auto;background:none;border-radius:0;
  color:var(--gold);font-weight:700;line-height:1.5;flex-shrink:0;
}
.article .quick-answer-facts li a{color:var(--navy);font-weight:600}
.article .quick-answer-facts li a:hover{color:var(--gold)}

/* ============================================================
   4 · COUNTY SITUATION & SCENARIO BLOCKS
   These also live inside .article. Keep the county's own scannable
   two-column situation list (gold "›" markers, not the generic
   article bullet) and the divided scenario stack.
   ============================================================ */
.county-situations{margin:2.5rem 0;max-width:var(--read-measure)}
.article .county-situations ul{
  list-style:none;margin:0;padding:0;max-width:none;
  display:grid;grid-template-columns:1fr 1fr;gap:.75rem 1.5rem;
}
.article .county-situations li{
  list-style:none;position:relative;padding-left:1.35rem;margin-bottom:0;
  font-size:.9rem;line-height:1.6;color:var(--tm);
}
.article .county-situations li::before{
  content:'\203A';position:absolute;left:0;top:0;
  width:auto;height:auto;background:none;border-radius:0;
  color:var(--gold);font-weight:700;
}
.county-scenarios{margin:2rem 0;max-width:var(--read-measure)}
.article .county-scenarios p{
  font-size:.9rem;line-height:1.72;color:var(--tm);max-width:none;
  padding:.9rem 0;border-bottom:1px solid rgba(184,156,106,.16);margin-bottom:0;
}
.article .county-scenarios p:last-child{border-bottom:none}

/* ============================================================
   5 · MID-PAGE CTA CARD (.county-cta) & FINAL CTA BOX (.cta-box)
   /article-v2.css elevates .county-cta (gold bar + shadow) but does
   not set its layout; keep the two-column alignment. The .cta-box
   also sits inside .article, so re-assert its light-on-navy text
   that the generic .article h3/p rules would otherwise override.
   ============================================================ */
.county-cta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.75rem}
.article .cta-box h3{color:var(--white);font-size:1.8rem;line-height:1.3;margin:0 0 .75rem}
.article .cta-box h3::before{content:none;display:none}
.article .cta-box p{color:rgba(255,255,255,.75);max-width:none}

/* ============================================================
   6 · RELATED RESOURCES / NEARBY COUNTIES  (.related*)
   Homepage situation-card feel; same elevation language as the
   article/hub resource cards. These sections sit outside .article.
   ============================================================ */
.related h3{letter-spacing:.005em}
.related-grid{gap:1.1rem}
.related-card{
  border:1px solid var(--border);
  border-radius:var(--radius-lg,12px);
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .3s;
}
.related-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-hover);
  border-color:var(--border-gold);
}
.related-card .rc-tag{letter-spacing:.12em}

/* ============================================================
   7 · WIDE COUNTY LEAD FORM (.cwf)
   Bring the field focus states and submit-button motion into line
   with the shared blog-form-card / lcf treatment. Destinations,
   Formspree action and hidden tracking fields are untouched.
   ============================================================ */
.cwf-field input,.cwf-field select{
  transition:border-color .2s var(--ease-soft),box-shadow .2s var(--ease-soft),background .2s;
}
.cwf-field input:focus,.cwf-field select:focus{
  border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,156,106,.16);background:#fffdf9;
}
.cwf-submit{
  transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),background .25s,border-color .25s;
}
.cwf-submit:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(184,156,106,.32)}

/* ============================================================
   8 · TALK WITH RAY  —  reused component placement
   The shared .twr module (styled in /article-v2.css) is self-mounted
   at the end of .article by /talk-with-ray.js. Give it county-
   appropriate breathing room before the related-resources grids.
   ============================================================ */
.article .twr{margin:3rem 0 1rem}

/* ============================================================
   ACCESSIBILITY  —  visible keyboard focus + reduced motion
   ============================================================ */
.related-card:focus-visible,.cwf-submit:focus-visible{
  outline:2px solid var(--gold);outline-offset:2px;border-radius:4px;
}
@media(prefers-reduced-motion:reduce){
  .related-card,.cwf-submit{transition-duration:.01ms!important}
  .related-card:hover,.cwf-submit:hover{transform:none}
}

/* ============================================================
   RESPONSIVE  —  mirror the county inline breakpoint; keep mobile
   readability intact (single-column situations, no hero glow).
   ============================================================ */
@media(max-width:768px){
  .hero{padding:6rem 1.25rem 2.25rem}
  .hero::after{display:none}
  .article .county-situations ul{grid-template-columns:1fr}
}