/* ═══════════════════════════════════════════════════════════════════════════
   utvonalterv.eu — dizájnrendszer
   Tokenek → alaprétegek → komponensek → oldalspecifikus → nyomtatás
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokenek ─────────────────────────────────────────────────────────── */
:root{
  color-scheme: light dark;

  /* felületek és szöveg */
  --bg:#f6f7f9;
  --surface:#ffffff;
  --surface-2:#f1f3f6;
  --surface-3:#e7eaef;
  --border:#dde1e8;
  --border-strong:#b6bec9;
  --text:#111820;
  --text-2:#465264;
  --text-3:#5a6472;

  /* márka */
  --brand:#12304f;
  --brand-2:#1c4a76;
  --accent:#0e6ec4;
  --accent-hover:#0b5aa2;
  --accent-soft:#e9f2fb;
  --accent-line:#b8d7f2;
  --ok:#0f7a45;
  --ok-soft:#e6f4ec;
  --warn:#8a5300;
  --warn-soft:#fdf2e2;

  /* tipográfia */
  --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-num:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fs-xs:.75rem; --fs-sm:.8125rem; --fs-base:.9375rem; --fs-md:1rem;
  --fs-lg:1.125rem; --fs-xl:1.375rem; --fs-2xl:1.75rem; --fs-3xl:2.125rem;
  --lh-tight:1.22; --lh:1.55;

  /* térköz-skála */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem;
  --s5:1.5rem; --s6:2rem; --s7:3rem; --s8:4rem;

  /* forma */
  --r-sm:6px; --r:10px; --r-lg:14px; --r-pill:999px;
  --shadow-1:0 1px 2px rgba(17,24,32,.05);
  --shadow-2:0 1px 3px rgba(17,24,32,.07), 0 6px 16px -6px rgba(17,24,32,.12);
  --ring:0 0 0 3px var(--accent-line);
  --maxw:1200px;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0d1218; --surface:#141b23; --surface-2:#1a222c; --surface-3:#222c38;
    --border:#28323e; --border-strong:#3a4756;
    --text:#e9eef4; --text-2:#a8b4c3; --text-3:#8593a4;
    --brand:#0e1b28; --brand-2:#16293c;
    --accent:#5aa9f0; --accent-hover:#7cbcf5; --accent-soft:#14263a; --accent-line:#26445f;
    --ok:#4fc78a; --ok-soft:#12271d; --warn:#e0a458; --warn-soft:#2a2115;
    --shadow-1:0 1px 2px rgba(0,0,0,.35);
    --shadow-2:0 1px 3px rgba(0,0,0,.4), 0 8px 20px -8px rgba(0,0,0,.55);
  }
}

/* ── 2. Alapréteg ───────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } *{ transition:none !important; animation:none !important } }

body{
  margin:0; background:var(--bg); color:var(--text);
  font:var(--fs-base)/var(--lh) var(--font);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ max-width:100%; height:auto; vertical-align:middle }
a{ color:var(--accent); text-decoration:none; text-underline-offset:2px }
a:hover{ text-decoration:underline }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px }
::selection{ background:var(--accent-soft); color:var(--text) }

h1,h2,h3,h4{ margin:0; line-height:var(--lh-tight); letter-spacing:-.015em; font-weight:650 }
h1{ font-size:clamp(1.4rem, 1.1rem + 1.4vw, var(--fs-3xl)); overflow-wrap:anywhere }
h2{ font-size:var(--fs-xl) }
h3{ font-size:var(--fs-lg) }
p{ margin:0 0 var(--s3) }
ul,ol{ margin:0; padding:0 }

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--s4) }
.muted{ color:var(--text-3) }
.small{ font-size:var(--fs-sm) }
.xs{ font-size:var(--fs-xs) }
.num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1 }
.stack{ min-width:0 }
.stack > * + *{ margin-top:var(--s5) }
.stack > *{ min-width:0; max-width:100% }
.skip{ position:absolute; left:-9999px; top:0; background:var(--surface); padding:var(--s3) var(--s4);
       border-radius:var(--r-sm); z-index:100 }
.skip:focus{ left:var(--s4); top:var(--s2) }

/* ── 3. Fejléc és navigáció ─────────────────────────────────────────────── */
.site-header{
  background:var(--brand); color:#fff; position:sticky; top:0; z-index:50;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.site-header .wrap{ display:flex; align-items:center; gap:var(--s4); min-height:56px }
.brand{ display:inline-flex; align-items:center; gap:var(--s2); color:#fff; font-weight:700;
        font-size:var(--fs-md); letter-spacing:-.02em; white-space:nowrap }
.brand:hover{ text-decoration:none; opacity:.9 }
.brand-mark{ width:22px; height:22px; flex:0 0 auto }

.nav{ margin-left:auto }
.nav ul{ list-style:none; display:flex; gap:var(--s1); align-items:center; flex-wrap:wrap }
.nav a{ color:#c9dcef; font-size:var(--fs-sm); font-weight:500; padding:var(--s2) var(--s3);
        border-radius:var(--r-sm); display:block; white-space:nowrap }
.nav a:hover,.nav a[aria-current]{ background:rgba(255,255,255,.11); color:#fff; text-decoration:none }

.nav-toggle{ display:none }
@media (max-width: 900px){
  .site-header .wrap{ flex-wrap:wrap; padding-block:var(--s2) }
  .nav-toggle{ display:inline-flex; margin-left:auto; align-items:center; gap:var(--s2);
    background:rgba(255,255,255,.12); color:#fff; border:0; border-radius:var(--r-sm);
    padding:var(--s2) var(--s3); font:600 var(--fs-sm) var(--font); cursor:pointer; min-height:40px }
  .nav{ flex-basis:100%; margin-left:0; display:none }
  .nav[data-open="1"]{ display:block; padding-bottom:var(--s2) }
  .nav ul{ flex-direction:column; align-items:stretch; gap:2px }
  .nav a{ padding:var(--s3); font-size:var(--fs-base); min-height:44px; display:flex; align-items:center }
}

/* ── 4. Fő tartalom, morzsamenü ─────────────────────────────────────────── */
main{ display:block; padding-block:var(--s5) var(--s7) }
.crumbs{ font-size:var(--fs-sm); color:var(--text-3); display:flex; flex-wrap:wrap;
         gap:var(--s1) var(--s2); align-items:center; margin-bottom:var(--s3) }
.crumbs a{ color:var(--text-2) }
.crumbs [aria-current]{ color:var(--text) }
.crumbs .sep{ opacity:.5 }

.page-head{ margin-bottom:var(--s5) }
.page-head h1{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) }
.lede{ font-size:var(--fs-md); color:var(--text-2); margin-top:var(--s3); max-width:70ch }

/* ── 5. Kártya, panel ───────────────────────────────────────────────────── */
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  box-shadow:var(--shadow-1); padding:var(--s4) var(--s5); min-width:0;
}
.card > h2, .card > h3{ margin-bottom:var(--s3) }
.card-head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3);
            flex-wrap:wrap; margin-bottom:var(--s3) }
.card-head h2{ margin:0 }
.card-tight{ padding:var(--s3) var(--s4) }

/* ── 6. Statisztika-csempék ─────────────────────────────────────────────── */
.stats{ display:grid; gap:var(--s3); grid-template-columns:repeat(auto-fit,minmax(148px,1fr)) }
.stat{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
       padding:var(--s3) var(--s4); display:flex; flex-direction:column; gap:2px; min-width:0 }
.stat dt{ font-size:var(--fs-xs); color:var(--text-3); font-weight:600;
          text-transform:uppercase; letter-spacing:.05em }
.stat dd{ margin:0; font-size:var(--fs-xl); font-weight:650; font-variant-numeric:tabular-nums;
          overflow-wrap:anywhere }
.stat--hero{ background:var(--accent-soft); border-color:var(--accent-line) }
.stat--hero dd{ color:var(--accent); font-size:var(--fs-2xl) }
@media (prefers-color-scheme: dark){ .stat--hero dd{ color:var(--accent-hover) } }

/* ── 7. Gombok és űrlapok ───────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  background:var(--accent); color:#fff; border:1px solid transparent; cursor:pointer;
  padding:var(--s3) var(--s5); border-radius:var(--r-sm); min-height:44px;
  font:600 var(--fs-base)/1 var(--font); text-align:center;
  transition:background .15s ease;
}
.btn:hover{ background:var(--accent-hover); color:#fff; text-decoration:none }
.btn--ghost{ background:var(--surface); color:var(--text); border-color:var(--border-strong) }
.btn--ghost:hover{ background:var(--surface-2); color:var(--text) }
.btn--sm{ min-height:36px; padding:var(--s2) var(--s3); font-size:var(--fs-sm) }
.btn-row{ display:flex; flex-wrap:wrap; gap:var(--s2) }
.copy-status{ align-self:center; min-height:1.25em; color:var(--text-3); font-size:var(--fs-sm) }

label{ font-size:var(--fs-sm); font-weight:600; color:var(--text-2); display:block; margin-bottom:var(--s1) }
input[type=text],input[type=search],select,textarea{
  width:100%; padding:var(--s3); min-height:44px; font:var(--fs-base) var(--font);
  color:var(--text); background:var(--surface); border:1px solid var(--border-strong);
  border-radius:var(--r-sm);
}
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--accent); box-shadow:var(--ring) }

/* ── 8. Táblázat ────────────────────────────────────────────────────────── */
.tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; min-width:0 }
table{ width:100%; border-collapse:collapse; font-size:var(--fs-base) }
th,td{ padding:var(--s3); text-align:left; border-bottom:1px solid var(--border); vertical-align:middle }
td a, .card p a, main .stack p a{ display:inline-block; min-height:24px; line-height:24px }
thead th{ font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.05em;
          color:var(--text-3); font-weight:650; white-space:nowrap;
          border-bottom:1px solid var(--border-strong) }
td.num,th.num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap }
tbody tr:hover{ background:var(--surface-2) }
tbody tr:last-child td{ border-bottom:0 }

/* ── 9. Linklisták ──────────────────────────────────────────────────────── */
.linklist{ list-style:none; display:grid; gap:var(--s2);
           grid-template-columns:repeat(auto-fill,minmax(230px,1fr)) }
.linklist li{ min-width:0 }
.linklist a{
  display:flex; justify-content:space-between; align-items:center; gap:var(--s2);
  padding:var(--s2) var(--s3); border-radius:var(--r-sm); background:var(--surface-2);
  color:var(--text); border:1px solid transparent; min-height:44px; flex-wrap:wrap;
}
.linklist a:hover{ background:var(--accent-soft); border-color:var(--accent-line); text-decoration:none }
.linklist a > span:first-child{ font-weight:550; overflow-wrap:anywhere; min-width:0 }
.linklist .meta{ font-size:var(--fs-xs); color:var(--text-3); white-space:nowrap;
                 font-variant-numeric:tabular-nums }

/* ── 10. Címkék, jelvények ──────────────────────────────────────────────── */
.badge{ display:inline-flex; align-items:center; gap:var(--s1); font-size:var(--fs-xs);
        font-weight:650; padding:3px var(--s2); border-radius:var(--r-pill);
        background:var(--surface-3); color:var(--text-2) }
.badge--accent{ background:var(--accent-soft); color:var(--accent) }
.badge--ok{ background:var(--ok-soft); color:var(--ok) }
.badge--warn{ background:var(--warn-soft); color:var(--warn) }
.flag{ border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.12); flex:0 0 auto }

/* ── 11. Útvonallépések ─────────────────────────────────────────────────── */
.steps{ list-style:none; counter-reset:step }
.steps li{
  counter-increment:step; display:grid; gap:var(--s1) var(--s3);
  grid-template-columns:auto 1fr auto; align-items:start;
  padding:var(--s3) 0; border-bottom:1px solid var(--border);
}
.steps li:last-child{ border-bottom:0 }
.steps li::before{
  content:counter(step); grid-row:1/3; width:26px; height:26px; border-radius:50%;
  background:var(--surface-3); color:var(--text-3);
  font:650 var(--fs-xs)/26px var(--font-num); text-align:center;
}
.steps .txt{ overflow-wrap:anywhere; min-width:0 }
.steps .len{ font-size:var(--fs-sm); color:var(--text-3); white-space:nowrap;
             font-variant-numeric:tabular-nums }

/* ── 12. Lokátortérkép (saját adatból, nulla külső kérés) ───────────────── */
.locator{ position:relative; border:1px solid var(--border); border-radius:var(--r);
          overflow:hidden; background:var(--surface-2) }
.locator img{ display:block; width:100%; filter:saturate(0) }
@media (prefers-color-scheme: dark){ .locator img{ filter:saturate(0) invert(.88) hue-rotate(180deg) opacity(.75) } }
.locator .pin{
  position:absolute; width:16px; height:16px; margin:-8px 0 0 -8px;
  border-radius:50%; background:var(--accent); border:3px solid #fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.3);
}
.locator .pin::after{
  content:""; position:absolute; inset:-9px; border-radius:50%;
  border:2px solid var(--accent); opacity:.45;
}
.locator .cap{ position:absolute; left:0; right:0; bottom:0; padding:var(--s2) var(--s3);
               font-size:var(--fs-xs); color:var(--text-2); background:rgba(255,255,255,.85);
               backdrop-filter:blur(3px) }
@media (prefers-color-scheme: dark){ .locator .cap{ background:rgba(20,27,35,.85) } }

/* interaktív térkép — kattintásra töltő fasád, hogy ne rontsa az LCP-t */
.mapbox{ position:relative; border:1px solid var(--border); border-radius:var(--r); overflow:hidden }
.mapbox .facade{ display:block; width:100%; border:0; background:var(--surface-2); cursor:pointer;
                 padding:0; position:relative }
.mapbox .facade .play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
.mapbox .facade .play span{
  background:var(--surface); color:var(--text); border:1px solid var(--border-strong);
  border-radius:var(--r-pill); padding:var(--s3) var(--s5); font-weight:650;
  box-shadow:var(--shadow-2); font-size:var(--fs-sm);
}
.mapbox .live{ width:100%; height:min(60vh,460px) }
.map-search{ display:flex; gap:var(--s2); margin-bottom:var(--s3); flex-wrap:wrap }
.map-search input{ flex:1 1 14rem; min-width:0 }
.map-results{ list-style:none; margin-top:var(--s2); max-height:230px; overflow:auto;
              border:1px solid var(--border); border-radius:var(--r-sm) }
.map-results:empty{ display:none }
.map-results li + li{ border-top:1px solid var(--border) }
.map-results button{ display:flex; flex-direction:column; gap:2px; width:100%; text-align:left; background:none; border:0; cursor:pointer;
                     padding:var(--s2) var(--s3); font:var(--fs-sm) var(--font); color:var(--text);
                     min-height:40px }
.map-results button:hover{ background:var(--accent-soft) }
.map-results button strong,.map-results button span{ display:block; min-width:0; line-height:1.3;
  overflow-wrap:anywhere }

/* ── 13. Ország/régió zászlósor ─────────────────────────────────────────── */
.flagrow{ display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap }
.country-list{ list-style:none; display:grid; gap:var(--s2);
               grid-template-columns:repeat(auto-fill,minmax(190px,1fr)) }
.country-list a{ display:flex; align-items:center; gap:var(--s2); padding:var(--s2) var(--s3);
                 background:var(--surface-2); border-radius:var(--r-sm); color:var(--text);
                 border:1px solid transparent; min-height:42px }
.country-list a:hover{ background:var(--accent-soft); border-color:var(--accent-line); text-decoration:none }

/* ── 14. Forrásmegjelölés ───────────────────────────────────────────────── */
.source{ font-size:var(--fs-xs); color:var(--text-3); border-top:1px solid var(--border);
         padding-top:var(--s3); margin-top:var(--s5) }
.notice{ background:var(--warn-soft); border:1px solid color-mix(in srgb,var(--warn) 30%,transparent);
         color:var(--warn); border-radius:var(--r-sm); padding:var(--s3); font-size:var(--fs-sm) }

/* ── 15. Hirdetési hely ─────────────────────────────────────────────────── */
     background:var(--surface-2); border-radius:var(--r); overflow:hidden }

/* ── 16. Lábléc ─────────────────────────────────────────────────────────── */
.site-footer{ background:var(--brand); color:#b9cbe0; margin-top:var(--s7); padding-block:var(--s6) }
.site-footer a{ color:#e2edf8 }
.footer-grid{ display:grid; gap:var(--s5); grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
              padding-bottom:var(--s5); border-bottom:1px solid rgba(255,255,255,.1) }
.footer-grid h3{ font-size:var(--fs-sm); text-transform:uppercase; letter-spacing:.06em;
                 color:#8ba7c4; margin-bottom:var(--s2); font-weight:650 }
.footer-grid ul{ list-style:none; display:grid; gap:var(--s1) }
.footer-grid a{ font-size:var(--fs-sm); display:inline-block; padding-block:3px }
.footer-bottom{ padding-top:var(--s4); font-size:var(--fs-xs); color:#8ba7c4;
                display:flex; flex-wrap:wrap; gap:var(--s3); justify-content:space-between }

/* ── 17. Elrendezés-segédek ─────────────────────────────────────────────── */
.grid-2{ display:grid; gap:var(--s5); grid-template-columns:minmax(0,1fr) }
.grid-2 > *{ min-width:0 }
@media (min-width: 940px){ .grid-2{ grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); align-items:start } }
.sticky-side{ position:sticky; top:76px }
@media (max-width: 939px){ .sticky-side{ position:static } }

/* ── 18. Nyomtatás: tiszta útvonallap ───────────────────────────────────── */

/* ── 19. Kezdőlap ───────────────────────────────────────────────────────── */
.hero{ background:var(--surface); border-bottom:1px solid var(--border);
       padding-block:var(--s6) var(--s5); margin-top:calc(var(--s5) * -1); margin-bottom:var(--s5) }
.hero h1{ max-width:20ch }
.hero .lede{ margin-top:var(--s3) }
.planner{ padding:var(--s5) }
.planner-map{ height:min(58vh,460px); border-radius:var(--r); overflow:hidden; border:1px solid var(--border) }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
          clip:rect(0 0 0 0); white-space:nowrap; border:0 }

/* A Geoapify widget illesztése a dizájnrendszerhez */
#geoapify-route-directions input,
#geoapify-route-directions select{ font:var(--fs-base) var(--font) !important; min-height:44px !important;
  border-radius:var(--r-sm) !important; border:1px solid var(--border-strong) !important;
  background:var(--surface) !important; color:var(--text) !important }
.leaflet-bottom.leaflet-right{ font-size:10px }

/* Az örökölt inline stílusok semlegesítése a kezdőlapon */
.p-home .main-content{ all:unset; display:block }
.p-home h2{ font-size:var(--fs-xl); margin-bottom:var(--s3) }
.p-home h3{ font-size:var(--fs-lg); margin:var(--s4) 0 var(--s2) }
.p-home p{ max-width:78ch }
.mode-guide-grid{ display:grid; gap:var(--s3); grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) }
.mode-guide-grid article{ padding:var(--s4); border:1px solid var(--border); border-radius:var(--r);
  background:var(--surface-2) }
.mode-guide-grid h3{ margin-top:0 }
.mode-guide-grid p{ margin-bottom:0 }

/* ── 20. Örökölt tartalmi oldalak (vármegye, eszköz, jogi) ──────────────── */
.p-legacy h1, main > .wrap > .stack > h1{ margin-bottom:var(--s4) }
main .stack > h2{ font-size:var(--fs-xl); margin:var(--s6) 0 var(--s3) }
main .stack > h3{ font-size:var(--fs-lg); margin:var(--s5) 0 var(--s2) }
main .stack > p, main .stack > ul, main .stack > ol{ max-width:78ch }
main .stack > ul, main .stack > ol{ padding-left:1.25rem; display:block }
main .stack > ul li, main .stack > ol li{ margin-bottom:var(--s2) }
main .stack table{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r) }
main .stack img{ border-radius:var(--r) }
.table-container{ overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; min-width:0 }
/* Örökölt oldalak csupasz táblái is görgethetők legyenek mobilon */
main .stack > table, main .stack > div > table, .card > table{ display:block; overflow-x:auto;
  max-width:100%; white-space:normal }
.card table, .stack table{ min-width:0 }
.partners-container{ display:grid; gap:var(--s4); grid-template-columns:repeat(auto-fill,minmax(180px,1fr)) }
.partner{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
          padding:var(--s3); text-align:center }
.partner img{ max-height:110px; width:auto }
.partner-name{ font-size:var(--fs-sm); font-weight:600; margin-top:var(--s2) }

/* ── 21. Útvonalkereső űrlap (elsődleges művelet) ───────────────────────── */
.planner-form{ display:block }
.pf-row{ display:grid; gap:var(--s3); grid-template-columns:1fr auto 1fr auto; align-items:end }
@media (max-width: 780px){
  .pf-row{ grid-template-columns:1fr }
  .pf-swap{ justify-self:center; transform:rotate(90deg) }
  .pf-go{ width:100% }
}
.pf-field{ position:relative; min-width:0 }
.pf-swap{ background:var(--surface-2); border:1px solid var(--border-strong); color:var(--text-2);
          width:44px; height:44px; border-radius:var(--r-sm); cursor:pointer; font-size:1.1rem }
.pf-swap:hover{ background:var(--accent-soft); color:var(--accent) }
.pf-list{ position:absolute; z-index:20; left:0; right:0; top:100%; margin-top:4px; list-style:none;
          background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--r-sm);
          box-shadow:var(--shadow-2); max-height:260px; overflow:auto }
.pf-list li + li{ border-top:1px solid var(--border) }
.pf-list button{ width:100%; text-align:left; background:none; border:0; cursor:pointer;
                 padding:var(--s2) var(--s3); min-height:44px; font:var(--fs-base) var(--font); color:var(--text) }
.pf-list button:hover,.pf-list button:focus{ background:var(--accent-soft); outline:none }
.pf-list .sub{ color:var(--text-3); font-size:var(--fs-xs) }
.pf-hint{ margin:var(--s3) 0 0 }
.pf-result{ margin-top:var(--s4) }
.pf-result:empty{ display:none }
.pf-card{ display:flex; flex-wrap:wrap; gap:var(--s4); align-items:center; justify-content:space-between;
          padding:var(--s4); border:1px solid var(--accent-line); background:var(--accent-soft);
          border-radius:var(--r) }
.pf-card .val{ font-size:var(--fs-xl); font-weight:650; font-variant-numeric:tabular-nums }
.pf-advanced{ margin-top:var(--s5); border-top:1px solid var(--border); padding-top:var(--s4) }
.pf-advanced > summary{ cursor:pointer; font-weight:650; color:var(--accent); list-style:none;
  display:flex; align-items:center; gap:var(--s2); min-height:44px }
.pf-advanced > summary::before{ content:"▸"; transition:transform .15s }
.pf-advanced[open] > summary::before{ transform:rotate(90deg) }
.pf-advanced > summary::-webkit-details-marker{ display:none }
.pf-advanced-body{ padding-top:var(--s4) }

/* ═══ V3 — egységes vizuális réteg ══════════════════════════════════════════
   Egy identitás: világos felület, sötét márkajelzés csak a jelben és a
   fókuszszínben. Nincs külön "sötét fejléc + világos oldal" kettősség. */

.site-header{ background:var(--surface); border-bottom:1px solid var(--border); color:var(--text) }
.brand{ color:var(--text) }
.brand-mark{ color:var(--accent) }
.nav a{ color:var(--text-2) }
.nav a:hover,.nav a[aria-current]{ background:var(--accent-soft); color:var(--accent) }
.nav-toggle{ background:var(--surface); border:1px solid var(--border-strong); color:var(--text) }

.site-footer{ background:var(--surface); color:var(--text-2);
  border-top:1px solid var(--border); margin-top:var(--s7); padding-block:var(--s5) }
.site-footer a{ color:var(--text-2) }
.site-footer a:hover{ color:var(--accent) }
.footer-grid{ grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:var(--s4);
  padding-bottom:var(--s4); border-bottom:1px solid var(--border) }
.footer-grid h3{ color:var(--text) }
.footer-bottom{ color:var(--text-3); border:0; padding-top:var(--s3);
  display:flex; flex-wrap:wrap; gap:var(--s3); justify-content:space-between; align-items:baseline }

/* Tartalmi blokk — a "minden dobozban" helyett tagolt szöveg. */
.block{ min-width:0 }
.block > h2{ font-size:var(--fs-lg); margin-bottom:var(--s3);
  padding-bottom:var(--s2); border-bottom:1px solid var(--border) }
.block--note{ background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r); padding:var(--s4) }
.block--note > h2{ border:0; padding:0; margin-bottom:var(--s2) }
.block--note p{ margin:0; color:var(--text-2); max-width:78ch }

/* Oldalsáv-panel */
.panel{ background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r); padding:var(--s4) }
.panel > h2{ font-size:var(--fs-md); margin-bottom:var(--s3) }
.panel > h2 + *{ margin-top:0 }

/* Két elsődleges tény */
.factbar{ display:grid; gap:var(--s3); margin:0 0 var(--s5);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr)) }
.fact{ background:var(--accent-soft); border:1px solid var(--accent-line);
  border-radius:var(--r); padding:var(--s4) }
.fact dt{ font-size:var(--fs-xs); font-weight:650; color:var(--text-2);
  text-transform:uppercase; letter-spacing:.05em }
.fact dd{ margin:var(--s1) 0 0; font-size:var(--fs-2xl); font-weight:700;
  color:var(--accent); font-variant-numeric:tabular-nums; overflow-wrap:anywhere }
@media (prefers-color-scheme: dark){ .fact dd{ color:var(--accent-hover) } }

.page-sub{ display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap;
  margin:var(--s2) 0 0; color:var(--text-2); font-size:var(--fs-sm) }
.eyebrow{ font-size:var(--fs-xs); font-weight:650; color:var(--text-3);
  text-transform:uppercase; letter-spacing:.05em; margin:0 }
.endpoint{ padding:var(--s3) 0; border-bottom:1px solid var(--border) }
.endpoint:last-child{ border-bottom:0; padding-bottom:0 }
.endpoint h3{ font-size:var(--fs-md); margin:2px 0 var(--s1) }
.endpoint p:last-child{ margin:0 }

/* Csempék */
.tiles{ list-style:none; display:grid; gap:var(--s3);
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr)) }
.tile{ display:flex; flex-direction:column; gap:var(--s1); height:100%;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  padding:var(--s3) var(--s4); color:var(--text) }
.tile:hover{ border-color:var(--accent-line); background:var(--accent-soft); text-decoration:none }
.tile-title{ font-weight:600; overflow-wrap:anywhere }
.tile-meta{ font-size:var(--fs-sm); color:var(--text-3) }

/* Üzemanyag-panel */
.fuel-out{ font-size:var(--fs-2xl); font-weight:700; margin:0 0 var(--s3);
  font-variant-numeric:tabular-nums }
.fuel-inputs{ display:grid; gap:var(--s3); margin-bottom:var(--s3) }
.fuel-inputs label{ display:grid; gap:var(--s1); font-size:var(--fs-sm); color:var(--text-2) }
.ig{ display:flex; align-items:stretch; border:1px solid var(--border-strong);
  border-radius:var(--r-sm); overflow:hidden; background:var(--surface) }
.ig input{ border:0; min-width:0; flex:1 1 auto; padding:var(--s2) var(--s3);
  font:inherit; background:transparent; color:var(--text) }
.ig input:focus{ outline:0 }
.ig:focus-within{ box-shadow:var(--ring); border-color:var(--accent) }
.ig > span{ display:flex; align-items:center; padding-inline:var(--s3);
  background:var(--surface-2); border-left:1px solid var(--border);
  font-size:var(--fs-sm); color:var(--text-3); white-space:nowrap }

/* Útvonaltérkép */
.routemap{ margin:0; border:1px solid var(--border); border-radius:var(--r);
  overflow:hidden; background:var(--surface-2) }
.routemap-canvas{ width:100%; height:min(52vh,400px) }
.routemap-google{ width:100%; height:min(52vh,400px); background:var(--surface-2) }
.routemap-google iframe{ display:block; width:100%; height:100%; border:0 }
.routemap-bar{ display:flex; align-items:center; justify-content:space-between;
  gap:var(--s3); flex-wrap:wrap; padding:var(--s2) var(--s3);
  border-top:1px solid var(--border); background:var(--surface);
  font-size:var(--fs-sm); color:var(--text-3) }
.routemap-actions{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:var(--s2) }
.rm-pin span{ display:flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; color:#fff; font-weight:700;
  font-size:var(--fs-sm); box-shadow:0 1px 3px rgba(0,0,0,.4) }
.rm-a span{ background:#0f7a45 } .rm-b span{ background:#c2410c }

/* Helyreállító oldal */
.recovery{ background:var(--surface); border:1px solid var(--border);
  border-left:4px solid var(--warn); border-radius:var(--r); padding:var(--s5) }
.recovery h1{ font-size:clamp(1.3rem,1.05rem + 1.2vw,var(--fs-2xl)) }
.recovery .lede{ margin-bottom:var(--s5) }
.recovery-action{ border-top:1px solid var(--border); padding-top:var(--s4) }
.recovery-action h2{ font-size:var(--fs-md); margin-bottom:var(--s1) }

/* Tervező */
.planner{ background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--shadow-2); padding:var(--s4);
  margin-top:var(--s5); display:grid; gap:var(--s3) }
.planner-fields{ display:grid; gap:var(--s2); align-items:end;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) minmax(0,.9fr) auto }
@media (max-width: 860px){
  .planner-fields{ grid-template-columns:minmax(0,1fr) }
  .pf-swap{ justify-self:end; margin-top:calc(var(--s2) * -1) }
}
.pf{ position:relative; display:grid; gap:var(--s1); min-width:0 }
.pf label,.opt-group legend{ font-size:var(--fs-xs); font-weight:650; color:var(--text-2);
  text-transform:uppercase; letter-spacing:.05em; padding:0 }
.pf input,.pf select{ width:100%; min-width:0; min-height:44px; padding:var(--s2) var(--s3);
  font:inherit; color:var(--text); background:var(--surface);
  border:1px solid var(--border-strong); border-radius:var(--r-sm) }
.pf input:focus,.pf select:focus{ outline:0; border-color:var(--accent); box-shadow:var(--ring) }
.pf-swap{ min-height:44px; width:44px; display:inline-flex; align-items:center;
  justify-content:center; background:var(--surface); border:1px solid var(--border-strong);
  border-radius:var(--r-sm); color:var(--text-2); cursor:pointer }
.pf-swap:hover{ background:var(--surface-2); color:var(--accent) }
.pf-go{ min-height:44px; white-space:nowrap }
.pf-list{ position:absolute; z-index:30; top:100%; left:0; right:0; margin-top:2px;
  list-style:none; background:var(--surface); border:1px solid var(--border-strong);
  border-radius:var(--r-sm); box-shadow:var(--shadow-2); max-height:280px; overflow:auto }
.pf-list button{ display:flex; flex-direction:column; width:100%; text-align:left; gap:2px; padding:var(--s2) var(--s3);
  background:none; border:0; cursor:pointer; font:inherit; color:var(--text) }
.pf-list button:hover,.pf-list button:focus-visible{ background:var(--accent-soft) }
.pf-name{ display:block; min-width:0; font-weight:600; line-height:1.3; overflow-wrap:anywhere }
.pf-sub{ display:block; min-width:0; font-size:var(--fs-xs); line-height:1.3;
  color:var(--text-3); overflow-wrap:anywhere }
.planner + .ad,.planner-map + .ad{ margin-top:var(--s4) }
.waze-frame{ display:block; width:100%; height:min(62vh,520px); min-height:360px; border:0 }
.planner-opts{ display:flex; flex-wrap:wrap; gap:var(--s4); align-items:end;
  padding-top:var(--s3); border-top:1px solid var(--border) }
.opt-group{ border:0; margin:0; padding:0; display:grid; gap:var(--s2) }
.opt-group > div,.opt-group{ min-width:0 }
.chk{ display:inline-flex; align-items:center; gap:var(--s2); font-size:var(--fs-sm);
  color:var(--text-2); margin-right:var(--s3); cursor:pointer }
.planner-stops{ display:grid; gap:var(--s2) }
.pf--stop{ grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:var(--s2) }
.pf--stop label{ grid-column:1 / -1 }
.pf-remove{ min-height:44px; width:44px; border:1px solid var(--border-strong);
  background:var(--surface); border-radius:var(--r-sm); cursor:pointer; color:var(--text-2);
  font-size:var(--fs-lg); line-height:1 }
.planner-status{ font-size:var(--fs-sm); color:var(--text-2) }
.planner-status:empty{ display:none }
.planner-status.is-warn{ color:var(--warn) }
.planner-status.is-error{ color:#b42318 }
@media (prefers-color-scheme: dark){ .planner-status.is-error{ color:#f97066 } }
.planner-result:empty{ display:none }
.pf-hit{ display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center;
  justify-content:space-between; background:var(--accent-soft);
  border:1px solid var(--accent-line); border-radius:var(--r); padding:var(--s3) var(--s4) }
.pf-hit-title{ font-weight:650; margin:0 }
.pf-hit-meta{ margin:2px 0 0; font-size:var(--fs-lg) }
.pf-hit-note,.pf-none{ margin:var(--s1) 0 0; font-size:var(--fs-xs); color:var(--text-3) }
.pf-none{ padding:var(--s3) 0 }
.pf-fresh{ background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r); padding:var(--s4); margin-top:var(--s3) }
.pf-fresh-head{ display:flex; flex-wrap:wrap; gap:var(--s5); align-items:center;
  padding-bottom:var(--s3); border-bottom:1px solid var(--border) }
.pf-lbl{ display:block; font-size:var(--fs-xs); color:var(--text-3);
  text-transform:uppercase; letter-spacing:.05em; font-weight:650 }
.pf-big{ font-size:var(--fs-xl); font-variant-numeric:tabular-nums }
.pf-fresh-head button{ margin-left:auto }
.steps--fresh{ max-height:420px; overflow:auto; margin-top:var(--s3) }

.hero{ background:var(--surface); border-bottom:1px solid var(--border);
  padding-block:var(--s6) var(--s7) }
.hero .lede{ max-width:62ch }


/* Távolságlista: mobilon kártya, asztali gépen táblázatos sorok — nincs 5 oszlopos táblázat. */
.dist-list{ list-style:none; display:grid; gap:var(--s2) }
.dist-row{ display:grid; gap:var(--s1) var(--s3); align-items:baseline;
  grid-template-columns:minmax(0,1fr) auto;
  padding:var(--s3); background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-sm); color:var(--text) }
.dist-row:hover{ border-color:var(--accent-line); background:var(--accent-soft); text-decoration:none }
.dist-name{ font-weight:600; overflow-wrap:anywhere; min-width:0 }
.dist-sub{ display:block; font-weight:400; font-size:var(--fs-xs); color:var(--text-3) }
.dist-num{ font-weight:650; font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right }
.dist-time{ grid-column:1 / -1; font-size:var(--fs-sm); color:var(--text-3) }
@media (min-width: 620px){
  .dist-row{ grid-template-columns:minmax(0,1fr) 7rem 8rem; align-items:center }
  .dist-time{ grid-column:auto; text-align:right }
}

/* Térkép */
.mapbox{ border:1px solid var(--border); border-radius:var(--r); overflow:hidden; background:var(--surface) }
.mapbox-head{ position:relative; z-index:1100; padding:var(--s3); border-bottom:1px solid var(--border) }
.mapbox-head input{ width:100%; min-height:44px; padding:var(--s2) var(--s3); font:inherit;
  color:var(--text); background:var(--surface); border:1px solid var(--border-strong);
  border-radius:var(--r-sm) }
.mapbox-head input:focus{ outline:0; border-color:var(--accent); box-shadow:var(--ring) }
.mapbox .live{ width:100%; height:min(58vh,440px); background:var(--surface-2) }
.mapbox-bar{ padding:var(--s2) var(--s3); border-top:1px solid var(--border);
  font-size:var(--fs-sm); color:var(--text-3) }
.map-results{ position:absolute; z-index:1200; left:var(--s3); right:var(--s3); top:calc(100% - var(--s2));
  background:var(--surface); box-shadow:var(--shadow-2) }
.mapbox-bar{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s2) var(--s4) }
.cfilter{ display:block; margin-bottom:var(--s3) }
.cfilter input{ width:100%; max-width:26rem; min-height:44px; padding:var(--s2) var(--s3);
  font:inherit; color:var(--text); background:var(--surface);
  border:1px solid var(--border-strong); border-radius:var(--r-sm) }
.cfilter input:focus{ outline:0; border-color:var(--accent); box-shadow:var(--ring) }
.cfilter-empty{ color:var(--text-3); font-size:var(--fs-sm) }
/* Hirdetéshely: nincs előre lefoglalt magasság, tehát nincs fehér lyuk. */
.ad{ margin-block:var(--s4); text-align:center }
/* Üres hirdetéshely: nincs magassága, de van szélessége — így az AdSense meg
   tudja mérni a helyet, és nem marad fehér lyuk sem. Az `!important` azért kell,
   mert az AdSense a saját inline magasságát írja az <ins> elemre. */
.ad[data-ad-empty]{ min-height:0 !important; height:0 !important; margin-block:0 !important;
  overflow:hidden !important }
.ad[data-ad-empty] ins,
.ad ins[data-ad-status="unfilled"]{ display:block !important; height:0 !important;
  min-height:0 !important; overflow:hidden !important }
.ad ins[data-ad-status="unfilled"] iframe{ height:0 !important }
.footer-nav{ display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); padding-bottom:var(--s3);
  border-bottom:1px solid var(--border) }
.footer-nav a{ font-size:var(--fs-sm); padding-block:2px }
.footer-note{ margin:var(--s3) 0 0; font-size:var(--fs-xs); color:var(--text-3); max-width:88ch }
.footer-copy{ margin:var(--s2) 0 0; font-size:var(--fs-xs); color:var(--text-3) }
/* A .steps li saját display-t kap, ezért a [hidden] külön szabályt igényel. */
.steps li[hidden]{ display:none }

/* ── Nyomtatás ─────────────────────────────────────────────────────────────
   A nyomtatott útleírás önálló dokumentum: fejléc, két fő adat, a TELJES
   lépéslista és a forrásmegjelölés. Minden interaktív elem eltűnik. */
@media print{
  :root{
    --text:#000; --text-2:#1a1a1a; --text-3:#444; --border:#bbb;
    --surface:#fff; --surface-2:#fff; --surface-3:#fff;
    --accent:#000; --accent-soft:#fff; --accent-line:#999;
  }
  .site-header,.site-footer,.no-print,.crumbs,.btn,.btn-row,.planner,.planner-result,
  .ad,ins,.adsbygoogle,.nav-toggle,.mapbox,.routemap-bar,.fuel-inputs,.cfilter,
  .linklist,.tiles,.recovery-action{ display:none !important }
  body{ background:#fff; font-size:10.5pt; color:#000 }
  main{ padding:0 }
  .wrap{ max-width:none; padding:0 }
  .grid-2{ display:block }
  .stack > * + *{ margin-top:8pt }
  h1{ font-size:16pt; margin-bottom:4pt }
  h2{ font-size:12pt }
  h3{ font-size:11pt }
  a{ color:#000; text-decoration:none }
  .page-head{ border-bottom:1pt solid #000; padding-bottom:4pt; margin-bottom:8pt }
  .factbar{ grid-template-columns:repeat(2,1fr); gap:6pt; margin-bottom:8pt }
  .fact{ border:1pt solid #999; padding:5pt; break-inside:avoid }
  .fact dd{ font-size:14pt; color:#000 }
  .routemap{ border:1pt solid #999; break-inside:avoid; max-width:12cm }
  .routemap-canvas{ height:6cm; -webkit-print-color-adjust:exact; print-color-adjust:exact }
  /* A "csak az első 5 lépés" a képernyő szabálya — papírra a teljes lista kell. */
  .steps li[hidden],.step-more{ display:grid !important }
  .steps li{ break-inside:avoid; padding:3.5pt 0 }
  .steps li::before{ background:#eee; color:#000 }
  .block > h2{ border-bottom:1pt solid #999 }
  .block--note,.panel{ border:0; padding:0; break-inside:avoid }
  .panel > h2{ border-bottom:1pt solid #999; padding-bottom:2pt }
  .endpoint{ break-inside:avoid }
  .source,.footer-note{ font-size:8pt; color:#333 }
  @page{ margin:14mm }
}
/* Eszköz-almenü a fejlécben */
.nav-tools details{ position:relative }
.nav-tools summary{ list-style:none; cursor:pointer; display:inline-flex; align-items:center;
  gap:var(--s1); color:var(--text-2); font-size:var(--fs-sm); font-weight:500;
  padding:var(--s2) var(--s3); border-radius:var(--r-sm) }
.nav-tools summary::-webkit-details-marker{ display:none }
.nav-tools summary::after{ content:""; width:6px; height:6px; border-right:2px solid currentColor;
  border-bottom:2px solid currentColor; transform:rotate(45deg) translate(-2px,-2px) }
.nav-tools summary:hover,.nav-tools summary.is-active{ background:var(--accent-soft); color:var(--accent) }
.nav-sub{ list-style:none; display:grid; gap:2px }
@media (min-width: 901px){
  .nav-tools details[open] summary::after{ transform:rotate(225deg) translate(-3px,-3px) }
  .nav-sub{ position:absolute; right:0; top:calc(100% + 4px); z-index:40; min-width:14rem;
    background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
    box-shadow:var(--shadow-2); padding:var(--s2) }
  .nav-tools details:not([open]) .nav-sub{ display:none }
  .nav-sub a{ display:block }
}
@media (max-width: 900px){
  .nav-tools details{ display:block }
  .nav-sub{ padding-left:var(--s3) }
}
.block-lede{ color:var(--text-2); margin-top:calc(var(--s2) * -1) }
.block h3{ font-size:var(--fs-md); margin-top:var(--s4); margin-bottom:var(--s1) }
.block p{ max-width:78ch }
.kv{ margin:0; display:grid; gap:var(--s2) }
.kv > div{ display:flex; justify-content:space-between; gap:var(--s3); align-items:baseline;
  padding-bottom:var(--s2); border-bottom:1px solid var(--border) }
.kv > div:last-child{ border-bottom:0; padding-bottom:0 }
.kv dt{ color:var(--text-3); font-size:var(--fs-sm) }
.kv dd{ margin:0; font-weight:650; font-variant-numeric:tabular-nums; white-space:nowrap }
.chiplist{ list-style:none; display:flex; flex-wrap:wrap; gap:var(--s2); margin-bottom:var(--s3) }
.chip{ display:inline-flex; align-items:center; gap:var(--s2); padding:var(--s1) var(--s3);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-pill);
  color:var(--text); font-size:var(--fs-sm) }
.chip:hover{ background:var(--accent-soft); border-color:var(--accent-line); text-decoration:none }
.dist-name .flag{ margin-right:var(--s1) }
/* Betűrendes településlista */
.alpha{ display:flex; flex-wrap:wrap; gap:var(--s1); margin:var(--s3) 0 }
.alpha a{ display:inline-flex; min-width:28px; height:28px; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:var(--r-sm); font-size:var(--fs-sm); color:var(--text-2) }
.alpha a:hover{ background:var(--accent-soft); border-color:var(--accent-line); text-decoration:none }
.alpha-group{ margin-top:var(--s4) }
.alpha-group h3{ font-size:var(--fs-sm); color:var(--text-3); text-transform:uppercase;
  letter-spacing:.06em; border-bottom:1px solid var(--border); padding-bottom:var(--s1) }
.cols{ list-style:none; columns:2; column-gap:var(--s5); margin-top:var(--s2) }
@media (min-width: 700px){ .cols{ columns:3 } }
.cols li{ break-inside:avoid; padding:2px 0; font-size:var(--fs-sm) }
.alpha-group[hidden]{ display:none }
.gmap-search{ display:flex; gap:var(--s2); flex-wrap:wrap }
.gmap-search input{ flex:1 1 18rem; min-width:0; min-height:44px; padding:var(--s2) var(--s3);
  font:inherit; color:var(--text); background:var(--surface);
  border:1px solid var(--border-strong); border-radius:var(--r-sm) }
.gmap-search input:focus{ outline:0; border-color:var(--accent); box-shadow:var(--ring) }
/* Mobilon az almenü nyitva van, ha épp eszközoldalon vagyunk; asztalon nem. */
@media (max-width: 900px){ .nav-tools details[data-active]{ } }
/* Teljes településjegyzék: progresszív feltárás, a betűk UI-vezérlők */
.directory{ border:1px solid var(--border); border-radius:var(--r); background:var(--surface);
  margin-top:var(--s3) }
.directory > summary{ list-style:none; cursor:pointer; padding:var(--s3) var(--s4);
  display:flex; align-items:center; gap:var(--s2); font-weight:600; color:var(--accent) }
.directory > summary::-webkit-details-marker{ display:none }
.directory > summary::after{ content:""; width:7px; height:7px; margin-left:auto;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px) }
.directory[open] > summary::after{ transform:rotate(225deg) translate(-3px,-3px) }
.directory[open] .dir-open,.directory:not([open]) .dir-close{ display:none }
.directory > *:not(summary){ padding-inline:var(--s4) }
.directory > *:last-child{ padding-bottom:var(--s4) }
.alpha-label{ margin:var(--s3) 0 var(--s1); font-size:var(--fs-sm); font-weight:700;
  color:var(--text-3); text-transform:uppercase; letter-spacing:.06em;
  border-bottom:1px solid var(--border); padding-bottom:2px }
.linklist .nolink{ display:flex; justify-content:space-between; gap:var(--s3);
  padding:var(--s2) var(--s3); border:1px solid var(--border); border-radius:var(--r-sm);
  color:var(--text-2) }
.cgroup{ margin-bottom:var(--s4) }
.cgroup h3{ font-size:var(--fs-sm); color:var(--text-3); text-transform:uppercase;
  letter-spacing:.06em; margin-bottom:var(--s2) }
.cgroup[hidden]{ display:none }
/* Statikus lokátor-előnézet: nincs JS, azonnal látszik, kattintásra interaktív */
.slocator{ margin:0 0 var(--s4) }
.slocator-frame{ position:relative; display:grid; grid-template-columns:1fr 1fr;
  width:100%; max-width:420px; aspect-ratio:1/1; overflow:hidden;
  border:1px solid var(--border); border-radius:var(--r); background:var(--surface-2) }
.slocator-frame img{ display:block; width:100%; height:100%; object-fit:cover }
.slocator-pin{ position:absolute; width:16px; height:16px; margin:-8px 0 0 -8px;
  border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px #fff, 0 1px 4px rgba(0,0,0,.5) }
.slocator figcaption{ margin-top:var(--s1); font-size:var(--fs-xs); color:var(--text-3) }
@media (max-width: 620px){ .slocator-frame{ max-width:none } }
/* A „Hol van…" szakasz: szöveg + lokátor egymás mellett, üres sorok nélkül.
   (A korábbi `grid-row: 2 / span 99` 99 implicit sort hozott létre, ezért nyílt
   több ezer pixeles üres terület a szakasz alatt.) */
.city-where .where-body{ display:flex; flex-wrap:wrap; gap:var(--s5); align-items:flex-start }
.city-where .where-text{ flex:1 1 22rem; min-width:0 }
.city-where .where-text > p:last-child{ margin-bottom:0 }
.city-where .slocator{ flex:0 0 300px; margin:0 }
@media (max-width: 759px){ .city-where .slocator{ flex-basis:100% } }
/* A [hidden] attribútum sosem veszíthet egy komponens display szabályával szemben. */
[hidden]{ display:none !important }
.pf-tag{ display:inline-block; margin-left:var(--s1); padding:0 6px; border-radius:var(--r-pill);
  background:var(--surface-2); color:var(--text-3); font-size:var(--fs-xs); font-weight:600 }

/* A műveletsor és a térkép ne érjen össze mobilon. */
.p-route .btn-row{ margin-bottom:var(--s4) }
/* A megyeoldali lokátor ne uralja a nézetet. */
.p-region .slocator-frame,.p-country .slocator-frame{ max-width:340px }
/* Hero: cím/összefoglaló balra, lokátor jobbra */
.hero-split{ display:flex; flex-wrap:wrap; gap:var(--s5); align-items:flex-start }
.hero-split .hero-main{ flex:1 1 24rem; min-width:0; align-self:center }
.hero-split .slocator{ flex:0 0 190px; margin:0 }
.hero-split .slocator-frame{ max-width:190px }
.place-actions--top{ margin-bottom:var(--s5) }
.place-actions--below-map{ margin-top:var(--s3); margin-bottom:var(--s4) }
.value-note{ color:var(--text-2); font-weight:500 }
@media (max-width: 700px){
  .hero-split{ gap:var(--s3) }
  .hero-split .hero-main{ align-self:auto }
  .hero-split .slocator{ flex-basis:190px; margin-inline:auto }
}
/* Tompított lokátor: földrajzi kontextus, nem részletes térkép */
.slocator--muted .slocator-frame img{ filter:saturate(.35) contrast(.92) brightness(1.04) }
.slocator--muted .slocator-frame{ border-color:var(--border-strong) }

/* Teljes képernyős térkép */
.mapbox.is-fullscreen{ position:fixed; inset:0; z-index:1000; margin:0; border-radius:0;
  display:flex; flex-direction:column; background:var(--surface) }
.mapbox.is-fullscreen .live{ flex:1 1 auto; height:auto }
.mapbox.is-fullscreen .mapbox-head{ flex:0 0 auto }
body.has-fullscreen-map{ overflow:hidden }
.mapbox-head{ display:flex; gap:var(--s2); align-items:center; flex-wrap:wrap }
.mapbox-head input{ flex:1 1 14rem }
.mapbox-fs{ flex:0 0 auto; white-space:nowrap }
@media (max-width: 520px){ .mapbox-fs span{ display:none } .mapbox-fs{ padding-inline:var(--s2) } }
/* Időjárási adatblokk */
.wx{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  padding:var(--s4); margin-bottom:var(--s3) }
.wx-loading,.wx-error{ margin:0; color:var(--text-3) }
.wx-error{ color:var(--warn) }
.wx-now{ display:flex; flex-wrap:wrap; gap:var(--s4); align-items:baseline }
.wx-temp{ font-size:var(--fs-3xl); font-weight:700; margin:0; font-variant-numeric:tabular-nums }
.wx-desc{ margin:0; font-size:var(--fs-lg); color:var(--text-2) }
.wx-kv{ display:flex; gap:var(--s4); margin:0 0 0 auto; flex-wrap:wrap }
.wx-kv dt{ font-size:var(--fs-xs); color:var(--text-3); text-transform:uppercase; letter-spacing:.05em }
.wx-kv dd{ margin:0; font-weight:650; font-variant-numeric:tabular-nums }
.wx-days{ list-style:none; display:grid; gap:var(--s2); margin-top:var(--s4);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) }
.wx-days li{ display:grid; gap:2px; padding:var(--s3); background:var(--surface-2);
  border-radius:var(--r-sm) }
.wx-day{ font-weight:650 } .wx-d{ font-size:var(--fs-sm); color:var(--text-2) }
.wx-t{ font-variant-numeric:tabular-nums } .wx-p{ font-size:var(--fs-xs); color:var(--text-3) }
.wx-src{ margin:var(--s3) 0 0; font-size:var(--fs-xs); color:var(--text-3) }
@media (max-width:520px){.hero-split{flex-direction:column}.hero-split .hero-main{flex-basis:auto}.hero-split .slocator{align-self:center}.page-sub{overflow-wrap:anywhere}}