/* =====================================================
   Nested Vertical Tabs — nvt.css  v3.0.0
   Design: match screenshot exactly
   Font: PublicSans-Regular (loaded by theme)
   ===================================================== */

.nvt-wrap *,
.nvt-wrap *::before,
.nvt-wrap *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.nvt-wrap {
    --nvt-accent:        #000;
    --nvt-inactive:      #aaa;
    --nvt-text-body:     #1a1a1a;
    --nvt-bg:            #fff;
    --nvt-divider:       #e0e0e0;
    --nvt-col1:          25%;
    --nvt-col2:          25%;
    --nvt-focus-ring:    0 0 0 2px var(--nvt-bg), 0 0 0 4px var(--nvt-accent);

    display: flex;
    flex-direction: row;
    align-items: stretch;
    background: var(--nvt-bg);
    min-height: 480px;
    font-family: 'PublicSans-Regular', 'Public Sans', 'Helvetica Neue', Helvetica, sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* =====================================================
   COL 1 — Categories (no border)
   ===================================================== */
.nvt-col--cats {
    width: var(--nvt-col1);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    /* no border — matches screenshot */
    padding: 0;
}

.nvt-cat-btn {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: none;
    display: block;
    width: 100%;
    text-align: left;
    cursor: pointer;
    padding: 1.35rem 2rem;
    font-family: inherit;
    font-size: 1.375rem;   /* large, like screenshot */
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--nvt-inactive);
    outline: none;
    transition: color 160ms ease;
    position: relative;
}

.nvt-cat-btn.is-active {
    color: var(--nvt-accent);
    font-weight: 500;
}

.nvt-cat-btn:hover:not(.is-active) {
    color: #555;
}

.nvt-cat-btn:focus-visible {
    box-shadow: inset var(--nvt-focus-ring);
}

/* =====================================================
   CATEGORY PANELS
   ===================================================== */
.nvt-catpanel {
    display: none;
    flex: 1;
    flex-direction: row;
    align-items: stretch;
}

.nvt-catpanel.is-active {
    display: flex;
}

/* =====================================================
   COL 2 — Sub-tabs (single left border = the line)
   ===================================================== */
.nvt-col--subtabs {
    width: var(--nvt-col2);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--nvt-divider);  /* full-height line */
    padding: 0;
}

.nvt-subtab-btn {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: none;
    display: block;
    width: 100%;
    text-align: left;
    cursor: pointer;
    padding: 1rem 2rem;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.45;
    color: var(--nvt-inactive);
    outline: none;
    transition: color 140ms ease, box-shadow 140ms ease;
    /* thin 1px line on every button */
    /* line drawn by parent border-left */
}

.nvt-subtab-btn.is-active {
    color: var(--nvt-accent);
    font-weight: 500;
    /* thick 2px black line only on the active button */
    box-shadow: inset 2px 0 0 0 var(--nvt-accent);
}

.nvt-subtab-btn:hover:not(.is-active) {
    color: #555;
}

.nvt-subtab-btn:focus-visible {
    outline: 2px solid var(--nvt-accent);
    outline-offset: -2px;
}

/* =====================================================
   COL 3 — Content
   ===================================================== */
.nvt-col--content {
    flex: 1;
    padding: 1rem 2.5rem;
    overflow-y: auto;
}

.nvt-content-panel {
    display: none;
}

.nvt-content-panel.is-active {
    display: block;
}

/* Body text matches screenshot: regular weight, comfortable reading size */
.nvt-content-panel p {
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.75;
    color: var(--nvt-text-body);
    margin-bottom: 1em;
}

.nvt-content-panel p:last-child { margin-bottom: 0; }

.nvt-content-panel h2,
.nvt-content-panel h3,
.nvt-content-panel h4 {
    font-family: inherit;
    font-weight: 500;
    color: var(--nvt-text-body);
    margin-bottom: 0.5em;
    margin-top: 1.25em;
    line-height: 1.2;
}
.nvt-content-panel h2 { font-size: 1.25rem; }
.nvt-content-panel h3 { font-size: 1.05rem; }
.nvt-content-panel h4 { font-size: 0.95rem; }

.nvt-content-panel a {
    color: var(--nvt-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}
.nvt-content-panel a:hover { opacity: 0.6; }

.nvt-content-panel ul,
.nvt-content-panel ol {
    padding-left: 1.25rem;
    margin-bottom: 1em;
}

.nvt-content-panel li {
    font-size: 0.9375rem;
    line-height: 1.75;
    color: var(--nvt-text-body);
    margin-bottom: 0.2em;
}

.nvt-content-panel strong { font-weight: 700; }

.nvt-col--empty {
    flex: 1;
    display: flex;
    align-items: flex-start;
    padding: 1rem 2rem;
}

.nvt-col--empty p {
    font-size: 0.875rem;
    color: var(--nvt-inactive);
}

/* =====================================================
   REDUCED MOTION
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
    .nvt-cat-btn,
    .nvt-subtab-btn {
        transition: none !important;
    }
}

/* =====================================================
   RESPONSIVE — tablet narrow
   ===================================================== */
@media (max-width: 900px) {
    .nvt-wrap {
        --nvt-col1: 25%;
        --nvt-col2: 25%;
    }
    .nvt-cat-btn    { font-size: 1.125rem; padding: 1.1rem 1.5rem; }
    .nvt-subtab-btn { font-size: 0.875rem; padding: 0.85rem 1.5rem; }
}

/* =====================================================
   ACCORDION MODE — tablet portrait + mobile (≤768px)
   All three levels flatten into a single vertical list:
     Category heading (non-interactive label)
       ↳ Sub-tab row with chevron (accordion trigger)
           ↳ Content panel (expands below)
   ===================================================== */
@media (max-width: 768px) {

    /* Outer wrap: single column */
    .nvt-wrap {
        flex-direction: column;
        min-height: unset;
    }

    /* ---- COL 1: category labels become plain headings ---- */
    .nvt-col--cats {
        width: 100%;
        flex-direction: column;
        border-right: none;
        padding: 0;
    }

    /* Hide the category buttons — we render category names
       as static headings via the accordion structure instead */
    .nvt-col--cats { display: none; }

    /* ---- All catpanels visible, stacked ---- */
    .nvt-catpanel,
    .nvt-catpanel.is-active {
        display: block;        /* all panels shown */
        width: 100%;
        animation: none;
    }
    .nvt-catpanel[hidden] {
        display: block !important;  /* override hidden attr in accordion mode */
    }

    /* Category heading injected by JS as a <div class="nvt-acc-heading"> */
    .nvt-acc-heading {
        font-family: inherit;
        font-size: 1.375rem;
        font-weight: 500;
        color: var(--nvt-text-body);
        padding: 1.75rem 0 0.5rem 0;
        letter-spacing: -0.01em;
        line-height: 1.2;
    }
    /* First heading needs no top padding */
    .nvt-catpanel:first-of-type .nvt-acc-heading {
        padding-top: 0.25rem;
    }

    /* ---- COL 2: sub-tab list becomes accordion rows ---- */
    .nvt-col--subtabs {
        width: 100%;
        flex-direction: column;
        border-left: none;
        box-shadow: none;
        padding: 0;
    }

    /* Each sub-tab button = accordion trigger row */
    .nvt-subtab-btn {
        box-shadow: none;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 0;
        font-size: 0.9375rem;
        font-weight: 400;
        color: var(--nvt-text-body);
        border-top: 1px solid var(--nvt-divider);
        border-radius: 0;
        background: none;
        cursor: pointer;
        transition: color 140ms ease;
    }
    .nvt-subtab-btn:last-of-type {
        /* last item in a group also gets a bottom border */
        border-bottom: 1px solid var(--nvt-divider);
    }
    .nvt-subtab-btn.is-active {
        color: var(--nvt-text-body);
        font-weight: 400;         /* no bold — matches screenshot */
        box-shadow: none;
    }

    /* Chevron icon via pseudo-element */
    .nvt-subtab-btn::after {
        content: '';
        flex-shrink: 0;
        width: 8px;
        height: 8px;
        transform-origin: center;
        margin-left: 1rem;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: rotate(45deg);
        transition: transform 200ms ease;
        display: block;
    }
    .nvt-subtab-btn.is-active::after {
        transform: rotate(-135deg);
    }

    /* ---- COL 3: content panels expand inline below each trigger ---- */
    .nvt-col--content {
        padding: 0;
        /* reset overflow from desktop */
        overflow: visible;
    }

    /* All panels hidden by default in accordion mode */
    .nvt-content-panel,
    .nvt-content-panel.is-active {
        display: none;
        padding: 0.75rem 0 1.25rem 0;
        border-bottom: none;   /* border already on the button */
    }

    /* JS adds .nvt-acc-open to the panel to show it */
    .nvt-content-panel.nvt-acc-open {
        display: block;
    }

    .nvt-content-panel p {
        font-size: 0.9rem;
        line-height: 1.75;
        color: var(--nvt-text-body);
    }

    /* Hide the content col wrapper's own padding */
    .nvt-col--content { padding: 0; }

    /* Empty state */
    .nvt-col--empty { display: none; }
}

/* =====================================================
   LINE FULL HEIGHT FIX
   Force the catpanel and subtabs column to always
   stretch to the full height of the wrap (= col 1 height)
   ===================================================== */
.nvt-catpanel {
    align-self: stretch;
    min-height: 100%;
}

.nvt-col--subtabs {
    align-self: stretch;
    min-height: 100%;
}