/*
================================================

Space Vanta Theme 1.0

Module:
Header

Component:
Mobile Menu Drawer

File:
public/header/mobile-menu.css

Version:
HEADER-MOBILE-DRAWER-001

Purpose:
Mobile Navigation Drawer Presentation

Responsibilities:
- Drawer positioning
- Drawer visibility
- Drawer dimensions
- Drawer layering
- Drawer background
- Drawer header
- Level 1 navigation
- Level 2 navigation
- Level 3 navigation
- Native details disclosure states
- Mobile responsive behavior

Does NOT handle:
- Desktop Navigation
- Header grid structure
- Header scroll behavior
- Find Cube
- Vision Aperture
- Asset loading
- JavaScript interactions

================================================
*/


/* =================================================
   MOBILE DRAWER
   ================================================= */

@media (max-width: 767px) {

    /*
    -------------------------------------------------
    DRAWER HOST
    -------------------------------------------------
    */

    .sv-header__mobile-main .sv-mobile-menu {

        position:
            relative;

        display:
            block;

        margin:
            0;

        z-index:
            901;

    }


    /*
    -------------------------------------------------
    DRAWER POSITION
    -------------------------------------------------
    */

    .sv-header__mobile-main .sv-mobile-menu__drawer {

        position:
            absolute;

        top:
            calc(100% + 12px);

        left:
            0;

        z-index:
            900;

        display:
            none;

        width:
            min(88vw, 360px);

        max-width:
            calc(100vw - 24px);

        max-height:
            calc(100dvh - 140px);

        overflow-x:
            hidden;

        overflow-y:
            auto;

        box-sizing:
            border-box;

        padding:
            0;

        margin:
            0;

        overscroll-behavior:
            contain;

        -webkit-overflow-scrolling:
            touch;

    }


    /*
    -------------------------------------------------
    DRAWER OPEN STATE
    -------------------------------------------------
    */

    .sv-header__mobile-main .sv-mobile-menu[open]>.sv-mobile-menu__drawer {

        display:
            block;

    }


    /*
    -------------------------------------------------
    DRAWER HEADER
    -------------------------------------------------
    */

    .sv-mobile-menu__drawer-header {

        position:
            relative;

        display:
            flex;

        align-items:
            center;

        justify-content:
            space-between;

        box-sizing:
            border-box;

        width:
            100%;

        min-height:
            56px;

        padding:
            16px 20px;

    }


    /*
    -------------------------------------------------
    DRAWER BRAND
    -------------------------------------------------
    */

    .sv-mobile-menu__drawer-title {

        display:
            block;

        margin:
            0;

        font-size:
            11px;

        font-weight:
            600;

        line-height:
            1.4;

        letter-spacing:
            .22em;

        text-transform:
            uppercase;

    }


    /*
    -------------------------------------------------
    NAVIGATION RESET
    -------------------------------------------------
    */

    .sv-mobile-menu__drawer nav {

        display:
            block;

        width:
            100%;

        margin:
            0;

        padding:
            0;

        box-sizing:
            border-box;

    }


    .sv-mobile-menu__drawer ul {

        display:
            block;

        width:
            100%;

        margin:
            0;

        padding:
            0;

        list-style:
            none;

        box-sizing:
            border-box;

    }


    .sv-mobile-menu__drawer li {

        display:
            block;

        width:
            100%;

        margin:
            0;

        padding:
            0;

        list-style:
            none;

        box-sizing:
            border-box;

    }


    /*
    -------------------------------------------------
    LEVEL 1
    -------------------------------------------------
    */

    .sv-mobile-menu__drawer nav>ul>li {

        position:
            relative;

        border-top:
            1px solid rgba(170, 180, 190, .16);

    }


    .sv-mobile-menu__drawer nav>ul>li>a,
    .sv-mobile-menu__drawer nav>ul>li>span,
    .sv-mobile-menu__drawer nav>ul>li>details>summary {

        display:
            flex;

        align-items:
            center;

        justify-content:
            space-between;

        width:
            100%;

        min-height:
            52px;

        margin:
            0;

        padding:
            14px 20px;

        box-sizing:
            border-box;

        font-size:
            14px;

        line-height:
            1.5;

        text-decoration:
            none;

        cursor:
            pointer;

    }


    /*
    -------------------------------------------------
    NESTED DETAILS
    -------------------------------------------------
    */

    .sv-mobile-menu__drawer details {

        display:
            block;

        width:
            100%;

        margin:
            0;

        padding:
            0;

        box-sizing:
            border-box;

    }


    .sv-mobile-menu__drawer details>summary {

        list-style:
            none;

        -webkit-tap-highlight-color:
            transparent;

    }


    .sv-mobile-menu__drawer details>summary::-webkit-details-marker {

        display:
            none;

    }


    .sv-mobile-menu__drawer details>summary::marker {

        content:
            "";

    }


    /*
    -------------------------------------------------
    DISCLOSURE INDICATOR
    -------------------------------------------------

    CSS-only indicator for expandable items.

    Does not alter the native details behavior.

    -------------------------------------------------
    */

    .sv-mobile-menu__drawer nav details>summary::after {

        content:
            "";

        flex:
            0 0 auto;

        width:
            7px;

        height:
            7px;

        margin-left:
            16px;

        border-right:
            1px solid currentColor;

        border-bottom:
            1px solid currentColor;

        transform:
            rotate(45deg) translateY(-2px);

        transition:
            transform .2s ease;

    }


    .sv-mobile-menu__drawer nav details[open]>summary::after {

        transform:
            rotate(225deg) translate(-2px, -1px);

    }


    /*
    -------------------------------------------------
    LEVEL 2
    -------------------------------------------------
    */

    .sv-mobile-menu__drawer nav>ul>li>details>ul {

        padding:
            0 0 8px;

    }


    .sv-mobile-menu__drawer nav>ul>li>details>ul>li {

        position:
            relative;

    }


    .sv-mobile-menu__drawer nav>ul>li>details>ul>li>a,
    .sv-mobile-menu__drawer nav>ul>li>details>ul>li>span,
    .sv-mobile-menu__drawer nav>ul>li>details>ul>li>details>summary {

        display:
            flex;

        align-items:
            center;

        justify-content:
            space-between;

        width:
            100%;

        min-height:
            44px;

        margin:
            0;

        padding:
            11px 20px 11px 32px;

        box-sizing:
            border-box;

        font-size:
            13px;

        line-height:
            1.5;

        text-decoration:
            none;

        cursor:
            pointer;

    }


    /*
    -------------------------------------------------
    LEVEL 3
    -------------------------------------------------
    */

    .sv-mobile-menu__drawer nav>ul>li>details>ul>li>details>ul {

        padding:
            0 0 8px;

    }


    .sv-mobile-menu__drawer nav>ul>li>details>ul>li>details>ul>li>a,
    .sv-mobile-menu__drawer nav>ul>li>details>ul>li>details>ul>li>span {

        display:
            block;

        width:
            100%;

        min-height:
            40px;

        margin:
            0;

        padding:
            10px 20px 10px 44px;

        box-sizing:
            border-box;

        font-size:
            12px;

        line-height:
            1.6;

        text-decoration:
            none;

    }


    /*
    -------------------------------------------------
    LINK INTERACTION
    -------------------------------------------------
    */

    .sv-mobile-menu__drawer a {

        -webkit-tap-highlight-color:
            transparent;

    }


    /*
    -------------------------------------------------
    KEYBOARD FOCUS
    -------------------------------------------------
    */

    .sv-mobile-menu__drawer a:focus-visible,
    .sv-mobile-menu__drawer summary:focus-visible {

        outline:
            1px solid currentColor;

        outline-offset:
            -3px;

    }


    /*
    -------------------------------------------------
    REDUCED MOTION
    -------------------------------------------------
    */

    @media (prefers-reduced-motion: reduce) {

        .sv-mobile-menu__drawer nav details>summary::after {

            transition:
                none;

        }

    }

}


/* =================================================
   DESKTOP SAFETY
   ================================================= */

@media (min-width: 768px) {

    .sv-mobile-menu {

        display:
            none;

    }

}