/* HILLSTATE MENU - MOBILE SUBMENU OVERLAY */

@media (max-width: 780px) {

    /* Prevent the mobile navigation and submenu overlay from creating
     * horizontal page overflow. Desktop submenu positioning is untouched. */
    html, body {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

	header .wp-block-navigation__container {width: 100% !important;}
	
	
	header .wp-block-buttons { display:none !important; }
	header .wp-block-navigation__responsive-container .wp-block-buttons {display:block !important; }
	
	header .wp-block-site-logo {margin:8px 0 !important;}

    /*
     * Parent navigation items with a submenu.
     * Leave the parent link itself usable; the arrow opens the submenu.
     */
    header .wp-block-navigation .wp-block-navigation-submenu {
        position: relative;
        width: 100% !important;
        max-width: none !important;	
		
    }

    header .wp-block-navigation .wp-block-navigation-submenu > .wp-block-navigation-item__content {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
        padding-right: 54px !important;
    }
	.wp-block-navigation__container .wp-block-navigation-item {display:block; width:100%;}
	.wp-block-navigation__container .wp-block-navigation-item a {
	border-bottom: 1px solid var(--wp--preset--color--custom-beige-3);
	padding:1em 0;
	display:block;
	}

    header .wp-block-navigation .wp-block-navigation-submenu > .wp-block-navigation__submenu-container.hillstate-mobile-native-submenu {
        display: none !important;
    }

    header .wp-block-navigation .wp-block-navigation-submenu > .hillstate-mobile-submenu-arrow {
        position: absolute !important;
        top: 50% !important;
        right: 0 !important;
        left: auto !important;
        z-index: 5 !important;
        width: 50px !important;
        height: 50px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        color: inherit !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transform: translateY(-50%) !important;
        cursor: pointer !important;
        font-size: 22px !important;
        line-height: 1 !important;
        font-family: inherit !important;
    }

    header .wp-block-navigation .wp-block-navigation-submenu > .hillstate-mobile-submenu-arrow svg.hillstate-mobile-submenu-arrow__icon {
        display: block !important;
        width: 8px !important;
        min-width: 8px !important;
        max-width: 8px !important;
        height: 12px !important;
        min-height: 12px !important;
        max-height: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        flex: 0 0 8px !important;
    }

    header .wp-block-navigation .wp-block-navigation-submenu > .hillstate-mobile-submenu-arrow span {
        display: block;
        transform: translateY(-1px);
    }

    /*
     * Full-screen white overlay.
     */
    body.hillstate-mobile-submenu-open {
        overflow: hidden !important;
    }

    .hillstate-mobile-submenu {
        position: fixed !important;
        inset: 0 !important;
        z-index: 999999 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        background: #fff !important;
        color: var(--wp--preset--color--contrast, #000) !important;
        visibility: hidden !important;
        transform: translateX(100%) !important;
        transition: transform 0.4s ease, visibility 0s linear 0.4s !important;
        overflow: hidden !important;
    }

    .hillstate-mobile-submenu--open {
        visibility: visible !important;
        transform: translateX(0) !important;
        transition: transform 0.4s ease !important;
    }

    .hillstate-mobile-submenu,
    .hillstate-mobile-submenu__content,
    .hillstate-mobile-submenu .wp-block-navigation__submenu-container,
    .hillstate-mobile-submenu .wp-block-navigation-item {
        border: 0 !important;
        box-shadow: none !important;
    }

    .hillstate-mobile-submenu__panel {
        width: 100%;
        height: 100%;
        background: #fff;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .hillstate-mobile-submenu__top {
        min-height: 64px;
        flex: 0 0 auto;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        padding: 10px 20px;
        border-bottom: 1px solid rgba(0,0,0,0.08);
        box-sizing: border-box;
    }

    .hillstate-mobile-submenu__back,
    .hillstate-mobile-submenu__close {
        appearance: none;
        border: 0;
        background: transparent;
        color: inherit;
        font: inherit;
        cursor: pointer;
        padding: 8px 0;
    }

    .hillstate-mobile-submenu__back {
        justify-self: start;
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 15px;
    }

    .hillstate-mobile-submenu__back span:first-child {
        font-size: 22px;
        line-height: 1;
    }

    .hillstate-mobile-submenu__title {
        justify-self: center;
        font-size: 18px;
        line-height: 1.2;
        text-align: center;
    }

    .hillstate-mobile-submenu__close {
        justify-self: end;
        font-size: 32px;
        line-height: 1;
        font-weight: 300;
    }

    .hillstate-mobile-submenu__content {
        flex: 1 1 auto;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 24px 20px 40px;
        box-sizing: border-box;
    }

    /*
     * Submenu links with images become a one-column list on mobile.
     * The image remains above the link text.
     */
    .hillstate-mobile-submenu__list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 28px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        position: static !important;
        box-shadow: none !important;
        border: 0 !important;
        outline: 0 !important;
        list-style: none !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* Nested WordPress submenus are not used inside the slide-in panel. */
    .hillstate-mobile-submenu__list .wp-block-navigation__submenu-container {
        display: none !important;
    }

    .hillstate-mobile-submenu__list,
    .hillstate-mobile-submenu__list * {
        box-sizing: border-box !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .hillstate-mobile-submenu__list > li {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .hillstate-mobile-submenu__list > li > a.navigation-link-has-image,
    .hillstate-mobile-submenu__list > li > a {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
        max-width: none !important;
        gap: 12px !important;
        padding: 0 !important;
        margin: 0 !important;
        white-space: normal !important;
        color: inherit !important;
        text-decoration: none !important;
    }

    .hillstate-mobile-submenu__list .navigation-link-image-wrap {
        display: block !important;
        width: 100% !important;
        aspect-ratio: 2 / 1 !important;
        height: auto !important;
        flex: none !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    .hillstate-mobile-submenu__list .navigation-link-image {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: cover !important;
        margin: 0 !important;
    }

    .hillstate-mobile-submenu__list > li > a:not(.navigation-link-has-image) {
        min-height: 44px;
        justify-content: center;
    }

    .hillstate-mobile-submenu__list .wp-block-navigation__submenu-icon {
        display: none !important;
    }
}

/* Keep the native WordPress mobile menu overlay full-viewport.
   The sliding header's transform otherwise becomes the containing block
   for the fixed menu overlay and clips it to the header area. */
@media (max-width: 780px) {
    header:has(.wp-block-navigation__responsive-container.is-menu-open) {
        transform: none !important;
    }

    header .wp-block-navigation__responsive-container.is-menu-open {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        max-width: none !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: none !important;
        margin: 0 !important;
        z-index: 1000000 !important;
        overflow-y: auto !important;
    }
	header h3 {text-transform:none !important; font-weight:700!important;}
}


/* ==========================================================================
   MOBILE MENU BREAKPOINT: 780px
   WordPress core switches the Navigation block to its desktop layout at
   600px. Between 600px and 780px, force core's mobile behaviour (burger
   button + overlay menu) so it matches the plugin's 780px breakpoint.
   ========================================================================== */
@media (min-width: 600px) and (max-width: 780px) {

    /* Hide the inline menu until the burger opens it. */
    header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none !important;
    }

    /* Show the burger button. */
    header .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex !important;
    }

    /* Open state: full-screen overlay, exactly as on small phones. */
    header .wp-block-navigation__responsive-container.is-menu-open {
        display: flex !important;
    }

    /* Keep the close (X) button visible inside the open overlay. */
    header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
        display: flex !important;
    }
}