/* =========================================================
   WESERVE MOBILE NAVIGATION
   Independent mobile navigation layer
========================================================= */


/* Hide native disclosure marker */

.ws-mobile-navigation {
    display: none;
}

.ws-mobile-navigation summary {
    list-style: none;
}

.ws-mobile-navigation summary::-webkit-details-marker {
    display: none;
}


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

@media (max-width: 1050px) {

    /**
     * We no longer use the desktop nav
     * as the mobile menu.
     */
    .ws-desktop-navigation {
        display: none !important;
    }


    /**
     * Existing legacy hamburger is no longer used.
     */
    .ws-menu-toggle {
        display: none !important;
    }


    /**
     * Mobile menu container.
     */
    .ws-mobile-navigation {
        position: relative;
        display: block;
        z-index: 2000;
    }


    /**
     * Hamburger button.
     */
    .ws-mobile-navigation__toggle {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;

        width: 46px;
        height: 46px;

        padding: 0;

        border: 1px solid var(--ws-border);
        border-radius: 50%;

        background: var(--ws-white);
        color: var(--ws-dark-blue);

        cursor: pointer;

        -webkit-tap-highlight-color: transparent;
    }


    /**
     * Middle hamburger line.
     */
    .ws-mobile-navigation__icon {
        position: relative;

        display: block;

        width: 19px;
        height: 2px;

        border-radius: 999px;

        background: var(--ws-dark-blue);

        transition: 0.3s ease;
    }


    /**
     * Top and bottom hamburger lines.
     */
    .ws-mobile-navigation__icon::before,
    .ws-mobile-navigation__icon::after {
        content: "";

        position: absolute;
        left: 0;

        display: block;

        width: 19px;
        height: 2px;

        border-radius: 999px;

        background: var(--ws-dark-blue);

        transition: 0.3s ease;
    }

    .ws-mobile-navigation__icon::before {
        top: -6px;
    }

    .ws-mobile-navigation__icon::after {
        top: 6px;
    }


    /**
     * Turn hamburger into X
     * when DETAILS is open.
     */
    .ws-mobile-navigation[open]
    .ws-mobile-navigation__icon {
        background: transparent;
    }

    .ws-mobile-navigation[open]
    .ws-mobile-navigation__icon::before {
        top: 0;
        transform: rotate(45deg);
    }

    .ws-mobile-navigation[open]
    .ws-mobile-navigation__icon::after {
        top: 0;
        transform: rotate(-45deg);
    }


    /* =====================================================
       PANEL
    ====================================================== */

    .ws-mobile-navigation__panel {
        position: fixed;

        top: 72px;
        left: 14px;
        right: 14px;

        max-height: calc(100vh - 90px);

        overflow-y: auto;

        padding: 25px;

        border: 1px solid var(--ws-border);
        border-radius: 24px;

        background: rgba(254, 254, 254, 0.99);

        box-shadow:
            0 25px 70px rgba(22, 20, 62, 0.18);

        animation:
            weserveMobileMenuOpen 0.25s ease both;

        z-index: 1999;
    }


    @keyframes weserveMobileMenuOpen {

        from {
            opacity: 0;
            transform: translateY(-12px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }

    }


    /* =====================================================
       PANEL HEADER
    ====================================================== */

    .ws-mobile-navigation__top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;

        padding-bottom: 18px;

        border-bottom: 1px solid var(--ws-border);
    }

    .ws-mobile-navigation__top > span {
        color: var(--ws-dark-blue);

        font-size: 13px;
        font-weight: 800;

        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    .ws-mobile-navigation__top small {
        color: var(--ws-text-soft);

        font-size: 11px;
    }


    /* =====================================================
       MENU LIST
    ====================================================== */

    .ws-mobile-navigation__nav {
        padding: 10px 0 6px;
    }

    .ws-mobile-primary-menu {
        margin: 0;
        padding: 0;

        list-style: none;
    }

    .ws-mobile-primary-menu > li {
        margin: 0;
        padding: 0;

        border-bottom: 1px solid var(--ws-border);
    }

    .ws-mobile-primary-menu > li:last-child {
        border-bottom: 0;
    }

    .ws-mobile-primary-menu > li > a {
        position: relative;

        display: flex;
        align-items: center;
        justify-content: space-between;

        width: 100%;

        padding: 16px 2px;

        color: var(--ws-dark-blue);

        font-size: 16px;
        font-weight: 700;
        line-height: 1.3;

        text-decoration: none;
    }

    .ws-mobile-primary-menu > li > a::after {
        content: "→";

        color: var(--ws-blue);

        font-size: 17px;

        transition: transform 0.25s ease;
    }

    .ws-mobile-primary-menu > li > a:hover,
    .ws-mobile-primary-menu > li.current-menu-item > a {
        color: var(--ws-blue);
    }

    .ws-mobile-primary-menu > li > a:hover::after {
        transform: translateX(4px);
    }


    /* =====================================================
       MOBILE CTA / CONTACT
    ====================================================== */

    .ws-mobile-navigation__footer {
        padding-top: 20px;

        border-top: 1px solid var(--ws-border);
    }

    .ws-mobile-navigation__cta {
        width: 100%;

        min-height: 54px;
    }

    .ws-mobile-navigation__contact {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 18px;

        margin-top: 18px;
    }

    .ws-mobile-navigation__contact a {
        color: var(--ws-text-soft);

        font-size: 12px;
        font-weight: 600;

        text-decoration: none;
    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 560px) {

    .ws-mobile-navigation__panel {
        top: 72px;
        left: 10px;
        right: 10px;

        padding: 20px;

        border-radius: 20px;
    }

    .ws-mobile-navigation__top small {
        display: none;
    }

}


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

@media (min-width: 1051px) {

    .ws-mobile-navigation {
        display: none !important;
    }

}