/*
 * Zaklad: pismo, reset, typografie, formatovany text.
 * Nic, co je specificke pro jednu komponentu – to patri do components.css.
 */

/* Inter jako promenne pismo, self-hostovane. Zadny externi pozadavek –
   CSP na webu povoluje jen vlastni doménu. */
@font-face {
  font-family: "Inter var";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter var";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Kotvy nesmi skoncit pod lepivou hlavickou. */
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--pozadi);
  color: var(--text);
  font-family: var(--pismo);
  font-size: var(--velikost-text);
  line-height: var(--vyska-radku);
  font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;

  /* Pojistka proti vodorovnemu posuvniku. Zamerne `clip`, ne `hidden`:
     `hidden` by z body udelalo scrollovaci kontejner a tim by prestala
     fungovat lepiva hlavicka (position: sticky). `clip` zadny kontejner
     nezaklada, takze hlavicka drzi a posuvnik stejne nevznikne. */
  overflow-x: clip;

  /* Dlouhe slovo (adresa, e-mail) se radeji zalomi, nez aby rozjelo stranku. */
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--mezera-4);
  line-height: var(--vyska-radku-nadpis);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--zelena-900);
}

h1 { font-size: var(--velikost-h1); letter-spacing: -0.032em; }
h2 { font-size: var(--velikost-h2); letter-spacing: -0.025em; }
h3 { font-size: var(--velikost-h3); }
h4 { font-size: 1.0625rem; }

p {
  margin: 0 0 var(--mezera-4);
  text-wrap: pretty;
}

p:last-child { margin-bottom: 0; }

a {
  color: var(--odkaz);
  text-decoration-color: color-mix(in srgb, var(--odkaz) 35%, transparent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 0.08em;
  transition: color var(--prechod), text-decoration-color var(--prechod);
}

a:hover {
  color: var(--zelena-600);
  text-decoration-color: currentColor;
}

/* Viditelne zamereni klavesnicí – nikdy neodstranovat bez nahrady. */
:focus-visible {
  outline: 3px solid var(--zelena-500);
  outline-offset: 3px;
  border-radius: var(--radius-s);
}

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

/* `picture` je jen obal kvuli WebP variante, v rozvrzeni nema co delat.
   Bez `display: contents` by se pres nej nepropsala vyska – obrazek
   s height:100 % by ji pocital vuci obalu, ktery se rídi obsahem,
   a nevyplnil by dlazdici (galerie, nahledy clanku). */
picture {
  display: contents;
}

/* Vychozi velikost inline ikony. SVG bez atributu width by se jinak
   vykreslilo v nahradnich 300 × 150 px a rozbilo by okolni prvek.
   Komponenty (tlacitka, karty, kontakty) si velikost prebijeji samy. */
.ikona {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

ul, ol {
  margin: 0 0 var(--mezera-4);
  padding-left: 1.35em;
}

li { margin-bottom: var(--mezera-2); }
li::marker { color: var(--zelena-500); }

strong { font-weight: 650; }

hr {
  border: 0;
  border-top: 1px solid var(--linka);
  margin: var(--mezera-7) 0;
}

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

/* Prvky formularu dedi pismo (web zadny formular nema, ale at je zaklad uplny) */
button, input, select, textarea {
  font: inherit;
  color: inherit;
}

/* --- Formatovany text (clanky a dlouhe bloky z administrace) --- */

.text > :first-child { margin-top: 0; }
.text > :last-child { margin-bottom: 0; }

/*
 * Nadpisy maji dve mozne urovne podle toho, kde blok stoji. Pod sekcnim <h2>
 * (o-statku, chmel, titulka) prijdou z prevodniku jako h3/h4. Pod <h1>
 * (pravni stranky, telo clanku) je posun_nadpisu() posune na h2/h3 a blok
 * dostane tridu `text--od-h2`.
 *
 * Selektory jsou proto parove a :not() je tu schvalne: bez nej by h3 v posunutem
 * bloku sedelo na obe pravidla zaroven a vysledek by zavisel na poradi v souboru.
 * Vzhled je v obou pripadech stejny – meni se jen znacka, ne to, co ctenar vidi.
 */
.text:not(.text--od-h2) h3,
.text--od-h2 h2 {
  margin-top: var(--mezera-7);
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem);
  /* Globalni h2 si utahuje prostrkani na -0.025em, h3 zustava na -0.02em
     ze spolecneho pravidla. Bez tohohle radku by posunuty nadpis vypadal
     jinak nez tentyz nadpis na obsahove strance. */
  letter-spacing: -0.02em;
}

.text:not(.text--od-h2) h4,
.text--od-h2 h3 {
  margin-top: var(--mezera-6);
  font-size: 1.15rem;
  color: var(--zelena-800);
}

.text p,
.text ul,
.text ol {
  max-width: var(--sirka-textu);
}

.text > p:first-of-type {
  font-size: var(--velikost-lead);
  color: var(--text-tlumeny);
}

/* --- Pomocne tridy --- */

.jen-pro-ctecky {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.preskocit {
  position: absolute;
  top: var(--mezera-3);
  left: var(--mezera-3);
  z-index: var(--nad-vsim);
  padding: var(--mezera-3) var(--mezera-5);
  background: var(--zelena-700);
  color: var(--bila);
  border-radius: var(--radius-m);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform var(--prechod);
}

.preskocit:focus {
  transform: translateY(0);
  color: var(--bila);
}

/* Kdo si vypnul animace, nedostane zadnou. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

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