/* Page frame: container, site header, footer, content grid. */

@layer layout {
    .container {
        inline-size: 100%;
        max-inline-size: var(--container);
        margin-inline: auto;
        padding-inline: var(--gutter);
    }

    .skip-link {
        position: absolute;
        inset-inline-start: var(--space-4);
        inset-block-start: -10rem;
        z-index: 100;
        padding: var(--space-2) var(--space-4);
        background: var(--surface);
        border-radius: var(--radius-sm);
        box-shadow: var(--shadow);
    }
    .skip-link:focus { inset-block-start: var(--space-3); }

    /* Header: logo, menus, actions on the right. Phones (< 60rem): the nav is a drawer under the header. */
    .site-header {
        position: sticky;
        inset-block-start: 0;
        z-index: 40;
        border-block-end: 1px solid var(--line);
    }
    /* The blur sits on a pseudo-element: backdrop-filter on the header itself would trap the fixed drawer inside it */
    .site-header::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: color-mix(in srgb, var(--surface) 88%, transparent);
        backdrop-filter: saturate(1.4) blur(10px);
    }
    .site-header__inner {
        position: relative;
        display: flex;
        align-items: center;
        gap: var(--space-4);
        min-block-size: var(--header-h);
    }
    .site-logo {
        display: inline-flex;
        align-items: center;
        color: var(--ink);
        text-decoration: none;
        flex: none;
    }
    .site-logo svg { block-size: 28px; inline-size: auto; }
    .site-logo .logo--full { display: none; }
    @media (width >= 22rem) {
        .site-logo .logo--full { display: block; }
        .site-logo .logo--mark { display: none; }
    }

    .header-actions { display: flex; align-items: center; gap: var(--space-1); margin-inline-start: auto; }
    .icon-btn {
        display: grid;
        place-items: center;
        inline-size: 2.5rem;
        block-size: 2.5rem;
        border-radius: var(--radius-pill);
        color: var(--ink-2);
        transition: background var(--dur), color var(--dur);
    }
    .icon-btn:hover { background: var(--surface-3); color: var(--ink); }
    .icon-btn .icon { inline-size: 1.25rem; block-size: 1.25rem; }

    /* Theme switch shows the theme it switches to; the menu button shows a cross while open */
    .theme-toggle .icon:last-child, :root[data-theme="dark"] .theme-toggle .icon:first-child { display: none; }
    :root[data-theme="dark"] .theme-toggle .icon:last-child { display: block; }
    .nav-toggle .icon:last-child, .nav-toggle[aria-expanded="true"] .icon:first-child { display: none; }
    .nav-toggle[aria-expanded="true"] .icon:last-child { display: block; }

    .nav__trigger {
        display: flex;
        align-items: center;
        gap: var(--space-1);
        color: var(--ink-2);
        font-weight: 600;
        transition: background var(--dur), color var(--dur);
    }
    .nav__trigger .icon { inline-size: 1rem; block-size: 1rem; color: var(--muted); transition: rotate var(--dur) var(--ease); }
    .nav__trigger[aria-expanded="true"] { color: var(--ink); }
    .nav__trigger[aria-expanded="true"] .icon { rotate: 180deg; }

    .flyout__label {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        margin-block-end: var(--space-2);
        padding-inline: var(--space-3);
        color: var(--muted);
        font-size: .75rem;
        font-weight: 650;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    /* Menu entry: icon tile + title + one line of detail */
    .menu-link {
        display: flex;
        align-items: flex-start;
        gap: var(--space-3);
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius);
        color: var(--ink);
        text-decoration: none;
        transition: background var(--dur);
    }
    .menu-link:hover, .menu-link:focus-visible { background: var(--surface); }
    .menu-link__icon {
        display: grid;
        place-items: center;
        inline-size: 2.25rem;
        block-size: 2.25rem;
        flex: none;
        border-radius: 10px;
        background: var(--brand-tint);
        color: var(--brand);
        transition: background var(--dur), color var(--dur);
    }
    .menu-link:hover .menu-link__icon { background: var(--brand); color: var(--on-brand); }
    .menu-link__icon .icon { inline-size: 1.15rem; block-size: 1.15rem; }
    .menu-link__text { display: grid; gap: 1px; min-inline-size: 0; }
    .menu-link strong { font-size: var(--step--1); font-weight: 600; line-height: 1.3; }
    .menu-link small { display: -webkit-box; overflow: hidden; color: var(--muted); font-size: .8125rem; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    .flyout--categories .menu-link small { -webkit-line-clamp: 1; }
    .menu-list, .menu-grid { display: grid; gap: 2px; }

    .trend-list { display: grid; gap: 2px; }
    .trend-list a { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; }
    .trend-list a:hover { background: var(--surface-2); }
    .trend-list__text { display: grid; min-inline-size: 0; }
    .trend-list strong { overflow: hidden; font-size: var(--step--1); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
    .trend-list small { color: var(--muted); font-size: .8125rem; font-variant-numeric: tabular-nums; }

    .trust-card {
        display: grid;
        align-content: start;
        gap: var(--space-2);
        padding: var(--space-5);
        border-radius: var(--radius);
        background: var(--brand-tint);
        color: var(--ink-2);
        font-size: var(--step--1);
    }
    .trust-card__icon { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 12px; background: var(--brand); color: var(--on-brand); margin-block-end: var(--space-1); }
    .trust-card__icon .icon { inline-size: 1.3rem; block-size: 1.3rem; }
    .trust-card strong { color: var(--ink); font-size: var(--step-0); }
    .trust-card a, .flyout__foot a { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--brand); font-weight: 600; text-decoration: none; }
    .trust-card a:hover, .flyout__foot a:hover { text-decoration: underline; }
    .trust-card a .icon, .flyout__foot a .icon { inline-size: 1rem; block-size: 1rem; }

    .flyout__foot { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); padding: var(--space-4) var(--space-3) 0; margin-block-start: var(--space-3); border-block-start: 1px solid var(--line); font-size: var(--step--1); }

    /* Phones and tablets: drawer */
    @media (width < 60rem) {
        .nav {
            position: fixed;
            inset: var(--header-h) 0 0;
            z-index: 39;
            overflow-y: auto;
            overscroll-behavior: contain;
            padding: var(--space-2) var(--gutter) var(--space-7);
            background: var(--bg);
            visibility: hidden;
            opacity: 0;
            translate: 0 -.5rem;
            transition: opacity var(--dur), translate var(--dur) var(--ease), visibility 0s var(--dur);
        }
        .nav.is-open { visibility: visible; opacity: 1; translate: 0; transition-delay: 0s; }
        .nav__item { border-block-end: 1px solid var(--line); }
        .nav__trigger { justify-content: space-between; inline-size: 100%; padding-block: var(--space-4); font-size: var(--step-1); }
        .flyout { display: none; gap: var(--space-5); padding-block: 0 var(--space-5); }
        .nav__trigger[aria-expanded="true"] + .flyout { display: grid; }
        .flyout__label, .menu-link, .trend-list a { padding-inline: 0; }
        .menu-link:hover, .menu-link:focus-visible { background: none; }
        .flyout__col--panel { padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--surface); }
        .flyout__foot { padding-inline: 0; }
        .menu-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
        /* Without JS the menu cannot open: show the sections in the page flow instead */
        html:not(.js) .nav { position: static; visibility: visible; opacity: 1; translate: 0; order: 9; flex-basis: 100%; padding: 0; background: none; }
        html:not(.js) .nav-toggle { display: none; }
    }
    html:not(.js) .site-header__inner { flex-wrap: wrap; }
    @media (width < 60rem) { html.has-drawer { overflow: hidden; } }

    /* Desktop: menus in the bar, panels drop down under the header */
    @media (width >= 60rem) {
        .nav-toggle { display: none; }
        .nav { margin-inline-start: var(--space-4); }
        .nav__list { display: flex; gap: var(--space-1); }
        .nav__trigger { padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill); font-size: var(--step--1); }
        .nav__trigger:hover, .nav__trigger[aria-expanded="true"] { background: var(--surface-3); color: var(--ink); }
        .nav__item { position: relative; }
        .nav__item--wide { position: static; }
        .flyout {
            position: absolute;
            inset-block-start: calc(100% + 1px);
            inset-inline-start: var(--gutter);
            display: grid;
            gap: var(--space-4);
            padding: var(--space-4);
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            background: var(--surface-2);
            box-shadow: var(--shadow-lg);
            visibility: hidden;
            opacity: 0;
            translate: 0 -.375rem;
            transition: opacity var(--dur), translate var(--dur) var(--ease), visibility 0s var(--dur);
        }
        /* Invisible bridge over the gap, so moving the pointer from the trigger to the panel keeps it open */
        .flyout::before { content: ""; position: absolute; inset: -.75rem 0 100%; }
        .nav__trigger[aria-expanded="true"] + .flyout { visibility: visible; opacity: 1; translate: 0; transition-delay: 0s; }
        html:not(.js) .nav__item:is(:hover, :focus-within) > .flyout { visibility: visible; opacity: 1; translate: 0; transition-delay: 0s; }

        .flyout--categories { inset-inline-end: var(--gutter); display: block; }
        .flyout--categories .menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .flyout--resources { inline-size: min(100% - 2 * var(--gutter), 60rem); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
        .flyout__col { padding-block: var(--space-2); }
        .flyout__col--panel { border-radius: var(--radius); background: var(--surface); }
        .flyout--about { inline-size: min(100% - 2 * var(--gutter), 46rem); grid-template-columns: minmax(0, 1fr) 15rem; }
        .flyout--about .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    /* Sidebar (desktop) + main column */
    .site-main { flex: 1; padding-block: var(--space-4) var(--space-7); }

    .page-grid {
        display: grid;
        gap: var(--space-6);
        align-items: start;
        margin-block-start: var(--space-4);
    }
    .page-grid > * { min-inline-size: 0; }
    .sidebar { display: none; }

    @media (width >= 64rem) {
        .page-grid { grid-template-columns: var(--sidebar) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); }
        .sidebar { display: grid; gap: var(--space-4); }
        /* The sidebar comes after the main column in the HTML (status/page.php) but shows on the left. */
        .page-grid > .sidebar { grid-column: 1; grid-row: 1; }
        .page-grid > .main { grid-column: 2; grid-row: 1; }
    }

    /* Vertical rhythm of the main column */
    .stack { display: grid; gap: var(--space-5); }
    .stack > * { min-inline-size: 0; }

    /* Footer: brand column and link columns, then a bar with the theme switch, country picker and copyright */
    .site-footer {
        border-block-start: 1px solid var(--line);
        background: var(--surface);
        padding-block: var(--space-7) var(--space-5);
        font-size: var(--step--1);
    }
    .site-footer__grid {
        display: grid;
        gap: var(--space-6) var(--space-5);
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .site-footer__brand { grid-column: 1 / -1; display: grid; justify-items: start; align-content: start; gap: var(--space-3); }
    .site-footer__logo { display: inline-flex; color: var(--ink); }
    .site-footer__logo svg { block-size: 28px; inline-size: auto; }
    .site-footer__brand p { color: var(--muted); max-inline-size: 30ch; }
    .site-footer__live {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        margin-block-start: var(--space-2);
        padding: .4rem .85rem;
        border: 1px solid var(--line-strong);
        border-radius: var(--radius-pill);
        background: var(--bg);
        color: var(--ink-2);
        font-weight: 500;
        text-decoration: none;
        transition: border-color var(--dur), color var(--dur);
    }
    .site-footer__live:hover { border-color: var(--brand); color: var(--ink); }
    .site-footer__col h2 { font-size: var(--step--1); font-weight: 500; color: var(--muted); margin-block-end: var(--space-4); }
    .site-footer__col ul { display: grid; gap: var(--space-3); }
    .site-footer__col a { color: var(--ink-2); font-weight: 500; text-decoration: none; transition: color var(--dur); }
    .site-footer__col a:hover { color: var(--brand); }
    .site-footer__col--wide { grid-column: 1 / -1; }
    .site-footer__col--wide ul { display: block; columns: 2; column-gap: var(--space-5); }
    .site-footer__col--wide li { break-inside: avoid; margin-block-end: var(--space-3); }

    @media (width >= 40rem) {
        .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .site-footer__col--wide { grid-column: span 3; }
        .site-footer__col--wide ul { columns: 3; }
    }
    @media (width >= 64rem) {
        .site-footer__grid { grid-template-columns: minmax(14rem, 1.4fr); grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; }
        .site-footer__brand { grid-column: auto; }
        .site-footer__col--wide { grid-column: span 2; }
        .site-footer__col--wide ul { columns: 2; }
    }

    .site-footer__bar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-3) var(--space-4);
        margin-block-start: var(--space-7);
        padding-block-start: var(--space-5);
        border-block-start: 1px solid var(--line);
    }
    .site-footer__legal { color: var(--muted); margin-inline-start: auto; }

    /* Light / dark / system: a segmented control, the active choice on a raised chip */
    .theme-switch {
        display: inline-flex;
        gap: 2px;
        padding: 3px;
        border: 1px solid var(--line);
        border-radius: var(--radius-pill);
        background: var(--bg);
    }
    .theme-switch button {
        display: grid;
        place-items: center;
        inline-size: 2rem;
        block-size: 2rem;
        border-radius: var(--radius-pill);
        color: var(--muted);
        transition: background var(--dur), color var(--dur);
    }
    .theme-switch button:hover { color: var(--ink); }
    .theme-switch button[aria-pressed="true"] { background: var(--surface-3); color: var(--ink); }
    .theme-switch .icon { inline-size: 1.05rem; block-size: 1.05rem; }

    /* Country picker: sister sites, opens upwards */
    .country-picker { position: relative; }
    .country-picker summary {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        min-block-size: 2.5rem;
        padding-inline: var(--space-3);
        border-radius: var(--radius-pill);
        color: var(--ink-2);
        font-weight: 500;
        cursor: pointer;
        list-style: none;
        transition: background var(--dur), color var(--dur);
    }
    .country-picker summary::-webkit-details-marker { display: none; }
    .country-picker summary:hover { background: var(--surface-3); color: var(--ink); }
    .country-picker .icon { inline-size: 1rem; block-size: 1rem; }
    .country-picker summary .icon:last-child { color: var(--muted); rotate: 180deg; transition: rotate var(--dur); }
    .country-picker[open] summary .icon:last-child { rotate: 0deg; }
    .country-picker ul {
        position: absolute;
        inset-block-end: calc(100% + var(--space-2));
        inset-inline-start: 0;
        z-index: 20;
        display: grid;
        inline-size: max-content;
        min-inline-size: 15rem;
        max-block-size: min(70vh, 30rem);
        overflow-y: auto;
        padding: var(--space-2);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--surface-2);
        box-shadow: var(--shadow-lg);
    }
    .country-picker li a {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--space-4);
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-sm);
        color: var(--ink-2);
        text-decoration: none;
    }
    .country-picker li a:hover { background: var(--surface); color: var(--ink); }
    .country-picker li a[aria-current] { color: var(--brand); font-weight: 600; }
    .country-picker small { color: var(--muted); font-size: .75rem; font-weight: 400; }
}