/**
 * Mobile navigation: hamburger drawer + slide-down search panel.
 *
 * Loaded after frontend.css (see enqueue in class-mv-assets.php) so these
 * rules can layer on top without editing the original stylesheet.
 *
 * Deliberately aligned to frontend.css's OWN breakpoints rather than
 * introducing a new one:
 *   - 1100px: your existing "tablet" cutoff, where cart/account text is
 *     already hidden (.mv-hide-sm, .mv-cart-label). Left untouched here.
 *   - 780px: your existing "mobile" cutoff, where the search bar already
 *     wraps to its own row. This is where the hamburger/drawer/search
 *     toggle activate.
 *
 * Both the hamburger and search-toggle buttons live INSIDE the existing
 * .mv-header-actions element (see class-mv-assets.php), not as new
 * top-level children of .mv-app-header — that header uses CSS Grid with
 * grid-template-columns tuned for exactly 3 children (logo, search,
 * actions) at each breakpoint. Keeping the child count at 3 means none of
 * that grid math needs to change.
 */

/* ---------------------------------------------------------------------
 * New buttons: hidden by default (desktop + tablet). Only shown at the
 * 780px mobile breakpoint below.
 * ------------------------------------------------------------------- */
.mv-search-toggle,
.mv-menu-toggle {
    display: none;
    background: none;
    border: none;
    padding: 6px;
    margin: 0;
    cursor: pointer;
    color: #ffffff;
    line-height: 0;
}

.mv-drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1002;
}

.mv-drawer-overlay.is-visible {
    display: block;
    opacity: 1;
    pointer-events: auto;
}

.mv-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(300px, 85vw);
    background: #ffffff;
    color: #121212;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    /* Above .mv-mobile-cart-bar (1001) and .mv-app-header (1000). */
    z-index: 1003;
    overflow-y: auto;
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.25);
}

.mv-drawer.is-open {
    transform: translateX(0);
}

/* Cart drawer: same pattern as the nav drawer, mirrored to slide in from
   the right instead of the left. */
.mv-cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(380px, 88vw);
    background: #ffffff;
    color: #121212;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 1003;
    overflow-y: auto;
    box-shadow: -2px 0 16px rgba(0, 0, 0, 0.25);
}

.mv-cart-drawer.is-open {
    transform: translateX(0);
}

.mv-cart-drawer-body {
    padding: 18px;
}

/* .mv-cart-panel h3 in your frontend.css only targets that specific
   ancestor class; restoring the same spacing here since this drawer uses
   its own wrapper. */
.mv-cart-drawer-body h3 {
    margin: 0 0 14px;
}

.mv-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 2px solid #d4a017;
}

.mv-drawer-logo img {
    height: 36px;
    width: auto;
    display: block;
}

.mv-drawer-close {
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    color: #121212;
}

.mv-drawer-nav {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}

.mv-drawer-nav li a {
    display: block;
    padding: 14px 20px;
    text-decoration: none;
    color: #121212;
    font-weight: 700;
    border-bottom: 1px solid rgba(18, 18, 18, 0.08);
}

.mv-drawer-nav li a:active,
.mv-drawer-nav li a:focus-visible {
    background: #fff8e6;
}

.mv-drawer-divider {
    height: 1px;
    background: rgba(18, 18, 18, 0.1);
    margin: 8px 0;
}

.mv-drawer-logout {
    color: #980000 !important;
}

body.mv-scroll-locked {
    overflow: hidden;
}

/* ---------------------------------------------------------------------
 * Mobile (≤780px) — matches your existing MOBILE breakpoint exactly
 * ------------------------------------------------------------------- */
@media (max-width: 780px) {
    .mv-search-toggle,
    .mv-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* The hamburger's 3 bars must stack vertically — flexbox defaults to
       row direction, which was collapsing them into one flat line. */
    .mv-menu-toggle {
        flex-direction: column;
    }

    /* Classic three-bar hamburger, drawn in CSS — no icon font/image
       asset required. */
    .mv-hamburger-bar {
        display: block;
        width: 20px;
        height: 2px;
        background: currentColor;
        margin: 4px 0;
        border-radius: 1px;
    }

    /* On mobile only, the account icon moves entirely into the drawer
       (My Account / Delivery Address / Orders / Logout are all there) so
       the header itself only shows search, cart, and menu icons — your
       existing ≤1100px rule already hides the "Account"/"Login" text
       label; this goes a step further and hides the icon link too. */
    .mv-account-link {
        display: none !important;
    }

    /* Collapse the search bar by default; JS toggles the .is-open class.
       Your existing ≤780px rule already places it in its own full-width
       row (grid-column: 1 / -1; grid-row: 2) — that's kept, this just
       adds a show/hide switch on top of it. */
    .mv-search {
        display: none;
    }

    .mv-search.is-open {
        display: block;
    }

    /* Match the cart icon to the plain search/hamburger icon style on
       mobile — your .mv-cart-link normally has its own pill background
       and border (nice as a CTA on desktop/tablet), which reads as an
       odd "glowing" icon once it's reduced to icon-only on mobile. */
    /* The bottom tab bar (bottom-nav.css) now has its own Cart tab, so
       the header's cart icon is redundant on mobile — hidden here to
       free up header space and avoid two entry points to the same
       drawer. (The styling below is now moot since it's hidden, but
       left in place in case you ever want to bring it back.) */
    .mv-cart-link {
        background: none;
        border: none;
        border-radius: 0;
        color: #ffffff;
        min-height: auto;
        padding: 6px;
        display: none !important;
    }
}