/* Mobilmenuen skal altid ligge som et solidt, klikbart lag over sideindholdet. */
@media (max-width: 900px) {
    .site-header {
        position: relative;
        z-index: 80;
        isolation: isolate;
    }

    .header-inner {
        position: relative;
    }

    .mobile-nav {
        position: relative;
        z-index: 90;
    }

    .mobile-nav[open] {
        z-index: 100;
    }

    .mobile-nav summary {
        position: relative;
        z-index: 2;
        min-height: 44px;
        display: flex;
        align-items: center;
        color: var(--ink);
        background: var(--paper, #fff);
        touch-action: manipulation;
    }

    .mobile-nav nav {
        position: absolute;
        z-index: 110;
        isolation: isolate;
        top: calc(100% + 3px);
        right: 0;
        width: min(300px, calc(100vw - 28px));
        max-height: calc(100vh - 100px);
        max-height: calc(100dvh - 100px);
        padding: 12px;
        overflow-y: auto;
        overscroll-behavior: contain;
        color: var(--ink);
        background: var(--paper, #fff);
        border: 1px solid var(--line);
        box-shadow: 0 18px 45px rgb(0 0 0 / 55%);
        opacity: 1;
        pointer-events: auto;
    }

    .mobile-nav nav::before {
        position: absolute;
        z-index: -1;
        inset: 0;
        background: inherit;
        content: "";
    }

    .mobile-nav li,
    .mobile-nav a {
        position: relative;
        z-index: 1;
    }

    .mobile-nav a {
        min-height: 44px;
        display: flex;
        align-items: center;
        touch-action: manipulation;
        pointer-events: auto;
    }

    .backstage .mobile-nav summary,
    .backstage .mobile-nav nav {
        color: var(--backstage-ink);
        background: var(--backstage-bg);
    }
}