/*
 * Opravy přístupnosti podle auditu MIRRI SR (28.–31. 8. 2026).
 *
 * Načítá se za frontend.css a custom.css (META-HEAD.php) a necompiluje se
 * webpackem — build frontendu (webpack 1, node-sass 3) na současném Node
 * nejde spustit. Při upgradu stacku patří tyto styly do app/assets/less.
 */


/* ==========================================================================
   Hlavní menu — rozbalování tlačítkem, klávesnicí a Esc (KS 2.1.1, 2.5.1, 1.4.13)
   Stav řídí a11y.js třídou .is-open. Vše je pod #menu.a11y-menu, takže bez
   JS zůstane původní chování přes :hover.
   ========================================================================== */

#pageHeader #menu.a11y-menu > li:hover .dropdown-menu {
    display: none;
}
#pageHeader #menu.a11y-menu > li.is-open > .dropdown-menu {
    display: block;
}

#menu.a11y-menu > li.dropdown {
    display: flex;
    flex-wrap: wrap;
}
/* Šipka si bere místo z pravého odsazení odkazu (10 px), celková šířka
   položky se nemění — jinak se menu na ≥ 992 px zalomí pod logo. */
#menu.a11y-menu > li.dropdown > a {
    padding-right: 0;
}
#menu.a11y-menu > li.dropdown.active > a:after {
    right: 5px;
}

.submenu-toggle {
    position: relative;
    flex: 0 0 auto;
    width: 10px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
}
.submenu-toggle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 1px;
    margin-top: -2px;
    border: 4px solid transparent;
    border-top-color: currentColor;
    border-bottom: 0;
}
#menu.a11y-menu > li.is-open > .submenu-toggle::before {
    transform: rotate(180deg);
}

/* Otevřená položka vypadá stejně jako při najetí myší. */
#menu.a11y-menu > li.is-open > a,
#menu.a11y-menu > li:hover > .submenu-toggle,
#menu.a11y-menu > li.is-open > .submenu-toggle {
    background: #ffffff;
    color: #dc002e;
}
#pageHeader.hpMenu #menu.a11y-menu > li.is-open > a,
#pageHeader.hpMenu #menu.a11y-menu > li:hover > .submenu-toggle,
#pageHeader.hpMenu #menu.a11y-menu > li.is-open > .submenu-toggle {
    background: #dc002e;
    color: #ffffff;
}

@media (max-width: 767px) {
    #menu.a11y-menu > li.dropdown > a {
        flex: 1 1 0;
        background-image: none;
    }
    #menu.a11y-menu > li.dropdown > .submenu-toggle {
        width: 56px;
    }
    #menu.a11y-menu > li.dropdown > .submenu-toggle::before {
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
    }
    #menu.a11y-menu > li.dropdown > a {
        padding-right: 30px;
    }
    #menu.a11y-menu > li.dropdown > .dropdown-menu {
        flex: 0 0 100%;
    }
    #menu.a11y-menu > li.is-open {
        background: #a50f14;
    }
    #menu.a11y-menu > li.is-open > a,
    #menu.a11y-menu > li.is-open > .submenu-toggle,
    #menu.a11y-menu > li:hover > .submenu-toggle {
        background: transparent;
        color: #ffffff;
    }
    #menu.a11y-menu > li.is-open > .dropdown-menu {
        margin-left: 30px;
        padding-bottom: 15px;
    }
}


/* ==========================================================================
   Viditelné zaměření (KS 2.4.7)
   Styly webu na čtrnácti místech zaměření potlačovaly (outline: none).
   Jednotný dvoubarevný rámeček — bílý vnitřní a tmavý vnější — je vidět na
   bílém i červeném podkladu (tmavý na #dc002e 3,3 : 1, bílý 5,1 : 1).
   !important je tu záměrně: rámeček zaměření musí vyhrát nad všemi
   staršími pravidly, včetně těch s vyšší specifičností.
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible {
    outline: 3px solid #1b1b1b !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #ffffff !important;
}

/* Cíl skip linku není ovládací prvek, rámeček kolem celého obsahu nechceme. */
#main:focus {
    outline: none !important;
    box-shadow: none !important;
}


/* ==========================================================================
   Přeskočení na hlavní obsah (KS 2.4.1)
   Mimo obrazovku, dokud ho nezaměří klávesnice.
   ========================================================================== */

.skip-link {
    position: absolute;
    top: -200px;
    left: 8px;
    z-index: 10000;
    padding: 12px 18px;
    background: #1b1b1b;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    text-decoration: underline;
}
.skip-link:focus {
    top: 8px;
    color: #ffffff;
}


/* ==========================================================================
   Programový filtr (KS 2.4.3, 2.4.7)
   ========================================================================== */

/* Přepínač filtru je jen pro ≤ 991 px. Na desktopu byl 0×0 px, ale v Tabu. */
@media (min-width: 992px) {
    #programMenu-toggle {
        display: none;
    }
}

/* Pod 768 px je hlavička statická a její z-index 100 neplatí: přepínač filtru
   (position: fixed, z-index 10) ležel přes rozbalené menu. Relativní pozice
   z-index zapne, rozložení hlavičky nemění. Kompaktní #pageHeader.fixed
   má vyšší specificitu a zůstává fixed. */
@media (max-width: 767px) {
    #pageHeader {
        position: relative;
    }
}

/* Plugin chosen drží vlastní input mimo obrazovku — zaměření ukázat
   na viditelném poli. */
.chosen-container-active .chosen-single,
.chosen-container-active .chosen-choices {
    outline: 3px solid #1b1b1b !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #ffffff !important;
}


/* ==========================================================================
   Newsletter (KS 3.3.2, 3.3.3, 1.4.3)
   ========================================================================== */

#newsletter .newsletter-label {
    display: block;
    margin: 0 0 6px 0;
    font-size: 15px;
    font-weight: bold;
    color: #1b1b1b;
}
#newsletter .required-mark {
    font-weight: normal;
}
#newsletter .newsletter-error {
    margin: 6px 0 0 0;
    font-size: 14px;
    font-weight: bold;
    color: #b40000;          /* 7,1 : 1 na bílé */
}
#newsletter .form-control[aria-invalid="true"] {
    border-color: #b40000;
    border-width: 2px;
}
/* Placeholder #808080 (custom.css) měl na bílé 3,95 : 1 — nález auditu;
   obecný #b5bcc6 z frontend.css dokonce 1,9 : 1. Každý prefix zvlášť —
   selektor, kterému prohlížeč nerozumí, by shodil celé pravidlo. */
.form-control::placeholder,
#newsletter .form-control::placeholder {
    color: #666666;          /* 5,7 : 1 */
    opacity: 1;
}
.form-control::-webkit-input-placeholder,
#newsletter .form-control::-webkit-input-placeholder {
    color: #666666;
}
.form-control::-moz-placeholder,
#newsletter .form-control::-moz-placeholder {
    color: #666666;
    opacity: 1;
}


/* ==========================================================================
   Kontrast textu (KS 1.4.3) — minimálně 4,5 : 1 (velký text 3 : 1).
   Odstíny jsou ztmavené se zachováním tónu, jen natolik, aby splnily limit.
   ========================================================================== */

/* Modrošedá #8897b0 (2,96 : 1 na bílé) -> #637695 (4,61 : 1).
   Datumy aktualit (nález auditu), popisky formulářů, citace, informační
   texty u představení a funkce osob. */
label,
blockquote footer,
.shareBox,
#news .item .date,
#performance .item .textBox .links .infoText,
#actorDetail .actorPerformance .rightBox .infoText,
#cartNav .list .item,
.peopleInTheater td.position {
    color: #637695;
}

/* Šedá #848484 (3,74 : 1 na bílé, 3,46 : 1 na #f6f6f6) -> #6e6e6e
   (5,1 : 1 a 4,72 : 1). Drobečková navigace, minulé termíny představení. */
#breadcrumb li,
#breadcrumb .breadcrumb > .active,
#whenWePlay .item.disabled .date,
#whenWePlay .item.disabled .scene {
    color: #6e6e6e;
}

/* Šedá #777 z Bootstrapu (4,48 : 1). */
.text-muted,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
    color: #6e6e6e;
}

/* Oranžový štítek scény: bílá na #dc4300 (4,33 : 1) -> na #d44100 (4,61 : 1). */
#performance .item .textBox .labels .highlightLabel,
#performance .item .textBox .date .label.scene13,
#performance .item .textBox .date .label.scene14 {
    background: #d44100;
}


/* ==========================================================================
   Přiblížení, přizpůsobení a rozestupy textu (KS 1.4.4, 1.4.10, 1.4.12)
   Obsah nesmí při přiblížení na 200 %, šířce 320 px ani při zvětšených
   rozestupech zmizet, useknout se ani vyžadovat posouvání do dvou směrů.
   Odsazení obsahu pod hlavičkou a umístění podmenu řídí a11y.js.
   ========================================================================== */

/* Logo bylo mezi 768 a 991 px skryté (display: none) — i při přiblížení
   1920 px na 200 % (= 960 px) zmizelo. */
@media (min-width: 768px) and (max-width: 991px) {
    #logo {
        display: block;
        position: relative;
        z-index: 2;   /* průhledný blok navigace přes logo zachytával kliknutí */
    }
}

/* Podmenu, které se nevejde na obrazovku: a11y.js mu omezí šířku
   a dlouhé položky se zalomí místo přetečení vpravo. */
#menu.a11y-menu .dropdown-menu.is-constrained > li > a {
    min-width: 0;
    white-space: normal;
}
#menu.a11y-menu .dropdown-menu.is-constrained {
    overflow-y: auto;
}

@media (max-width: 767px) {
    /* Mobilní podmenu přetékalo o odsazení 30 px. */
    #menu.a11y-menu > li.is-open > .dropdown-menu {
        flex-basis: calc(100% - 30px);
        max-width: calc(100% - 30px);
    }
    #menu.a11y-menu .dropdown-menu > li > a {
        white-space: normal;
    }
}

/* Seznam osob: pevná výška s overflow: hidden usekávala delší jména
   a funkce při zvětšení textu a rozestupů. Výška je teď jen minimum
   (původní hodnoty podle šířky) a seznam je flexbox: vyšší položka
   natáhne svou řadu, místo aby se o ni zasekla plovoucí položka
   z další řady („schody"). Rozmístění vodorovně je stejné jako u float. */
.peopleList {
    display: flex;
    flex-wrap: wrap;
}
.peopleList::before,
.peopleList::after {
    display: none; /* clearfix ve flexboxu netřeba, byl by položkou řady */
}
@media (min-width: 1200px) {
    /* frontend.css dává .peopleList margin-bottom: -50px. U float ho rušil
       clearfix za seznamem (skupina .clearfix nebo div.clearfix za ní):
       další obsah začínal až pod položkami. Jen skupina .borderTop hned za
       skupinou bez clearfixu (/subor, skupiny podle funkce) začínala o 50 px
       výš — její margin-top 42 px ležel přes spodek položek. Ve flexboxu by
       -50 px platilo vždy, proto nula a posun jen v tom jednom případě.
       Seznamy v detailu inscenace plavou a mají vlastní okraje. */
    .peopleList {
        margin-bottom: 0;
    }
    .peopleGroup:not(.clearfix) + .peopleGroup.borderTop {
        margin-top: -8px;
    }
}
.peopleList .item {
    height: auto;
    min-height: 300px;
    overflow: visible;
}
@media (max-width: 1199px) {
    .peopleList .item {
        min-height: 250px;
    }
    #performanceDetail #paneCast .peopleList .item {
        height: auto;
        min-height: 260px;
    }
}
@media (max-width: 479px) {
    #performanceDetail #paneCast .peopleList .item {
        min-height: 205px;
    }
}
.peopleList .item .name,
.peopleList .item .function {
    overflow-wrap: anywhere;
}

/* Boční submenu: dlouhá slova (PREVÁDZKOVATEĽA) přetékala z červeného
   pole ven, kde byla bílá na bílé. */
#submenu a {
    overflow-wrap: anywhere;
    hyphens: auto;
}

/* Newsletter měl na ≤ 991 px pevnou šířku 325 px — na 320 px přetékal. */
@media (max-width: 991px) {
    #newsletter .controlBox {
        width: auto;
        max-width: 325px;
    }
}

/* Fotky herců (záložka Obsadenie) na ≤ 479 px: obrázek 139 px v rámu
   104 px se ořezával — 104 px odpovídá poměru stran fotky. */
@media (max-width: 479px) {
    #performanceDetail #paneCast .peopleList .item img {
        width: 104px;
    }
}

/* Záložky pod 480 px: frontend.css je ořezával na 80 × 35 px (overflow: hidden),
   takže „Získavanie bodov", „Obsadenie" apod. byly useknuté (nález auditu na 320 px)
   a text zalomený pod okraj ležel pod panelem. Záložka je teď široká jako svůj název
   a řada se zalomí; slova se nedělí. */
@media (max-width: 479px) {
    .tabs li {
        max-width: none;
        max-height: none;
        overflow: visible;
    }
    .tabs li a {
        overflow-wrap: normal;
    }
}

/* Tlačítko „Zobraziť ďalšie fotografie" bylo na 320 px široké 425 px. */
.moreBottomLink .btn {
    max-width: 100%;
    white-space: normal;
}

/* Obsah z CMS na úzké obrazovce (KS 1.4.10): obrázky, videa a dlouhé adresy
   v odkazech nesmí vytlačit stránku do vodorovného posouvání. !important
   přebíjí rozměry, které editor vkládá inline (style="width: …; height: …"). */
.wsw img,
#performanceDetail .text img,
#newsDetail .text img {
    max-width: 100% !important;
    height: auto !important;
}
iframe.youtube-player {
    max-width: 100%;
    height: auto;
    aspect-ratio: 514 / 300;
}
.wsw a,
#performanceDetail .text a,
#newsDetail .text a {
    overflow-wrap: anywhere;
}
/* Dlouhé nezlomitelné řetězce v textu z CMS — e-mailová adresa za „E-mailom: "
   (/vstupenky), slova spojená   (perex aktuality) — na telefonu vytlačily
   stránku do posouvání do stran. break-word zalomí jen to, co se nevejde. */
#main {
    overflow-wrap: break-word;
}


/* ==========================================================================
   Cookie lišta (služba třetí strany cookie-script.com) — KS 2.4.3, 1.4.10, 1.4.4
   Widget vkládá markup přímo do stránky, takže jde upravit vlastními styly.
   Svůj <style> vkládá až za náš stylopis — proto prefix body kvůli specifičnosti.
   ========================================================================== */

/* Skryté části widgetu (sbalené podrobnosti, neaktivní záložka) mají výšku 0
   a průhlednost 0, ale visibility: visible — jejich prvky zůstávaly v pořadí
   Tabu (18 u podrobností, 14 u deklarace — nález auditu). */
body #cookiescript_injected .cookiescript_hidden {
    visibility: hidden;
}

/* Rozbalené podrobnosti: obsah záložek měl pevnou výšku 40 px s overflow:
   hidden (na 320 px vidět jeden řádek — nález auditu), záložky 36 px
   (useknutý text), celý panel max. 350 px. Teď se roztáhnou a roluje lišta
   jako celek; jen deklarace cookies (datová tabulka) má vlastní posuvník. */
body #cookiescript_injected #cookiescript_cookietablewrap:not(.cookiescript_hidden) {
    max-height: none !important;
    height: auto !important;
}
/* Záložky i panel jsou položky sloupcového flexboxu omezeného výškou
   obrazovky — s flex-shrink: 1 je prohlížeč smrskl na min-height. */
body #cookiescript_injected #cookiescript_cookietablewrap,
body #cookiescript_injected #cookiescript_maintabs,
body #cookiescript_injected #cookiescript_tabscontent {
    flex-shrink: 0 !important;
}
body #cookiescript_injected #cookiescript_maintabs,
body #cookiescript_injected #cookiescript_maintabs > div {
    height: auto !important;
    min-height: 36px;
}
body #cookiescript_injected #cookiescript_tabscontent {
    height: auto !important;
    overflow: visible !important;
}
body #cookiescript_injected #cookiescript_reportwrap {
    max-height: 50vh !important;
}
/* Text záložky „O súboroch cookie" měl pevnou výšku 180 px — při zvětšení
   textu se ořízl. */
body #cookiescript_injected #cookiescript_aboutwrap:not(.cookiescript_hidden) {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Neaktivní záložka podrobností: černá na #5d5d5d (3,21 : 1 — nález auditu
   „podobné porušení v cookie liště"). Bílá na #5d5d5d má 6,6 : 1. */
body #cookiescript_injected #cookiescript_maintabs > div:not(.cookiescript_active) {
    color: #ffffff !important;
}