/* Disable generated chevron */
.has-submenu > .submenu-toggle::before {
  content: none;
}

/* Mobile Slide-in Menu Styles */
.mobile-slide-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 90%;
    max-width: 500px;
    height: 100%;
    background: #fff;
    box-shadow: -2px 0 8px rgba(0,0,0,0.15);
    z-index: 9999;
    transition: right 0.3s ease;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.mobile-slide-menu.open {
    right: 0;
}
.mobile-slide-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid #eee;
}
.close-btn {
    font-size: 1.4rem;
    cursor: pointer;
    background-color:white;
    margin-right:1.6rem;
    border-width:0px;
}
.menu-title {
    font-weight: bold;
    font-size: 1.2rem;
}
.mobile-slide-menu-nav {
    padding: 1rem;
}
.mobile-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mobile-menu-item {
    position: relative;
    margin-bottom: 0.5rem;
}

/* Updated styles for parent menu items to look like red headers */
.has-submenu > .mobile-menu-link {
    display: block;
    padding: 0.5rem 1rem 0.5rem 1rem;
    color: #444;
    text-decoration: none;
    border-bottom: none;
    font-weight: 700;
    font-size: 1.4rem;
    text-transform: none;
    background: transparent;
    font-family: inherit;
}

.has-submenu > .mobile-menu-link:hover {
    background: transparent;
    color: #D43E40;
}

/* Pure CSS chevron toggle button - red border, white fill */
.has-submenu > .submenu-toggle {
    background: #fff;
    border: 3px solid var(--design-accents-high);
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 0.5rem;
    width: 32px;
    height: 32px;
    transition: transform 0.3s ease, border-color 0.2s ease, background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-weight:700;
}

    .has-submenu > .submenu-toggle:hover {
        border-color: var(--design-accents-high);
        background-color: var(--design-accents-high);
        color:white;
    }

.has-submenu.open > .submenu-toggle {
    transform: rotate(90deg);
}

/* Pure CSS Chevron
.has-submenu > .submenu-toggle::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--design-accents-high);
    border-bottom: 2px solid var(--design-accents-high);
    transform: rotate(45deg) translateY(-2px);
    transition: border-color 0.2s ease;
}
     */
.has-submenu > .submenu-toggle:hover::before {
    border-color: #b33537;
}

/* Submenus collapsed by default, expandable on click */
.mobile-submenu {
    display: none;
    list-style: none;
    margin: 0;
    padding-left: 0;
    background: transparent;
}

.mobile-menu-item.open > .mobile-submenu {
    display: block;
}

/* Style submenu items - smaller text */
.mobile-submenu .mobile-menu-link {
    display: block;
    padding: 0.6rem 1rem;
    color: #333;
    text-decoration: none;
    border-bottom: none;
    font-weight: 400;
    font-size: 0.95rem;
    background: transparent;
}

.mobile-submenu .mobile-menu-link:hover {
    background: #f5f5f5;
    color: var(--design-accents-high);
}

/* Regular menu items (non-submenu parents) */
.mobile-menu-item:not(.has-submenu) > .mobile-menu-link {
    display: block;
    padding: 0.5rem 1rem;
    color: #333;
    text-decoration: none;
    border-bottom: none;
    font-weight: 700;
    font-size: 1.0rem;
}

.mobile-menu-item:not(.has-submenu) > .mobile-menu-link:hover {
    background: #f5f5f5;
    color: #D43E40;
}

/* Remove the open class requirement */
.mobile-menu-item.open > .mobile-submenu {
    display: block;
}

.close-mobile-menu {
    background: none;
    border: none;
    font-size: 2rem;
    position: absolute;
    top: 1rem;
    right: 1rem;
    cursor: pointer;
    z-index: 10001;
}

/* Hide the old full-page mobile nav overlay */
.mobile-nav {
    display: none !important;
}

/* Ensure our mobile menu has priority */
@media (max-width: 991px) {
    .mobile-nav {
        display: none !important;
    }
    
    .mobile-slide-menu {
        display: flex;
    }
    
    .top-nav {
        display: none !important;
    }
    
    .mobile-nav-handler {
        display: block !important;
    }
}

@media (min-width: 992px) {
    .top-nav {
        display: block !important;
    }
    
    .mobile-nav-handler {
        display: block !important;
    }
}

/* Ensure header layout and persistent hamburger visibility */
.header {
    display: flex;
    align-items: center;
}
.mobile-nav-handler {
    display: block !important;
    position: relative;
    z-index: 10000;
}
.hamburger span, .hamburger span:before, .hamburger span:after {
    background: #000; /* fallback color if theme selector fails */
}
body.theme-color-water .hamburger span, body.theme-color-water .hamburger span:before, body.theme-color-water .hamburger span:after,
body.theme-color-earth .hamburger span, body.theme-color-earth .hamburger span:before, body.theme-color-earth .hamburger span:after {
    background: #000;
}
body.theme-color-sun .hamburger span, body.theme-color-sun .hamburger span:before, body.theme-color-sun .hamburger span:after {
    background: #000;
}

/* Square hamburger override */
.hamburger {
    background: #D43E40 !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hamburger.lines span, .hamburger.lines span:before, .hamburger.lines span:after {
    background: #fff !important;
    width: 22px;
    height: 3px;
}
.hamburger.lines span:before { transform: translateY(-6px); }
.hamburger.lines span:after { transform: translateY(6px); }