/* FormsPal — per-state landing (/texas/) styles.
   Builds on core/css/tokens.css + base.css AND funnel/css/landing.css (the state page
   reuses .fp-hero, .fp-step-card, .fp-faq, .fp-calc, .cta-band, .eyebrow, .lede, .card…).
   Only the state-landing-specific sections live here, prefixed .sl-*. */

/* ── Hero image (replaces the landing's doc-preview illustration) ────
   The base landing grid caps the visual at 340px (sized for the old doc-preview
   card) — on state pages the photo is the co-star, competitor-style: give it
   ~45% of the row. Scoped via :has(.sl-hero__visual) so "/" is untouched. */
.fp-hero__inner:has(.sl-hero__visual) {
  grid-template-columns: 1.1fr minmax(420px, 560px);
  gap: 48px;
}
.sl-hero__visual .stock {
  width: 100%;
  height: auto;
  border-radius: var(--fp-radius-lg);
  box-shadow: var(--fp-shadow-lg);
  display: block;
}
@media (max-width: 1080px) {
  .fp-hero__inner:has(.sl-hero__visual) { grid-template-columns: 1fr minmax(320px, 420px); }
}
/* Phones: the :has() rule above out-specifies landing.css's 860px single-column reset,
   which left an EMPTY 320px+ track (the visual is display:none) crushing the headline.
   Re-assert single column at the same specificity. (2026-07-10 audit P1.) */
@media (max-width: 860px) {
  .fp-hero__inner:has(.sl-hero__visual) { grid-template-columns: 1fr; }
}

/* ── Floating "On this page" rail ─────────────────────────────────────
   A card in the RIGHT VIEWPORT GUTTER, below the sticky site header — it must NEVER cover
   the header menu (z-index stays under .site-header's 30). Appears past the hero
   (state.js toggles .is-visible), scroll-spy highlights the current section (.is-active).
   Only rendered where the gutter is genuinely free of the 1140px container:
   viewport ≥ 1560px → gutter ≥ (1560−1140)/2 = 210px ≥ rail 190px + margins. */
.sl-toc { display: none; }
@media (min-width: 1560px) {
  .sl-toc {
    display: block;
    position: fixed;
    top: 84px;                       /* below the ~64px sticky header */
    right: 20px;
    width: 190px;
    z-index: 20;                     /* UNDER .site-header (30) */
    background: var(--fp-white);
    border: 1.5px solid var(--fp-line);
    border-radius: var(--fp-radius-lg);
    box-shadow: 0 6px 22px rgba(7,31,36,.08);
    padding: 14px 10px 12px;
    opacity: 0;
    transform: translateX(12px);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
    /* MKT-05 (QA 2026-07-17): on short viewports the fixed rail ran past the fold — its last
       links were unreachable and content scrolled "over" it. Clamp to the viewport + scroll. */
    max-height: calc(100vh - 104px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .sl-toc.is-visible { opacity: 1; transform: translateX(0); pointer-events: auto; }
}
.sl-toc__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fp-muted);
  padding: 0 10px 8px;
}
.sl-toc__list { display: flex; flex-direction: column; }
.sl-toc__list a {
  color: var(--fp-ink);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
  border-left: 3px solid transparent;
}
.sl-toc__list a:hover { background: var(--fp-cream); color: var(--fp-green-dark); }
.sl-toc__list a.is-active {
  border-left-color: var(--fp-green);
  background: var(--fp-green-light);
  color: var(--fp-green-dark);
}
.sl-toc__cta {
  display: block;
  text-align: center;
  margin: 10px 6px 0;
}
/* Blog articles (rail.js .sl-toc--wide): the 800px article column frees the right gutter
   from ~1280px, so the floating card can appear much earlier than the 1140px-container
   pages. --floatonly suppresses the 861–1559 static card (blog has an inline ToC). */
@media (min-width: 1280px) {
  /* double-class specificity: must beat the generic 861–1559 static-card rule */
  .sl-toc.sl-toc--wide {
    display: block;
    position: fixed;
    top: 84px;
    right: 20px;
    width: 190px;
    z-index: 20;
    background: var(--fp-white);
    border: 1.5px solid var(--fp-line);
    border-radius: var(--fp-radius-lg);
    box-shadow: 0 6px 22px rgba(7,31,36,.08);
    padding: 14px 10px 12px;
    max-width: none;
    margin: 0;
    opacity: 0;
    transform: translateX(12px);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
    /* MKT-05: clamp to the viewport on short screens (see the base .sl-toc rule) */
    max-height: calc(100vh - 104px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .sl-toc.sl-toc--wide.is-visible { opacity: 1; transform: translateX(0); pointer-events: auto; }
  .sl-toc.sl-toc--wide .sl-toc__list { display: flex; flex-direction: column; }
}
/* End-of-page: the floating rail bows out when the closing CTA/footer scrolls up into its zone —
   it used to float over the CTA band to the very end of the page (MKT-07/08, QA 2026-07-13).
   Declared AFTER both .is-visible rules so it wins at equal importance. */
.sl-toc.is-past-end, .sl-toc.sl-toc--wide.is-past-end {
  opacity: 0; transform: translateX(12px); pointer-events: none;
}
@media (max-width: 1279px) {
  .sl-toc.sl-toc--floatonly { display: none; }
}
/* anchors land below the sticky header */
section[id], #calculator { scroll-margin-top: 80px; }
/* mobile: the wrapped two-row header is ~90-110px tall (QA 2026-07-13) */
@media (max-width: 820px) { section[id], #calculator { scroll-margin-top: 120px; } }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sl-toc { transition: none; }
}

/* ── Calculator page (/divorce-cost-calculator/) ───────────────────── */
/* The tool-first section (2026-08-21, no hero band at all): when the calculator section
   carries the page h1 it is the first thing under the site header, so the default
   --fp-section-y top padding (up to 110px) reads as dead space — tighten it. The old
   sl-calc-hero rules died with the hero markup. */
.fp-calc-lead { padding-top: 28px; }
.fp-calc-lead .lede { max-width: 720px; }
.sl-calc-table__us td { background: var(--fp-green-pale, #e7f4ec); }
.sl-tips { margin: 18px 0 0; padding-left: 22px; }
.sl-tips li { font-size: 15.5px; line-height: 1.65; margin-bottom: 12px; }

/* landing.js detail-mode breakdown (calculator page result) */
.fp-breakdown { margin-top: 18px; border-top: 1.5px solid var(--fp-line); padding-top: 14px; }
.fp-breakdown h3 { font-size: 15px; margin-bottom: 4px; }
.fp-breakdown__cap { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--fp-muted); margin: 12px 0 4px; }
.fp-breakdown__row { display: flex; justify-content: space-between; gap: 16px; font-size: 13.5px; padding: 4px 0; border-bottom: 1px dashed var(--fp-line); }
.fp-breakdown__row b { white-space: nowrap; }
.fp-breakdown__verdict { font-size: 13.5px; color: var(--fp-muted); margin-top: 12px; line-height: 1.55; }

/* ── Prose (overview) ──────────────────────────────────────────────── */
.sl-prose { max-width: 760px; }
.sl-p { color: var(--fp-text); font-size: 16px; line-height: 1.7; margin: 0 0 18px; }

/* ── Thin stock strips between section groups ──────────────────────── */
.sl-strip { margin: 8px 0 12px; }
.sl-strip img { width: 100%; height: auto; display: block; border-radius: var(--fp-radius-lg); }

/* ── Requirements fact-strip ───────────────────────────────────────── */
.sl-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 900px) { .sl-facts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .sl-facts { grid-template-columns: 1fr; } }
.sl-fact { border-top: 3px solid var(--fp-green); }
.sl-fact__k {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--fp-green); margin-bottom: 8px;
}
.sl-fact__v { font-size: 15px; line-height: 1.55; color: var(--fp-text); }

/* ── Media rows (image + copy) — eligibility, forms note ───────────── */
.sl-media {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 28px;
  align-items: center;
  overflow: hidden;
}
.sl-media--rev { grid-template-columns: 1fr 320px; }
.sl-media--rev .sl-media__body { order: -1; }
.sl-media .stock { width: 100%; height: auto; border-radius: var(--fp-radius); display: block; }
.sl-media__body h3 { margin: 0 0 10px; }
.sl-media__body p { color: var(--fp-muted); font-size: 15px; line-height: 1.65; margin: 0; }
@media (max-width: 720px) {
  .sl-media, .sl-media--rev { grid-template-columns: 1fr; }
  .sl-media--rev .sl-media__body { order: 0; }
}

/* ── Forms showcase ────────────────────────────────────────────────── */
.sl-forms {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}
@media (max-width: 900px) { .sl-forms { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .sl-forms { grid-template-columns: repeat(2, 1fr); } }
.sl-form { padding: 12px; text-align: center; }
.sl-form__thumb {
  width: 100%; height: auto; aspect-ratio: 200 / 259; object-fit: cover;
  border: 1px solid var(--fp-line); border-radius: var(--fp-radius-sm);
  background: #fff; display: block; margin-bottom: 10px;
}
.sl-form__thumb--ph {
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; color: var(--fp-muted); background: var(--fp-cream);
}
.sl-form__name { font-size: 13px; font-weight: 600; color: var(--fp-ink); line-height: 1.4; }

/* ── Timeline ──────────────────────────────────────────────────────── */
.sl-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.sl-tl { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
.sl-tl__dot {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--fp-green); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.sl-tl h3 { margin: 4px 0 4px; font-size: 17px; }
.sl-tl p { margin: 0; color: var(--fp-muted); font-size: 15px; line-height: 1.6; }

/* ── County cards ──────────────────────────────────────────────────── */
.sl-counties {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 860px) { .sl-counties { grid-template-columns: 1fr; } }
.sl-county h3 { margin: 0 0 4px; }
.sl-county__clerk { font-size: 14px; font-weight: 600; color: var(--fp-green); margin-bottom: 12px; }
.sl-county__row {
  display: grid; grid-template-columns: 22px 1fr; gap: 6px;
  font-size: 14px; color: var(--fp-text); line-height: 1.5; margin-bottom: 8px;
}
.sl-county__ic { line-height: 1.5; }
.sl-note { font-size: 14px; color: var(--fp-muted); }

/* ── Why bullets ───────────────────────────────────────────────────── */
.sl-why {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px;
}
@media (max-width: 720px) { .sl-why { grid-template-columns: 1fr; } }
.sl-why__item { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; }
.sl-why__ic {
  color: var(--fp-green-dark); font-weight: 700; font-size: 16px; /* green was 4.15:1 on cream */
  line-height: 1.5;
}
/* Muted .lede inside the green closing band was 1.2:1 (contrast sweep 2026-07-10). */
.cta-band .lede { color: #fff; }
/* Plain links on cream sections: --fp-green was 4.15:1 there. */
.section--cream a:not(.btn) { color: var(--fp-green-dark); }

/* Inline text links read as links (Taras 2026-08-28): underline prose anchors on the
   state landings + calculator, matching the blog articles. Buttons, nav, the ToC rail,
   and card pills keep their own styling. */
.sl-p a:not(.btn), .sl-prose a:not(.btn), .sl-fact__v a, .sl-faq__item a,
.sl-county a, .sl-updated a { text-decoration: underline; }

/* 861–1559px (most laptops): no free gutter for the floating rail, so render the same
   markup as a STATIC in-flow "On this page" card between hero and content instead of
   nothing (audit 2026-07-10: 11 sections with no jump-nav on common laptop widths). */
@media (min-width: 861px) and (max-width: 1559px) {
  .sl-toc {
    display: block;
    position: static;
    width: auto;
    max-width: calc(var(--fp-container) - 2 * var(--fp-gutter));
    margin: 24px auto -20px;
    background: var(--fp-white);
    border: 1.5px solid var(--fp-line);
    border-radius: var(--fp-radius-lg);
    padding: 12px 16px;
    opacity: 1; transform: none; pointer-events: auto;
  }
  .sl-toc__title { display: inline-block; padding: 4px 10px 0 0; }
  /* flex-direction: row is LOAD-BEARING — the base rule is column, and without the reset the
     "compact strip" stacked one link per line into a huge vertical block (MKT-01/03, QA 2026-07-13). */
  .sl-toc__list { display: inline-flex; flex-direction: row; flex-wrap: wrap; gap: 2px 4px; vertical-align: middle; }
  .sl-toc__list a { border-left: 0; }
  .sl-toc__list a.is-active { border-left: 0; }
  .sl-toc__cta { display: none; }
}
.sl-why__item span:last-child { font-size: 15px; line-height: 1.55; color: var(--fp-text); }

/* Visible freshness line at the foot of a state landing (SEO audit 2026-07-27: §3 wants a
   visible publication or update date, which only the articles and calculator had). */
.sl-updated {
  font-size: 13px;
  color: var(--fp-muted);
  text-align: center;
  margin: 32px auto 8px;
  max-width: 640px;
}

/* Headline strip under the hero: the ?v=opt ad message-match variant (2026-09-02). */
.sl-hl { padding: 0; }
.sl-hl__list {
  margin: 0; padding: 22px 0; list-style: none;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  border-top: 1px solid var(--fp-line, #e6e9e8); border-bottom: 1px solid var(--fp-line, #e6e9e8);
}
.sl-hl__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; }
.sl-hl__list li .fp-check { flex: 0 0 auto; margin-top: 1px; }
.sl-hl__list strong { display: block; font-size: 15px; color: var(--fp-ink, #071f24); margin-bottom: 2px; }
.sl-hl__list span:last-child { color: var(--fp-muted); }
@media (max-width: 1080px) { .sl-hl__list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sl-hl__list { grid-template-columns: 1fr; gap: 12px; padding: 18px 0; } }