/*
 * =========================================================
 * VESTA MEGA MENU FIX
 * =========================================================
 *
 * This file intentionally overrides the legacy header/menu
 * rules inside components.css.
 *
 */


/* =========================================================
   DESKTOP HEADER
========================================================= */

@media (min-width: 851px) {

    /*
     * Mega menu parent
     */

    .vesta-nav-item {
        position: relative;
    }


    /*
     * Mega menu base state
     */

    .vesta-nav-item > .vesta-mega-menu {
        position: absolute;

        top: 100%;
        right: 50%;

        width: 760px;
        max-width: min(760px, calc(100vw - 30px));

        margin: 0;

        padding-top: 8px;

        opacity: 0;
        visibility: hidden;

        pointer-events: none;

        transform:
            translateX(50%)
            translateY(8px);

        transition:
            opacity .2s ease,
            transform .2s ease,
            visibility .2s ease;

        z-index: 1100;
    }


    /*
     * Open on hover
     */

    .vesta-nav-item:hover > .vesta-mega-menu,

    /*
     * Open when JavaScript adds .is-open
     */

    .vesta-nav-item.is-open > .vesta-mega-menu,

    /*
     * Accessibility / keyboard navigation
     */

    .vesta-nav-item:focus-within > .vesta-mega-menu {

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        transform:
            translateX(50%)
            translateY(0);
    }


    /*
     * Mega menu inner container
     */

    .vesta-nav-item > .vesta-mega-menu > .vesta-mega-inner {
        position: relative;

        width: 100%;

        box-sizing: border-box;
    }


    /*
     * Chevron
     */

    .vesta-nav-item:hover
    .vesta-nav-chevron,

    .vesta-nav-item.is-open
    .vesta-nav-chevron,

    .vesta-nav-item:focus-within
    .vesta-nav-chevron {

        transform:
            rotate(180deg);
    }

}


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

@media (max-width: 850px) {

    /*
     * Desktop navigation is hidden
     */

    .vesta-main-nav {
        display: none;
    }


    /*
     * Mega menus must never float on mobile
     */

    .vesta-main-nav .vesta-mega-menu {
        position: static;

        width: auto;
        max-width: none;

        margin: 0;
        padding: 0;

        opacity: 1;
        visibility: visible;

        pointer-events: auto;

        transform: none;

        box-shadow: none;

        border: 0;

        background: transparent;
    }


    /*
     * Mobile menu
     */

    .vesta-mobile-menu {
        display: none;
    }


    .vesta-mobile-menu.is-open {
        display: block;
    }

}


/* =========================================================
   SAFETY / LAYERING
========================================================= */

.vesta-header {
    position: relative;

    z-index: 1000;
}


.vesta-header-inner {
    position: relative;

    z-index: 1001;
}


/*
 * Prevent accidental clipping
 */

.vesta-header,
.vesta-header-inner {
    overflow: visible;
}