/* ==========================================================================
   Kolektív Lampáš – spoločný štýl verejnej časti (https://kolektivlampas.sk/)
   Projekt AI tímu. Jeden súbor, bez frameworkov, externých písiem a skriptov.

   - Systémové písmo, mobil najprv, text do 44 rem.
   - Svetlý aj tmavý režim podľa prefers-color-scheme (bez prepínača, bez JS).
   - Farby majú kontrast podľa WCAG 2.2 AA (text aspoň 4,5:1, okraje ovládacích
     prvkov a fokus aspoň 3:1); overené výpočtom 14. 10. 2026.
   - Vlastná identita „lampáš“: teplá jantárová, tmavohnedý text.

   Zoznam tried a príklady použitia: pozri _sablona.html.
   Trieda                      Účel
   .obal                       stredový stĺpec so šírkou textu ~44 rem
   .preskocit                  odkaz „Preskočiť na obsah“
   .hlavicka .znacka .hlavna   hlavička, značka a navigácia
   .uvod .nadpis-maly .lead    úvodná časť stránky
   .tlacidla .tlacidlo         skupina tlačidiel a tlačidlo (.tlacidlo-druhe = vedľajšie)
   .poznamka .upozornenie .tip rámčeky s poznámkou, upozornením a tipom
   .karty .karta               mriežka a „karta“ ponuky; .stitky .stitok .ceny
   .tabulka                    obal pre tabuľku (posuv do strán na mobile)
   .clenovia                   zoznam definícií (dl > div > dt + dd) zobrazený ako karty
   .kroky                      číslované kroky; .zdroje = zoznam zdrojov
   .meta .tlmeny .maly         pomocné texty; .cislo = číselný stĺpec tabuľky
   .bez-zalomenia .skryte      pomocné triedy (<time> sa nikdy nezalamuje)
   .paticka                    päta
   ========================================================================== */

/* 1. Premenné: farby a rozmery ------------------------------------------ */

:root {
  color-scheme: light dark;

  --pismo: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --pismo-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --sirka-textu: 44rem;
  --okraj-strany: 1rem;

  /* svetlý režim */
  --pozadie: #fffbf2;
  --povrch: #ffffff;
  --povrch-2: #fff3d9;               /* jemný jantárový podklad */
  --zaraza: rgba(245, 163, 10, .16);  /* žiara lampáša v hornej časti stránky */
  --zebra: rgba(245, 163, 10, .07);
  --hlava-tabulky: rgba(245, 163, 10, .18);
  --tien: rgba(60, 40, 10, .22);

  --text: #2a2013;
  --text-tlmeny: #5a4a35;
  --odkaz: #8a4500;
  --odkaz-hover: #6b3500;

  --okraj: #e6d6b6;                  /* dekoratívne čiary */
  --okraj-ovladanie: #8f7648;        /* okraje ovládacích prvkov (aspoň 3:1) */

  --jantar: #f5a30a;
  --jantar-hover: #ffb52e;
  --jantar-okraj: #a85f00;
  --na-jantari: #241808;

  --fokus: #0b57d0;

  --ok-bg: #e6f4ea;
  --ok-text: #14532d;
  --ok-okraj: #2f7d4f;
  --var-bg: #fdeceb;
  --var-text: #7a1010;
  --var-okraj: #b3261e;
  --coskoro-text: #7a3f00;
}

@media (prefers-color-scheme: dark) {
  :root {
    --pozadie: #17120b;
    --povrch: #211a10;
    --povrch-2: #2d2314;
    --zaraza: rgba(245, 163, 10, .13);
    --zebra: rgba(245, 163, 10, .06);
    --hlava-tabulky: rgba(245, 163, 10, .14);
    --tien: rgba(0, 0, 0, .55);

    --text: #f3e9d6;
    --text-tlmeny: #c8b89a;
    --odkaz: #ffc15c;
    --odkaz-hover: #ffd78f;

    --okraj: #3d3122;
    --okraj-ovladanie: #8c7650;

    --jantar-okraj: #ffc86b;

    --fokus: #8ab4ff;

    --ok-bg: #12301f;
    --ok-text: #b7e4c7;
    --ok-okraj: #4fa573;
    --var-bg: #3a1614;
    --var-text: #ffd2cf;
    --var-okraj: #ff8a80;
    --coskoro-text: #ffd08a;
  }
}

@media (prefers-contrast: more) {
  :root {
    --okraj: var(--okraj-ovladanie);
  }
}

/* 2. Základ -------------------------------------------------------------- */

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

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

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background-color: var(--pozadie);
  background-image: radial-gradient(ellipse 70% 100% at 50% 0%, var(--zaraza), transparent 75%);
  background-repeat: no-repeat;
  background-size: 100% 26rem;
  color: var(--text);
  font-family: var(--pismo);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-wrap: break-word;
}

main {
  flex: 1 0 auto;
  padding-block: 1.5rem 2.5rem;
}

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

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

@media (min-width: 40rem) {
  :root {
    --okraj-strany: 1.5rem;
  }
}

/* 3. Odkazy a fokus ------------------------------------------------------ */

a {
  color: var(--odkaz);
  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .18em;
}

a:hover {
  color: var(--odkaz-hover);
  text-decoration-thickness: .16em;
}

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

.preskocit {
  position: absolute;
  top: .5rem;
  left: .5rem;
  z-index: 10;
  padding: .6rem 1rem;
  background: var(--povrch);
  color: var(--text);
  border: 2px solid var(--okraj-ovladanie);
  border-radius: .5rem;
  font-weight: 700;
  transform: translateY(-300%);
}

.preskocit:focus {
  transform: none;
}

.skryte {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 4. Hlavička a navigácia ------------------------------------------------ */

.hlavicka {
  border-bottom: 1px solid var(--okraj);
}

.hlavicka-vnutro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  padding-block: .75rem;
}

.znacka {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  color: var(--text);
  text-decoration: none;
}

.znacka:hover {
  color: var(--text);
}

.znacka img {
  display: block;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
}

.znacka-text {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .15rem .55rem;
}

.znacka-text strong {
  font-size: 1.15rem;
  letter-spacing: .01em;
}

.znacka-stitok {
  padding: .05rem .4rem;
  border: 1px solid var(--jantar-okraj);
  border-radius: .3rem;
  color: var(--coskoro-text);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hlavna ul {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hlavna li,
.stitky li,
.tlacidla li {
  margin: 0;
}

.hlavna a {
  display: inline-block;
  padding: .5rem .75rem;
  border-radius: .45rem;
  color: var(--text);
  text-decoration: none;
}

.hlavna a:hover {
  background: var(--povrch-2);
  color: var(--text);
}

.hlavna a[aria-current="page"] {
  background: var(--povrch-2);
  box-shadow: inset 0 -3px 0 var(--jantar);
  font-weight: 700;
}

/* 5. Nadpisy a text ------------------------------------------------------ */

h1,
h2,
h3,
h4 {
  margin: 1.8em 0 .5em;
  line-height: 1.25;
  text-wrap: balance;
}

h1 {
  margin-top: 0;
  font-size: clamp(1.75rem, 1.35rem + 2vw, 2.5rem);
  letter-spacing: -.01em;
}

h2 {
  font-size: clamp(1.35rem, 1.15rem + 1vw, 1.7rem);
}

h3 {
  font-size: 1.2rem;
}

h4 {
  font-size: 1.05rem;
}

h2[id],
h3[id],
h4[id] {
  scroll-margin-top: 1rem;
}

p,
ul,
ol,
dl,
pre,
blockquote,
figure {
  margin: 0 0 1em;
}

ul,
ol {
  padding-left: 1.4rem;
}

li {
  margin-bottom: .35em;
}

li > ul,
li > ol {
  margin-top: .35em;
  margin-bottom: 0;
}

dt {
  font-weight: 700;
}

dd {
  margin: 0 0 .75em;
}

strong,
b,
th {
  font-weight: 700;
}

small,
.maly {
  font-size: .9rem;
}

hr {
  height: 0;
  margin: 2rem 0;
  border: 0;
  border-top: 1px solid var(--okraj);
}

blockquote {
  padding: .1rem 0 .1rem 1rem;
  border-left: .3rem solid var(--jantar);
  color: var(--text-tlmeny);
}

code,
kbd,
samp {
  font-family: var(--pismo-mono);
  font-size: .9em;
}

code {
  padding: .1em .35em;
  background: var(--povrch-2);
  border-radius: .3em;
  overflow-wrap: anywhere;
}

pre {
  overflow-x: auto;
  padding: .9rem 1rem;
  background: var(--povrch);
  border: 1px solid var(--okraj);
  border-radius: .6rem;
  line-height: 1.45;
}

pre code {
  padding: 0;
  background: none;
  overflow-wrap: normal;
}

mark {
  background: var(--povrch-2);
  color: inherit;
  box-shadow: 0 -.1em 0 var(--jantar) inset;
}

figcaption {
  color: var(--text-tlmeny);
  font-size: .9rem;
}

.lead {
  font-size: 1.2rem;
  line-height: 1.55;
}

.nadpis-maly {
  margin-bottom: .4rem;
  color: var(--coskoro-text);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.meta,
.tlmeny {
  color: var(--text-tlmeny);
}

.meta {
  font-size: .9rem;
}

.bez-zalomenia,
time {
  white-space: nowrap;
}

.uvod {
  padding-block: .5rem .5rem;
}

/* 6. Tlačidlá ------------------------------------------------------------ */

.tlacidla {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 1.25rem 0;
  padding: 0;
  list-style: none;
}

.tlacidlo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: .55rem 1.1rem;
  background: var(--jantar);
  border: 2px solid var(--jantar-okraj);
  border-radius: .6rem;
  color: var(--na-jantari);
  font: inherit;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.tlacidlo:hover {
  background: var(--jantar-hover);
  color: var(--na-jantari);
}

.tlacidlo-druhe {
  background: transparent;
  border-color: var(--okraj-ovladanie);
  color: var(--text);
}

.tlacidlo-druhe:hover {
  background: var(--povrch-2);
  color: var(--text);
}

@media (max-width: 30rem) {
  .tlacidla {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: no-preference) {
  a,
  .tlacidlo,
  .hlavna a {
    transition: background-color .15s ease, color .15s ease;
  }
}

/* 7. Poznámky a upozornenia ---------------------------------------------- */

.poznamka,
.upozornenie,
.tip {
  margin: 1.25rem 0;
  padding: .85rem 1rem;
  background: var(--povrch-2);
  border-left: .35rem solid var(--jantar);
  border-radius: 0 .6rem .6rem 0;
}

.upozornenie {
  background: var(--var-bg);
  border-left-color: var(--var-okraj);
}

.tip {
  background: var(--ok-bg);
  border-left-color: var(--ok-okraj);
}

.upozornenie strong {
  color: var(--var-text);
}

.tip strong {
  color: var(--ok-text);
}

.poznamka > :first-child,
.upozornenie > :first-child,
.tip > :first-child {
  margin-top: 0;
}

.poznamka > :last-child,
.upozornenie > :last-child,
.tip > :last-child {
  margin-bottom: 0;
}

/* 8. Karty ponúk, štítky, ceny -------------------------------------------- */

.karty {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
  gap: 1rem;
  margin: 1rem 0 2rem;
}

.karta {
  display: flex;
  flex-direction: column;
  padding: 1.1rem 1.25rem 1.25rem;
  background: var(--povrch);
  border: 1px solid var(--okraj);
  border-top: .3rem solid var(--jantar);
  border-radius: .75rem;
  box-shadow: 0 1px 3px var(--tien);
}

.karta > :first-child {
  margin-top: 0;
}

.karta h3,
.karta h2 {
  margin-top: .35rem;
}

.karta .tlacidla {
  margin-top: auto;
  margin-bottom: 0;
  padding-top: .75rem;
}

.stitky {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 .5rem;
  padding: 0;
  list-style: none;
}

.stitok {
  display: inline-block;
  padding: .1rem .6rem;
  background: var(--povrch);
  border: 1px solid var(--okraj-ovladanie);
  border-radius: 999px;
  color: var(--text-tlmeny);
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.5;
}

.stitok-ok {
  background: var(--ok-bg);
  border-color: var(--ok-okraj);
  color: var(--ok-text);
}

.stitok-coskoro {
  background: var(--povrch-2);
  border-color: var(--jantar-okraj);
  color: var(--coskoro-text);
}

.ceny {
  display: grid;
  gap: 0;
  margin: .5rem 0 1rem;
  padding: 0;
}

.ceny > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .15rem 1rem;
  padding: .45rem 0;
  border-bottom: 1px dashed var(--okraj-ovladanie);
}

.ceny dt {
  color: var(--text-tlmeny);
  font-weight: 400;
}

.ceny dd {
  margin: 0;
  font-weight: 700;
  text-align: right;
}

/* Členovia tímu: zoznam definícií zobrazený ako karty (meno + rola, popis pod nimi). */
.clenovia {
  display: grid;
  gap: .75rem;
  margin: 1rem 0 1.5rem;
  padding: 0;
}

.clenovia > div {
  padding: .8rem 1rem .9rem;
  background: var(--povrch);
  border: 1px solid var(--okraj);
  border-left: .3rem solid var(--jantar);
  border-radius: 0 .6rem .6rem 0;
}

.clenovia dt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .6rem;
  font-size: 1.1rem;
}

.clenovia dd {
  margin: .3rem 0 0;
}

/* 9. Tabuľky -------------------------------------------------------------- */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
  line-height: 1.45;
}

caption {
  padding: .75rem .75rem .5rem;
  font-weight: 700;
  text-align: left;
  caption-side: top;
}

th,
td {
  padding: .6rem .75rem;
  border-bottom: 1px solid var(--okraj);
  text-align: left;
  vertical-align: top;
}

thead th {
  background: var(--hlava-tabulky);
  border-bottom: 2px solid var(--okraj-ovladanie);
}

tbody tr:nth-child(even) {
  background: var(--zebra);
}

tbody th {
  font-weight: 600;
}

tfoot th,
tfoot td {
  border-top: 2px solid var(--okraj-ovladanie);
  font-weight: 700;
}

tbody tr:last-child > th,
tbody tr:last-child > td {
  border-bottom: 0;
}

th.cislo,
td.cislo {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Obal tabuľky: na úzkom displeji sa posúva do strán, na okrajoch je vidieť tieň. */
.tabulka {
  margin: 1.25rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background-color: var(--povrch);
  background-image:
    linear-gradient(to right, var(--povrch), var(--povrch)),
    linear-gradient(to left, var(--povrch), var(--povrch)),
    linear-gradient(to right, var(--tien), rgba(0, 0, 0, 0)),
    linear-gradient(to left, var(--tien), rgba(0, 0, 0, 0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 1.25rem 100%, 1.25rem 100%, .75rem 100%, .75rem 100%;
  background-attachment: local, local, scroll, scroll;
  border: 1px solid var(--okraj);
  border-radius: .6rem;
}

.tabulka table {
  min-width: 32rem;
  margin: 0;
}

.tabulka tbody tr:last-child > th,
.tabulka tbody tr:last-child > td {
  border-bottom: 0;
}

/* 10. Číslované kroky a zdroje ------------------------------------------- */

.kroky {
  margin: 1rem 0 1.5rem;
  padding: 0;
  list-style: none;
  counter-reset: krok;
}

.kroky > li {
  position: relative;
  margin-bottom: 1.1rem;
  padding-left: 3rem;
  counter-increment: krok;
}

.kroky > li::before {
  content: counter(krok);
  position: absolute;
  top: .05rem;
  left: 0;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  background: var(--jantar);
  border: 2px solid var(--jantar-okraj);
  border-radius: 50%;
  color: var(--na-jantari);
  font-weight: 700;
  line-height: 1;
}

.zdroje {
  padding-left: 1.4rem;
  font-size: .92rem;
}

.zdroje a {
  overflow-wrap: anywhere;
}

/* 11. Rozbaľovacie odpovede ---------------------------------------------- */

details {
  margin: .6rem 0;
  padding: .1rem 1rem;
  background: var(--povrch);
  border: 1px solid var(--okraj);
  border-radius: .6rem;
}

summary {
  padding: .7rem 0;
  font-weight: 700;
  cursor: pointer;
}

details[open] > summary {
  margin-bottom: .6rem;
  border-bottom: 1px solid var(--okraj);
}

/* 12. Päta ---------------------------------------------------------------- */

.paticka {
  margin-top: auto;
  padding-block: 1.5rem 2rem;
  background: var(--povrch);
  border-top: 1px solid var(--okraj);
  color: var(--text-tlmeny);
  font-size: .92rem;
}

.paticka p {
  margin: 0 0 .5em;
}

.paticka p:last-child {
  margin-bottom: 0;
}

/* 13. Zvýšený kontrast a vynútené farby, tlač ---------------------------- */

@media (forced-colors: active) {
  .tlacidlo,
  .karta,
  .stitok,
  .poznamka,
  .upozornenie,
  .tip {
    border: 2px solid CanvasText;
  }
}

@media print {
  :root {
    color-scheme: light;
    --pozadie: #fff;
    --povrch: #fff;
    --povrch-2: #f3f3f3;
    --zaraza: transparent;
    --zebra: #f7f7f7;
    --hlava-tabulky: #e8e8e8;
    --tien: rgba(0, 0, 0, .2);
    --text: #000;
    --text-tlmeny: #333;
    --odkaz: #000;
    --odkaz-hover: #000;
    --okraj: #999;
    --okraj-ovladanie: #555;
    --jantar: #f5a30a;
    --jantar-hover: #f5a30a;
    --jantar-okraj: #7a4a00;
    --na-jantari: #000;
    --fokus: #000;
    --ok-bg: #f3f3f3;
    --ok-text: #000;
    --ok-okraj: #555;
    --var-bg: #f3f3f3;
    --var-text: #000;
    --var-okraj: #555;
    --coskoro-text: #000;
  }

  body {
    background: #fff;
    font-size: 11pt;
  }

  .preskocit,
  .hlavna,
  .tlacidla {
    display: none;
  }

  main a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: .85em;
    overflow-wrap: anywhere;
  }

  .karta,
  .tabulka,
  .poznamka,
  .upozornenie,
  .tip,
  details,
  tr {
    break-inside: avoid;
  }

  .tabulka {
    overflow: visible;
  }

  .tabulka table {
    min-width: 0;
  }
}