/* =================================================================== */
/* FINÁLNÍ A VYČIŠTĚNÝ SOUBOR global.css v2.0               */
/* =================================================================== */

/*
====================================================================
OBSAH / TABLE OF CONTENTS
--------------------------------------------------------------------
1) CSS Reset
2) Globální proměnné (:root)
3) Základní styly a layout
4) Komponenty
5) Hlavička (Header) a Navigace
6) Patička (Footer)
7) Utility a Animace
    7.1) Reduced Motion Policy (RM-01..RM-05)
8) Responzivní úpravy (Media Queries)
====================================================================
Poznámka: Tento soubor je organizován tak, aby se minimalizovaly
vedlejší efekty CSS kaskády. Pořadí bloků reduced‑motion (RM-01..RM-05)
je záměrné – neměnit, pokud nechcete změnit chování.
*/

/* ========== ČÁST 1: CSS Reset ========== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
    width: 100%;
    line-height: 1;
}

html {
    overflow-y: scroll;
    /* Oprava poskakování stránky */
}

ol,
ul {
    list-style: none;
}

img,
svg,
video,
canvas {
    display: block;
    max-width: 100%;
    height: auto;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
    border: none;
    background: none;
    padding: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

a {
    text-decoration: none;
    color: inherit;
}

/* ========== ČÁST 2: Globální proměnné (:root) ========== */
@font-face {
    font-family: 'Alkatra';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/kaushan-script.ttf') format('truetype');
}

:root {
    /* Barvy */
    --primary-color: rgb(255, 218, 11);
    --text-color: #f3fd9d;
    --text-color-alt: #f3d9a0;
    --bg-color: #386164;
    --bg-dark: #181616;
    --bg-dark-transparent: rgba(24, 22, 22, 0.9);
    --footer-bg: rgba(4, 44, 32, 0.5);
    --footer-text: #f7fcd3;

    /* Stíny */
    --text-shadow: 0 0 10px rgb(0 0 0 / 7%), 0 0 20px rgba(0, 0, 0, 0.5);
    --text-shadow-nadpis: 1px 2px 0 #000, 0px -2px 0 #000, 2px 3px 0 #000, 1px -2px 0 #000, 4px 4px 3px rgba(0, 0, 0, .9), 0px 5px 4px rgba(0, 0, 0, .85), 6px 6px 5px rgba(0, 0, 0, .8), 8px 8px 8px rgba(0, 0, 0, .75), 10px 10px 10px rgba(0, 0, 0, .7), 12px 12px 12px rgba(0, 0, 0, .65);
    --text-shadow-logo: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 2px 2px 0 #000, 3px 3px 0 #000, 4px 4px 0 #000, 5px 5px 0 #000, 0 0 10px rgba(255, 218, 11, 0.3), 0 0 20px rgba(0, 0, 0, 0.5);
    --box-shadow: -16px 9px 0px rgba(0, 0, 0, 0.568), inset 0 0 30px rgba(17, 17, 17, 0.377);
    --box-shadow-icon: -4px 2px 0px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(17, 17, 17, 0.25);
    --box-shadow-up: -6px 2px 0px rgba(0, 0, 0, 0.87), inset 0 0 30px rgba(17, 17, 17, 0.377);

    /* Rozvržení a velikosti */
    --container-width: 1200px;
    --header-height: 70px;
    --border-radius: 8px;

    /* Typografie */
    --font-logo: 'Kaushan Script', cursive;
    --font-heading: 'Alkatra', serif;
    /* Používáme vlastní webfont (Anton) jako náhradu za Impact, který na Android zařízeních chybí. */
    --font-heading-impact: 'Anton', 'Impact', 'Arial Black', system-ui, sans-serif;
    --font-text: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    --font-size-base: 14px;
    --line-height-normal: 1.5;

    /* Velikosti pro Hero nadpis */
    --hero-h2-size: clamp(1.5rem, 10.5vw, 5.5rem);
    --hero-h3-ratio: 0.40;

    /* Motion tokens (s fallbacky v deklaracích přechodů) */
    --motion-interactive: 0.65s;
    /* např. transform u menu odkazů */
    --motion-interactive-fast: 0.50s;
    /* filter/border-color u odkazů */
    --motion-small: 0.25s;
    /* malé UI prvky (logo, btn) */
    --motion-component: 0.30s;
    /* běžné komponenty/hover */
    --motion-menu-transform: 1.20s;
    /* vysouvací panel menu (transform) */
    --motion-menu-opacity: 0.90s;
    /* vysouvací panel menu (opacity) */
    --motion-logo: var(--motion-small, 0.25s);
    /* specifický token pro logo */
}


/* ========== ČÁST 3: Základní styly a layout ========== */
body {
    background-image: url(../img/tapeta.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    min-height: 100vh;
    font-family: var(--font-text);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-x: hidden;
}

body.menu-open {
    overflow: hidden;
}

#content {
    flex: 1;
    width: 100%;
    margin: 0 auto;
    position: relative;
    padding-top: 240px;
    z-index: 1;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
}

/* Skrytý H1, hlavní nadpis je vizuálně H2 */
#content h1 {
    display: none;
}

@media (max-width: 460px) {
    #content {
        padding-top: 200px;
    }
}

/* ========== ČÁST 4: Komponenty ========== */

/* --- Tlačítko "Nahoru" --- */
#nahoru {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background-color: var(--bg-color);
    border-radius: 50%;
    border: 1px solid #ffbb01;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
    z-index: 2147483000;
    box-shadow: var(--box-shadow-up);
}

#nahoru.visible {
    opacity: 1;
    visibility: visible;
}

#nahoru i {
    color: var(--text-color);
    font-size: 1.5em;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

#nahoru:hover {
    transform: translateY(-5px);
    background-color: #38616485;
}

body.menu-open #nahoru {
    display: none;
}

/* --- Univerzální kontaktní ikony --- */
.icon-btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: var(--text-color);
    text-decoration: none;
    border: 1px solid rgba(245, 204, 117, 0.35);
    box-shadow: var(--box-shadow-icon);
    transition: transform .2s ease, filter .2s ease;
}

.icon-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

.icon-btn i {
    font-size: 0.9em;
    line-height: 1;

}

.icon-btn.call {
    background: var(--primary-color);
    color: #1c1c1c;
}

.icon-btn.sms {
    background: #2b5c5f;
    color: aqua;
    text-shadow: var(--text-shadow);
}

.icon-btn.wa {
    background: #25D366;
    color: #073a18;
    font-size: 1.2em;
}

.icon-btn.map {
    background: #6c7a89;
    color: rgb(255, 197, 8);
    font-weight: 800;
    text-shadow: 1px 0px 0px rgba(0, 0, 0, .85), 0px -1px 0 rgba(0, 0, 0, .85), -1px -1px 0 rgba(0, 0, 0, .85), -1px 1px 0 rgba(0, 0, 0, .85), -1px 1px 0 rgba(0, 0, 0, .85), 1px 1px 0 rgba(0, 0, 0, .85);

}

.icon-btn.admin {
    background: #438de5;
    color: #e9f0ff;
    font-weight: 800;
    text-shadow: 1px 0px 0px rgba(0, 0, 0, .85), 0px -1px 0 rgba(0, 0, 0, .85), -1px -1px 0 rgba(0, 0, 0, .85), -1px 1px 0 rgba(0, 0, 0, .85), -1px 1px 0 rgba(0, 0, 0, .85), 1px 1px 0 rgba(0, 0, 0, .85);

}

/* --- Varianty kontejnerů pro ikony --- */
.hero-contact-inline {
    margin-top: 14px;
    /* bylo 10px */
    margin-bottom: clamp(20px, 6vw, 48px);
    /* default desktop */
    display: none;
    /* skryto defaultně – zobrazí se až na desktopu */
}

.header-contact-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 8px;
}

.menu-contact-cta {
    display: none;
    /* Skryto defaultně, zapíná se v @media */
}

/* --- Tooltip --- */
[data-tooltip] {
    position: relative;
    cursor: pointer;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 115%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: var(--text-color);
    font-family: var(--font-text);
    font-size: 0.85rem;
    padding: 8px 12px;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    z-index: 10001;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

[data-tooltip]:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(-5px);
}


/* ========== ČÁST 5: Hlavička (Header) ========== */
body>header {
    width: 100%;
    min-height: 350px;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
}

header>svg.wave-divider {
    width: 100%;
    flex-shrink: 0;
    pointer-events: none;
    position: relative;
    z-index: 1;
}

/* --- Navigační menu --- */
menu {
    position: relative;
    z-index: 10000;
    width: 100%;
    padding: 5px;
    column-gap: clamp(40px, 10vw, 180px);
}

menu .container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    position: relative;
    height: clamp(45px, 8vh, 65px);
    padding: 8px 0;
}

.nav-container {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    justify-content: space-between;
}

/* Desktop rozložení #main-menu s šířkou 1200px a rozumnými mezerami */
#main-menu>.nav-container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0;
    /* Bez paddingu pro plnou šířku */
    display: flex;
    align-items: center;
    width: 100%;
}

#main-menu .left-nav,
#main-menu .right-nav {
    flex: 1 1 0;
}

#main-menu .left-nav ul,
#main-menu .right-nav ul {
    display: flex;
    align-items: center;
    gap: 0;
    /* Odstraněn gap, použijeme padding na li */
}

#main-menu .left-nav ul {
    justify-content: flex-end;
}

#main-menu .right-nav ul {
    justify-content: flex-start;
}

/* Responzivní padding pro li elementy */
#main-menu .left-nav ul li,
#main-menu .right-nav ul li {
    padding: 0 clamp(10px, 2.2vw, 26px);
    /* plynulé zmenšování na užších šířkách */
}


/* Odkazy – stejný komfort jako v desktop menu pro <menu> */
#main-menu ul li a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 clamp(10px, 1.6vw, 18px);
    /* responsivní vnitřní odsazení odkazu */
    min-height: 46px;
    border-bottom: 1px solid var(--text-color-alt);
    font-weight: 600;
    color: var(--text-color-alt);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
    /* Pomalejší, plynulý přechod pro hover efekt bez skoků */
    transition: transform var(--motion-interactive, 0.65s) cubic-bezier(.22, 1, .36, 1),
        filter var(--motion-interactive-fast, 0.50s) ease,
        border-color var(--motion-interactive-fast, 0.50s) ease;
    will-change: transform, filter, border-color;
    white-space: nowrap;
}

#main-menu ul li a:hover {
    transform: translateY(-2px) scale(1.02);
    filter: brightness(1.06);
    border-color: #33a506;
}

.left-nav,
.right-nav {
    flex: 1;
}

menu nav ul {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

menu nav ul li a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    min-height: 46px;
    border-bottom: 1px solid var(--text-color-alt);
    font-weight: 600;
    color: var(--text-color-alt);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
    /* lehčí, čitelný */
    /* Pomalejší, plynulý přechod i pro mobilní panel */
    transition: transform 0.65s cubic-bezier(.22, 1, .36, 1),
        filter 0.50s ease, border-color 0.50s ease;
    will-change: transform, filter, border-color;
    white-space: nowrap;
}

menu nav ul li a:hover {
    transform: translateY(-2px) scale(1.02);
    filter: brightness(1.06);
    border-color: #33a506;
}

/* --- Středové logo --- */
.center-logo {
    position: relative;
    flex-shrink: 0;
    margin-top: 25px;
    width: 120px;
    aspect-ratio: 1 / 1;
    z-index: 10002;
    border: none;
    background-image: url('../img/logo_60.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform var(--motion-logo, 0.25s) ease,
        filter var(--motion-logo, 0.25s) ease;
    transform: translateY(10px);
    will-change: transform, filter;
    filter: drop-shadow(0 12px 12px rgba(0, 0, 0, 0.72)) contrast(1.22) saturate(1.35) brightness(1.06);
}

.center-logo:hover,
.center-logo:focus {
    transform: translateY(10px) scale(1.05);
    outline: none;
}

.center-logo a {
    display: block;
    width: 100%;
    height: 100%;
}

/* --- Hero nadpis --- */
.nadpis {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 150px;
    padding-bottom: 20px;
    color: var(--footer-text);
    text-align: center;
    z-index: 2;
    position: relative;
    width: 100%;
}

.nadpis-wrapper {
    position: relative;
    padding: 8px 0;
    margin-bottom: 20px;
    z-index: 0;
}

/* Nahraď tvůj .nadpis-wrapper::after jemnějším gradientem */
.nadpis-wrapper::after {
    content: "";
    position: absolute;
    inset: -10px;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(80% 50% at 50% 35%, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .35) 35%, rgba(0, 0, 0, 0) 75%);
    filter: blur(20px);
    opacity: .85;
    /* z 0.95 na 0.85 */
}

/* --- Hlavní nadpisy H2 a H3 s grow efektem --- */

/* Sdílené nastavení pro H2/H3 grow */
/* --- H2 a H3 s grow, překrývání zleva -> doprava --- */

/* Základ pro H2/H3 */
.nadpis :is(h2.grow, h3.grow) {
    /* Přechod z proprietárního Impact na web-safe definici přes proměnnou; váhu upravíme na 700 (Anton má jen 400/700). */
    font-family: var(--font-heading-impact);
    font-weight: 700;
    /* 900 nahrazeno 700 kvůli dostupnosti řezu na mobilních zařízeních */
    text-transform: uppercase;
    line-height: .98;
    margin: 0;
    white-space: nowrap;
    letter-spacing: -0.03em;
}

/* Jednotlivá písmena (span) – stejné světlo/stín jako u H2 */
.nadpis :is(h2.grow, h3.grow) span {
    display: inline-block;
    color: #f3d9a0;
    text-shadow:
        0 0 0.01em rgba(0, 0, 0, .12),
        0.01em 0 10px rgba(0, 0, 0, .16),
        -0.01em 0 10px rgba(0, 0, 0, .16);
    filter:
        drop-shadow(0 9px 14px rgba(0, 0, 0, .55)) drop-shadow(3px 0 0 rgba(0, 0, 0, .35));
    margin-right: -0.01em;
    /* jemné utažení, dává „blokový“ look */
    position: relative;
    /* kvůli z-indexu */
}

/* H2: „kostková“ extruze v barvě písma (ostré krokové stíny) */
.nadpis h2.grow span {
    --h2c: #48402e3d;
    /* barva písma */
    /* horní jemný „bevel“ highlight */
    text-shadow:
        -0.75px -0.75px 0 rgba(255, 255, 255, .22),
        /* jemný černý obrys (fallback pro prohlížeče bez stroke) */
        -1px 0 0 rgba(0, 0, 0, .55),
        1px 0 0 rgba(0, 0, 0, .55),
        0 -1px 0 rgba(0, 0, 0, .55),
        0 1px 0 rgba(0, 0, 0, .55),
        /* ostré barevné kroky diagonálně (cube-like) */
        1px 1px 0 var(--h2c),
        2px 2px 0 var(--h2c),
        3px 3px 0 var(--h2c),
        4px 4px 0 var(--h2c),
        5px 5px 0 var(--h2c),
        6px 6px 0 var(--h2c),
        7px 7px 0 var(--h2c),
        8px 8px 0 var(--h2c),
        9px 9px 0 var(--h2c),
        10px 10px 0 var(--h2c),
        11px 11px 0 var(--h2c),
        12px 12px 0 var(--h2c),
        /* měkký podkladový stín pro oddělení od pozadí */
        12px 14px 10px rgba(0, 0, 0, .45);
    /* bez extra filter drop-shadow – extruze je ostrá a „kostková" */
}

@supports (-webkit-text-stroke: 1px black) {
    .nadpis h2.grow span {
        -webkit-text-stroke: 0.5px rgba(0, 0, 0, .85);
        paint-order: stroke fill;
    }
}

/* Mobilní override: specifický stín pro H2 na menších zařízeních */
@media (max-width: 900px) {
    .nadpis h2.grow span {
        text-shadow: -0.75px -0.75px 0 rgba(255, 255, 255, .22),
            3px -1px 0 rgb(0 0 0 / 56%),
            1px 0 0 rgb(0 0 0 / 0%),
            0 -1px 0 rgba(0, 0, 0, .55),
            0 1px 0 rgba(0, 0, 0, .55),
            1px 1px 0 #48402e00,
            2px 2px 0 #48402e00,
            4px 0px 0 #080705,
            -1px 1px 0 var(--h2c),
            1px 1px 0 #48402e00,
            0px 1px 0 #48402e00,
            0px 2px 0 #48402e00,
            1px 1px 0 #48402e00,
            -1px 0px 0 #48402e00,
            0px 1px 0 var(--h2c),
            -1px 1px 0 #48402e00,
            0px 1px 0 #48402e00,
            0px 0px 0px rgba(0, 0, 0, .45);
    }
}

/* Velikosti */
.nadpis h2.grow {
    font-size: var(--hero-h2-size);
}

.nadpis h3.grow {
    font-size: calc(var(--hero-h2-size) * 0.40);
}

/* Větší mezera mezi slovy u H3: použij <span class="ws"> </span> */
.nadpis h3.grow span.ws {
    margin-top: 15px;
    margin-right: 0.4em;
}

/* Poslední znak bez doplňkové mezery */
.nadpis h2.grow span:last-child,
.nadpis h3.grow span:last-child {
    margin-right: 0;
    padding-right: 0.04em;
}

/* ——— Překrývání zleva -> doprava ———
   Levé znaky musí být nad pravými -> levým dáme vyšší z-index. */
.nadpis :is(h2.grow, h3.grow) span {
    z-index: 1;
}

/* základ */
.nadpis :is(h2.grow, h3.grow) span:nth-child(1) {
    z-index: 50;
}

.nadpis :is(h2.grow, h3.grow) span:nth-child(2) {
    z-index: 49;
}

.nadpis :is(h2.grow, h3.grow) span:nth-child(3) {
    z-index: 48;
}

.nadpis :is(h2.grow, h3.grow) span:nth-child(4) {
    z-index: 47;
}

.nadpis :is(h2.grow, h3.grow) span:nth-child(5) {
    z-index: 46;
}

.nadpis :is(h2.grow, h3.grow) span:nth-child(6) {
    z-index: 45;
}

.nadpis :is(h2.grow, h3.grow) span:nth-child(7) {
    z-index: 44;
}

.nadpis :is(h2.grow, h3.grow) span:nth-child(8) {
    z-index: 43;
}

.nadpis :is(h2.grow, h3.grow) span:nth-child(9) {
    z-index: 42;
}

.nadpis :is(h2.grow, h3.grow) span:nth-child(10) {
    z-index: 41;
}

.nadpis :is(h2.grow, h3.grow) span:nth-child(11) {
    z-index: 40;
}

.nadpis :is(h2.grow, h3.grow) span:nth-child(12) {
    z-index: 39;
}

.nadpis :is(h2.grow, h3.grow) span:nth-child(13) {
    z-index: 38;
}

.nadpis :is(h2.grow, h3.grow) span:nth-child(14) {
    z-index: 37;
}

.nadpis :is(h2.grow, h3.grow) span:nth-child(15) {
    z-index: 36;
}

.nadpis :is(h2.grow, h3.grow) span:nth-child(16) {
    z-index: 35;
}

.nadpis :is(h2.grow, h3.grow) span:nth-child(17) {
    z-index: 34;
}

.nadpis :is(h2.grow, h3.grow) span:nth-child(18) {
    z-index: 33;
}

.nadpis :is(h2.grow, h3.grow) span:nth-child(19) {
    z-index: 32;
}

.nadpis :is(h2.grow, h3.grow) span:nth-child(20) {
    z-index: 31;
}

.nadpis :is(h2.grow, h3.grow) span:nth-child(21) {
    z-index: 30;
}

.nadpis :is(h2.grow, h3.grow) span:nth-child(22) {
    z-index: 29;
}

.nadpis :is(h2.grow, h3.grow) span:nth-child(23) {
    z-index: 28;
}

.nadpis :is(h2.grow, h3.grow) span:nth-child(24) {
    z-index: 27;
}

.nadpis :is(h2.grow, h3.grow) span:nth-child(25) {
    z-index: 26;
}

.nadpis :is(h2.grow, h3.grow) span:nth-child(26) {
    z-index: 25;
}

.nadpis :is(h2.grow, h3.grow) span:nth-child(27) {
    z-index: 24;
}

.nadpis :is(h2.grow, h3.grow) span:nth-child(28) {
    z-index: 23;
}

.nadpis :is(h2.grow, h3.grow) span:nth-child(29) {
    z-index: 22;
}

.nadpis :is(h2.grow, h3.grow) span:nth-child(30) {
    z-index: 21;
}

.nadpis :is(h2.grow, h3.grow) span:nth-child(31) {
    z-index: 20;
}

.nadpis :is(h2.grow, h3.grow) span:nth-child(32) {
    z-index: 19;
}

.nadpis :is(h2.grow, h3.grow) span:nth-child(33) {
    z-index: 18;
}

.nadpis :is(h2.grow, h3.grow) span:nth-child(34) {
    z-index: 17;
}

.nadpis :is(h2.grow, h3.grow) span:nth-child(35) {
    z-index: 16;
}

.nadpis :is(h2.grow, h3.grow) span:nth-child(36) {
    z-index: 15;
}

.nadpis :is(h2.grow, h3.grow) span:nth-child(37) {
    z-index: 14;
}

.nadpis :is(h2.grow, h3.grow) span:nth-child(38) {
    z-index: 13;
}

.nadpis :is(h2.grow, h3.grow) span:nth-child(39) {
    z-index: 12;
}

.nadpis :is(h2.grow, h3.grow) span:nth-child(40) {
    z-index: 11;
}

/* Podnadpis H3 pod hlavním nadpisem */
.nadpis h3 {
    font-family: var(--font-heading-impact);
    font-size: calc(var(--hero-h2-size) * 0.40);
    /* menší než H2 */
    font-weight: 700;
    color: #f3d9a0;
    -webkit-text-stroke: 0.1px #000;
    /* decentní černý obrys */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.65);
    /* jemný stín pro čitelnost */
    margin-top: 0.7em !important;
    /* odstup od H2 */
    line-height: 1.3;
    /* trochu vzduchu mezi písmeny */
    text-align: center;
    text-transform: none !important;
    /* povolí malá písmena */
}

/* Velmi malé displeje: zmenšit nadpis bez zalamování */
@media (max-width: 200px) {
    .nadpis h2.grow {
        font-size: calc(var(--hero-h2-size) * 0.9);
        /* zmenšit na polovinu */
    }

    .nadpis h2.grow span {
        font-size: 0.8em;
        /* další zmenšení pro jednotlivá písmena */
    }

    .nadpis h3.grow {
        font-size: calc(var(--hero-h2-size) * 0.3);
        /* zmenšit h3 na 20% původní velikosti */
        text-shadow: none;

    }

    .nadpis h3.grow span {
        font-size: 0.8em;
        /* další zmenšení pro jednotlivá písmena */
    }
}

/* --- Mobilní Navigace (Hamburger) --- */
.rybacka {
    display: none;
    /* Aktivní pouze na mobilu */
}

.hamburger {
    display: none;
    /* Aktivní pouze na mobilu */
    cursor: pointer;
    z-index: 10001;
}


/* ========== ČÁST 6: Patička (Footer) ========== */
footer {
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 50px 15px;
    color: var(--footer-text);
    background: var(--footer-bg);
    margin-top: 10em;
}

footer svg.wave-divider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transform: translateY(-60%);
    /* Přesná hodnota závisí na SVG */
}

footer .container {
    display: flex;
    justify-content: space-around;
    width: 100%;
    max-width: var(--container-width);
    gap: 40px;
    align-items: stretch;
    margin: 0 auto;
}

footer nav,
footer .kontakt {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background: var(--bg-dark-transparent);
    border-radius: var(--border-radius);
}

footer h3 {
    font-size: 1.2em;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--footer-text);
    width: 100%;
    text-align: center;
    text-shadow: var(--text-shadow-nadpis);
}

footer nav ul {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

footer nav ul li a {
    background-color: #3861645e;
    display: block;
    padding: 8px 0;
    text-align: center;
    transition: background-color 0.3s ease;
    border-radius: 4px;
    font-size: 0.9em;
}

footer nav ul li a:hover {
    background-color: rgba(255, 218, 11, 0.1);
}

footer .kontakt address {
    text-align: center;
    line-height: 1.8;
    width: 100%;
    font-style: normal;
}

footer .kontakt address a {
    transition: background-color 0.3s ease;
    font-size: 0.9em;
    padding: 4px;
    border-radius: 4px;
}

footer .kontakt address a:hover {
    background: rgba(255, 218, 11, 0.1);
}

footer .copyright {
    margin-top: auto;
    padding-top: 20px;
    font-size: 0.9em;
    opacity: 0.8;
    width: 100%;
    text-align: center;
}

.copyright a {
    color: yellowgreen;
    text-decoration: underline;
}

/* ========== ČÁST 7: Utility a Animace ========== */
/* Extra malé displeje: zajistit čitelnost footeru od 240px */
@media (max-width: 240px) {
    footer .container {
        flex-direction: column;
        gap: 12px;
        padding: 0 6px;
    }

    footer nav,
    footer .kontakt {
        padding: 10px;
    }

    footer h3 {
        font-size: 1em;
        margin-bottom: 12px;
        padding-bottom: 6px;
    }

    footer .kontakt address {
        font-size: 0.85em;
        line-height: 1.5;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    footer .kontakt address a {
        display: inline-block;
        white-space: normal;
        padding: 2px;
        font-size: 0.85em;
    }

    footer .copyright {
        font-size: 0.8em;
        padding-top: 12px;
    }
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.wrap-long {
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}

@keyframes shake {

    0%,
    100% {
        transform: rotate(0);
    }

    10%,
    50%,
    90% {
        transform: rotate(-15deg);
    }

    30%,
    70% {
        transform: rotate(15deg);
    }
}

/* RM-01: Základní omezení animací při reduced-motion (globální) */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* RM-02: Výjimka pro mobilní panel menu – short transition kvůli UX */
@media (prefers-reduced-motion: reduce) {

    menu nav,
    menu nav.active {
        transition: transform 0.5s ease, opacity 0.3s ease, visibility 0s linear 0s !important;
    }
}

/* RM-03: Výjimka pro karty – jemný hover bez výrazného pohybu */
@media (prefers-reduced-motion: reduce) {

    .info-card,
    .info-card-1,
    .info-card-2,
    .info-card-3 {
        transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
    }
}

/* RM-04: Podmínky lovu – barvy/rámečky/stíny ponechány, bez transform animací */
@media (prefers-reduced-motion: reduce) {

    .podminkylovu ul li,
    .podminkylovu ul li::before,
    .podminkylovu td,
    .podminkylovu th {
        transition-property: background-color, border-color, box-shadow, color, text-shadow !important;
        transition-duration: 0.18s !important;
        transition-timing-function: ease !important;
    }
}

/* RM-05: Selektivní reduced-motion (Varianta B) – dekorativní animace pryč,
   interaktivní přechody ponechány (mimo admin). */
@media (prefers-reduced-motion: reduce) {

    /* Token overrides – udrž stejné vjemy, ale kratší a bez „velkého“ pohybu */
    :root {
        --motion-interactive: 0.18s;
        --motion-interactive-fast: 0.18s;
        --motion-small: 0.18s;
        --motion-component: 0.20s;
        --motion-menu-transform: 0.50s;
        /* panel se „neobjeví skokově“ */
        --motion-menu-opacity: 0.30s;
    }

    /* scroll bez smooth */
    html {
        scroll-behavior: auto !important;
    }

    /* vypnout velké/dekorativní animace */
    .motion-decorative,
    .parallax,
    .bg-anim,
    .float,
    [data-anim="decorative"] {
        animation: none !important;
        transition: none !important;
    }

    /* zanech jemné interaktivní přechody (bez pohybu) – mimo administraci */
    body:not(.admin-body) a,
    body:not(.admin-body) button,
    body:not(.admin-body) [role="button"],
    body:not(.admin-body) .btn,
    body:not(.admin-body) nav a,
    body:not(.admin-body) #main-menu a,
    body:not(.admin-body) .info-card,
    body:not(.admin-body) .info-card-1,
    body:not(.admin-body) .info-card-2,
    body:not(.admin-body) .info-card-3,
    body:not(.admin-body) .galerie a,
    body:not(.admin-body) .galerie .card,
    body:not(.admin-body) .card,
    body:not(.admin-body) table td,
    body:not(.admin-body) table th,
    body:not(.admin-body) .podminkylovu ul li,
    body:not(.admin-body) .podminkylovu td,
    body:not(.admin-body) .podminkylovu th {
        transition-property: background-color, border-color, color, box-shadow, text-shadow !important;
        transition-duration: 0.18s !important;
        transition-timing-function: ease !important;
    }
}


/* =================================================================== */
/* ČÁST 8: RESPONZIVNÍ ÚPRAVY (Media Queries)               */
/* =================================================================== */

/* --- Tablet a menší desktop (do 900px) --- */
@media (max-width: 900px) {
    body {
        background-image: image-set(url('../tapeta_mobile_assents/tapeta_1080w.jpg') 1x,
                url('../tapeta_mobile_assents/tapeta_1440w.jpg') 2x);
        background-attachment: scroll;
        background-position: center top;
    }

    body>header {
        margin-bottom: 30px;
        min-height: 70px;
        background: transparent;
    }

    header>svg.wave-divider,
    .center-logo,
    .header-contact-inline {
        display: none;
    }

    menu {
        padding: 0;
    }

    menu .container {
        padding: 0 10px;
        justify-content: space-between;
        height: clamp(50px, 10vh, 90px);
    }

    .nadpis {
        padding-top: clamp(32px, 6vw, 64px);
        margin-top: clamp(15px, 5vh, 50px);
    }

    .nadpis-wrapper {
        --hero-h2-size: clamp(2.2rem, 10vw, 3.8rem);
        --hero-h3-ratio: 0.42;
    }

    .rybacka {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .rybacka .logo img {
        display: block;
        height: calc(clamp(50px, 8vh, 80px) + 15px);
        width: auto;
        max-width: 210px;
        margin-top: 25px;
        /* Zvýraznění bez pozadí – drží průhlednost PNG */
        filter:
            drop-shadow(0 0 0.7px rgba(0, 0, 0, .95))
            /* jemný "obrys" kolem hran */
            drop-shadow(0 6px 10px rgba(0, 0, 0, .55))
            /* měkký stín pro separaci */
            contrast(1.12) saturate(1.15) brightness(1.05);
    }

    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: clamp(5px, 2vw, 10px);
        font-size: clamp(10px, 3vw, 15px);
    }

    .hamburger .bar {
        width: 1.6em;
        height: 0.18em;
        margin: 0.25em 0;
        background-color: var(--text-color-alt);
        border-radius: 1px;
        transition: all 0.3s ease;
        /* jemná černá linka kolem proužků (funguje i jako křížek) */
        box-shadow: 0 0 0 0.8px rgba(0, 0, 0, .95);
    }

    /* při aktivním stavu křížku lehce výraznější linka */
    .hamburger.active .bar {
        box-shadow: 0 0 0 1px rgba(0, 0, 0, .98);
    }

    .hamburger.active {
        position: fixed;
        top: 15px;
        right: 15px;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(0.68em) rotate(45deg);
    }

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-0.68em) rotate(-45deg);
    }

    /* Mobilní menu - panel */
    menu nav {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        width: 90%;
        max-width: 280px;
        height: 100%;
        background: var(--bg-color);
        z-index: 10000;
        transform: translateX(100%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        will-change: transform, opacity;
        transition: transform var(--motion-menu-transform, 1.2s) cubic-bezier(0.25, 0.46, 0.45, 0.94),
            opacity var(--motion-menu-opacity, 0.9s) cubic-bezier(0.25, 0.46, 0.45, 0.94),
            visibility 0s linear var(--motion-menu-transform, 1.2s);
        padding: 60px 15px 15px;
        overflow-y: auto;
        box-shadow: 0 8px 25px rgba(0, 0, 0, .25);
    }

    menu nav.active {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: transform var(--motion-menu-transform, 1.2s) cubic-bezier(0.25, 0.46, 0.45, 0.94),
            opacity var(--motion-menu-opacity, 0.9s) cubic-bezier(0.25, 0.46, 0.45, 0.94),
            visibility 0s linear 0s;
    }

    .nav-container,
    .left-nav,
    .right-nav,
    menu nav ul,
    menu nav ul li {
        display: block;
        width: 100%;
    }

    /* Přepiš silnější desktop selektor pro mobil: stack pod sebe */
    #main-menu>.nav-container {
        display: block;
        width: 100%;
    }

    #main-menu .left-nav,
    #main-menu .right-nav {
        display: block;
        width: 100%;
    }

    menu nav ul {
        flex-direction: column;
    }

    /* Vynucený sloupec pro oba seznamy a plná šířka položek */
    #main-menu .left-nav ul,
    #main-menu .right-nav ul {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
    }

    #main-menu .left-nav ul li,
    #main-menu .right-nav ul li {
        padding: 0;
        /* padding řeší odkaz níže */
        width: 100%;
    }

    menu nav ul li a {
        display: block;
        padding: 15px 20px;
        text-align: center;
        border: none;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
        font-weight: bold;
    }

    /* stejné jako výše, ale specificky pro hlavní seznamy, aby měly plnou šířku */
    #main-menu .left-nav ul li a,
    #main-menu .right-nav ul li a {
        display: block;
        width: 100%;
        padding: 15px 20px;
        text-align: center;
        border: none;
        border-bottom: 1px solid rgba(255, 255, 255, .1);

    }

    menu nav ul li a:hover {
        background: rgba(255, 255, 255, .1);
        transform: none;
        /* Vypnout hover efekt z desktopu */
    }

    /* Jemná černá linka kolem textu pouze v hamburger menu */
    menu nav ul li a {
        /* fallback pro prohlížeče bez text-stroke */
        text-shadow: 1px 0px 0px rgba(0, 0, 0, .85),
            0px -1px 0 rgba(0, 0, 0, .85),
            -1px -1px 0 rgba(0, 0, 0, .85),
            -1px 1px 0 rgba(0, 0, 0, .85),
            -1px 1px 0 rgba(0, 0, 0, .85),
            1px 1px 0 rgba(0, 0, 0, .85) !important;
    }

    @supports (-webkit-text-stroke: 1px black) {
        menu nav ul li a {
            -webkit-text-stroke: 0.35px rgba(0, 0, 0, .9);
            paint-order: stroke fill;
            /* když je stroke, stačí jemnější stín nebo žádný */
            text-shadow: 0 0 0.6px rgba(0, 0, 0, .5);
        }
    }

    .menu-contact-cta {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        justify-content: center;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid rgba(255, 255, 255, .15);
    }

    footer {
        margin-top: 0.1em;
    }

    footer .container {
        flex-direction: column;
        align-items: stretch;
        gap: 30px;
        width: 100%;
        max-width: none;
        /* plná šířka na mobilu */
    }

    footer svg.wave-divider {
        display: none;
    }

    /* schovat patičkové menu na mobilech do 900px */
    footer nav {
        display: none;
    }

    /* Footer obsah přes celou šířku na mobilu */
    footer nav,
    footer .kontakt {
        width: 100%;
        max-width: 100%;
    }

    /* posuny kolem patičky na mobilu */
}

/* --- Mobil (do 768px) --- */
@media (max-width: 768px) {
    #nahoru {
        width: 35px;
        height: 35px;
        bottom: 85px;
        right: 25px;
    }

    #nahoru i {
        font-size: 1.2em;
    }

    .nadpis h3 {
        white-space: normal;
        word-break: normal;
        hyphens: none;
        overflow: visible;
        text-overflow: clip;
        margin-top: 0.7em;
        line-height: 1.2;
    }

    /* Zobraz patičkové menu i na malém mobilu přes celou šířku */
    /* footer nav {
        display: block;
        width: 100%;
        max-width: 100%;
    } */
    footer .kontakt {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 5px;
    }

    footer .copyright {
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid rgba(245, 204, 24, .3);
    }
}

/* --- Ikony pod nadpisem na desktopu --- */
@media (min-width: 901px) {
    .hero-contact-inline {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        margin: 10px auto 0 auto;
    }

    /* Lepší čitelnost odkazů v horním menu pouze na desktopu.
       Zachová barvu i původní stín, přidá jemný obrys kolem písmen. */
    @supports (-webkit-text-stroke: 1px black) {
        #main-menu ul li a {
            -webkit-text-stroke: 0.35px rgba(0, 0, 0, .9);
            paint-order: stroke fill;
        }
    }

}

/* Desktop: delší hover pro logo (mimo reduced-motion) */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
    :root {
        --motion-logo: 0.60s;
    }
}

/* --- Velmi úzké displeje (do 380px) --- */
@media (max-width: 380px) {
    menu nav ul li a {
        font-size: 0.9em;
        padding: 12px 15px;
    }
}

/* === TEMP: GLOBAL MOBILE TYPOGRAPHY SAFETY NET ======================= */
@media (max-width: 767.98px), (pointer: coarse) {
    :where(main, #content, .container) :where(p > span, li > span, dd > span, th > span, td > span) {
        font-weight: 500 !important;
    }
}