/*
 * Styl stránek testování podle grafického návrhu webu (Figma YQppXtop2GSoDF9vkgcIXi, Natálie):
 * titulní strana 265:714, úvod podstránky 327:62, propagační box 296:72, stavy prvků 371:4951.
 * Formulářové prvky, které návrh nekreslí (přepínač, zaškrtávátko, chyba, souhrn chyb), jsou
 * podle manuálu města, kapitola 07 (6P94OAi4MHXl10M0naNfCC, 61:217 a 71:1502). Pole je
 * podle návrhu: bílé, rámeček 1 px stromy-800, bez zaoblení.
 *
 * Styl prototypu se sem nebere. Stránky testování jsou první, co lidé uvidí, a mají vypadat
 * jako nový web, ne jako náčrt. Barvy jsou jen ze stupnice města, vlastní odstín tu není.
 */

/* Perex a podtitul jsou v návrhu Fira Sans 500 kurzívou (Podnadpis_italika_negativ). Písma
   aplikace Analýza mají kurzívu jen v řezu 400, tak se tenhle řez přidává tady (Google Fonts,
   OFL, podsady latin a latin-ext), ať se písma prototypu nemění. */
@font-face {
  font-family: 'Fira Sans'; font-style: italic; font-weight: 500; font-display: swap;
  src: url('pisma-doplnek/fira-sans-500-italic-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fira Sans'; font-style: italic; font-weight: 500; font-display: swap;
  src: url('pisma-doplnek/fira-sans-500-italic-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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --stromy-200: #C6E9A3; --stromy-400: #9BD85E; --stromy-600: #70B62C; --stromy-800: #538321; --stromy-1000: #2D4812;
  --reka-200: #AAC5E2; --reka-600: #3A70A8; --reka-800: #2F5A89; --reka-1000: #172C43;
  --slunce-600: #FFD500;
  --strechy-200: #EDA2AA; --strechy-600: #C52534; --strechy-1000: #4F0F15;
  --skaly-200: #B3B3B2; --skaly-400: #8C8C8C; --skaly-600: #3F3F3E;
  --snih: #F5F5F0; --neutral: #E0E0D7; --bila: #FFFFFF;
  --text: var(--skaly-600);
  --pismo-nadpis: 'Zilla Slab ZnS', 'Zilla Slab', Georgia, serif;
  --pismo-text: 'Fira Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  /* Okraje a odsazení oddílů z Read Me návrhu: 120 / 24 / 16 px, oddíly 80 / 56 / 40 px. */
  --okraj: 120px;
  --oddil: 80px;
}
@media (max-width: 60rem) { :root { --okraj: 24px; --oddil: 56px; } }
@media (max-width: 40rem) { :root { --okraj: 16px; --oddil: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bila); color: var(--text);
  font: 400 16px/1.5 var(--pismo-text); letter-spacing: .01em; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }
a { color: var(--reka-600); text-underline-offset: .15em; }
a:hover { color: var(--reka-1000); }
b, strong { font-weight: 600; }

/* Fokus podle návrhu: žlutá plocha slunce-600, text reka-1000 a tmavomodrý pruh pod prvkem. */
a:focus-visible { outline: none; background: var(--slunce-600); color: var(--reka-1000);
  box-shadow: 0 4px 0 var(--reka-1000); text-decoration: none; border-radius: 1px; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.preskocit { position: absolute; left: -999rem; top: 8px; z-index: 50; padding: 8px 16px;
  background: var(--slunce-600); color: var(--reka-1000); font-weight: 600; }
.preskocit:focus { left: 16px; }

.obal { max-width: calc(1200px + 2 * var(--okraj)); margin: 0 auto; padding: 0 var(--okraj); }
main:focus { outline: none; }   /* cíl odkazu Přeskočit na obsah, ne ovládací prvek */
.oddil { padding: var(--oddil) 0; }

/* ── typografie ─────────────────────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--pismo-nadpis); font-weight: 600; line-height: 1.2; letter-spacing: .02em;
  margin: 0; color: inherit; }
h1 { font-size: 48px; }
h2 { font-size: 32px; }
h3 { font-size: 24px; }
h4, .h4 { font: 600 20px/1.2 var(--pismo-text); letter-spacing: 0; margin: 0; }
.perex { font: italic 500 20px/28px var(--pismo-text); letter-spacing: .01em; max-width: 576px; }
.kurziva { font-style: italic; }
@media (max-width: 40rem) {
  h1 { font-size: 40px; }
  h2 { font-size: 28px; }
}

/* Nadpis oddílu: vlevo linka 3 px reka-600 (Section Header 296:69). */
.nadpis-oddilu { border-left: 3px solid var(--reka-600); padding: 0 16px; margin-bottom: 32px; }
.nadpis-oddilu p { margin: 16px 0 0; font: italic 500 16px/22px var(--pismo-text); }

/* ── tlačítka (Button 249:621) ──────────────────────────────────────────── */
.tlacitko { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px;
  padding: 8px 16px; border: 1px solid var(--stromy-800); border-radius: 3px; background: var(--stromy-800);
  color: var(--bila); font: 500 16px/22px var(--pismo-text); letter-spacing: .02em; text-decoration: none;
  cursor: pointer; }
.tlacitko.velke { min-height: 48px; padding: 12px 24px; }
.tlacitko.druhotne { background: var(--bila); color: var(--stromy-800); }
.tlacitko:hover { background: var(--stromy-200); color: var(--reka-1000); text-decoration: underline;
  box-shadow: 0 3px 0 var(--skaly-600); }
.tlacitko.druhotne:hover { box-shadow: 0 2px 0 var(--skaly-600); }
.tlacitko:active { background: var(--stromy-400); color: var(--reka-1000); box-shadow: none; }
.tlacitko:focus-visible { outline: none; background: var(--slunce-600); border-color: var(--slunce-600);
  color: var(--reka-1000); text-decoration: none; box-shadow: 0 4px 0 var(--reka-1000); }
.tlacitko[disabled], .tlacitko[aria-disabled="true"] { background: var(--skaly-200); border-color: var(--skaly-200);
  color: var(--reka-1000); box-shadow: none; text-decoration: none; cursor: not-allowed; }
.tlacitko svg { width: 20px; height: 20px; fill: currentColor; flex: 0 0 auto; }

/* ── hlavička ───────────────────────────────────────────────────────────── */
.hlava { background: var(--bila); }
.hlava .obal { display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-top: 24px; padding-bottom: 24px; }
.logo { display: block; flex: 0 0 auto; }
.logo svg { width: 136px; height: auto; }
.lg-slovo { fill: var(--skaly-600); }
.lg-hvezda { fill: var(--stromy-600); }
/* Vpravo v hlavičce položka stylem položky menu (Nav Item 296:59, h6): odkaz na přihlášku. */
.hlava-odkaz { font: 700 16px/22px var(--pismo-text); letter-spacing: 0; color: var(--reka-1000);
  text-decoration: none; text-align: right; }
.hlava-odkaz:hover { color: var(--reka-1000); text-decoration: underline; }
@media (max-width: 40rem) {
  .hlava .obal { padding-top: 12px; padding-bottom: 12px; }
  .logo svg { width: 96px; }
}

/* ── úvod s fotkou (Hero 265:773, telefon 369:774) ──────────────────────── */
.uvod { position: relative; overflow: hidden; background: var(--reka-1000); color: var(--bila);
  min-height: 467px; display: flex; align-items: flex-end; }
.uvod-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
/* Závoj z návrhu (nahoře průhledný, dole reka-1000 z 85 %), jen od třetiny výšky o něco
   hustší: nadpis je tu delší než v návrhu, stojí výš a na světlých střechách by bílá
   neměla 3 : 1. Změřeno pod nadpisem na 390, 768, 1440 a 1920 px. */
.uvod::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(23,44,67,0) 0%, rgba(23,44,67,.15) 14%, rgba(23,44,67,.6) 30%,
    rgba(23,44,67,.72) 46%, rgba(23,44,67,.78) 58%, rgba(23,44,67,.85) 100%); }
/* Hvězda z logotypu vyřízne pravý okraj fotky: 544 × 517 px, x 1128 z 1440 (návrh). */
.uvod-hvezda { position: absolute; z-index: 2; top: 0; right: -232px; width: 544px; height: 517px;
  fill: var(--bila); pointer-events: none; }
.uvod .obal { position: relative; z-index: 3; width: 100%; padding-top: 120px; padding-bottom: 80px; }
/* Mezery z návrhu (265:780) jsou mezi textovými rámci oříznutými na výšku písma: 24 px mezi
   nadpisem a podtitulem dá v CSS po odečtení prázdného místa řádků asi 2 px, k tlačítku 18 px. */
.uvod-obsah { max-width: 700px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.uvod-texty { display: flex; flex-direction: column; gap: 2px; }
.uvod .perex { margin: 0; max-width: 680px; }
@media (max-width: 60rem) {
  .uvod .uvod-hvezda { display: none; }   /* na tabletu by zakryla podtitul (nález 1.1 návrhu) */
  .uvod { min-height: 380px; }
  .uvod .obal { padding-bottom: 40px; }
}
/* Telefon (369:774): úvod kolem 280 px, claim stylem H2 32 px, obsah dole s odsazením 24 px. */
@media (max-width: 40rem) {
  .uvod { min-height: 280px; }
  .uvod::before { background: linear-gradient(180deg, rgba(23,44,67,.2) 0%, rgba(23,44,67,.65) 22%,
    rgba(23,44,67,.8) 50%, rgba(23,44,67,.88) 100%); }
  .uvod .obal { padding-top: 64px; padding-bottom: 24px; }
  .uvod h1 { font-size: 32px; }
  .uvod-obsah { gap: 12px; }
  .uvod-texty { gap: 6px; }
}

/* ── úvod podstránky (Page Intro 327:62) ────────────────────────────────── */
.uvod-podstranky { position: relative; overflow: hidden; background: var(--reka-1000); color: var(--bila); }
.uvod-podstranky .obal { position: relative; z-index: 1; min-height: 375px; display: flex; align-items: center;
  padding-top: 80px; padding-bottom: 80px; }
.uvod-podstranky-obsah { max-width: 792px; display: flex; flex-direction: column; gap: 4px; }
.uvod-podstranky .perex { margin: 0; }
/* Hvězda 437 × 415 px v reka-800, vidět 57 % šířky a 90 % výšky; na tabletu zůstává (371:3100),
   telefon ji nemá (370:1043). */
.uvod-podstranky .uvod-hvezda { width: 437px; height: 415px; right: -186px; fill: var(--reka-800); z-index: 0; }
@media (max-width: 60rem) {
  .uvod-podstranky .obal { min-height: 0; padding-top: 56px; padding-bottom: 56px; }
}
@media (max-width: 40rem) {
  .uvod-podstranky .uvod-hvezda { display: none; }
  .uvod-podstranky .obal { padding-top: 40px; padding-bottom: 40px; }
}

/* ── kroky jako dlaždice (Agenda Tile 358:1290) ─────────────────────────── */
.kroky { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px; counter-reset: krok; }
.krok { background: var(--snih); border: 1px solid var(--neutral); border-radius: 3px; padding: 24px;
  display: flex; flex-direction: column; gap: 16px; counter-increment: krok; }
.krok::before { content: counter(krok); width: 38px; height: 38px; border-radius: 50%; background: var(--stromy-200);
  color: var(--reka-1000); display: grid; place-items: center; font: 600 20px/1 var(--pismo-nadpis); }
.krok h3 { font: 600 20px/1.2 var(--pismo-text); letter-spacing: 0; }
.krok p { margin: 0; }
@media (max-width: 60rem) { .kroky { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .kroky { grid-template-columns: 1fr; gap: 16px; } }

/* ── obsah ve dvou sloupcích: 792 + 384 px jako Potřebuji vyřídit ────────── */
.dva-sloupce { display: grid; grid-template-columns: minmax(0, 792fr) minmax(0, 384fr); gap: 24px; align-items: start; }
/* Box vedle dlouhého formuláře jede s ním, aby vpravo nezůstala prázdná plocha. */
.dva-sloupce > aside { position: sticky; top: 24px; }
@media (max-width: 60rem) {
  .dva-sloupce { grid-template-columns: 1fr; gap: 40px; }
  .dva-sloupce > aside { position: static; }
}

/* ── propagační box (Promo Box 296:72) ──────────────────────────────────── */
.box-modry { background: var(--reka-800); color: var(--bila); border-radius: 3px; padding: 40px 32px;
  display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center;
  font-weight: 500; line-height: 22px; letter-spacing: .02em; }
.box-modry h2 { font-size: 32px; }
.box-modry-ikona { width: 96px; height: 96px; border-radius: 50%; background: var(--reka-600);
  display: grid; place-items: center; }
.box-modry-ikona svg { width: 48px; height: 48px; fill: var(--bila); }
.box-modry ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px;
  text-align: left; }
.box-modry li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; }
.box-modry li svg { width: 24px; height: 24px; fill: var(--stromy-200); margin-top: -1px; }
.box-modry a { color: var(--bila); }
.box-modry .tlacitko { background: var(--bila); color: var(--stromy-800); }
.box-modry .tlacitko:hover { background: var(--stromy-200); color: var(--reka-1000); }
.box-modry .tlacitko:focus-visible { background: var(--slunce-600); color: var(--reka-1000); box-shadow: 0 4px 0 var(--reka-1000); }

/* ── formulářový blok (manuál 71:1502) ──────────────────────────────────── */
.formular-blok { background: var(--snih); border-top: 2px solid var(--reka-600); padding: 32px 48px 48px; }
.formular-blok fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.formular-cast + .formular-cast { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--neutral); }
/* Legenda plave: jinak ji prohlížeč kreslí do horního rámečku fieldsetu (čára vede vedle ní)
   a odsazení fieldsetu dává pod ni, ne nad ni. */
.formular-blok legend { float: left; width: 100%; padding: 0; }
.formular-blok legend + * { clear: both; }
.formular-cast > legend { margin-bottom: 24px; font: 600 24px/1.2 var(--pismo-nadpis); letter-spacing: .02em; }
.formular-blok .pole { margin-top: 32px; }
.formular-blok .formular-cast > legend + .pole { margin-top: 0; }
.pole > label:not(.volba), .pole > legend, .popisek { display: block; margin-bottom: 12px; font: 600 16px/22px var(--pismo-text); }
.povinne { color: var(--strechy-600); margin-left: 2px; }
.napoveda { margin: -2px 0 12px; font: italic 400 16px/22px var(--pismo-text); }
@media (max-width: 40rem) { .formular-blok { padding: 24px 16px 32px; } }

/* Pole podle návrhu (Search Field 358:1586): najetí 2 px stromy-1000, fokus 2 px reka-1000 + žlutý prstenec. */
.vstup { display: block; width: 100%; max-width: 405px; height: 48px; padding: 0 16px; background: var(--bila);
  border: 1px solid var(--stromy-800); border-radius: 0; color: var(--text); font: 400 16px/22px var(--pismo-text);
  letter-spacing: .01em; }
.vstup::placeholder { color: var(--text); font-style: italic; opacity: 1; }
.vstup:hover { border-color: var(--stromy-1000); box-shadow: inset 0 0 0 1px var(--stromy-1000); }
.vstup:focus { outline: none; border-color: var(--reka-1000); box-shadow: inset 0 0 0 1px var(--reka-1000), 0 0 0 3px var(--slunce-600); }

/* Přepínače a zaškrtávátka podle manuálu: plocha 32 px, ikona 24 px. Barva je zelená jako
   rámeček pole v návrhu, ne modrá manuálu, aby formulář nemíchal dvě barvy ovládání. */
.volby { display: flex; flex-wrap: wrap; gap: 8px 32px; }
.volby.pod-sebou { flex-direction: column; gap: 8px; }
.volba { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: start; gap: 8px; cursor: pointer;
  font: 400 16px/22px var(--pismo-text); }
.volba > span { padding-top: 5px; }
.volba input, .dlazdice-volba input { appearance: none; -webkit-appearance: none; margin: 4px; width: 24px; height: 24px;
  border: 2px solid var(--stromy-800); background: var(--bila); display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; }
.volba input[type="radio"], .dlazdice-volba input { border-radius: 50%; }
.volba input[type="checkbox"] { border-radius: 3px; }
.volba input[type="radio"]:checked, .dlazdice-volba input:checked { box-shadow: inset 0 0 0 4px var(--bila); background: var(--stromy-800); }
.volba input[type="checkbox"]:checked { background: var(--stromy-800) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.6 17.4 4.5 12.3l1.6-1.6 3.5 3.5 8.3-8.3 1.6 1.6z'/%3E%3C/svg%3E") center / 20px no-repeat; }
.volba input:hover, .dlazdice-volba input:hover { border-color: var(--stromy-1000); }
.volba input:focus-visible, .dlazdice-volba input:focus-visible { outline: none; border-color: var(--reka-1000);
  box-shadow: 0 0 0 3px var(--slunce-600); }
.volba input[type="radio"]:checked:focus-visible, .dlazdice-volba input:checked:focus-visible {
  box-shadow: inset 0 0 0 4px var(--bila), 0 0 0 3px var(--slunce-600); }

/* Volba skupiny jako dlaždice s ikonou v kruhu (Agenda Tile 358:1290): skupina je pro člověka
   nejdůležitější otázka a ikony jsou tytéž, jakými se skupiny značí na titulní straně. */
.dlazdice-volby { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 12px; }
.dlazdice-volba { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr) 32px; gap: 12px;
  align-items: start; padding: 16px; background: var(--bila); border: 1px solid var(--neutral); border-radius: 3px; cursor: pointer; }
.dlazdice-volba:hover { border-color: var(--stromy-800); }
.dlazdice-volba:has(input:checked) { border-color: var(--stromy-800); box-shadow: inset 0 0 0 1px var(--stromy-800); }
.dlazdice-volba:has(input:focus-visible) { border-color: var(--reka-1000); box-shadow: 0 0 0 3px var(--slunce-600); }
.dlazdice-volba .kruh { width: 38px; height: 38px; border-radius: 50%; background: var(--stromy-200);
  display: grid; place-items: center; }
.dlazdice-volba .kruh svg { width: 22px; height: 22px; fill: var(--reka-1000); }
.dlazdice-volba b { display: block; font: 600 18px/22px var(--pismo-text); padding-top: 8px; }
.dlazdice-volba small { display: block; margin-top: 4px; font: 400 14px/20px var(--pismo-text); }
.dlazdice-volba input { margin: 3px 0 0 4px; }

/* Chyba podle manuálu: rámeček 2 px strechy-600 a pod polem text strechy-600. */
.chybova-zprava { display: flex; gap: 6px; align-items: flex-start; margin: 8px 0 0; color: var(--strechy-600);
  font: 500 14px/20px var(--pismo-text); }
.chybova-zprava svg { width: 18px; height: 18px; fill: currentColor; flex: 0 0 auto; margin-top: 1px; }
.pole.chyba .vstup { border-color: var(--strechy-600); box-shadow: inset 0 0 0 1px var(--strechy-600); }
.pole.chyba .vstup:focus { border-color: var(--reka-1000); box-shadow: inset 0 0 0 1px var(--reka-1000), 0 0 0 3px var(--slunce-600); }
.pole.chyba .volba input, .pole.chyba .dlazdice-volba input { border-color: var(--strechy-600); }

/* Souhrn chyb jako Oznámení, varianta Chyba (manuál 79:2178): plocha strechy-200, text strechy-1000. */
.oznameni { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding: 24px; border-radius: 3px; margin-bottom: 32px; }
/* Fokus sem posílá skript po odeslání, aby čtečka přečetla souhrn; obrys návrh nezná
   a uživatel na box nepřešel klávesnicí. */
.oznameni:focus, .potvrzeni:focus { outline: none; }
.oznameni > svg { width: 24px; height: 24px; fill: currentColor; }
.oznameni.chyba { background: var(--strechy-200); color: var(--strechy-1000); }
.oznameni.chyba a { color: var(--strechy-1000); font-weight: 600; }
.oznameni ul { margin: 8px 0 0; padding-left: 20px; }
.oznameni li + li { margin-top: 4px; }

/* Potvrzení odeslání: zvýrazněný box (Quick Link Box Highlighted 348:1197), snih s pruhem 6 px stromy-800. */
.potvrzeni { background: var(--snih); border-left: 6px solid var(--stromy-800); padding: 32px 40px; }
.potvrzeni .kruh { width: 56px; height: 56px; border-radius: 50%; background: var(--stromy-200); display: grid;
  place-items: center; margin-bottom: 24px; }
.potvrzeni .kruh svg { width: 32px; height: 32px; fill: var(--stromy-1000); }
.potvrzeni h2 { margin-bottom: 16px; }
@media (max-width: 40rem) { .potvrzeni { padding: 24px; } }

/* Seznam s ikonami (Než začnete) a kroky ve dvou sloupcích vedle bloku souhlasu. */
.seznam-ikony { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.seznam-ikony li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; }
.seznam-ikony svg { width: 24px; height: 24px; fill: var(--stromy-800); }
.kroky.dva { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 40rem) { .kroky.dva { grid-template-columns: 1fr; } }
.blok + .blok { margin-top: 56px; }
.souhlas-blok { padding: 32px; }
.souhlas-blok h2 { font-size: 24px; margin-bottom: 16px; }
.souhlas-blok .pole { margin-top: 24px; }
.souhlas-blok .formular-odeslat { margin-top: 24px; }
.drobne { font-size: 14px; line-height: 20px; margin-top: 24px; }

/* Přihláška navazuje na kroky, mezera mezi nimi je jedno odsazení oddílu, ne dvě. */
.oddil-prihlaska { padding-top: 0; }
.formular-odeslat { margin-top: 40px; }
.napoveda-volby { display: block; margin-top: 4px; font: italic 400 16px/22px var(--pismo-text); }
.potvrzeni h3 { margin-bottom: 16px; }

/* Past na roboty: mimo obraz, ne `display: none`, který část robotů pozná. */
.past { position: absolute; left: -999rem; width: 1px; height: 1px; overflow: hidden; }

/* Text stránky o zpracování údajů. */
.text-stranky { max-width: 792px; }
.text-stranky h2 { margin: 48px 0 16px; font-size: 24px; }
.text-stranky h2:first-child { margin-top: 0; }
.text-stranky ul { padding-left: 20px; margin: 0 0 16px; }
.text-stranky li + li { margin-top: 8px; }
.doplnit { background: var(--slunce-600); color: var(--reka-1000); padding: 0 4px; }

/* Pruh ukázky nad hlavičkou. */
.pruh-ukazka { background: var(--reka-1000); color: var(--bila); font-size: 14px; line-height: 20px; }
.pruh-ukazka .obal { padding-top: 10px; padding-bottom: 10px; }

/* ── patička (Footer 265:1040) ──────────────────────────────────────────── */
.pata { background: var(--reka-800); color: var(--bila); font-weight: 500; line-height: 22px; letter-spacing: .02em; }
.pata .obal { padding-top: 80px; padding-bottom: 40px; }
.pata-sloupce { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.pata h2 { font: 600 20px/1.2 var(--pismo-text); letter-spacing: 0; margin-bottom: 24px; }
.pata ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.pata li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; }
.pata li.bez-ikony { display: block; }
.pata li svg { width: 18px; height: 18px; fill: var(--bila); margin-top: 2px; }
.pata a { color: var(--bila); }
.pata a:hover { color: var(--bila); text-decoration-thickness: 2px; }
/* Fokus na tmavé ploše: žlutá s tmavým textem jako všude, bílý text patičky by na žluté zmizel. */
.pata a:focus-visible, .pata a:focus-visible svg, .box-modry a:not(.tlacitko):focus-visible { color: var(--reka-1000); fill: var(--reka-1000); }
.pata-spodek { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 40px; }
.pata-spodek a { display: inline-flex; align-items: center; gap: 8px; }
.pata-spodek svg { width: 16px; height: 16px; fill: var(--bila); }
@media (max-width: 60rem) { .pata-sloupce { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; } }
@media (max-width: 40rem) {
  .pata .obal { padding-top: 40px; }
  .pata-sloupce { grid-template-columns: 1fr; }
  .pata-spodek { flex-direction: column; align-items: flex-start; }
}