/* ── tabbed-content.css ─────────────────────────────────
   Module: nf--tabbed-content
   Vertical topic accordion (left) + freely composable
   content panels (right). Requires nf/js/tabbed-content.js.

   For a horizontal-tab variant see `tabbed-panels`.
   For a Q&A list (no tabs) see component `nf--faq`.
   ──────────────────────────────────────────────────────── */

/* ── Topic accordion (left column) ───────────────────── */
.nf--accordion {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nf--accordion-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.nf--accordion-item:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.nf--accordion-item a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.8rem 0;
    font-family: Poppins, sans-serif;
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--rhino) !important;
    text-decoration: none !important;
    transition: color 200ms ease-out;
}

.nf--accordion-item a:hover,
.nf--accordion-item.is-active a {
    color: var(--orange) !important;
    opacity: 1 !important;
    text-decoration: none !important;
}

/* ── Content panels (right column) ───────────────────── */
.nf--tabbed-content__panels {
    /* Vertically centre the panel content against the (typically taller) accordion */
    align-self: center;
}

.nf--tab-panel {
    animation: nf-tabbed-content-fade-in 200ms ease-out;
}

.nf--tab-panel[hidden] {
    display: none;
}

@keyframes nf-tabbed-content-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Mobile: dissolve tabs into stacked Q&A pairs ─────── */
@media (max-width: 900px) {
    /* Promote accordion items and panels to direct grid siblings of .nf--cols-2 */
    .node--nf section[data-nf-module-type="tabbed-content"] .nf--cols-2 > div,
    .node--nf section[data-nf-module-type="tabbed-content"] .nf--accordion {
        display: contents;
    }

    /* Show every panel — override the JS-managed hidden attribute */
    .node--nf section[data-nf-module-type="tabbed-content"] .nf--tab-panel[hidden] {
        display: block;
    }

    /* Topics become static headings: no click, no arrow, no active-state colour shift */
    .node--nf section[data-nf-module-type="tabbed-content"] .nf--accordion-item a {
        pointer-events: none;
        cursor: default;
        color: var(--white) !important;
        padding: 0 0 1.2rem;
    }
    .node--nf section[data-nf-module-type="tabbed-content"] .nf--accordion-item.is-active a {
        color: var(--white) !important;
    }
    .node--nf section[data-nf-module-type="tabbed-content"] .nf--accordion-item a > span {
        display: none;
    }

    /* Drop the horizontal rules — separation comes from spacing between pairs */
    .node--nf section[data-nf-module-type="tabbed-content"] .nf--accordion-item,
    .node--nf section[data-nf-module-type="tabbed-content"] .nf--accordion-item:first-child {
        border: 0;
    }

    /* Spacing between Q&A pairs */
    .node--nf section[data-nf-module-type="tabbed-content"] .nf--tab-panel {
        padding-bottom: 2.4rem;
    }

    /* Interleave: topic 1, panel 1, topic 2, panel 2, … (supports up to 8 pairs) */
    .node--nf section[data-nf-module-type="tabbed-content"] .nf--cols-2 > div > h2 { order: 0; }
    .node--nf section[data-nf-module-type="tabbed-content"] .nf--accordion-item:nth-of-type(1) { order: 1; }
    .node--nf section[data-nf-module-type="tabbed-content"] .nf--tab-panel:nth-of-type(1)     { order: 2; }
    .node--nf section[data-nf-module-type="tabbed-content"] .nf--accordion-item:nth-of-type(2) { order: 3; }
    .node--nf section[data-nf-module-type="tabbed-content"] .nf--tab-panel:nth-of-type(2)     { order: 4; }
    .node--nf section[data-nf-module-type="tabbed-content"] .nf--accordion-item:nth-of-type(3) { order: 5; }
    .node--nf section[data-nf-module-type="tabbed-content"] .nf--tab-panel:nth-of-type(3)     { order: 6; }
    .node--nf section[data-nf-module-type="tabbed-content"] .nf--accordion-item:nth-of-type(4) { order: 7; }
    .node--nf section[data-nf-module-type="tabbed-content"] .nf--tab-panel:nth-of-type(4)     { order: 8; }
    .node--nf section[data-nf-module-type="tabbed-content"] .nf--accordion-item:nth-of-type(5) { order: 9; }
    .node--nf section[data-nf-module-type="tabbed-content"] .nf--tab-panel:nth-of-type(5)     { order: 10; }
    .node--nf section[data-nf-module-type="tabbed-content"] .nf--accordion-item:nth-of-type(6) { order: 11; }
    .node--nf section[data-nf-module-type="tabbed-content"] .nf--tab-panel:nth-of-type(6)     { order: 12; }
    .node--nf section[data-nf-module-type="tabbed-content"] .nf--accordion-item:nth-of-type(7) { order: 13; }
    .node--nf section[data-nf-module-type="tabbed-content"] .nf--tab-panel:nth-of-type(7)     { order: 14; }
    .node--nf section[data-nf-module-type="tabbed-content"] .nf--accordion-item:nth-of-type(8) { order: 15; }
    .node--nf section[data-nf-module-type="tabbed-content"] .nf--tab-panel:nth-of-type(8)     { order: 16; }
}