/* Mobile navigation -- hamburger toggle for the header nav below 1000px.
   Shared by the home, legal and 404 pages. Loaded as an external stylesheet so
   it stays inside the hardened style-src 'self'. Above 1000px nothing changes:
   the toggle is hidden and .nav renders as the usual inline row.

   This file is linked AFTER each page's inline <style> block (right before
   </head>), so equal-specificity rules here win by source order. */

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -0.4rem -0.55rem -0.4rem 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 4px;
    color: var(--ink);
    cursor: pointer;
}
.nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-toggle .ico-open,
.nav-toggle .ico-close { width: 26px; height: 26px; }
.nav-toggle .ico-close { display: none; }
.site-header.menu-open .nav-toggle .ico-open { display: none; }
.site-header.menu-open .nav-toggle .ico-close { display: inline-flex; }

/* Home only: the header is transparent over the dark hero until scrolled, so
   the toggle icon must be light there -- except while the menu is open, when the
   bar turns solid white (see below) and the icon goes dark again. */
.site-header:not(.scrolled):not(.menu-open) .nav-toggle { color: #fff; }

@media (max-width: 1000px) {
    .nav-toggle { display: inline-flex; }

    /* Collapse the nav row; it reappears as a drop panel only when open. */
    .site-header .nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: #fff;
        border-top: 1px solid var(--line);
        box-shadow: 0 30px 60px rgba(32, 40, 45, 0.12);
        padding: 0.4rem var(--pad) 1.6rem;
    }
    .site-header.menu-open .nav { display: flex; }

    /* Keep a solid bar even on the otherwise transparent home header. */
    .site-header.menu-open { background: #fff; box-shadow: 0 6px 30px rgba(32, 40, 45, 0.07); }
    .site-header.menu-open .wordmark { color: var(--ink); }

    .site-header.menu-open .nav a.nav-link {
        display: block;
        width: 100%;
        padding: 1rem 0;
        border-bottom: 1px solid var(--line);
        font-size: 1.05rem;
        color: var(--ink);
    }
    .site-header.menu-open .nav .lang {
        display: flex;
        padding: 1.1rem 0 0.3rem;
        font-size: 0.95rem;
        color: var(--ink);
    }
    .site-header.menu-open .nav .lang a { color: var(--ink); }
    .site-header.menu-open .nav .btn-sm {
        margin-top: 1.2rem;
        width: 100%;
        text-align: center;
    }
}