/* ─── State Profile Hero ─── */
/* Matches the PDF concept: dark navy bar with serif state name, light-blue
   score + rank separated by a green diamond divider, mini US map with the
   current state highlighted in green, and a scores table underneath. */

:root {
    --sph-navy: #0b3148;
    --sph-navy-deep: #072235;
    --sph-blue: #0075F2;
    --sph-blue-accent: #1f6fae;
    --sph-green: #5bb87f;
    --sph-cream: #F7EEE7;
    --sph-cream-alt: #ecdfc2;
    --sph-text: #0b272d;
    --sph-muted: #5a6b72;
}

main.single-post:has(.state-profile-article) {
    background: #fff;
}

.state-profile-article > .entry-content--state-profile {
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 2.5rem;
}

.state-profile-hero {
    margin: 0 0 2rem;
    font-family: "proxima-nova", "Open Sans", sans-serif;
}

/* ─── Hero header (navy bar + map tab) ─── */
/* The hero is an irregular L-shape: main navy bar runs full viewport width
   (up to the map tab), and the map tab extends from its left edge to the
   viewport right edge — taller than the main bar so it hangs below. */
.state-profile-hero__top {
    position: relative;
    background: var(--sph-navy);
    color: #fff;
    margin-bottom: 1rem;
}

/* Back-to-parent link pinned to the top-left of the hero, aligned with the
   inner content column. */
.state-profile-hero__backlink-wrap {
    max-width: 66rem;
    margin: 0 auto;
    padding: 0.85rem 2rem 0;
}

.state-profile-hero__backlink {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: "proxima-nova", "Open Sans", sans-serif;
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: color 0.15s ease;
}

.state-profile-hero__backlink:hover,
.state-profile-hero__backlink:focus {
    color: #fff;
    text-decoration: underline;
}

.state-profile-hero__backlink span[aria-hidden="true"] {
    display: inline-block;
    transition: transform 0.15s ease;
}

.state-profile-hero__backlink:hover span[aria-hidden="true"],
.state-profile-hero__backlink:focus span[aria-hidden="true"] {
    transform: translateX(-3px);
}

.state-profile-hero__top-inner {
    position: relative;
    max-width: 66rem;
    margin: 0 auto;
    padding: 1.5rem 2rem 2rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: 2rem;
}


.state-profile-hero__state {
    font-family: "DM Serif Display", Georgia, serif;
    font-weight: 400;
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    line-height: 1.02;
    color: #fff;
    margin: 0;
    letter-spacing: 0.005em;
}

/* ─── State switcher (details/summary dropdown on state name) ─── */
.state-profile-hero__switcher {
    position: relative;
}

.state-profile-hero__switcher > summary.state-profile-hero__state {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: baseline;
    gap: 0.15em;
    user-select: none;
}

.state-profile-hero__switcher > summary.state-profile-hero__state::-webkit-details-marker {
    display: none;
}

.state-profile-hero__state-chevron {
    font-size: 0.5em;
    color: var(--sph-green);
    line-height: 1;
    transition: transform 0.15s ease;
    position: relative;
    top: -0.1em;
}

.state-profile-hero__switcher[open] .state-profile-hero__state-chevron {
    transform: rotate(180deg);
}

.state-profile-hero__switcher > summary:focus-visible {
    outline: 2px solid var(--sph-green);
    outline-offset: 4px;
    border-radius: 4px;
}

.state-profile-hero__state-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    /* Must sit above the sticky publication-nav (z-index: 50) so the
     * dropdown isn't clipped by the pill when the menu open. */
    z-index: 60;
    background: #fff;
    border: 1px solid #e6e2d8;
    border-radius: 6px;
    box-shadow: 0 12px 32px rgba(7, 34, 53, 0.18);
    padding: 0.5rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(9rem, 1fr));
    gap: 0.1rem;
    min-width: 22rem;
    max-height: 22rem;
    overflow: hidden auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    font-family: "proxima-nova", "Open Sans", sans-serif;
    font-size: 0.9rem;
}

.state-profile-hero__state-option {
    display: block;
    padding: 0.45rem 0.75rem;
    color: var(--sph-text);
    text-decoration: none;
    border-radius: 4px;
    line-height: 1.3;
    transition: background 0.1s ease, color 0.1s ease;
}

.state-profile-hero__state-option:hover,
.state-profile-hero__state-option:focus-visible {
    background: #f5ecd8;
    color: var(--sph-navy);
    text-decoration: none;
    outline: none;
}

.state-profile-hero__state-option.is-current {
    background: var(--sph-navy);
    color: #fff;
    font-weight: 600;
}

/* ─── Score + Rank metrics ─── */
.state-profile-hero__metrics {
    display: flex;
    align-items: flex-end;
    gap: 1.5rem;
}

.state-profile-hero__metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.state-profile-hero__metric-label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #a3c1b4;
    margin-bottom: 0.2rem;
    max-width: 9rem;
    line-height: 1.2;
}

.state-profile-hero__metric-value {
    font-family: "DM Serif Display", Georgia, serif;
    font-weight: 400;
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    line-height: 1;
    color: var(--sph-blue);
    display: inline-flex;
    align-items: baseline;
}

.state-profile-hero__metric-suffix {
    font-size: 0.72em;
    font-weight: 400;
    color: var(--sph-blue);
    margin-left: 0.02em;
    letter-spacing: 0;
}

.state-profile-hero__metric-ordinal {
    font-size: 0.6em;
    font-weight: 400;
    margin-left: 0.05em;
}

/* Green divider between Score and Rank: thin vertical line */
.state-profile-hero__divider {
    flex: 0 0 auto;
    align-self: stretch;
    width: 2px;
    background: var(--sph-green);
    margin: 0.25rem 0;
}

/* ─── Mini US map (state highlighted in green) ─── */
/* Sits inline as the 4th column of the metrics row so it visually anchors
   the state name and reinforces "this is X" alongside the score/rank. */
.state-profile-hero__mini-map {
    width: 12rem;
    padding: 0;
    background: transparent;
    box-sizing: border-box;
    display: block;
    line-height: 0;
}

.state-profile-hero__mini-map svg {
    width: 100%;
    height: auto;
    max-height: 100%;
    display: block;
}

/* Single horizontal green accent line running the full viewport width along
   the bottom edge of the navy bar. */
.state-profile-hero__top::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: var(--sph-green);
}

.state-profile-hero__mini-map svg .state {
    fill: #f5ede0;
}

.state-profile-hero__mini-map svg .borders {
    stroke: var(--sph-navy);
    stroke-width: 1;
}

.state-profile-hero__mini-map[class*="highlight-"] svg .state {
    /* keep default fill for non-highlighted */
}

/* Highlight the current state in the mini map (generated from USPS abbr) */
.state-profile-hero__mini-map.highlight-al svg .al,
.state-profile-hero__mini-map.highlight-ak svg .ak,
.state-profile-hero__mini-map.highlight-az svg .az,
.state-profile-hero__mini-map.highlight-ar svg .ar,
.state-profile-hero__mini-map.highlight-ca svg .ca,
.state-profile-hero__mini-map.highlight-co svg .co,
.state-profile-hero__mini-map.highlight-ct svg .ct,
.state-profile-hero__mini-map.highlight-de svg .de,
.state-profile-hero__mini-map.highlight-fl svg .fl,
.state-profile-hero__mini-map.highlight-ga svg .ga,
.state-profile-hero__mini-map.highlight-hi svg .hi,
.state-profile-hero__mini-map.highlight-id svg .id,
.state-profile-hero__mini-map.highlight-il svg .il,
.state-profile-hero__mini-map.highlight-in svg .in,
.state-profile-hero__mini-map.highlight-ia svg .ia,
.state-profile-hero__mini-map.highlight-ks svg .ks,
.state-profile-hero__mini-map.highlight-ky svg .ky,
.state-profile-hero__mini-map.highlight-la svg .la,
.state-profile-hero__mini-map.highlight-me svg .me,
.state-profile-hero__mini-map.highlight-md svg .md,
.state-profile-hero__mini-map.highlight-ma svg .ma,
.state-profile-hero__mini-map.highlight-mi svg .mi,
.state-profile-hero__mini-map.highlight-mn svg .mn,
.state-profile-hero__mini-map.highlight-ms svg .ms,
.state-profile-hero__mini-map.highlight-mo svg .mo,
.state-profile-hero__mini-map.highlight-mt svg .mt,
.state-profile-hero__mini-map.highlight-ne svg .ne,
.state-profile-hero__mini-map.highlight-nv svg .nv,
.state-profile-hero__mini-map.highlight-nh svg .nh,
.state-profile-hero__mini-map.highlight-nj svg .nj,
.state-profile-hero__mini-map.highlight-nm svg .nm,
.state-profile-hero__mini-map.highlight-ny svg .ny,
.state-profile-hero__mini-map.highlight-nc svg .nc,
.state-profile-hero__mini-map.highlight-nd svg .nd,
.state-profile-hero__mini-map.highlight-oh svg .oh,
.state-profile-hero__mini-map.highlight-ok svg .ok,
.state-profile-hero__mini-map.highlight-or svg .or,
.state-profile-hero__mini-map.highlight-pa svg .pa,
.state-profile-hero__mini-map.highlight-ri svg .ri,
.state-profile-hero__mini-map.highlight-sc svg .sc,
.state-profile-hero__mini-map.highlight-sd svg .sd,
.state-profile-hero__mini-map.highlight-tn svg .tn,
.state-profile-hero__mini-map.highlight-tx svg .tx,
.state-profile-hero__mini-map.highlight-ut svg .ut,
.state-profile-hero__mini-map.highlight-vt svg .vt,
.state-profile-hero__mini-map.highlight-va svg .va,
.state-profile-hero__mini-map.highlight-wa svg .wa,
.state-profile-hero__mini-map.highlight-wv svg .wv,
.state-profile-hero__mini-map.highlight-wi svg .wi,
.state-profile-hero__mini-map.highlight-wy svg .wy {
    fill: var(--sph-green);
}

/* ─── Scores table ─── */
.state-profile-hero__scores-wrap {
    max-width: 42rem;
    margin: 1.75rem auto 0;
    padding: 0 1rem;
}

.state-profile-hero__scores {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    font-variant-numeric: tabular-nums;
    font-size: 0.95rem;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 0 0 1px #e6e2d8;
}

.state-profile-hero__scores thead tr {
    background: var(--sph-navy);
}

.state-profile-hero__scores thead th {
    text-align: center;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0;
    text-transform: none;
    color: #fff;
    padding: 0.85rem 1rem;
    border: 0;
}

.state-profile-hero__scores th.state-profile-hero__scores-num,
.state-profile-hero__scores td.state-profile-hero__scores-num {
    text-align: center;
    white-space: nowrap;
    width: 9rem;
}

.state-profile-hero__scores tbody th {
    text-align: center;
    font-weight: 400;
    font-size: 0.95rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--sph-text);
    padding: 0.9rem 1rem;
    border: 0;
}

.state-profile-hero__scores tbody td {
    padding: 0.9rem 1rem;
    color: var(--sph-text);
    text-align: center;
    border: 0;
}

.state-profile-hero__scores tbody td:last-child {
    border-bottom: 0;
}

.state-profile-hero__scores tbody tr:nth-child(odd) th,
.state-profile-hero__scores tbody tr:nth-child(odd) td {
    background: var(--sph-cream);
}

.state-profile-hero__scores tbody tr:nth-child(even) th,
.state-profile-hero__scores tbody tr:nth-child(even) td {
    background: #fff;
}

.state-profile-hero__scores-row--primary th,
.state-profile-hero__scores-row--primary td {
    color: var(--sph-text) !important;
}

/* ─── Intro paragraphs (two-column flow under the hero) ─── */
.state-profile-intro {
    max-width: 52.5rem;
    margin: 1.75rem auto 0;
    padding: 0 1rem;
    column-count: 2;
    column-gap: 2rem;
    color: var(--sph-text);
    font-size: 0.95rem;
    line-height: 1.55;
    text-align: justify;
    hyphens: auto;
}

.state-profile-intro p {
    margin: 0 0 0.75rem;
    break-inside: avoid;
}

.state-profile-intro p:last-child {
    margin-bottom: 0;
}

.state-profile-intro strong {
    color: var(--sph-text);
    font-weight: 700;
}

/* Strengths / Weaknesses / Highlights — the custom heading + bulletless-list
 * styling that previously lived here was removed so the section inherits the
 * default site H2 + UL styling. Classes stay on the markup as hooks in case
 * targeted styling is reintroduced. */

/* ─── Profile pager (prev | back | next) ─── */
.state-profile-pager {
    max-width: 52.5rem;
    margin: 2.5rem auto 2.5rem;
    padding: 1rem 1rem 0;
    border-top: 1px solid #e6e2d8;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    align-items: baseline;
    font-family: "proxima-nova", "Open Sans", sans-serif;
    font-size: 0.95rem;
    line-height: 1.4;
}

.state-profile-pager__slot--prev  { justify-self: start; }
.state-profile-pager__slot--back  { justify-self: center; }
.state-profile-pager__slot--next  { justify-self: end; text-align: right; }

.state-profile-pager__link {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    color: var(--sph-blue-accent);
    text-decoration: none;
    font-weight: 600;
    line-height: 1.4;
    transition: color 0.12s ease;
}

.state-profile-pager__link:hover,
.state-profile-pager__link:focus-visible {
    color: var(--sph-navy);
    text-decoration: none;
    outline: none;
}

.state-profile-pager__link:hover .state-profile-pager__label,
.state-profile-pager__link:focus-visible .state-profile-pager__label {
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

.state-profile-pager__arrow {
    transition: transform 0.15s ease;
}

.state-profile-pager__link--prev:hover .state-profile-pager__arrow,
.state-profile-pager__link--prev:focus-visible .state-profile-pager__arrow {
    transform: translateX(-2px);
}

.state-profile-pager__link--next:hover .state-profile-pager__arrow,
.state-profile-pager__link--next:focus-visible .state-profile-pager__arrow {
    transform: translateX(2px);
}

.state-profile-pager__link--back {
    color: var(--sph-blue-accent);
}

/* ─── Responsive ─── */
@media (max-width: 640px) {
    .state-profile-pager {
        grid-template-columns: 1fr;
        gap: 0.6rem;
        text-align: center;
    }
    .state-profile-pager__slot--prev,
    .state-profile-pager__slot--back,
    .state-profile-pager__slot--next {
        justify-self: center;
    }
    .state-profile-pager__slot--next {
        text-align: center;
    }
    .state-profile-hero__state-menu {
        grid-template-columns: 1fr;
        min-width: 16rem;
    }
}

@media (max-width: 780px) {
    .state-profile-hero__top-inner {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        padding: 1.5rem 1.25rem 1.25rem;
        justify-items: center;
        text-align: center;
    }
    .state-profile-hero__metrics {
        justify-content: center;
    }
    /* On narrow viewports the inline map shrinks to a corner sliver where the
       state highlight is unreadable. Promote it to a centered banner under
       the metrics at 80% width so the highlight is legible. */
    .state-profile-hero__mini-map {
        width: 80%;
        max-width: 24rem;
        justify-self: center;
        margin: 0.5rem auto 0;
    }
}

@media (max-width: 520px) {
    .state-profile-hero__metrics {
        justify-content: center;
        gap: 1.25rem;
    }
    .state-profile-hero__metric-label {
        font-size: 0.65rem;
    }
    .state-profile-hero__metric-value {
        font-size: 2rem;
    }
    .state-profile-hero__scores {
        font-size: 0.88rem;
    }
    .state-profile-hero__scores thead th,
    .state-profile-hero__scores tbody th,
    .state-profile-hero__scores tbody td {
        padding: 0.6rem 0.7rem;
    }
    .state-profile-hero__scores th.state-profile-hero__scores-num,
    .state-profile-hero__scores td.state-profile-hero__scores-num {
        width: auto;
    }
}

/* ─── Detailed Scorecard (post body, appended after Highlights) ─── */
/* Stripped-down list treatment: serif headings in Title Case, plain row
   separators, no row striping. Mirrors the standalone HTML mockup. */

.state-profile-details-wrap {
    max-width: 52.5rem;
    margin: 2.5rem auto 0;
    padding: 0 1rem;
    color: var(--sph-text);
    font-family: "proxima-nova", "Open Sans", sans-serif;
}

/* "Detailed Scorecard" — inherits the default site H2 (Proxima Nova 700,
 * 42px → 52px at ≥500px). The previous bespoke treatment (DM Serif Display
 * with a 2px navy underline) was removed so the heading matches the rest of
 * the page. Class kept as a hook in case targeted styling is needed. */

.state-profile-details-wrap h3 {
    font-family: "DM Serif Display", Georgia, serif;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.15;
    color: var(--sph-navy);
    text-transform: none;
    letter-spacing: 0;
    margin: 2rem 0 0.5rem;
    padding-bottom: 0;
    border-bottom: 0;
}

.state-profile-details-wrap h3:first-of-type {
    margin-top: 1.25rem;
}

.state-profile-details-wrap h4 {
    font-family: "proxima-nova", "Open Sans", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--sph-text);
    text-transform: none;
    letter-spacing: 0;
    margin: 1.25rem 0 0.4rem;
    line-height: 1.3;
}

.state-profile-details {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
}

.state-profile-details th,
.state-profile-details td {
    padding: 0.65rem 0.5rem;
    border: 0;
    border-bottom: 1px solid #e0e6e9;
    line-height: 1.45;
    vertical-align: top;
    background: transparent;
    text-transform: none;
    letter-spacing: 0;
}

.state-profile-details th {
    text-align: left;
    font-weight: 400;
    color: var(--sph-text);
    width: auto;
}

.state-profile-details td {
    text-align: left;
    font-weight: 700;
    color: var(--sph-text);
    width: 9rem;
}

.state-profile-details tbody tr:last-child th,
.state-profile-details tbody tr:last-child td {
    border-bottom: 0;
}

@media (max-width: 520px) {
    .state-profile-details {
        font-size: 0.9rem;
    }
    .state-profile-details th,
    .state-profile-details td {
        padding: 0.55rem 0.4rem;
    }
    .state-profile-details td {
        width: auto;
        white-space: normal;
    }
    .state-profile-details-wrap h3 {
        font-size: 1.3rem;
    }
}

/* ─── Inline Map block (state profile only) ─── */
/* The us-map-2 block is rendered by single-resource.php at the bottom of
   each state profile. Without a margin-top it sits flush against the
   detailed scorecard and reads as part of it. 48px gives a clear
   section break that matches the editorial rhythm of the publication. */
.entry-content--state-profile > section.us-map-2 {
    margin-top: 3rem;
}

/* ─── Bottom Table of Contents (state profile only) ─── */
/* Constrain the chapter-nav block's container so the TOC card aligns with
   the narrower content column (highlights, intro paragraphs) above. */
.state-profile-bottom-toc .container {
    max-width: 54.5rem;
}

/* The bottom TOC carries both .chapter-nav--toc (32px padding-top) and
   .chapter-nav--bottom (32px margin-top). Stacked with the entry-content's
   40px padding-bottom, the gap between the map and the TOC card was 104px
   and read as a missing element. Drop the redundant margin-top so the gap
   relaxes to ~72px while still feeling like a clear navigation handoff. */
.state-profile-bottom-toc .chapter-nav--bottom {
    margin-top: 0;
}

/* ─── TopicsBoost "Mentioned on this page" block ─── */
/* Plugin baseline is margin-top: 0 with 12px top padding, which sits flush
   against the Detailed Scorecard. Lift it off so it reads as a separate
   meta block. Scoped to state profiles only via this stylesheet's enqueue. */
.entry-content--state-profile .ttd-topics-display {
    margin-top: 60px;
}