:where(.mobile-nav-container) {
    display: none;

    :where(.mobile-nav-icon) {
        border: none;
        background: none;
        padding: 0;

        &:hover {
            cursor: pointer;
        }

        svg {
            width: 3rem;
            height: 3rem;

            & > path {
                fill: var(--color-brand-blue);
            }
        }
    }

    /* Entrance position for the slide-in transition. */
    @starting-style {
        .mobile-menu-dialog[open] {
            right: -100dvw;
        }
    }

    :where(.mobile-menu-dialog) {
        height: 100%;
        max-height: 100dvh;
        right: -100dvw;

        /* Full width of the screen at every size that gets the hamburger. 100% rather than
           100dvw: viewport units count the scrollbar, which would push the panel wider than
           the space actually available. max-width has to be reset too — the UA stylesheet
           caps a dialog at calc(100% - 6px - 2em), which left a 38px gap down the side. */
        width: 100%;
        max-width: 100%;
        margin-block: 0;
        margin-right: 0;
        padding: 0;
        border: none;
        overflow-x: hidden;
        overflow-y: auto;

        /* White behind the logo, easing into brand light blue by the contact details. The last
           stop lands on the panel's bottom edge so it reaches the token's full blue. */
        background: linear-gradient(
            to bottom,
            var(--color-primary-white) 0%,
            var(--color-primary-white) 24%,
            var(--color-brand-blue-tertiary) 100%
        );
        color: var(--color-primary-black);
        transition: right 350ms ease-in-out;

        &[open] {
            right: 0;
        }

        &::backdrop {
            background: rgb(from var(--color-primary-black) r g b / 60%);
        }

        :where(.mobile-nav-wrapper) {
            display: flex;
            flex-flow: column;
            position: relative;

            /* The logo and close button sit a touch lower than the side padding. Held here so
               .mobile-nav-close can share the value and stay level with the logo. */
            --local-padding-block-start: calc(var(--size-medium) + var(--size-xx-small));

            /* Fills a tall panel so the buttons can sit at the bottom, but grows past it when the
               menu is longer than the screen, leaving the dialog to scroll. */
            min-height: 100%;
            padding: var(--local-padding-block-start) var(--size-medium) var(--size-medium);
        }

        :where(.mobile-nav-close) {
            /* Padding rather than a bigger glyph: keeps the X the size the design asks for while
               giving the button a finger-sized target. */
            --local-padding: var(--size-x-small);

            /* Taken out of the flow so the logo's top lines up with the X rather than sitting
               under it. The offsets mirror .mobile-nav-wrapper's padding, less this button's own
               padding, so the glyph lands on the top-right corner of the content. */
            position: absolute;
            top: calc(var(--local-padding-block-start) - var(--local-padding));
            right: calc(var(--size-medium) - var(--local-padding));
            padding: var(--local-padding);
            background: none;
            border: none;
            color: var(--color-primary-black);

            &:hover {
                cursor: pointer;
            }

            svg {
                display: block;

                /* The icon's ink fills its viewBox, so this is the X's visible size. */
                width: 1.8rem;
                height: 1.8rem;
            }

            &:focus-visible {
                outline: 3px solid var(--color-brand-blue);
                outline-offset: 4px;
            }
        }

        /* Sits in the white band above the links, ahead of the gradient. */
        :where(.mobile-nav-logo) {
            margin-block-end: var(--size-medium);

            .logo svg { /* No :where() — logo.css sets a width at this same breakpoint. */
                width: 100%;
                max-width: 20rem;
            }
        }

        :where(.mobile-nav-links) {
            & > ul {
                margin: 0;
                padding: 0;
                list-style: none;
                display: flex;
                flex-flow: column;
            }

            .menu-item { /* No :where() — a WordPress style overrides it when logged in */

                /* Hairline between items only, so the list neither opens nor closes on a rule. */
                &:not(:last-child) {
                    border-bottom: 1px solid var(--color-black-20-percent);
                }

                & > a {
                    display: block;
                    padding-block: var(--size-small);
                    color: var(--color-primary-black);
                    font-size: var(--font-size-body);
                    font-weight: var(--font-weight-bold);
                }
            }
        }

        /* Apply / Donate — red styling comes from the global button system; only layout here. */
        :where(.mobile-nav-buttons) {
            margin-top: auto;
            padding-block-start: var(--size-large);
            display: flex;
            flex-flow: row wrap;
            justify-content: center;
            gap: var(--size-x-small);

            .call-to-action-button {
                /* The global 20rem minimum is sized for a full-width row; these sit two abreast. */
                min-width: 12rem;
            }
        }

        :where(.mobile-nav-contact) {
            padding-block: var(--size-medium);
            display: grid;
            gap: var(--size-small);
            text-align: center;

            /* A step down from the menu labels, and heavier than the light body default, so the
               block reads as a compact footer note. */
            font-size: 1.4rem;
            font-weight: var(--font-weight-medium);
            line-height: var(--line-height-body);

            :where(.mobile-nav-contact-group) {
                margin: 0;

                /* Each address line, phone number and email address gets its own line. */
                :where(.mobile-nav-contact-line) {
                    display: block;
                }

                :where(a) {
                    display: block;
                    color: var(--color-primary-black);
                }
            }
        }
    }
}

/* Beat WordPress' global-styles `a:where(:not(.wp-element-button)){text-decoration:underline}`
   (specificity 0,0,1) — the :where()-wrapped rules above tie and lose on source order. */
.mobile-menu-dialog a {
    text-decoration: none;
}

.mobile-menu-dialog a:not(.call-to-action):hover,
.mobile-menu-dialog a:not(.call-to-action):focus-visible {
    text-decoration: underline;
}

@media screen and (max-width: 1200px) {
    :where(.mobile-nav-container) {
        display: block;
    }
}