/* Overrides loaded after parent theme to ensure mobile nav uses Kiga green */
.mobile-menu .button_container span {
    background: var(--kiga-green-accent) !important;
}
.mobile-menu .button_container.open span,
.mobile-menu .button_container:hover span {
    background: var(--kiga-green-primary) !important;
}

.treemenu li a.active,
.treemenu li a:focus,
.treemenu li a:hover {
    color: var(--kiga-green-accent) !important;
}

.overlay-menu .treemenu li {
    background: rgba(45,90,39,0.03);
}

/* More specific rules for overlay/mobile menu to beat parent theme's !important */
.overlay-menu .treemenu li a,
.overlay.open .treemenu li a,
.overlay-menu .treemenu li a:focus,
.overlay-menu .treemenu li a:hover,
.overlay-menu .treemenu li a.active {
    color: var(--kiga-green-accent) !important;
}

/* If links use a stronger selector elsewhere, target anchor directly inside overlay */
.overlay-menu a {
    color: var(--kiga-green-accent) !important;
}

/* Ensure mobile logo doesn't exceed 64px height (fix overflow on small screens) */
@media (max-width: 840px) {
    #header .logo img,
    .mobile-logo img {
        max-height: 64px !important;
        height: auto !important;
        width: auto !important;
        display: block;
    }
}

/* When header is scrolled on small screens, shrink logo further */
@media (max-width: 840px) {
    #header.scrolled .logo img,
    body.header-fixed.header-animated #header.scrolled .logo img,
    .overlay.scrolled .logo img {
        max-height: 38px !important;
        height: auto !important;
        width: auto !important;
        transition: max-height 0.25s ease-in-out;
    }
}

/* Show nested menu levels in the overlay mobile menu and indent them */
.overlay-menu .treemenu ul {
        display: block !important;
        margin-left: 1.2rem !important;
}
.overlay-menu .treemenu ul ul {
        margin-left: 1.6rem !important;
}
.overlay-menu .treemenu li .toggler { display: none !important; }
.overlay-menu .treemenu li { background: transparent !important; }

/* TimeRangeSlider - Green color theme */
.noUi-connect {
    background: var(--kiga-green-accent) !important;
}

.noUi-handle {
    border: 2px solid var(--kiga-green-accent) !important;
    background: white !important;
    box-shadow: 0 2px 4px rgba(45, 90, 39, 0.2);
}

.noUi-handle:hover,
.noUi-handle:focus {
    border-color: var(--kiga-green-primary) !important;
}

.noUi-handle:active {
    background: var(--kiga-green-accent) !important;
}

.noUi-target {
    border-color: #ddd;
}