/* ==========================================================================
   Horgászvizek.hu – stíluslap
   Színvilág: hidrológiai felmérés. Mélyvíz-navy, sekélyvíz-kék, jég-fehér.
   Betűk: IBM Plex Sans Condensed (címek) / IBM Plex Sans (szöveg) /
          IBM Plex Mono (adatok, víztérkódok)
   ========================================================================== */

:root {
  /* Színek – 6 megnevezett érték, minden más ezekből származik */
  --meder:    #08263C; /* mederfenék: legmélyebb navy, szöveg és sötét felületek */
  --iszap:    #43647E; /* halvány szöveg, másodlagos adat */
  --viz:      #0F62A0; /* elsődleges kék: linkek, gombok */
  --sekely:   #1C8FC9; /* sekélyvíz: hover, kiemelés */
  --jelzo:    #00B4D8; /* jelzőbója cián: fókusz, aktív állapot, akcentus */
  --jeg:      #E9F2F8; /* jég: oldalháttér */

  /* Származtatott */
  --lap:      #FFFFFF;
  --lap-alt:  #F5FAFD;
  --vonal:    #C7DEEE;
  --vonal-halk: #DCEAF4;
  --chip:     #DEEDF7;

  --ff-cim: "IBM Plex Sans Condensed", "Arial Narrow", -apple-system, "Segoe UI", sans-serif;
  --ff-szoveg: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ff-adat: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --sav: 1080px;   /* tartalomsáv */
  --olvas: 66ch;   /* olvasható szövegsáv */
}

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

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

body {
  margin: 0;
  background: var(--jeg);
  color: var(--meder);
  font-family: var(--ff-szoveg);
  font-size: 17px;
  line-height: 1.6;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
}

/* Háttér: nagyon halvány vízszintvonalak, mint egy szintvonalas térképen */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(8, 38, 60, 0.026) 0 1px,
    transparent 1px 118px
  );
}

.sav { width: 100%; max-width: var(--sav); margin: 0 auto; padding: 0 20px; }

a { color: var(--viz); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--sekely); }

:focus-visible {
  outline: 2px solid var(--jelzo);
  outline-offset: 2px;
  border-radius: 2px;
}

.ugras {
  position: absolute; left: -9999px;
  background: var(--meder); color: #fff; padding: 10px 16px; z-index: 99;
}
.ugras:focus { left: 8px; top: 8px; }

/* ---------- Demó szalag ---------------------------------------------------- */

.demosav {
  position: relative; z-index: 3;
  background: var(--meder);
  border-bottom: 1px solid rgba(0, 180, 216, 0.4);
  color: #BFE3F5;
  font-family: var(--ff-adat);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.demosav .sav { padding: 7px 20px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.demosav b { color: var(--jelzo); font-weight: 600; letter-spacing: 0.1em; }
.demosav span { text-transform: none; letter-spacing: 0; color: #8FB6CD; }

/* ---------- Fejléc --------------------------------------------------------- */

.fejlec {
  position: relative; z-index: 3;
  background: var(--meder);
  color: #fff;
}
.fejlec .sav {
  display: flex; align-items: center; gap: 20px;
  min-height: 62px; flex-wrap: wrap;
}
.jel { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; }
.jel svg { display: block; width: 30px; height: 30px; border-radius: 7px; }
.jel b {
  font-family: var(--ff-cim);
  font-size: 21px; font-weight: 600; letter-spacing: 0.005em;
}
.jel b i { font-style: normal; color: var(--jelzo); }

.fonav { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
.fonav a {
  color: #C8E2F0; text-decoration: none;
  font-family: var(--ff-cim);
  font-size: 15.5px; letter-spacing: 0.01em;
  padding: 6px 10px; border-radius: 4px;
}
.fonav a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.fonav a[aria-current] { color: var(--meder); background: var(--jelzo); }

/* vízszint: a fejléc alatti cián vonal */
.vizszint { height: 3px; background: linear-gradient(to right, var(--viz), var(--jelzo), var(--viz)); position: relative; z-index: 3; }

/* ---------- Törzs ---------------------------------------------------------- */

main { position: relative; z-index: 1; padding-bottom: 56px; }

h1, h2, h3 { font-family: var(--ff-cim); font-weight: 600; letter-spacing: -0.005em; line-height: 1.12; margin: 0; }
h1 { font-size: clamp(30px, 5.2vw, 46px); }
h2 { font-size: clamp(22px, 3vw, 27px); }
h3 { font-size: 19px; }

p { margin: 0 0 14px; max-width: var(--olvas); }
.halk { color: var(--iszap); }

/* Szakaszcím: mono kísérőszöveg + vonal */
.szakasz { margin-top: 46px; }
.szakasz > h2 { padding-bottom: 8px; border-bottom: 2px solid var(--meder); }
.cimke {
  font-family: var(--ff-adat);
  font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--viz); margin-bottom: 7px;
}

/* ---------- Nyitólap: vezérszakasz ---------------------------------------- */

.vezer { padding: 46px 0 8px; }
.vezer h1 { max-width: 22ch; }
.vezer .bevezeto { font-size: 19.5px; margin-top: 16px; color: #1C4964; max-width: 54ch; }

.szamsor {
  display: flex; gap: 26px; flex-wrap: wrap;
  margin: 22px 0 0; padding: 0; list-style: none;
  font-family: var(--ff-adat); font-size: 13px; color: var(--iszap);
}
.szamsor b { display: block; font-size: 25px; color: var(--meder); font-weight: 600; letter-spacing: -0.02em; }

/* Kereső */
.kereso { margin: 26px 0 0; display: flex; gap: 8px; max-width: 560px; flex-wrap: wrap; }
.kereso input {
  flex: 1 1 240px; min-width: 0;
  font-family: var(--ff-szoveg); font-size: 16.5px;
  padding: 13px 15px;
  background: var(--lap);
  color: var(--meder);
  border: 1.5px solid var(--vonal);
  border-bottom-width: 3px;
  border-radius: 4px;
}
.kereso input::placeholder { color: #8AA7BC; }
.kereso input:focus { border-color: var(--viz); outline-offset: 1px; }
.kereso button {
  font-family: var(--ff-cim); font-size: 16.5px; font-weight: 600; letter-spacing: 0.01em;
  padding: 13px 22px;
  background: var(--meder); color: #fff;
  border: none; border-radius: 4px; cursor: pointer;
}
.kereso button:hover { background: var(--viz); }

/* ---------- Aláírás-elem: mélységmérő sáv --------------------------------- */
/* Minden nyilvántartott vízterület egy lefelé mutató jel, magassága a
   kiterjedéssel arányos (logaritmikus). A sáv magából az adatállományból
   generálódik – nem dekoráció, hanem az adathalmaz metszete. */

.melyseg {
  margin: 34px 0 0;
  background: var(--lap);
  border: 1px solid var(--vonal);
  border-radius: 5px;
  padding: 14px 16px 10px;
}
.melyseg svg { display: block; width: 100%; height: auto; }
.melyseg .jelmagyarazat {
  max-width: none;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-family: var(--ff-adat); font-size: 10.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--iszap); margin-top: 8px;
}
.profil .profil-terulet { fill: var(--viz); fill-opacity: 0.13; }
.profil .profil-vonal {
  fill: none; stroke: var(--viz); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round;
}
.profil .racsvonal { stroke: var(--vonal); stroke-width: 1; stroke-dasharray: 2 4; }
.profil .racscimke {
  font-family: var(--ff-adat); font-size: 10.5px; fill: var(--iszap);
  letter-spacing: 0.06em;
}
.profil .panelcimke {
  font-family: var(--ff-adat); font-size: 11px; fill: var(--meder);
  letter-spacing: 0.14em; font-weight: 500;
}

/* ---------- Sorlista (vízterületek) --------------------------------------- */

.sorok { list-style: none; margin: 0; padding: 0; }
.sorok li { border-bottom: 1px solid var(--vonal-halk); }
.sorok li:first-child { border-top: 1px solid var(--vonal); }

.sor {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 18px;
  align-items: baseline;
  padding: 13px 12px 13px 14px;
  text-decoration: none; color: inherit;
  position: relative;
}
.sor::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  background: var(--jelzo); opacity: 0; transition: opacity 0.12s;
}
.sor:hover, .sor:focus-visible { background: var(--lap); }
.sor:hover::before, .sor:focus-visible::before { opacity: 1; }
.sor .nev {
  font-family: var(--ff-cim); font-size: 20px; font-weight: 600;
  color: var(--viz); letter-spacing: 0.002em;
}
.sor:hover .nev { color: var(--meder); text-decoration: underline; text-underline-offset: 3px; }
.sor .hol { grid-column: 1; font-size: 14px; color: var(--iszap); }
.sor .adat { grid-column: 2; grid-row: 1 / span 2; text-align: right; white-space: nowrap; }

/* ---------- Adatjel (mono chip) ------------------------------------------- */

.jelzes {
  display: inline-block;
  font-family: var(--ff-adat);
  font-size: 11.5px; letter-spacing: 0.09em; text-transform: uppercase;
  padding: 2px 7px;
  background: var(--chip); color: #0B4569;
  border: 1px solid var(--vonal);
  border-radius: 3px;
  white-space: nowrap;
}
.jelzes--folyo { background: #E4F4FA; color: #075E7C; }
.jelzes--kul { background: var(--meder); color: var(--jelzo); border-color: var(--meder); }
.jelzes--ures { background: transparent; color: var(--iszap); border-style: dashed; }
.meret {
  display: block; margin-top: 5px;
  font-family: var(--ff-adat); font-size: 13.5px; color: var(--meder);
  font-variant-numeric: tabular-nums;
}
.meret small { color: var(--iszap); font-size: 11.5px; }

/* ---------- Rácsok (vármegyék, települések) ------------------------------- */

.racs {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}
.racs a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  background: var(--lap);
  border: 1px solid var(--vonal);
  border-left: 3px solid var(--viz);
  border-radius: 4px;
  padding: 10px 12px;
  text-decoration: none;
  font-family: var(--ff-cim); font-size: 17px; font-weight: 500;
  color: var(--meder);
}
.racs a:hover { border-left-color: var(--jelzo); background: #F8FCFE; color: var(--viz); }
.racs .db {
  font-family: var(--ff-adat); font-size: 12px; color: var(--iszap);
  font-variant-numeric: tabular-nums;
}

/* ---------- Fogható / tilalom sáv ----------------------------------------- */

.fogas { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 6px; }
.fogas li {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: baseline;
  background: var(--lap);
  border: 1px solid var(--vonal-halk);
  border-radius: 4px;
  padding: 8px 12px;
}
.fogas .faj { font-family: var(--ff-cim); font-size: 17.5px; font-weight: 500; }
.fogas .info { font-family: var(--ff-adat); font-size: 12.5px; color: var(--iszap); font-variant-numeric: tabular-nums; }
.allapot {
  font-family: var(--ff-adat); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 3px; white-space: nowrap;
}
.allapot--fog { background: var(--jelzo); color: var(--meder); font-weight: 600; }
.allapot--til {
  background: repeating-linear-gradient(-45deg, #C9DAE5 0 4px, #B4CBDA 4px 8px);
  color: #2C4B62;
}

/* ---------- Adatlap (részletek) ------------------------------------------- */

.morzsa {
  font-family: var(--ff-adat); font-size: 12px; letter-spacing: 0.04em;
  color: var(--iszap); padding: 18px 0 0; margin: 0 0 16px;
}
.morzsa a { color: var(--viz); text-decoration: none; }
.morzsa a:hover { text-decoration: underline; }
.morzsa span { color: var(--vonal); padding: 0 4px; }

.lapfej { padding: 10px 0 4px; }
.lapfej h1 { max-width: 26ch; }
.lapfej .alcim {
  max-width: none;
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-top: 14px;
}

.adatok {
  margin: 26px 0 0;
  background: var(--lap);
  border: 1px solid var(--vonal);
  border-top: 3px solid var(--meder);
  border-radius: 4px;
  padding: 4px 16px;
}
.adatok dl { margin: 0; }
.adatok div {
  display: grid;
  grid-template-columns: 190px 1fr;
  align-items: baseline;
  gap: 4px 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--vonal-halk);
}
.adatok div:last-child { border-bottom: none; }
.adatok dt {
  font-family: var(--ff-adat); font-size: 11.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--iszap); padding-top: 3px;
}
.adatok dd { margin: 0; font-size: 16.5px; }
.adatok dd.mono { font-family: var(--ff-adat); font-variant-numeric: tabular-nums; }
.adatok dd .ures { color: var(--iszap); font-family: var(--ff-adat); font-size: 14px; }

.terkep {
  margin: 26px 0 0; border: 1px solid var(--vonal); border-radius: 4px; overflow: hidden;
  background: var(--lap);
}
.terkep iframe { display: block; width: 100%; height: 320px; border: 0; }
.terkep p { margin: 0; padding: 9px 12px; font-size: 13px; border-top: 1px solid var(--vonal-halk); }

/* ---------- Szöveges blokk ------------------------------------------------ */

.doboz {
  background: var(--lap);
  border: 1px solid var(--vonal);
  border-radius: 4px;
  padding: 18px 20px;
  margin-top: 26px;
}
.doboz > :last-child { margin-bottom: 0; }
.doboz h2 { font-size: 21px; margin-bottom: 10px; }

.figyelem {
  border-left: 4px solid var(--jelzo);
  background: var(--lap-alt);
}

.kod {
  font-family: var(--ff-adat);
  font-size: 0.92em;
  background: var(--chip);
  border: 1px solid var(--vonal);
  border-radius: 3px;
  padding: 1px 5px;
  white-space: nowrap;
}
p.kod { display: inline-block; padding: 8px 12px; white-space: normal; }

ul.pontok { padding-left: 20px; max-width: var(--olvas); }
ul.pontok li { margin-bottom: 6px; }

/* ---------- Keresőoldal --------------------------------------------------- */

#talalatok:empty::after {
  content: "Írj be legalább két karaktert.";
  color: var(--iszap); font-size: 15px;
}
.talalatszam {
  font-family: var(--ff-adat); font-size: 13px; letter-spacing: 0.02em;
  color: var(--iszap); margin: 22px 0 6px;
}

/* ---------- Lábléc -------------------------------------------------------- */

.lablec {
  position: relative; z-index: 2;
  background: var(--meder); color: #A9C8DC;
  font-size: 14.5px;
  padding: 34px 0 30px;
  border-top: 3px solid var(--jelzo);
}
.lablec a { color: #DCEBF5; }
.lablec a:hover { color: var(--jelzo); }
.lablec p { max-width: 70ch; }
.lablec .forras { font-family: var(--ff-adat); font-size: 12.5px; line-height: 1.7; color: #8FB6CD; }
.lablec .forras b { color: #DCEBF5; font-weight: 500; }
.lablec nav { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 14px; }
.lablec nav a { text-decoration: none; }
.lablec nav a:hover { text-decoration: underline; }
.lablec nav span { color: #4A6C85; padding: 0 6px; }

/* ---------- Mobil --------------------------------------------------------- */

@media (max-width: 620px) {
  body { font-size: 16px; }
  .demosav .hosszu { display: none; }
  .fejlec .sav { min-height: 56px; padding-top: 8px; padding-bottom: 8px; }
  .fonav { margin-left: 0; width: 100%; }
  .fonav a { padding: 5px 8px; font-size: 15px; }
  .vezer { padding-top: 30px; }
  .sor { grid-template-columns: 1fr; }
  .sor .adat { grid-column: 1; grid-row: auto; text-align: left; margin-top: 6px; }
  .meret { display: inline-block; margin: 0 0 0 8px; }
  .adatok div { grid-template-columns: 1fr; }
  .fogas li { grid-template-columns: 1fr auto; }
  .fogas .info { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  body::before, .demosav, .fonav, .kereso, .melyseg { display: none; }
  body { background: #fff; }
}