/* =====================================================================
   IDOJARAS.RO — DESIGN-RENDSZER

   MIERT --wag- ELOTAG MINDEN VALTOZON:
   a GeneratePress SAJAT :root-ot ad ki, benne --accent:#1e73be (kek), es a
   temaCSS a mi fajlunk UTAN toltodik → felulirta a turkizunket, es eltunt a
   zold az egesz oldalrol. Az elotag ezt eleve lehetetlenne teszi, fuggetlenul
   a betoltesi sorrendtol. (2026-07-21, Andi jelezte: "eltunt a zold is")
   Egyetlen forrás. Minden oldal ebből örökli a színt, a sarkot, a betűt.
   Andi döntései, 2026-07-21 — élő összehasonlítás után, nem elméletből.

   ALAPSZABÁLY: az UI szinte szürkeárnyalatos — A SZÍN AZ ADATÉ.
   (Az Időkép "színes karfiol"-hatása abból jön, hogy náluk az UI-szín és az
   adat-szín keveredik: a gomb is színes, a doboz is színes, az adat is →
   semmi nem emelkedik ki.)

   FOGLALT SZÍNEK, amikhez NEM nyúlunk: sárga / narancs / piros =
   ANM riasztási fokozat. Ezért van az akcent a spektrum másik végén.
   ===================================================================== */
:root{
  /* --- alapszínek: "tinta" és "papír" --- */
  --wag-ink:#0f172a;
  --wag-paper:#f2f7f6;          /* törtfehér, erősebb türkiz árnyalat */

  /* --- akcent: TÜRKIZ ---
     Miért nem kék: (1) minden konkurens kék (Időkép, Windy, OpenWeather);
     (2) kontraszt 5,51:1 fehéren → WCAG AA átmegy, míg az égkék #0284c7 csak
     4,08:1, és PONT az akcenttel írjuk ki a hőmérséklet-értékeket;
     (3) a legtávolabb van a riasztás-színektől. */
  --wag-accent:#0f766e;
  --wag-accent-dark:#115e59;    /* hover kitöltött elemen — nem új szín, egy fokkal lejjebb */
  --wag-accent-tint:rgba(15,118,110,.07);
  --wag-accent-tint-2:rgba(15,118,110,.14);

  /* --- vonalak: az akcentből, alacsony átlátszósággal ---
     Így az egész lap egy családba tartozik, de a vonal nem versenyez az adattal. */
  --wag-line:rgba(15,118,110,.20);
  --wag-line-soft:rgba(15,118,110,.10);
  /* HOZZÁFÉRHETŐSÉG (2026-07-24): #64748b csak 4,40:1 volt a törtfehér
     papíron (--wag-paper #f2f7f6), tehát a WCAG AA 4,5:1-et HAJSZÁLLAL
     bukta — a WAVE 12 hibát dobott miatta. Egy fokkal sötétebb: 5,02:1
     a papíron, 5,43:1 fehéren. Szemre alig más, mérve viszont átmegy. */
  --wag-muted:#5b6b81;

  /* --- sarkok: "szögletes" ---
     A pirula (999px) konvenciója szűrő/kapcsoló és fogyasztói-app hangulatú.
     A pozicionálásunk hivatalos mérés + hitelesség → élesebb forma. A tiszta 0
     viszont ma inkább olcsónak hat, mint elegánsnak. A kettő közti sáv a jó. */
  --wag-r-card:8px;
  --wag-r-btn:6px;
  --wag-r-row:4px;

  /* --- betűk: egy család két tagja (Adobe Source), egymáshoz tervezve --- */
  --wag-font-heading:'Source Serif 4',Georgia,serif;
  --wag-font-body:'Source Sans 3',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* =====================================================================
   KÉK HOVER VÉGLEGES KIIKTATÁSA — 2026-07-23.
   A GeneratePress alap link-színe (és a:hover-e) KÉK. A saját kártya-,
   chip- és nav-komponenseink SAJÁT színt használnak — a GP kék SOHA ne
   szivárogjon rájuk, hover/focus állapotban sem. Egy helyen, az összesre,
   hogy ne kelljen komponensenként külön foltozni (Andi többször jelezte).
   ===================================================================== */
.eh-kartya,.eh-kartya:hover,.eh-kartya:focus,.eh-kartya:focus-visible,.eh-kartya:visited,
.eh-terkep,.eh-terkep:hover,.eh-terkep:focus,.eh-terkep:focus-visible,.eh-terkep:visited,
.tk-tovabb__elem,.tk-tovabb__elem:hover,.tk-tovabb__elem:focus,.tk-tovabb__elem:focus-visible,.tk-tovabb__elem:visited,
.hn-tovabb__elem,.hn-tovabb__elem:hover,.hn-tovabb__elem:focus,.hn-tovabb__elem:focus-visible,.hn-tovabb__elem:visited,
.hn-cikk,.hn-cikk:hover,.hn-cikk:focus,.hn-cikk:focus-visible,.hn-cikk:visited,
.hn-varos,.hn-varos:hover,.hn-varos:focus,.hn-varos:focus-visible,.hn-varos:visited,
.wag-varos-tovabb__elem,.wag-varos-tovabb__elem:hover,.wag-varos-tovabb__elem:focus,.wag-varos-tovabb__elem:focus-visible,.wag-varos-tovabb__elem:visited,
.wag-cikk,.wag-cikk:hover,.wag-cikk:focus,.wag-cikk:focus-visible,.wag-cikk:visited,
.vo-kozel a,.vo-kozel a:hover,.vo-kozel a:focus,.vo-kozel a:focus-visible,.vo-kozel a:visited {
  color: var(--wag-ink);
}

/* A LAP FELÜLETE.
   Az <html> ELEM IS KELL: a tartalom-oszlopon kívüli sáv azt mutatja, nem a body-t.
   (Andi szúrta ki: a színezés először csak egy keskeny sávra terjedt ki.)
   Miért nem tiszta fehér: nagy képernyőn fáraszt, és ha a lap törtfehér, akkor
   később a TISZTA FEHÉR lesz a kiemelés eszköze (pl. riasztás-sáv) keret és
   árnyék nélkül. Kontraszt: tinta 16,5:1, akcent 5,06:1 — mindkettő bőven AA. */
html, body { background-color: var(--wag-paper); }

/* A téma "különálló konténer" módja fehér dobozt tenne a lapra — átlátszóvá tesszük,
   hogy a tónus egybefüggő legyen, és a tagolást a TÉRKÖZ végezze, ne a doboz. */
.separate-containers .inside-article,
.separate-containers .site-main,
.one-container .container,
.site-content { background-color: transparent; }


/* A tema sajat hatterszabalya (body{background-color:rgba(255,255,255,.96)}) a mi
   fajlunk utan toltodik, ezert csak nagyobb fajsulyu szelektorral lehet legyozni.
   Nem !important: az utolso mentsvar, es lancreakciot indit. Ket osztaly a body-n
   eleg, es tovabbra is felulirhato marad, ha egy oldalnak sajat hatter kell. */
html body.wp-singular,
html body.wp-embed-responsive,
html body { background-color: var(--wag-paper); }

/* =====================================================================
   GP-SEMLEGESÍTÉS — 2026-07-21
   A GeneratePress vázként marad (menü, fejléc, lábléc, blokk-támogatás),
   de a MEGJELENÉS innentől a mi rendszerünk. Ez a blokk hallgattatja el
   a téma és a Customizer örökölt stílusait.
   ===================================================================== */

/* --- 1. RESZPONZÍV BETŰSKÁLA ---
   A Customizerben fix méretek vannak (h1 40px, h2 35px, h3 25px) — mobilon
   túl nagy, 2K-n túl kicsi, és összesen 14-féle méret élt az oldalon.
   Itt EGY skála lép a helyükre, clamp()-pel: mobiltól 2K-ig folyamatos. */
body h1 { font-size: clamp(1.9rem, 4.5vw, 3rem);   line-height: 1.1;  letter-spacing: -.02em; }
body h2 { font-size: clamp(1.4rem, 3vw,   2rem);   line-height: 1.2;  letter-spacing: -.01em; }
body h3 { font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.3; }
body h1, body h2, body h3 { font-family: var(--wag-font-heading); }

/* --- 2. KEMÉNY SZÜRKE ÁRNYÉKOK KIÜTÉSE ---
   A Customizer "Additional CSS" mezőjében élnek (tehát az ADATBÁZISBAN, amit
   sosem viszünk fel localról) — ezért kódból semlegesítjük:
     #post-2 ... img               { box-shadow: 20px 20px 5px gray }
     .archive #main .inside-article{ box-shadow: 10px 10px 8px gray }
   Ezek PowerPoint-árnyékok: nagy eltolás, kis elmosás, tömör szürke.
   Helyettük: semmi. A tagolást a térköz végzi. */
.wp-block-image img,
.archive #main .inside-article,
#main .inside-article { box-shadow: none; }

/* --- 3. LINKEK ÉS GOMBOK a mi akcentünkre ---
   A GP saját --accent-je #1e73be (kék). A sajátunkat nem írhatjuk felül
   (az a témáé), de a MEGJELENÉST igen. */
.entry-content a:not(.button):not(.wp-block-button__link) { color: var(--wag-accent); }
.entry-content a:not(.button):not(.wp-block-button__link):hover { color: var(--wag-accent-dark); }

/* --- 4. GYÁRI SZÍNÁTMENETEK LEFOGÁSA ---
   A WordPress alap-palettájának átlós gradiensei (türkiz→lila, narancs→sárga)
   a blokkszerkesztőből kerültek be. A "színes karfiol" nagy része ez.
   Csak a HÁTTÉR-gradienst semlegesítjük, a szöveg-gradienst nem bántjuk. */
.has-background.has-vivid-cyan-blue-to-vivid-purple-gradient-background,
.has-background.has-luminous-vivid-orange-to-vivid-red-gradient-background,
.has-background.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background,
.has-background.has-cool-to-warm-spectrum-gradient-background,
.has-background.has-blush-light-purple-gradient-background,
.has-background.has-blush-bordeaux-gradient-background,
.has-background.has-electric-grass-gradient-background,
.has-background.has-midnight-gradient-background { background: var(--wag-accent-tint) !important; }

/* =====================================================================
   FŐOLDALI KOMPONENSEK EGYSÉGESÍTÉSE — 2026-07-21
   A weather-style.css a régi, "színes" korszakból való. Nem töröljük (a
   szerkezetet adja), csak elhallgattatjuk a díszítését.

   Amit felváltunk (mérve):
     .badge-magyarorszag  = HÁROMSZÍNŰ gradiens (piros→sárga→zöld)
     .badge-erdely/-ma    = narancs-piros gradiens
     .badge-globalis      = kék gradiens
     .badge-agrar         = zöld gradiens
     .read-more-btn       = kék gradiens pirula + felemelkedés hoverre
     .article-card.featured = kék keret + kék-lila szivárványcsík

   ELV: a kategória METAADAT, nem adat → legyen halk. A szín az adaté.
   ===================================================================== */

/* --- JELVÉNYEK: egy stílus mindenre, lapos, halk --- */
.badge,
.badge-erdely, .badge-globalis, .badge-agrar,
.badge-magyarorszag, .badge-ma {
  background: var(--wag-accent-tint) !important;   /* !important kell: az eredeti is az */
  color: var(--wag-accent-dark) !important;
  border: 1px solid var(--wag-line);
  border-radius: var(--wag-r-row);
  text-transform: none;
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .01em;
  padding: .25rem .6rem;
}

/* A dátum nem jelvény: metaadat. Nincs fekete pirula, csak halk szöveg. */
.date-badge {
  background: transparent !important;
  color: var(--wag-muted) !important;
  border: 0;
  padding: .25rem 0;
  text-transform: none;
  font-weight: 500;
}

/* --- "RÉSZLETEK": szöveges link, nem kék pirula ---
   A kártya címe úgyis kattintható; a gomb csak zajt adott. */
.read-more-btn {
  background: none !important;
  color: var(--wag-accent) !important;
  padding: 0 !important;
  border-radius: 0 !important;   /* !important kell: a weather-style.css KÉSŐBB tölt,
                                    és 25px pirula-lekerekítést tett rá — mérve */
  font-weight: 600;
  box-shadow: none !important;
}
.read-more-btn:hover {
  background: none !important;
  color: var(--wag-accent-dark) !important;
  transform: none !important;
  box-shadow: none !important;
  text-decoration: underline;
}

/* --- KÁRTYÁK: nincs emelkedés, nincs szivárvány, nincs színes keret --- */
.article-card {
  border: 1px solid var(--wag-line);
  border-radius: var(--wag-r-card);
  box-shadow: none;
  background: #fff;
  transition: border-color .15s, background .15s;
}
@media (hover:hover){
  .article-card:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--wag-accent);
    background: var(--wag-accent-tint);
  }
}
/* A kiemelt kártya jelölése: BAL OLDALI AKCENTSÁV — nem gradiens, nem kék keret.
   Ugyanaz a nyelv, amit a v2-n használunk. */
.article-card.featured {
  background: #fff;
  border-color: var(--wag-line);
  border-left: 3px solid var(--wag-accent);
  box-shadow: none;
}
.article-card.featured::before { display: none; }   /* a kék-lila szivárványcsík */

/* --- CÍMEK a kártyákon: a mi betűnk és színünk --- */
.article-title a { color: var(--wag-ink); font-family: var(--wag-font-heading); }
@media (hover:hover){ .article-title a:hover { color: var(--wag-accent); } }

/* =====================================================================
   FŐOLDALI HŐSPANEL (.summary-weather-box-inline) — 2026-07-21
   Korábban: időszakos LILA gradiens, mozgó ötszínű csík, 3 rétegű árnyék,
   5 belépő animáció, kétszeres backdrop-blur, text-shadow.
   Most: fehér felület a törtfehér lapon — kiemelés keret és árnyék NÉLKÜL.
   (Ezért nem tiszta fehér a lap: hogy a fehér maradjon a kiemelés eszköze.)
   ===================================================================== */
.summary-weather-box-inline{
  background:#fff;
  color:var(--wag-ink);
  border:1px solid var(--wag-line);
  border-radius:var(--wag-r-card);
  padding:clamp(1.25rem,4vw,2.25rem);
  margin:1.5rem auto;
  width:100%;
  max-width:1000px;
  min-height:0;              /* volt: 400px fix — mobilon üres helyet hagyott */
  box-shadow:none;
  animation:none;
}
.summary-h2-inline{
  font-family:var(--wag-font-heading);
  font-size:clamp(1.35rem,3vw,1.9rem);
  font-weight:700;line-height:1.2;letter-spacing:-.01em;
  color:var(--wag-ink);text-align:left;
  margin:0 0 .35rem;text-shadow:none;
}
.summary-greeting-inline{
  font-size:.95rem;font-weight:600;color:var(--wag-muted);
  background:none;padding:0;margin:0 0 1.5rem;text-align:left;
  box-shadow:none;animation:none;
}

/* ADATRÁCS: nincs doboz-a-dobozban, a sorokat hajszálvonal tagolja */
.summary-ul-inline{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:0 2.5rem;animation:none;
}
.summary-li-inline{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  background:none;border:0;border-bottom:1px solid var(--wag-line-soft);
  border-radius:0;padding:.85rem 0;margin:0;
  box-shadow:none;backdrop-filter:none;animation:none;
  font-size:1rem;color:var(--wag-muted);
}
/* A SZÁM A HŐS — ugyanaz a nyelv, mint a hótérképen */
.wag-hero-num{
  font-family:var(--wag-font-body);font-variant-numeric:tabular-nums;
  font-size:1.75rem;font-weight:700;line-height:1;letter-spacing:-.02em;
  color:var(--wag-accent);
}
.wag-hero-val{
  font-variant-numeric:tabular-nums;font-size:1.05rem;font-weight:600;
  color:var(--wag-ink);text-align:right;
}

.wag-hero-change{
  margin:1.5rem 0 0;padding:0;background:none;border-radius:0;
  text-align:left;font-size:1rem;color:var(--wag-ink);
}
/* Riasztás: EZ kaphat színt — mert ez tényleg figyelmeztetés.
   Borostyán, nem piros: a pirosat az ANM legmagasabb fokozatának tartjuk fenn. */
.wag-hero-alert{
  background:#fffbeb;color:#78350f;border:1px solid #fcd34d;
  border-left:3px solid #f59e0b;border-radius:var(--wag-r-row);
  padding:.85rem 1rem;margin:.75rem 0 0;font-weight:600;font-size:.95rem;
}
.wag-hero-src{
  font-size:.82rem;color:var(--wag-muted);opacity:1;
  margin:1.5rem 0 0;text-align:left;
}

/* =====================================================================
   RIASZTÁS-SÁV (.wag-alert) — 2026-07-21
   SZÍN-KIVÉTEL: a sárga/narancs/piros az ANM hivatalos fokozat-jelölése,
   tehát SZEMANTIKUS. Nem a mi palettánk, és nem is szabad átszínezni —
   a látogató ezekhez a színekhez kötötte a veszélyszintet.
   Pontosan ezért türkiz az akcentünk: soha nem versenyez a riasztással.
   ===================================================================== */
.wag-alert{
  display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;
  padding:.8rem 1rem;margin:0 0 1.25rem;
  border-radius:var(--wag-r-row);
  border:1px solid;border-left-width:4px;
  font-size:.95rem;line-height:1.5;
}
.wag-alert__level{
  font-weight:800;font-size:.72rem;letter-spacing:.06em;
  padding:.15rem .5rem;border-radius:3px;white-space:nowrap;
  color:#fff;
}
/* A riasztás-sáv szövege: hosszú megyelista is TÖRJÖN, ne feszítsen.
   Élesen ez csak akkor jött elő, amikor 2 riasztás 34 területtel érkezett —
   addig rövid volt a sor, és nem látszott a hiba. */
.wag-alert{max-width:100%;overflow:hidden}
.wag-alert__text{flex:1 1 100%;min-width:0;overflow-wrap:anywhere}

/* Fokozatok — az ANM színei */
.wag-alert--sarga  { background:#fffbeb;border-color:#fcd34d;color:#78350f; }
/* A BADGE-SZÍNEK a WCAG AA-hoz igazítva (2026-07-24, mérve fehér szöveggel):
   sárga #d97706 = 3,19 → #b45309 = 5,02  |  narancs #ea580c = 3,56 → #c2410c = 5,18
   A piros #dc2626 (4,83) és a fokozat-sorrend változatlan — a szín továbbra is
   egyértelműen sárga/narancs/piros, csak egy árnyalattal mélyebb. */
.wag-alert--sarga   .wag-alert__level{ background:#b45309; }

.wag-alert--narancs{ background:#fff7ed;border-color:#fdba74;color:#7c2d12; }
.wag-alert--narancs .wag-alert__level{ background:#c2410c; }

.wag-alert--piros  { background:#fef2f2;border-color:#fca5a5;color:#7f1d1d; }
.wag-alert--piros   .wag-alert__level{ background:#dc2626; }
/* NINCS riasztás — zöld, megnyugtató. A mai-idojaras oldalon Andi kérte,
   hogy a csend helyett álljon ott egyértelműen: nincs veszély. */
.wag-alert--nincs  { background:#f0fdf4;border-color:#86efac;color:#14532d; }
.wag-alert--nincs   .wag-alert__level{ background:#15803d; }

/* A VÁLASZ-MONDAT a sáv alatt: nagy, díszítetlen — ő a lap hőse */
.wag-answer{
  font-size:clamp(1.02rem,2.2vw,1.2rem);line-height:1.65;
  max-width:70ch;margin:0 0 1.75rem;color:var(--wag-ink);
}
.wag-answer strong{font-weight:700}

/* --- KOMPAKT ADATSOR a válasz-mondat alatt (.wag-now) ---
   Ami a lila dobozból megmaradt: hőérzet, leghidegebb, legszelesebb.
   Nem doboz, hanem adatsor — vonallal tagolva, a szám a hangsúlyos. */
.wag-now{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:0 2rem;margin:0 0 1.5rem;
  border-top:1px solid var(--wag-line);
}
.wag-now__item{
  display:flex;flex-direction:column;gap:.2rem;
  padding:.9rem 0;border-bottom:1px solid var(--wag-line-soft);
}
.wag-now__label{font-size:.82rem;color:var(--wag-muted);font-weight:500}
.wag-now__num{
  font-variant-numeric:tabular-nums;font-size:1.6rem;font-weight:700;
  line-height:1.1;letter-spacing:-.02em;color:var(--wag-accent);
}
.wag-now__val{font-size:1.05rem;font-weight:600;color:var(--wag-ink)}

.wag-hero-change{margin:0 0 1rem;font-size:1rem;color:var(--wag-ink)}
.wag-hero-note{
  background:var(--wag-accent-tint);border-left:3px solid var(--wag-accent);
  border-radius:var(--wag-r-row);padding:.7rem .9rem;margin:.5rem 0 0;
  font-size:.95rem;font-weight:600;color:var(--wag-ink);
}
.wag-hero-src{font-size:.82rem;color:var(--wag-muted);margin:1.25rem 0 0;line-height:1.5}
/* FORRÁS-SOR — az „Adatok: …" attribúció külön, KISEBB + HALVÁNY sorban, minden
   helyen, ahol adatforrást írunk ki (válasz-mondat, térkép-válasz). Andi, 2026-07-24.
   .82em (nem rem): a szülő szöveghez arányosan kisebb, bármilyen kontextusban. */
.wag-forras{display:block;margin-top:.5rem;font-size:.82em;line-height:1.5;color:var(--wag-muted);font-weight:400}
.wag-forras strong{font-weight:600;color:var(--wag-muted)}

/* =====================================================================
   A VÁZ — 2026-07-21
   Eddig szabályt kerestem, ami fehérre festi a tartalom-oszlopot, és nem
   találtam. Ezért nem tovább nyomozunk: itt EXPLICIT kimondjuk, hogy néz ki
   a váz, elég nagy fajsúllyal, hogy a téma és a Customizer se írja felül.

   CÉL: nincs "fehér doboz szürke lapon". EGY összefüggő felület, a tagolást
   a TÉRKÖZ végzi. A fehér marad a kiemelés eszközének (riasztás, kártya).
   ===================================================================== */

/* 1. Egyetlen felület — minden szerkezeti konténer átlátszó */
html body #page,
html body .site,
html body .site-content,
html body .content-area,
html body .site-main,
html body .inside-article,
html body .entry-content { background-color: transparent; }

/* 2. Térköz. A Customizerben az one-container módhoz 0px volt beállítva
   (sosem használtad ezt a módot, így senki nem állította be) — ettől ragadt
   a H1 a fejléchez, és ettől csúszott a szöveg a bal szélre. */
html body.one-container .site-content {
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 2rem) clamp(2rem, 6vw, 4rem);
}

/* 3. Olvasható szélesség. 1280px-en a sorok túl hosszúak lennének 2K-n. */
html body .site.grid-container { max-width: 1240px; }

/* 4. A H1 kapjon levegőt maga körül */
html body .entry-header,
html body .page-header { margin-bottom: 1.5rem; }
html body .entry-title { margin-top: 0; }

/* 5. A tartalom ne lógjon ki mobilon */
html body .entry-content > * { max-width: 100%; }
img, figure, iframe, table { max-width: 100%; height: auto; }

/* =====================================================================
   VÁROSKERESŐ (.wag-cs) — a főoldal fő cselekvési pontja
   Mobil-first: a mező teljes szélességű és 48px magas (kényelmes hüvelykujjnak),
   a lista sorai 52px-esek. A szám a hős, ahogy mindenhol.
   ===================================================================== */
.wag-cs{margin:0 0 var(--wag-gap,2.5rem)}
.wag-cs__title{
  font-family:var(--wag-font-heading);font-size:clamp(1.3rem,3vw,1.75rem);
  font-weight:700;letter-spacing:-.01em;margin:0 0 1rem;
}
.wag-cs__field{margin:0 0 1rem}
.wag-cs__input{
  width:100%;min-height:48px;padding:.75rem 1rem;
  font-family:inherit;font-size:1.05rem;color:var(--wag-ink);
  background:#fff;border:1px solid var(--wag-line);border-radius:var(--wag-r-btn);
  transition:border-color .15s,box-shadow .15s;
}
.wag-cs__input::placeholder{color:var(--wag-muted)}
.wag-cs__input:focus{
  outline:none;border-color:var(--wag-accent);
  box-shadow:0 0 0 3px var(--wag-accent-tint);
}

/* Kiemelt városok: egy koppintás a legkeresettebbekhez */
.wag-cs__chips{display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 1.5rem}
.wag-cs__chip{
  display:inline-flex;align-items:baseline;gap:.4rem;
  min-height:44px;padding:.5rem .85rem;
  background:#fff;border:1px solid var(--wag-line);border-radius:var(--wag-r-btn);
  color:var(--wag-ink);text-decoration:none;font-weight:600;font-size:.95rem;
  transition:border-color .15s,background .15s;
}
.wag-cs__chip span{
  font-variant-numeric:tabular-nums;color:var(--wag-accent);font-weight:700;
}
@media (hover:hover){
  .wag-cs__chip:hover{border-color:var(--wag-accent);background:var(--wag-accent-tint)}
}

/* Teljes lista — két/három oszlop, ahol elfér */
.wag-cs__list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:0 2rem;border-top:1px solid var(--wag-line);
}
.wag-cs__item a{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  min-height:52px;padding:.8rem 0;
  border-bottom:1px solid var(--wag-line-soft);
  color:var(--wag-ink);text-decoration:none;
  transition:padding-left .15s;
}
@media (hover:hover){
  .wag-cs__item a:hover{padding-left:.4rem;color:var(--wag-accent)}
}
.wag-cs__item a:focus-visible{outline:2px solid var(--wag-accent);outline-offset:2px}
.wag-cs__city{font-weight:500;font-size:1.02rem}
.wag-cs__temp{
  font-variant-numeric:tabular-nums;font-size:1.35rem;font-weight:700;
  line-height:1;letter-spacing:-.02em;color:var(--wag-accent);white-space:nowrap;
}
.wag-cs__temp small{font-size:.72rem;font-weight:600;color:var(--wag-muted);margin-left:.1rem}
.wag-cs__empty{color:var(--wag-muted);padding:1rem 0;margin:0}

/* Régió-csoportok a városkeresőben — 41 városnál ez teszi pásztázhatóvá */
.wag-cs__list{display:block;border-top:0}
.wag-cs__group{margin:0 0 1.5rem}
.wag-cs__region{
  font-family:var(--wag-font-body);font-size:.78rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--wag-muted);
  margin:0 0 .25rem;padding-bottom:.4rem;border-bottom:1px solid var(--wag-line);
}
.wag-cs__ul{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0 2rem;
}

/* =====================================================================
   VÁROSKERESŐ v2 — keretes kártyák (Andi kérése, 2026-07-21)
   "ezek lehetnek elszeparáltabbak, finoman keretben"
   Indok: 24 (később 41) sor hajszálvonallal elválasztva EGYBEFOLYIK.
   A finom keret külön egységgé teszi mindegyiket, anélkül hogy a lap
   visszaesne a régi "dobozos" hatásba — a keret halvány, az árnyék nulla.
   ===================================================================== */
.wag-cs__ul{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:.6rem;                       /* volt: 0 2rem — most mindkét irányban */
}
.wag-cs__item a{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  min-height:64px;padding:.7rem .9rem;
  background:#fff;
  border:1px solid var(--wag-line);
  border-radius:var(--wag-r-card);
  box-shadow:none;
  transition:border-color .15s,background .15s;
}
@media (hover:hover){
  .wag-cs__item a:hover{
    border-color:var(--wag-accent);background:var(--wag-accent-tint);padding-left:.9rem;
  }
}
.wag-cs__head{display:flex;align-items:center;gap:.5rem;min-width:0}
.wag-cs__icon{font-size:1.15rem;line-height:1;flex:0 0 auto}
.wag-cs__city{
  font-weight:600;font-size:1rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wag-cs__data{display:flex;flex-direction:column;align-items:flex-end;gap:.1rem;flex:0 0 auto}
.wag-cs__temp{
  font-variant-numeric:tabular-nums;font-size:1.35rem;font-weight:700;
  line-height:1;letter-spacing:-.02em;color:var(--wag-accent);white-space:nowrap;
}
.wag-cs__temp small{font-size:.7rem;font-weight:600;color:var(--wag-muted);margin-left:.1rem}
.wag-cs__chg{
  font-size:.72rem;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.wag-cs__chg.is-up  { color:#c2410c; }   /* melegebb, mint tegnap ilyenkor */
.wag-cs__chg.is-down{ color:#0369a1; }   /* hűvösebb, mint tegnap ilyenkor */

/* --- FRISSESSÉG-CÍMKE ---
   Megmondja, MI ez a szám és MIKORI. Ha az adat 2,5 óránál régebbi (két
   kimaradt frissítési kör), figyelmeztetéssé változik — nem adjuk el
   friss adatnak. Ez a 2026-os 9 napos kiesés tanulsága. */
.wag-fresh{
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  font-size:.88rem;color:var(--wag-muted);margin:0 0 1.25rem;line-height:1.5;
}
.wag-fresh__dot{width:8px;height:8px;border-radius:50%;background:var(--wag-accent);flex:0 0 auto}
.wag-fresh strong{color:var(--wag-ink);font-weight:700}
.wag-fresh--stale{
  background:#fffbeb;border:1px solid #fcd34d;border-left:3px solid #f59e0b;
  border-radius:var(--wag-r-row);padding:.65rem .85rem;color:#78350f;
}
.wag-fresh--stale strong{color:#78350f}
.wag-fresh--stale .wag-fresh__dot{background:#f59e0b}

/* =====================================================================
   VÁROSKÁRTYÁK — javítás 2026-07-21 (Andi: "kizárt h levágjuk a város nevét")
   A hiba az enyém volt: 230px-es oszlopokat adtam meg + ellipszist, ezért
   lett "Kézdivá…", "Máramaro…". Egy időjárás-oldalon a VÁROSNÉV a lényeg.
   Szabály innentől: a név SOHA nem csonkul. Inkább kevesebb fér egy sorba.
   A leghosszabb nevek: Sepsiszentgyörgy, Máramarossziget, Kézdivásárhely.
   ===================================================================== */
.wag-cs__ul{
  grid-template-columns:repeat(auto-fill,minmax(310px,1fr));  /* volt: 230px */
  gap:.7rem;
}
.wag-cs__city{
  font-weight:600;font-size:1rem;
  white-space:normal;          /* volt: nowrap  → ez csonkolt */
  overflow:visible;            /* volt: hidden */
  text-overflow:clip;          /* volt: ellipsis */
  line-height:1.25;
}
.wag-cs__head{flex:1;min-width:0}
.wag-cs__item a{align-items:center;gap:1rem;padding:.8rem 1rem;min-height:66px}

/* Az emoji-ikonok kivezetve — helyettük később egységes vonalas SVG jön */
.wag-cs__icon{display:none}

/* Mobilon egy kártya egy sorban: ott a legfontosabb, hogy a név kiférjen */
@media (max-width:420px){
  .wag-cs__ul{grid-template-columns:1fr}
}

/* --- NAPSZAK-FÜGGŐ SVG-IKONOK (.wag-ico) ---
   `currentColor`: felveszik a szövegszínt, tehát hoveren és kiemelésben is
   helyesek. Nem emoji → minden eszközön UGYANÚGY néznek ki. */
.wag-ico{flex:0 0 auto;color:var(--wag-muted);vertical-align:middle}
.wag-cs__item a:hover .wag-ico,
.wag-cs__item a:focus-visible .wag-ico{color:var(--wag-accent)}

/* Frissesség-sáv: a dátum kap hangsúlyt, a "hány perce" halkabb */
.wag-fresh__rel{opacity:.75}

/* =====================================================================
   ESZKÖZ-CSEMPÉK (.wag-tools) — a legjobb CTR-ű belépők
   A Search Console szerint az eszköz-keresés 30–71%-ot hoz, a szöveges
   0,06%-ot. Ezek tehát NEM lábjegyzetbe valók.
   Mobil-first: egy oszlop, 64px magas sorok; tablettől rács.
   ===================================================================== */
.wag-tools{margin:0 0 2.5rem}
.wag-tools__title{
  font-family:var(--wag-font-heading);font-size:clamp(1.3rem,3vw,1.75rem);
  font-weight:700;letter-spacing:-.01em;margin:0 0 1rem;
}
.wag-tools__grid{
  display:grid;grid-template-columns:1fr;gap:.7rem;
}
@media (min-width:560px){ .wag-tools__grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .wag-tools__grid{grid-template-columns:repeat(3,1fr)} }

.wag-tool{
  display:flex;align-items:center;gap:.9rem;
  min-height:72px;padding:.9rem 1rem;
  background:#fff;border:1px solid var(--wag-line);
  border-radius:var(--wag-r-card);
  text-decoration:none;color:var(--wag-ink);
  transition:border-color .15s,background .15s;
}
@media (hover:hover){
  .wag-tool:hover{border-color:var(--wag-accent);background:var(--wag-accent-tint)}
  .wag-tool:hover .wag-tool__ico{color:var(--wag-accent-dark)}
}
.wag-tool:focus-visible{outline:2px solid var(--wag-accent);outline-offset:2px}

.wag-tool__icobox{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:0 0 auto;
  background:var(--wag-accent-tint);border-radius:var(--wag-r-btn);
}
.wag-tool__ico{color:var(--wag-accent);transition:color .15s}
.wag-tool__txt{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.wag-tool__cim{font-weight:700;font-size:1.02rem;line-height:1.25}
.wag-tool__alcim{font-size:.85rem;color:var(--wag-muted);line-height:1.35}

/* ÉLŐ RIASZTÁS: a csempe jelzést kap — de az ANM borostyán színével,
   nem a mi akcentünkkel, mert ez veszélyjelzés (szemantikus szín). */
.wag-tool.is-active{
  border-color:#fcd34d;background:#fffbeb;
}
.wag-tool.is-active .wag-tool__icobox{background:#fef3c7}
.wag-tool.is-active .wag-tool__ico{color:#b45309}
.wag-tool.is-active .wag-tool__alcim{color:#78350f;font-weight:600;text-transform:capitalize}
@media (hover:hover){
  .wag-tool.is-active:hover{border-color:#f59e0b;background:#fef3c7}
}

/* Kompakt mód: link a teljes listára (gyűjtőoldal) */
.wag-cs__more{margin:1.25rem 0 0}
.wag-cs__more a{
  display:inline-flex;align-items:center;gap:.4rem;
  color:var(--wag-accent);font-weight:600;text-decoration:none;font-size:1rem;
}
@media (hover:hover){
  .wag-cs__more a:hover{color:var(--wag-accent-dark);text-decoration:underline}
}

/* "további N figyelmeztetés" link a riasztás-sávban */
.wag-alert__more{color:inherit;font-weight:700;text-decoration:underline;white-space:nowrap}

/* =====================================================================
   ÓRÁS SÁV (.wag-hr) — "mikor áll el az eső"
   Az adat 2026-07-21 óta megvan (hourly-romania.json), de eddig nem
   mutattuk. Az IA-terv szerint EZ hozza vissza naponta az embereket.
   Mobilon vízszintesen görgethető — de a VÁLASZ-MONDAT fölötte szöveg,
   tehát az indexelődik, nem a sáv.
   ===================================================================== */
.wag-hr{margin:0 0 2rem}
.wag-hr__fejlec{margin:0 0 1rem}
.wag-hr__cim{font-family:var(--wag-font-heading);font-size:1.25rem;font-weight:600;
  letter-spacing:-.01em;margin:0 0 .4rem}
.wag-hr__valasz{margin:0;font-size:1.02rem;line-height:1.55;color:var(--wag-ink)}

.wag-hr__sav{
  display:flex;gap:.15rem;overflow-x:auto;padding:.5rem 0 .75rem;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;
}
.wag-hr__ora{
  display:flex;flex-direction:column;align-items:center;gap:.35rem;
  flex:0 0 auto;min-width:52px;padding:.5rem .25rem;
  border-radius:var(--wag-r-row);
}
.wag-hr__ora.is-eso{background:var(--wag-accent-tint)}
.wag-hr__ido{font-size:.78rem;color:var(--wag-muted);font-variant-numeric:tabular-nums}
.wag-hr__ikon{color:var(--wag-muted);line-height:0}
.wag-hr__ora.is-eso .wag-hr__ikon{color:var(--wag-accent)}

/* Hőmérséklet-oszlop: vizuális összehasonlítás egy pillantásra */
.wag-hr__oszlop{width:6px;height:44px;background:var(--wag-line-soft);
  border-radius:3px;display:flex;align-items:flex-end;overflow:hidden}
.wag-hr__toltes{width:100%;background:var(--wag-accent);border-radius:3px;
  transition:height .2s}
.wag-hr__fok{font-size:.9rem;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--wag-ink)}
.wag-hr__pop{font-size:.72rem;color:var(--wag-muted);font-variant-numeric:tabular-nums}
.wag-hr__pop.is-magas{color:var(--wag-accent-dark);font-weight:700}
.wag-hr__labjegyzet{font-size:.78rem;color:var(--wag-muted);margin:.25rem 0 0}

/* =====================================================================
   HIVATALOS ANM-MÉRÉS (.wag-anm) — a mi egyedi értékünk
   MÉRT adat a modellezett előrejelzés mellett. Ilyet magyarul senki más
   nem ad. Ezért kap kiemelt, de nem harsány megjelenést.
   ===================================================================== */
.wag-anm{
  background:#fff;border:1px solid var(--wag-line);
  border-radius:var(--wag-r-card);padding:1.1rem 1.2rem;margin:0 0 2rem;
}
.wag-anm--fo{border-left:3px solid var(--wag-accent)}
.wag-anm__head{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;
  margin:0 0 .9rem;padding-bottom:.6rem;border-bottom:1px solid var(--wag-line-soft)}
.wag-anm__cimke{font-size:.72rem;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--wag-accent-dark)}
.wag-anm__hely{font-size:.88rem;color:var(--wag-muted);font-weight:600}

.wag-anm__adatok{display:flex;align-items:center;gap:1.75rem;flex-wrap:wrap}
.wag-anm__fo-ertek{display:flex;align-items:baseline;gap:.1rem}
.wag-anm__fo-ertek strong{font-size:2.6rem;font-weight:700;line-height:1;
  letter-spacing:-.03em;color:var(--wag-accent);font-variant-numeric:tabular-nums}
.wag-anm__fo-ertek span{font-size:1rem;font-weight:600;color:var(--wag-muted)}

.wag-anm__reszletek{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:.6rem 1.25rem;margin:0;flex:1;min-width:0}
.wag-anm__reszletek dt{font-size:.75rem;color:var(--wag-muted);margin:0}
.wag-anm__reszletek dd{font-size:.98rem;font-weight:600;margin:0;
  font-variant-numeric:tabular-nums}

.wag-anm__labjegyzet{font-size:.8rem;color:var(--wag-muted);line-height:1.5;
  margin:.9rem 0 0;padding-top:.7rem;border-top:1px solid var(--wag-line-soft)}

/* --- OLVASHATÓ SORHOSSZ ---
   Andi (2026-07-22): "ez a sor nem kellene kihúzódjon végig, olyan mintha
   2 oszlop lenne, csak jobb oldalt nincs semmi".
   Tipográfiai szabály: 50-75 karakter soronként a kényelmes olvasáshoz.
   65ch ~ 65 karakter — a hosszú sorok végén a szem elveszíti a következő sor elejét. */
.wag-answer{max-width:65ch}

/* --- WEBKAMERA-BLOKK a városoldalon (.wag-cam) ---
   Link, nem beágyazás: az iframe több száz kB-ot húzna be, a városoldalnak
   pedig gyorsnak kell lennie. A kamera a saját oldalán fut. */
.wag-cam{display:flex;align-items:center;gap:1rem;padding:1rem 1.15rem;margin:0 0 2rem;
  background:#fff;border:1px solid var(--wag-line);border-radius:var(--wag-r-card);
  text-decoration:none;color:var(--wag-ink);min-height:76px;
  transition:border-color .15s,background .15s}
@media (hover:hover){
  .wag-cam:hover{border-color:var(--wag-accent);background:var(--wag-accent-tint)}
  .wag-cam:hover .wag-cam__nyil{transform:translateX(3px)}
}
.wag-cam:focus-visible{outline:2px solid var(--wag-accent);outline-offset:2px}
.wag-cam__ico{display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;flex:0 0 auto;color:var(--wag-accent);
  background:var(--wag-accent-tint);border-radius:var(--wag-r-btn)}
.wag-cam__txt{display:flex;flex-direction:column;gap:.15rem;flex:1;min-width:0}
.wag-cam__cim{font-weight:700;font-size:1.05rem;line-height:1.25}
.wag-cam__alcim{font-size:.88rem;color:var(--wag-muted)}
.wag-cam__nyil{color:var(--wag-accent);font-size:1.25rem;flex:0 0 auto;
  transition:transform .15s}

/* =====================================================================
   FŐMENÜ ÉS ALMENÜ — 2026-07-22
   ---------------------------------------------------------------------
   ELŐTTE (a Customizerből): #222 szöveg #0073F7 kék háttéren = 3,63:1.
   MEGBUKIK a WCAG AA-n (4,5:1 a minimum) — nem csak idegen szín volt,
   hanem nehezen olvasható is.

   A GP a következő színeket használta, mind idegen a rendszertől:
     főmenü háttér    --global-color-9  #0073F7  kék
     almenü hover     --global-color-10 #0088F0  kék
     almenü aktív     --global-color-14 #FFC952  SÁRGA
     aktív szöveg     --contrast        #222222  sötét (a sötét háttéren!)

   UTÁNA:
     főmenü = sötét türkiz (#115e59), fehér szöveg — 7,58:1
     almenü = FEHÉR, tinta szöveg — 16,5:1   (Andi kérése)
     hover és aktív  = türkiz árnyalatok, sehol kék vagy sárga

   MIÉRT a SÖTÉTEBB türkiz a főmenün, és nem a fő akcent (#0f766e):
   a menü nagy, összefüggő felület. Ha a fő akcentet kapná, ugyanaz a szín
   lenne a navigáción és a hőmérséklet-értékeken — a szem nem tudná, hova
   nézzen. Így a menü hordozza az arculatot, a világosabb akcent az ADATÉ.
   ===================================================================== */

/* ── FŐMENÜ ── */
.main-navigation,
.main-navigation ul ul,
.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items { background-color: var(--wag-accent-dark); }

.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items,
.main-navigation .menu-bar-item > a {
  color: #fff;
  font-family: var(--wag-font-body);
  /* A NAGYBETŰSÍTÉS KIVEZETVE: 2010-es stílusjegy, és lassabban olvasható
     (a szem a szóalakot ismeri fel, nem betűnként). */
  text-transform: none;
  letter-spacing: .01em;
  font-weight: 600;
}
@media (hover:hover){
  .main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
  .main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a,
  .main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]) > a,
  .main-navigation .menu-bar-item:hover > a {
    background-color: rgba(255,255,255,.12);
    color: #fff;
  }
}
/* AKTÍV főmenüpont: alsó csík, nem háttérszín */
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
  color: #fff;
  background-color: rgba(255,255,255,.10);
  box-shadow: inset 0 -3px 0 rgba(255,255,255,.85);
}

/* ── ALMENÜ: FEHÉR (Andi kérése) ── */
.main-navigation ul ul,
.main-navigation .main-nav ul ul li a {
  background-color: #fff;
}
.main-navigation ul ul {
  border-radius: 0 0 var(--wag-r-card) var(--wag-r-card);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(15,23,42,.12);
  border: 1px solid var(--wag-line);
  border-top: 0;
}
.main-navigation .main-nav ul ul li a {
  color: var(--wag-ink);
  font-size: .95rem;
  font-weight: 500;
  text-transform: none;
  border-bottom: 1px solid var(--wag-line-soft);
}
.main-navigation .main-nav ul ul li:last-child > a { border-bottom: 0; }

/* ── ALMENÜ SZÉLESSÉGE: a leghosszabb tételhez, ne fordítva ──
   A GP gyári almenü-szélessége 200px (Customizer → Elrendezés → Elsődleges
   navigáció, tehát az ADATBÁZISBAN, amit sosem viszünk fel localról).
   A 20px-es belső térközzel 160px marad a szövegnek, a
   „7 napos időjárás előrejelzés" viszont ~200px-t kér — ezért tört két sorba.

   width:auto + nowrap = a lenyíló pontosan akkora lesz, amekkorát a
   leghosszabb tétele kíván. A max-width azért kell, hogy egy elgépelt hosszú
   menüpont se tudja kilógatni a lenyílót a képernyőből.
   Csak asztali nézetben: mobilon a slideout menü teljes szélességű, azt
   nem bántjuk.

   A min-width: max(100%, 200px) KÉT alsó korlátot ad egyszerre:
     100%  — a szülő <li> szélessége (a lenyíló abszolút pozicionált, a li
             pedig position:relative, tehát a 100% a menügombot jelenti).
             Enélkül az „Erdély városainak időjárása" gomb 272px volt, a
             lenyílója 200px — 72px-szel keskenyebb, mint amiből kinyílt.
             Ez az, amit szemre „keskenynek" látunk: a lenyíló soha ne
             legyen szűkebb a gombnál.
     200px — hogy egy rövid nevű menüpont alatt se legyen csenevész.        */
@media (min-width: 769px) {
  .main-navigation:not(.slideout-navigation) .main-nav ul ul {
    width: auto;
    min-width: max(100%, 200px);
    max-width: 360px;
  }
  .main-navigation:not(.slideout-navigation) .main-nav ul ul li a {
    white-space: nowrap;
  }
}

/* almenü hover és aktív — TÜRKIZ, nem kék és nem sárga */
@media (hover:hover){
  .main-navigation .main-nav ul ul li:not([class*="current-menu-"]):hover > a,
  .main-navigation .main-nav ul ul li:not([class*="current-menu-"]):focus > a,
  .main-navigation .main-nav ul ul li.sfHover:not([class*="current-menu-"]) > a {
    background-color: var(--wag-accent-tint);
    color: var(--wag-accent-dark);
  }
}
.main-navigation .main-nav ul ul li[class*="current-menu-"] > a {
  background-color: var(--wag-accent-tint-2);
  color: var(--wag-accent-dark);
  box-shadow: inset 3px 0 0 var(--wag-accent);
  font-weight: 700;
}

/* ── MOBIL (slideout) MENÜ: ugyanaz a nyelv ── */
.slideout-navigation.main-navigation,
.slideout-navigation.main-navigation ul ul { background-color: var(--wag-accent-dark); }

/* !! A LINK SAJÁT HÁTTERÉT IS VISSZA KELL VENNI !!
   Az asztali „fehér almenü" szabály nem csak a lenyíló DOBOZÁT festi fehérre,
   hanem minden almenü-LINKET is (.main-navigation .main-nav ul ul li a).
   A mobil menüben viszont a szöveg fehér — így fehér lett fehéren:
   1.00:1 kontraszt, a városnevek teljesen láthatatlanok voltak (mérve).
   A doboz háttere önmagában nem elég, a linkeké takarja el.               */
.slideout-navigation.main-navigation .main-nav ul li a,
.slideout-navigation.main-navigation .main-nav ul ul li a {
  background-color: transparent;
  color: #fff;
  text-transform: none;
  font-family: var(--wag-font-body);
}
.slideout-navigation.main-navigation .main-nav ul ul li a { color: rgba(255,255,255,.82); }
.slideout-navigation.main-navigation .main-nav ul li[class*="current-menu-"] > a,
.slideout-navigation.main-navigation .main-nav ul ul li[class*="current-menu-"] > a {
  color: #fff;
  background-color: rgba(255,255,255,.12);
  box-shadow: inset 3px 0 0 rgba(255,255,255,.85);
}

/* Hover a mobilmenüben: VILÁGOS marad.
   Az asztali almenü-hover türkiz szöveget ad (--wag-accent-dark) — az a fehér
   lenyílón jó, de a türkiz mobilmenün ugyanaz a csapda lenne, mint fent:
   türkiz a türkizen. Itt fehér szöveg, halvány fehér derítés a háttérben. */
@media (hover:hover){
  .slideout-navigation.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
  .slideout-navigation.main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a,
  .slideout-navigation.main-navigation .main-nav ul ul li:not([class*="current-menu-"]):hover > a,
  .slideout-navigation.main-navigation .main-nav ul ul li:not([class*="current-menu-"]):focus > a {
    background-color: rgba(255,255,255,.10);
    color: #fff;
  }
}

/* =====================================================================
   FŐOLDAL — page-templates/fooldal.php
   A szakaszok RITMUSA. A régi főoldalon 3 egymás utáni üres térköz-blokk
   adta a tagolást (200 px semmi a lap tetején); itt a térköz a szakaszok
   KÖZÉ kerül, nem eléjük, és egyetlen szabály adja mindet.
   ===================================================================== */
.wag-fo > * + * { margin-top: clamp(2rem, 4vw, 3.5rem); }

/* A lap saját evergreen szövege. Olvasható sorhossz: a mérési adat szerint
   65-75 karakter a kényelmes — a teljes 1176 px-en a szem elveszti a sort. */
.wag-fo__szoveg { max-width: 68ch; }
.wag-fo__szoveg h2 { margin-top: 2rem; }
.wag-fo__szoveg p  { line-height: 1.7; }

/* A friss-cikkek blokk címsora — ugyanaz a hang, mint a többi szakaszcím */
.wag-friss-cim {
  font-family: var(--wag-font-heading);
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  margin: 0 0 1rem;
}

/* A főoldal H1-e. Az alcím ugyanabban a címsorban él (nem külön bekezdés),
   mert a kettő EGY állítás: mit mutatunk és mennyiből. Külön H1+P esetén a
   kereső két különálló elemként olvasná, és az alcím súlytalan lenne. */
.wag-fo__h1 { margin: 0 0 .25rem; }
.wag-fo__h1-alcim {
  display: block;
  font-family: var(--wag-font-body);
  font-size: clamp(.95rem, 1.6vw, 1.15rem);
  font-weight: 400;
  line-height: 1.4;
  color: var(--wag-muted);
  letter-spacing: 0;
  margin-top: .35rem;
}

/* =====================================================================
   FŐOLDAL: A FEJLÉC VISSZAKERÜL A FOLYAMATBA
   ---------------------------------------------------------------------
   A .header-wrap MINDEN oldalon `position: absolute` — ez a "fejléc a
   képre úszik" hatás. A többi oldalon van page-hero (a barna fejléckép),
   ami kitölti alatta a helyet, tehát nem takar el semmit.

   A FŐOLDALON viszont NINCS page-hero. Mérve (2026-07-22):
       .header-wrap   absolute,    0 → 180 px
       H1                         48 → 132 px      ← teljesen a fejléc alatt
   A H1 becsúszott a menü alá, „felszorult" — Andi szúrta ki.

   Megoldás: itt a fejléc kerüljön vissza a normál folyamatba, így a
   tartalom UTÁNA kezdődik, nem ALATTA. A levegőt a .site-content saját
   48 px-es felső térköze adja. A többi oldalt nem érinti.
   ===================================================================== */
body.home .header-wrap { position: static; }

/* =====================================================================
   FŐOLDALI FEJSÁV — a hero-fotó helyett ADAT
   ---------------------------------------------------------------------
   Miért nincs itt kép: mérve, egy 300 px-es hero a hajtás alá tolta volna
   az adatsort (588 → 888 px, 1366×768-as laptopon). A látogató a fűfotót
   látta volna, a hőmérsékletet nem. Helyette ugyanaz a hely az aktuális
   regionális átlagot mutatja.

   A sáv NEM magasabb, mint amit a H1 amúgy is elfoglalt — csak kitölti a
   szélességet, és jobb oldalt hoz egy számot. Így nem tol lejjebb semmit.
   ===================================================================== */
.wag-fo__sav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  flex-wrap: wrap;
  padding: clamp(1.1rem, 2.4vw, 1.8rem) clamp(1.1rem, 2.4vw, 1.8rem);
  background: var(--wag-accent-tint);
  border: 1px solid var(--wag-line-soft);
  border-radius: var(--wag-r-card);
}
.wag-fo__sav .wag-fo__h1 { margin: 0; flex: 1 1 20ch; }

/* A SZÁM. Ez a lap legnagyobb adata — a szín az adaté, nem a felületé. */
.wag-fo__most {
  margin: 0;
  text-align: right;
  flex: 0 0 auto;
  line-height: 1.15;
}
.wag-fo__most-cimke,
.wag-fo__most-alcimke {
  display: block;
  font-size: .82rem;
  font-weight: 500;
  color: var(--wag-muted);
  letter-spacing: .01em;
}
.wag-fo__most-ertek {
  display: block;
  font-family: var(--wag-font-heading);
  font-size: clamp(2.2rem, 5.5vw, 3.2rem);
  font-weight: 600;
  color: var(--wag-accent);
  letter-spacing: -.02em;
  margin: .1rem 0;
}

/* Mobilon a szám a cím ALÁ kerül, balra zárva — jobbra zárt nagy szám
   keskeny kijelzőn elszakad a címtől, és „lebegőnek” hat. */
@media (max-width: 600px) {
  .wag-fo__sav { flex-direction: column; align-items: flex-start; gap: .9rem; }
  .wag-fo__most { text-align: left; }

  /* !! A flex-basis IRÁNYT VÁLT !!
     Sor-irányban a `flex: 1 1 20ch` a SZÉLESSÉGRE vonatkozik — ott ez a kívánt
     viselkedés. Oszlop-irányban viszont a fő tengely a függőleges, tehát
     ugyanaz a 20ch MAGASSÁG lesz, ráadásul a flex-grow:1 még nyújtja is.
     Emiatt a sáv 375 px-en 471 px magasra hízott — a képernyő 58%-a — mérve.
     Oszlopban tehát a tartalom szabja meg a magasságot, semmi más. */
  .wag-fo__sav .wag-fo__h1 { flex: 0 0 auto; }
}

/* =====================================================================
   A TÖRZSSZÖVEG BETŰJE — 2026-07-22
   ---------------------------------------------------------------------
   MÉRT HIBA: a Source Sans 3 LETÖLTŐDÖTT (188 kB), de a folyószöveg a GP
   rendszerbetűjére esett vissza. Mérve a főoldalon:
       H1, H2, nagy szám ... Source Serif 4   ✔
       body, bekezdés, csempefelirat ... -apple-system   ✗

   MIÉRT: a betűbeállítást egy szűrő írja át a GP Customizer-értékein, de
   az csak a MÁR LÉTEZŐ szabályokat módosítja. A `body` szabály nincs a
   mentett beállítások közt, tehát nem volt mit átírni. A címsorok nem
   ettől jók — azokat ez a fájl mondja ki külön (lásd a betűskálát fent).

   Tanulság: ami az adatbázisban él, arra nem építünk. Amit látni akarunk,
   azt kódból mondjuk ki.

   `html body`: a GP saját `body{font-family:…}` szabálya azonos fajsúlyú,
   tehát a betöltési sorrend döntene. Egy elemmel több biztosra megy.
   ===================================================================== */
html body,
button, input, select, textarea, optgroup {
  font-family: var(--wag-font-body);
}

/* A címsorok maradnak szerifesek — ezt fent már kimondtuk, itt csak azért
   ismételjük meg, hogy a fenti `html body` nagyobb fajsúlya ne írja felül. */
html body h1, html body h2, html body h3,
html body .wag-fo__most-ertek {
  font-family: var(--wag-font-heading);
}

/* =====================================================================
   VÁROSGYŰJTŐ OLDAL — page-templates/varosgyujto.php
   Ugyanaz a ritmus, mint a főoldalon: a térköz a szakaszok KÖZÉ kerül.
   ===================================================================== */
.wag-varosgyujto > * + * { margin-top: clamp(2rem, 4vw, 3.5rem); }
.wag-varosgyujto__szoveg { max-width: 68ch; }
.wag-varosgyujto__szoveg h2 { margin-top: 2rem; }
.wag-varosgyujto__szoveg p  { line-height: 1.7; }

/* =====================================================================
   HOVER: A SAJÁT KOMPONENSEINK NEM ESHETNEK VISSZA A GP KÉKJÉRE
   ---------------------------------------------------------------------
   MÉRT HIBA (2026-07-22, Andi szúrta ki az eszköz-csempén):
   a GP Customizer-CSS-e ezt adja ki inline, a fejlécben:
       a:hover, a:focus, a:active { color: var(--global-color-10) }
       --global-color-10 = #0088F0   (élénk kék)
   Ez MINDEN linkre ráül. A saját komponenseink is <a> elemek, tehát a
   türkiz csempe címe hoverkor kékre váltott — „zöldön kék”.

   A 3. blokk (LINKEK ÉS GOMBOK) fent csak `.entry-content a`-t kezeli.
   A csempék, csipeszek és kártyák viszont SABLONBÓL jönnek, tehát az
   .entry-content-en KÍVÜL vannak — oda nem ért el.

   MIÉRT NEM A CUSTOMIZERBEN ÁLLÍTJUK: az az ADATBÁZISBAN él, amit sosem
   viszünk fel localról élesre. Ugyanaz a csapda, mint a #main hasábolás,
   a szürke árnyékok, az almenü szélessége és a törzsbetű esetében.
   Amit látni akarunk, azt kódból mondjuk ki.
   ===================================================================== */
.wag-tool:hover, .wag-tool:focus,
.wag-tool:hover .wag-tool__cim, .wag-tool:focus .wag-tool__cim,
.wag-cs__chip:hover, .wag-cs__chip:focus,
.wag-cs__more a:hover, .wag-cs__more a:focus,
.wag-cs__item a:hover, .wag-cs__item a:focus,
.wag-cam:hover, .wag-cam:focus,
.h7-varos:hover, .h7-varos:focus {
  color: var(--wag-accent-dark);
}

/* Az ikon és a másodlagos szöveg NE váltson színt: a hover jelzés, nem
   ünneplés. Ha minden elem egyszerre színez, a csempe „villog”. */
.wag-tool:hover .wag-tool__alcim,
.wag-tool:focus .wag-tool__alcim {
  color: var(--wag-muted);
}

/* A keret jelzi az aktív állapotot — ez a design-rendszer nyelve
   (ugyanaz, mint a cikk-kártyáknál). */
.wag-tool:hover, .wag-tool:focus,
.wag-cs__chip:hover, .wag-cs__chip:focus {
  border-color: var(--wag-accent);
}

/* A hosszú evergreen szövegblokkok VÍZSZINTES KÖZÉPRE zárása.
   Eddig 68ch szélesen a bal szélhez tapadtak, és jobbra ~40% üresség maradt —
   a lap „féloldalasnak” hatott (Andi: „bele tudod tördelni jobban”).
   A 68ch marad: az olvasható sorhossz nem stílus kérdése, hanem szemmozgásé.
   Csak a blokk kerül középre, így a térköz kétoldalt egyenlő. */
.wag-fo__szoveg,
.wag-varosgyujto__szoveg { margin-inline: auto; }

/* A szakaszcím a szöveg BAL szélére igazodik, nem a lap közepére: középre
   zárt címsor + balra zárt szöveg alatta törött tengelyt ad. */
.wag-fo__szoveg > h2,
.wag-varosgyujto__szoveg > h2 { text-align: left; }

/* =====================================================================
   KIVEZETETT SZOLGÁLTATÁS — őszinte közlés állott adat helyett
   A magyar ág leállításakor a /magyarorszag-idojaras/ oldal tetején.
   Borostyán, nem piros: ez nem VESZÉLY, hanem tájékoztatás. A piros a
   riasztásoké marad (ANM-fokozat), azt nem hígítjuk.
   ===================================================================== */
.wag-kivezetve {
  max-width: 68ch;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  padding: clamp(1.2rem, 3vw, 2rem);
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-left: 4px solid #d97706;
  border-radius: var(--wag-r-card);
}
.wag-kivezetve h1 { margin: 0 0 1rem; }
.wag-kivezetve p  { line-height: 1.65; margin: 0 0 1rem; }
.wag-kivezetve__fo { font-size: 1.05rem; }
.wag-kivezetve__jegyzet { font-size: .92rem; color: var(--wag-muted); margin-bottom: 0; }
.wag-kivezetve__gomb {
  display: inline-block;
  background: var(--wag-accent);
  color: #fff !important;
  padding: .6rem 1.2rem;
  border-radius: var(--wag-r-btn);
  font-weight: 600;
  text-decoration: none;
}
.wag-kivezetve__gomb:hover { background: var(--wag-accent-dark); color: #fff !important; }
.wag-kivezetve__cim { margin: 0 0 1rem; font-size: clamp(1.3rem, 2.6vw, 1.7rem); }

/* =====================================================================
   404 — MENTŐÖV
   A korábbi 404 véletlen városokat ajánlott. Ez kitalálja a kért URL-ből,
   mit kerestek, és azt kínálja fel — élő hőmérséklettel.
   ===================================================================== */
.wag-404 { max-width: 1176px; margin: 0 auto; padding: clamp(1.5rem,4vw,3rem) 1rem 4rem; }
.wag-404__cim { margin: 0 0 .75rem; }
.wag-404__vezeto { font-size: 1.05rem; line-height: 1.6; max-width: 62ch; color: var(--wag-muted); margin: 0 0 1.5rem; }

.wag-404__tippek { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0 0 2rem; }
.wag-404__tipp {
  display: inline-flex; align-items: baseline; gap: .6rem;
  padding: .7rem 1.1rem;
  background: #fff;
  border: 1px solid var(--wag-line);
  border-radius: var(--wag-r-btn);
  text-decoration: none;
  transition: border-color .2s ease;
}
.wag-404__tipp:hover, .wag-404__tipp:focus { border-color: var(--wag-accent); }
.wag-404__tipp-nev   { font-weight: 600; color: var(--wag-ink); }
.wag-404__tipp-ertek { font-weight: 700; color: var(--wag-accent); }

.wag-404 .search-form { max-width: 62ch; margin: 0 0 2.5rem; }

/* =====================================================================
   KERESŐ-TALÁLAT
   ===================================================================== */
.wag-kereses { max-width: 1176px; margin: 0 auto; padding: clamp(1.5rem,4vw,3rem) 1rem 4rem; }
.wag-kereses__cim { margin: 0 0 .5rem; }
.wag-kereses__db { color: var(--wag-muted); margin: 0 0 2rem; }
.wag-kereses .search-form { max-width: 62ch; margin: 0 0 2.5rem; }
.wag-kereses__nincs { max-width: 62ch; line-height: 1.65; }

/* Forrás-jegyzet: honnan az adat, milyen gyakran frissül, mérés-e vagy modell.
   Halk, de olvasható — nem apróbetűs kimentés, hanem tisztázás. */
.wag-forras-jegyzet {
  max-width: 68ch;
  margin: 1rem auto 0;
  padding: .9rem 1.1rem;
  background: var(--wag-accent-tint);
  border-left: 3px solid var(--wag-accent);
  border-radius: var(--wag-r-row);
  font-size: .92rem;
  line-height: 1.6;
  color: var(--wag-ink);
}

/* =====================================================================
   ESŐRADAR — [radar] rövidkód
   ===================================================================== */
.wag-radar { margin: 0 0 clamp(2rem,4vw,3rem); }
.wag-radar__cim { margin: 0 0 1rem; }
/* A gombok a TÉRKÉP ALATT (margó fölülre került, nem alulra). */
.wag-radar__gombok { display: flex; flex-wrap: wrap; gap: .5rem; margin: .9rem 0 0; }
.wag-radar__gomb {
  background: #fff;
  border: 1px solid var(--wag-line);
  border-radius: var(--wag-r-btn);
  padding: .5rem .95rem;
  font-family: var(--wag-font-body);
  font-size: .92rem;
  font-weight: 600;
  color: var(--wag-ink);
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
.wag-radar__gomb:hover { border-color: var(--wag-accent); }
.wag-radar__gomb[aria-pressed="true"] {
  background: var(--wag-accent);
  border-color: var(--wag-accent);
  color: #fff;
}
/* ⬜ A KÉK FÓKUSZ-GYŰRŰ (Andi jelezte 2026-07-26) — MÉG NINCS MEGOLDVA.
   KÉT NEKIFUTÁS UTÁN VISSZAÁLLÍTVA, mert a javításom ROSSZABB volt: a
   „Csapadék" gomb fehér szöveget kapott fehér alapon.

   AMIT KÖZBEN MEGTUDTAM, és a következő nekifutás ebből induljon:
   • a kék NEM az aktív állapotból jön — az már márkaszínű (`--wag-accent`)
   • a látvány NEM követi az `aria-pressed`-et: mérve „Esőradar" pressed=false
     mellett accent-zöld hátterű, „Csapadék" pressed=true mellett fehér.
     Tehát a színt valami MÁS adja (JS-osztály vagy inline stílus), nem az
     attribútum — ezért nem fogott az attribútumra írt szabályom.
   • ELŐSZÖR az inc/radar.php JS-ét kell elolvasni, hogy MI állítja a
     kiemelést, és arra kell írni a szabályt. CSS-ből tippelni itt nem megy. */
/* Letiltott réteg (fejlesztői gépen, kulcs nélkül): halvány, nem kattintható,
   de LÁTSZIK — így az éles elrendezés fejlesztőként is ellenőrizhető. */
.wag-radar__gomb:disabled {
  opacity: .45;
  cursor: not-allowed;
  border-style: dashed;
}
.wag-radar__gomb:disabled:hover { border-color: var(--wag-line); }
.wag-radar__terkep {
  width: 100%;
  border: 1px solid var(--wag-line);
  border-radius: var(--wag-r-card);
  overflow: hidden;
}
.wag-radar__jegyzet { font-size: .85rem; color: var(--wag-muted); margin: .8rem 0 0; }

/* =====================================================================
   ÉLŐ HŐMÉRSÉKLET-TÉRKÉP — [homerseklet_terkep] rövidkód
   ---------------------------------------------------------------------
   Saját Leaflet-térkép a városok MÉRT fokával. A marker egy színezett
   „pin" (fok) + halvány városnév. Az adat MAGA a link. A Leaflet divIcon
   alapból kap egy fehér dobozt/keretet — azt semlegesíteni kell, hogy csak
   a mi pin-ünk látsszon.
   ===================================================================== */
.wag-homap { margin: 0 0 clamp(2rem,4vw,3rem); }
.wag-homap__cim { margin: 0 0 1rem; }
.wag-homap__terkep {
  width: 100%;
  /* A magasságot a rövidkód adja `--homap-mag`-ként, hogy MOBILON felülírhassuk.
     Mérve: 460 px a 812 px-es telefonképernyő 57%-a volt — túl sok egy olyan
     oldalon, ahol a látogatók 85%-a mobilos. */
  height: var(--homap-mag, 460px);
  border: 1px solid var(--wag-line);
  border-radius: var(--wag-r-card);
  overflow: hidden;
  background: #eef1f4;   /* amíg a csempék töltődnek, ne villanjon fehéret */
  /* A Leaflet a vezérlőit z-index:1000-re teszi, ami a lap szintjén a lenyíló
     menü FÖLÉ kerülne. A position+z-index SAJÁT stacking-kontextusba zárja a
     térkép egész belsejét, így a fejléc menüje mindig fölötte marad. */
  position: relative;
  z-index: 0;
}
.wag-homap__labl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1.1rem;
  margin: .8rem 0 0;
}
.wag-homap__jelmagy { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.wag-homap__jelmagy span {
  font-size: .78rem;
  font-weight: 700;
  color: #fff;
  padding: .12rem .5rem;
  border-radius: 999px;
  line-height: 1.5;
}
.wag-homap__jegyzet { font-size: .85rem; color: var(--wag-muted); }

/* A Leaflet divIcon dobozának semlegesítése + a saját pin. */
.wag-homap__marker { background: none !important; border: 0 !important; }
.wag-homap__marker .wag-homap__pin {
  display: inline-block;
  transform: translate(-50%, -50%);
  font-family: var(--wag-font-body);
  font-size: .92rem;
  font-weight: 800;
  line-height: 1;
  padding: .28rem .5rem;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
  white-space: nowrap;
  cursor: pointer;
}
.wag-homap__marker .wag-homap__nev {
  display: block;
  transform: translate(-50%, .1rem);
  margin-top: .1rem;
  font-family: var(--wag-font-body);
  font-size: .72rem;
  font-weight: 700;
  color: var(--wag-ink);
  text-align: center;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
  white-space: nowrap;
  pointer-events: none;
}

/* =====================================================================
   SZÁMÍTOTT ADATBLOKK — [adat_blokk] rövidkód
   ---------------------------------------------------------------------
   Három adatvezérelt kártya (szélsőségek / változás / holnap). Nagy szám =
   horog, a mondat = a fogás. A napi sablon-feed HELYETT a főoldalon.
   ===================================================================== */
.wag-adatb { margin: 0 0 clamp(2rem,4vw,3rem); }
.wag-adatb__cim { font-size: clamp(1.15rem,2.5vw,1.5rem); font-weight: 700;
  margin: 0 0 1rem; color: var(--wag-ink); }
.wag-adatb__racs {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .wag-adatb__racs { grid-template-columns: repeat(3, 1fr); } }
.wag-adatb__kartya {
  background: var(--wag-paper, #f6f7f9);
  border: 1px solid var(--wag-line);
  border-left: 4px solid var(--wag-accent);
  border-radius: 0 var(--wag-r-card) var(--wag-r-card) 0;
  padding: 1.1rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.wag-adatb__fej {
  font-size: .82rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--wag-muted);
}
.wag-adatb__nagy {
  font-family: var(--wag-font-heading);
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 800;
  line-height: 1;
  color: var(--wag-ink);
}
.wag-adatb__nagy.is-meleg { color: #d1443a; }
.wag-adatb__nagy.is-hideg { color: #2c6fb3; }
.wag-adatb__nagy-ikon { display: inline-flex; align-items: center; gap: .5rem; }
.wag-adatb__nagy--mellette { font-size: clamp(1.8rem, 3.5vw, 2.3rem); }
.wag-adatb__szoveg { font-size: .98rem; line-height: 1.55; color: var(--wag-ink); }
.wag-adatb__szoveg strong { font-weight: 700; }

/* GYORS TOVÁBBVEZETÉS a térkép alatt — prominens, de nyugodt link-sor.
   A látogató a térkép megtekintése után azonnal talál irányt. */
.tk-gyorslink {
  margin: var(--gap, 2rem) 0 0;
  padding: 1rem 1.25rem;
  border-radius: var(--wag-r-card);
  background: var(--wag-paper, #f6f7f9);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--wag-ink);
}
.tk-gyorslink a { color: var(--wag-accent-dark, var(--wag-accent)); font-weight: 600; text-decoration: none; }
.tk-gyorslink a:hover, .tk-gyorslink a:focus-visible { text-decoration: underline; }

/* =====================================================================
   CIKK-KÁRTYÁK — közös, nyugodt komponens
   ---------------------------------------------------------------------
   Andi (2026-07-23): a mai-idojaras cikklistája „cifralila" volt —
   gradiens címek, emoji-badge orgia („🔥 Legfrissebb", „📖 Teljes
   jelentés"), lila kiemelt kártya. A korábbi terv is ezt írta:
   „Clickbait-badge-ek ki, emoji-diéta".
   Ez a komponens a kép + cím + dátum + kivonat négyesre épül. A KÉP most
   már van (kiemelt kép a generátorból), tehát nem üres a kártya. Ugyanaz
   a nyelv, mint a holnapi oldal cikk-kártyáié — a kettőt később egy
   osztály alá lehet vonni.
   ===================================================================== */
.wag-cikkek {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  margin: 0 0 1.5rem;
}
.wag-cikk {
  display: flex;
  flex-direction: column;
  border-radius: var(--wag-r-card);
  overflow: hidden;
  border: 1px solid var(--wag-line);
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.wag-cikk:hover, .wag-cikk:focus-visible {
  border-color: var(--wag-accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
}
.wag-cikk__kep {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--wag-paper, #f1f5f9) center/cover no-repeat;
}
.wag-cikk__test { display: block; padding: 1rem 1.1rem 1.15rem; }
.wag-cikk__cimke {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--wag-accent-dark, var(--wag-accent));
  margin: 0 0 .4rem;
}
.wag-cikk__cim {
  display: block;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.35;
  margin: 0 0 .35rem;
  color: var(--wag-ink);
}
/* TÉMÁBA VÁGÓ CIKKEK egy adatoldal alján (2026-07-26). A térkép megmutatja,
   mi van MOST; a cikk elmondja, mit JELENT. Lásd inc/tema-cikkek.php. */
.wag-tema-cikkek { margin: 3rem 0 0; }
.wag-tema-cikkek__cim {
  font-family: var(--wag-font-heading);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0 0 1.25rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--wag-line);
}

/* =====================================================================
   GYŰJTŐ-ARCHÍVUMOK — EGYSÉGES ELRENDEZÉS (2026-07-26)
   ---------------------------------------------------------------------
   Andi: „a gyűjtők mindig másképp néznek ki, ez a legszebb ami a Tudáson
   renderel, nem lehetne az összes ilyen?"

   A régi `.archive #main { display:grid; grid-template-columns:
   repeat(auto-fit, minmax(400px,1fr)) }` a januári archívum-kártyákhoz
   készült. Azóta MI rajzoljuk a rácsot (`.wag-cikkek`), így a `#main`
   gridje már nem elrendez, hanem SZÉTVÁGJA a sajátunkat: a leírás, az
   összefoglaló, a kártyarács és a záró blokk külön cellába esik, a rács
   pedig fél szélességre szorul. Emiatt függött a gyűjtő kinézete attól,
   hány gyereke van épp a `#main`-nek — ezért nézett ki mindegyik máshogy.

   Itt a `#main` visszakapja a természetes blokk-viselkedést: minden
   szekció teljes szélességű, a kártyarács maga tördel 3 oszlopra.
   Az `overflow: visible` is kell: a régi szabály `hidden`-t adott, ami
   levágná a kártya hover-árnyékát.
   ===================================================================== */
body.wag-kat-gyujto #main {
  display: block;
  overflow: visible;
}
body.wag-kat-gyujto #main > * {
  margin-bottom: 2rem;
}
body.wag-kat-gyujto #main > *:last-child {
  margin-bottom: 0;
}

/* A CÍM MINT HEADING (2026-07-26). Widgetben `<span>` a helyes, ARCHÍVUMON
   viszont a cikkcím valódi címsor: a képernyőolvasót használók címsorok között
   ugrálva navigálnak egy listában, és egy 10 elemű archívum címsorok nélkül
   egyetlen ömlesztett blokk. A téma h2-je viszont hozná a saját méretét és
   margóját, ami szétnyomná a kártyát — ezért itt semlegesítjük. */
h2.wag-cikk__cim, h3.wag-cikk__cim {
  font-size: 1.05rem;
  line-height: 1.35;
  font-weight: 600;
  margin: 0 0 .35rem;
  padding: 0;
  font-family: inherit;
}
.wag-cikk__datum { display: block; font-size: .78rem; color: var(--wag-muted); margin: 0 0 .5rem; }
.wag-cikk__kivonat { display: block; font-size: .92rem; line-height: 1.55; color: var(--wag-muted); }
.wag-cikkek__labjegyzet { font-size: .85rem; color: var(--wag-muted); margin: 0; }

/* =====================================================================
   MÁS VÁROSOK — chip-lista a lap alján (a régi kék pirula-gombok helyett)
   ---------------------------------------------------------------------
   A városoldalak és az előrejelzés-oldalak alján jelenik meg (a
   the_content szűrőből, functions.php). A szomszédság a proximity_map-ből
   jön — a nézett város közeli városait kínálja fel elsőként.
   Andi (2026-07-23): „legyen hova tovább kattintani, DE a mi dizájnunkkal".
   ===================================================================== */
.wag-varos-tovabb {
  margin: 2.5rem 0 0;
  padding: 1.5rem;
  border-radius: var(--wag-r-card);
  background: var(--wag-paper, #f6f7f9);
}
.wag-varos-tovabb__cim { font-size: 1.15rem; font-weight: 700; margin: 0 0 1rem; color: var(--wag-ink); }
.wag-varos-tovabb__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.wag-varos-tovabb__elem {
  display: inline-flex; align-items: baseline; gap: .4rem;
  padding: .55rem .9rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--wag-line);
  text-decoration: none; color: var(--wag-ink);
  font-weight: 600; font-size: .92rem;
  transition: border-color .15s ease, transform .15s ease;
}
.wag-varos-tovabb__elem:hover, .wag-varos-tovabb__elem:focus-visible {
  border-color: var(--wag-accent); transform: translateY(-1px);
  color: var(--wag-ink);   /* a GP kék a:hover felülírása — a chip szövege marad sötét */
}
.wag-varos-tovabb__elem:hover .wag-varos-tovabb__regio { color: var(--wag-muted); }
.wag-varos-tovabb__regio { font-size: .78rem; font-weight: 400; color: var(--wag-muted); }

/* =====================================================================
   ELŐREJELZÉS-VÁLASZTÓ (.eh-valaszto) — közös komponens
   A hub kategóriában, a figyelmeztetés és az agrár oldalon egyaránt: mai /
   holnapi / 7-15-30 napos / figyelmeztetés választó. wag_elorejelzes_valaszto().
   ===================================================================== */
.eh-valaszto{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));margin:0 0 2rem}
.eh-kartya{display:flex;align-items:center;gap:.9rem;padding:1rem 1.15rem;
  border:1px solid var(--wag-line);border-radius:var(--wag-r-card);background:#fff;
  text-decoration:none;color:var(--wag-ink);
  transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.eh-kartya:hover,.eh-kartya:focus-visible{border-color:var(--wag-accent);transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.07)}
.eh-kartya__cimke{flex:0 0 auto;min-width:2.6rem;height:2.6rem;display:flex;align-items:center;justify-content:center;
  border-radius:999px;background:var(--wag-paper,#f1f5f9);font-weight:700;font-size:.82rem;
  color:var(--wag-accent-dark,var(--wag-accent));text-align:center;line-height:1.1;padding:.2rem}
.eh-kartya__fo{min-width:0}
.eh-kartya__nev{display:block;font-weight:600;font-size:1.02rem;color:var(--wag-ink)}
.eh-kartya__kerdes{display:block;font-size:.85rem;color:var(--wag-muted)}
.eh-kartya--riaszt .eh-kartya__cimke{background:#fef3c7;color:#b45309}
.eh-valaszto__cim{font-size:clamp(1.15rem,2.5vw,1.5rem);font-weight:700;margin:0 0 1rem;color:var(--wag-ink)}
/* Térkép-chip sor — a hub, agrár és figyelmeztetés oldalon. */
.eh-terkepek{display:flex;flex-wrap:wrap;gap:.5rem}
.eh-terkep{display:inline-block;padding:.5rem .9rem;border-radius:999px;border:1px solid var(--wag-line);
  background:#fff;text-decoration:none;color:var(--wag-ink);font-weight:600;font-size:.9rem;transition:border-color .15s ease}
.eh-terkep:hover,.eh-terkep:focus-visible{border-color:var(--wag-accent)}

/* =====================================================================
   ÓRÁS ELŐREJELZÉS-SÁV (.wag-oras) — „mikor áll el az eső"
   A főoldal és a városoldal kulcs eleme. Vízszintes sáv, óránként egy
   oszlop, a MOST kiemelve, csapadékos óra jelölve. Mobilon vízszintesen
   görgethető — az oldal maga sosem törik szét.
   ===================================================================== */
.wag-oras { margin: 0 0 1.5rem; }
.wag-oras__horog {
  margin: 0 0 .75rem; padding: .6rem .9rem; border-radius: var(--wag-r-btn,10px);
  background: var(--wag-paper,#f6f7f9); font-size: .95rem; color: var(--wag-ink);
}
.wag-oras__horog strong { color: var(--wag-accent-dark,var(--wag-accent)); }
/* =====================================================================
   ⚠️⚠️ A VÍZSZINTES SZÉTESÉS VALÓDI OKA (2026-07-26, élesben derült ki)
   ---------------------------------------------------------------------
   Andi: „az ANM sáv mindenütt óriási jobbra görgetést csinál, szét van esve
   az összes aloldal" + „az órás nézet is szét van esve".

   AZ OK NEM AZ ÓRÁS SÁV ÉS NEM A RIASZTÁS-SÁV — hanem a GeneratePress
   `.site-content{display:flex}`-e. A `.vo` FLEX-ELEM, és a flex-elem nem
   zsugorodik a tartalma min-content mérete alá. Az órás sáv 12 csempéje
   adja ezt a minimumot, tehát az EGÉSZ LAP szélesedik ki — nem a sáv görög.

   MÉRVE, EGYESÉVEL PRÓBÁLVA (375px nézet, kiindulás 888px):
     .vo{min-width:0}              → 888  ✗
     .site-content>*{min-width:0}  → 888  ✗
     .wag-oras__sav{min-width:0}   → 888  ✗
     .site-content{display:block}  → 375  ✓  ← EGYEDÜL EZ

   Ezért kerestem ma délután hiába: a burkolókat és a `min-width`-eket
   próbáltam, miközben a konténer MEGJELENÍTÉSI MÓDJA volt a baj.

   MIÉRT BIZTONSÁGOS: mérve `body.no-sidebar`, oldalsáv-elem sehol, a
   `.site-content`-nek egyetlen valódi gyereke van. A szabályt mégis a
   `no-sidebar` esetre szűkítjük — ha valaha lesz oldalsáv, a GeneratePress
   flex-elrendezése érintetlen marad.
   ===================================================================== */
/* ⚠️ NEM `body.no-sidebar`-ra SZŰKÍTVE — ez majdnem hatástalan javítás lett.
   Mérve: az EGYEDI SABLONOK (avertizare, het-napos, idojaras-varos-v2,
   mai-idojaras) body-ja NEM tartalmazza a `no-sidebar` osztályt — csak a
   `page-template-*`-ot. Vagyis pont a széteső lapokon nem fogott volna.
   (Ugyanez okozza a fehér mobil menüt is azokon a lapokon: a GeneratePress
   navigációs body-osztályai hiányoznak, tehát a téma alapszíne érvényesül.)
   Ezért a szabály a `.site-content`-re megy, és az OLDALSÁVOS esetet zárjuk
   ki külön — így nem lehet olyan lap, ami kimarad belőle. */
.site-content { display: block; }
body.right-sidebar .site-content,
body.left-sidebar .site-content,
body.both-sidebars .site-content,
body.both-left .site-content,
body.both-right .site-content { display: flex; }

/* Az alábbi kettő ezután már csak öv és nadrágtartó — a sáv befogása
   akkor is helyes, ha a konténer egyszer megint flex lesz. */
/* ⚠️ VÍZSZINTES SZÉTESÉS JAVÍTÁSA (2026-07-26, élesben derült ki).
   A görgethető sáv `overflow-x:auto`-val KÉSZÜLT, de `min-width:0` nélkül a
   flex/grid gyerek NEM zsugorodik a tartalma alá — ezért nem a sáv görgött,
   hanem az EGÉSZ LAP. Mérve: városoldal 888px a 375-ös nézetben.
   A `.wag-oras` burkoló `overflow:hidden`-je a biztos fogás: a lapot befogja,
   a sáv BELÜL viszont továbbra is görgethető, tehát adat nem vész el. */
.wag-oras { max-width: 100%; min-width: 0; overflow: hidden; }
.wag-oras__sav {
  display: flex; gap: .4rem; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: .25rem .1rem .6rem; scroll-snap-type: x proximity;
  min-width: 0; max-width: 100%;
}
.wag-oras__ora {
  flex: 0 0 auto; min-width: 4rem; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .7rem .5rem; border-radius: var(--wag-r-card);
  border: 1px solid var(--wag-line); background: #fff; text-align: center;
}
.wag-oras__ora.is-most { border-color: var(--wag-accent); background: var(--wag-accent-tint, #ecfdf5); }
.wag-oras__ido { font-size: .78rem; font-weight: 600; color: var(--wag-muted); }
.wag-oras__ora.is-most .wag-oras__ido { color: var(--wag-accent-dark,var(--wag-accent)); }
.wag-oras__ikon { font-size: 1.35rem; line-height: 1; }
.wag-oras__fok { font-size: 1.05rem; font-weight: 700; color: var(--wag-ink); font-variant-numeric: tabular-nums; }
.wag-oras__eso { font-size: .72rem; font-weight: 700; color: #0369a1; min-height: 1em; }
.wag-oras__eso--ures { color: transparent; }
.wag-oras__elavult { margin: .4rem 0 0; font-size: .78rem; color: var(--wag-muted); font-style: italic; }

/* =====================================================================
   ÚTICÉL-CSEMPÉK (.wag-uticel) — a főoldal turista-fele
   „Hova jössz Erdélybe?" — Gyilkos-tó, Transzfogaras, Torockó… Nagy
   hőmérséklet (horog), a csempe maga a link. A kék hover a globális
   szabályból már rendezve (a lista-linkek nem válnak kékké).
   ===================================================================== */
.wag-uticel { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.wag-uticel__csempe {
  display: flex; flex-direction: column; gap: .4rem; padding: 1rem 1.15rem;
  border: 1px solid var(--wag-line); border-radius: var(--wag-r-card); background: #fff;
  text-decoration: none; color: var(--wag-ink);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.wag-uticel__csempe:hover, .wag-uticel__csempe:focus-visible {
  border-color: var(--wag-accent); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.07);
}
.wag-uticel__fej { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.wag-uticel__jobb { display: inline-flex; align-items: center; gap: .35rem; flex: 0 0 auto; }
.wag-uticel__ikon { display: inline-flex; color: var(--wag-accent-dark, var(--wag-accent)); }
.wag-uticel__ikon svg { display: block; }
.wag-uticel__nev { font-weight: 700; font-size: 1.08rem; color: var(--wag-ink); }
.wag-uticel__fok { font-size: 1.6rem; font-weight: 800; color: var(--wag-accent-dark, var(--wag-accent)); font-variant-numeric: tabular-nums; line-height: 1; }
.wag-uticel__leiras { font-size: .88rem; line-height: 1.5; color: var(--wag-muted); }
.wag-uticel__labl { display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: center; margin-top: .15rem; }
.wag-uticel__varos { font-size: .8rem; color: var(--wag-muted); }
.wag-uticel__kamera { font-size: .8rem; font-weight: 600; color: var(--wag-accent-dark, var(--wag-accent)); }

/* =====================================================================
   TÁBLÁZATOK — cikkekben és oldalakon (wp-block-table + sima <table>)
   ---------------------------------------------------------------------
   Andi (2026-07-23): „a táblázat legyen középre zárva". A cikkekben lévő
   táblázatok (pl. régiós hőmérséklet-táblák) eddig a böngésző alapstílusát
   kapták — balra zárva, csupasz kerettel. Ez a globális stílus mindet
   egyszerre hozza a mi dizájnunkba: középre zárt, olvasható, és MOBILON
   VÍZSZINTESEN GÖRGETHETŐ, hogy soha ne törje szét az oldalt.
   ===================================================================== */
.entry-content .wp-block-table,
.entry-content > figure.wp-block-table,
.vo-szoveg .wp-block-table,
.hn-szoveg .wp-block-table {
  margin-inline: auto;            /* középre zárás */
  max-width: 100%;
  overflow-x: auto;               /* mobil: a táblázat görög, nem az oldal */
  -webkit-overflow-scrolling: touch;
}
.entry-content table,
.vo-szoveg table,
.hn-szoveg table,
.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
  background: #fff;
  border: 1px solid var(--wag-line);
  border-radius: var(--wag-r-card);
  overflow: hidden;               /* a lekerekítés érvényesüljön a fejlécen is */
}
.entry-content thead th,
.vo-szoveg thead th,
.wp-block-table thead th {
  background: var(--wag-paper, #f1f5f9);
  color: var(--wag-ink);
  font-weight: 700;
  text-align: left;
  padding: .7rem .9rem;
  border-bottom: 2px solid var(--wag-line);
}
.entry-content td,
.entry-content th,
.vo-szoveg td, .vo-szoveg th,
.wp-block-table td, .wp-block-table th {
  padding: .6rem .9rem;
  border-bottom: 1px solid var(--wag-line);
  vertical-align: top;
}
/* Zebracsíkozás — nagy táblázatnál segíti a sorkövetést. */
.entry-content tbody tr:nth-child(even),
.vo-szoveg tbody tr:nth-child(even),
.wp-block-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--wag-paper, #f6f7f9) 55%, #fff); }
.entry-content tbody tr:last-child td,
.wp-block-table tbody tr:last-child td { border-bottom: 0; }
/* A számoszlopok szépen igazodjanak. */
.entry-content td, .wp-block-table td { font-variant-numeric: tabular-nums; }

/* =====================================================================
   TÉRKÉP-OLDALAK: TOVÁBBVEZETÉS
   Andi jelezte 2026-07-23: a térképoldalak zsákutcák voltak — a látogató
   megnézte az adatot, és nem volt hova kattintania. Mobilon menü sincs.
   A lista magából a sablon konfigurációjából épül, tehát új térkép
   felvételekor mindenhol magától megjelenik.
   ===================================================================== */
.tk-tovabb { margin: clamp(2.5rem,5vw,4rem) 0 0; padding-top: 2rem; border-top: 1px solid var(--wag-line); }
.tk-tovabb__cim { font-family: var(--wag-font-heading); font-size: 1.35rem; margin: 0 0 1.2rem; }
.tk-tovabb__lista {
  list-style: none; margin: 0 0 1.5rem; padding: 0;
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.tk-tovabb__elem {
  display: block; height: 100%;
  padding: .9rem 1.1rem;
  background: #fff;
  border: 1px solid var(--wag-line);
  border-radius: var(--wag-r-card);
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
}
.tk-tovabb__elem:hover, .tk-tovabb__elem:focus { border-color: var(--wag-accent); transform: translateY(-2px); }
.tk-tovabb__nev { display: block; font-weight: 600; color: var(--wag-ink); margin-bottom: .2rem; }
.tk-tovabb__kerdes { display: block; font-size: .88rem; color: var(--wag-muted); line-height: 1.4; }
.tk-tovabb__egyeb { font-size: .95rem; color: var(--wag-muted); margin: 0; max-width: 68ch; }
.tk-tovabb__egyeb a { color: var(--wag-accent); font-weight: 600; }

/* Sípálya-gomb a hótérképen — a rétegváltó gombokkal egy nyelven,
   de külön sorban, mert nem alternatíva, hanem RÁTÉT a térképre. */
.tk-retegek--sipalya { margin-top: .6rem; }
.tk-sipalya-btn {
  background: #fff;
  border: 1px solid var(--wag-line);
  border-radius: var(--wag-r-btn);
  padding: .5rem 1rem;
  font-family: var(--wag-font-body);
  font-size: .92rem;
  font-weight: 600;
  color: var(--wag-ink);
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
.tk-sipalya-btn:hover { border-color: var(--wag-accent); }
.tk-sipalya-btn[aria-pressed="true"] {
  background: var(--wag-accent); border-color: var(--wag-accent); color: #fff;
}

/* =====================================================================
   TÉRKÉP-GOMBOK: HOVER ÉS SZÖVEGKÖZÉP  — 2026-07-23
   ---------------------------------------------------------------------
   1. A HOVER visszaesett a GP kékjére. Ugyanaz az ok, mint az eszköz-
      csempéknél: a Customizer inline CSS-e minden <a>-ra és <button>-re
      ráteszi a saját színét, a mi szabályaink pedig a sablon <style>
      blokkjában vannak — azt a Customizer-CSS KÉSŐBB tölti felül.
      Ezért ide kerülnek, a design-rendszerbe, nagyobb fajsúllyal.

   2. A HOSSZÚ SZÖVEG balra tapadt egy széles konténerben. A 68ch olvasási
      sávszélesség jó, de balra húzva félbehagyottnak hat — középre zárjuk,
      ahogy a főoldalon és a városgyűjtőn is.
   ===================================================================== */
.tk .tk-btn,
.tk button.tk-btn {
  background: #fff;
  border: 1px solid var(--wag-line);
  border-radius: var(--wag-r-btn);
  color: var(--wag-ink);
  font-family: var(--wag-font-body);
  font-weight: 600;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.tk .tk-btn:hover,
.tk .tk-btn:focus {
  border-color: var(--wag-accent);
  background: #fff;
  color: var(--wag-accent-dark);
}
.tk .tk-btn[aria-pressed="true"],
.tk .tk-btn[aria-pressed="true"]:hover,
.tk .tk-btn[aria-pressed="true"]:focus {
  background: var(--wag-accent);
  border-color: var(--wag-accent);
  color: #fff;
}

/* A gombok EGY SORBAN, tördelve ha nem fér */
.tk .tk-retegek { display: flex; flex-wrap: wrap; gap: .5rem; }

/* EGY BAL ÉL MINDEN SZÖVEGBLOKKNAK — 2026-07-23, Andi: „rosszul van
   tördelve balra". A `margin-inline:auto` volt a hiba: a bevezető (62ch) és
   a laptörzs (68ch) MÁS pixelszélességre jön ki, mert más a betűméret —
   így külön-külön középre zárva két eltérő bal élt adtak (194 px és 357 px),
   ami rendetlennek látszik. Közös bal él a konténer szélénél: a `.tk` maga
   középen ül, tehát a blokk így is a lap közepén van, csak az élek
   egyvonalban. */
.tk { --tk-olvasas: 46rem; }
.tk .tk-lead { max-width: var(--tk-olvasas); margin-inline: 0; }

/* A LAPTÖRZS: KÖZÉPRE ZÁRT OLVASÓOSZLOP — 2026-07-23.
   Kipróbáltam két hasábban, hogy kitöltse a szélességet. Andi: „nem ezt
   kértem, a nagy szöveg jó volt középre zárva". Igaza volt: a hasábolás
   újságtördelés, nem weboldal — a szemnek fel-le kell ugrálnia, mobilon
   pedig úgyis megszűnik. Marad a középre zárt olvasóoszlop. */
.tk .tk-szoveg { max-width: var(--tk-olvasas); margin-inline: auto; }

/* A KIS MAGYARÁZÓ SOR VISZONT FUSSON VÉGIG a térkép szélességében.
   Ez az, ami eddig ~448 px-en tört meg egy 752 px-es térkép alatt, és
   attól nézett ki elnagyoltnak. Forrásmegjelölés, nem olvasnivaló:
   itt a hosszú sor nem baj, a csonka viszont igen. */
.tk .tk-note { max-width: none; }

/* =====================================================================
   FOOTER — a lap ZÁRÁSA (2026-07-24, Andi: „látsszon, hogy ez már a footer")
   ---------------------------------------------------------------------
   A fejléc mély türkize (--wag-accent-dark) fut le a footerre is: a kettő
   „bekeretezi" a lapot, a látogató azonnal érzi, hol a vége. Nem generikus
   szürke-fekete slab (azt Andi nem szereti), hanem a SAJÁT márkaszínünk.

   TELJES SZÉLESSÉG: a .site-footer `grid-container`, tehát szélesség-korlátos.
   A box-shadow+clip-path a bevett full-bleed trükk: a háttérszínt kiengedi a
   képernyő két széléig, DE nem növeli a doboz méretét, tehát nincs vízszintes
   gördülés (ellentétben a negatív-margós 100vw megoldással).
   ===================================================================== */
.site-footer {
  background-color: var(--wag-accent-dark);
  box-shadow: 0 0 0 100vmax var(--wag-accent-dark);
  clip-path: inset(0 -100vmax);
  color: rgba(255,255,255,.80);
}
/* Címsorok fehéren, a UAGB elválasztó vonalka látható a sötéten. */
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4,
.site-footer .uagb-heading-text,
.site-footer .wp-block-heading,
.site-footer .gb-headline { color: #fff; }
.site-footer .uagb-separator,
.site-footer .uagb-separator > * {
  border-color: rgba(255,255,255,.30) !important;
  background-color: rgba(255,255,255,.30);
}
/* Bekezdés / lista / dátum. */
.site-footer p, .site-footer li,
.site-footer .gb-headline[class*="date"] { color: rgba(255,255,255,.80); }
/* Linkek — világos, hoverre fehér + aláhúzás (a türkiz akcent sötéten nem látszana). */
.site-footer a { color: rgba(255,255,255,.86); text-decoration: none; }
/* Hover: picit zöldes világosodás (Andi), NINCS aláhúzás. */
.site-footer a:hover, .site-footer a:focus-visible { color: #a7f3d0; text-decoration: none; }
.site-footer .gb-headline a { color: #fff; }
.site-footer .gb-headline a:hover { color: #a7f3d0; }
/* Ha marad tag-felhő valahol: chip-forma a sötéten. */
.site-footer .tagcloud a, .site-footer .wp-block-tag-cloud a {
  display: inline-block; margin: .18rem; padding: .22rem .6rem;
  background: rgba(255,255,255,.10); border-radius: 999px;
  font-size: .85rem !important; color: rgba(255,255,255,.85);
}
.site-footer .tagcloud a:hover, .site-footer .wp-block-tag-cloud a:hover {
  background: rgba(255,255,255,.18); color: #fff; text-decoration: none;
}
/* Alsó copyright-sáv: finom elválasztó vonal a widgetektől, egy fokkal halványabb szöveg. */
.site-footer .site-info { border-top: 1px solid rgba(255,255,255,.14); }
/* A FEKETE alsó sáv ELTÜNTETÉSE (Andi): a GP a copyright-sávra sötét hátteret
   tett — átlátszóra vesszük, hogy a footer egységes türkize fusson végig. */
.site-footer .site-info,
.site-footer .inside-site-info,
.site-footer .footer-bar { background-color: transparent !important; }
.site-footer .site-info,
.site-footer .footer-bar { color: rgba(255,255,255,.62); }
.site-footer .site-info a, .site-footer .footer-bar a { color: rgba(255,255,255,.80); }

/* =====================================================================
   KÖZÖSSÉGI — FB-követés (footer) + megosztás-gomb (figyelmeztetés) 2026-07-24
   ===================================================================== */
/* KÖVETÉS a footerben: a widgetek és a copyright közé, középre. A színt a
   .site-footer a szabályok adják (világos + zöldes hover, nincs aláhúzás). */
.wag-fb-kovet { text-align: center; padding: .2rem 1rem 1.1rem; }
.wag-fb-kovet__link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; font-size: .95rem;
}
.wag-fb-kovet__link svg { flex: 0 0 auto; }

/* MEGOSZTÁS-GOMB az alert oldalon (a virális pont). Márka-türkiz CTA. */
.wag-share { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 1.25rem 0; }
.wag-share__cimke { font-weight: 700; color: var(--wag-ink); }
.wag-share__gomb {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--wag-accent-dark); color: #fff; text-decoration: none;
  padding: .6rem 1.1rem; border-radius: var(--wag-r-btn, 10px);
  font-weight: 700; font-size: .98rem;
  transition: background-color .15s ease, transform .15s ease;
}
.wag-share__gomb:hover, .wag-share__gomb:focus-visible {
  background: var(--wag-accent); color: #fff; transform: translateY(-1px);
}
.wag-share__gomb svg { flex: 0 0 auto; }

/* ── ÉLŐ HŐTÉRKÉP MOBILON (2026-07-24) ────────────────────────────────
   A látogatók 85%-a mobilos (Similarweb, meteoromania.ro), tehát a kis
   kijelző az ELSŐDLEGES nézet, nem a kivétel. Mérve 375 px-en: a térkép
   460 px-e a képernyő 57%-át vitte, a pinek pedig egymásra csúsztak.
   A pin-ritkítást a JS végzi; itt a méreteket húzzuk arányba.           */
@media (max-width: 600px) {
  .wag-homap__terkep { height: 340px; }
  .wag-homap__marker .wag-homap__pin {
    font-size: .82rem;
    padding: .2rem .38rem;
  }
  .wag-homap__marker .wag-homap__nev { font-size: .64rem; }
  /* Mobilon CSAK a 8 horgonyváros kap nevet — a többi kompakt hőmérséklet-
     buborék. Mérve: névvel 8, név nélkül 17 pin fért ki 375 px-en; így a
     tájékozódási pontok megvannak, és a térkép mégis hőmérséklet-mezőt mutat. */
  .wag-homap__marker:not(.is-horgony) .wag-homap__nev { display: none; }
  .wag-homap__jelmagy span { font-size: .72rem; padding: .1rem .42rem; }
  .wag-homap__jegyzet { font-size: .8rem; }
}

/* =====================================================================
   FELVEZETŐ SZÖVEG — TELJES SZÉLESSÉG (Andi, 2026-07-24)
   ---------------------------------------------------------------------
   „a felvezető szöveg fusson végig… minden oldalnál legyen így, ahol nincs
   mellette valami vizuál."

   MIÉRT VOLT SZŰK: a lead-bekezdésekre tipográfiai olvasósáv-szabály volt
   (46rem / 60ch / 65ch). Ez hasábos szövegnél helyes, DE nálunk a lead egy
   ADATMONDAT egy széles sáv tetején — csonkán, félbehagyottan hatott, és
   a mellette maradó üres hely amatőrnek látszott.

   HOL MARAD SZŰK: ahol a szöveg MELLETT van vizuál (kétoszlopos elrendezés),
   ott a rács adja a szélességet — ezt a szabály nem bántja, mert csak a
   lead/válasz osztályokra hat, nem a rács-cellákra.
   ===================================================================== */
.hn-lead,
.eh-lead,
.tk .tk-lead,
.wag-answer,
.wag-fo__szoveg,
.wag-varosgyujto__szoveg,
.wag-404__vezeto,
.tk-tovabb__egyeb { max-width: none; }

/* Átvezető sor komponensek közt (pl. riasztás-lista → riasztás-térkép).
   Nem gomb: a gomb a cselekvésé (megosztás), ez navigáció. */
.wag-atvezet { margin: 1.25rem 0 0; }
.wag-atvezet__link {
  display: inline-block; font-weight: 600; color: var(--wag-accent-dark, var(--wag-accent));
  text-decoration: none; border-bottom: 1px solid transparent;
}
.wag-atvezet__link:hover, .wag-atvezet__link:focus-visible {
  color: var(--wag-accent); border-bottom-color: currentColor;
}

/* ── KAPCSOLÓDÓ CIKKEK szakasz-körítés ────────────────────────────────────
   ÁTHOZVA 2026-07-25 a single-post.php beágyazott <style>-jából. MIÉRT: a
   kártyák (.wag-cikk) szabályai már itt voltak, a KÖRÍTÉS viszont csak a
   jelentés-sablonban — így a Tudás- és egyéb cikkek alatt a szakasz
   szélesség és címstílus nélkül jelent volna meg. Egy komponens = egy hely. */
.wag-kapcsolodo { width: 100%; max-width: 1180px; margin: 2.5rem auto 0; padding: 0 1.25rem; }
.wag-kapcsolodo__cim { font-size: 1.25rem; font-weight: 700; margin: 0 0 1.25rem; color: var(--wag-ink); }

/* ── ESEMÉNY-SÁV a főoldalon (Fázis 4, 2026-07-25) ───────────────────────
   Andi kérése: „diszkrét badge… h ez időjárás esemény, ez hírek".
   DISZKRÉT a kulcsszó: kis betű, halvány háttér, nagy betűköz — jelez,
   de nem verseng a címmel. A színt a komponens adja soronként, mert
   kategóriánként más és SZEMANTIKUS (borostyán = esemény, indigó = égbolt,
   türkiz = saját hír). */
/* ⚠️ 1180px, NEM 1100 (Andi, 2026-07-26: „a főoldalon a cikkek sokkal kisebb
   helyet töltenek ki, mint a 7 naposon"). Mérve 1425px nézetben:
     főoldal  .wag-esav  max-width 1100 → rács 340+340+340 = 1060
     7 napos  .h7        max-width 1180 → rács 362×3       = 1128
   68px különbség ugyanabból a komponensből — a konténer volt szűkebb, nem a
   kártya. Az 1180 a lap többi részének mértéke, ezért ahhoz igazítunk. */
.wag-esav { width: 100%; max-width: 1180px; margin: 2.5rem auto 0; padding: 0 1.25rem; }
.wag-esav__cim { font-size: 1.25rem; font-weight: 700; margin: 0 0 1.25rem; color: var(--wag-ink); }
.wag-esav__badge {
  display: inline-block; align-self: flex-start;
  font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: .2rem .55rem; border-radius: 999px; margin-bottom: .45rem;
}