/* ==========================================================================
   BASE.CSS
   Reset prehliadača, typografia a pomocné triedy pre rozloženie.
   Neobsahuje žiadny konkrétny komponent - tie sú v components.css.
   ========================================================================== */

/* --- RESET ---------------------------------------------------------------
   Zjednotenie správania prehliadačov. border-box znamená, že padding
   sa počíta DO šírky prvku - inak sa layout rozsype pri každom paddingu. */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--pismo);
  font-size: var(--v-s);
  line-height: 1.6;
  color: var(--text);
  background: var(--podklad);
  -webkit-font-smoothing: antialiased;
}

/* Obrázky sa nikdy nepretečú mimo svojho kontajnera */
img, svg { max-width: 100%; display: block; }

/* Formulárové prvky nededia písmo automaticky - musíme to vynútiť */
button, input, select, textarea { font: inherit; color: inherit; }

/* --- TYPOGRAFIA ---------------------------------------------------------
   Veľké nadpisy majú zápornú preložku písmen (letter-spacing).
   Bez toho pôsobia bold nadpisy rozťahano a lacno. */
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.15; }
h1 { font-size: var(--v-xxl); letter-spacing: -0.03em; }
h2 { font-size: var(--v-xl);  letter-spacing: -0.02em; }
h3 { font-size: var(--v-l);   letter-spacing: -0.01em; }
h4 { font-size: var(--v-m);   letter-spacing: -0.01em; }
p  { margin: 0; }

a { color: var(--modra); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- PRÍSTUPNOSŤ --------------------------------------------------------
   Viditeľný focus rám pri ovládaní klávesnicou. NIKDY nemazať -
   bez neho je stránka nepoužiteľná pre časť používateľov. */
:focus-visible {
  outline: 2px solid var(--modra);
  outline-offset: 2px;
  border-radius: var(--oblenie-s);
}

/* Odkaz "preskočiť na obsah" - viditeľný až po stlačení Tab */
.preskocit {
  position: absolute; left: -9999px;
  background: var(--modra); color: #fff;
  padding: var(--r3) var(--r4); border-radius: var(--oblenie-m); z-index: 999;
}
.preskocit:focus { left: var(--r4); top: var(--r4); }

/* --- POMOCNÉ TRIEDY PRE ROZLOŽENIE -------------------------------------- */

/* Centrovaný kontajner s bočnými okrajmi */
.obal {
  width: 100%;
  max-width: var(--sirka-obsahu);
  margin-inline: auto;
  padding-inline: var(--r5);
}

/* Zvislý rytmus medzi sekciami verejného webu */
.sekcia { padding-block: var(--r9); }
.sekcia--uzka { padding-block: var(--r8); }

/* Striedanie podkladu medzi sekciami */
.sekcia--papier { background: var(--papier); }
.sekcia--tmavsia { background: var(--podklad-tmavsi); }

/* "Eyebrow" - malý text nad nadpisom, verzálky s veľkou preložkou */
.eyebrow {
  font-size: var(--v-xxs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-jemny);
}

/* Text pre čítačky obrazovky - vizuálne skrytý, ale prítomný v DOM */
.len-pre-citacku {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Skrytie prvku - používa sa z JS cez element.hidden alebo túto triedu */
.skryte { display: none !important; }