/* ==========================================================================
   BLOCK: HEADER - Masthead with a SINGLE-SOURCE navigation.
   One <nav id="site-nav"> carries the only set of links:
   * wide masthead  -> rendered inline; <details name="nav-sub"> become
     dropdown panels anchored 1px below the header
   * narrow masthead -> the same element expands IN FLOW below the header
     (sr-only checkbox toggle), pushing the page down; the same <details>
     behave as accordions (native one-at-a-time via name=)
   User circle + independent account popover unchanged.
   ========================================================================== */

@scope (.block-header) {
    :scope {
        position: sticky;
        inset-block-start: 0;
        /* Narrow viewports: the header scrolls with the page (relative,
           not sticky) so the attached menu sheets below scroll away with
           the document like ordinary content. relative also gives the
           absolutely-positioned sheets their containing block.
           Media query by necessity: a container cannot query itself. */
        @media (width < 1420px) { position: relative; }
        z-index: 200;
        anchor-name: --masthead;
        background: var(--chrome-bg);
        color: var(--chrome-text);
        border-block-end: 1px solid var(--chrome-border);
        transition: background 0.4s, color 0.4s, border-color 0.4s;
        /* the header itself is the responsive container */
        container-type: inline-size;
        container-name: masthead;
    }

    .header-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-xs);
        min-height: var(--header-h);
    }

    /* ------------------------------ ATTACHED SHEETS (no popover) ------
       #site-nav and #account-menu are full-width sheets attached flush
       under the header: absolutely positioned within the header (NOT
       fixed), so they OVERLAY the content below without pushing it, yet
       scroll away with the page like part of the document. Collapsed to
       zero height until their sr-only checkbox is ticked;
       interpolate-size animates 0 -> auto (progressive enhancement).
       No height cap, no internal scrollbars. */
    #site-nav, #account-menu {
        position: absolute;
        inset-block-start: 100%;
        inset-inline: 0;
        z-index: 120;
        interpolate-size: allow-keywords;
        block-size: 0;
        overflow: clip;
        visibility: hidden;
        transition: block-size 0.45s var(--ease-lux),
                    visibility 0.45s allow-discrete;
        background: var(--panel-bg);
        color: var(--panel-text);
        border-block-end: 1px solid var(--panel-border);
        box-shadow: 0 30px 60px var(--panel-shadow);
    }
    #site-nav > :first-child, #account-menu > :first-child {
        border-block-start: 1px solid var(--panel-border);
    }
    .nav-state:checked ~ .header-inner #site-nav,
    .account-state:checked ~ .header-inner #account-menu {
        block-size: auto;
        visibility: visible;
    }

    /* ------------------------------------------------------------ LOGO -- */
    .logo {
        display: flex;
        align-items: center;
        gap: clamp(14px, 1.5vw, 24px);
        white-space: nowrap;
    }
    .logo img {
        block-size: clamp(48px, 5vw, 72px);
        inline-size: auto;
        object-fit: contain;
    }
    .logo small {
        font-weight: 500;
        font-size: clamp(0.6rem, 0.7vw, 0.75rem);
        letter-spacing: 0.25em;
        text-transform: uppercase;
        color: var(--chrome-muted);
        border-inline-start: 1px solid var(--chrome-border);
        padding-inline-start: clamp(14px, 1.5vw, 24px);
    }
    @container masthead (width < 640px) { .logo small { display: none; } }

    /* ================================================= SINGLE NAV ====== */
    /* Shared trigger look (links AND summaries, both layouts) */
    .site-nav :is(a, summary) { cursor: pointer; }
    .site-nav summary { list-style: none; user-select: none; }
    .site-nav summary::-webkit-details-marker { display: none; }

    /* Chevron drawn in CSS on every submenu trigger */
    .site-nav summary::after {
        content: "";
        inline-size: 7px;
        block-size: 7px;
        border-inline-end: 2px solid currentColor;
        border-block-end: 2px solid currentColor;
        rotate: 45deg;
        translate: 0 -2px;
        transition: rotate 0.3s var(--ease-lux), translate 0.3s var(--ease-lux);
        flex: none;
    }
    .site-nav details[open] > summary::after { rotate: 225deg; translate: 0 2px; }

    /* ------------------------------------ WIDE MASTHEAD: inline nav ---- */
    @container masthead (width >= 1420px) {

        /* The same element sheds its collapsed-row costume and renders
           inline in the masthead. */
        /* nav.site-nav (0,1,1) outranks the generic [popover] chrome (0,1,0)
           declared later in this file. */
        nav.site-nav {
            display: block;
            position: static;
            block-size: auto;
            visibility: visible;
            min-inline-size: 0;
            overflow: visible;
            transition: none;
            background: transparent;
            color: inherit;
            border: 0;
            box-shadow: none;
        }
        nav.site-nav > :first-child { border-block-start: 0; }
        .site-nav > .popover-head { display: none; }

        .site-nav ul {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: clamp(14px, 1.5cqw, 30px);
        }

        .site-nav :is(ul > li > a, summary) {
            font-weight: 600;
            font-size: clamp(0.78rem, 0.85cqw, 0.95rem);
            text-transform: uppercase;
            letter-spacing: 0.14em;
            padding-block: 10px;
            border-block-end: 2px solid transparent;
            transition: color 0.3s, border-color 0.3s;
            white-space: nowrap;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .site-nav :is(ul > li > a, summary):hover { color: var(--accent-ink); }
        .site-nav ul > li > a[aria-current="page"] {
            color: var(--accent-ink);
            border-block-end-color: var(--accent-lime);
        }
        .site-nav details[open] > summary {
            color: var(--accent-ink);
            border-block-end-color: var(--accent-lime);
        }

        /* Dropdown panels - closed state is native (<details> hides its
           content), so only the OPEN presentation is styled. */
        .has-sub { position: static; }
        .sub-menu {
            inline-size: max-content;
            min-inline-size: 280px;
            max-inline-size: min(440px, 92vw);
            /* Long lists (Congresses archive) scroll inside the panel */
            max-block-size: calc(100dvh - var(--header-h) - 40px);
            overflow-y: auto;
            background: var(--panel-bg);
            color: var(--panel-text);
            border: 1px solid var(--panel-border);
            box-shadow: 0 30px 60px var(--panel-shadow);
            z-index: 210;

            /* Fallback placement: absolute, resolved against the sticky
               header (nearest positioned ancestor) -> flush under it. */
            position: absolute;
            inset-block-start: calc(100% + 1px);

            opacity: 1;
            translate: 0 0;
            transition: opacity 0.3s var(--ease-lux), translate 0.3s var(--ease-lux);
            @starting-style { opacity: 0; translate: 0 -10px; }
        }

        /* Anchor positioning upgrade: fixed + anchored, escapes clipping.
           Vertical edge pins to the HEADER's bottom (+1px), horizontal to
           the trigger - panels open the next pixel below the masthead. */
        @supports (anchor-name: --a) {
            #about-trigger      { anchor-name: --about-trigger; }
            #data-trigger       { anchor-name: --data-trigger; }
            #congresses-trigger { anchor-name: --congresses-trigger; }
            #awards-trigger     { anchor-name: --awards-trigger; }
            #pillars-trigger    { anchor-name: --pillars-trigger; }
            #news-trigger       { anchor-name: --news-trigger; }

            .sub-menu {
                position: fixed;
                inset: auto;
                margin: 0;
                inset-block-start: calc(anchor(--masthead bottom) + 1px);
                inset-inline-start: anchor(start);
                position-try-fallbacks: flip-inline;
            }
            #about-sub      { position-anchor: --about-trigger; }
            #data-sub       { position-anchor: --data-trigger; }
            #congresses-sub { position-anchor: --congresses-trigger; }
            #awards-sub     { position-anchor: --awards-trigger; }
            #pillars-sub    { position-anchor: --pillars-trigger; }
            #news-sub       { position-anchor: --news-trigger; }
        }

        .sub-menu .popover-nav a { border-block-end-color: var(--panel-border); }

        /* Accordion sizing must not apply in dropdown mode */
        .site-nav details::details-content {
            block-size: auto;
            overflow: visible;
            transition: none;
        }
    }

    /* -------------------------------- NARROW MASTHEAD: popover panel --- */
    @container masthead (width < 1420px) {

        .site-nav ul { display: block; }
        .site-nav ul > li > a {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            gap: 20px;
            padding: 16px 28px;
            font-weight: 600;
            font-size: 0.8rem;
            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;
        }
        .site-nav ul > li > a:hover { background: var(--panel-hover); color: var(--accent-ink); padding-inline-start: 36px; }

        /* <details> as accordion groups (same element, other costume) */
        .site-nav summary {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
            padding: 16px 28px;
            font-weight: 600;
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.14em;
            border-block-end: 1px solid var(--panel-border);
            transition: background 0.25s, color 0.25s;
        }
        .site-nav summary::after { translate: none; }
        .site-nav summary:hover { background: var(--panel-hover); color: var(--accent-ink); }
        .site-nav details[open] > summary { color: var(--accent-ink); }

        /* Cutting-edge: animate the disclosure via ::details-content */
        .site-nav details { interpolate-size: allow-keywords; }
        .site-nav details::details-content {
            block-size: 0;
            overflow: clip;
            transition: block-size 0.45s var(--ease-lux), content-visibility 0.45s allow-discrete;
        }
        .site-nav details[open]::details-content { block-size: auto; }

        .sub-menu .popover-nav { background: var(--panel-hover); }
        .sub-menu .popover-nav a {
            justify-content: flex-start;
            font-weight: 500;
            text-transform: none;
            letter-spacing: 0.04em;
            font-size: 0.9rem;
            padding-inline-start: 44px;
        }
        .sub-menu .popover-nav a::before { content: "\2014" / ""; margin-inline-end: 12px; color: var(--accent-lime); }
        .sub-menu .popover-nav a:hover { padding-inline-start: 52px; }
    }

    /* -------------------------------------------------- HEADER ACTIONS -- */
    .header-actions { display: flex; align-items: center; gap: 14px; }

    /* The USER circle - shown when a member is signed in; the same slot
       renders the Login link server-side for anonymous visitors. */
    .icon-btn {
        display: grid;
        place-items: center;
        inline-size: clamp(46px, 4vw, 56px);
        block-size: clamp(46px, 4vw, 56px);
        border: 1px solid var(--chrome-border);
        border-radius: 50%;
        font-weight: 700;
        font-size: clamp(0.72rem, 0.8vw, 0.85rem);
        letter-spacing: 0.05em;
        transition: border-color 0.3s, color 0.3s, background 0.3s;
    }
    .icon-btn:hover { border-color: var(--accent-lime); color: var(--accent-ink); }

    .menu-btn {
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.2em;
        font-size: clamp(0.8rem, 0.9vw, 0.95rem);
        display: none;
        align-items: center;
        gap: 12px;
        padding: 10px 0;
    }
    .menu-btn::after {
        content: "";
        inline-size: 22px;
        block-size: 2px;
        background: currentColor;
        box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
        transition: box-shadow 0.3s;
    }
    .menu-btn, .account-btn { cursor: pointer; }
    /* :has() - reflect open panel state on its toggle label */
    :scope:has(.nav-state:checked) .menu-btn { color: var(--accent-ink); }
    :scope:has(.nav-state:checked) .menu-btn::after { box-shadow: 0 0 0 currentColor; }
    :scope:has(.account-state:checked) .account-btn {
        border-color: var(--accent-lime);
        color: var(--accent-ink);
    }
    /* keyboard focus on the sr-only checkboxes lights their labels */
    :scope:has(.nav-state:focus-visible) .menu-btn,
    :scope:has(.account-state:focus-visible) .account-btn {
        outline: 2px solid var(--accent-lime);
        outline-offset: 3px;
    }

    /* Collapse the inline nav when the masthead narrows */
    @container masthead (width < 1420px) { .menu-btn { display: inline-flex; } }
    @container masthead (width >= 1420px) { .menu-btn { display: none; } }

    /* ------------------------------------------- ACCOUNT BAND (wide) --
       The account panel is an in-flow band at every width; on roomy
       mastheads its three sections sit side by side. */
    @container masthead (width >= 760px) {
        #account-menu {
            display: flex;
            flex-wrap: wrap;
            align-items: stretch;
        }
        #account-menu > * { flex: 1 1 240px; }
        #account-menu > * + * { border-inline-start: 1px solid var(--panel-border); }
        #account-menu .popover-head { border-block-end: 0; }
        #account-menu .theme-switch { border-block-end: 0; }
    }

    .popover-nav { display: grid; }
    .popover-nav a {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 20px;
        padding: 16px 28px;
        font-weight: 600;
        font-size: 0.8rem;
        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;
    }
    .popover-nav a:last-child { border-block-end: 0; }
    .popover-nav a:hover { background: var(--panel-hover); color: var(--accent-ink); padding-inline-start: 36px; }
    .popover-nav a[aria-current="page"] { color: var(--accent-ink); }
    .popover-nav a[aria-current="page"]::after { content: "\25CF"; font-size: 0.55em; }

    .popover-head {
        padding: 22px 28px;
        border-block-end: 1px solid var(--panel-border);
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.25em;
        color: var(--panel-muted);
        font-weight: 700;
    }
    .popover-head strong {
        display: block;
        color: var(--panel-text);
        font-size: 0.95rem;
        letter-spacing: 0.02em;
        text-transform: none;
        margin-block-start: 6px;
    }
    .popover-foot a.logout { color: #ff6b6b; color: light-dark(#c62828, #ff6b6b); }
    .popover-foot a.logout:hover { color: #ff8b8b; color: light-dark(#a01f1f, #ff8b8b); }

    /* --------------------------------- THEME SWITCH (segmented radios) -- */
    .theme-switch {
        border: 0;
        padding: 18px 28px 22px;
        border-block-end: 1px solid var(--panel-border);
    }
    .theme-switch legend {
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.25em;
        color: var(--panel-muted);
        padding: 0;
        margin-block-end: 14px;
    }
    .theme-options {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        border: 1px solid var(--panel-border);
    }
    .theme-options label {
        display: grid;
        place-items: center;
        padding: 12px 8px;
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        cursor: pointer;
        transition: background 0.25s, color 0.25s;
    }
    .theme-options label + label { border-inline-start: 1px solid var(--panel-border); }
    .theme-options input { appearance: none; inline-size: 0; block-size: 0; margin: 0; }
    .theme-options label:hover { color: var(--accent-ink); }
    .theme-options label:has(input:checked) { background: var(--accent-lime); color: #000; }
    .theme-options label:has(input:focus-visible) { outline: 2px solid currentColor; outline-offset: -2px; }
}