/* akce.optikamilada.cz — Elias + Vera. Vzhled „vytištěný polep": bílý zmačkaný papír, černé úzké verzálky, šipka ↓ a kroužek.
   Jen bezpatková písma. Mobil-first (360 px), kontrast AA+ i nad texturou, čitelnost na slunci.
   Textura: public/papir.webp|jpg (scripts/priprav_papir.py) — ⚠️ licenci potvrdí František / grafik (README §4). */

/* Písmo nadpisů — Big Shoulders Display ExtraBold (SIL OFL 1.1, public/pisma/OFL.txt), OFL náhrada za Counterpress Bold
   z polepu (komerční, CJ Type). Hostované u nás, žádná CDN: podmnožina jen verzálky + česká diakritika + interpunkce,
   6 kB (scripts/priprav_pismo.py, 22. 9. 2026). Preload v index.html. @font-face musí začínat na začátku řádku —
   hlídá to kontrola_pred_nasazenim.sh. Malá písmena v souboru nejsou → nadpisy mají text-transform: uppercase. */
@font-face {
  font-family: "Akce Nadpis";
  src: url("/pisma/nadpis.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --podklad: #eaeaea;          /* medián textury — než se načte, a když se nenačte */
  --karta: #ffffff;
  --karta-pruhledna: rgba(255, 255, 255, 0.93);
  --text: #121212;
  --text-2: #3b3b3b;
  --linka: #767676;            /* okraje polí: 4,5 : 1 na bílé */
  --linka-jemna: #cfcfcf;
  --akcent: #121212;
  --na-akcentu: #ffffff;
  --vyhra: #0b5d1e;
  --chyba: #a4161a;
  --stin: 0 1px 2px rgba(0, 0, 0, 0.08), 0 10px 28px -14px rgba(0, 0, 0, 0.35);
  --pismo: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* úzké tučné verzálky jako na polepu; záloha, kdyby se písmo nenačetlo: Windows Bahnschrift, iOS/macOS DIN Condensed, Android Roboto Condensed */
  --pismo-nadpis: "Akce Nadpis", "Bahnschrift", "DIN Condensed", "Avenir Next Condensed", "sans-serif-condensed", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--podklad);
  color: var(--text);
  font-family: var(--pismo);
  font-size: 1.125rem;
  line-height: 1.6;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
/* Papír leží pod celou stránkou a nehýbe se: jeden obrázek pro telefon i desktop, bez švů při opakování.
   100lvh = největší výška okna → textura se nepřeškáluje, když mobilní prohlížeč schová adresní řádek. */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  z-index: -1;
  background: var(--podklad) url("/papir.jpg") center top / cover no-repeat;
  background-image: image-set(url("/papir.webp") type("image/webp"), url("/papir.jpg") type("image/jpeg"));
  pointer-events: none;
}
[hidden] { display: none !important; }
a { color: var(--text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 3px solid var(--akcent);
  outline-offset: 3px;
}
strong { font-weight: 700; }

.obal { max-width: 560px; margin: 0 auto; padding: 20px 16px 32px; }
@media (min-width: 400px) { .obal { padding-left: 20px; padding-right: 20px; } }
@media (min-width: 600px) { .obal { padding: 44px 32px 40px; } }

.navrh-pruh {
  margin: 0; padding: 8px 16px; background: #fff3b0; color: #121212;
  border-bottom: 2px solid #121212; font-size: 0.875rem; font-weight: 700; text-align: center;
}

/* --- typografie polepu: úzké tučné verzálky přímo na papíře (kontrast ≥ 8,5 : 1 i v tmavých záhybech) --- */
.znacka, h1, h2, .tlacitko, .kroky, .kod {
  font-family: var(--pismo-nadpis);
  font-stretch: condensed;
  text-transform: uppercase;
  font-feature-settings: "case" 1;   /* pomlčky, závorky a uvozovky ve výšce verzálek (Vera) */
}
.znacka {
  margin: 0 0 18px; font-size: 1.25rem; font-weight: 700; letter-spacing: 0.14em; line-height: 1.2; text-align: center;
}
.znacka a { text-decoration: none; }
h1 {
  margin: 0 0 22px; font-size: clamp(3.25rem, 17vw, 5.5rem); font-weight: 800;
  line-height: 1.06; letter-spacing: 0.005em; text-align: center; text-wrap: balance;   /* ≥ 1,05: čárka nad Ý nesmí sahat do řádku výš */
}
h2 { margin: 0 0 10px; font-size: 1.75rem; font-weight: 700; line-height: 1.05; letter-spacing: 0.01em; text-wrap: balance; }
h3 { margin: 18px 0 6px; font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
p { margin: 0 0 12px; }
.uvod { margin-bottom: 14px; }
.nabidka { font-size: 1.1875rem; line-height: 1.5; margin-bottom: 8px; }
.nabidka-jak { margin-bottom: 12px; }
.drobne { font-size: 1rem; color: var(--text-2); }

/* řádek z polepu „Podívejte se → Zaregistrujte se → Ušetřete" (kroky.radek) */
.kroky {
  margin: -6px 0 22px; font-size: clamp(0.9375rem, 4.4vw, 1.25rem); font-weight: 700; letter-spacing: 0.02em;
  line-height: 1.35; text-align: center; text-wrap: balance;   /* na 360 px jeden řádek jako na polepu, jinak vyváženě */
}

/* šipka → v řádku kroků: kresba jako ↓ níže (Big Shoulders má „→" jen vlasovou); barva = barva textu */
.kroky .sipka-vpravo {
  display: inline-block; width: 0.9em; height: 0.62em; margin: 0 0.1em; vertical-align: 0.06em;
  background-color: var(--text);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 44'%3E%3Cpath d='M0 22h56M36 4l20 18-20 18' fill='none' stroke='%23000' stroke-width='9'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 44'%3E%3Cpath d='M0 22h56M36 4l20 18-20 18' fill='none' stroke='%23000' stroke-width='9'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (forced-colors: active) { .kroky .sipka-vpravo { forced-color-adjust: none; background-color: CanvasText; } }

/* šipka ↓ a kroužek jako na polepu: vedou od nabídky k registraci (dekorace, čtečky je přeskočí) */
.polep-sipka { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 4px 0 22px; color: var(--text); }
.polep-sipka svg { display: block; }

/* --- karty: bílý list na papíře, text v nich má kontrast ≥ 10 : 1 --- */
.karta {
  margin: 0 0 20px; padding: 18px 18px 16px; background: var(--karta-pruhledna);
  border: 1px solid rgba(18, 18, 18, 0.14); border-left: 6px solid var(--akcent); border-radius: 6px;
  box-shadow: var(--stin);
}
.karta > :last-child { margin-bottom: 0; }
.uvod-karta { border-left-width: 1px; padding: 18px 18px 14px; }
.pocitadlo-cislo { font-size: 1.25rem; line-height: 1.4; }
.pocitadlo-cislo strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; }

/* --- karta „před startem" (1.–5. 10. 2026): odpočet a připomínka do kalendáře (texty v4 §1.12a, §1.12b) --- */
.pred-startem { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linka-jemna); }
.odpocet-nadpis { margin-bottom: 8px; font-weight: 700; }
/* číslice úzkým písmem polepu; jednotky čitelným tělovým písmem, aby se „sekundy" vešly i na 360 px (Vera) */
.odpocet {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px;
  margin: 0 0 14px; padding: 10px 4px; background: var(--karta); border: 1px solid var(--linka-jemna); border-radius: 6px;
}
.odpocet-blok { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.odpocet-cislo {
  font-family: var(--pismo-nadpis); font-stretch: condensed; font-weight: 800;
  font-size: clamp(2.25rem, 13vw, 3.25rem); line-height: 1; letter-spacing: 0.01em; font-variant-numeric: tabular-nums;
}
.odpocet-jednotka { font-size: 0.875rem; line-height: 1.3; color: var(--text-2); }
/* poslední minuta a hláška po nule — stejná váha jako nabídka, ať je jasné, že se něco děje */
.odpocet-slovy { font-size: 1.1875rem; font-weight: 700; margin-bottom: 14px; }
.pred-startem h3 { margin-top: 22px; }
.pred-startem .tlacitko { margin-bottom: 8px; }
.pred-startem > :last-child { margin-bottom: 0; }

/* formulář */
.formular {
  margin: 0 0 20px; padding: 20px 18px 18px; background: var(--karta);
  border: 2px solid var(--akcent); border-radius: 6px; box-shadow: var(--stin);
}
.formular > h2 { font-size: 2rem; }
.pole { margin: 0 0 18px; }
.pole label, .popisek { display: block; margin: 0 0 6px; font-weight: 700; }
.napoveda { margin: 6px 0 0; font-size: 0.9375rem; line-height: 1.5; color: var(--text-2); }
input[type="text"], input[type="email"], input[type="tel"] {
  display: block; width: 100%; min-height: 56px; padding: 12px 14px;
  font: inherit; color: var(--text); background: var(--karta);
  border: 2px solid var(--linka); border-radius: 6px; appearance: none;
}
input[aria-invalid="true"] { border-color: var(--chyba); border-width: 3px; }
.chyba-pole { margin: 6px 0 0; color: var(--chyba); font-weight: 700; font-size: 1rem; }
.chyba-pole::before { content: "! "; }

.souhlas {
  display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start;
  margin: 0 0 14px; padding: 14px; background: var(--karta);
  border: 2px solid var(--linka-jemna); border-radius: 6px; line-height: 1.55;
}
.souhlas + .souhlas { margin-top: 18px; }
.souhlas input { width: 28px; height: 28px; margin: 2px 0 0; accent-color: var(--akcent); }
.souhlas label { font-weight: 400; margin: 0; }
.souhlas.neplatny { border-color: var(--chyba); }
.souhlas .chyba-pole { grid-column: 1 / -1; margin: 0; }
.spravce { font-size: 0.9375rem; line-height: 1.5; color: var(--text-2); margin: 4px 0 18px; }

.robot-past { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.tlacitko {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 60px;
  padding: 12px 20px; border: 0; border-radius: 6px; background: var(--akcent); color: var(--na-akcentu);
  font-size: 1.5rem; font-weight: 700; letter-spacing: 0.03em; line-height: 1.1; text-align: center;
  text-decoration: none; cursor: pointer;
}
.tlacitko:hover { background: #2e2e2e; }
.tlacitko:active { transform: translateY(1px); }
.tlacitko[disabled] { background: #5c5c5c; cursor: progress; }

.stav { margin: 12px 0 0; min-height: 1.5em; font-weight: 700; }
.stav.chyba { color: var(--chyba); }
.upozorneni { border-left-color: var(--chyba); }
.turnstile-misto { margin: 0 0 14px; min-height: 0; }

/* výsledek */
.vysledek { border-left-color: var(--vyhra); }
.vysledek h2 { font-size: 2rem; }
/* kód úzkým písmem jako polep: vejde se i na 360 px (abeceda kódu nemá záměnné 0/O, 1/I/L) */
.kod {
  display: block; margin: 6px 0 12px; padding: 12px 8px; border: 2px dashed var(--akcent); border-radius: 6px;
  background: var(--karta); font-size: clamp(1.75rem, 9.2vw, 2.75rem); font-weight: 800; letter-spacing: 0.08em;
  line-height: 1.1; text-align: center; font-variant-numeric: tabular-nums; user-select: all; -webkit-user-select: all;
  white-space: nowrap; overflow-x: auto;
}

.terminy ul { margin: 0; padding-left: 1.2em; }
.terminy li { margin: 0 0 6px; }

footer {
  margin-top: 32px; padding: 16px 18px 10px; background: var(--karta-pruhledna); border-radius: 6px;
  border-top: 2px solid var(--akcent); font-size: 0.9375rem; line-height: 1.55; color: var(--text-2);
}
footer p { margin: 0 0 8px; }
footer [data-t="paticka.zp"] { font-size: 1rem; }   /* texty v3, V29: údaj o zdravotnickém prostředku ne menší než drobný text */

/* dokumenty (pravidla, osobní údaje): dlouhý text vždy na bílém listu, ne na textuře */
.dokument main {
  padding: 22px 18px 12px; background: var(--karta); border-radius: 6px; box-shadow: var(--stin);
  border: 1px solid rgba(18, 18, 18, 0.14);
}
.dokument h1 { font-size: clamp(2rem, 9vw, 2.75rem); line-height: 1.05; text-align: left; margin-bottom: 16px; }
.dokument h2 { margin-top: 28px; font-size: 1.5rem; }
.dokument ol, .dokument ul { padding-left: 1.4em; margin: 0 0 12px; }
.dokument li { margin: 0 0 6px; }
.tabulka { overflow-x: auto; margin: 0 0 16px; -webkit-overflow-scrolling: touch; }
.tabulka table { border-collapse: collapse; min-width: 480px; width: 100%; font-size: 1rem; background: var(--karta); }
.tabulka th, .tabulka td { border: 1px solid var(--linka-jemna); padding: 8px 10px; text-align: left; vertical-align: top; }
.zpet { display: inline-block; margin: 0 0 18px; }

@media (min-width: 600px) {
  .znacka { margin-bottom: 24px; }
  .formular, .karta { padding-left: 22px; padding-right: 22px; }
}
@media (prefers-reduced-motion: reduce) { .tlacitko:active { transform: none; } }
@media print { body::before { display: none; } }