/**
 * Přepínač větví (Škola/Školka) — homepage.
 *
 * Filtrování obsahu (skrývání karet podle vybrané větve) řeší výhradně JS
 * (vetve.js přes atribut "hidden") — tento soubor stylizuje jen samotný
 * přepínač, žádná pravidla tu obsah neskrývají (progressive enhancement).
 */

.zs-branch-switch {
    display: inline-flex;
    gap: var(--space-1, 4px);
    padding: 4px;
    background: var(--gray-100, #F3F4F6);
    border-radius: var(--radius-full, 9999px);
}

.zs-branch-switch__btn {
    appearance: none;
    border: none;
    background: transparent;
    padding: var(--space-2, 8px) var(--space-6, 24px);
    border-radius: var(--radius-full, 9999px);
    font-family: var(--font-sans, inherit);
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-600, #4B5563);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.zs-branch-switch__btn:hover {
    color: var(--gray-900, #111827);
}

.zs-branch-switch__btn[aria-selected="true"] {
    background: var(--white, #FFFFFF);
    color: var(--primary-green-dark, #1F5D3F);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}

.zs-branch-switch__btn:focus-visible {
    outline: 2px solid var(--primary-green, #2D8659);
    outline-offset: 2px;
}