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

Space Vanta Theme 1.0

Module:
Header

File:
public/header/mobile.css

Version:
HEADER-MOBILE-B3-001

Purpose:
Mobile Header Structure

Responsibilities:
- Mobile Header container
- Mobile Main Row
- Mobile Menu position
- Mobile Wordmark position
- Mobile Search / Cart position
- Mobile Featured Functions second layer
- Mobile layer spacing

Does NOT handle:
- Desktop Header
- Desktop Navigation
- Find Cube geometry
- Find Cube material
- Find animation
- Vision Aperture geometry
- Vision animation
- Featured Functions internal Find / Vision spacing
- Mobile Menu drawer internal content

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


/* =================================================
   MOBILE HEADER
   ================================================= */

@media (max-width: 767px) {

    .sv-header__mobile {

        position:
            relative;

        display:
            grid;

        grid-template-columns:
            1fr;

        grid-template-rows:
            56px 44px;

        width:
            100%;

        min-height:
            100px;

        box-sizing:
            border-box;

    }


    /* =================================================
       MOBILE MAIN ROW
       ================================================= */

    .sv-header__mobile-main {

        position:
            relative;

        grid-column:
            1;

        grid-row:
            1;

        width:
            100%;

        height:
            56px;

        display:
            grid;

        grid-template-columns:
            1fr auto 1fr;

        align-items:
            center;

        box-sizing:
            border-box;

    }


    /* =================================================
       MOBILE MENU
       ================================================= */

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

        grid-column:
            1;

        justify-self:
            start;

        position:
            relative;

        display:
            block;

        margin:
            0;

    }


    /* =================================================
       MOBILE MENU BUTTON
       ================================================= */

    .sv-header__mobile-main .sv-header__mobile-menu-button {

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        width:
            34px;

        height:
            34px;

        margin:
            0;

        padding:
            0;

        box-sizing:
            border-box;

        cursor:
            pointer;

    }


    /* =================================================
       MOBILE WORDMARK
       ================================================= */

    .sv-header__mobile-main .sv-header__mobile-main>.sv-header__wordmark,
    .sv-header__mobile-main .sv-header__wordmark {

        grid-column:
            2;

        justify-self:
            center;

        position:
            relative;

        margin:
            0;

    }


    /* =================================================
       MOBILE ACTIONS
       ================================================= */

    .sv-header__mobile-actions {

        grid-column:
            3;

        justify-self:
            end;

        display:
            flex;

        align-items:
            center;

        justify-content:
            flex-end;

        gap:
            12px;

        height:
            100%;

        margin:
            0;

        padding:
            0;

    }


    /* =================================================
       MOBILE ACTION
       ================================================= */

    .sv-header__mobile-action {

        position:
            relative;

        display:
            inline-flex;

        align-items:
            center;

        justify-content:
            center;

        width:
            28px;

        height:
            28px;

        margin:
            0;

        padding:
            0;

        text-decoration:
            none;

        box-sizing:
            border-box;

    }


    /* =================================================
       MOBILE ICON
       ================================================= */

    .sv-header__mobile-action .sv-header__icon {

        width:
            20px;

        height:
            20px;

        display:
            block;

    }


    /* =================================================
       CART ICON WRAPPER
       ================================================= */

    .sv-header__cart-icon-wrap {

        position:
            relative;

        display:
            inline-flex;

        align-items:
            center;

        justify-content:
            center;

        width:
            20px;

        height:
            20px;

    }


    /* =================================================
       MOBILE FEATURED FUNCTIONS
       SECONDARY LAYER
       ================================================= */

    .sv-header__mobile .sv-featured-functions--mobile {

        grid-column:
            1;

        grid-row:
            2;

        position:
            relative;

        width:
            100%;

        height:
            44px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        box-sizing:
            border-box;

        margin:
            0;

        padding:
            0;

    }


    /* =================================================
       SECONDARY LAYER SEPARATION
       ================================================= */

    .sv-header__mobile .sv-featured-functions--mobile::before {

        content:
            "";

        position:
            absolute;

        top:
            0;

        left:
            22%;

        right:
            22%;

        height:
            1px;

        background:
            linear-gradient(90deg,
                transparent 0%,
                rgba(170, 180, 190, .10) 18%,
                rgba(205, 213, 220, .28) 50%,
                rgba(170, 180, 190, .10) 82%,
                transparent 100%);

        pointer-events:
            none;

    }


    /* =================================================
       FEATURED FUNCTION VERTICAL POSITION
       ================================================= */

    .sv-header__mobile .sv-featured-functions--mobile .sv-featured-function {

        position:
            relative;

        top:
            0;

    }


    /* =================================================
       MOBILE MENU DRAWER
       INTERNAL LAYOUT PRESERVED
       ================================================= */

    .sv-mobile-menu__drawer {

        position:
            absolute;

        z-index:
            900;

    }

}


/* =================================================
   MOBILE SMALL DEVICES
   ================================================= */

@media (max-width: 380px) {

    .sv-header__mobile {

        grid-template-rows:
            54px 42px;

        min-height:
            96px;

    }


    .sv-header__mobile-main {

        height:
            54px;

    }


    .sv-header__mobile .sv-featured-functions--mobile {

        height:
            42px;

    }


    .sv-header__mobile-actions {

        gap:
            9px;

    }


    .sv-header__mobile-action {

        width:
            27px;

        height:
            27px;

    }


    .sv-header__mobile .sv-featured-functions--mobile {

        gap:
            28px;

    }

}


/* =================================================
   REDUCED MOTION
   ================================================= */

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

    .sv-header__mobile,
    .sv-header__mobile-main,
    .sv-header__mobile-actions,
    .sv-featured-functions--mobile {

        transition:
            none;

    }

}