/* Prezentace jako webová stránka. Soubor vytvořil nástroj Vytvoř prezentaci.
   Snímky jsou pod sebou jako oddíly stránky. Skript prezentace.js přidá promítání po snímcích.
   Pravidla platí uvnitř prvku s třídou prezentace, proto je nástroj použije i pro náhled. */

.prezentace {
  --text: #1b2430;
  --tlumeny: #4b5966;
  --pozadi: #f4f6f8;
  --snimek: #ffffff;
  --cara: #d3dbe3;
  --akcent: #1e6650;
  --odkaz: #0b5cad;
  --kod: #eef2f5;
  --fokus: #1a5fd6;
  --pismo: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --pismo-kodu: Consolas, 'Cascadia Mono', 'Courier New', monospace;
  color: var(--text);
  background: var(--pozadi);
  font-family: var(--pismo);
  font-size: 1.0625rem;
  line-height: 1.6;
}

@media (prefers-color-scheme: dark) {
  .prezentace {
    --text: #e6ebf0;
    --tlumeny: #b4c0cb;
    --pozadi: #12171c;
    --snimek: #1b2229;
    --cara: #38444f;
    --akcent: #7fd1b0;
    --odkaz: #8cc4ff;
    --kod: #252e37;
    --fokus: #8cc4ff;
  }
}

body.prezentace { margin: 0; }

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

.prezentace :focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }

.prezentace [hidden] { display: none !important; }

.prezentace a { color: var(--odkaz); text-underline-offset: 3px; }

/* Odkaz pro přeskočení na snímky je vidět, jen když na něj přejde klávesnice. */
.prezentace .preskocit {
  position: absolute;
  left: 12px;
  top: -60px;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--snimek);
  color: var(--odkaz);
  z-index: 10;
}
.prezentace .preskocit:focus { top: 12px; }

.prezentace .hlavicka,
.prezentace main,
.prezentace .paticka {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 16px;
}

.prezentace .hlavicka { padding-top: 32px; padding-bottom: 8px; overflow-wrap: anywhere; }
.prezentace h1 { margin: 0 0 12px; font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.2; }

.prezentace .obsah { margin: 16px 0 0; }
.prezentace .obsah h2 { margin: 0 0 6px; font-size: 1.125rem; }
.prezentace .obsah ol { margin: 0; padding-left: 1.6em; }
.prezentace .obsah ol.sloupce { columns: 2 18rem; column-gap: 32px; }
.prezentace .obsah li { break-inside: avoid; margin-bottom: 2px; }

/* ---------- snímek */

.prezentace .snimek {
  margin: 24px 0;
  padding: 24px clamp(16px, 4vw, 40px) 28px;
  border: 1px solid var(--cara);
  border-radius: 14px;
  background: var(--snimek);
  overflow-wrap: anywhere;
}

.prezentace .snimek h2 {
  margin: 0 0 16px;
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  line-height: 1.25;
  color: var(--text);
}
.prezentace .snimek .cislo-snimku {
  margin: 0 0 4px;
  color: var(--tlumeny);
  font-size: 0.875rem;
  font-weight: 600;
}

.prezentace .snimek p { margin: 0 0 1em; }
.prezentace .snimek ul,
.prezentace .snimek ol { margin: 0 0 1em; padding-left: 1.5em; }
.prezentace .snimek li { margin-bottom: 4px; }
.prezentace .snimek > :last-child { margin-bottom: 0; }
.prezentace .snimek li > ul,
.prezentace .snimek li > ol { margin: 4px 0 0; }

.prezentace pre {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--kod);
  overflow-x: auto;
  font-family: var(--pismo-kodu);
  font-size: 0.95em;
  line-height: 1.5;
  white-space: pre;
  overflow-wrap: normal;
}

.prezentace .obrazek { margin: 0 0 14px; }
.prezentace .obrazek img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 6px;
}

.prezentace .tabulka { margin: 0 0 14px; overflow-x: auto; }
.prezentace table { border-collapse: collapse; min-width: 50%; }
.prezentace caption { text-align: left; font-weight: 600; padding: 0 0 6px; }
.prezentace th,
.prezentace td {
  padding: 6px 10px;
  border: 1px solid var(--cara);
  text-align: left;
  vertical-align: top;
}
.prezentace th { background: var(--kod); }

.prezentace .paticka {
  padding-top: 8px;
  padding-bottom: 40px;
  color: var(--tlumeny);
  font-size: 0.9375rem;
}

/* ---------- tlačítka promítání */

.prezentace .tlacitko {
  font: inherit;
  font-weight: 600;
  padding: 10px 18px;
  border: 2px solid var(--akcent);
  border-radius: 999px;
  background: var(--akcent);
  color: var(--snimek);
  cursor: pointer;
}
.prezentace .tlacitko.vedlejsi { background: transparent; color: var(--text); }
.prezentace .tlacitko:disabled { opacity: 0.45; cursor: not-allowed; }
.prezentace .spustit,
.prezentace .tisk { margin: 14px 8px 0 0; }

.prezentace .stazeni { margin: 0 0 12px; font-weight: 600; }

.prezentace .lista {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-top: 1px solid var(--cara);
  background: var(--snimek);
}
.prezentace .lista .stav { min-width: 9em; text-align: center; font-weight: 600; }

/* ---------- promítání po snímcích */

/* Při promítání zůstane z hlavičky jen nadpis prezentace pro čtečku obrazovky, obsah a patička se skryjí. */
body.prezentace.promitani .hlavicka > :not(h1),
body.prezentace.promitani .paticka,
body.prezentace.promitani .preskocit { display: none; }

body.prezentace.promitani .hlavicka {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

body.prezentace.promitani main { max-width: none; padding: 0; }

body.prezentace.promitani .snimek {
  min-height: calc(100vh - 72px);
  margin: 0 0 72px;
  border: 0;
  border-radius: 0;
  padding: clamp(20px, 4vw, 56px) clamp(16px, 6vw, 96px);
  font-size: clamp(1.1rem, 2.2vw, 1.9rem);
}
body.prezentace.promitani .snimek h2 { font-size: clamp(1.6rem, 3.6vw, 3rem); }
body.prezentace.promitani .snimek .cislo-snimku { display: none; }
body.prezentace.promitani .obrazek img { max-height: 62vh; width: auto; }

/* ---------- tisk a uložení do PDF
   První strana má nadpis a obsah, každý snímek začne na nové straně jako v prezentaci.
   Tiskne se vždy světlými barvami. Dlouhý řádek kódu se zalomí, aby se na papíře neuřízl. */

@page { margin: 15mm; }

@media print {
  .prezentace {
    --text: #1b2430;
    --tlumeny: #4b5966;
    --pozadi: #ffffff;
    --snimek: #ffffff;
    --cara: #b9c3cc;
    --akcent: #1e6650;
    --odkaz: #0b5cad;
    --kod: #eef2f5;
    font-size: 12pt;
  }
  .prezentace .spustit,
  .prezentace .tisk,
  .prezentace .stazeni,
  .prezentace .lista,
  .prezentace .preskocit { display: none; }
  .prezentace .hlavicka,
  .prezentace main,
  .prezentace .paticka { max-width: none; padding: 0; }
  .prezentace .snimek {
    break-before: page;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
  }
  .prezentace pre { white-space: pre-wrap; overflow: visible; overflow-wrap: anywhere; }
  .prezentace .tabulka { overflow: visible; }
  .prezentace .obrazek,
  .prezentace tr { break-inside: avoid; }
  .prezentace .obrazek img { max-height: 160mm; width: auto; }
  .prezentace .paticka { padding-top: 12pt; }
}