/* Theme dropdown styles */
.theme-section-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    /* Use --text-muted (hsl(0,0%,40%) in light mode = #666, 5.74:1 on white)
       instead of the hardcoded #888 (~3.3:1), which fails WCAG 2.1 AA 4.5:1. */
    color: var(--text-muted, #666);
    font-weight: 600;
    cursor: default;
    padding-bottom: 0;
}

.theme-option {
    cursor: pointer;
}

.theme-option i {
    width: 1.2em;
    text-align: center;
    margin-right: 0.5em;
}

.theme-option.is-active {
    background-color: hsl(var(--primary-color-h, 217), var(--primary-color-s, 71%), var(--primary-color-l, 53%));
    color: white;
}

#theme-dropdown-trigger {
    padding: 0.5rem;
}

#theme-current-icon i {
    font-size: 1.1rem;
}

/* Dark mode overrides for dropdown */
html.dark-mode .navbar-dropdown,
html.high-contrast-mode .navbar-dropdown {
    background-color: var(--card-bg, #2d2d2d);
    border-color: var(--border-color, #444);
}

html.dark-mode .theme-option:hover,
html.high-contrast-mode .theme-option:hover {
    background-color: var(--hover-bg, #3d3d3d);
    color: var(--text-color, #e0e0e0);
}

html.dark-mode .theme-section-label,
html.high-contrast-mode .theme-section-label {
    /* --text-muted is already theme-appropriate; the override is no longer needed
       since the base rule now uses var(--text-muted), but keep explicit specificity
       to ensure dark/HC themes override any Bulma resets. */
    color: var(--text-muted);
}

html.dark-mode .navbar-divider,
html.high-contrast-mode .navbar-divider {
    background-color: var(--border-color, #444);
}