/* ===================================================================
   FIRE Cameroon · Language Toggle Button Styles
   Sits in the nav between menu and Watch Live button.
   =================================================================== */

.lang-toggle {
    display: inline-flex;
    align-items: center;
    background: rgba(248, 244, 238, 0.08);
    border: 1px solid rgba(248, 244, 238, 0.15);
    border-radius: 999px;
    padding: 0.2rem;
    gap: 0;
    margin-right: 0.75rem;
    transition: border-color 0.3s ease;
}
.lang-toggle:hover {
    border-color: rgba(232, 93, 44, 0.4);
}
.lang-toggle-btn {
    background: transparent;
    border: none;
    color: rgba(248, 244, 238, 0.6);
    font-family: var(--font-body, 'Manrope', sans-serif);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    text-transform: uppercase;
    line-height: 1;
}
.lang-toggle-btn:hover {
    color: var(--bone, #F8F4EE);
}
.lang-toggle-btn.active {
    background: var(--ember, #E85D2C);
    color: var(--bone, #F8F4EE);
    box-shadow: 0 2px 8px rgba(232, 93, 44, 0.35);
}

/* On non-dark backgrounds (some pages have light nav variants) */
.nav.light .lang-toggle {
    background: rgba(14, 14, 14, 0.06);
    border-color: rgba(14, 14, 14, 0.12);
}
.nav.light .lang-toggle-btn {
    color: rgba(14, 14, 14, 0.55);
}
.nav.light .lang-toggle-btn:hover {
    color: var(--black, #0E0E0E);
}

@media (max-width: 768px) {
    .lang-toggle {
        margin-right: 0.5rem;
    }
    .lang-toggle-btn {
        padding: 0.3rem 0.55rem;
        font-size: 0.65rem;
    }
}