/* ============================================================================
   kd-mobilenav.css -- the mobile nav drawer toggle + off-canvas panel.

   Structure and behaviour REUSED from core_ui's already-shared, already
   e2e-tested pattern (core_ui/static/core_ui/{js/core-nav.js,css/
   core-nav.css}) -- this file styles the SAME class names/data
   attributes that script drives (.core-nav-toggle, .core-mobilenav*,
   [data-core-nav-js]) with THIS site's own --kd-* tokens instead of
   core_ui's own --theme-* and --core-* tokens. See _site_mobilenav.html's own comment
   for why the behaviour is shared but the visual language is not: this
   site's branding should differ from khouse's; the interaction pattern
   should not.
   ============================================================================ */

/* ============================== NO-JS FALLBACK ================================
 * .kd-nav (kd-sections.css) is display:none below 720px to avoid
 * overflowing the header row -- true whether or not JS ever runs. So
 * without core-nav.js, THIS is what makes primary nav reachable at all:
 * the real .kd-nav links, wrapped instead of hidden. Once JS confirms
 * the drawer works ([data-core-nav-js]), this steps back out of the way
 * -- never both on screen together. Exactly the honesty
 * core_ui/js/quantity-stepper.js already commits to for its own
 * buttons (see core-nav.js's docstring).
 * ========================================================================= */
@media (max-width: 720px) {
    .kd-nav {
        display: flex;
        flex-wrap: wrap;
        gap: var(--kd-s-3) var(--kd-s-5);
        padding-block: var(--kd-s-3) var(--kd-s-4);
    }
    [data-core-nav-js] .kd-nav { display: none; }
}

/* ============================== TOGGLE BUTTON ================================= */
.core-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    /* Explicit, unlike khouse's kd-hamburger (36x36 -- a known, tracked,
       sub-floor defect, see e2e/test_layout_guard_known_defects.py):
       this site has no global button-size reset to lean on, so the
       44px accessible touch-target floor (e2e/layout_guard.py) is set
       here directly rather than repeating that mistake. */
    min-width: 44px;
    min-height: 44px;
    border: var(--kd-border-w) solid var(--kd-border-strong);
    border-radius: var(--kd-radius);
    background: transparent;
    color: var(--kd-fg);
    cursor: pointer;
    transition: background-color var(--kd-dur) var(--kd-ease);
}
.core-nav-toggle:hover { background: var(--kd-bg-alt); }
.core-nav-toggle__icon { position: relative; width: 16px; height: 12px; display: block; }
.core-nav-toggle__icon::before,
.core-nav-toggle__icon::after,
.core-nav-toggle__icon span {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: currentColor;
    transition: transform var(--kd-dur) var(--kd-ease),
                opacity var(--kd-dur) var(--kd-ease),
                top var(--kd-dur) var(--kd-ease);
}
.core-nav-toggle__icon::before { top: 0; }
.core-nav-toggle__icon span    { top: 50%; transform: translateY(-50%); }
.core-nav-toggle__icon::after  { top: 100%; transform: translateY(-100%); }
.core-nav-toggle[aria-expanded="true"] .core-nav-toggle__icon::before {
    top: 50%; transform: translateY(-50%) rotate(45deg);
}
.core-nav-toggle[aria-expanded="true"] .core-nav-toggle__icon span { opacity: 0; }
.core-nav-toggle[aria-expanded="true"] .core-nav-toggle__icon::after {
    top: 50%; transform: translateY(-50%) rotate(-45deg);
}
/* Stays display:none until core-nav.js's readiness marker lands -- a
 * hamburger that opens nothing for a script-blocked visitor is exactly
 * the "dead toggle" this drawer must never ship. */
@media (max-width: 720px) { [data-core-nav-js] .core-nav-toggle { display: inline-flex; } }

/* ============================== DRAWER PANEL =================================== */
.core-mobilenav { position: fixed; inset: 0; z-index: var(--kd-z-modal); pointer-events: none; visibility: hidden; }
.core-mobilenav[aria-hidden="false"] { pointer-events: auto; visibility: visible; }
.core-mobilenav__scrim {
    position: absolute;
    inset: 0;
    background: rgba(10, 12, 16, 0.55);
    opacity: 0;
    transition: opacity var(--kd-dur) var(--kd-ease);
    border: 0;
    padding: 0;
    cursor: pointer;
}
.core-mobilenav[aria-hidden="false"] .core-mobilenav__scrim { opacity: 1; }
.core-mobilenav__panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100vh;
    height: 100dvh;
    width: min(86vw, 360px);
    background: var(--kd-bg);
    border-left: var(--kd-border-w) solid var(--kd-border);
    box-shadow: var(--kd-shadow-2);
    transform: translateX(100%);
    transition: transform var(--kd-dur-slow) var(--kd-ease);
    display: flex;
    flex-direction: column;
}
.core-mobilenav[aria-hidden="false"] .core-mobilenav__panel { transform: translateX(0); }
.core-mobilenav__panel:focus { outline: none; }
.core-mobilenav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--kd-s-4) var(--kd-s-5);
    border-bottom: var(--kd-border-w) solid var(--kd-border);
    flex: 0 0 auto;
}
.core-mobilenav__brand {
    font-weight: var(--kd-w-semi);
    font-size: var(--kd-text-4);
    letter-spacing: var(--kd-track-snug);
    color: var(--kd-fg);
    text-decoration: none;
}
.core-mobilenav__close {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: var(--kd-border-w) solid var(--kd-border);
    border-radius: var(--kd-radius);
    background: transparent;
    color: var(--kd-fg);
    cursor: pointer;
    font-size: var(--kd-text-6);
    line-height: 1;
}
.core-mobilenav__close:hover { background: var(--kd-bg-alt); }
.core-mobilenav__list {
    list-style: none;
    margin: 0;
    padding: var(--kd-s-4) 0;
    overflow-y: auto;
    flex: 1 1 auto;
}
.core-mobilenav__list a {
    display: block;
    padding: var(--kd-s-4) var(--kd-s-6);
    font-size: var(--kd-text-5);
    font-weight: var(--kd-w-medium);
    color: var(--kd-fg);
    text-decoration: none;
    border-bottom: var(--kd-border-w) solid var(--kd-border);
}
.core-mobilenav__list a:active { background: var(--kd-bg-alt); }
.core-mobilenav__list a[aria-current="page"] { color: var(--kd-accent); }

/* The scroll lock core-nav.js applies while any drawer is open. */
body.core-no-scroll { overflow: hidden; }