/* CRONUM — zdieľané doplnkové štýly motívu.
   Zámerne minimálne: každá stránka si nesie svoj vlastný pôvodný <style> blok
   (kvôli 1:1 vernosti dizajnu), takže sem patrí iba to, čo je skutočne nové
   a spoločné pre celý web - napr. stav chyby pri odoslaní formulára, ktorý
   pôvodný statický export vôbec neriešil (vždy iba predstieral úspech). */

.form-err {
  border: 1px solid #d64550;
  background: rgba(214, 69, 80, .12);
  padding: 20px 24px;
  color: var(--text, #E7E4DD);
  font-size: .95rem;
  display: flex;
  gap: 14px;
  align-items: center;
  line-height: 1.5;
  margin: 10px 0;
}
.form-err .okmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: #d64550;
  color: #fff;
  font-weight: 700;
  flex: none;
  border-radius: 50%;
}

/* Newsletter formulár v zdieľanej päte (inc/footer.php).
   Predtým bolo toto pravidlo bajtovo skopírované do 26 z 28 stránok -
   teraz existuje raz, spolu so zdieľanou pätou. */
.nl-foot{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;padding:0 0 28px}
.nl-foot-lbl{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.nl-foot-eyebrow{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);white-space:nowrap}
.nl-foot-t{color:var(--muted);font-size:.92rem}
.nl-foot form{display:flex;gap:12px;flex:0 1 420px}
.nl-foot input{flex:1;min-width:0;background:transparent;border:0;border-bottom:1px solid var(--line);padding:11px 4px;color:var(--text);font:inherit;font-size:.92rem;transition:border-color .25s}
.nl-foot input::placeholder{color:var(--faint)}
.nl-foot input:focus{outline:none;border-bottom-color:var(--gold)}
.nl-foot button{font-family:var(--mono);font-size:.78rem;letter-spacing:.05em;padding:12px 24px;border:0;border-radius:2px;background:var(--gold);color:var(--ink);font-weight:500;cursor:pointer;transition:background .25s;white-space:nowrap}
.nl-foot button:hover{background:var(--gold-bright)}
.nl-foot-note{width:100%;font-size:.72rem;color:var(--faint);margin:0;line-height:1.5}
.nl-foot-note a{color:var(--muted);border-bottom:1px solid var(--line);transition:.2s}
.nl-foot-note a:hover{color:var(--gold-bright);border-color:var(--gold-bright)}
@media(max-width:640px){.nl-foot form{flex:1 1 100%}}
.cronum-credit a:hover{color:var(--gold-bright, #C2A15E)}

/* Mobilná hlavička na dva riadky - predtým sa na úzkej obrazovke logo,
   Divízie, jazyk, CTA tlačidlo aj burger natláčali do jedného riadka a
   tlačidlo "Dohodnúť stretnutie" pretekalo mimo obsah. Teraz: 1. riadok
   = logo na strede, 2. riadok = Divízie, jazyk, CTA, burger. Rieši sa
   to čisto cez CSS (display:contents), bez zásahu do HTML štruktúry. */
@media(max-width:640px){
  .bar{
    flex-wrap:wrap;
    height:auto;
    min-height:auto;
    padding-top:14px;
    padding-bottom:12px;
    row-gap:12px;
  }
  .hleft{display:contents}
  .hright{display:contents}
  .brand{order:1;flex:0 0 100%;justify-content:center;display:flex}
  #trigger{order:2}
  .lang{order:3}
  .hcta{order:4;padding:10px 16px;font-size:.72rem}
  #burger{order:5}
}

/* Odsadenie hero sekcie od vrchu na mobile - odkedy je hlavička na mobile
   dvojriadková (vyššie ako povodných ~74px), pôvodné padding-top:140px/130px
   (napevno v kóde jednotlivých stránok) už nestačilo a obsah sa schovával
   pod hlavičku. Cielime priamo na tieto konkretne hodnoty cez atribut
   selector (su to inline štýly, nie triedy), aby sme zasiahli presne len
   hero sekciu a nič iné. */
@media(max-width:640px){
  [style*="padding-top:140px"],
  [style*="padding-top:130px"],
  .hero-inner{
    padding-top:200px!important;
  }
}

/* Zálohové štýly pre mobilné rozbaľovacie menu (#menuPanel) a jeho obsah.
   3 stránky (Ochranné známky, RPVS, Pripravujeme) v origináli nemali
   mobilné menu vôbec, takže im chýbali aj tieto CSS pravidlá - dostali
   len HTML a JS (pri zjednocovaní hlavičky), ale nie vzhľad, takže sa
   menu po kliknutí zobrazovalo nezarámované a nesprávne umiestnené.
   Hodnoty sú prevzaté 1:1 z stránky, ktorá toto menu mala pôvodne
   (rovnaké CSS premenné, takže farby sedia aj s divíznou paletou). Na
   stránkach, ktoré vlastné pravidlá už majú, toto len bezpečne nahrádza
   rovnakými hodnotami. */
.menu-panel{position:absolute;top:calc(100% + 16px);right:0;width:min(280px,calc(100vw - 2*var(--edge)));background:var(--surface);border:1px solid var(--line);border-radius:4px;overflow:hidden;box-shadow:0 30px 70px -20px rgba(0,0,0,.7);opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .3s,transform .3s;z-index:75}
.menu-panel.open{opacity:1;transform:translateY(0);pointer-events:auto}
.menu-panel a{display:block;padding:14px 22px;color:var(--muted);font-size:.9rem;letter-spacing:.02em;border-bottom:1px solid var(--line);transition:background .2s,color .2s}
.menu-panel a:last-child{border-bottom:0}
.menu-panel a:hover{background:var(--surface-2);color:var(--gold-bright)}
.mp-group{border-bottom:1px solid var(--line)}
.mp-group.open .mp-chev{transform:rotate(180deg)}
.mp-group.open .mp-sub{max-height:360px}
.mp-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;background:transparent;border:0;padding:14px 22px;color:var(--muted);font:inherit;font-size:.9rem;letter-spacing:.02em;cursor:pointer;transition:background .2s,color .2s}
.mp-toggle:hover{background:var(--surface-2);color:var(--gold-bright)}
.mp-toggle[aria-current="page"]{color:var(--gold-bright)}
.mp-sub{max-height:0;overflow:hidden;transition:max-height .3s ease;background:var(--ink)}
.mp-sub a{padding-left:38px;font-size:.86rem;border-bottom:1px solid var(--line);color:var(--faint)}
.mp-sub a:last-child{border-bottom:0}
.mp-sub a:hover{color:var(--gold-bright)}
.mp-sub a[aria-current="page"]{color:var(--gold-bright)}
.mp-sub a.mp-all{color:var(--muted);font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.mp-sub a.mp-all[aria-current="page"]{color:var(--gold-bright)}
.mp-all{color:var(--muted);font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.mp-all[aria-current="page"]{color:var(--gold-bright)}
.mp-chev{font-size:.7rem;transition:transform .25s;color:var(--gold)}
.mp-group.open .mp-chev{transform:rotate(180deg)}

/* Spodný riadok päty na mobile - predtým sa rozťahoval na krajne strany
   (justify-content:space-between), na úzkej obrazovke to vyzeralo
   nevyvážene. Na mobile teraz centrujeme na stred, prvky pod sebou. */
@media(max-width:640px){
  .foot-bottom2{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:10px;
  }
  .foot-bottom2 > span{
    justify-content:center;
    width:100%;
  }
}

/* Kompaktný prepínač jazykov na mobile - predtým boli natlačené vždy
   všetky 3 možnosti (SK|EN|HU) vedľa loga, Divízií aj burger tlačidla,
   na úzkej obrazovke to bolo tesné. Teraz sa na mobile zobrazí iba
   aktuálny jazyk; ťuknutím sa rozbalia zvyšné 2 možnosti ako malé menu
   pod ním (rovnaký vzor ako rozbaľovanie "Divízie"). Na desktope (nad
   760px) sa nič nemení - stále je vidno všetky tri naraz ako doteraz. */
@media(max-width:760px){
  .lang{position:relative;padding:4px 6px;gap:0}
  .lang-opt{padding:6px 7px}
  .lang-opt:not(.active){display:none}

  .lang.cronum-lang-open{
    flex-direction:column;
    align-items:stretch;
    align-self:center;
    gap:2px;
    border-radius:14px;
    margin-top:22px;
  }
  .lang.cronum-lang-open .lang-opt{
    width:100%;
    text-align:center;
  }
  .lang.cronum-lang-open .lang-opt:not(.active){
    display:inline-block;
  }
  .lang-chev{display:inline-block;margin-left:3px;font-size:.6em;opacity:.7}
}
@media(min-width:761px){
  .lang-chev{display:none}
}

/* Skrytie hlavičky pri scrollovaní nadol na mobile (viac priestoru na
   čítanie), opätovné zobrazenie pri scrollovaní nahor. Iba na mobile -
   na desktope zostáva hlavička vždy viditeľná ako doteraz. Logika
   (kedy pridať/odobrať triedu) je v cronum-core.js. */
@media(max-width:760px){
  header{
    transition:transform .3s ease;
  }
  header.cronum-hide{
    transform:translateY(-100%);
  }
}