/* Rozloženie Mňamka, hlavička a pätička.
   Rozmery aj typografia sú namerané na origináli (extract-layout.js, text-mapa.js). */

/* ---------- Hlavička ----------
   Elementor šablóna 333. Na desktope (≥1025) priehľadný pás položený na hero,
   na tablete (768 až 1024) ten istý pás vínový, na mobile (≤767) vínový pás
   v toku stránky. Všetky rozmery sú v jednotkách originálu:
   odsadenie 1 % zhora/zdola a 3 % po bokoch (z šírky okna), stĺpce 25 % / 15 % /
   25 % a logo 70 % svojho stĺpca, hlavička sa teda s oknom zväčšuje
   (logo 128 px pri 1440, 175 px pri 1920). */

/* `margin-bottom: -8 %` (šírky okna) posúva nasledujúci obsah pod hlavičku.
   Obal je samostatný formátovací kontext, takže jeho výška je
   max(0, výška pásu − 8 %), presne ako `.elementor-location-header`
   (namerané: 0 px pri 1440, 2,5 pri 1025, 16 pri 800). */
.hlavicka {
  position: relative;
  z-index: 30;
  display: flow-root;
  color: var(--biela);
}

.hlavicka__pas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: -8%;              /* Elementor: −8 % */
  padding: 1% 3%;                  /* Elementor: 1 % / 3 % */
}

/* Bočné stĺpce 25 %, stredný 15 %, každý s predvoleným odsadením 10 */
.hlavicka__vlavo,
.hlavicka__vpravo {
  display: flex;
  align-items: center;
  gap: 20px;                       /* Elementor: medzera widgetov 20 */
  width: 25%;
  padding: 10px;
}

/* Vpravo ide stĺpec sprava (row-reverse): košík (kosik.css, 119 × 44)
   a za ním ikony. Košík s odsadením stĺpca 10 dáva výšku 64, ktorá určuje
   výšku celej hlavičky. */
.hlavicka__vpravo { flex-direction: row-reverse; }

.hlavicka__tlacidlo {
  display: flex;
  align-items: center;
  gap: 10px;                       /* Elementor icon-box: medzera 10 */
  padding: 0;
  color: var(--biela);
  text-align: left;
}

.hlavicka__popis {
  font-family: var(--pismo-nadpis);
  font-size: 18px;                 /* Elementor: 18 px, váha 600 */
  font-weight: 600;
  line-height: 23.4px;
}

/* Namerané: ikony ani prepínače v hlavičke v origináli na myš NEreagujú. */
.hlavicka__tlacidlo:hover,
.hlavicka__ikona:hover,
.hlavicka__logo:hover { text-decoration: none; }

.hlavicka__logo {
  display: flex;
  justify-content: center;
  width: 15%;
  padding: 10px;
}

.hlavicka__logo img { width: 70%; height: auto; }   /* Elementor: 70 % stĺpca */

.hlavicka__ikona { display: flex; flex: 0 1 20px; color: var(--biela); }

/* Tablet (768 až 1024): vínový pás, vľavo len ikona menu, vpravo miesto
   po košíku. Presah −8 % ostáva (hlavička prekrýva vrch hero). */
@media (max-width: 1024px) {
  .hlavicka__pas { background: var(--vinova); }
  .hlavicka__popis,
  .hlavicka__vlavo .hlavicka__tlacidlo:not(.burger),
  .hlavicka__vpravo .hlavicka__ikona { display: none; }
  .hlavicka__vlavo { min-height: 40px; }
}

/* Mobil (≤767): poradie obrátené, menu vpravo, košík vľavo; stĺpce
   40 % / 20 % / 40 %, odsadenie 1 % zhora a zdola, bez presahu. */
@media (max-width: 767px) {
  .hlavicka__pas {
    flex-direction: row-reverse;
    margin-bottom: 0;
    padding: 1% 0;
  }
  .hlavicka__vlavo { width: 40%; flex-direction: row-reverse; }
  .hlavicka__vpravo { width: 40%; flex-direction: row; min-height: 0; padding: 0 0 0 5%; }
  .hlavicka__logo { width: 20%; padding: 0; }
  .hlavicka__logo img { width: 100%; }
}

/* ---------- Panel menu ----------
   Originál ho otvára ako JetPopup. Namerané: desktop 500 px zľava, mobil
   312 px sprava, vínové pozadie, obsah v poradí logo → (ikony len na mobile)
   → biela karta s položkami → pás dvoch fotiek. */

.navigacia {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;                         /* namerané: na desktope prichádza ZĽAVA */
  width: 500px;                    /* namerané */
  padding: 30px 30px 0;            /* namerané: obsah 440 široký, začína na y30 */
  background: var(--vinova);
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  overflow-y: auto;
  z-index: 60;
}

.menu-otvorene .navigacia { transform: translateX(0); }
.menu-otvorene { overflow: hidden; }

.menu-otvorene::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);   /* namerané */
  z-index: 55;
}

/* Hlavička má vlastný stacking context (position + z-index), takže z-index
   navigácie sa počíta VNÚTRI nej, stmavovací prekryv (z-index 55, ktorý je
   v koreňovom kontexte) potom ležal NAD otvoreným panelom. Klik na položku
   menu tak netrafil odkaz, ale prekryv, a menu sa len zavrelo. */
.menu-otvorene .hlavicka { z-index: 60; }

/* Krížik je v rohu panela, nie v jeho odsadení (namerané 32 × 32, čierny) */
.navigacia__zavriet {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: var(--cierna);
  color: var(--biela);
}

.navigacia__logo {
  width: 40%;                      /* Elementor: 40 % (176 px v paneli 500) */
  height: auto;
  margin-inline: auto;
}

/* Ikony sociálnych sietí sú na desktope skryté (sú v hlavičke), na tablete
   pod sebou vľavo, na mobile v riadku, nižšie v media queries. */
.navigacia__ikony { display: none; color: var(--biela); }
.navigacia__ikony a { display: flex; }

/* Medzi logom a kartou menu je v origináli 80 až 20 medzera, 40 prázdny
   zvyšok po zrušenom listingu a znova 20. Prázdny listing neprepisujeme. */
.navigacia__zoznam {
  margin-top: 90px;                /* namerané: karta začína na y181,75 */
  background: var(--biela);        /* namerané: položky sú v bielej karte */
}

.navigacia__zoznam a {
  display: block;
  padding: 20px 25px;              /* namerané: položka 60 vysoká */
  font-family: var(--pismo-nadpis);
  font-size: 24px;                 /* namerané 24px/20px, váha 500 */
  font-weight: 500;
  line-height: 20px;
  color: var(--vinova);            /* namerané: vínová na bielej */
}

/* Namerané v origináli: hover aj aktívna položka = čierny text, prechod 0,2 s */
.navigacia__zoznam a { transition: color 0.2s linear; }
.navigacia__zoznam a:hover,
.navigacia__zoznam a[aria-current="page"] {
  color: var(--cierna);
  text-decoration: none;
}

/* „O nás" je v origináli prepínač podmenu, nie odkaz, vyzerá ako ostatné
   položky, šípka sedí hneď za textom s odsadením 10 (nie pri okraji). */
.navigacia__sipka {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 20px 25px;
  font-family: var(--pismo-nadpis);
  font-size: 24px;
  font-weight: 500;
  line-height: 20px;
  color: var(--vinova);
  text-align: left;
  transition: color 0.2s linear;
}
.navigacia__sipka:hover { color: var(--cierna); }
.navigacia__sipka svg { flex: none; transition: transform 0.2s ease; }
.navigacia__sipka[aria-expanded="true"] svg { transform: rotate(180deg); }

.navigacia__podmenu a {
  padding-left: 45px;              /* odsadené o úroveň hlbšie */
  font-size: 20px;
}

/* ---------- Pás fotiek ----------
   Rovnaký prvok je na domovskej, v paneli menu aj na /cukrarenska-vyroba-mnamka/,
   preto je tu (rozlozenie.css sa načítava na každej stránke).

   Namerané: sekcia 324,44 = 10 + 304,44 + 10, pás ide cez celú šírku okna
   (nie v kontajneri), osem snímok naraz s medzerou 10. Fotky sú 900 × 1600,
   takže výšku určuje pomer strán, netreba ju písať zvlášť. */

.pas-fotiek { padding-block: 10px; }

.karusel { overflow: hidden; }

.karusel__pas {
  display: flex;
  will-change: transform;
}

/* Elementor image-carousel: 8 naraz s medzerou 10 od šírky 1024, pod ňou
   2 naraz (Swiper berie hranice ako min-width, preto 1024 je ešte desktop
   a 767 ešte tablet). Na mobile medzera 15. */
.karusel__snimka {
  flex: 0 0 calc((100% - 7 * 10px) / 8);
  margin-right: 10px;
}

@media (max-width: 1023.98px) {
  .karusel__snimka { flex-basis: calc((100% - 10px) / 2); }
}

@media (max-width: 766.98px) {
  .karusel__snimka { flex-basis: calc((100% - 15px) / 2); margin-right: 15px; }
}

.karusel__snimka img {
  width: 100%;
  height: auto;
  aspect-ratio: 900 / 1600;        /* namerané: 171,25 × 304,44 */
  object-fit: cover;
}

/* Pás dvoch fotiek pod menu, namerané: blok 440 × 290, fotky 200 × 250 */
.navigacia__karusel { padding: 20px 10px; margin-top: 20px; }

.navigacia__karusel .karusel__snimka {
  flex-basis: calc((100% - 20px) / 2);   /* Elementor: dve naraz, medzera 20 */
  margin-right: 20px;
}

@media (max-width: 766.98px) {
  .navigacia__karusel .karusel__snimka {
    flex-basis: calc((100% - 10px) / 2);  /* mobil: medzera 10 */
    margin-right: 10px;
  }
}

/* Fotky v paneli sú 1200 × 1500, nie 900 × 1600 ako na domovskej */
.navigacia__karusel .karusel__snimka img { aspect-ratio: 1200 / 1500; }

/* ---------- Karty hlavných sekcií ----------
   Používajú sa na domovskej aj na /kontakt/, preto sú tu (rozlozenie.css sa
   načítava na každej stránke). Rozmery sa líšia podľa stránky, tie sú
   v domov.css a podstranka.css. */

/* Elementor listing (post-434): 4 stĺpce s medzerou 30, karta s odsadením
   10 zhora a zdola; fotka na celú šírku v pomere 4 : 5, názov 22/30 s
   odsadením 10, popis 16/22 a pod ním koniec odseku 1,6em. Na mobile
   2 stĺpce s medzerou 15. /kontakt/ niektoré hodnoty prepisuje. */
.sekcie__mriezka {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 30px;                     /* Elementor: medzera 30 */
}

.sekcia-karta { display: block; padding-block: 10px; }
.sekcia-karta:hover { text-decoration: none; }

.sekcia-karta__foto {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;             /* 277,5 × 346,9 pri 1440 */
  object-fit: cover;
}

.sekcia-karta__nazov {
  display: block;
  padding-block: 10px;
  font-size: 22px;                 /* Elementor: 22 px / 30 px, váha 500 */
  font-weight: 500;
  line-height: 30px;
  color: var(--vinova);
  text-transform: uppercase;
  text-align: center;
}

.sekcia-karta__popis {
  display: block;
  padding-bottom: 1.6em;           /* koniec odseku (Astra: 1,6em) */
  font-size: 16px;                 /* Elementor: 16 px / 22 px, váha 300 */
  font-weight: 300;
  line-height: 22px;
  color: var(--vinova-svetla);
  text-align: center;
}

/* ---------- Pás s tradíciou (42) ---------- */

.pas-tradicia {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;                /* namerané */
  background: linear-gradient(216deg, #8B152D 0%, #AB1D37 100%);
  color: var(--biela);
}

.pas-tradicia p {
  width: 100%;
  margin: 0;
  text-align: center;
  font-size: 30px;                 /* namerané 30px, váha 500 */
  font-weight: 500;
  line-height: 42px;
}

/* ---------- Pätička ----------
   Tri stĺpce po 300 px a vpravo údaje o prevádzkovateľovi. */

/* Elementor (post-329): boxed 1200, predvolené odsadenie 10 dookola,
   štyri stĺpce po 25 %. */
.paticka {
  background: var(--biela);
  margin-top: auto;
  padding-block: 10px;
}

.paticka__obal {
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* Elementor: 4 × 25 % */
  max-width: calc(1200px + 20px);
  padding-inline: 10px;
}

.paticka__nadpis {
  padding-block: 20px;             /* Elementor: 20 zhora aj zdola */
  font-size: 22px;                 /* Elementor: 22 px / 40 px, váha 500 */
  font-weight: 500;
  line-height: 40px;
  color: var(--vinova);
  text-transform: uppercase;       /* Elementor: veľké písmená */
}

.paticka__zoznam a {
  display: block;
  padding-block: 13px;             /* namerané: položka 46 = 13 + 20 + 13 */
  font-size: 18px;                 /* namerané 18px, váha 300 */
  font-weight: 300;
  line-height: 20px;               /* namerané */
  color: var(--vinova-svetla);
}

/* Namerané: #AB1D37 → #000 za 0,4 s (nie na tmavšiu vínovú). */
.paticka__zoznam a { transition: color 0.4s ease; }
.paticka__zoznam a:hover { color: var(--cierna); }

.paticka__zvyraznene { color: var(--cierna) !important; }   /* namerané */

/* Štvrtý stĺpec je v origináli zarovnaný k SPODKU stĺpcov (namerané: stĺpce
   sú 310 vysoké, jeho obsah 212,7 a nad ním ostáva presne 97,3). */
.paticka__prevadzkovatel {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  font-size: 16px;
  font-weight: 400;
  color: var(--vinova);
  text-align: center;              /* namerané */
}

.paticka__logo {
  width: 40%;                      /* Elementor: 40 % stĺpca (120 pri 1440) */
  height: auto;
  margin: 0 auto 10px;             /* Elementor: pod logom 10 */
}

.paticka__prevadzkovatel p {
  margin: 0 0 28px;                /* namerané: blok 82 = 54 textu + 28 */
  line-height: 18px;               /* namerané 16px/18px */
}

/* „Európsky fond" a „Tento web sme upiekli" sú v origináli tlačidlá:
   priehľadné, vínové písmo 14/14 váha 500, odsadenie 12/24, rádius 3. */
.paticka__tlacidlo {
  align-self: center;
  max-width: 100%;                 /* v užšom stĺpci sa text zalomí */
  padding: 12px 24px;              /* namerané */
  font-size: 14px;                 /* namerané 14px/14px, váha 500 */
  font-weight: 500;
  line-height: 14px;
  color: var(--vinova-svetla);
  border-radius: 3px;              /* namerané */
}

/* Základ dáva obrázkom display:block, vlajka musí ostať v riadku textu,
   inak tlačidlo narastie z 40,6 na 52. Odsadenie aj posun pod účiaru sú
   tie isté, aké dáva WordPress svojim emoji (0,07em / −0,1em). */
.paticka__vlajka {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-inline: 0.07em;
  vertical-align: -0.1em;
}

/* ---------- Tablet (768 až 1024) ----------
   Panel menu ostáva 500 zľava ako na desktope, ale ikony sietí sú v ňom
   pod sebou vľavo (hlavička ich na tablete nemá). Namerané: ikony od y121,9
   po 20 s medzerou 20, karta menu až na y321,9. */
@media (max-width: 1024px) {
  .navigacia__ikony {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-top: 30px;              /* medzera widgetov 20 + odsadenie 10 */
    padding-left: 10px;
  }
  .navigacia__zoznam { margin-top: 100px; }   /* 30 + prázdny listing 40 + 30 */
}

/* ---------- Mobil (≤767) ---------- */
@media (max-width: 767px) {
  /* Panel menu: 80 % šírky SPRAVA, zhora 5 % šírky panela, bez bokov */
  .navigacia {
    left: auto;
    right: 0;
    width: 80%;                    /* JetPopup: 80 % */
    padding: 4% 0 0;               /* 5 % z 80 % = 4 % okna */
    transform: translateX(100%);
  }

  /* Tri ikony v riadku: space-evenly s medzerou widgetov 20
     (namerané pri 312: okraje 53, medzery 73). */
  .navigacia__ikony {
    flex-direction: row;
    justify-content: space-evenly;
    margin-top: 20px;
    padding-left: 0;
  }

  .navigacia__zoznam { margin-top: 80px; }        /* 20 + prázdny listing 40 + 20 */
  .navigacia__karusel { margin-top: 10px; }
  .navigacia__zoznam a,
  .navigacia__sipka {
    padding: 15px 25px;            /* Elementor mobil: 15 / 25, položka 50 */
    font-size: 22px;               /* Elementor mobil: 22 px */
  }
  .navigacia__podmenu a { font-size: 18px; }

  /* Pás fotiek: 5 % po bokoch */
  .pas-fotiek { padding-inline: 5%; }

  /* Karty hlavných sekcií: 2 stĺpce s medzerou 15, bez odsadenia karty,
     názov 20/20, popis 14/16,8 (Elementor mobil). */
  .sekcie__mriezka { grid-template-columns: 1fr 1fr; gap: 0 15px; }
  .sekcia-karta { padding-block: 0; }

  .sekcia-karta__nazov {
    font-size: 20px;               /* Elementor mobil: 20 px, riadok 1em */
    line-height: 20px;
  }

  .sekcia-karta__popis {
    font-size: 14px;               /* Elementor mobil: 14 px, riadok 1,2em */
    line-height: 16.8px;
  }

  /* Pätička: bez vlastného odsadenia, stĺpce pod sebou s odsadením 25 zľava
     a textom zarovnaným VĽAVO; štvrtý blok cez celú šírku, 50 / 30. */
  .paticka { padding-block: 0; }
  .paticka__obal { grid-template-columns: 1fr; gap: 0; max-width: none; padding-inline: 0; }
  .paticka__stlpec { padding-left: 25px; }
  .paticka__prevadzkovatel { padding: 50px 0 30px; }
  .paticka__prevadzkovatel p { padding-top: 25px; }
}

/* ---------- Návrat hore ----------
   Astra #ast-scroll-top: 2,1em pri 20 px (42 × 42), 30 px od pravého
   a dolného okraja, vínové #AB1D37 s bielou šípkou; pri myši naopak. */
.navrat-hore {
  position: fixed;
  right: 30px;
  /* Spodná lišta sviatočného widgetu (mnamka.net holiday-widget.js) nastaví
     na <html> --mnamka-widget-lista = svoju výšku; tlačidlo sa nad ňu posunie. */
  bottom: calc(30px + var(--mnamka-widget-lista, 0px));
  transition: bottom .3s ease-out;
  z-index: 99;
  width: 2.1em;
  height: 2.1em;
  padding: 0;
  border-radius: 0;
  font-size: 20px;
  line-height: 2.1;
  text-align: center;
  color: var(--biela);
  background-color: var(--vinova-svetla);
}
.navrat-hore:hover { color: var(--vinova-svetla); background-color: var(--biela); }
.navrat-hore svg {
  display: inline-block;
  width: 1.6em;                    /* Astra: 1,6em, do 921 px 1em */
  height: auto;
  vertical-align: middle;
  transform: translate(0, -20%) rotate(180deg);
}
@media (max-width: 921px) {
  .navrat-hore svg { width: 1em; }
}

/* Pod pätičkou nesmie ostať biely priestor (konvencia platformy).
   `min-height: 100%` na to nestačí, percento sa počíta z výšky rodiča,
   ktorú nikto neurčuje, takže sa ignoruje. Rovnako to rieši aj originál:
   namerané na /sviatok/velka-noc/, kde obsah meria 346,4, ale pätička
   začína až na 528, teda telo je natiahnuté na výšku okna. */
html, body { min-height: 100vh; }
body { display: flex; flex-direction: column; }
main { flex: 1 0 auto; }