/* Magyarország-térkép. Minden választó .hu alá szűkítve, hogy a honlap
   saját stílusával ne ütközzön. */

.hu{
  --hu-hatter:#dfe8ee; --hu-fold:#faf6ee; --hu-szomszed:#e6e0d4; --hu-hatar:#c9bfae;
  --hu-orszaghatar:#9c8f78; --hu-viz:#a9cde3; --hu-folyo:#8dbad6;
  --hu-tinta:#1f2937; --hu-halk:#6b7280; --hu-vonal:rgba(120,140,170,.26);
  --hu-arany:#9a6a12; --hu-doboz:#fff;
  color:var(--hu-tinta); font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
}
.hu *{box-sizing:border-box}

/* ── szűrő ── */
.hu-szuro{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px; align-items:center}
.hu-szuro i{font-style:normal; font-size:12.5px; color:var(--hu-halk); margin-right:2px}
.hu-szuro button,.hu-honap button{
  font:inherit; font-size:13px; padding:7px 13px; border-radius:20px; cursor:pointer;
  border:1px solid var(--hu-vonal); background:#fff; color:inherit;
}
.hu-szuro button:hover,.hu-honap button:hover{border-color:var(--hu-arany); color:var(--hu-arany)}
.hu-szuro button[aria-pressed="true"],.hu-honap button[aria-pressed="true"]{
  background:var(--hu-arany); border-color:var(--hu-arany); color:#fff; font-weight:600;
}

/* ── a térkép ── */
.hu-terkep{
  position:relative; width:100%; height:clamp(460px, 72vh, 820px);
  border-radius:14px; overflow:hidden; background:var(--hu-hatter);
  border:1px solid var(--hu-vonal);
}
.hu-terkep svg{display:block; width:100%; height:100%; cursor:grab; touch-action:none}
.hu-terkep svg:active{cursor:grabbing}
.hu-szomszed path{fill:var(--hu-szomszed); stroke:var(--hu-hatar); stroke-width:.8; vector-effect:non-scaling-stroke}
.hu-orszag{fill:var(--hu-fold); stroke:var(--hu-orszaghatar); stroke-width:1.6; vector-effect:non-scaling-stroke}
.hu-folyo path{fill:none; stroke:var(--hu-folyo); vector-effect:non-scaling-stroke; stroke-linecap:round}
.hu-to path{fill:var(--hu-viz); stroke:var(--hu-folyo); stroke-width:.6; vector-effect:non-scaling-stroke}
.hu-szomszednev text{
  font-size:10.5px; letter-spacing:.18em; fill:#a79d8b; text-anchor:middle; pointer-events:none;
}

.hu-p{cursor:pointer; outline:none}
.hu-talal{fill:transparent}
.hu-kor{stroke:#fff; stroke-width:1.8; transition:r .15s}
.hu-p:hover .hu-kor,.hu-p:focus-visible .hu-kor{stroke:var(--hu-tinta)}
.hu-p.kivalasztva .hu-kor{stroke:var(--hu-tinta); stroke-width:2.4}
.hu-feliratok text{
  font-size:12.5px; font-weight:500; fill:var(--hu-tinta); cursor:pointer;
  paint-order:stroke; stroke:rgba(255,255,255,.92); stroke-width:3.2px; stroke-linejoin:round;
}
.hu-feliratok text.vastag{font-weight:650}
.hu-feliratok text.halvany{fill:#7b8494}

/* nagyító gombok */
.hu-gombok{position:absolute; left:14px; top:14px; display:flex; flex-direction:column; align-items:flex-start; gap:6px; z-index:3}
.hu-gombok button{
  min-width:38px; height:38px; padding:0 10px; border-radius:10px; cursor:pointer;
  border:1px solid var(--hu-vonal); background:#fff; color:var(--hu-tinta);
  font:inherit; font-size:18px; line-height:1;
}
.hu-gombok button[data-z="alap"]{font-size:12.5px}
.hu-gombok button:hover{border-color:var(--hu-arany); color:var(--hu-arany)}

/* jelmagyarázat */
.hu-jel{
  position:absolute; left:14px; bottom:14px; z-index:3; display:flex; flex-direction:column; gap:4px;
  background:rgba(255,255,255,.9); border:1px solid var(--hu-vonal); border-radius:10px;
  padding:8px 11px; font-size:12px; color:var(--hu-halk);
}
.hu-jel span{display:flex; align-items:center; gap:7px}
.hu-jel i{width:9px; height:9px; border-radius:50%; display:inline-block}

/* ── panel ── */
.hu-panel{
  position:absolute; right:12px; top:12px; bottom:12px; width:min(360px, 40%); z-index:4;
  background:var(--hu-doboz); border:1px solid var(--hu-vonal); border-radius:14px;
  box-shadow:0 12px 34px rgba(20,30,50,.16); overflow-y:auto; padding:14px 16px 16px;
  font-size:14px; line-height:1.55;
}
.hu-panel[hidden]{display:none}
.hu-kep{border-radius:10px; overflow:hidden; aspect-ratio:16/10; max-height:170px; margin:0 0 12px}
.hu-kep img{width:100%; height:100%; object-fit:cover; display:block}
.hu-kep.helyett{display:flex; align-items:center; justify-content:center}
.hu-kep.helyett span{font-family:Georgia,serif; font-size:18px; font-weight:600; color:rgba(40,50,70,.55)}
.hu-panel-fej{display:flex; justify-content:space-between; gap:10px; align-items:flex-start}
.hu-panel h2{margin:0; font-size:22px; line-height:1.2; font-family:Georgia,"Times New Roman",serif}
.hu-hol{margin:3px 0 12px; font-size:12.5px; color:var(--hu-halk)}
.hu-bezar{
  width:32px; height:32px; flex:0 0 32px; border-radius:9px; cursor:pointer; font-size:19px; line-height:1;
  border:1px solid var(--hu-vonal); background:#fff; color:var(--hu-halk);
}
.hu-verdikt{
  border-left:3px solid var(--sz); background:rgba(154,106,18,.07); border-radius:0 10px 10px 0;
  padding:9px 12px; margin:0 0 10px;
}
.hu-verdikt b{display:block; font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--hu-arany)}
.hu-verdikt .jobb{display:block; font-size:12.5px; color:var(--hu-halk); margin-top:2px}
.hu-sav{display:grid; grid-template-columns:repeat(12,1fr); gap:3px; margin:0 0 12px}
.hu-sav button{
  border:0; background:none; padding:0; cursor:pointer; display:flex; flex-direction:column;
  align-items:center; gap:3px; font:inherit;
}
.hu-sav i{display:block; width:100%; height:9px; border-radius:3px; background:var(--sz)}
.hu-sav span{font-size:10.5px; color:var(--hu-halk)}
.hu-sav button.most i{outline:2px solid var(--hu-tinta); outline-offset:1px}
.hu-sav button.most span{color:var(--hu-tinta); font-weight:700}
.hu-miert{margin:0 0 8px}
.hu-ut{margin:0 0 10px; font-size:13.5px; color:var(--hu-halk)}
.hu-ut b{color:var(--hu-tinta); font-weight:600}
.hu-alcim{margin:12px 0 4px; font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--hu-halk)}
.hu-lat,.hu-esem{margin:0 0 6px; padding-left:1.2em}
.hu-lat li,.hu-esem li{margin:0 0 2px}
.hu-gombsor{display:grid; gap:7px; margin:14px 0 8px}
.hu-gombsor a{
  display:flex; justify-content:space-between; gap:10px; padding:10px 13px; border-radius:10px;
  text-decoration:none; color:var(--hu-arany); font-weight:600; font-size:14px;
  border:1px solid rgba(154,106,18,.35); background:rgba(154,106,18,.05);
}
.hu-gombsor a span+span{font-weight:400; font-size:12.5px; opacity:.85}
.hu-gombsor a:hover{background:rgba(154,106,18,.12)}
.hu-ment{
  width:100%; display:flex; align-items:center; justify-content:center; gap:7px; cursor:pointer;
  padding:9px 12px; border-radius:10px; font:inherit; font-size:13.5px;
  background:#fff; color:var(--hu-halk); border:1px solid var(--hu-vonal);
}
.hu-ment:hover,.hu-ment.be{color:var(--hu-arany); border-color:rgba(154,106,18,.45)}
.hu-ment.be svg{fill:currentColor}
.hu-labj{margin:12px 0 0; font-size:11.5px; color:var(--hu-halk)}

/* ── hónapsáv ── */
.hu-honap{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:12px 0 0}
.hu-honap .cim{font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--hu-halk); margin-right:4px}
.hu-honap button{border-radius:9px; padding:7px 11px}
.hu-honap #hu-db{margin-left:auto; font-size:13px; color:var(--hu-arany)}

/* ── lista a térkép alatt (keresőknek és billentyűzetnek) ── */
.hu-lista{columns:4 180px; column-gap:22px; margin:10px 0 0; padding:0; list-style:none; font-size:14px}
.hu-lista li{margin:0 0 5px; break-inside:avoid}
.hu-lista a{color:inherit; text-decoration:none; border-bottom:1px solid var(--hu-vonal)}
.hu-lista a:hover{color:var(--hu-arany); border-color:var(--hu-arany)}
.hu-lista small{color:var(--hu-halk)}
.hu-alatt{margin:18px 0 0; font-size:14.5px; line-height:1.6}

/* ── telefon: a panel alulról jön fel ── */
@media (max-width:720px){
  .hu-terkep{height:clamp(420px, 74vh, 640px)}
  .hu-panel{left:8px; right:8px; top:auto; bottom:8px; width:auto; max-height:62%}
  .hu-jel{display:none}
  .hu-kep{max-height:110px; aspect-ratio:auto; height:110px}
  .hu-gombok button[data-z="alap"]{display:none}
  .hu-honap #hu-db{width:100%; margin:4px 0 0}
  .hu-szuro button,.hu-honap button{padding:6px 10px; font-size:12.5px}
}