/*
 * durchumdurch.cz — vlastní vrstva nad Bootstrapem 5
 *
 * Nahrazuje css/grayscale.css (Start Bootstrap Grayscale 3.3.7, Bootstrap 3).
 * Vzhled zůstává stejný; mění se jen to, co Bootstrap 5 dělá jinak.
 *
 * Zásada: co umí utilita Bootstrapu (mb-0, d-flex, text-center, col-lg-8),
 * se tady neduplikuje. Vlastní třídy mají prefix dud- a jsou jen tam,
 * kde utilita nestačí.
 *
 * Pořadí sekcí odpovídá pořadí na stránce.
 */

/* ------------------------------------------------------------------ *
 * 1. Tokeny — jediné místo, kde se mění barvy a fonty
 * ------------------------------------------------------------------ */
:root {
    --dud-pozadi:        #000000;
    --dud-text:          #ffffff;
    --dud-akcent:        #EF447F;  /* odkazy, rámečky tlačítek — kontrast 5,8:1 na černé */
    --dud-akcent-hover:  #FFD6E4;  /* odkaz pod kurzorem — kontrast 16,0:1 na černé */
    --dud-text-tlumeny:  #9E9E9E;  /* odehrané koncerty — kontrast 7,8:1 na černé */


    --dud-pismo-text:    "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --dud-pismo-nadpis:  "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;

    /* Dvojice na každý obrázek: WebP pro prohlížeče, které ho umí (všechny
       od roku 2020), JPG jako záloha pro starší Safari. Soubory vyrábí
       skript nahled/prevod-obrazku.php. */
    --dud-obrazek-hero:      url("../img/les-02.jpg");
    --dud-obrazek-hero-set:  image-set(url("../img/les-02.webp") type("image/webp"),
                                       url("../img/les-02.jpg")  type("image/jpeg"));
    --dud-obrazek-zvuk:      url("../img/les-03.jpg");
    --dud-obrazek-zvuk-set:  image-set(url("../img/les-03.webp") type("image/webp"),
                                       url("../img/les-03.jpg")  type("image/jpeg"));

    /* Bootstrap si bere barvy odsud, takže se nikde níž nepíšou napevno. */
    --bs-body-bg:          var(--dud-pozadi);
    --bs-body-color:       var(--dud-text);
    --bs-body-font-family: var(--dud-pismo-text);
    /* Bootstrap 3 měl základní písmo 14 px a proklad 1,43; Bootstrap 5 má 16 px
       a 1,5. Bez tohohle by se posunula tabulka koncertů, popisky u fotek
       i formulář. Odstavce si velikost řídí samy níž. */
    --bs-body-font-size:   14px;
    --bs-body-line-height: 1.428571429;
    --bs-link-color:           var(--dud-akcent);
    --bs-link-hover-color:     var(--dud-akcent-hover);
    --bs-link-color-rgb:       239, 68, 127;
    --bs-link-hover-color-rgb: 255, 214, 228;
    --bs-border-color:     var(--dud-text-tlumeny);
    --bs-emphasis-color:   var(--dud-text);
}

/* ------------------------------------------------------------------ *
 * 2. Mřížka jako v Bootstrapu 3
 *
 * Bootstrap 5 má užší kontejnery (1140 px na xl) a navíc stupeň xxl.
 * Bez tohohle by se obsah na širokých monitorech posunul proti dnešku.
 * Až se web bude smět vizuálně posunout, je tenhle blok první na řadě
 * ke smazání — vrátí web ke standardnímu Bootstrapu.
 * ------------------------------------------------------------------ */
/* Bootstrap 3 měl mezi sloupci 30 px (15 px na stranu), Bootstrap 5 má 24 px.
   Užší mezery rozšíří text o 6 px a přelámou odstavce jinak. Nastavuje se
   na .row a .container, ne na :root — Bootstrap si proměnnou na .row přepisuje. */
.row, .container, .container-fluid { --bs-gutter-x: 30px; }

@media (min-width: 768px)  { .container { max-width: 750px; } }
@media (min-width: 992px)  { .container { max-width: 970px; } }
@media (min-width: 1200px) { .container { max-width: 1170px; } }

/* ------------------------------------------------------------------ *
 * 3. Základ a typografie
 * ------------------------------------------------------------------ */
html, body { width: 100%; height: 100%; }

/* Bootstrap 5 počítá velikost nadpisů ze šířky okna (h2 vyjde na 1366 px
   asi 33,5 px místo 30 px). Tady jsou pevné velikosti z Bootstrapu 3. */
h1 { font-size: 36px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 18px; }
h5 { font-size: 14px; }
h6 { font-size: 12px; }

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 35px;
    line-height: 1.1;
    text-transform: uppercase;
    font-family: var(--dud-pismo-nadpis);
    font-weight: 700;
    letter-spacing: 1px;
}

p {
    margin: 0 0 25px;
    font-size: 18px;
    line-height: 1.5;
}

@media (min-width: 768px) {
    p { margin: 0 0 35px; font-size: 20px; line-height: 1.6; }
}

/* Bootstrap 5 podtrhává odkazy ve výchozím stavu, Bootstrap 3 ne. */
a { text-decoration: none; transition: all 0.2s ease-in-out; }
a:hover, a:focus { text-decoration: none; }

.dud-light { font-weight: 400; }

/* Viditelné zaměření klávesnicí — Bootstrap 3 ho na tmavém pozadí neměl. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--dud-akcent);
    outline-offset: 2px;
}

::selection     { text-shadow: none; background: rgba(255, 255, 255, 0.2); }
img::selection  { background: transparent; }

/* ------------------------------------------------------------------ *
 * 4. Navigace
 *
 * Na mobilu černý pruh s linkou, od 768 px průhledná a po odrolování
 * zčerná (třídu .dud-nav-odrolovano přidává js/durchumdurch.js).
 * ------------------------------------------------------------------ */
.dud-navbar {
    margin-bottom: 0;
    border-bottom: 1px solid var(--dud-text-tlumeny);
    text-transform: uppercase;
    font-family: var(--dud-pismo-nadpis);
    background-color: var(--dud-pozadi);
}

.dud-navbar {
    --bs-navbar-padding-y: 0;
    --bs-navbar-brand-padding-y: 15px;
    --bs-navbar-brand-font-size: 18px;
}

.dud-navbar .navbar-brand {
    font-weight: 700;
    line-height: 20px;
}

.dud-navbar .navbar-nav .nav-link {
    --bs-nav-link-font-size: 14px;
    padding: 15px;
    line-height: 20px;
}
.dud-navbar .navbar-brand,
.dud-navbar .nav-link { color: var(--dud-text); }

.dud-navbar .nav-link {
    transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}

.dud-navbar .nav-link:hover,
.dud-navbar .nav-link:focus {
    color: var(--dud-akcent);
    background-color: transparent;
}

.dud-navbar .navbar-nav .nav-link.active {
    /* Světlý podklad, proto tmavý text: bílý by měl jen 2,68:1,
       černý má 7,84:1. Růžová by na světlé šedé nebyla vidět vůbec (1,35:1),
       takže aktivní položka pod kurzorem jen zesvětlí podklad. */
    color: var(--dud-pozadi);
    background-color: var(--dud-text-tlumeny);
}

.dud-navbar .navbar-nav .nav-link.active:hover,
.dud-navbar .navbar-nav .nav-link.active:focus {
    color: var(--dud-pozadi);
    background-color: var(--dud-text);
}

.dud-navbar .navbar-toggler {
    /* Dotykový cíl aspoň 44 × 44 px. Původních 67 × 20 px neprošlo ani
       minimem 24 × 24 podle WCAG 2.5.8.

       display se tu záměrně nenastavuje: Bootstrap tlačítko nad 768 px skrývá
       pravidlem .navbar-expand-md .navbar-toggler{display:none}, které má
       stejnou specificitu jako tohle. Vlastní display by ho přebilo pořadím
       a tlačítko by se objevilo i na desktopu. Zarovnání řeší blok níž,
       uvnitř media query. */
    min-height: 44px;
    padding: 0.5rem 0.9rem;
    color: var(--dud-text);
    background-color: rgba(255, 255, 255, 0.2);
    border: 0;
    font-size: 13px;
    letter-spacing: 1px;
}

.dud-navbar .navbar-toggler:hover { background-color: rgba(255, 255, 255, 0.3); }

@media (max-width: 767.98px) {
    /* Svislé zarovnání popisku s ikonou. Jen tam, kde je tlačítko vidět —
       nad tímhle bodem si display řídí Bootstrap. */
    .dud-navbar .navbar-toggler {
        display: inline-flex;
        align-items: center;
        gap: 0.5em;
    }

    /* Rozbalená nabídka se lepila na okraje navigace. */
    .dud-navbar .navbar-collapse { padding: 0.5rem 0 0.75rem; }
    .dud-navbar .navbar-nav .nav-link { padding-top: 12px; padding-bottom: 12px; }
}

@media (min-width: 768px) {
    .dud-navbar {
        padding: 20px 0;
        border-bottom: none;
        letter-spacing: 1px;
        background: transparent;
        transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
    }
    .dud-navbar.dud-nav-odrolovano {
        padding: 0;
        background: var(--dud-pozadi);
        border-bottom: 1px solid var(--dud-text-tlumeny);
    }
}

/* ------------------------------------------------------------------ *
 * 5. Úvodní obrazovka
 * ------------------------------------------------------------------ */
.dud-hero {
    display: table;
    width: 100%;
    height: auto;
    padding: 100px 0;
    text-align: center;
    background: var(--dud-obrazek-hero) no-repeat bottom center scroll;
    background-image: var(--dud-obrazek-hero-set);
    background-color: var(--dud-pozadi);
    background-size: cover;
}

.dud-hero-obsah { display: table-cell; vertical-align: middle; }
.dud-hero-nadpis { font-size: 36px; }
.dud-hero-text   { font-size: 18px; }

@media (min-width: 768px) {
    .dud-hero { height: 100%; padding: 0; }
    .dud-hero-nadpis { font-size: 100px; }
    .dud-hero-text   { font-size: 26px; }
}

/* Kruhové tlačítko se šipkou dolů pod nadpisem. */
.dud-btn-kruh {
    /* Šipka se dřív držela v horní části kolečka: odsazení 7px/16px a volný
       řádkový proklad ji posouvaly nahoru. Flexbox ji drží v obou osách
       uprostřed bez ohledu na velikost ikony. */
    --bs-btn-border-radius: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    margin-top: 15px;
    padding: 0;
    border: 2px solid var(--dud-text);
    border-radius: 100%;
    font-size: 40px;
    line-height: 1;
    color: var(--dud-text);
    background: transparent;
    transition: background 0.3s ease-in-out;
}

.dud-btn-kruh:hover,
.dud-btn-kruh:focus {
    color: var(--dud-text);
    background: rgba(255, 255, 255, 0.1);
}

.dud-btn-kruh:hover i { animation: dud-pulz 1.5s infinite linear; }

@keyframes dud-pulz {
      0% { transform: scale(1); }
     50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .dud-btn-kruh:hover i { animation: none; }
    a, .dud-navbar, .dud-navbar .nav-link, .btn { transition: none; }
}

/* ------------------------------------------------------------------ *
 * 6. Sekce
 * ------------------------------------------------------------------ */
.dud-sekce { padding-top: 100px; }

.dud-sekce-zvuk {
    width: 100%;
    padding: 50px 0;
    /* Fotka je místy skoro bílá a bílý text na ní mizel. Fotka zůstává
       nedotčená; čitelnost drží vrstvený stín — těsný obrys kolem písmen
       plus měkké ztmavení okolí. Tlačítko má vlastní podklad, na obrysu
       by vypadalo špinavě. */
    text-shadow:
        0 0  3px rgba(0, 0, 0, 0.95),
        0 1px 3px rgba(0, 0, 0, 0.95),
        0 2px 12px rgba(0, 0, 0, 0.9),
        0 0 30px rgba(0, 0, 0, 0.75);
    background: var(--dud-obrazek-zvuk) no-repeat center center scroll;
    background-image: var(--dud-obrazek-zvuk-set);
    background-color: var(--dud-pozadi);
    background-size: cover;
}

/* Tlačítka v téhle sekci si stín neberou — mají vlastní tmavý podklad,
   aby byla čitelná i s rámečkem. */
.dud-sekce-zvuk .btn {
    text-shadow: none;
    background-color: rgba(0, 0, 0, 0.6);
}

.dud-sekce-zvuk .btn:hover,
.dud-sekce-zvuk .btn:focus { background-color: var(--dud-akcent); }

@media (min-width: 767px) {
    .dud-sekce { padding-top: 230px; }
    .dud-sekce-zvuk { padding: 100px 0; }
}

/* ------------------------------------------------------------------ *
 * 7. Tlačítka
 *
 * Bootstrap 5 nemá .btn-default. Vzhled se skládá z jeho vlastních
 * proměnných, takže se nepřepisuje žádná hotová třída.
 * ------------------------------------------------------------------ */
/* Rozměry z Bootstrapu 3. Až se vzhled bude smět posunout, tenhle blok
   se smaže a tlačítka převezmou dnešní výchozí velikosti Bootstrapu. */
.btn {
    --bs-btn-border-radius: 0;
    --bs-btn-font-size: 14px;
    --bs-btn-padding-y: 6px;
    --bs-btn-padding-x: 12px;
    --bs-btn-line-height: 1.428571429;
    text-transform: uppercase;
    font-family: var(--dud-pismo-nadpis);
    font-weight: 400;
    transition: all 0.3s ease-in-out;
}

.btn-sm {
    --bs-btn-font-size: 12px;
    --bs-btn-padding-y: 5px;
    --bs-btn-padding-x: 10px;
}

.btn-lg {
    --bs-btn-font-size: 18px;
    --bs-btn-padding-y: 10px;
    --bs-btn-padding-x: 16px;
    --bs-btn-line-height: 1.3333333;
}

.dud-btn {
    --bs-btn-color: var(--dud-akcent);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--dud-akcent);
    --bs-btn-hover-color: var(--dud-pozadi);
    --bs-btn-hover-bg: var(--dud-akcent);
    --bs-btn-hover-border-color: var(--dud-akcent);
    --bs-btn-focus-shadow-rgb: 239, 68, 127;
    --bs-btn-active-color: var(--dud-pozadi);
    --bs-btn-active-bg: var(--dud-akcent);
    --bs-btn-active-border-color: var(--dud-akcent);
    --bs-btn-border-width: 1px;
}

/* ------------------------------------------------------------------ *
 * 8. Koncerty
 * ------------------------------------------------------------------ */
.dud-koncerty {
    --bs-table-bg: var(--dud-pozadi);
    --bs-table-color: var(--dud-text);
    --bs-table-striped-bg: var(--dud-pozadi);
    --bs-table-striped-color: var(--dud-text);
    --bs-table-border-color: var(--dud-text-tlumeny);
}

/* Odsazení nese odkaz, ne buňka. Dřív bylo na buňce a odkaz pokrýval jen
   řádek textu — okolní místo vypadalo klikatelně, ale nebylo. Dotyková
   plocha tím vyrostla z 20 na 36 px, aniž by tabulka narostla o pixel. */
.dud-koncerty > :not(caption) > * > * {
    padding-top: 0;
    padding-bottom: 0;
}

.dud-koncerty td a {
    display: block;
    padding: 0.5rem 0;
    color: var(--dud-text);
    text-decoration: none;
}

.dud-koncerty td:not(:has(a)) { padding: 0.5rem 0; }

.dud-koncerty td a:hover,
.dud-koncerty td a:focus { color: var(--dud-akcent); }

.dud-koncerty .dud-odehrany td,
.dud-koncerty .dud-odehrany td a { color: var(--dud-text-tlumeny); }

.dud-koncerty .dud-datum { width: 20%; padding: 0.5rem 0.5rem 0.5rem 0; }

/* ------------------------------------------------------------------ *
 * 9. Formulář
 * ------------------------------------------------------------------ */
.form-label { font-weight: 400; }

.dud-formular .form-control {
    min-height: 44px;   /* dotykový cíl; dřív 34 px */
    font-size: 14px;
    line-height: 1.428571429;
    padding: 6px 12px;
    border-radius: 4px;
    color: var(--dud-text);
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--dud-text-tlumeny);
}

.dud-formular .form-control::placeholder { color: rgba(255, 255, 255, 0.5); }

.dud-formular .form-control:focus {
    color: var(--dud-text);
    background-color: rgba(255, 255, 255, 0.08);
    border-color: var(--dud-akcent);
    box-shadow: 0 0 0 0.25rem rgba(239, 68, 127, 0.25);
}

.dud-povinne { color: var(--dud-akcent); }

/* Tlumený text na tmavém pozadí. Utilita text-body-secondary je tu
   nečitelná — počítá se světlým podkladem. */
.dud-text-tlumeny { color: var(--dud-text-tlumeny); }

/* ------------------------------------------------------------------ *
 * 10. Patička
 * ------------------------------------------------------------------ */
footer { padding: 50px 0; }
footer p { margin: 0; }
footer ul { margin-bottom: 10px; }  /* Bootstrap 5 dává seznamům 1rem, Bootstrap 3 měl 10 px */

@media (max-width: 1199px) { .dud-site { margin-top: 15px; } }

@media (max-width: 767px) {
    .dud-site .list-inline-item {
        display: block;
        margin-bottom: 20px;
        margin-right: 0;
    }
    .dud-site .list-inline-item:last-child { margin-bottom: 0; }

    /* Telefonní číslo navazovalo těsně na poslední tlačítko sociální sítě. */
    footer .d-md-none { margin-top: 28px; }
}

/* ------------------------------------------------------------------ *
 * 11. Obsah z editoru WLB
 *
 * Komponenty se vkládají ve WYSIWYG editoru a nesou třídy, které nejdou
 * změnit z kódu — jsou uložené v databázi. Proto tu zůstávají názvy
 * z původní šablony.
 * ------------------------------------------------------------------ */
/* Odstavec pod nadpisem na úvodní obrazovce. */
.intro-text { font-size: 18px; }
@media (min-width: 768px) { .intro-text { font-size: 26px; } }

/* Třídy Bootstrapu 3, které editor vkládá do textů a Bootstrap 5 už nezná.
   Bez nich by tlačítka v obsahu ztratila rámeček a obrázky by přetékaly.
   Smazat je půjde teprve tehdy, až budou všechny komponenty v adminu WLB
   přepsané na názvy z Bootstrapu 5. */
.btn-default {
    --bs-btn-color: var(--dud-akcent);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--dud-akcent);
    --bs-btn-hover-color: var(--dud-pozadi);
    --bs-btn-hover-bg: var(--dud-akcent);
    --bs-btn-hover-border-color: var(--dud-akcent);
    --bs-btn-active-color: var(--dud-pozadi);
    --bs-btn-active-bg: var(--dud-akcent);
    --bs-btn-active-border-color: var(--dud-akcent);
    --bs-btn-border-width: 1px;
    --bs-btn-border-radius: 0;
}

.img-responsive { max-width: 100%; height: auto; }
.img-circle     { border-radius: 50%; }
.text-muted     { color: var(--dud-text-tlumeny) !important; }
.pull-left      { float: left; }
.pull-right     { float: right; }