/* =============================================================================
   Mobile navigation drawer.

   The primary navigation lives in .wiki-sidebar, which collapses (display:none) below 1180px. Without
   this file the whole site is unreachable on phones/tablets. Here we add a
   hamburger toggle in the masthead that slides the sidebar in as an overlay
   drawer, with a backdrop and focus handling.

   Loaded LAST on purpose so it overrides the responsive.css `display:none` on
   the sidebar and the metin2 skin chrome.
   ============================================================================= */

/* --- Hamburger toggle (hidden on desktop, shown once the sidebar collapses) */
.wiki-nav-toggle {
    display: none;
    position: absolute;
    top: 50%;
    left: 12px;
    z-index: 5;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--m2-gold, #fece58);
    border-radius: 7px;
    background: #2a1606;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background 140ms ease, border-color 140ms ease;
}

.wiki-nav-toggle:hover,
.wiki-nav-toggle:focus-visible {
    border-color: #fff1c3;
    background: #3a2009;
    outline: none;
}

.wiki-nav-toggle__bars,
.wiki-nav-toggle__bars::before,
.wiki-nav-toggle__bars::after {
    position: absolute;
    left: 50%;
    width: 22px;
    height: 2px;
    margin-left: -11px;
    border-radius: 2px;
    background: var(--m2-parchment, #f0d9a2);
    content: "";
    transition: transform 220ms ease, opacity 160ms ease, background 160ms ease;
}

.wiki-nav-toggle__bars {
    top: 50%;
    margin-top: -1px;
}

.wiki-nav-toggle__bars::before {
    top: -7px;
}

.wiki-nav-toggle__bars::after {
    top: 7px;
}

/* Hamburger morphs into an X while the drawer is open. */
.nav-open .wiki-nav-toggle__bars {
    background: transparent;
}

.nav-open .wiki-nav-toggle__bars::before {
    transform: translateY(7px) rotate(45deg);
}

.nav-open .wiki-nav-toggle__bars::after {
    transform: translateY(-7px) rotate(-45deg);
}

/* --- Backdrop behind the drawer ----------------------------------------- */
.wiki-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 260ms ease, visibility 260ms ease;
}

/* --- Drawer behaviour below the sidebar breakpoint ---------------------- */
@media (max-width: 1180px) {
    .wiki-nav-toggle {
        display: inline-flex;
    }

    /* Keep the masthead (and the toggle inside it) above the drawer so the
       hamburger stays tappable to close the menu. */
    .wiki-portal-shell .wiki-masthead {
        z-index: 1600;
    }

    /* Logo shifts right to clear the toggle. */
    .wiki-portal-shell .wiki-logo {
        padding-left: 64px;
    }

    /* Turn the collapsed sidebar into a slide-in drawer. */
    .wiki-portal-shell .wiki-sidebar {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1400;
        width: min(86vw, 320px);
        height: 100%;
        max-height: 100%;
        margin: 0;
        padding: 84px 16px 28px;
        overflow-y: auto;
        background: var(--m2-dark, #1f0e02);
        border-right: 2px solid var(--m2-gold, #fece58);
        box-shadow: 6px 0 26px rgba(0, 0, 0, 0.6);
        transform: translateX(-104%);
        visibility: hidden;
        /* Flip visibility instantly (0s) — delayed to the end on close so the
           drawer stays rendered while it slides out. Animating `transform` to a
           matrix (translateX(0)) rather than the `none` keyword keeps the slide
           interpolable across browsers. */
        transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 280ms;
        overscroll-behavior: contain;
    }

    .wiki-portal-shell.nav-open .wiki-sidebar {
        transform: translateX(0);
        visibility: visible;
        transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
    }

    .wiki-portal-shell .wiki-sidebar .wiki-side-panel {
        width: 100%;
        margin: 0 0 14px;
    }

    .nav-open .wiki-nav-backdrop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Lock the page behind the drawer. */
    .nav-open {
        overflow: hidden;
    }
}

@media (max-width: 860px) {
    /* Masthead grows to a two-row, 126px bar; pin the toggle to the logo row. */
    .wiki-nav-toggle {
        top: 35px;
        left: 10px;
    }

    .wiki-portal-shell .wiki-logo {
        padding-left: 58px;
    }

    .wiki-portal-shell .wiki-sidebar {
        padding-top: 138px;
    }
}

/* Honour reduced-motion: no slide, just appear. */
@media (prefers-reduced-motion: reduce) {
    .wiki-portal-shell .wiki-sidebar,
    .wiki-nav-backdrop,
    .wiki-nav-toggle__bars,
    .wiki-nav-toggle__bars::before,
    .wiki-nav-toggle__bars::after {
        transition: none;
    }
}