/* =========================================================
   WASGENSTEIG – vzhľad webu
   Písmo: EB Garamond, SIL Open Font License 1.1 (pozri fonts/OFL.txt)
   Farby: čierna na bielom podklade (dokument „Wasgensteig – identita“)
   Texty v reze Regular; nadpisy a zvýraznenie kurzívou.
   Postup: najprv mobil, na konci úpravy pre širšie obrazovky
   ========================================================= */


/* ---------- Písmo ---------- */
/* Regular a Italic sú základ. SemiBold slúži len na hrubé písmo v texte
   (**slovo**); prehliadač ho stiahne iba na stránke, kde sa naozaj použije. */

@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/eb-garamond-v33-latin_latin-ext-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/eb-garamond-v33-latin_latin-ext-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/eb-garamond-v33-latin_latin-ext-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


/* ---------- Základné hodnoty ---------- */

:root {
  --text: #000000;        /* čierna */
  --podklad: #ffffff;     /* biela */
  --sirka-textu: 33rem;   /* šírka stĺpca s textom */
  --okraj: 1.25rem;       /* bočný okraj na mobile */
  --hlavicka: 5rem;       /* výška záhlavia (nápis, menu, čiara) */

  /* Farby v textoch (palimpsesty) podľa dokumentu „Wasgensteig – identita“.
     Len funkčne: farebný text a svetlý podklad, nikdy veľké plochy.
     Kontrast na bielom: červená 6,5 : 1, zelená 5,8 : 1, modrá 6,7 : 1. */
  --cervena: #A73923;     /* rumelka */
  --zelena: #1E7359;      /* medenka */
  --modra: #3A5AA1;       /* lazurit */

  /* Svetlé podklady na zvýraznenie (ako zvýrazňovač) */
  --cervena-svetla: #F3E3E0;
  --zelena-svetla: #E0EBE8;
  --modra-svetla: #E3E8F2;
  --seda-svetla: #e2e2e2;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--podklad);
  color: var(--text);
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-size: 1.25rem;     /* 20 px */
  line-height: 1.55;
  font-kerning: normal;
  text-rendering: optimizeLegibility;

  /* Stránka je vždy aspoň taká vysoká ako okno,
     aby pätička pri krátkom obsahu stála na spodku. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 4px;
}

/* Odkaz „Preskočiť na obsah“ – objaví sa len pri ovládaní klávesnicou */
.preskocit {
  position: absolute;
  left: -100vw;
  top: 0;
}

.preskocit:focus {
  left: var(--okraj);
  top: 0.75rem;
  padding: 0.25rem 0.5rem;
  background: var(--podklad);
}


/* ---------- Rozloženie ---------- */

.hlavicka,
main,
.paticka {
  width: 100%;
  max-width: calc(var(--sirka-textu) + 2 * var(--okraj));
  margin-inline: auto;
  padding-inline: var(--okraj);
}

.menu ul,
.paticka ul,
.vyber-jazyka {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}


/* ---------- Hlavička (záhlavie ako v knihe) ---------- */

/* Nápis WASGENSTEIG vľavo, menu a výber jazyka vpravo, pod nimi tenká čiara.
   Záhlavie je na každej stránke rovnaké; obsah začína pod čiarou. */
.hlavicka {
  min-height: var(--hlavicka);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;   /* riadok s čiarou stojí na spodku záhlavia */
}

.hlavicka-riadok {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--text);
}

/* Nápis WASGENSTEIG – malý, na okraji (dokument „identita“) */
.logo {
  display: block;
  width: 9.5rem;
  margin: 0 auto 0 0;   /* odsunie menu a výber jazyka doprava */
  line-height: 0;
}

.logo img {
  display: block;
  width: 100%;
}

/* Hlavné menu */
.menu ul {
  gap: 0.25em 1.25em;
}

.menu a {
  text-decoration: none;
}

/* Podčiarknutie len pri prejdení myšou (nie ako označenie aktuálnej stránky) */
.menu a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

/* Výber jazyka: vidno len aktuálny jazyk (SK ▾),
   po kliknutí sa pod ním rozbalí zoznam jazykov.
   Menším písmom ako druh textu a pätička; bez prestrkania –
   prestrkanie patrí len k nápisu značky (dokument „identita“). */
.jazyky {
  position: relative;
  font-size: 0.8em;
}

.jazyky summary {
  display: flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.4em 0 0.4em 0.4em;
  list-style: none;
  cursor: pointer;
}

.jazyky summary::-webkit-details-marker {
  display: none;
}

.jazyky-sipka {
  width: 0.7em;
  height: 0.7em;
  transition: transform 0.15s;
}

.jazyky details[open] .jazyky-sipka {
  transform: rotate(180deg);
}

.jazyky ul {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 10;
  margin: 0.25rem 0 0;
  padding: 0.6em 1em;
  list-style: none;
  background: var(--podklad);
  border: 1px solid var(--text);
  white-space: nowrap;
}

.jazyky li + li {
  margin-top: 0.3em;
}

.jazyky a {
  text-decoration: none;
}

.jazyky a:hover,
.jazyky [aria-current] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}


/* ---------- Hlavná časť stránky ---------- */

main {
  flex: 1 0 auto;         /* obsah zaberie voľné miesto, pätička ide dole */
  padding-top: 3rem;
  padding-bottom: 5rem;
}

/* Nadpisy kurzívou v reze Regular (dokument „identita“) */
h1,
h2,
h3 {
  font-weight: 400;
  font-style: italic;
  line-height: 1.25;
}

h1 {
  font-size: 1.25em;
  margin: 0 0 1.5rem;
}

h2 {
  font-size: 1.1em;
  margin: 2.5rem 0 1rem;
}

p {
  margin: 0 0 1em;
}

/* Bežné zvýraznenie je kurzíva (*slovo*). Hrubé písmo (**slovo**)
   je autorský prostriedok v texte, nie bežné zvýraznenie. */
strong,
b {
  font-weight: 600;
}

/* ---------- Značky v textoch (nastroje/znacky.js) ---------- */

/* Farba písma: [červená: …] [modrá: …] [zelená: …] */
.farba-cervena { color: var(--cervena); }
.farba-modra   { color: var(--modra); }
.farba-zelena  { color: var(--zelena); }

/* Podčiarknuté: [podčiarknuté: …] */
.podciarknute {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

/* Prečiarknuté: [prečiarknuté: …], ~~…~~
   Čiara ide stredom malých písmen – v polohe, ktorú pre prečiarknutie
   určil autor písma EB Garamond (stred 0,215 nad základnou líniou,
   hrúbka 0,05 výšky písma), rovnako ako v príspevkoch (projekt Grafika).
   Prehliadač by ju inak kreslil vyššie, takmer na horný okraj malých písmen.
   Výška čiary sa meria od horného okraja riadku písma. Ten prehliadače
   počítajú rôzne, preto sú tu dve hodnoty (pozri nižšie).
   Farbu čiary preberá z textu; pri [prečiarknuté červenou: …] je červená. */
.preciarknute,
s,
del {
  --farba-ciary: currentColor;
  --vyska-ciary: 0.767em;   /* Android, Chrome, Firefox */
  text-decoration: none;
  background: linear-gradient(var(--farba-ciary), var(--farba-ciary))
              no-repeat 0 var(--vyska-ciary) / 100% 0.05em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Zariadenia Apple (Safari na Macu, všetky prehliadače na iPhone a iPade)
   merajú horný okraj písma o kúsok vyššie – čiara musí ísť nižšie. */
@supports (font: -apple-system-body) {
  .preciarknute,
  s,
  del {
    --vyska-ciary: 0.8em;
  }
}

/* Zvýraznené ako zvýrazňovačom: [zvýraznené: …] */
.zvyraznene {
  background-color: var(--seda-svetla);
  padding: 0 0.1em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Zakrúžkované: [zakrúžkované: …] */
.zakruzkovane {
  border: 1.5px solid currentColor;
  border-radius: 50%;
  padding: 0 0.35em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Farba čiary, krúžku a zvýraznenia: [podčiarknuté červenou: …] atď. */
.podciarknute.znacka-cervena  { text-decoration-color: var(--cervena); }
.preciarknute.znacka-cervena  { --farba-ciary: var(--cervena); }
.zakruzkovane.znacka-cervena { border-color: var(--cervena); }
.zvyraznene.znacka-cervena   { background-color: var(--cervena-svetla); }

.podciarknute.znacka-modra    { text-decoration-color: var(--modra); }
.preciarknute.znacka-modra    { --farba-ciary: var(--modra); }
.zakruzkovane.znacka-modra   { border-color: var(--modra); }
.zvyraznene.znacka-modra     { background-color: var(--modra-svetla); }

.podciarknute.znacka-zelena   { text-decoration-color: var(--zelena); }
.preciarknute.znacka-zelena   { --farba-ciary: var(--zelena); }
.zakruzkovane.znacka-zelena  { border-color: var(--zelena); }
.zvyraznene.znacka-zelena    { background-color: var(--zelena-svetla); }

/* Symboly: [háčik] [krížik] [políčko] [políčko s háčikom] */
.symbol {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  vertical-align: -0.05em;
  overflow: visible;
}


/* ---------- Text (báseň, aforizmus, epigram, miniatúra, palimpsest, úvaha) ---------- */

/* Nad názvom je menším písmom druh textu (báseň, epigram …).
   Názov má rovnakú veľkosť ako text, ako v príspevkoch podľa dokumentu „identita“.
   Básne aj prózy sú zarovnané doľava, na rovnakú os ako nápis a úvod. */
.text-hlavicka {
  margin-bottom: 1.5em;
}

/* Druh textu stojí hneď pod čiarou záhlavia, potom je medzera
   a až po nej názov a text. */
.text-hlavicka .druh {
  margin: 0 0 2.5rem;
  font-size: 0.8em;
}

.text-hlavicka h1:first-child {
  margin-top: 2.5rem;     /* text bez druhu: názov nestojí nalepený na čiare */
}

.text h1 {
  font-size: 1em;
  margin: 0;
}

/* Próza (odsek v jednom riadku v súbore: úvaha, miniatúra, aforizmus)
   je zarovnaná do bloku. Slová sa automaticky nedelia – prehliadače
   delia slovenské slová často chybne (napr. „pret-várky“). Ak treba
   dlhé slovo rozdeliť, dá sa to v texte ručne znakom ­
   (napr. pre­tvár­ky) – prehliadač ho rozdelí len tam a len vtedy,
   keď sa nezmestí do riadku.
   Verše (odsek s viacerými riadkami) sú vždy zarovnané doľava –
   v básni, epigrame, palimpseste aj vo veršovanom aforizme. */
.text-telo p:not(.strofa) {
  text-align: justify;
  text-wrap: pretty;      /* vyhnúť sa jednému slovu na poslednom riadku */
}

/* Strofa; prázdny riadok v súbore = medzera medzi strofami */
.strofa {
  margin: 0 0 1.4em;
}

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

/* Každý verš je samostatný riadok. Ak sa na úzkej obrazovke
   nezmestí, pokračovanie začne na začiatku nového riadku (bez odsadenia). */
.vers {
  display: block;
}

/* Listovanie pod textom: ← 27 →
   Šípky vedú na predchádzajúci a nasledujúci text, číslo do obsahu.
   Stojí vždy dole na strane, ako číslo strany v knihe –
   pri krátkom aj dlhom texte na rovnakom mieste nad pätičkou. */
main:has(.listovanie) {
  display: flex;
  flex-direction: column;
  padding-top: 1rem;
  padding-bottom: 2.5rem;
}

.listovanie {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-top: auto;
  padding-top: 4rem;
  font-size: 0.8em;       /* rovnako malé ako druh textu a pätička */
}

.listovanie a {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem;
  margin: -0.6rem;        /* väčšia plocha na ťuknutie, šípka ostane na okraji */
  text-decoration: none;
}

.listovanie-spat {
  justify-self: start;
}

.listovanie-dalej {
  justify-self: end;
}

.listovanie-cislo:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.sipka {
  width: 2em;
  height: 0.75em;
  overflow: visible;
}


/* ---------- Úvodná stránka ---------- */

.uvod > :last-child {
  margin-bottom: 0;
}

/* Úvod ako samostatná strana (site.json: „uvodCelaStrana“: true):
   úvod a krátka čiara vyplnia presne prvú obrazovku. Úvod stojí
   v jej strede (opticky trochu vyššie), čiara pri spodnom okraji.
   Obsah začína až pod ňou – po posunutí nadol, ako ďalšia strana. */
main:has(.uvodna-strana) {
  padding-top: 0;
}

.uvodna-strana {
  min-height: calc(100vh - var(--hlavicka));
  min-height: calc(100svh - var(--hlavicka));
  display: flex;
  flex-direction: column;
}

.uvodna-strana .uvod {
  margin-block: auto;
  padding-block: 2rem 4rem;
}

.uvodna-strana .predel {
  margin: 0 auto 1.75rem;
}

.uvodna-strana + .vynatok {
  padding-top: 3rem;
}

/* Krátka čiara medzi úvodom a obsahom */
.predel {
  width: 2.5rem;
  margin: 2.5rem auto;
  border: 0;
  border-top: 1px solid var(--text);
}

.vynatok h2 {
  margin-top: 0;
}

.cely-obsah {
  margin: 1.5rem 0 0;
}


/* ---------- Právne texty (Datenschutz) ---------- */

/* Menšie písmo, delenie dlhých nemeckých slov na mobile */
.pravne {
  font-size: 0.9em;
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}

.pravne h1 {
  font-size: 1.4em;
}

.pravne h2 {
  font-size: 1.15em;
}

.pravne h3 {
  font-size: 1em;
  margin: 1.5rem 0 0.5rem;
}

.pravne ul {
  padding-left: 1.2em;
  margin: 0 0 1em;
}

.pravne li {
  margin-bottom: 0.4em;
}

/* Poznámka nad nemeckým textom na slovenskej a anglickej stránke */
.poznamka {
  font-style: italic;
  margin-bottom: 2.5rem;
}

/* Povinný odkaz na generátor na konci */
.seal {
  margin-top: 3rem;
  font-size: 0.85em;
}


/* ---------- Impressum ---------- */

/* Riadok „Quelle“ pod Impressom: menší, dlhá adresa sa zalomí aj na mobile */
.zdroj {
  margin-top: 3rem;
  font-size: 0.8em;
  overflow-wrap: anywhere;
}


/* ---------- Obsah (zoznam textov ako v knihe) ---------- */

/* Názov ........ číslo */
.obsah {
  list-style: none;
  margin: 0;
  padding: 0;
}

.obsah li {
  margin: 0 0 0.4em;
}

.obsah a {
  display: flex;
  align-items: flex-end;
  align-items: last baseline;   /* bodky a číslo pri poslednom riadku názvu */
  gap: 0.35em;
  text-decoration: none;
}

.obsah a:hover .obsah-nazov {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

/* Bodky medzi názvom a číslom */
.obsah-bodky {
  flex: 1 1 1.5em;
  min-width: 1.5em;
  height: 0.16em;
  background-image: radial-gradient(circle, currentColor 0.045em, transparent 0.06em);
  background-size: 0.4em 0.16em;
  background-repeat: repeat-x;
  background-position: left bottom;
}

.obsah-cislo {
  flex: none;
}

/* „…“ na úvodnej stránke: pred výňatkom sú ďalšie texty */
.obsah-vynechane {
  margin-bottom: 0.4em;
}

.zoznam-prazdny {
  font-style: italic;
}


/* ---------- Pätička ---------- */

/* Zrkadlí záhlavie: tenká čiara, pod ňou O mne vľavo,
   Impressum a ochrana údajov vpravo. Medzi čiarou záhlavia
   a čiarou pätičky je „strana“; nad a pod nimi to, čo patrí webu. */
.paticka {
  padding-bottom: 2rem;
  font-size: 0.8em;
}

.paticka ul {
  justify-content: flex-end;
  gap: 0.25em 1.5em;
  padding-top: 0.9rem;
  border-top: 1px solid var(--text);
}

.paticka li:first-child {
  margin-right: auto;
}

.paticka a {
  text-decoration: none;
}

.paticka a:hover,
.paticka a[aria-current] {
  text-decoration: underline;
}


/* ---------- Vstupná stránka wasgensteig.com (výber jazyka) ---------- */

.vstup main {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 0;
}

.vstup main {
  padding-top: 0;
}

.vstup .logo {
  width: 13.5rem;
  margin: 0;
}

.vyber-jazyka {
  justify-content: center;
  gap: 0.5em 1.5em;
  margin-top: 2rem;
  font-style: italic;
}

.vyber-jazyka a {
  text-decoration: none;
}

.vyber-jazyka a:hover {
  text-decoration: underline;
}


/* ---------- Širšie obrazovky (od 768 px) ---------- */

@media (min-width: 48em) {
  :root {
    --okraj: 2rem;
  }

  body {
    font-size: 1.375rem;  /* 22 px */
  }

  :root {
    --hlavicka: 6rem;
  }

  .logo {
    width: 11rem;
  }

  main {
    padding-top: 4rem;
  }

  main:has(.listovanie) {
    padding-top: 1.25rem;
  }

  .text-hlavicka .druh {
    margin-bottom: 3rem;
  }
}


/* ---------- Veľké obrazovky (od 1200 px) ---------- */

/* Celá stránka o štvrtinu väčšia – písmo, stĺpec, nápis aj medzery.
   Tvar ostáva rovnaký, len lepšie vyplní veľkú obrazovku
   (zodpovedá zväčšeniu prehliadača na 125 %). */
@media (min-width: 75em) {
  html {
    font-size: 125%;
  }
}