/* The phone/tablet navigation drawer.
 * ---------------------------------------------------------------------------
 * The theme opens .header__menu as a fixed panel at `top: 70px` - the header's
 * height before the fraud banner was added to it. The header is ~131px now, so
 * the drawer started 60px underneath it and the profile pill and burger showed
 * through the top of the panel. It also carried four `max-sm:` utilities that
 * only applied below 640px, one of which pinned it to a 26rem height, so it
 * floated as a rounded card that could not scroll and did not reach the bottom
 * of the screen.
 *
 * This reopens it as a proper drawer: below the header, full height, scrollable,
 * opaque, with rows big enough to hit. Direction is left to rtl.css, which
 * already flips which edge it slides from.
 * ------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {

    .header__menu {
        /* Sits under the real header rather than the height it used to be. The
           variable is kept in step by the layout; the fallback is its desktop
           height. */
        top: var(--header-height, 131px);
        bottom: 0;
        height: auto;
        max-height: none;
        /* Left at the theme's 280px on purpose. It slides out by a hardcoded
           281px, so anything wider parks the difference on screen - at 300px a
           19px strip of the drawer sat over the page at all times. max-width
           only ever narrows it, which the 281px still clears. */
        max-width: 86vw;
        padding: 6px 0 calc(20px + env(safe-area-inset-bottom, 0px));
        border-radius: 0;
        background-color: #16151a;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        align-self: stretch;
    }

    /* Dims the page behind the drawer, so the nav is not competing with the
       listing grid for attention.
       Drawn from the body, not the drawer: the drawer carries a transform, and
       a transform makes an element the containing block for its own fixed
       descendants, so a scrim drawn there would have been trapped inside the
       panel. z-index sits under the drawer (99) and the header (101). */
    body::before {
        content: '';
        position: fixed;
        inset: var(--header-height, 131px) 0 0 0;
        background: rgba(0, 0, 0, 0.55);
        z-index: 98;
        opacity: 0;
        visibility: hidden;
        /* Always present so it can fade both ways - appearing and disappearing
           with the class gave it nothing to animate from. visibility is delayed
           on the way out so the fade is not cut short. */
        transition: opacity var(--usr-panel, 260ms) var(--usr-ease, ease),
                    visibility 0s linear var(--usr-panel, 260ms);
    }

    body.drawer-open::before {
        opacity: 1;
        visibility: visible;
        transition: opacity var(--usr-panel, 260ms) var(--usr-ease, ease);
    }

    .header__nav {
        width: 100%;
        gap: 0;
    }

    .header__nav-item {
        width: 100%;
        margin: 0;
    }

    /* The theme gives these a 22px line box and lays them out inline, which on
       a touch screen is a 22px target with 20px of dead space around it. */
    .header__nav-link {
        display: flex;
        align-items: center;
        width: 100%;
        height: auto;
        min-height: 48px;
        padding: 12px 22px;
        font-size: 15px;
        line-height: 22px;
        color: #cfcfd6;
        border-bottom: 1px solid #1f1e25;
    }

    .header__nav-item:last-child .header__nav-link {
        border-bottom: 0;
    }

    .header__nav-link:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.03);
        text-decoration: none;
    }

    /* The theme marks the current page with colour alone. At this size a bar
       along the leading edge is easier to find. */
    .header__nav-link--active {
        color: #fff;
        font-weight: 700;
        background: rgba(97, 100, 255, 0.10);
        box-shadow: inset 3px 0 0 0 #6164ff;
    }

    [dir="rtl"] .header__nav-link--active {
        box-shadow: inset -3px 0 0 0 #6164ff;
    }

    .header__nav-link svg {
        flex: none;
    }

    /* The currency row is a plain <div><a> rather than a nav link, so it needs
       the same shape spelled out. */
    .header__nav-item > div > a {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 48px;
        padding: 12px 22px;
        font-size: 15px;
        color: #cfcfd6;
    }

    .header__nav-item > div > a:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.03);
        text-decoration: none;
    }

    body.drawer-open {
        overflow: hidden;
    }
}