/* ODYSSEIA s.r.o. — obchodní podmínky a ceník
   Sazba pro čtení delšího právního textu na obrazovce.
   Velikost písma i pozadí si čtenář přepíná sám, hodnoty drží data-atributy
   na kořenovém prvku, takže není potřeba žádný vložený styl. */

/* --------------------------------------------------------------- motivy */

:root {
  --bg: #fbfaf7;
  --bg-panel: #ffffff;
  --bg-jemne: #f3f0ea;
  --text: #1d1b17;
  --text-tlumene: #5d574d;
  --linka: #ddd7cb;
  --linka-silna: #c6bda9;
  --akcent: #1f4b63;
  --akcent-jemny: #e7eef2;
  /* Čísla odstavců a písmena výčtů nesou v právním textu význam, musí proto
     splnit poměr jasů 4,5:1 jako běžný text, ne 3:1 jako pouhá dekorace. */
  --znacka: #6b6252;
  --stin: 0 1px 2px rgba(29, 27, 23, .06), 0 8px 24px rgba(29, 27, 23, .05);
  --sirka-ramu: 1px;
}

:root[data-motiv="sepie"] {
  --bg: #f2e8d4;
  --bg-panel: #fbf5e7;
  --bg-jemne: #eadfc6;
  --text: #382c1c;
  --text-tlumene: #6b5b44;
  --linka: #dbcba9;
  --linka-silna: #c3ad83;
  --akcent: #7a4718;
  --akcent-jemny: #efe2c8;
  --znacka: #6f5c39;
  --stin: 0 1px 2px rgba(56, 44, 28, .07), 0 8px 24px rgba(56, 44, 28, .06);
}

:root[data-motiv="tmave"] {
  --bg: #15171b;
  --bg-panel: #1c2026;
  --bg-jemne: #232830;
  --text: #e3e7ec;
  --text-tlumene: #a4acb7;
  --linka: #333a44;
  --linka-silna: #48515e;
  --akcent: #8cc2e2;
  --akcent-jemny: #23303a;
  --znacka: #79828f;
  --stin: none;
}

:root[data-motiv="kontrast"] {
  --bg: #000000;
  --bg-panel: #000000;
  --bg-jemne: #101010;
  --text: #ffffff;
  --text-tlumene: #ffffff;
  --linka: #ffffff;
  --linka-silna: #ffffff;
  --akcent: #ffe600;
  --akcent-jemny: #1a1a00;
  --znacka: #ffe600;
  --stin: none;
  --sirka-ramu: 2px;
}

/* ------------------------------------------------------- velikost písma */

:root { font-size: 19px; }
:root[data-pismo="0"] { font-size: 17px; }
:root[data-pismo="1"] { font-size: 19px; }
:root[data-pismo="2"] { font-size: 22px; }
:root[data-pismo="3"] { font-size: 25px; }
:root[data-pismo="4"] { font-size: 29px; }
:root[data-pismo="5"] { font-size: 33px; }

/* ------------------------------------------------------------- základ */

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  font-size: 1rem;
  line-height: 1.72;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

.sans, .hlavicka, .paticka, .cenik, .obsah-panel, .ucinnost, .karta-vyzva {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

a { color: var(--akcent); }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--akcent);
  outline-offset: 2px;
  border-radius: 2px;
}

.preskocit {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--akcent);
  color: var(--bg-panel);
  padding: .5rem .9rem;
  z-index: 50;
}
.preskocit:focus { left: .5rem; top: .5rem; }

/* ----------------------------------------------------------- hlavička */

.hlavicka {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg-panel);
  border-bottom: var(--sirka-ramu) solid var(--linka);
}

.pruh {
  max-width: 66rem;
  margin: 0 auto;
  padding: .45rem 1.1rem;
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
}

.znacka {
  font-weight: 600;
  letter-spacing: .045em;
  text-decoration: none;
  color: var(--text);
  font-size: .92rem;
  white-space: nowrap;
}
.znacka-dodatek { color: var(--text-tlumene); font-weight: 400; }

.navigace { display: flex; gap: .15rem; margin-right: auto; flex-wrap: wrap; }

/* Na telefonu se pruh láme do tří řádků a ukrojí ze stránky příliš velký kus.
   Název a tlačítko Zobrazení proto drží první řádek, navigace dostane druhý. */
@media (max-width: 704px) {
  .pruh { padding: .35rem .8rem; gap: .3rem .5rem; }
  .znacka { order: 1; font-size: .86rem; }
  .zobrazeni { order: 2; margin-left: auto; }
  .navigace { order: 3; flex-basis: 100%; margin-right: 0; gap: .1rem; }
  .nav-odkaz { padding: .22rem .5rem; font-size: .78rem; }
  .zobrazeni-spinac { padding: .24rem .65rem; font-size: .78rem; }
}

.nav-odkaz {
  display: inline-block;
  padding: .3rem .6rem;
  font-size: .82rem;
  text-decoration: none;
  color: var(--text-tlumene);
  border-radius: 4px;
}
.nav-odkaz:hover { background: var(--bg-jemne); color: var(--text); }
.nav-odkaz.je-aktivni { color: var(--akcent); background: var(--akcent-jemny); font-weight: 600; }

/* ------------------------------------------------------ panel zobrazení */

.zobrazeni { position: relative; }

.zobrazeni-spinac {
  font: inherit;
  font-family: inherit;
  font-size: .82rem;
  padding: .32rem .8rem;
  background: var(--bg-panel);
  color: var(--text);
  border: var(--sirka-ramu) solid var(--linka-silna);
  border-radius: 5px;
  cursor: pointer;
}
.zobrazeni-spinac:hover { background: var(--bg-jemne); }
.zobrazeni-spinac[aria-expanded="true"] { background: var(--akcent-jemny); border-color: var(--akcent); }

.zobrazeni-panel {
  position: absolute;
  right: 0;
  top: calc(100% + .45rem);
  width: 17rem;
  max-width: calc(100vw - 1.6rem);
  background: var(--bg-panel);
  border: var(--sirka-ramu) solid var(--linka-silna);
  border-radius: 8px;
  box-shadow: var(--stin);
  padding: .85rem;
  display: grid;
  gap: .8rem;
  font-size: .82rem;
}
.zobrazeni-panel[hidden] { display: none; }

.zobrazeni-skupina { border: 0; margin: 0; padding: 0; }
.zobrazeni-skupina legend {
  padding: 0 0 .35rem;
  font-weight: 600;
  color: var(--text-tlumene);
  font-size: .78rem;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.tlacitka-pismo { display: flex; align-items: center; gap: .4rem; }
.tlacitka-pismo button {
  font: inherit;
  flex: 1;
  padding: .4rem 0;
  background: var(--bg-jemne);
  color: var(--text);
  border: var(--sirka-ramu) solid var(--linka-silna);
  border-radius: 5px;
  cursor: pointer;
  font-weight: 600;
}
.tlacitka-pismo button:hover:not(:disabled) { background: var(--akcent-jemny); border-color: var(--akcent); }
.tlacitka-pismo button:disabled { opacity: .4; cursor: default; }
.pismo-stav { min-width: 3.6rem; text-align: center; font-variant-numeric: tabular-nums; color: var(--text-tlumene); }

.tlacitka-motiv { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
.motiv-volba {
  font: inherit;
  padding: .42rem .3rem;
  border: var(--sirka-ramu) solid var(--linka-silna);
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
}
.motiv-volba[aria-pressed="true"] { outline: 2px solid var(--akcent); outline-offset: 1px; font-weight: 600; }
.motiv-svetle { background: #fbfaf7; color: #1d1b17; }
.motiv-sepie { background: #f2e8d4; color: #382c1c; }
.motiv-tmave { background: #15171b; color: #e3e7ec; }
.motiv-kontrast { background: #000; color: #ffe600; }

.zobrazeni-reset {
  font: inherit;
  padding: .4rem;
  background: transparent;
  color: var(--text-tlumene);
  border: var(--sirka-ramu) solid var(--linka);
  border-radius: 5px;
  cursor: pointer;
}
.zobrazeni-reset:hover { color: var(--text); background: var(--bg-jemne); }

/* ------------------------------------------------------------- rozvrh */

.rozvrh {
  max-width: 66rem;
  margin: 0 auto;
  padding: 2.2rem 1.1rem 4rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}

/* Body zlomu jsou v pixelech záměrně. Jednotka rem se v mediálním dotazu
   počítá z výchozí velikosti písma prohlížeče, ne z té, kterou si čtenář
   nastavil tlačítkem Zobrazení, takže by se rozvrh choval nečekaně. */
@media (min-width: 992px) {
  .rozvrh:not(.rozvrh-uzky):not(.rozvrh-siroky) {
    grid-template-columns: 15rem minmax(0, 1fr);
    align-items: start;
  }
}

.rozvrh-uzky, .rozvrh-siroky { max-width: 54rem; }
.rozvrh-siroky { max-width: 60rem; }

.dokument { max-width: 38rem; }
.rozvrh-siroky .dokument, .rozvrh-uzky .dokument { max-width: none; }

/* --------------------------------------------------------------- obsah */

.obsah-panel { font-size: .84rem; }

@media (min-width: 992px) {
  .obsah-panel { position: sticky; top: 4rem; max-height: calc(100vh - 6rem); overflow-y: auto; }
}

.obsah-detaily {
  background: var(--bg-panel);
  border: var(--sirka-ramu) solid var(--linka);
  border-radius: 8px;
  padding: .6rem .85rem;
}
.obsah-detaily summary {
  cursor: pointer;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .76rem;
  color: var(--text-tlumene);
  padding: .15rem 0;
}
.obsah-seznam { list-style: none; margin: .5rem 0 .2rem; padding: 0; counter-reset: none; }
.obsah-seznam li { margin: 0; }
.obsah-seznam a {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: .3rem;
  padding: .3rem .25rem;
  text-decoration: none;
  color: var(--text);
  border-radius: 4px;
  line-height: 1.4;
}
.obsah-seznam a:hover { background: var(--bg-jemne); }
.obsah-cislo { color: var(--znacka); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ dokument */

.dokument-hlava { margin-bottom: 2.4rem; }

h1 {
  font-size: 1.5rem;
  line-height: 1.32;
  margin: 0 0 .5rem;
  font-weight: 600;
  /* Titul dokumentu je ve zdroji psán verzálkami. Bez mírného rozšíření
     mezer se slabiky slévají a nadpis se čte hůř než tělo textu. */
  letter-spacing: .012em;
}

.ucinnost { margin: 0; color: var(--text-tlumene); font-size: .8rem; }

.clanek { margin: 0 0 2.6rem; scroll-margin-top: 4.5rem; }

.clanek h2 {
  margin: 0 0 1rem;
  padding-bottom: .5rem;
  border-bottom: var(--sirka-ramu) solid var(--linka);
  font-size: 1.12rem;
  line-height: 1.35;
  font-weight: 600;
  display: grid;
  gap: .1rem;
}

.clanek-cislo {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--znacka);
  font-weight: 600;
}

.odstavec {
  display: grid;
  grid-template-columns: 2.3rem minmax(0, 1fr);
  margin: 0 0 .95rem;
  scroll-margin-top: 4.5rem;
}

.odstavec-cislo {
  color: var(--znacka);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  font-size: .92rem;
  padding-top: .12rem;
}
a.odstavec-cislo:hover { color: var(--akcent); text-decoration: underline; }
.odstavec:target { background: var(--akcent-jemny); border-radius: 5px; }
.odstavec:target .odstavec-cislo { color: var(--akcent); font-weight: 700; }

/* Bez automatického dělení slov: text není do bloku, takže by dělení
   jen tříštilo slova bez užitku, a české vzory se navíc mezi prohlížeči liší. */
.odstavec-telo > p { margin: 0; }
.odstavec-telo > p + * { margin-top: .55rem; }

/* --------------------------------------------------------------- výčty */

.vycet {
  list-style: none;
  margin: .55rem 0 .2rem;
  padding: 0;
  display: grid;
  gap: .3rem;
}
.vycet li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: start;
}
.vycet .vycet-vnoreny { grid-column: 1 / -1; margin: .35rem 0 .45rem 2rem; }

.znacka-polozky {
  color: var(--znacka);
  font-variant-numeric: tabular-nums;
  font-size: .92rem;
  padding-top: .1rem;
}
.text-polozky { min-width: 0; }

/* --------------------------------------------------------------- ceník */

.obal-tabulky {
  overflow-x: auto;
  border: var(--sirka-ramu) solid var(--linka);
  border-radius: 8px;
  background: var(--bg-panel);
}

.cenik {
  width: 100%;
  border-collapse: collapse;
  font-size: .84rem;
  line-height: 1.5;
}

.cenik th, .cenik td {
  text-align: left;
  padding: .62rem .85rem;
  border-bottom: var(--sirka-ramu) solid var(--linka);
  vertical-align: top;
}

/* Hlavička tabulky záměrně není přilepená. Obal má vodorovný posuvník, takže
   se stává vlastním posuvným rámcem, a přilepený řádek by se v něm odsunul
   dolů a zakryl první položku. Že jsou ceny bez daně, proto říká i řádek
   pod nadpisem stránky. */
.cenik thead th {
  background: var(--bg-jemne);
  border-bottom: 2px solid var(--linka-silna);
  font-size: .74rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-tlumene);
  white-space: nowrap;
}

.cenik tbody th { font-weight: 400; }
.cenik tbody tr:last-child th, .cenik tbody tr:last-child td { border-bottom: 0; }
.cenik tbody tr:hover th, .cenik tbody tr:hover td { background: var(--bg-jemne); }

.cenik td:nth-child(2) { color: var(--text-tlumene); white-space: nowrap; }

.sl-cena {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: 600;
}
.cenik thead .sl-cena { font-weight: 600; }

@media (max-width: 704px) {
  .obal-tabulky { border: 0; background: none; overflow-x: visible; }
  .cenik, .cenik tbody, .cenik tr, .cenik th, .cenik td { display: block; width: auto; }
  .cenik thead { position: absolute; left: -9999px; }
  .cenik tbody tr {
    background: var(--bg-panel);
    border: var(--sirka-ramu) solid var(--linka);
    border-radius: 8px;
    padding: .7rem .85rem;
    margin-bottom: .6rem;
  }
  .cenik tbody th, .cenik tbody td { border: 0; padding: 0; }
  .cenik tbody th { font-weight: 600; margin-bottom: .35rem; }
  .cenik tbody td { display: flex; justify-content: space-between; gap: 1rem; font-size: .9em; }
  .cenik tbody td::before {
    content: attr(data-hlavicka);
    color: var(--text-tlumene);
    font-size: .92em;
  }
  .cenik tbody td.sl-cena { border-top: var(--sirka-ramu) dotted var(--linka); margin-top: .3rem; padding-top: .3rem; }
  .cenik tbody tr:hover th, .cenik tbody tr:hover td { background: none; }
}

/* Na telefonu ubírá odsazené číslo odstavce příliš z šířky řádku a titul
   psaný verzálkami se láme na sedm řádků. */
@media (max-width: 704px) {
  .rozvrh { padding: 1.5rem .9rem 3rem; }
  h1 { font-size: 1.24rem; line-height: 1.36; }
  .odstavec { grid-template-columns: 1.8rem minmax(0, 1fr); }
  .vycet li { grid-template-columns: 1.6rem minmax(0, 1fr); }
  .vycet .vycet-vnoreny { margin-left: 1.2rem; }
  .clanek { margin-bottom: 2.1rem; }
}

.zkratky, .poznamky { margin-top: 2.6rem; }
.zkratky .vycet li { grid-template-columns: 2rem minmax(0, 1fr); }
.poznamky .odstavec-cislo.bez-odkazu { color: var(--znacka); }

/* ----------------------------------------------------------------- úvod */

.perex { font-size: 1.06rem; color: var(--text-tlumene); margin: 0 0 2rem; max-width: 34rem; }

.rozcestnik { display: grid; gap: 1rem; margin-bottom: 2.8rem; }
@media (min-width: 704px) { .rozcestnik { grid-template-columns: 1fr 1fr; } }

.karta {
  display: block;
  background: var(--bg-panel);
  border: var(--sirka-ramu) solid var(--linka);
  border-radius: 10px;
  padding: 1.3rem 1.4rem 1.4rem;
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--stin);
}
.karta:hover { border-color: var(--akcent); }
.karta h2 { margin: 0 0 .5rem; font-size: 1.08rem; font-weight: 600; color: var(--akcent); }
.karta p { margin: 0 0 .9rem; font-size: .9rem; color: var(--text-tlumene); }
.karta-vyzva { font-size: .8rem; font-weight: 600; color: var(--akcent); }
.karta-vyzva::after { content: " →"; }

.poznamka-uvod { margin-bottom: 2rem; }
.poznamka-uvod h2 { font-size: 1rem; font-weight: 600; margin: 0 0 .5rem; }
/* Řádek přes celou šířku rozcestníku by se špatně sledoval, text se drží
   v šířce, jakou má i tělo obou dokumentů. */
.poznamka-uvod p { margin: 0 0 .7rem; font-size: .93rem; max-width: 38rem; }

/* -------------------------------------------------------------- patička */

.paticka {
  border-top: var(--sirka-ramu) solid var(--linka);
  padding: 1.4rem 1.1rem 2.4rem;
  color: var(--text-tlumene);
  font-size: .78rem;
}
.paticka p { max-width: 66rem; margin: 0 auto .25rem; }

/* ----------------------------------------------------------------- tisk */

@media print {
  :root { font-size: 11pt; }
  body { background: #fff; color: #000; }
  .hlavicka, .paticka, .obsah-panel, .preskocit { display: none !important; }
  .rozvrh { display: block; max-width: none; padding: 0; }
  .dokument { max-width: none; }
  .clanek { break-inside: auto; }
  .clanek h2 { break-after: avoid; }
  .odstavec, .vycet li { break-inside: avoid; }
  .obal-tabulky { border: 0; overflow: visible; }
  .cenik thead th { background: none; }
  .cenik th, .cenik td { border-bottom: .5pt solid #999; }
  a { color: #000; text-decoration: none; }
}