/* ---------- Theme + Language toggles ---------- */
.nav-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.icon-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-soft);
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: var(--transition);
    font-family: inherit;
}
.icon-btn:hover {
    border-color: var(--yellow);
    color: var(--yellow-dark);
    background: var(--yellow-soft);
}

.lang-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-soft);
    padding: 0 12px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    font-size: .85rem;
    font-weight: 600;
    transition: var(--transition);
    font-family: inherit;
    letter-spacing: .5px;
}
.lang-btn:hover {
    border-color: var(--yellow);
    color: var(--yellow-dark);
    background: var(--yellow-soft);
}

/* Sun/Moon icon — pure CSS, no emoji */
.icon-sun, .icon-moon {
    display: inline-block;
    width: 16px; height: 16px;
    position: relative;
}
.icon-sun {
    background: currentColor;
    border-radius: 50%;
    width: 10px; height: 10px;
    box-shadow:
        0 -8px 0 -3px currentColor,
        0  8px 0 -3px currentColor,
        -8px 0 0 -3px currentColor,
         8px 0 0 -3px currentColor,
        -6px -6px 0 -3.5px currentColor,
         6px -6px 0 -3.5px currentColor,
        -6px  6px 0 -3.5px currentColor,
         6px  6px 0 -3.5px currentColor;
}
.icon-moon {
    background: transparent;
    border-radius: 50%;
    box-shadow: inset -4px -1px 0 0 currentColor;
    transform: rotate(-20deg);
}

[data-theme="dark"] .show-light { display: none; }
[data-theme="light"] .show-dark,
:root:not([data-theme="dark"]) .show-dark { display: none; }