/*
 * Alternativní receptury — sdílená komponenta
 * Markup: pages-parts/shared/alternatives-list.php
 * Používá se na /sestaveno/ (rozbalovací) a v Moji psi (statická, viz $collapsible).
 *
 * Barvy drží brand paletu: švestková #3d182c, jantarová #f59e05.
 */

/* --- Klikací řádek "Preferuje X jiné maso?" ---
 *
 * Musí číst jako ODKAZ, ne jako nadpis sekce. Proto podtržení, běžný
 * (menší) font a jantarová barva — ne nadpisová Katahdin.
 *
 * POZOR na velikost písma: obalem je <h3>, kterému šablona dává velký
 * font-size. Relativní jednotka (em) se s ním násobí — 1.15em vycházelo
 * 32 px a vypadalo to jako nadpis. Proto rem, absolutně.
 */

.alternatives-heading {
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: normal;
}

.alternatives-toggle {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    width: auto;          /* přes celou šířku to působilo jako hlavička sekce */
    padding: .25rem 0;
    border: 0;
    background: transparent;
    color: #f59e05;
    text-align: left;
    cursor: pointer;
}

.alternatives-toggle:focus {
    outline: none;
}

/* Klávesnice musí ohnisko vidět, myš ne — proto focus-visible zvlášť. */
.alternatives-toggle:focus-visible {
    outline: 2px solid #f59e05;
    outline-offset: 2px;
}

/* Barva napřímo, ne inherit — na .alternatives-toggle-text mají šablonové
 * styly vlastní pravidlo se stejnou specificitou a záleželo by na pořadí. */
.alternatives-toggle-text {
    color: #f59e05;
    font-family: inherit;
    /* 18 px — 16 px bylo moc drobné, 32 px (původní 1.15em zděděné z <h3>)
     * zase vypadalo jako nadpis sekce. Rem, ať se to s <h3> nenásobí. */
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: normal;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.alternatives-toggle:hover,
.alternatives-toggle:hover .alternatives-toggle-text {
    color: #d98a04;
}

.alternatives-toggle-arrow {
    flex: 0 0 auto;
    width: 11px;
    transition: transform .2s ease;
}

.alternatives-toggle[aria-expanded="true"] .alternatives-toggle-arrow {
    transform: rotate(180deg);
}

/* Odsazení seznamu od přepínače — jen v rozbalovací variantě. */
.alternatives-collapse .alternatives-list {
    padding-top: .85rem;
}

.alternatives-static .alternatives-list {
    margin-top: 1rem;
}

/* --- Položky seznamu --- */

.alternatives-list .alternative-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .5rem;
    padding: .75rem 1rem;
    border: 1px solid #ece7ea;
    border-radius: 12px;
    background: #fff;
    transition: border-color .15s ease;
}

.alternatives-list .alternative-item:last-child {
    margin-bottom: 0;
}

.alternatives-list .alternative-item:hover {
    border-color: #f0d9a8;
}

.alternatives-list .alternative-name {
    color: #3d182c;
}

/* Na úzkém mobilu se název a tlačítko nevejdou vedle sebe. */
@media (max-width: 480px) {
    .alternatives-list .alternative-item {
        flex-direction: column;
        align-items: stretch;
        gap: .6rem;
        text-align: center;
    }
}