/*
   Vzhled REPETE BAR.

   ⚠️ Barvy a písma NEJSOU odhad ani „něco podobného" — jsou vytažené
   z nastavení Customizeru původního webu (wp_options → theme_mods_zerif-pro,
   změřeno 9. 9. 2026). Kdo je bude měnit, mění vzhled, na kterém se Oto
   domluvil, ne moje rozhodnutí.
*/
:root {
    --cerna:        #000000;   /* zerif_background_color */
    --cervena:      #b31f24;   /* zerif_buttons_background_color, odkazy, podtržení */
    --cervena-hover:#dd3333;   /* zerif_bigtitle_1button_background_color_hover */
    --odkaz-hover:  #b22c31;   /* zerif_links_color_hover */
    --zelena:       #348227;   /* druhé tlačítko v hlavičce */
    --zelena-hover: #73d62c;
    --bila:         #ffffff;   /* zerif_texts_color, zerif_titles_color */
    --preryv:       rgba(0,0,0,.5); /* zerif_aboutus_background, zerif_ourteam_background */
    --nadpisy: 'Montserrat', Helvetica, Arial, sans-serif;
    --text:    'Lato', Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
body { margin:0; background:var(--cerna); color:var(--bila); font-family:var(--text); font-size:17px; line-height:1.65; }
h1,h2,h3,.znacka { font-family:var(--nadpisy); font-weight:700; letter-spacing:.02em; }
a { color:var(--cervena); text-decoration:none; }
a:hover, a:focus { color:var(--odkaz-hover); text-decoration:underline; }
img { max-width:100%; height:auto; display:block; }
.obal { width:min(1140px,92vw); margin-inline:auto; }
.preskocit { position:absolute; left:-9999px; }
.preskocit:focus { left:1rem; top:1rem; background:var(--cervena); color:#fff; padding:.6rem 1rem; z-index:100; }

/* Světlý proužek menu jako originál repete.cz (Oto 28.10.: „ať to vynikne").
   Bílé pozadí + jemný stín, tmavý text menu. */
.hlavicka { position:sticky; top:0; z-index:50; background:var(--bila); box-shadow:0 1px 0 rgba(0,0,0,.08), 0 2px 12px rgba(0,0,0,.06); }
.hlavicka-obal { display:flex; align-items:center; gap:1.5rem; padding:.6rem 0; }
.znacka { color:var(--cerna); font-size:1.35rem; letter-spacing:.12em; }
/* Logo je obrázek (logo.png ~2000px): obecné `img{height:auto}` přebíjí HTML
   height="44" → logo by se roztáhlo a vytlačilo menu do sloupce. Pevná výška. */
.znacka img { height:44px; width:auto; }
.znacka span { color:var(--cervena); margin-left:.35em; }
.znacka:hover { color:var(--cerna); text-decoration:none; }
.menu { display:flex; gap:1.4rem; margin-left:auto; flex-wrap:wrap; }
.menu a { color:#1a1a1a; font-family:var(--nadpisy); font-size:.82rem; text-transform:uppercase; letter-spacing:.09em; }
.menu a:hover { color:var(--cervena); text-decoration:none; }
/* FB/IG ikony v menu: zarovnané s textem, dědí barvu menu, na hover červené. */
.menu-ikona { display:inline-flex; align-items:center; }
.menu-ikona svg { width:19px; height:19px; }
.menu-ikona:hover { color:var(--cervena); }
.jazyky { display:flex; gap:.55rem; }
.jazyky a { color:#8b8b8b; font-size:.78rem; font-family:var(--nadpisy); }
.jazyky a.aktivni { color:var(--cerna); border-bottom:2px solid var(--cervena); }

.uvod { position:relative; min-height:82vh; display:grid; place-items:center; text-align:center; overflow:hidden; }
/*
   Originál (repete.cz) má `.fadein-slider { position:fixed }` — leží POD
   celou stránkou, ne jen pod hero sekcí, a stejný obrázek pak prosvítá
   poloprůhlednými sekcemi níž (#o-nas, #barmani, #rezervace, #kontakt —
   viz jejich rgba pozadí dál v souboru). `position:fixed` tu funguje beze
   změny, i když .uvod má `overflow:hidden`: fixed potomek uniká clipnutí
   předka, dokud předek nemá transform/filter/perspective (nemá).
   z-index:-1 ho posadí za normální obsah, ale PŘED plátno danné barvou
   `body{background}` — běžný vzor pro fixní pozadí, ověřeno vizuálně.
*/
.uvod-fotky { position:fixed; inset:0; z-index:-1; }
.uvod-fotky div { position:absolute; inset:0; background-size:cover; background-position:center; animation:prolinani 36s infinite; opacity:0; }
.uvod-fotky div:nth-child(1){animation-delay:0s} .uvod-fotky div:nth-child(2){animation-delay:12s} .uvod-fotky div:nth-child(3){animation-delay:24s}
/*
   Zpomaleno z 21s na 36s cyklus (Oto 2026-10-12): klidnější střídání, navíc
   produkce poběží na slabším železe. Delaye jsou cyklus/3 (12s, 24s), aby tři
   obrázky zůstaly rovnoměrně rozložené. Procenta v @keyframes jsou relativní
   k délce cyklu, takže se NEMĚNÍ — poměr náběh:výdrž:doběh zůstal stejný.
   Symetrický fade-in i fade-out (~3,6 s každý při 36s cyklu), tempo jako
   originál (jQuery fadeOut/fadeIn), jen pomalejší rotace.
*/
@keyframes prolinani { 0%{opacity:0} 10%,28%{opacity:1} 38%,100%{opacity:0} }
@media (prefers-reduced-motion: reduce){ .uvod-fotky div{animation:none;opacity:0} .uvod-fotky div:nth-child(1){opacity:1} }
.uvod::after { content:''; position:absolute; inset:0; background:var(--preryv); }
.uvod-text { position:relative; z-index:2; padding:2rem 1rem; }
.uvod-text h1 { font-size:clamp(2.6rem,9vw,5.5rem); margin:0 0 .3em; letter-spacing:.16em; }
.uvod-podtitulek { font-size:1.1rem; margin:0 0 2rem; color:#e6e6e6; }
.tlacitka { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.tlacitko { display:inline-block; padding:.85rem 2.1rem; border-radius:2px; font-family:var(--nadpisy); font-size:.85rem; text-transform:uppercase; letter-spacing:.1em; color:var(--bila); background:var(--cervena); border:0; cursor:pointer; }
.tlacitko:hover { background:var(--cervena-hover); color:var(--bila); text-decoration:none; }
.tlacitko--zelene { background:var(--zelena); }
.tlacitko--zelene:hover { background:var(--zelena-hover); }

.sekce { padding:5.5rem 0; }
.sekce--tmava { background:#0a0a0a; }
.sekce h2 { font-size:clamp(1.8rem,4vw,2.6rem); margin:0 0 .35em; text-align:center; }
.sekce h2::after { content:''; display:block; width:64px; height:3px; background:var(--cervena); margin:.55em auto 0; }
.sekce-podtitulek { text-align:center; color:#bdbdbd; margin:0 0 3rem; }
.sekce-text { max-width:760px; margin-inline:auto; text-align:justify; color:#dcdcdc; }

/*
   Sekce na úvodní stránce, kterými na originále prosvítá fixní pozadí
   (`.about-us`, `.our-team`, `.contact-us` mají tam `background:
   rgba(0,0,0,.5)`). ID selektor přebíjí `.sekce`/`.sekce--tmava` jen pro
   TYTO čtyři sekce domovské stránky — patička a hlavička zůstávají plné,
   stejně jako na originále (`#footer` tam je taky bez prosvítání).
*/
#o-nas, #barmani, #rezervace, #kontakt { background:var(--preryv); }

.dlazdice { display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); margin-top:3rem; }
.dlazdice article { text-align:center; }
.dlazdice h3 { font-size:1.05rem; text-transform:uppercase; letter-spacing:.06em; margin:0 0 .4em; }
.dlazdice p { color:#c9c9c9; margin:0; font-size:.95rem; }

.tym { display:flex; justify-content:center; }
.tym figure { margin:0; text-align:center; max-width:300px; }
.tym img { border-radius:50%; border:3px solid var(--cervena); }
.tym figcaption { margin-top:1rem; }
.tym .jmeno { font-family:var(--nadpisy); font-weight:700; font-size:1.15rem; }
.tym .role { color:var(--cervena); font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; }

.kontakt-mrizka { display:grid; gap:2.5rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.kontakt-mrizka h3 { font-size:1rem; text-transform:uppercase; letter-spacing:.08em; color:var(--cervena); margin:0 0 .5em; }
.kontakt-mrizka p { margin:0 0 .3em; }
.mapa { margin-top:3rem; border:0; width:100%; height:380px; filter:contrast(1.03) saturate(1.05); }
.mapa-navigace { display:inline-block; margin-top:.8rem; padding:.5rem 1rem; background:var(--cervena,#b3261e); color:#fff; text-decoration:none; border-radius:6px; font-family:var(--nadpisy); font-size:.85rem; letter-spacing:.04em; }

.formular { max-width:720px; margin-inline:auto; display:grid; gap:1.1rem; }
.formular label { display:block; font-family:var(--nadpisy); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:.35rem; color:#cfcfcf; }
.formular input, .formular textarea { width:100%; padding:.8rem 1rem; background:#111; border:1px solid #2a2a2a; color:var(--bila); font-family:var(--text); font-size:1rem; border-radius:2px; }
.formular input:focus, .formular textarea:focus { outline:2px solid var(--cervena); border-color:var(--cervena); }
.dvojice { display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.chyba { color:#ff8a8a; font-size:.88rem; margin-top:.3rem; }
.hlaseni-ok { background:rgba(52,130,39,.18); border:1px solid var(--zelena); padding:1rem 1.2rem; border-radius:2px; margin-bottom:1.5rem; }
/* Past na roboty: pole, které člověk nevidí a nevyplní. Skrývá se i před čtečkou. */
.past { position:absolute; left:-9999px; }

.paticka { background:#050505; padding:2.5rem 0; border-top:1px solid #1c1c1c; }
.paticka-obal { display:flex; gap:1.2rem; justify-content:space-between; flex-wrap:wrap; align-items:center; }
.paticka p { margin:0; color:#9a9a9a; font-size:.9rem; }
.paticka-socialni a { margin-right:1rem; }
.paticka-socialni a:last-child { margin-right:0; }

.listek-list { margin:0 auto 2.5rem; max-width:900px; box-shadow:0 10px 40px rgba(0,0,0,.6); }
/* Textový lístek: zachová zalomení řádků z textarey (pre-wrap), čitelné monospace. */
.listek-text { max-width:760px; margin-inline:auto; white-space:pre-wrap; font-family:var(--text); font-size:1.05rem; line-height:1.7; color:#ececec; }

/* --- Nápojový lístek: strukturované menu (vzhled tištěného lístku) --- */
.listek-menu {
  background: #A42421;
  color: #fff;
  padding: clamp(1.25rem, 4vw, 3rem);
  border-radius: 10px;
}

.listek-menu__obal {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 0 auto 1.5rem;
}

.listek-menu__obal--konec {
  margin: 2rem auto 0;
}

.listek-kat {
  margin: 2.5rem 0;
}

.listek-kat:first-child {
  margin-top: 0;
}

.listek-kat__nadpis {
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .22em;
  margin: 0 0 1.5rem;
}

.listek-kat__pozn {
  font-size: 1rem;
  letter-spacing: .1em;
  opacity: .85;
  margin: -1rem 0 1.5rem;
}

.listek-kat__sekce {
  column-count: 2;
  column-gap: 3rem;
}

@media (max-width: 640px) {
  .listek-kat__sekce {
    column-count: 1;
  }
}

.listek-sekce {
  break-inside: avoid;
  margin: 0 0 1.75rem;
  display: inline-block;
  width: 100%;
}

.listek-sekce__nadpis {
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid rgba(255, 255, 255, .55);
  padding-bottom: .35rem;
  margin: 0 0 .85rem;
}

.listek-polozka {
  margin: 0 0 .8rem;
}

.listek-polozka__hlava {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.listek-polozka__nazev {
  font-weight: 700;
}

.listek-polozka__ceny {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;
}

.listek-polozka__cena {
  font-weight: 700;
}

.listek-polozka__objem {
  opacity: .8;
  font-weight: 400;
  margin-right: .4rem;
}

.listek-polozka__popis {
  font-size: .82rem;
  line-height: 1.35;
  opacity: .82;
  margin: .15rem 0 0;
  max-width: 42ch;
}

.listek-sekce__pozn {
  font-size: .82rem;
  font-style: italic;
  opacity: .8;
  margin: .4rem 0 0;
}