/* TerraDrive — web
   Farby sú z appky: podklad mapy, oranžová prejdenej cesty, modrá polohy.
   Písmo Overpass vychádza z dopravného značenia (Highway Gothic). */

:root {
  --mapa: #E9EDF1;        /* podklad mapy */
  --blok: #DCE2E9;        /* zastavané bloky */
  --ulica: #FFFFFF;       /* ulice */
  --ember: #E5531A;       /* prejdená cesta */
  --ember-text: #B53F0E;  /* oranžová, ktorá na svetlom podklade prejde kontrastom */
  --poloha: #0A66C8;      /* modrý bod polohy */
  --atrament: #12161C;    /* text */
  --sivy: #4F5968;        /* vedľajší text */
  --linka: #CDD4DD;
  --noc: #0B0D11;         /* tmavý pás, rovnaký ako spúšťacia obrazovka appky */
  --noc-text: #E9EDF1;

  --display: "Overpass", system-ui, sans-serif;
  --mono: "Overpass Mono", ui-monospace, monospace;

  --sirka: 1120px;
  --okraj: clamp(16px, 4vw, 40px);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--mapa);
  color: var(--atrament);
  font-family: var(--display);
  font-size: 18px;
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: var(--ember-text); text-underline-offset: 3px; }
a:hover { color: var(--atrament); }

:focus-visible {
  outline: 3px solid var(--poloha);
  outline-offset: 3px;
  border-radius: 4px;
}

.obsah { max-width: var(--sirka); margin: 0 auto; padding: 0 var(--okraj); }

.stitok {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sivy);
}

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

.hlavicka {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--mapa) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linka);
}

.hlavicka .obsah {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 64px;
}

.znacka {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--atrament);
  text-decoration: none;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.01em;
}
.znacka img { width: 34px; height: 34px; border-radius: 9px; }

.menu { display: flex; gap: 22px; margin-left: auto; }
.menu a {
  color: var(--atrament);
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
}
.menu a:hover { color: var(--ember-text); }

@media (max-width: 640px) {
  .menu { gap: 16px; }
  .menu .menu-volitelne { display: none; }
}

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

.uvod { padding: clamp(32px, 6vw, 72px) 0 clamp(48px, 7vw, 96px); }

.uvod .obsah {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.uvod h1 {
  font-size: clamp(42px, 6.4vw, 78px);
  line-height: 0.98;
  font-weight: 900;
  letter-spacing: -0.035em;
  margin: 16px 0 24px;
}
.uvod h1 em {
  font-style: normal;
  color: var(--ember-text);
}

.uvod p.podnadpis {
  font-size: clamp(18px, 2vw, 21px);
  color: var(--sivy);
  max-width: 34ch;
  margin: 0 0 32px;
}

.akcie { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.tlacidlo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 17px;
  text-decoration: none;
  background: var(--atrament);
  color: #fff;
}
.tlacidlo[aria-disabled="true"] { cursor: default; }
.tlacidlo svg { width: 20px; height: 20px; }
.tlacidlo small {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
  line-height: 1.2;
}
.tlacidlo span { line-height: 1.15; }

.odkaz-dalej { font-weight: 700; color: var(--atrament); }

@media (max-width: 860px) {
  .uvod .obsah { grid-template-columns: 1fr; }
}

/* ---------- mapa v úvode (podpis stránky) ---------- */

.mapa {
  margin: 0;
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  background: var(--blok);
  box-shadow: 0 1px 0 var(--linka), 0 30px 60px -30px rgba(18, 22, 28, 0.35);
  aspect-ratio: 1;
}

.mapa svg { width: 100%; height: 100%; display: block; }

.mapa .ulica { stroke: var(--ulica); stroke-width: 15; stroke-linecap: square; fill: none; }
.mapa .hlavna { stroke: #F7F3E8; stroke-width: 24; fill: none; }
.mapa .rieka { stroke: #B9CFE3; stroke-width: 38; fill: none; stroke-linecap: round; }
.mapa .park { fill: #CFE3D2; }
.mapa .jazda {
  fill: none;
  stroke: var(--ember);
  stroke-width: 11;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Jedna jazda je polopriehľadná — kde sa jazdy prekryjú, cesta zosýtnie.
     Presne tak to kreslí appka. */
  stroke-opacity: 0.55;
}
.mapa .bod {
  fill: var(--poloha);
  stroke: #fff;
  stroke-width: 4;
  opacity: 0;
}

.mapa .cip {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 24px -12px rgba(18, 22, 28, 0.4);
}
.mapa .cip .hodnota {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.mapa .cip-pokrytie { left: 16px; bottom: 16px; }
.mapa .cip-jazdy { left: 16px; top: 16px; }

.mapa-znova {
  position: absolute;
  right: 16px;
  bottom: 16px;
  font: 600 13px var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 0;
  border-radius: 999px;
  padding: 9px 14px;
  background: var(--atrament);
  color: #fff;
  cursor: pointer;
}

/* ---------- sekcie ---------- */

.sekcia { padding: clamp(56px, 8vw, 104px) 0; }

.sekcia h2 {
  font-size: clamp(32px, 4.2vw, 50px);
  line-height: 1.02;
  font-weight: 900;
  letter-spacing: -0.03em;
  margin: 12px 0 20px;
  max-width: 18ch;
}

.sekcia .uvodny-text {
  color: var(--sivy);
  font-size: 19px;
  max-width: 52ch;
  margin: 0 0 40px;
}

/* Postup — skutočné poradie, preto čísla. */
.postup {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  counter-reset: krok;
  border-top: 2px solid var(--atrament);
}
.postup li {
  counter-increment: krok;
  padding: 24px 24px 8px 0;
}
.postup li + li { padding-left: 24px; border-left: 1px solid var(--linka); }
.postup li::before {
  content: counter(krok);
  display: block;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 14px;
  color: var(--ember-text);
  margin-bottom: 10px;
}
.postup h3 { font-size: 22px; font-weight: 800; margin: 0 0 8px; letter-spacing: -0.01em; }
.postup p { margin: 0; color: var(--sivy); font-size: 17px; }

@media (max-width: 760px) {
  .postup { grid-template-columns: 1fr; }
  .postup li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--linka); }
}

/* Tmavý pás so snímkou z appky */
.noc { background: var(--noc); color: var(--noc-text); }
.noc .stitok { color: #8A94A5; }
.noc .uvodny-text { color: #A7B0BD; }
.noc a { color: #FF8A57; }

.noc .obsah {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}

.telefon {
  justify-self: center;
  width: min(300px, 78vw);
  border-radius: 46px;
  padding: 10px;
  background: #1C2028;
  box-shadow: 0 0 0 1px #2B3038, 0 40px 80px -30px rgba(0, 0, 0, 0.8);
}
.telefon img { border-radius: 37px; width: 100%; height: auto; }

.popisky { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; }
.popisky li { padding-left: 22px; position: relative; }
.popisky li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.popisky .p-cesta::before { background: #FF7A3D; }
.popisky .p-uzemie::before { background: rgba(241, 118, 54, 0.35); }
.popisky .p-poloha::before { background: #2E9BFF; }
.popisky strong { display: block; font-size: 19px; font-weight: 800; color: #fff; }
.popisky span { color: #A7B0BD; font-size: 17px; }

@media (max-width: 860px) {
  .noc .obsah { grid-template-columns: 1fr; }
}

/* Funkcie */
.funkcie {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--linka);
  border: 1px solid var(--linka);
  border-radius: 22px;
  overflow: hidden;
}
.funkcia { background: var(--mapa); padding: 26px 24px 28px; }
.funkcia .stitok { color: var(--ember-text); }
.funkcia h3 { font-size: 21px; font-weight: 800; margin: 8px 0 8px; letter-spacing: -0.01em; line-height: 1.2; }
.funkcia p { margin: 0; color: var(--sivy); font-size: 16px; }

@media (max-width: 900px) { .funkcie { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 580px) { .funkcie { grid-template-columns: 1fr; } }

/* Čo opustí telefón */
.odchadza {
  border-top: 2px solid var(--atrament);
  margin: 0;
}
.odchadza > div {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 2fr);
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--linka);
}
.odchadza dt { font-weight: 800; font-size: 19px; }
.odchadza dt small { display: block; font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--sivy); letter-spacing: 0.04em; }
.odchadza dd { margin: 0; color: var(--sivy); font-size: 17px; }
.odchadza .nic dt { color: var(--ember-text); }

@media (max-width: 640px) {
  .odchadza > div { grid-template-columns: 1fr; gap: 6px; }
}

/* Otázky */
.otazky { max-width: 760px; }
.otazky details { border-bottom: 1px solid var(--linka); }
.otazky details:first-of-type { border-top: 2px solid var(--atrament); }
.otazky summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 40px 20px 0;
  font-weight: 800;
  font-size: 19px;
  position: relative;
}
.otazky summary::-webkit-details-marker { display: none; }
.otazky summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 16px;
  font: 600 24px var(--mono);
  color: var(--ember-text);
}
.otazky details[open] summary::after { content: "−"; }
.otazky details p { margin: 0 0 20px; color: var(--sivy); font-size: 17px; max-width: 62ch; }

/* ---------- päta ---------- */

.pata {
  border-top: 1px solid var(--linka);
  padding: 32px 0 48px;
  font-size: 15px;
  color: var(--sivy);
}
.pata .obsah { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; }
.pata nav { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-left: auto; }
.pata a { color: var(--atrament); font-weight: 600; }

/* ---------- právny text ---------- */

.pravny { padding: clamp(32px, 6vw, 64px) 0 80px; }
.pravny .obsah {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.pravny h1 {
  font-size: clamp(36px, 5vw, 58px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.03em;
  margin: 12px 0 16px;
}
.pravny .clanok { max-width: 70ch; }
.pravny .clanok h2 {
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.015em;
  margin: 48px 0 12px;
  scroll-margin-top: 84px;
}
.pravny .clanok h3 { font-size: 19px; font-weight: 800; margin: 28px 0 8px; }
.pravny .clanok p, .pravny .clanok li { font-size: 17px; }
.pravny .clanok ul { padding-left: 22px; }
.pravny .clanok li { margin-bottom: 6px; }
.pravny .zhrnutie {
  background: #fff;
  border-radius: 18px;
  padding: 22px 24px;
  border: 1px solid var(--linka);
}
.pravny .zhrnutie p:first-child { margin-top: 0; }
.pravny .zhrnutie p:last-child { margin-bottom: 0; }

.tabulka { width: 100%; border-collapse: collapse; font-size: 16px; margin: 16px 0; }
.tabulka th, .tabulka td { text-align: left; vertical-align: top; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--linka); }
.tabulka th { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sivy); border-bottom: 2px solid var(--atrament); }
.tabulka-obal { overflow-x: auto; }

.obsah-clanku { position: sticky; top: 88px; }
.obsah-clanku ol { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; font-size: 15px; }
.obsah-clanku a { color: var(--sivy); text-decoration: none; }
.obsah-clanku a:hover { color: var(--ember-text); }

@media (max-width: 860px) {
  .pravny .obsah { grid-template-columns: 1fr; }
  .obsah-clanku { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.sekcia[id] { scroll-margin-top: 48px; }