/* Mobile Menu Styles - Based on reference site */

/* Mobile sidebar menu */
.navbar_mobile_sidebar {
    background: #fff;
    box-shadow: 0 0 5px rgba(0,0,0,.25);
    height: 100vh; /* Fallback for older browsers */
    height: 100dvh; /* Dynamic viewport height for modern browsers */
    left: 0;
    max-width: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    position: fixed;
    top: 0;
    transition: all .3s cubic-bezier(0, 0, .3, 1);
    width: 80%;
    z-index: 1001;
    /* Ensure proper mobile viewport handling */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* Ensure menu is always visible when not hidden */
    visibility: visible;
    opacity: 1;
}

.navbar_mobile_sidebar--hidden {
    left: -300px;
    visibility: hidden;
    opacity: 0;
}

.navbar_mobile_sidebar .mobile-logo {
    margin: 24px 24px 0;
    padding: 0;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 10;
    padding-bottom: 16px;
}

.navbar_mobile_sidebar .mobile-logo img {
    height: 22px;
    width: 81px;
    display: block;
    max-width: 100%;
}

.navbar_mobile_sidebar > img {
    margin: 24px 24px 0;
    height: 32px;
    width: auto;
    display: block;
}

.navbar_mobile_sidebar .navbar__menu {
    margin: 0 24px 24px;
    display: block;
    padding-bottom: 100px; /* Add bottom padding to ensure all items are accessible */
}

.navbar_mobile_sidebar .navbar__menu li {
    font-size: 16px;
    list-style: none;
    line-height: 1.3;
    margin: 0;
    padding: 0;
}

.navbar_mobile_sidebar .navbar__menu li .is-separator {
    display: none !important;
}

@media (max-width: 768px) {
    .CTA-menu {
        display: none !important;
    }
}

.navbar_mobile_sidebar .navbar__menu li a {
    color: #1f1915;
    display: block;
    padding: 7px 20px 7px 0;
    position: relative;
    text-decoration: none;
    transition: all .24s ease;
}

.navbar_mobile_sidebar .navbar__menu li .is-separator:active,
.navbar_mobile_sidebar .navbar__menu li .is-separator:focus,
.navbar_mobile_sidebar .navbar__menu li .is-separator:hover,
.navbar_mobile_sidebar .navbar__menu li a:active,
.navbar_mobile_sidebar .navbar__menu li a:focus,
.navbar_mobile_sidebar .navbar__menu li a:hover {
    color: #a62424;
}

/* Force ALL submenus to be visible in mobile menu */
.navbar_mobile_sidebar .navbar__submenu,
.navbar__submenu--mobile,
.navbar_mobile_sidebar ul.navbar__submenu,
.navbar_mobile_sidebar .has-submenu .navbar__submenu {
    margin: 8px 0 18px 24px !important;
    padding: 0 !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    background: transparent !important;
    white-space: normal !important;
    list-style-type: none !important;
    display: block !important;
    left: auto !important;
    top: auto !important;
    height: auto !important;
    overflow: visible !important;
    max-height: none !important;
}

.navbar_mobile_sidebar .navbar__submenu_wrapper {
    display: none !important;
}

.navbar_mobile_sidebar .navbar__submenu li {
    line-height: 1.3;
    font-size: 16px;
    text-transform: none;
}

.navbar_mobile_sidebar .navbar__submenu li a {
    color: #1f1915 !important;
    padding: 7px 20px 7px 0;
    transition: all .24s ease;
    font-size: 16px;
}

.navbar_mobile_sidebar .navbar__submenu li a:active,
.navbar_mobile_sidebar .navbar__submenu li a:focus,
.navbar_mobile_sidebar .navbar__submenu li a:hover {
    color: #525255 !important;
}

.navbar_mobile_sidebar .navbar__submenu li:hover > a {
    color: #525255 !important;
}

/* Mobile sidebar overlay */
.navbar_mobile_sidebar__overlay {
    background: rgba(0,0,0,.5);
    height: 100vh; /* Fallback for older browsers */
    height: 100dvh; /* Dynamic viewport height for modern browsers */
    opacity: 1;
    pointer-events: auto;
    position: fixed;
    top: 0;
    transition: all .3s cubic-bezier(0, 0, .3, 1);
    width: 100%;
    z-index: 1000;
    /* Ensure overlay is always visible when not hidden */
    visibility: visible;
}

.navbar_mobile_sidebar__overlay--hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

/* Mobile overlay menu (alternative mode) */
.navbar_mobile_overlay {
    background: #fff;
    height: 100vh; /* Fallback for older browsers */
    height: 100dvh; /* Dynamic viewport height for modern browsers */
    left: 0;
    position: fixed;
    top: 0;
    transition: all .3s cubic-bezier(0, 0, .3, 1);
    width: 100%;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
}

.navbar_mobile_overlay.is-hidden {
    opacity: 0;
    visibility: hidden;
}

.navbar_mobile_overlay .navbar__menu {
    display: block;
    text-align: center;
}

.navbar_mobile_overlay .navbar__menu li {
    font-size: 18px;
    margin: 10px 0;
}

.navbar_mobile_overlay .navbar__menu li a {
    color: #1f1915;
    padding: 10px 20px;
    display: block;
    text-decoration: none;
    transition: all .24s ease;
}

.navbar_mobile_overlay .navbar__menu li a:hover {
    color: #a62424;
}

/* Hide elements when menu is hidden */
.is-hidden {
    display: none !important;
}

/* Prevent body scroll when menu is open */
.no-scroll {
    overflow: hidden;
    /* Prevent iOS Safari from bouncing */
    position: fixed;
    width: 100%;
    height: 100%;
}

/* Mobile toggle button styles */
.navbar .navbar__toggle {
    background: #fff;
    box-shadow: none;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    display: block;
    line-height: 1;
    margin: 0;
    overflow: visible;
    padding: 1rem;
    position: relative;
    right: -1rem;
    text-transform: none;
    z-index: 2004;
}

@media all and (min-width: 56.25em) {
    .navbar .navbar__toggle {
        display: none;
    }
}

.navbar .navbar__toggle:focus,
.navbar .navbar__toggle:hover {
    box-shadow: none;
    outline: 0;
    transform: none;
}

.navbar .navbar__toggle-box {
    width: 24px;
    height: 14px;
    display: inline-block;
    position: relative;
}

.navbar .navbar__toggle-inner {
    display: block;
    top: 50%;
    text-indent: -9999999em;
}

.navbar .navbar__toggle-inner::before {
    content: "";
    display: block;
    top: -6px;
}

.navbar .navbar__toggle-inner::after {
    content: "";
    display: block;
    bottom: -6px;
}

.navbar .navbar__toggle-inner,
.navbar .navbar__toggle-inner::after,
.navbar .navbar__toggle-inner::before {
    width: 22px;
    height: 2px;
    background-color: #525255;
    position: absolute;
    transition: opacity .14s ease-out, transform;
}

.navbar .navbar__toggle-inner {
    transition-duration: 75ms;
    transition-timing-function: cubic-bezier(0.55,0.055,0.675,0.19);
}

.navbar .navbar__toggle-inner::before {
    transition: top 75ms ease .12s, opacity 75ms ease;
}

.navbar .navbar__toggle-inner::after {
    transition: bottom 75ms ease .12s, transform 75ms cubic-bezier(.55, .055, .675, .19);
}

.navbar .navbar__toggle.is-active .navbar__toggle-inner {
    transform: rotate(45deg);
    transition-delay: .12s;
    transition-timing-function: cubic-bezier(0.215,0.61,0.355,1);
}

.navbar .navbar__toggle.is-active .navbar__toggle-inner::before {
    top: 0;
    opacity: 0;
    transition: top 75ms ease, opacity 75ms ease .12s;
}

.navbar .navbar__toggle.is-active .navbar__toggle-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom 75ms ease, transform 75ms cubic-bezier(.215, .61, .355, 1) .12s;
}

/* Ensure mobile menu is hidden on desktop */
@media all and (min-width: 56.25em) {
    .navbar_mobile_sidebar,
    .navbar_mobile_sidebar__overlay,
    .navbar_mobile_overlay {
        display: none !important;
    }
}

/* Override desktop submenu hiding for mobile menu */
@media all and (max-width: 56.1875em) {
    .navbar_mobile_sidebar .navbar__submenu,
    .navbar__submenu--mobile,
    .navbar_mobile_sidebar ul.navbar__submenu,
    .navbar_mobile_sidebar .has-submenu .navbar__submenu,
    .navbar_mobile_sidebar .navbar__menu .has-submenu .navbar__submenu {
        display: block !important;
        position: static !important;
        left: auto !important;
        top: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        box-shadow: none !important;
        background: transparent !important;
        white-space: normal !important;
        list-style-type: none !important;
        height: auto !important;
        overflow: visible !important;
        max-height: none !important;
        margin: 8px 0 18px 24px !important;
        padding: 0 !important;
        z-index: auto !important;
    }
    
    /* Force all submenu items to be visible */
    .navbar_mobile_sidebar .navbar__submenu li,
    .navbar__submenu--mobile li {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* Mobile menu responsive adjustments */
@media all and (max-width: 56.1875em) {
    .navbar .navbar__menu {
        display: none;
    }
}

/* Additional mobile-specific fixes */
@media (max-width: 768px) {
    /* Ensure mobile menu takes full available height */
    .navbar_mobile_sidebar {
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
    }
    
    /* Improve scrolling on iOS */
    .navbar_mobile_sidebar {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    
    /* Ensure menu content is properly spaced */
    .navbar_mobile_sidebar .navbar__menu {
        padding-bottom: 120px; /* Extra padding to account for mobile browser UI */
    }
    
    /* Force mobile menu to be visible when not hidden */
    .navbar_mobile_sidebar:not(.navbar_mobile_sidebar--hidden) {
        left: 0 !important;
        transform: none !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Ensure overlay covers full screen */
    .navbar_mobile_sidebar__overlay:not(.navbar_mobile_sidebar__overlay--hidden) {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}

/* Fix for mobile browsers with dynamic viewport */
@supports (height: 100dvh) {
    .navbar_mobile_sidebar,
    .navbar_mobile_sidebar__overlay,
    .navbar_mobile_overlay {
        height: 100dvh;
    }
}

/* Additional fixes for iOS Safari */
@supports (-webkit-touch-callout: none) {
    .navbar_mobile_sidebar {
        height: 100vh;
        height: -webkit-fill-available;
    }
    
    .navbar_mobile_sidebar__overlay {
        height: 100vh;
        height: -webkit-fill-available;
    }
}

/* Ensure proper stacking context */
.navbar_mobile_sidebar {
    z-index: 1001 !important;
}

.navbar_mobile_sidebar__overlay {
    z-index: 1000 !important;
}

/* Debug styles - remove in production */
@media (max-width: 768px) {
    .navbar_mobile_sidebar {
        /* Debug border to see menu boundaries */
        /* border: 2px solid red; */
    }
    
    .navbar_mobile_sidebar .navbar__menu {
        /* Debug border to see menu content boundaries */
        /* border: 1px solid blue; */
    }
}