/* ============================================================
   state-progressive.css
   Progressive disclosure for state dashboard pages
   Mobile: accordion (collapsed sections with chevrons)
   Desktop: full content + sticky TOC sidebar
   Matches blog-progressive.css design language
   ============================================================ */

/* --- TOC Sidebar (desktop ≥768px) --- */
.state-toc {
    display: none;
}

@media (min-width: 768px) {
    .state-toc {
        display: block;
        position: sticky;
        top: 90px;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        padding: 20px;
        background: var(--snow, #FAFBFC);
        border: 1px solid var(--border, #E5E7EB);
        border-radius: 12px;
        margin-bottom: 24px;
    }

    .state-toc h3 {
        font-size: .85rem;
        font-weight: 700;
        color: var(--light, #6B7280);
        text-transform: uppercase;
        letter-spacing: .05em;
        margin-bottom: 12px;
    }

    .state-toc-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .state-toc-list li {
        margin-bottom: 2px;
    }

    .state-toc-list a {
        display: block;
        padding: 8px 12px;
        font-size: .85rem;
        color: var(--dark, #1F2937);
        text-decoration: none;
        border-radius: 8px;
        border-left: 3px solid transparent;
        transition: all .2s;
    }

    .state-toc-list a:hover {
        background: #EBF0FF;
        color: var(--royal, #1B3A8C);
    }

    .state-toc-list a.active {
        background: #EBF0FF;
        color: var(--royal, #1B3A8C);
        border-left-color: var(--royal, #1B3A8C);
        font-weight: 600;
    }

    /* Desktop layout: TOC + content side by side */
    .state-content-wrap {
        display: grid;
        grid-template-columns: 220px 1fr;
        gap: 24px;
        align-items: start;
    }
}

/* --- Accordion (mobile <768px) --- */
.state-section-toggle {
    display: none;
}

@media (max-width: 767px) {
    .state-section-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 16px 0;
        background: none;
        border: none;
        cursor: pointer;
        font-family: inherit;
        text-align: left;
    }

    .state-section-toggle h2 {
        margin: 0;
        font-size: 1.1rem;
        pointer-events: none;
    }

    .state-section-chevron {
        font-size: 1.2rem;
        transition: transform .3s ease;
        color: var(--light, #6B7280);
        flex-shrink: 0;
        margin-left: 12px;
    }

    .state-section-toggle[aria-expanded="true"] .state-section-chevron {
        transform: rotate(180deg);
    }

    .state-section-body {
        max-height: 0;
        overflow: hidden;
        transition: max-height .4s ease;
    }

    .state-section-body.open {
        max-height: 5000px;
    }

    /* Hide the original h2 inside body to avoid duplicate */
    .state-section-body > .content-card > h2:first-child {
        display: none;
    }

    /* Hide TOC on mobile */
    .state-toc {
        display: none !important;
    }

    /* Stack layout on mobile */
    .state-content-wrap {
        display: block;
    }
}

/* --- Shared --- */
.state-section-toggle:focus-visible {
    outline: 2px solid var(--royal, #1B3A8C);
    outline-offset: 2px;
    border-radius: 4px;
}