/* ============================================================
   page-states-v2.css
   Companion stylesheet for templates/page-states-v2.php
   Only carries rules Tailwind utilities can't reach:
   - bg-stage opacity toggle + will-change scoping
   - sticky intro + iOS dvh fallback
   - typography for wp_kses_post() output (intro prose, card body)
   - factoid-table styling
   - card adjacent-sibling spacing
   ============================================================ */

:root {
    --rov-cream:       #f5f3e9;
    --rov-cream-soft:  #fbfaf3;
}

/* /states/ (page-states.php) page-scoped backgrounds.
   Were inline `bg-[var(--rov-cream*)]` arbitrary utilities in markup;
   moved here keyed by page-unique classes (orthodox: page-scoped colour
   belongs in the page's companion stylesheet, not a Tailwind [var()]). */
.states-pg-hero-bg  { background-color: var(--rov-cream-soft); }
.states-pg-intro-bg { background-color: var(--rov-cream); }

/* ===== Background stage =================================================
   Opacity toggle is data-attribute driven (set by JS on the active img).
   will-change is scoped to the active/fading image only — applying it to
   all 14 stacked imgs would create 14 permanent compositor layers.        */
.states-v2-bg-img[data-active],
.states-v2-bg-img[data-fading] {
    will-change: opacity;
}
.states-v2-bg-img[data-active] { opacity: 1; }

/* ===== STATE INTRO sticky ===============================================
   Section is taller than viewport. Inner is sticky-pinned to top so as the
   user scrolls through the section's extra height, content stays put —
   the "gentle pause" effect. Mobile drops the sticky for a normal stack.   */
.states-v2-intro {
    min-height: 200vh;
    min-height: 200dvh;
}
.states-v2-intro-inner {
    position: sticky;
    top: 0;
    min-height: 100vh;
    min-height: 100dvh;
}

/* Title nested anchor + underline element */
.states-v2-intro-title a {
    color: var(--rov-green, #00754a);
    text-decoration: none;
}
.states-v2-intro-title a:hover { color: #005a3a; }
.states-v2-intro-title u {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ===== Factoid table ==================================================== */
.states-v2-factoid-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(248, 250, 252, 0.95);
    border-radius: 0.75rem;
    overflow: hidden;
}
.states-v2-factoid-table th,
.states-v2-factoid-table td {
    padding: 0.95rem 1.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    text-align: left;
    vertical-align: top;
    font-size: 1rem;
    line-height: 1.5;
}
.states-v2-factoid-table th {
    width: 36%;
    font-weight: 700;
    color: #2d3748;
    background: rgba(0, 0, 0, 0.02);
}
.states-v2-factoid-table td { color: #4a5568; }
.states-v2-factoid-table tr:last-child th,
.states-v2-factoid-table tr:last-child td { border-bottom: 0; }

/* ===== Outline image fits inside its wrapper =========================== */
.states-v2-outline {
    max-height: 50vh;
}
.states-v2-outline img {
    width: 100%;
    height: 100%;
    max-height: calc(50vh - 1.5rem);
    object-fit: contain;
    display: block;
}

/* ===== Typography for WP-content blocks (wp_kses_post output) ========== */
.states-v2-intro-prose p { margin: 0 0 1rem; }
.states-v2-intro-prose p:empty { display: none; }
.states-v2-intro-prose p:last-child { margin-bottom: 0; }
.states-v2-intro-prose em { color: #4a5568; font-style: italic; }
.states-v2-intro-prose a {
    color: var(--rov-green, #00754a);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.states-v2-intro-prose a:hover { text-decoration: none; }

.states-v2-hero-intro p { margin: 0 0 0.75rem; }
.states-v2-hero-intro p:last-child { margin-bottom: 0; }

.states-v2-card-body p {
    margin: 0 0 0.85rem;
    line-height: 1.6;
    color: #2d3748;
    font-size: 1rem;
}
@media (min-width: 768px) {
    .states-v2-card-body p { font-size: 1.0625rem; }
}
.states-v2-card-body p:last-child { margin-bottom: 0; }
.states-v2-card-body p:empty { display: none; }
.states-v2-card-body a {
    color: var(--rov-green, #00754a);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.states-v2-card-body a:hover { text-decoration: none; }
.states-v2-card-body em { color: #4a5568; font-style: italic; }

/* ===== Flyovers — adjacent-sibling card spacing ========================= */
.states-v2-flyovers { min-height: 240vh; }
.states-v2-flyovers-inner {
    padding-top: 50vh;
    padding-bottom: 50vh;
}
.states-v2-card + .states-v2-card { margin-top: 35vh; }

/* On mobile, keep generous gaps so cards don't blur into a parallax     */
/* smear, and add a little horizontal breathing room from the edges.     */
@media (max-width: 767px) {
    .states-v2-flyovers-inner {
        padding-top: 6rem;
        padding-bottom: 6rem;
        padding-left: 5px;
        padding-right: 5px;
    }
    .states-v2-card + .states-v2-card { margin-top: 45vh; }
}

/* ===== Back to top visible state ======================================== */
.states-v2-top-btn.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* ===== Reduced motion ==================================================== */
@media (prefers-reduced-motion: reduce) {
    .states-v2-bg-img { transition: none !important; }
    html { scroll-behavior: auto; }
}