/* ==========================================================================
   epozvanka.sk — podmienky a ochrana údajov

   Právny text sa nemá tváriť ako plagát. Značka tu ostáva v hlavičke a pätke,
   samotný text je tichý, úzky a dobre čitateľný — človek si ho má vedieť
   prejsť, nie ho preskočiť.

   Preto: jeden stĺpec do 68 znakov, veľké riadkovanie, žiadne tvrdé tiene.
   ========================================================================== */

body.pod {
  background: var(--cream);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.75;
}

.pod__top {
  padding: 14px var(--gut);
  background: var(--blue);
  border-bottom: var(--rule) solid var(--ink);
}
.pod__top .logo { font-family: var(--font-display); text-transform: uppercase; }

.pod__wrap {
  max-width: 68ch;
  margin-inline: auto;
  padding: clamp(34px, 6vw, 68px) clamp(20px, 5vw, 32px) 80px;
}

.pod__h1 {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 7vw, 3.2rem);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.pod__lead { margin: 0 0 8px; font-size: 1.05rem; color: #4a4a58; }
.pod__datum {
  margin: 0 0 36px;
  font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #6a6a76;
}
/* Predchádzajúce znenie. Pri zmene podmienok počas behu predaja je to jediné,
   podľa čoho zákazník zistí, ktoré znenie sa naňho vzťahuje. */
/* NEZMENŠOVAŤ. Rodič má 0,8 rem (12,8 px) a 0,86 em z toho je 11 px — pod
   spodnou hranicou čitateľnosti na mobile, ktorú stráži `test-mobil.cjs`.
   Odlišuje sa preto váhou a veľkosťou písmen, nie rozmerom. */
/* A NEZOSLABOVAŤ PRIEHĽADNOSŤOU. `opacity: .85` zrazila riadok na 3,59 : 1 —
   je to údaj, podľa ktorého zákazník zistí, ktoré znenie sa naňho vzťahuje,
   takže musí byť čitateľný. Odlíšenie nesie váha a veľkosť písmen. */
.pod__datumStare {
  display: inline-block; margin-top: 2px;
  font-size: inherit; font-weight: 400; text-transform: none; letter-spacing: 0;
}

/* ── obsah ──────────────────────────────────────────────────────────────
   Právny text bez rozcestníka nikto nečíta — človek hľadá jednu vec
   a nechce prechádzať osem oddielov. */

.pod__obsah {
  display: grid; gap: 2px;
  margin-bottom: clamp(36px, 6vw, 56px);
  padding: 18px 20px;
  background: #fff;
  border: 3px solid var(--ink);
}
.pod__obsah a {
  /* Odmerané na 390 px: 38 px na výšku, WCAG 2.2 žiada 44. Je to zoznam
     deviatich odkazov tesne pod sebou, takže vedľa netrafeného odkazu je
     vždy iný odkaz — to je ten prípad, kde malý terč nie je nepohodlie,
     ale zlé kliknutie. Rieši to min-height, nie odsadenie: to drží aj keď
     sa názov oddielu zalomí do dvoch riadkov. */
  display: flex; align-items: center; min-height: 44px;
  padding: 6px 0;
  color: var(--ink);
  font-size: 0.94rem; font-weight: 600;
  text-decoration: none;
}
.pod__obsah a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

/* ── oddiely ────────────────────────────────────────────────────────────── */

.pod__sekcia { margin-bottom: clamp(40px, 6vw, 62px); scroll-margin-top: 24px; }

.pod h2 {
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  text-transform: uppercase; letter-spacing: -0.01em;
}
.pod h3 {
  margin: 26px 0 8px;
  font-size: 0.98rem; font-weight: 800;
}
.pod p { margin: 0 0 1.05em; }
.pod ul { margin: 0 0 1.05em; padding-left: 22px; }
.pod li { margin-bottom: 7px; }
/* Dlhé odkazy sa musia vedieť zalomiť: „pozvanka@epozvanka.sk" má pri
   dvojnásobnom písme 403 px v okne širokom 390. */
.pod a { color: var(--blue); text-underline-offset: 3px; overflow-wrap: anywhere; }

/* Logo v hlavičke NIE je odkaz v texte.

   `.pod a` vyššie prefarbí každý odkaz na modrú a logo je odkaz — v modrej
   hlavičke tak slovo „pozvánka" zmizlo úplne, kontrast 1,0 : 1. Vidieť bolo
   len žlté koliesko „e" a žlté „.sk". Rovnaká pasca ako pri pätičke, preto
   rovnaké riešenie: druhá trieda, ktorá stránku prebije. */
.pod .logo { color: #fff; }

/* Veta, ktorú si človek musí všimnúť — nie výkrik, ale nedá sa prehliadnuť. */
.pod__doraz {
  padding: 14px 18px;
  background: #fff3c4;
  border-left: 6px solid var(--ink);
  font-weight: 600;
}
.pod__pozn { font-size: 0.9rem; color: #55555f; }

/* ── vzorový formulár na odstúpenie ─────────────────────────────────────
   Je to tlačivo: má vyzerať ako tlačivo, aby bolo jasné, že sa vypĺňa
   a odosiela, a aby sa dalo vytlačiť. Nie je to formulár na stránke —
   odstúpenie sa posiela e-mailom alebo poštou, takže tu stoja len riadky
   na dopísanie, nie políčka, ktoré by nikam neodoslali. */
.pod__formular {
  margin: 0 0 22px;
  padding: 20px 22px;
  background: #fff;
  border: 3px solid var(--ink);
}
.pod__formular > p { margin: 0 0 6px; }
.pod__formular > p + p { margin-top: 0; }
.pod__linka {
  margin: 0 0 18px !important;
  border-bottom: 2px solid rgba(11, 11, 20, 0.35);
}
@media print {
  .pod__formular { break-inside: avoid; }
}

/* ── údaje firmy ────────────────────────────────────────────────────────── */

.pod__firma {
  display: grid; gap: 0;
  margin: 0 0 20px;
  padding: 4px 0;
  background: #fff;
  border: 3px solid var(--ink);
}
@media (min-width: 520px) {
  .pod__firma { grid-template-columns: 10em 1fr; }
}
/* Prvky sa musia vedieť zmenšiť.

   `10em` rastie so zväčšeným písmom a predvolené `min-width: auto` nedovolí
   bunke byť užšou, než je najdlhšie nezalomiteľné slovo. Pri 200 % mala
   tabuľka údajov 485 px v okne širokom 390 a stránka sa dala posúvať
   do strán — pritom práve tu majú ľudia so slabým zrakom čítať, kto im
   predáva a komu píšu reklamáciu. */
.pod__firma > * { min-width: 0; overflow-wrap: anywhere; }
.pod__firma dt {
  padding: 9px 18px 2px;
  font-size: 0.8rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #6a6a76;
}
.pod__firma dd {
  margin: 0; padding: 0 18px 9px;
  font-weight: 600;
}
@media (min-width: 520px) {
  .pod__firma dt { padding: 10px 0 10px 18px; }
  .pod__firma dd { padding: 10px 18px 10px 0; }
}

/* Nedoplnené údaje musia byť vidieť na kilometer — právna stránka
   s textom „DOPLNIŤ" je horšia než žiadna. */
[data-doplnit] {
  background: var(--pink-plocha);
  color: #fff;
  padding: 2px 8px;
  font-weight: 800;
}

/* ── cenník ─────────────────────────────────────────────────────────────── */

.pod__cennik {
  width: 100%;
  margin: 0 0 20px;
  border-collapse: collapse;
  background: #fff;
  border: 3px solid var(--ink);
  font-size: 0.92rem;
}
.pod__cennik th, .pod__cennik td {
  padding: 11px 14px;
  border-bottom: 2px solid rgba(11, 11, 20, 0.12);
  text-align: left; vertical-align: top;
}
.pod__cennik thead th {
  background: var(--ink); color: #fff;
  font-family: var(--font-display); font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.pod__cennik tbody th { font-weight: 800; white-space: nowrap; }

@media (max-width: 560px) {
  /* Tri stĺpce sa na telefón nezmestia — z každého balíčka spravíme blok. */
  .pod__cennik, .pod__cennik tbody, .pod__cennik tr, .pod__cennik td, .pod__cennik th { display: block; }
  .pod__cennik thead { display: none; }
  .pod__cennik tr { border-bottom: 3px solid var(--ink); }
  .pod__cennik tr:last-child { border-bottom: 0; }
  .pod__cennik tbody th { background: var(--cream-2); border-bottom: 0; }
  .pod__cennik td { border-bottom: 0; padding-top: 0; }
}

.pod__adresa { line-height: 1.6; }

/* ── päta ───────────────────────────────────────────────────────────────── */

/* Pätička je spoločná pre celý web, štýly má v base.css (.pata). */