/* =========================================================
   Önkormányzat Mester Sablon - globális stílus
   (fejléc, sáv, lábléc, akadálymentesítés, alap tipográfia,
   animáció-segédosztályok - minden ami MINDEN oldalon kell)
   ========================================================= */

:root{
	/* Fontos: enélkül egyes böngészők (sötét OS/rendszerbeállítás esetén) a
	   SAJÁT sötét alapstílusukat próbálják ráerőltetni a gombokra/beviteli
	   mezőkre, FÜGGETLENÜL attól, hogy mi explicit háttérszínt adtunk-e meg -
	   ez okozta pl. hogy az akadálymentesítési panel gombjain a szöveg
	   láthatatlan (fehér szöveg fehér háttéren) volt egyes gépeken/böngészőkben,
	   miközben a hátterüket mi explicit fehérre állítottuk.  */
	color-scheme:light;
	--tp-szin-elsodleges:#1B3358;   /* önkormányzati sötétkék */
	--tp-szin-elsodleges-vilagos:#284677;
	/* Fontos: ez a változó SOHA nem kap sötét módban felülírást (lásd lejjebb) -
	   ott kell használni, ahol egy tömör, mindig ugyanolyan sötétkék felület
	   (pl. gomb, sáv, jelvény) FEHÉR felirattal/ikonnal párosul. A sima
	   --tp-szin-elsodleges ugyanis sötét módban világosra vált (hogy szövegként/
	   címként olvasható maradjon sötét háttéren) - ha egy fehér feliratú gombra
	   is azt használnánk, sötét módban világos háttéren világos/fehér felirat
	   lenne, azaz gyakorlatilag eltűnne. */
	--tp-szin-elsodleges-szilard:#1B3358;
	--tp-szin-kiemelo:#C9A227;      /* arany akcentus - HÁTTÉRSZÍNKÉNT vagy sötét háttéren szövegként jó kontrasztú, VILÁGOS/FEHÉR háttéren szövegként NEM (kb. 2.2:1) */
	--tp-szin-kiemelo-szoveg:#8A6C15; /* ugyanaz az arany, sötétítve - ezt használjuk, ha a felirat világos háttéren, önmagában (nem jelvény/gomb háttereként) jelenik meg, hogy a WCAG AA kontraszt (4.5:1) teljesüljön */
	--tp-szin-siker:#2E7D4F;
	--tp-szin-hiba:#B3261E;
	--tp-szin-szoveg:#1E222A;
	--tp-szin-szoveg-halvany:#5B6472;
	--tp-szin-hatter:#FFFFFF;
	--tp-szin-hatter-szurke:#F4F6F9;
	--tp-szin-vonal:#E2E6ED;
	--tp-radius:14px;
	--tp-arnyek:0 8px 30px rgba(27,51,88,.08);
	/* MÓDOSÍTVA (Bence kérése: "minden blokk legyen szélesebb/teljes
	   oldalszélesség, a tartalomnál/címeknél maradjon padding") - mivel ez az
	   EGYETLEN változó adja a ".tp-container" (vagyis gyakorlatilag MINDEN
	   szekció/kártyarács) max-szélességét az egész weboldalon, az emelése
	   egyetlen helyen azonnal szélesebbé teszi az összes oldal összes
	   szekcióját, a meglévő reszponzív töréspontok (@media) érintetlenül
	   hagyása mellett - ez egy jóval kisebb kockázatú megoldás, mint minden
	   egyes sablon saját <section>-jének szétszedése külön háttér-elemre és
	   belső tartalom-dobozra. A ténylegesen SZÍNES/SZÜRKE "sávos" szekciók
	   (lásd .tp-szekcio--szurke lejjebb) emellett a HÁTTERÜKKEL már tényleg a
	   böngészőablak széléig is kiérnek. */
	--tp-container:1440px;
	/* Kicsit karakteresebb, kevésbé "hivatalos" betűpárosítás Bence kérésére
	   (a korábbi Poppins/Inter pár túl semleges/formális volt neki) - a
	   Fraunces egy melegebb, karakteres, de még mindig jól olvasható
	   fejléc-betűtípus, a Manrope pedig egy barátságos, kerekded talpatlan
	   szövegbetű. */
	--tp-font-cim:'Fraunces',Georgia,serif;
	--tp-font-szoveg:'Manrope',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
	margin:0;
	font-family:var(--tp-font-szoveg);
	color:var(--tp-szin-szoveg);
	background:var(--tp-szin-hatter);
	line-height:1.6;
}
h1,h2,h3,h4{font-family:var(--tp-font-cim);color:var(--tp-szin-elsodleges);line-height:1.2;margin:0 0 .5em;}
img{max-width:100%;display:block;}
a{color:var(--tp-szin-elsodleges);}
.tp-container{max-width:var(--tp-container);margin:0 auto;padding:0 24px;}

/* --- Kép helper --- */
.tp-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:var(--tp-radius);}
.tp-img-placeholder{
	display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
	width:100%;height:100%;min-height:120px;
	background:repeating-linear-gradient(45deg,#EEF1F6,#EEF1F6 10px,#E4E8F0 10px,#E4E8F0 20px);
	border:2px dashed #B9C2D0;border-radius:var(--tp-radius);
	color:#6b7686;font-size:.85rem;text-align:center;padding:16px;
	overflow:hidden; /* FONTOS: ha a felirat/ikon nem fér ki a szülő dobozból
	adódó fix magasságba (pl. a fejléc 96x120px-es címer-helye), NE lógjon ki
	a tartalom a doboz fölé/alá - inkább vágódjon le csendben. */
}
.tp-img-placeholder__icon{font-size:1.6rem;}
.tp-img-placeholder--terkep{min-height:180px;}
/* Szűk helyekre (fejléc/lábléc címer) - csak az ikon, felirat nélkül,
   hogy egy hosszabb súgószöveg se tudja szétfeszíteni a kis dobozt. */
.tp-img-placeholder--kompakt{padding:4px;gap:0;min-height:0;}
.tp-img-placeholder--kompakt .tp-img-placeholder__icon{font-size:1.3rem;}
.tp-img-placeholder--kompakt .tp-img-placeholder__label{display:none;}

/* --- Felső, vékony sáv --- */
/* Finom, ismétlődő pöttyminta a színes felületeken (fejléc feletti sáv,
   lábléc) - a mester prompt "ne legyen csupasz/formális" design-elvárása
   szerint, HTML/CSS-ből (nincs hozzá kép), nagyon visszafogottan. */
.tp-topsav{background:var(--tp-szin-elsodleges-szilard);color:#fff;font-size:.85rem;background-image:radial-gradient(circle,rgba(255,255,255,.14) 1px,transparent 1px);background-size:13px 13px;}
.tp-topsav__belso{display:flex;align-items:center;justify-content:space-between;padding:6px 24px;gap:12px;}
.tp-topsav__telefon{color:#fff;text-decoration:none;display:flex;align-items:center;gap:6px;font-weight:600;}
.tp-topsav__telefon svg{width:15px;height:15px;flex:0 0 auto;}
.tp-topsav__kozossegi{display:flex;gap:20px;}
.tp-topsav__kozossegi a{color:#fff;display:inline-flex;opacity:.85;transition:opacity .2s;}
.tp-topsav__kozossegi a:hover{opacity:1;}

/* --- Fejléc --- */
:root{--tp-fejlec-magassag:88px;}
.tp-fejlec{position:sticky;top:0;z-index:50;background:var(--tp-szin-hatter);box-shadow:var(--tp-arnyek);transition:background-color .25s ease,box-shadow .25s ease;}
.tp-fejlec__belso{display:flex;align-items:center;justify-content:space-between;min-height:var(--tp-fejlec-magassag);position:relative;}
.tp-fejlec__menucsoport{display:flex;align-items:center;gap:28px;}
.tp-fejlec__jobb{display:flex;align-items:center;gap:8px;}

/* Hero-overlay fejléc (csak a Főoldalon, amíg a hero fölött vagyunk) -
   Bence kérése: ne legyen külön, tömör sáv a hero fölött, hanem a fejléc
   magától a képre boruló, sötétítő átmenetként (overlay) üljön rajta.
   Mivel a fejléc a DOM-ban KORÁBBAN van, mint a hero szekció, a ".tp-hero"
   szabály (lejjebb, a Főoldal saját <style> blokkjában) egy negatív felső
   margóval "felhúzza" a hero-t a fejléc alá/mögé - így a topsáv (ami e
   fölött, változatlanul, saját helyén marad) és a fejléc helyzete NEM
   változik, csak a hero kezdődik a fejléc tetejével egy vonalban. */
.tp-fejlec--hero-felett{background:linear-gradient(180deg,rgba(10,20,36,.68) 0%,rgba(10,20,36,.28) 65%,rgba(10,20,36,0) 100%);box-shadow:none;}
.tp-fejlec--hero-felett .tp-fomenu__lista > li > a{color:#fff;}
.tp-fejlec--hero-felett .tp-hamburger span{color:#fff;}
/* FONTOS: a kereső-ikon gombra itt is az "#tp-fejlec" azonosítós szelektort
   kell használni (nem csak a ".tp-fejlec--hero-felett" osztályt), különben
   a lejjebbi, a kör-alak védelme miatt szándékosan ID-val megerősített
   alapszabály (lásd ott a megjegyzést) nagyobb CSS-specificitása miatt ez a
   fehér szín szabály veszítene, és a gomb a hero fölött is a sötétkék
   alapértelmezett színét mutatná a fehér helyett. */
#tp-fejlec.tp-fejlec--hero-felett .tp-fejlec-kereso-nyito{color:#fff;}
.tp-fejlec--hero-felett .tp-hamburger span{background:#fff;}
/* Amint a látogató görgetni kezd (lásd assets/js/global.js), a fejléc
   visszavált a megszokott, tömör, mindig jól olvasható sávra - EZ a kis,
   szándékosan jelzett JS-eltérés attól, hogy "nincs szükség a sávra":
   tiszta CSS-ből nem oldható meg, hogy egy mindvégig ragadós (sticky)
   fejléc a görgetési pozíciótól függően váltson át átlátszóból tömörre. */
.tp-fejlec--hero-felett.tp-fejlec--gordult{background:var(--tp-szin-hatter);box-shadow:var(--tp-arnyek);}
.tp-fejlec--hero-felett.tp-fejlec--gordult .tp-fomenu__lista > li > a{color:var(--tp-szin-elsodleges);}
.tp-fejlec--hero-felett.tp-fejlec--gordult .tp-hamburger span{background:var(--tp-szin-elsodleges);}
#tp-fejlec.tp-fejlec--hero-felett.tp-fejlec--gordult .tp-fejlec-kereso-nyito{color:var(--tp-szin-elsodleges);}

/* Fejléc kereső-ikon gomb (jobb oldalon, mobilon is elérhető).
   JAVÍTVA: Bence jelezte, hogy az éles WordPress-oldalon ez a gomb nem
   szabályos kör, és nem is látszik benne az ikon - ezt a leválasztott,
   Astra szülőtéma nélküli teszt-HTML-emben NEM tudtam visszaadni (ott
   hibátlanul jelent meg), vagyis a hiba feltehetően az Astra szülőtéma
   saját, mindenre érvényes <button>/<svg> alapstílusaival való ütközésből
   adódik (pl. Astra saját gombjainak paddingje/border-radiusa/sorkiosztása
   nagyobb CSS-specificitással írja felül a sajátunkat). Mivel élő
   WordPress-installáció nélkül ezt itt nem tudom pontosan reprodukálni,
   "védekező" módon erősítettem meg a szabályt: a fejléc saját "tp-fejlec"
   azonosítóját is bevontam a szelektorba (nagyobb specificitás, mint egy
   sima osztály-alapú Astra-szabálynak), ÉS a legfontosabb, alak-adó
   tulajdonságokat !important-tel zártam le, hogy semmilyen örökölt
   gomb-stílus ne tudja többé szétfeszíteni/eltorzítani a kört, se eltüntetni
   az ikont. */
#tp-fejlec .tp-fejlec-kereso-nyito{
	-webkit-appearance:none;appearance:none;
	box-sizing:border-box !important;
	display:flex !important;align-items:center !important;justify-content:center !important;
	width:42px !important;height:42px !important;
	min-width:42px;min-height:42px;max-width:42px;max-height:42px;
	margin:0;padding:0 !important;
	border-radius:50% !important;border:0 !important;outline:0;
	line-height:0;font-size:0;
	background:rgba(27,51,88,.07);color:var(--tp-szin-elsodleges);
	cursor:pointer;flex:0 0 42px;
	transition:background-color .2s,color .2s;
}
#tp-fejlec .tp-fejlec-kereso-nyito svg{display:block !important;width:19px !important;height:19px !important;flex-shrink:0;fill:none;stroke:currentColor;}
#tp-fejlec .tp-fejlec-kereso-nyito:hover{background:var(--tp-szin-kiemelo);color:#fff;}
#tp-fejlec.tp-fejlec--hero-felett .tp-fejlec-kereso-nyito{background:rgba(255,255,255,.18);}
#tp-fejlec.tp-fejlec--hero-felett .tp-fejlec-kereso-nyito:hover{background:var(--tp-szin-kiemelo);color:#fff;}

/* Kereső "ablak" (modal), amit a fejléc kereső-ikonja nyit meg - sötétített
   háttér (backdrop) + középre igazított, hangsúlyos keresőmező. */
.tp-kereso-modal{position:fixed;inset:0;z-index:300;display:flex;align-items:flex-start;justify-content:center;padding:12vh 20px 20px;}
.tp-kereso-modal[hidden]{display:none;}
.tp-kereso-modal__hatter{position:absolute;inset:0;background:rgba(8,13,24,.72);backdrop-filter:blur(2px);}
.tp-kereso-modal__doboz{position:relative;width:100%;max-width:620px;animation:tp-kereso-modal-fel .25s ease both;}
@keyframes tp-kereso-modal-fel{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:translateY(0);}}
.tp-kereso-modal__bezar{position:absolute;top:-44px;right:0;width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.15);color:#fff;font-size:1.1rem;cursor:pointer;}
.tp-kereso-modal__bezar:hover{background:rgba(255,255,255,.3);}
.tp-kereso--modal{max-width:none;}
.tp-kereso--modal input{padding:18px 22px 18px 52px;font-size:1.05rem;}

/* --- Kereső doboz (ALAP stílus) - mind a hero középső keresőjéhez, mind a
   fejléc ikonos kereső-modaljához (lásd fentebb) közös. Bence kérése, hogy
   a hero közepén lévő kereső "kicsit látványosabb legyen, mert most
   beleolvad" - ezért itt most: bal oldali nagyítóikon, hangsúlyosabb árnyék,
   finom arany szegély, és fókuszban arany gyűrű (a korábbi, sima fehér
   "beleolvadó" pill-forma helyett). */
.tp-kereso{position:relative;}
.tp-kereso svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:19px;height:19px;color:var(--tp-szin-szoveg-halvany);pointer-events:none;}
.tp-kereso input{width:100%;padding:14px 18px 14px 48px;border-radius:999px;border:2px solid rgba(201,162,39,.35);box-shadow:0 10px 30px rgba(27,51,88,.16);font-size:.95rem;background:var(--tp-szin-hatter);transition:box-shadow .2s,border-color .2s;}
.tp-kereso input::placeholder{color:var(--tp-szin-szoveg-halvany);}
.tp-kereso input:focus{outline:none;border-color:var(--tp-szin-kiemelo);box-shadow:0 0 0 4px rgba(201,162,39,.25),0 10px 30px rgba(27,51,88,.16);}
.tp-kereso__eredmenyek{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--tp-szin-hatter);border-radius:var(--tp-radius);box-shadow:var(--tp-arnyek);max-height:320px;overflow:auto;z-index:20;}
.tp-kereso__eredmenyek ul{list-style:none;margin:0;padding:8px;}
.tp-kereso__eredmenyek a{display:flex;gap:10px;padding:10px 12px;border-radius:8px;text-decoration:none;color:var(--tp-szin-szoveg);}
.tp-kereso__eredmenyek a:hover{background:var(--tp-szin-hatter-szurke);}
.tp-kereso-tipus{font-size:.7rem;text-transform:uppercase;color:var(--tp-szin-szoveg-halvany);background:var(--tp-szin-hatter-szurke);border-radius:6px;padding:2px 6px;}
.tp-kereso-nincs{padding:12px;color:var(--tp-szin-szoveg-halvany);}
.tp-kereso--modal svg{left:20px;width:21px;height:21px;}
.tp-fejlec__cimer{display:block;width:96px;height:120px;margin-bottom:-32px;position:relative;z-index:2;}
.tp-cimer-kep{object-fit:contain;border-radius:0;padding:6px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.12));}
.tp-fomenu__lista{list-style:none;display:flex;align-items:center;gap:28px;margin:0;padding:0;}
.tp-fomenu__lista li{position:relative;display:flex;align-items:center;}
.tp-fomenu__lista a{text-decoration:none;font-weight:600;color:var(--tp-szin-elsodleges);padding:8px 0;position:relative;display:inline-flex;align-items:center;}
/* JAVÍTVA: a hover-aláhúzás korábban ::after pszeudoelemet használt - EZ
   UGYANAZ a pszeudoelem, amit a legördülő nyíl ("▾") is használ a
   .menu-item-has-children > a::after szabálynál lejjebb. Egy elemnek csak
   EGY ::after-je lehet: a "content" tulajdonságnál a nagyobb specificitású
   nyíl-szabály nyert, DE az aláhúzás position:absolute/left/bottom/height/
   background tulajdonságait (amiket a nyíl-szabály nem írt felül) a böngésző
   a kaszkád szabályai szerint tulajdonságonként külön-külön alkalmazta -
   ezért a nyíl karakter végül az aláhúzás abszolút pozícióját (bal szélre,
   a szöveg ALÁ) örökölte, és a hover-animáció (width 0-ról 100%-ra) is rá
   vonatkozott a forgás helyett. Megoldás: az aláhúzás mostantól ::before-ot
   használ, a nyíl pedig változatlanul ::after-t - így a két pszeudoelem
   dropdown-menüpontoknál egymás mellett, ütközés nélkül él. */
.tp-fomenu__lista a::before{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--tp-szin-kiemelo);transition:width .25s;}
.tp-fomenu__lista a:hover::before{width:100%;}
.tp-hamburger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;}
.tp-hamburger span{width:26px;height:3px;background:var(--tp-szin-elsodleges);border-radius:2px;transition:.25s;}
/* A "← Vissza" gomb és a lenti címer CSAK a mobil, kinyíló menüpanelban
   jelenik meg (lásd lejjebb a @media (max-width:900px) blokkban) -
   asztali nézetben, ahol a menü egy sima vízszintes sáv, nincs rájuk
   szükség. */
.tp-fomenu__vissza{display:none;}
.tp-fomenu__also{display:none;}

/* --- Almenü (dropdown) - ha egy menüpont alá másik pontok vannak behúzva
   a gyári Megjelenés -> Menük felületen (Round F óta pontosan ez történik
   az automatikusan létrehozott "Önkormányzat" gyűjtőpont alatt, lásd
   inc/setup-oldalak.php), az automatikusan legördülő menüként jelenik meg,
   plusz kód/beállítás nélkül - ez a szabály bármelyik menüpontra érvényes,
   nem csak az "Önkormányzat"-ra. --- */
.tp-fomenu__lista .menu-item-has-children > a{display:inline-flex;align-items:center;gap:6px;}
/* JAVÍTVA: a legördülő nyíl korábban nagyon kicsi volt (.65em, kb. 10px) és
   (mivel ::before-ként, a szöveg ELÉ került) a szokásostól eltérő sorrendben
   jelent meg - mostantól ::after-ként a felirat UTÁN, jóval nagyobb (1rem)
   méretben látszik, és a legördülő megnyílásakor (hover/fókusz) el is fordul,
   hogy jelezze a nyitott állapotot. Színe továbbra is a link saját színét
   követi (nincs explicit color, tehát currentColor), így sötét módban is
   automatikusan a helyes, világos árnyalatot kapja. */
.tp-fomenu__lista .menu-item-has-children > a::after{content:"▾";font-size:1rem;line-height:1;transition:transform .2s ease;}
.tp-fomenu__lista li:hover > a::after,
.tp-fomenu__lista li:focus-within > a::after{transform:rotate(180deg);}
/* Round F: az "Önkormányzat" legördülő akár 15-20 tételt is összefoghat
   (attól függően, mennyi modulhoz van már feltöltve tartalom) - a
   max-height/overflow-y biztosíték arra, hogy egy alacsonyabb (pl.
   laptop-magasságú) képernyőn se lógjon ki a lenyíló doboz a látható
   területről, hanem inkább saját maga görgethetővé váljon. */
.tp-fomenu__lista .sub-menu{list-style:none;margin:0;padding:10px;position:absolute;top:100%;left:0;min-width:240px;max-height:min(70vh,520px);overflow-y:auto;background:var(--tp-szin-hatter);border-radius:var(--tp-radius);box-shadow:var(--tp-arnyek);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s,transform .2s;z-index:10;}
.tp-fomenu__lista li:hover > .sub-menu,
.tp-fomenu__lista li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:translateY(0);}
.tp-fomenu__lista .sub-menu li{width:100%;}
.tp-fomenu__lista .sub-menu a{color:var(--tp-szin-szoveg);padding:8px 12px;display:block;border-radius:8px;font-weight:500;}
.tp-fomenu__lista .sub-menu a::before{display:none;}
.tp-fomenu__lista .sub-menu a:hover{background:var(--tp-szin-hatter-szurke);}

/* --- Másodlagos (aloldal) fejléc --- */
.tp-al-fejlec{background:var(--tp-szin-hatter-szurke);border-bottom:1px solid var(--tp-szin-vonal);padding:22px 0;background-image:radial-gradient(circle,rgba(27,51,88,.06) 1.5px,transparent 1.5px);background-size:24px 24px;}
.tp-al-fejlec__belso{display:flex;align-items:center;gap:18px;}
.tp-vissza-nyil{background:var(--tp-szin-hatter);border:1px solid var(--tp-szin-vonal);border-radius:999px;padding:8px 16px;cursor:pointer;font-weight:600;color:var(--tp-szin-elsodleges);}
.tp-breadcrumb{font-size:.85rem;color:var(--tp-szin-szoveg-halvany);display:flex;gap:6px;margin-top:4px;}
.tp-breadcrumb a{color:var(--tp-szin-szoveg-halvany);text-decoration:none;}

@media (max-width:900px){
	.tp-hamburger{display:flex;}
	.tp-fomenu{position:fixed;inset:0 0 0 30%;background:var(--tp-szin-hatter);transform:translateX(100%);transition:transform .3s;z-index:60;padding:100px 24px 24px;overflow-y:auto;display:flex;flex-direction:column;}
	.tp-fomenu.is-nyitva{transform:translateX(0);box-shadow:-10px 0 30px rgba(0,0,0,.15);}
	.tp-fomenu__lista{flex-direction:column;gap:18px;}
	/* Mobilon a legördülő helyett egy mindig látható, behúzott alpont-lista
	   (a kihajtható panel amúgy is görgethető, felesleges plusz JS-t bevonni). */
	.tp-fomenu__lista .sub-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;background:none;padding:10px 0 0 16px;min-width:0;}
	/* "← Vissza" gomb a panel tetején (a fejléc-magasságnyi felső paddingben)
	   - Bence kérése, hogy a hamburger ikon mellett egy explicit záró-gomb is
	   legyen a kinyíló menüben. */
	.tp-fomenu__vissza{display:inline-flex;align-items:center;position:absolute;top:28px;left:24px;background:none;border:0;color:var(--tp-szin-elsodleges);font-weight:700;font-size:.95rem;cursor:pointer;padding:6px 4px;}
	/* Címer a panel alján - Bence kérése. */
	.tp-fomenu__also{display:flex;justify-content:center;margin-top:36px;padding-top:24px;border-top:1px solid var(--tp-szin-vonal);}
	.tp-fomenu__cimer{width:64px;height:64px;object-fit:contain;}
}

/* --- Lábléc --- */
.tp-lablec{background:var(--tp-szin-elsodleges-szilard);color:#dfe6f2;margin-top:64px;background-image:radial-gradient(circle,rgba(255,255,255,.06) 1.5px,transparent 1.5px);background-size:26px 26px;}
/* JAVÍTVA (2. kör - Bence visszajelzése szerint az 1. körös javítás, sima
   class-szelektorokkal, NEM volt elég, a lábléc teteje/alja még mindig nem
   egységes): ugyanazt a védekező mintát alkalmazzuk itt is, ami a kereső-
   gomb specificitási problémáját megoldotta - a <footer>-nek kapott egy
   "tp-lablec" ID-t (lásd parts/footer.php), és az ID-alapú szelektorok
   !important-tel együtt megbízhatóan felülírják az Astra szülőtéma
   ismeretlen, de nyilvánvalóan nagyobb specificitású (valószínűleg szintén
   ID-alapú, pl. #colophon-ra épülő) betűtípus-szabályát, amit az izolált
   teszt-HTML-ben (Astra nélkül) nem lehetett visszaadni/reprodukálni. A saját
   h2 címek kivételek, azok szándékosan a --tp-font-cim-et kapják, mint minden
   más szekció-cím az oldalon. */
#tp-lablec,
#tp-lablec p,
#tp-lablec a,
#tp-lablec span,
#tp-lablec li,
#tp-lablec small,
#tp-lablec strong,
#tp-lablec button{font-family:var(--tp-font-szoveg) !important;}
#tp-lablec h2{font-family:var(--tp-font-cim) !important;}
.tp-lablec__racs{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;padding:48px 24px;}
.tp-lablec__oszlop h2{color:#fff;font-size:1rem;}
.tp-lablec__cimer{width:56px;height:56px;object-fit:contain;border-radius:10px;padding:6px;margin-bottom:10px;}
.tp-lablec__telefon{display:flex;align-items:center;gap:8px;}
.tp-lablec__telefon svg{width:16px;height:16px;flex:0 0 auto;color:#dfe6f2;}
.tp-lablec__menu{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;max-height:260px;overflow-y:auto;}
.tp-lablec__menu a{color:#dfe6f2;text-decoration:none;}
.tp-lablec__menu a:hover{color:var(--tp-szin-kiemelo);}
/* Az automatikus "Oldaltérkép" (amikor nincs kézzel összeállított lábléc-
   menü - lásd parts/footer.php) a Fő menüt jeleníti meg, aminek vannak
   almenüs (pl. "Önkormányzat") pontjai - itt a láblécben ez NEM legördülő
   dropdown (mint a fejlécben), hanem egy mindig kibontott, kicsit beljebb
   kezdődő, halványabb almenü-lista, hogy valódi "oldaltérkép" hatást keltsen. */
.tp-lablec__oldalterkep .sub-menu{list-style:none;margin:2px 0 0 14px;padding:0;display:flex;flex-direction:column;gap:6px;}
.tp-lablec__oldalterkep .sub-menu a{font-size:.85rem;opacity:.8;}
.tp-lablec__also{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 18px;padding:14px;border-top:1px solid rgba(255,255,255,.12);font-size:.8rem;color:#9fb0cc;}
.tp-admin-link{color:#5c6c8c;text-decoration:none;font-size:1.1rem;opacity:.5;padding:4px 10px;}
.tp-admin-link:hover{opacity:1;color:#9fb0cc;}
.tp-cookie-link{color:#9fb0cc;text-decoration:underline;}
.tp-cookie-link:hover{color:#fff;}
@media (max-width:800px){.tp-lablec__racs{grid-template-columns:1fr;}}

/* --- Térkép "süti-zár" doboz (lásd tp_terkep_beagyazas()) --- */
.tp-terkep-suti-zar{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;background:var(--tp-szin-hatter-szurke);border:2px dashed #B9C2D0;border-radius:var(--tp-radius);padding:20px;}
.tp-terkep-suti-zar p{margin:0;font-size:.85rem;color:var(--tp-szin-szoveg-halvany);}

/* --- Süti (GDPR) hozzájárulási sáv --- */
.tp-sutibanner{position:fixed;left:0;right:0;bottom:0;z-index:300;background:var(--tp-szin-hatter);box-shadow:0 -4px 24px rgba(0,0,0,.12);border-top:1px solid var(--tp-szin-vonal);}
.tp-sutibanner__belso{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 24px;flex-wrap:wrap;}
.tp-sutibanner__belso p{margin:0;font-size:.85rem;flex:1 1 320px;}
.tp-sutibanner__gombok{display:flex;gap:10px;flex:0 0 auto;}
html.tp-suti-sav-lathato .tp-akadalymentes{bottom:110px;}
@media (max-width:640px){.tp-sutibanner__belso{padding:14px 16px;}.tp-sutibanner__gombok{width:100%;}.tp-sutibanner__gombok .tp-btn{flex:1;justify-content:center;}}

/* --- Akadálymentesítés floating widget --- */
.tp-akadalymentes{position:fixed;right:20px;bottom:20px;z-index:200;}
.tp-akadalymentes__gomb{width:54px;height:54px;border-radius:50%;background:var(--tp-szin-elsodleges-szilard);color:#fff;border:0;padding:0;cursor:pointer;box-shadow:var(--tp-arnyek);display:flex;align-items:center;justify-content:center;}
.tp-akadalymentes__gomb svg{width:26px;height:26px;}
.tp-akadalymentes__panel{position:absolute;right:0;bottom:66px;background:var(--tp-szin-hatter);border-radius:var(--tp-radius);box-shadow:var(--tp-arnyek);padding:16px;display:flex;flex-direction:column;gap:8px;width:240px;}
.tp-akadalymentes__panel[hidden]{display:none;}
.tp-akadalymentes__panel h2{font-size:.95rem;margin-bottom:4px;}
.tp-am-opcio{text-align:left;padding:10px 12px;border-radius:10px;border:1px solid var(--tp-szin-vonal);background:var(--tp-szin-hatter);color:var(--tp-szin-szoveg);cursor:pointer;font-size:.9rem;}
.tp-am-opcio:hover{background:var(--tp-szin-hatter-szurke);}
.tp-am-opcio--reset{color:var(--tp-szin-hiba);border-color:#f2c9c6;}
/* Ugyanaz a sötét módos kontrasztjavítás, mint az admin felület kuka
   ikonjánál (lásd page-templates/template-admin.php megjegyzését) - ez a
   gomb is a --tp-szin-hatter (sötét módban sötét) hátterű .tp-am-opcio-n
   ül, a --tp-szin-hiba pedig nem vált világosabbra sötét módban. */
html[data-tp-dark="be"] .tp-am-opcio--reset{color:#f3b3ae;}

/* Akadálymentesítési állapot-osztályok a <html>-en */
html.tp-am-kontraszt body{background:#000;color:#fff;}
html.tp-am-kontraszt .tp-fejlec,html.tp-am-kontraszt .tp-lablec{background:#000;}
html.tp-am-alahuzas a{text-decoration:underline !important;}
html.tp-am-olvashato-betutipus body{font-family:Arial,Helvetica,sans-serif !important;}

/* =========================================================
   Sötét mód (dark mode) - Település adatok / Megjelenés admin
   beállításból vezérelve (lásd inc/template-shell.php, a <html>
   data-tp-dark attribútuma: "ki" | "be" | "automatikus").
   Csak a színváltozókat írjuk felül - minden elem, ami a
   --tp-szin-* változókat használja, automatikusan követi (kivéve a
   --tp-szin-elsodleges-szilard-ot, ami szándékosan mindig ugyanaz marad,
   lásd a definícióját feljebb).
   FONTOS: "automatikus" beállítás esetén szándékosan NEM nézzük meg a
   látogató böngészőjének/rendszerének sötét mód beállítását - ez
   kifejezett kérés volt (automatikus = mindig világos, ez a default),
   ezért itt nincs @media (prefers-color-scheme:dark) blokk. Csak a "be"
   (kézzel bekapcsolt) állapot kap tényleges sötét stílust.
   ========================================================= */
html[data-tp-dark="be"]{
	color-scheme:dark;
	--tp-szin-elsodleges:#DCE6F5;
	--tp-szin-elsodleges-vilagos:#B7C9E8;
	--tp-szin-szoveg:#E7EAF0;
	--tp-szin-szoveg-halvany:#A7AFBE;
	--tp-szin-hatter:#12161F;
	--tp-szin-hatter-szurke:#1B212D;
	--tp-szin-vonal:#2C3342;
	--tp-arnyek:0 8px 30px rgba(0,0,0,.35);
}
/* A címer/logó képek háttere mindig fehér marad (a legtöbb címer PNG
   átlátszó/sötét vonalú, sötét háttéren eltűnne) - ez direkt kivétel,
   nem a --tp-szin-hatter-t követi. */
html[data-tp-dark="be"] .tp-cimer-kep,html[data-tp-dark="be"] .tp-lablec__cimer{background:#fff;}

/* --- Belépő / görgetős animációk --- */
.tp-reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease;}
.tp-reveal.is-lathato{opacity:1;transform:none;}

/* --- Hero belépő animáció (2026 őszi bővítés, Bence kérése: "legalább
   belépési animációk legyenek") - a hero mindig a képernyő tetején, azonnal
   látható rész, ezért ez NEM a görgetős .tp-reveal/IntersectionObserver
   mechanizmust használja (aminek időzítése attól függ, mikor "látja meg" a
   böngésző), hanem egy önálló, oldalbetöltéskor lejátszódó, egymást követő
   (staggered) animáció-sorozatot: a dia képe finoman kicsit "kinagyítva"
   indul, majd a cím, a kereső/időjárás sáv és a közelgő események sorban,
   kis késleltetéssel jelennek meg. A .tp-hero__dia.is-aktiv szelektor miatt
   ez a diaváltásnál (amikor egy ÚJ dia kapja meg az is-aktiv osztályt) is
   újra lejátszódik - ez szándékos, egy kellemes, folyamatos hatást ad. */
@keyframes tp-hero-fel{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:translateY(0);}}
@keyframes tp-hero-nagyit{from{transform:scale(1.08);}to{transform:scale(1);}}
.tp-hero__dia.is-aktiv .tp-hero__kep{animation:tp-hero-nagyit 1.8s cubic-bezier(.22,.61,.36,1) both;}
.tp-hero__dia-cim h2{animation:tp-hero-fel .9s ease .2s both;}
.tp-hero__eszkozsav{animation:tp-hero-fel .9s ease .4s both;}
.tp-hero-esemenyek{animation:tp-hero-fel .9s ease .55s both;}

@media (prefers-reduced-motion:reduce){
	.tp-reveal{opacity:1;transform:none;transition:none;}
	html{scroll-behavior:auto;}
	.tp-hero__dia.is-aktiv .tp-hero__kep,
	.tp-hero__dia-cim h2,
	.tp-hero__eszkozsav,
	.tp-hero-esemenyek{animation:none;}
}

/* --- Gombok (megosztott alap) --- */
/* justify-content:center is kell, NEM csak align-items - enélkül egy olyan
   gomb, amit a szülő elrendezés (pl. CSS grid egy teljes szélességű
   celláját elfoglalva) szélesre nyújt, a feliratot balra tolva mutatta,
   nem középen (ez okozta pl. hogy a "Település adatok mentése" gomb
   felirata nem középen volt). */
.tp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:12px 24px;font-weight:600;cursor:pointer;text-decoration:none;font-family:var(--tp-font-szoveg);transition:transform .15s ease,filter .15s ease,box-shadow .15s ease;}
.tp-btn:hover{transform:translateY(-2px);}
.tp-btn:active{transform:translateY(0);}
.tp-btn--elsodleges{background:var(--tp-szin-kiemelo);color:#241a02;}
.tp-btn--elsodleges:hover{filter:brightness(1.05);box-shadow:0 8px 20px rgba(0,0,0,.12);}
.tp-btn--halvany{background:var(--tp-szin-hatter);border:1px solid var(--tp-szin-vonal);color:var(--tp-szin-elsodleges);}

/* --- Megosztott: cím + kép + rövid info kártya (Szolgáltatások, Civil,
   Látnivalók, Turizmus, gyűjtőoldalak) --- */
.tp-kartyaracs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:24px;}
@media (max-width:900px){.tp-kartyaracs{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.tp-kartyaracs{grid-template-columns:1fr;}}
/* A Pályázatok kártyarácsa (főoldali tab-panelek ÉS a gyűjtőoldal listája)
   Bence kifejezett kérésére telefonos nézetben is 2 oszlopban marad - a
   .tp-kartyaracs osztályt megosztva használó TÖBBI szekció (Látnivalók,
   Turizmus, Civil szervezetek stb.) viszont változatlanul 1 oszlopra vált,
   ezért ez a felülírás kifejezetten a Pályázatok saját azonosítóira/
   osztályára szól, nem magára a megosztott .tp-kartyaracs osztályra. */
@media (max-width:600px){#tp-palyazat-lista,.tp-palyazat-panel{grid-template-columns:1fr 1fr;gap:14px;}}
/* Bence kérésére a TELJES kártya kattintható, nem csak egy belső link -
   ezért maga a kártya egy <a> elem (lásd tp_render_egyszeru_kartya()). */
.tp-egyszerukartya{background:var(--tp-szin-hatter);border-radius:var(--tp-radius);box-shadow:var(--tp-arnyek);overflow:hidden;display:block;color:inherit;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease;}
.tp-egyszerukartya:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(27,51,88,.16);}
.tp-egyszerukartya__kep{display:block;aspect-ratio:16/10;}
.tp-egyszerukartya__tartalom{padding:18px;display:block;}
.tp-egyszerukartya__cim{display:block;font-family:var(--tp-font-cim);font-weight:700;font-size:1.05rem;margin:0 0 6px;color:var(--tp-szin-elsodleges);}
.tp-egyszerukartya__info{color:var(--tp-szin-szoveg-halvany);font-size:.9rem;margin:0;display:block;}

/* --- Szolgáltatás kártya - Bence kifejezett kérése, hogy a Szolgáltatások
   NE ugyanúgy nézzenek ki, mint a többi .tp-egyszerukartya-alapú lista
   (Civil szervezetek, Látnivalók stb.), hanem kapjanak saját, karakteresebb
   megjelenést. Megkülönböztető elemek: 1) a már meglévő arany
   (--tp-szin-kiemelo) akcentusszín felhasználása felső jelvényként és a
   kártya bal szegélyén - ez az egyetlen kártyatípus, ami ezt a színt
   használja jelvényként, ezért egyértelműen elüt a többségében kék
   (--tp-szin-elsodleges) árnyalatú kártyáktól -, 2) a kép/tartalom
   elrendezés helyett önálló, ikonos elérhetőség-sorok (cím/telefon/
   e-mail/weboldal), NEM egyetlen összefolyó szöveges "info" sor, mint a
   tp-egyszerukartya-nál. Lásd tp_render_szolgaltatas_kartya(). --- */
.tp-szolgkartya{background:var(--tp-szin-hatter);border-radius:var(--tp-radius);box-shadow:var(--tp-arnyek);overflow:hidden;border-left:4px solid var(--tp-szin-kiemelo);transition:transform .25s ease,box-shadow .25s ease;}
.tp-szolgkartya:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(27,51,88,.16);}
.tp-szolgkartya__kep{display:block;aspect-ratio:16/10;position:relative;}
.tp-szolgkartya__jelveny{position:absolute;top:12px;left:12px;background:var(--tp-szin-kiemelo);color:#3D2F04;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:5px 12px;border-radius:999px;box-shadow:0 4px 10px rgba(0,0,0,.18);}
.tp-szolgkartya__tartalom{padding:18px;display:flex;flex-direction:column;gap:10px;}
.tp-szolgkartya__cim{display:block;font-family:var(--tp-font-cim);font-weight:700;font-size:1.1rem;color:var(--tp-szin-elsodleges);text-decoration:none;}
.tp-szolgkartya__cim:hover{text-decoration:underline;}
.tp-szolgkartya__nyitva{color:var(--tp-szin-szoveg-halvany);font-size:.85rem;}
.tp-szolgkartya__elerhetosegek{display:flex;flex-direction:column;gap:6px;padding-top:8px;border-top:1px dashed var(--tp-szin-vonal);}
.tp-szolgkartya__sor{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--tp-szin-szoveg);text-decoration:none;}
a.tp-szolgkartya__sor:hover{color:var(--tp-szin-elsodleges);text-decoration:underline;}
/* Bence kérésére telefonos nézetben is 2 oszlopban maradjon a Szolgáltatások
   rácsa, hogy a kártyák megkülönböztető kinézete (jelvény, elérhetőség-sorok)
   ne váljon túl "nyújtottá" egyetlen keskeny oszlopban. */
@media (max-width:600px){.tp-kartyaracs--szolg{grid-template-columns:1fr 1fr;gap:14px;}}

/* --- Hír kártya (Főoldal ÉS Round F óta a Hírek gyűjtőoldal is használja,
   lásd tp_render_hirkartya() az inc/front-render.php-ban) - ezért lett
   ide, a megosztott stílusok közé áthelyezve. --- */
/* ÁTDOLGOZVA (Bence kérése: "ne ennyire tipikus kinézete, teljes oldal
   szélességben, nagyon kicsi paddinggel, különböző méretben egymás mellett,
   mozaikszerűen - csak a skin, funkcionálisan ugyanaz maradjon"):
   - a rács egy "100vw kitörős" trükkel lóg ki a ".tp-container"-ből, hogy
     tényleg a böngészőablak széléig érjen, FÜGGETLENÜL attól, hogy a
     Főoldalon vagy a Hírek gyűjtőoldalon (mindkettő ".tp-container"-be
     ágyazva hívja) jelenik-e meg - ezt a chatben jelzem, mert technikai
     megoldás, nem kért konkrét markup-átalakítás.
   - CSS grid-del, néhány elem 2 oszlop/2 sor "nagyobb" méretet kap
     (nth-child minta, 5 elemenként ismétlődve) - ez adja a mozaik hatást,
     "grid-auto-flow:dense" tölti ki az esetleges kieső réseket.
   - maga a kártya most kép-háttér + alul sötétítő átmenetes felirat
     (ugyanaz a vizuális nyelv, mint a hero dia-címe), hogy bármilyen
     csempeméretben jól nézzen ki, és a cím ne törje szét az elrendezést. */
.tp-hirracs{display:grid;grid-template-columns:repeat(9,1fr);grid-auto-rows:170px;gap:6px;margin-top:24px;width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;padding:0 6px;}
/* ÚJRATERVEZVE (4. kör, Bence pontos leírása alapján: "legyen a második
   harmadik negyedik 2 sorban, tehát ott összesen ha van annyi hír akkor 6
   majd balra egy nagy jelenjen meg" + egy tisztázó kérdésre adott konkrét
   válasza: ha a jobb oldalon épp 3 hír van, az "2 hír fent, 1 hír lent"
   legyen, NEM mindhárom egy sorban és NEM 1 fent/2 lent).
   9-osztatú rácsot használunk: az 1-3. oszlopot (3 egység) foglalja el a
   bal oldali NAGY, kiemelt hír, a 4-9. oszlopot (6 egység) a jobb oldali
   kisebb hírek, max. 6 db-ig, 2 sorban, soronként 3-3 elemmel (2-2 egység
   mindegyik). 7-es ismétlődő ciklussal dolgozunk (1 nagy + 6 kicsi = 7
   hír egy teljes "egységben") - a nagy kártya 2 sort foglal (grid-row:
   span 2), ezért a böngésző natív, NEM "dense" grid-elhelyezése magától,
   automatikusan tölti ki mellette/alatta a 2x3-as kis rácsot, a hírek
   sorrendjét megtartva. */
.tp-hirracs .tp-hirkartya:nth-child(7n+1){grid-column:span 3;grid-row:span 2;}
.tp-hirracs .tp-hirkartya:nth-child(7n+2),
.tp-hirracs .tp-hirkartya:nth-child(7n+3),
.tp-hirracs .tp-hirkartya:nth-child(7n+4),
.tp-hirracs .tp-hirkartya:nth-child(7n+5),
.tp-hirracs .tp-hirkartya:nth-child(7n+6),
.tp-hirracs .tp-hirkartya:nth-child(7n){grid-column:span 2;}
/* Ha a hírek száma NEM pontosan 7 többszöröse (1 nagy + 6 kicsi), az
   utolsó, félbemaradt csoportot (0-5 db kicsi hír jutott a nagy mellé)
   kezeljük külön, hogy a jobb oldali rács akkor is hézagmentesen töltse
   ki a helyét. Bence KONKRÉTAN csak az "1 nagy + 3 kicsi" esetet
   erősítette meg (ez a jelenleg élő állapot is, lásd a 7n+4 blokkot) -
   a többi eset (0, 1, 2, 4, 5 kicsi hír) az ebből én által levezetett,
   kiterjesztett minta, ezt a chatben is jelzem. */
/* 0 kicsi hír jobbra: a nagy hír egyedül marad, teljes szélességben (9
   egység), 1 sor magasan. */
.tp-hirracs:has(> .tp-hirkartya:nth-child(7n+1):last-child) .tp-hirkartya:last-child{grid-column:span 9;grid-row:span 1;}
/* 1 kicsi hír jobbra: a nagy hír alacsony marad (1 sor), a kicsi hír a
   teljes jobb oldali szélességet (6 egység) tölti ki egy sorban. */
.tp-hirracs:has(> .tp-hirkartya:nth-child(7n+2):last-child) .tp-hirkartya:nth-last-child(2){grid-row:span 1;}
.tp-hirracs:has(> .tp-hirkartya:nth-child(7n+2):last-child) .tp-hirkartya:last-child{grid-column:span 6;}
/* 2 kicsi hír jobbra: a nagy hír alacsony marad (1 sor), a 2 kicsi hír
   egyenlő arányban (3-3 egység) osztja a jobb oldalt, egy sorban. */
.tp-hirracs:has(> .tp-hirkartya:nth-child(7n+3):last-child) .tp-hirkartya:nth-last-child(3){grid-row:span 1;}
.tp-hirracs:has(> .tp-hirkartya:nth-child(7n+3):last-child) .tp-hirkartya:nth-last-child(-n+2){grid-column:span 3;}
/* 3 kicsi hír jobbra (Bence KONKRÉTAN megerősített esete, ez a jelenlegi
   élő állapot is: 2., 3., 4. hír): a nagy hír 2 sor magas marad (az alap
   szabály ezt már adja), fent 2 kicsi hír egyenlő arányban (3-3 egység),
   lent 1 kicsi hír a teljes jobb oldali szélességben (6 egység). */
.tp-hirracs:has(> .tp-hirkartya:nth-child(7n+4):last-child) .tp-hirkartya:nth-last-child(3),
.tp-hirracs:has(> .tp-hirkartya:nth-child(7n+4):last-child) .tp-hirkartya:nth-last-child(2){grid-column:span 3;}
.tp-hirracs:has(> .tp-hirkartya:nth-child(7n+4):last-child) .tp-hirkartya:last-child{grid-column:span 6;}
/* 4 kicsi hír jobbra (saját kiterjesztés): fent 2 kicsi hír (3-3 egység),
   lent 2 kicsi hír (3-3 egység). */
.tp-hirracs:has(> .tp-hirkartya:nth-child(7n+5):last-child) .tp-hirkartya:nth-last-child(4),
.tp-hirracs:has(> .tp-hirkartya:nth-child(7n+5):last-child) .tp-hirkartya:nth-last-child(3){grid-column:span 3;}
.tp-hirracs:has(> .tp-hirkartya:nth-child(7n+5):last-child) .tp-hirkartya:nth-last-child(-n+2){grid-column:span 3;}
/* 5 kicsi hír jobbra (saját kiterjesztés): fent 3 kicsi hír (az alap
   2-2-2 egység minta már jó, nincs felülírás), lent 2 kicsi hír (3-3
   egység). */
.tp-hirracs:has(> .tp-hirkartya:nth-child(7n+6):last-child) .tp-hirkartya:nth-last-child(-n+2){grid-column:span 3;}

/* Negyedoszlopos VÁLASZTÉK (Bence korábbi kérése: "lehet 4 oszlop is") -
   admin felületen kapcsolható (Település adatok -> Megjelenés -> "Hírek
   mozaik oszlopai"). Az elrendezés (nagy bal + 2x3-as jobb rács) ettől a
   kapcsolótól függetlenül ugyanaz marad - a "4 oszlopos" beállítás itt
   abban különbözik, hogy a kártyák valamivel magasabbak/nagyobbak. */
.tp-hirracs--4oszlopos{grid-auto-rows:200px;}

/* Bence kérésére a teljes kártya kattintható, ezért maga a kártya egy <a>. */
.tp-hirkartya{position:relative;display:block;height:100%;background:var(--tp-szin-hatter-szurke);border-radius:10px;box-shadow:var(--tp-arnyek);overflow:hidden;color:inherit;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease;}
.tp-hirkartya:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(27,51,88,.2);}
.tp-hirkartya__kep{position:absolute;inset:0;display:block;}
.tp-hirkartya__kep .tp-img,.tp-hirkartya__kep .tp-img-placeholder{border-radius:0;}
.tp-hirkartya__tartalom{position:absolute;left:0;right:0;bottom:0;display:block;padding:16px 16px 14px;background:linear-gradient(0deg,rgba(8,13,24,.92) 0%,rgba(8,13,24,.55) 55%,rgba(8,13,24,0) 100%);}
.tp-hirkartya__cimkek{display:flex;gap:6px;margin-bottom:8px;}
.tp-badge{font-size:.7rem;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--tp-szin-hatter-szurke);color:var(--tp-szin-elsodleges);text-transform:uppercase;align-self:flex-start;}
.tp-badge--tuzott{background:#fdecc8;}
.tp-hirkartya__cim{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-family:var(--tp-font-cim);font-weight:700;font-size:1.02rem;margin:0 0 4px;color:#fff;}
.tp-hirracs .tp-hirkartya:nth-child(7n+1) .tp-hirkartya__cim{-webkit-line-clamp:3;font-size:1.2rem;}
.tp-hirkartya__datum{display:block;font-size:.76rem;color:rgba(255,255,255,.78);}
.tp-hirek-szekcio .tp-tovabb-sor{margin-top:28px;}
@media (max-width:900px){
	/* Tableten ugyanaz a nagy bal + 2x3-as jobb rács marad (a fenti,
	   901px fölötti szabályok nth-child-alapon ide is érvényesek) - itt
	   csak alacsonyabb sormagasságot kap, hogy a keskenyebb kártyák ne
	   legyenek aránytalanul magasak. */
	.tp-hirracs{grid-auto-rows:130px;}
}
@media (max-width:600px){
	/* Mobilon a mozaik elrendezés nem értelmezhető (1 oszlop) - itt minden
	   kártyát visszaállítunk egységes, 1 oszlop/1 sor méretre (a nagy
	   kiemelt hír is "lelapul"), így egyszerű, függőleges listaként
	   jelenik meg, az eddigi mobil-nézethez hasonlóan. */
	.tp-hirracs{grid-template-columns:1fr;grid-auto-rows:220px;gap:10px;padding:0 10px;}
	.tp-hirracs .tp-hirkartya{grid-column:span 1 !important;grid-row:span 1 !important;}
}

/* --- Hírek kategória-cimke szűrő (Főoldal) - kattintásra kliens-oldali
   szűrés (assets/js/global.js), nincs külön URL-je (nem is volt kérve a
   Főoldalhoz) - a gyűjtőoldalnak változatlanul megvan a saját, szerveroldali,
   saját URL-es tab-rendszere (lásd template-hirek-gyujto.php), azt nem ez
   a kód vezérli. --- */
.tp-cimke-szuro{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;margin-bottom:4px;}
.tp-cimke-gomb{border:1.5px solid var(--tp-szin-vonal);background:var(--tp-szin-hatter);color:var(--tp-szin-szoveg);font-size:.82rem;font-weight:600;padding:6px 16px;border-radius:999px;cursor:pointer;transition:.2s;}
.tp-cimke-gomb:hover{border-color:var(--tp-szin-kiemelo);}
.tp-cimke-gomb.is-aktiv{background:var(--tp-szin-elsodleges-szilard);border-color:var(--tp-szin-elsodleges-szilard);color:#fff;}

/* --- Intézmény kártya (Főoldal ÉS Round F óta az Intézmények gyűjtőoldal
   is használja, lásd tp_render_intezmenykartya()). --- */
.tp-intezmenyracs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:24px;padding-bottom:40px;}
/* Bence kérésére a teljes kártya kattintható (nem csak a "Részletek" link),
   ezért maga a kártya egy <a> elem. */
.tp-intezmenykartya{background:var(--tp-szin-hatter);border-radius:var(--tp-radius);padding:18px;box-shadow:var(--tp-arnyek);display:block;color:inherit;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease;}
.tp-intezmenykartya:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(27,51,88,.16);}
.tp-intezmenykartya__kep{display:block;aspect-ratio:16/10;border-radius:10px;overflow:hidden;margin-bottom:12px;}
.tp-intezmenykartya__cim-sor{display:block;font-family:var(--tp-font-cim);font-weight:700;color:var(--tp-szin-elsodleges);font-size:1.15rem;margin-bottom:.5em;}
.tp-intezmenykartya__cim{display:block;color:var(--tp-szin-szoveg-halvany);font-size:.9rem;}
.tp-link-tovabb{display:inline-block;margin-top:8px;color:var(--tp-szin-kiemelo-szoveg);font-weight:700;}
@media (max-width:900px){.tp-intezmenyracs{grid-template-columns:1fr 1fr;}}
/* Bence kifejezett kérésére telefonos nézetben is 2 oszlopban maradnak
   (a legtöbb más kártyarács - .tp-kartyaracs - ilyen szűk nézetben 1
   oszlopra vált, de az Intézmények és a Pályázatok kártyái elég
   kompaktak 2 oszlopban is jól mutatnak). */
@media (max-width:600px){.tp-intezmenyracs{grid-template-columns:1fr 1fr;gap:14px;}.tp-intezmenykartya{padding:12px;}.tp-intezmenykartya__cim-sor{font-size:1rem;}}

/* --- Szekció-közök MINDEN oldalon (nem csak a Főoldalon) ---
   Korábban ez a két osztály csak a Főoldal sablon saját <style>
   blokkjában élt, ezért minden MÁS oldal (pl. Események, Turizmus,
   Látnivalók, a dokumentumlista-oldalak), ami ugyanezt a
   ".tp-container tp-szekcio" mintát használja, tényleges felső térköz
   nélkül maradt - ez okozta pl., hogy az Események naptár címe szinte
   hozzáért a fejléc alatti sávhoz. Mostantól minden oldal megkapja. */
.tp-szekcio{margin-top:64px;padding-top:48px;padding-bottom:48px;}
/* Egy nagyon halvány, apró pöttyös minta a szürke alapú szekciók
   hátterében - Bence kérése egy kicsit "látványosabb", kevésbé steril
   megjelenésre, anélkül hogy a szöveg olvashatóságát rontaná.
   MÓDOSÍTVA (Bence kérése: "minden blokk legyen teljes oldalszélesség, a
   tartalomnál/címeknél maradjon padding") - ez az osztály mostantól NEM a
   ".tp-container"-rel EGYÜTT, UGYANAZON az elemen él (ahogy korábban), hanem
   a KÜLSŐ <section>-en, ami emiatt a teljes böngészőablak szélességéig
   kiterjed (nincs max-szélessége), a cím/tartalom pedig egy BELSŐ
   ".tp-container" div-ben marad padding-elve - pontosan ugyanaz a minta,
   amit a fejléc/lábléc már eddig is követett. Ez a chatben jelzett,
   technikai (markup-)változtatás: a Főoldal 3 érintett szekciójában
   (Intézmények, Elérhetőségek, MOHU) a <section>-en belül most már egy
   külön <div class="tp-container"> öleli körbe a tartalmat - lásd
   template-fooldal.php. A kerekített sarok (border-radius) emiatt
   elhagyva, mert egy teljes szélességű sávnál nem értelmezhető/nem látszana. */
.tp-szekcio--szurke{background-color:var(--tp-szin-hatter-szurke);background-image:radial-gradient(circle,rgba(27,51,88,.06) 1.5px,transparent 1.5px);background-size:24px 24px;}

/* Halvány, EGYRE KISEBB pöttyökből álló dekor-flourish FEHÉR hátterű
   részekhez - Bence kérése: "néha néha... de átmenetben, hogy nagyobb és
   egyre kisebb lesz", de KIFEJEZETTEN NEM a teljes hátteret beborítva,
   csak elvétve, néhány helyen. Pontos, folytonos "nagyságátmenetet" a CSS
   natív radial-gradient háttere nem tud (egy rétegen belül minden pötty
   egyforma) - ezért 3, egymásra rétegzett, csökkenő méretű pöttyrácsot
   adunk, és egy sarokból induló, kifelé elhalványuló mask-kel zárjuk le,
   hogy a minta tényleg csak egy kis sarokra korlátozódjon, ne az egész
   szekcióra - ezt a technikai közelítést a chatben jelzem. Használat: a
   kívánt szekcióra/article-re kell tenni a "tp-dekor-pottyok" osztályt
   (opcionálisan "tp-dekor-pottyok--balra" és/vagy "--alul" módosítóval),
   csak NÉHÁNY, választott helyen - nem minden fehér szekción. */
.tp-dekor-pottyok{position:relative;overflow:hidden;}
.tp-dekor-pottyok::before{
	content:"";
	position:absolute;
	top:-30px;right:-30px;
	width:340px;height:340px;
	background-image:
		radial-gradient(circle,rgba(27,51,88,.14) 3px,transparent 3.5px),
		radial-gradient(circle,rgba(27,51,88,.11) 2px,transparent 2.5px),
		radial-gradient(circle,rgba(27,51,88,.08) 1px,transparent 1.5px);
	background-size:48px 48px,30px 30px,18px 18px;
	background-position:0 0,16px 12px,30px 26px;
	-webkit-mask-image:radial-gradient(circle at top right,rgba(0,0,0,.9) 0%,transparent 68%);
	mask-image:radial-gradient(circle at top right,rgba(0,0,0,.9) 0%,transparent 68%);
	pointer-events:none;
	z-index:0;
}
.tp-dekor-pottyok--balra::before{right:auto;left:-30px;-webkit-mask-image:radial-gradient(circle at top left,rgba(0,0,0,.9) 0%,transparent 68%);mask-image:radial-gradient(circle at top left,rgba(0,0,0,.9) 0%,transparent 68%);}
.tp-dekor-pottyok--alul::before{top:auto;bottom:-30px;-webkit-mask-image:radial-gradient(circle at bottom right,rgba(0,0,0,.9) 0%,transparent 68%);mask-image:radial-gradient(circle at bottom right,rgba(0,0,0,.9) 0%,transparent 68%);}
.tp-dekor-pottyok--balra.tp-dekor-pottyok--alul::before{-webkit-mask-image:radial-gradient(circle at bottom left,rgba(0,0,0,.9) 0%,transparent 68%);mask-image:radial-gradient(circle at bottom left,rgba(0,0,0,.9) 0%,transparent 68%);}
.tp-dekor-pottyok > *{position:relative;z-index:1;}
@media (max-width:600px){.tp-dekor-pottyok::before{width:220px;height:220px;}}
/* A ".tp-szekcio--kompakt" (korábban a Főoldal Szolgáltatások sorának kisebb
   súlyú megjelenése) Bence mostani kérésére megszűnt - lásd a
   template-fooldal.php Szolgáltatások szekciójának megjegyzését - ezért ez
   az osztály innen törölve, nincs már sehol használatban. */
.tp-ures-allapot{color:var(--tp-szin-szoveg-halvany);}

/* Szolgáltatások - kompakt "mini" lista a Főoldalon (lásd tp_render_szolgaltatas_mini_sor()).
   A saját Szolgáltatások oldal (tp-szolgkartya) NAGY, képes kártyáival
   ellentétben ez csak egy apró, sűrűn tördelhető névsor + ikonok, hogy a
   szekció ne foglaljon akkora helyet, mint a többi, fontosabb szekció. */
.tp-szolg-mini-lista{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;}
.tp-szolg-mini{display:flex;align-items:center;gap:8px;background:var(--tp-szin-hatter-szurke);border-radius:999px;padding:8px 14px;font-size:.85rem;}
.tp-szolg-mini__nev{color:var(--tp-szin-elsodleges);font-weight:600;text-decoration:none;}
.tp-szolg-mini__nev:hover{text-decoration:underline;}
.tp-szolg-mini__ikonok{display:flex;gap:6px;}
.tp-szolg-mini__ikonok a{text-decoration:none;font-size:.9rem;}

/* --- Névjegykártya (Személyek) - a kép NEM hangsúlyos --- */
.tp-nevjegyracs{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:24px;}
@media (max-width:900px){.tp-nevjegyracs{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.tp-nevjegyracs{grid-template-columns:1fr;}}
.tp-nevjegy{background:var(--tp-szin-hatter);border-radius:var(--tp-radius);box-shadow:var(--tp-arnyek);padding:20px;display:flex;gap:14px;align-items:flex-start;transition:transform .25s;}
.tp-nevjegy:hover{transform:translateY(-3px);}
.tp-nevjegy__kep{width:56px;height:56px;border-radius:50%;overflow:hidden;flex-shrink:0;}
.tp-nevjegy__adatok{display:flex;flex-direction:column;gap:3px;font-size:.9rem;}
.tp-nevjegy__adatok strong{font-size:1rem;color:var(--tp-szin-elsodleges);}
.tp-nevjegy__munkakor{color:var(--tp-szin-szoveg-halvany);}
.tp-nevjegy__adatok a{color:var(--tp-szin-szoveg);text-decoration:none;}
/* Ügyfélfogadás egy Képviselő testület tag kártyáján belül (2026 őszi bővítés) -
   kisebb méretben, mint a Kapcsolat oldal önkormányzati ügyfélfogadás listája. */
.tp-nevjegy__ugyfelfogadas{margin-top:4px;width:100%;}
.tp-nevjegy__ugyfelfogadas-cim{display:block;font-size:.78rem;font-weight:700;color:var(--tp-szin-elsodleges);margin-bottom:2px;}
.tp-nevjegy__ugyfelfogadas .tp-ugyfelfogadas-lista{font-size:.82rem;}
.tp-nevjegy__ugyfelfogadas .tp-ugyfelfogadas-lista li{padding:4px 0;}

/* --- Városrészenkénti csoportosítás a Képviselő testület oldalon (2026 őszi
   bővítés) - csak akkor jelenik meg, ha legalább egy tagnak van megadva
   városrésze, lásd inc/front-render.php tp_render_kepviselo_testulet_oldal(). --- */
.tp-varosresz-csoport{margin-bottom:36px;}
.tp-varosresz-csoport__cim{margin:0 0 4px;padding-bottom:8px;border-bottom:1px solid var(--tp-szin-vonal);}

/* --- Bizottságok (2026 őszi bővítés) - a Képviselő testület oldal alján,
   önálló szekcióként (lásd inc/front-render.php). --- */
.tp-bizottsagok{margin-top:12px;}
.tp-bizottsagracs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px;}
@media (max-width:900px){.tp-bizottsagracs{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.tp-bizottsagracs{grid-template-columns:1fr;}}
.tp-bizottsagkartya{background:var(--tp-szin-hatter);border-radius:var(--tp-radius);box-shadow:var(--tp-arnyek);padding:20px;transition:transform .25s;}
.tp-bizottsagkartya:hover{transform:translateY(-3px);}
.tp-bizottsagkartya h3{margin:0 0 10px;color:var(--tp-szin-elsodleges);}
.tp-bizottsagkartya__elnok{margin:0 0 8px;font-size:.9rem;}
.tp-bizottsagkartya__tagok-cim{margin:0 0 4px;font-size:.9rem;}
.tp-bizottsagkartya__tagok{list-style:none;margin:0;padding:0;font-size:.88rem;color:var(--tp-szin-szoveg-halvany);}
.tp-bizottsagkartya__tagok li{padding:3px 0;}

/* --- Adóügyek / Szociális ügyek megosztott lista (2026 őszi bővítés) - lásd
   inc/front-render.php tp_render_leiras_lista_oldal(). --- */
.tp-leiraslista{display:flex;flex-direction:column;gap:18px;margin-top:12px;}
.tp-leiraskartya{background:var(--tp-szin-hatter);border-radius:var(--tp-radius);box-shadow:var(--tp-arnyek);padding:24px;}
.tp-leiraskartya h2{margin:0 0 8px;color:var(--tp-szin-elsodleges);}
.tp-leiraskartya__adoszam{color:var(--tp-szin-szoveg-halvany);margin:0 0 10px;}
.tp-leiraskartya__szoveg{line-height:1.7;}
.tp-leiraskartya .tp-dokulista{margin-top:14px;}

/* --- Publikus tabsor (gyűjtőoldalak: Pályázatok, Turizmus) --- */
.tp-tabsor{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;}
.tp-tab{text-decoration:none;padding:8px 16px;border-radius:999px;background:var(--tp-szin-hatter);color:var(--tp-szin-szoveg-halvany);font-size:.85rem;font-weight:600;border:1px solid var(--tp-szin-vonal);cursor:pointer;}
.tp-tab.is-aktiv{background:var(--tp-szin-elsodleges-szilard);color:#fff;border-color:var(--tp-szin-elsodleges-szilard);}
/* Másodlagos (beágyazott) tabsor - pl. a Közbeszerzések "Tervek,
   módosítások" fülén belüli évválasztó - kisebb, halványabb, hogy jól
   elkülönüljön a fő (Tervek/Eljárások) tabsortól. */
.tp-tabsor--masodlagos{margin-top:4px;margin-bottom:20px;}
.tp-tabsor--masodlagos .tp-tab{padding:5px 12px;font-size:.78rem;}

.tp-oldal-intro{color:var(--tp-szin-szoveg-halvany);max-width:720px;margin:0 0 24px;}
.tp-tovabb-sor{text-align:center;margin-top:32px;}

/* --- Dokumentum lista (Nyomtatványok) --- */
.tp-dokulista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.tp-dokulista li{background:var(--tp-szin-hatter);border-radius:12px;box-shadow:var(--tp-arnyek);padding:14px 18px;display:flex;align-items:center;gap:14px;}
.tp-dokulista__ikon{font-size:1.6rem;}
.tp-dokulista__adatok{flex:1;}
.tp-dokulista__adatok strong{display:block;color:var(--tp-szin-elsodleges);}
.tp-dokulista__adatok p{margin:2px 0 0;font-size:.85rem;color:var(--tp-szin-szoveg-halvany);}
.tp-dokulista__datum{display:block;font-size:.78rem;color:var(--tp-szin-szoveg-halvany);}

/* --- Naptár (Események oldal) --- */
.tp-naptar{width:100%;border-collapse:collapse;background:var(--tp-szin-hatter);border-radius:var(--tp-radius);overflow:hidden;box-shadow:var(--tp-arnyek);}
.tp-naptar th{background:var(--tp-szin-elsodleges-szilard);color:#fff;padding:10px;font-size:.8rem;}
.tp-naptar td{border:1px solid var(--tp-szin-vonal);vertical-align:top;height:90px;width:14.28%;padding:6px;font-size:.85rem;}
.tp-naptar td.tp-naptar__ma{background:#fdf6e3;}
.tp-naptar__esemeny{display:block;background:var(--tp-szin-elsodleges-szilard);color:#fff;border-radius:6px;padding:2px 6px;font-size:.72rem;margin-top:4px;text-decoration:none;}
.tp-naptar-fejlec{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.tp-naptar-fejlec a{text-decoration:none;font-weight:700;color:var(--tp-szin-elsodleges);}

/* --- Kapcsolati form --- */
.tp-kapcsolat-racs{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:24px;align-items:start;}
@media (max-width:800px){.tp-kapcsolat-racs{grid-template-columns:1fr;}}
.tp-ugyfelfogadas-lista{list-style:none;margin:0;padding:0;}
.tp-ugyfelfogadas-lista li{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--tp-szin-vonal);}

/* --- Saját (nem gyári) lightbox - lásd assets/js/global.js és
   inc/helpers.php tp_render_galeria_kepek() - MINDEN galéria-kép ide
   nyílik meg kattintásra, a saját dizájnunkkal, nem a böngésző/egy
   plugin gyári nézegetőjével. --- */
.tp-lightbox-trigger{display:block;cursor:zoom-in;}
.tp-lightbox{position:fixed;inset:0;background:rgba(8,13,24,.93);z-index:500;display:flex;align-items:center;justify-content:center;}
.tp-lightbox[hidden]{display:none;}
.tp-lightbox__kep-tarto{max-width:88vw;max-height:82vh;}
.tp-lightbox__kep{max-width:88vw;max-height:82vh;display:block;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.5);object-fit:contain;}
.tp-lightbox__bezar{position:absolute;top:20px;right:20px;background:rgba(255,255,255,.14);color:#fff;border:0;width:40px;height:40px;border-radius:50%;font-size:1.4rem;line-height:1;cursor:pointer;}
.tp-lightbox__bezar:hover{background:rgba(255,255,255,.24);}
.tp-lightbox__nyil{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.14);color:#fff;border:0;width:48px;height:48px;border-radius:50%;font-size:1.8rem;line-height:1;cursor:pointer;}
.tp-lightbox__nyil:hover{background:rgba(255,255,255,.24);}
.tp-lightbox__nyil--elozo{left:16px;}
.tp-lightbox__nyil--kovetkezo{right:16px;}
.tp-lightbox__szamlalo{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);color:#fff;font-size:.82rem;background:rgba(255,255,255,.14);padding:4px 14px;border-radius:999px;}
body.tp-lightbox-nyitva{overflow:hidden;}
@media (max-width:600px){
	.tp-lightbox__nyil{width:38px;height:38px;font-size:1.3rem;}
	.tp-lightbox__bezar{width:34px;height:34px;top:12px;right:12px;font-size:1.2rem;}
	.tp-lightbox__nyil--elozo{left:8px;}
	.tp-lightbox__nyil--kovetkezo{right:8px;}
}