/* ==========================================================================
   BLOCK: SUBNAV - the "dropline": a flat section bar under the masthead.
   Deep sections (Regulation, Sustainability) keep their local navigation
   WITHOUT swapping away the global members masthead.

   SINGLE-SOURCE LINKS, two costumes (same trick as the masthead nav):
   - wide container : the links render inline in the bar
   - narrow container: the very same element expands IN FLOW below the
     bar (sr-only checkbox + label burger, CSS only), pushing the page
     down so it reads and scrolls as part of the document.
   The section title is a LINK to the section root, so any sub page is
   one tap from its overview.
   ========================================================================== */

@scope (.block-subnav) {
    :scope {
        position: relative;             /* containing block for the sheet */
        background: var(--panel-bg);
        color: var(--panel-text);
        border-block-end: 1px solid var(--panel-border);
        container-type: inline-size;
        container-name: subnav;
    }

    .subnav-inner {
        display: flex;
        align-items: stretch;
        gap: clamp(20px, 2.6cqw, 48px);
        min-block-size: clamp(58px, 5cqw, 78px);
    }

    /* Section identity, pinned left - and a LINK back to the section root */
    a.subnav-title {
        display: flex;
        align-items: center;
        gap: 14px;
        font-size: 0.78rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.22em;
        white-space: nowrap;
        color: inherit;
        transition: color 0.25s;
    }
    a.subnav-title::before {
        content: "";
        inline-size: 8px;
        block-size: 8px;
        background: var(--accent-lime);
        transition: scale 0.25s var(--ease-lux);
    }
    a.subnav-title:hover { color: var(--accent-ink); }
    a.subnav-title:hover::before { scale: 1.3; }

    /* ------------------------------------------------- SECTION BURGER -- */
    .subnav-btn {
        margin-inline-start: auto;
        align-self: center;
        display: grid;
        place-items: center;
        inline-size: 44px;
        block-size: 44px;
        border: 1px solid var(--panel-border);
        cursor: pointer;
        transition: border-color 0.25s, color 0.25s;
    }
    .subnav-btn::after {
        content: "";
        inline-size: 18px;
        block-size: 2px;
        background: currentColor;
        box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
        transition: box-shadow 0.25s;
    }
    .subnav-btn:hover { border-color: var(--accent-lime); color: var(--accent-ink); }
    :scope:has(.subnav-state:checked) .subnav-btn {
        border-color: var(--accent-lime);
        color: var(--accent-ink);
    }
    :scope:has(.subnav-state:checked) .subnav-btn::after { box-shadow: 0 0 0 currentColor; }
    :scope:has(.subnav-state:focus-visible) .subnav-btn {
        outline: 2px solid var(--accent-lime);
        outline-offset: 3px;
    }
    .subnav-btn { cursor: pointer; }

    /* -------------- NARROW: attached sheet, overlaying the content --- */
    .subnav-links {
        position: absolute;             /* within the bar - scrolls with
                                           the page, overlays what's below */
        inset-block-start: 100%;
        inset-inline: 0;
        z-index: 110;
        display: grid;
        background: var(--panel-bg);
        color: var(--panel-text);

        interpolate-size: allow-keywords;
        block-size: 0;
        overflow: clip;
        visibility: hidden;
        transition: block-size 0.4s var(--ease-lux),
                    visibility 0.4s allow-discrete;
        border-block-end: 1px solid var(--panel-border);
        box-shadow: 0 30px 60px var(--panel-shadow);
    }
    .subnav-links > :first-child { border-block-start: 1px solid var(--panel-border); }
    .subnav-state:checked ~ .subnav-inner .subnav-links {
        block-size: auto;
        visibility: visible;
    }

    .subnav-links a {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 20px;
        padding: 16px clamp(20px, 5cqw, 40px);
        font-size: 0.8rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        border-block-end: 1px solid var(--panel-border);
        transition: background 0.25s, color 0.25s, padding-inline-start 0.25s;
    }
    .subnav-links a:last-child { border-block-end: 0; }
    .subnav-links a:hover {
        background: var(--panel-hover);
        color: var(--accent-ink);
        padding-inline-start: calc(clamp(20px, 5cqw, 40px) + 8px);
    }
    .subnav-links a[aria-current="page"] { color: var(--accent-ink); }
    .subnav-links a[aria-current="page"]::after {
        content: "";
        inline-size: 7px;
        block-size: 7px;
        border-radius: 50%;
        background: var(--accent-lime);
        align-self: center;
    }

    /* ------------------------------ WIDE: links inline, burger hidden -- */
    @container subnav (width >= 1024px) {
        div.subnav-links {
            display: flex;
            align-items: stretch;
            gap: clamp(18px, 2.2cqw, 40px);
            position: static;
            block-size: auto;
            visibility: visible;
            min-inline-size: 0;
            overflow: visible;
            transition: none;
            background: transparent;
            border: 0;
            box-shadow: none;
        }
        div.subnav-links > :first-child { border-block-start: 0; }
        .subnav-links a {
            padding: 0;
            border-block-end: 2px solid transparent;
            font-size: 0.8rem;
            white-space: nowrap;
            align-items: center;
        }
        .subnav-links a:hover {
            background: transparent;
            color: var(--accent-ink);
            padding-inline-start: 0;
        }
        .subnav-links a[aria-current="page"] {
            color: var(--accent-ink);
            border-block-end-color: var(--accent-lime);
        }
        .subnav-links a[aria-current="page"]::after { content: none; }

        .subnav-btn { display: none; }
    }
}