/* =========================================================
   PCG LANGUAGE SWITCH
   ========================================================= */

.language-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    flex-shrink: 0;

    min-height: 38px;
    padding: 4px 8px;

    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;

    background: rgba(255,255,255,.035);
    backdrop-filter: blur(12px);

    color: rgba(255,255,255,.42);
}

.language-option {
    display: grid;
    place-items: center;

    min-width: 28px;
    min-height: 28px;
    padding: 0 7px;

    border-radius: 999px;

    color: rgba(255,255,255,.5);

    font-family: var(--font-display);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;

    transition:
        background var(--transition),
        color var(--transition),
        transform var(--transition);
}

.language-option:hover {
    color: var(--white);
}

.language-option.active {
    background: var(--accent);
    color: var(--navy);
}

.language-option.active:hover {
    background: var(--accent-light);
    color: var(--navy);
    transform: translateY(-1px);
}

.language-divider {
    color: rgba(255,255,255,.22);
    font-size: 9px;
    font-weight: 700;
    user-select: none;
}


/* Keep the language switch visible on tablet/mobile.
   It replaces the old header CTA, which was hidden at 992px. */

@media (max-width: 992px) {
    .language-switch {
        margin-left: auto;
        margin-right: 2px;
    }
}

@media (max-width: 520px) {
    .language-switch {
        min-height: 34px;
        padding: 3px 6px;
        gap: 4px;
    }

    .language-option {
        min-width: 26px;
        min-height: 26px;
        padding: 0 6px;
        font-size: 8px;
    }

    .language-divider {
        font-size: 8px;
    }
}

@media (max-width: 380px) {
    .language-switch {
        min-height: 32px;
    }

    .language-option {
        min-width: 24px;
        min-height: 24px;
        padding: 0 5px;
    }
}