/* 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: 2rem;
    cursor: pointer;
}
.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;
}
.has-submenu > .submenu-toggle {
    background: none;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 1rem;
    width: auto;
    height: auto;
    color: #666;
    font-weight: bold;
    transition: none;
}
.has-submenu > .submenu-toggle:hover {
    color: #333;
}
.has-submenu.open > .submenu-toggle {
    transform: none;
    background: none;
    color: #666;
}
.has-submenu.open > .submenu-toggle::before {
    content: "▼";
}
.has-submenu:not(.open) > .submenu-toggle::before {
    content: "▶";
}
.has-submenu > .submenu-toggle {
    text-indent: -9999px;
}
.has-submenu > .submenu-toggle::before {
    text-indent: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.has-submenu > .mobile-menu-link {
    padding-right: 50px;
}
.mobile-submenu {
    display: none;
    list-style: none;
    margin: 0;
    padding-left: 1.5rem;
    background: #f9f9f9;
}
.mobile-menu-item.open > .mobile-submenu {
    display: block;
}
.mobile-menu-link {
    display: block;
    padding: 1rem;
    color: #222;
    text-decoration: none;
    border-bottom: 1px solid #eee;
}
.mobile-menu-link:hover {
    background: #f0f0f0;
}
.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: 0;
    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); }