/**
 * Mobile off-canvas nav drawer + bottom tab bar (template-parts/mobile-nav.php).
 * Enqueued site-wide (present in the footer on every page, same as the
 * mega menu / mini-cart) but only visually active below the 900px
 * breakpoint already used consistently across every other stylesheet.
 */

.orevea-header__hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.orevea-header__hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--orevea-ink);
    border-radius: 2px;
}

/* Drawer — slides from the left (cart drawer slides from the right;
   keeping them on opposite sides avoids any ambiguity about which is
   which when a user has triggered both in quick succession). */
.orevea-mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 110;
    visibility: hidden;
    pointer-events: none;
}

.orevea-mobile-nav.is-open {
    visibility: visible;
    pointer-events: auto;
}

.orevea-mobile-nav__overlay {
    position: absolute;
    inset: 0;
    background: rgba(58, 36, 32, .45);
    opacity: 0;
    transition: opacity .25s ease;
}

.orevea-mobile-nav.is-open .orevea-mobile-nav__overlay {
    opacity: 1;
}

.orevea-mobile-nav__panel {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 320px;
    max-width: 85vw;
    background: var(--orevea-white);
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.16, 1, .3, 1);
    box-shadow: 12px 0 32px rgba(58, 36, 32, .18);
}

.orevea-mobile-nav.is-open .orevea-mobile-nav__panel {
    transform: translateX(0);
}

.orevea-mobile-nav__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(58, 36, 32, .08);
    font-family: var(--orevea-font-display);
    font-size: 16px;
}

.orevea-mobile-nav__close {
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--orevea-ink);
    padding: 4px;
}

.orevea-mobile-nav__body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 20px 24px;
}

/* Category accordion — native <details>/<summary>, zero JS. */
.orevea-mobile-nav__categories {
    list-style: none;
    margin: 0;
    padding: 0;
}

.orevea-mobile-nav__categories > li {
    border-bottom: 1px solid rgba(58, 36, 32, .06);
}

.orevea-mobile-nav__categories summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 0;
    cursor: pointer;
    list-style: none;
    font-size: 14px;
    font-weight: 600;
}

.orevea-mobile-nav__categories summary::-webkit-details-marker {
    display: none;
}

.orevea-mobile-nav__categories summary a {
    color: var(--orevea-ink);
}

.orevea-mobile-nav__chevron {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid var(--orevea-taupe);
    border-bottom: 1.5px solid var(--orevea-taupe);
    transform: rotate(45deg);
    transition: transform .2s ease;
    flex: none;
}

.orevea-mobile-nav__categories details[open] .orevea-mobile-nav__chevron {
    transform: rotate(-135deg);
}

.orevea-mobile-nav__toplink {
    display: block;
    padding: 13px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--orevea-ink);
}

.orevea-mobile-nav__subcategories {
    list-style: none;
    margin: 0 0 12px;
    padding: 0 0 0 4px;
}

.orevea-mobile-nav__subcategories li {
    margin-bottom: 4px;
}

.orevea-mobile-nav__subcategories a {
    display: block;
    padding: 8px 0;
    font-size: 13px;
    color: var(--orevea-taupe);
}

.orevea-mobile-nav__subcategories a:hover {
    color: var(--orevea-burgundy);
}

.orevea-mobile-nav__account {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(58, 36, 32, .08);
}

.orevea-mobile-nav__account a {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--orevea-ink);
}

/* Bottom tab bar */
.orevea-mobile-tabbar {
    display: none;
}

.orevea-mobile-tabbar__item {
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 10px;
    color: var(--orevea-taupe);
    text-decoration: none;
    cursor: pointer;
    flex: 1;
    padding: 6px 0;
}

.orevea-mobile-tabbar__icon {
    position: relative;
    font-size: 18px;
    line-height: 1;
}

.orevea-mobile-tabbar__icon .orevea-header__cart-count {
    position: absolute;
    top: -6px;
    right: -10px;
    min-width: 15px;
    height: 15px;
    font-size: 9px;
}

body.orevea-mobile-nav-open {
    overflow: hidden;
}

@media (max-width: 900px) {
    .orevea-header__hamburger {
        display: flex;
    }

    /* Real layout bug found via live check: with .orevea-header__actions
       (Mon compte / Panier text links) still visible, the header row had
       four separate items (hamburger, logo, actions, search) fighting for
       space and wrapped onto disorganized separate lines. The bottom tab
       bar (below) already provides real, working Mon compte/Panier access
       on these widths — hiding the header's copies removes the clutter
       instead of trying to cram both into a working layout. */
    .orevea-header__actions {
        display: none;
    }

    .orevea-header__row--main {
        flex-wrap: wrap;
        gap: 12px 16px;
    }

    /* Logo gets an extra, smaller cap specifically on mobile — the general
       64px rule in base.css is still too large next to a 32px hamburger
       button on a narrow row. */
    .orevea-header__logo img {
        max-height: 36px;
    }

    .orevea-header__search {
        order: 3;
        flex: 1 1 100%;
    }

    .orevea-mobile-tabbar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 90;
        background: var(--orevea-white);
        border-top: 1px solid rgba(58, 36, 32, .08);
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    }

    /* Room for the fixed tab bar so it doesn't cover the footer. */
    .orevea-footer {
        margin-bottom: 56px;
    }
}