/* ==========================================================================
   Štýly dotazníka SÚC TTSK
   Značková farba: #26a2dc, tmavší odtieň na tlačidlá: #166f9c
   ========================================================================== */

:root {
  --znacka:        #26a2dc;  /* hlavná značková modrá */
  --znacka-tmava:  #166f9c;  /* tmavší odtieň — tlačidlá, hover */
  --znacka-svetla: #e8f5fc;  /* veľmi svetlé pozadie vybranej možnosti */
  --text:          #1f2933;
  --text-slaby:    #5c6b7a;
  --ramik:         #d6dde5;
  --pozadie:       #f4f7fa;
  --chyba:         #c0392b;
}

/* Základ ------------------------------------------------------------------ */

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

html, body {
  margin: 0;
  padding: 0;
  /* Nikde nesmie vzniknúť horizontálne skrolovanie */
  overflow-x: hidden;
  max-width: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  background: var(--pozadie);
  color: var(--text);
  font-size: 17px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

/* Hlavička s progress barom ----------------------------------------------- */

.hlavicka {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;
  border-bottom: 1px solid var(--ramik);
  padding: 12px 16px 10px;
}

.hlavicka[hidden] { display: none; }

.progress {
  height: 8px;
  background: #e4eaf0;
  border-radius: 99px;
  overflow: hidden;
}

.progress-vypln {
  height: 100%;
  width: 0;
  background: var(--znacka);
  border-radius: 99px;
  transition: width 220ms ease;
}

.pocitadlo {
  margin-top: 6px;
  font-size: 14px;
  color: var(--text-slaby);
  text-align: center;
}

/* Karta s otázkou --------------------------------------------------------- */

.obal {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

.karta {
  background: #fff;
  border: 1px solid var(--ramik);
  border-radius: 14px;
  padding: 28px 24px;
}

.blok-text {
  background: var(--znacka-svetla);
  border-left: 4px solid var(--znacka);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 22px;
  font-size: 15.5px;
  color: var(--text);
}

.otazka-text {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 22px;
}

.nadpis {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 16px;
}

.odsek {
  margin: 0 0 14px;
  color: var(--text);
}

.nepovinne {
  font-size: 14px;
  color: var(--text-slaby);
  margin: -14px 0 18px;
}

/* Možnosti (typ 'single') ------------------------------------------------- */

.moznosti {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.moznost {
  /* Veľká klikacia plocha — cieľová skupina vypĺňa prevažne na mobile */
  display: block;
  width: 100%;
  min-height: 54px;
  text-align: left;
  padding: 14px 16px;
  font-size: 17px;
  line-height: 1.35;
  font-family: inherit;
  color: var(--text);
  background: #fff;
  border: 2px solid var(--ramik);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}

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

.moznost[aria-pressed="true"] {
  border-color: var(--znacka);
  background: var(--znacka-svetla);
  font-weight: 600;
}

/* Škála (typ 'scale') ----------------------------------------------------- */

.skala {
  display: flex;
  gap: 6px;
  /* Nikdy sa nesmie zalomiť do dvoch riadkov */
  flex-wrap: nowrap;
  width: 100%;
}

.skala-bod {
  flex: 1 1 0;
  min-width: 0;          /* nutné, aby sa políčka mohli zmenšiť pod obsah */
  height: 56px;
  padding: 0;
  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  background: #fff;
  border: 2px solid var(--ramik);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}

.skala-bod:hover { border-color: var(--znacka); }

.skala-bod[aria-pressed="true"] {
  border-color: var(--znacka-tmava);
  background: var(--znacka);
  color: #fff;
}

/* Popisky krajných hodnôt — pod škálou */
.skala-popisky {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  font-size: 14px;
  color: var(--text-slaby);
  line-height: 1.35;
}

.skala-popisky span { max-width: 47%; }
.skala-popisky span:last-child { text-align: right; }

/* Textové pole (typ 'text') ----------------------------------------------- */

.textove-pole {
  width: 100%;
  min-height: 150px;
  padding: 14px;
  font-family: inherit;
  font-size: 17px;
  line-height: 1.45;
  color: var(--text);
  border: 2px solid var(--ramik);
  border-radius: 10px;
  resize: vertical;
}

.textove-pole:focus {
  outline: none;
  border-color: var(--znacka);
}

/* Tlačidlá ---------------------------------------------------------------- */

.tlacidla {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
}

.tlacidlo {
  min-height: 54px;
  padding: 14px 26px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  border-radius: 10px;
  border: 2px solid transparent;
  cursor: pointer;
}

.tlacidlo-hlavne {
  background: var(--znacka-tmava);
  color: #fff;
  flex: 1 1 auto;
}

.tlacidlo-hlavne:hover { background: #12587c; }
.tlacidlo-hlavne:disabled { opacity: .6; cursor: default; }

.tlacidlo-spat {
  background: #fff;
  color: var(--text-slaby);
  border-color: var(--ramik);
  flex: 0 0 auto;
}

.tlacidlo-spat:hover { border-color: var(--text-slaby); color: var(--text); }

/* Hláška pri nevyplnenej povinnej otázke ----------------------------------- */

.chyba {
  margin-top: 16px;
  padding: 12px 14px;
  background: #fdecea;
  border: 1px solid #f5c6c0;
  border-radius: 8px;
  color: var(--chyba);
  font-size: 15.5px;
  font-weight: 600;
}

.chyba[hidden] { display: none; }

/* Zaostrenie klávesnicou -------------------------------------------------- */

.moznost:focus-visible,
.skala-bod:focus-visible,
.tlacidlo:focus-visible {
  outline: 3px solid var(--znacka);
  outline-offset: 2px;
}

/* ==========================================================================
   MOBIL
   ========================================================================== */

@media (max-width: 560px) {
  .obal  { padding: 16px 12px 40px; }
  .karta { padding: 20px 16px; border-radius: 12px; }
  .otazka-text { font-size: 18.5px; }
  .nadpis { font-size: 22px; }
}

/* Kompresia 11-políčkovej škály (0–10), aby sa zmestila do 360 px.
   Pri 360 px displeji: 360 − 24 (obal) − 32 (karta) = 304 px na škálu.
   11 políčok + 10 medzier po 3 px = 30 px → ~24,9 px na políčko. */
@media (max-width: 480px) {
  .skala[data-pocet="11"] { gap: 3px; }

  .skala[data-pocet="11"] .skala-bod {
    font-size: 12.5px;
    height: 50px;
    border-width: 1px;
    border-radius: 6px;
  }

  .skala[data-pocet="11"] .skala-bod[aria-pressed="true"] {
    border-width: 2px;
  }
}

/* Menej agresívna kompresia 5-políčkovej škály */
@media (max-width: 380px) {
  .skala[data-pocet="5"] { gap: 5px; }
  .skala[data-pocet="5"] .skala-bod { font-size: 16px; height: 52px; }
}