/*
 * Harmonic Egg Sedona mobile drawer
 *
 * This file keeps the website's existing menu colours, typography and
 * menu-item styling. It only changes the mobile drawer structure by adding
 * the text site title above the menu and limiting the drawer to 88% width.
 */

:root {
    --hes-mobile-menu-width: 88vw;
    --hes-mobile-menu-background: var(--primary-bg, #f9f4f1);
    --hes-mobile-menu-backdrop: rgba(61, 61, 61, 0.48);
}

.hes-mobile-menu-brandbar,
.hes-mobile-menu-backdrop {
    display: none;
}

@media (max-width: 991px) {
    html.hes-mobile-menu-open,
    body.hes-mobile-menu-open {
        overflow: hidden !important;
    }

    /* Keep the hamburger above normal page content. */
    .site-header {
        position: relative;
        z-index: 100001;
    }

    .hes-mobile-menu-nav {
        position: static !important;
    }

    /* Left-side drawer: 88% of the viewport instead of full screen. */
    .hes-mobile-menu-nav .wp-block-navigation__responsive-container {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        z-index: 100003 !important;
        display: flex !important;
        width: var(--hes-mobile-menu-width) !important;
        max-width: var(--hes-mobile-menu-width) !important;
        height: 100vh !important;
        height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        background: var(--hes-mobile-menu-background) !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateX(-105%);
        transition:
            transform 0.35s ease,
            opacity 0.35s ease,
            visibility 0s linear 0.35s !important;
        box-shadow: 18px 0 42px rgba(61, 61, 61, 0.2);
        animation: none !important;
    }

    .hes-mobile-menu-nav .wp-block-navigation__responsive-container.is-menu-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(0);
        transition:
            transform 0.35s ease,
            opacity 0.35s ease,
            visibility 0s linear 0s !important;
        animation: none !important;
    }

    .hes-mobile-menu-nav .wp-block-navigation__responsive-dialog {
        width: 100%;
        min-height: 100%;
        margin: 0 !important;
    }

    .hes-mobile-menu-nav .wp-block-navigation__responsive-container-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        min-height: 100% !important;
        gap: 0 !important;
    }

    /* Text site title inserted by mobile-menu.js. */
    .hes-mobile-menu-brandbar {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        width: calc(100% + 36px);
        min-height: 60px;
        margin: 0 -18px 8px;
        padding: 0px 62px 0px 30px;
        border-bottom: 1px solid var(--border, #c7beb6);
        background: var(--hes-mobile-menu-background);
    }

    .hes-mobile-menu-brand-link {
        display: inline-flex;
        align-items: center;
        max-width: 100%;
        color: var(--heading-color, #3d3d3d);
        font-family: var(--font-heading, "Newsreader", serif);
        font-size: clamp(1.15rem, 4.8vw, 1.55rem);
        font-weight: 300;
        line-height: 1.15;
        letter-spacing: 0.02em;
        text-decoration: none !important;
        text-transform: uppercase;
    }

    .hes-mobile-menu-brand-link:hover,
    .hes-mobile-menu-brand-link:focus,
    .hes-mobile-menu-brand-link:focus-visible {
        color: var(--heading-color, #3d3d3d);
        text-decoration: none !important;
        outline: none;
        box-shadow: none;
    }

    /* Do not restyle menu colours or fonts; keep the site's current rules. */
    .hes-mobile-menu-nav .wp-block-navigation__container,
    .hes-mobile-menu-nav .wp-block-page-list {
        width: 100% !important;
    }

    .hes-mobile-menu-nav .wp-block-navigation__responsive-container-close {
        position: absolute !important;
        top: 20px !important;
        right: 14px !important;
        z-index: 100004 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        margin: 0 !important;
        padding: 7px !important;
        border: 0 !important;
        background: transparent !important;
        color: var(--heading-color, #3d3d3d) !important;
        cursor: pointer;
    }

    .hes-mobile-menu-nav .wp-block-navigation__responsive-container-close svg {
        width: 28px;
        height: 28px;
    }

    /* Dark area outside the 88% drawer. */
    .hes-mobile-menu-backdrop {
        position: fixed;
        inset: 0;
        z-index: 100000;
        display: block;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        background: var(--hes-mobile-menu-backdrop);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
            opacity 0.35s ease,
            visibility 0s linear 0.35s;
    }

    .hes-mobile-menu-backdrop.is-active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition:
            opacity 0.35s ease,
            visibility 0s linear 0s;
    }
}

/* Hover and current-page colours. */
@media (max-width: 991px) {
    body .hes-mobile-menu-nav
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item >
    .wp-block-navigation-item__content:hover,

    body .hes-mobile-menu-nav
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item.hes-current-menu-item >
    .wp-block-navigation-item__content,

    body .hes-mobile-menu-nav
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item.hes-current-menu-ancestor >
    .wp-block-navigation-item__content,

    body .hes-mobile-menu-nav
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item.current-menu-item >
    .wp-block-navigation-item__content,

    body .hes-mobile-menu-nav
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item.current_page_item >
    .wp-block-navigation-item__content,

    body .hes-mobile-menu-nav
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item.current-menu-ancestor >
    .wp-block-navigation-item__content,

    body .hes-mobile-menu-nav
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item >
    .wp-block-navigation-item__content[aria-current="page"] {
        background: var(--primary-dark, #585046) !important;
        color: #ffffff !important;
    }

    body .hes-mobile-menu-nav
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item >
    .wp-block-navigation-item__content:hover
    .wp-block-navigation-item__label,

    body .hes-mobile-menu-nav
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item.hes-current-menu-item >
    .wp-block-navigation-item__content
    .wp-block-navigation-item__label,

    body .hes-mobile-menu-nav
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item.hes-current-menu-ancestor >
    .wp-block-navigation-item__content
    .wp-block-navigation-item__label,

    body .hes-mobile-menu-nav
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item >
    .wp-block-navigation-item__content[aria-current="page"]
    .wp-block-navigation-item__label {
        color: #ffffff !important;
    }
}