/* ==========================================================================
   Keret: felső sáv, fejléc, főmenü, kereső, mobil fiók, aloldal-fejléc,
   lábléc, mobil műveletsáv.
   ========================================================================== */

.keret { max-width: var(--keret); margin-inline: auto; padding-inline: var(--pad); }

/* Konténer a komponensek @container szabályaihoz: a tartalmi keret és minden
   Elementor-widget (.psa-w). A fejléc és a lábléc kerete szándékosan NEM
   konténer — a konténer rétegkontextust és tartalmazó blokkot is nyit, ami a
   legördülő menüt és a fix elemeket érintené. */
.site-main .keret, .psa-w { container-type: inline-size; }
/* A matrica tartalomszélességű (egy sorban több is elfér), és nincs
   konténerszabálya: konténerként nem lenne saját szélessége. */
.psa-w--matrica { container-type: normal; }

/* hullámos szekcióhatár (inline SVG) */
.hatar { display: block; width: 100%; height: clamp(28px, 4vw, 60px); }

/* --------------------------------------------------------------------------
   Felső sáv
   -------------------------------------------------------------------------- */
.felso-sav { background: var(--sotetkek); color: rgba(255, 255, 255, .88); font-size: 14px; font-weight: 600; }
.felso-sav .keret { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; }
.felso-sav a { color: inherit; text-decoration: none; }
.felso-sav a:hover { color: #fff; }
.fs-bal, .fs-jobb { display: flex; align-items: center; }
.fs-bal { gap: 22px; min-width: 0; }
.fs-jobb { gap: 10px; flex: none; }
.fs-elem { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.fs-elem svg { width: 16px; height: 16px; color: var(--arany); flex: none; }

.kozossegi {
	width: 32px; height: 32px; border-radius: 50%; flex: none;
	background: rgba(255, 255, 255, .12);
	display: inline-flex; align-items: center; justify-content: center;
	transition: background .15s, transform .15s;
}
.kozossegi:hover { background: var(--kek); transform: rotate(-8deg); }
.kozossegi svg { width: 15px; height: 15px; fill: #fff; }

.kreta-gomb {
	display: inline-flex; align-items: center; gap: 7px; margin-left: 4px;
	padding: 6px 15px 5px; border-radius: 999px;
	background: var(--arany); color: var(--tinta) !important;
	font-family: var(--betu-cim); font-weight: 700; font-size: 15px; white-space: nowrap;
	box-shadow: 0 3px 0 var(--arany-mely);
}
.kreta-gomb:hover { background: #E8D882; }
.kreta-gomb svg { width: 15px; height: 15px; }

/* --------------------------------------------------------------------------
   Fejléc (ragadós)
   -------------------------------------------------------------------------- */
.fejlec { background: #fff; position: sticky; top: 0; z-index: 40; box-shadow: 0 2px 0 var(--kek-100); }
.admin-bar .fejlec { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar .fejlec { top: 0; } }

.fejlec > .keret { display: flex; align-items: center; gap: 24px; min-height: var(--fejlec-m); }

.marka { display: flex; align-items: center; gap: 13px; text-decoration: none; flex: none; }
.cimer {
	width: 58px; height: 58px; border-radius: 50%; flex: none; object-fit: cover; background: #fff;
	box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--arany);
	transition: transform .4s;
}
.marka:hover .cimer { transform: rotate(-12deg) scale(1.05); }
.marka-szoveg { display: block; }
.marka-szoveg strong {
	display: block; font-family: var(--betu-cim); font-weight: 800; font-size: 20px; line-height: 1.05; color: var(--sotetkek);
}
.marka-szoveg span {
	display: block; font-family: var(--betu-kezi); font-size: 21px; font-weight: 700; color: var(--piros); line-height: 1; margin-top: 3px;
}

/* --------------------------------------------------------------------------
   Főmenü — legördülő almenük. Egér: hover; billentyű: :focus-within;
   érintés: az almenü-gomb (.almenu-gomb) nyitja-zárja.
   -------------------------------------------------------------------------- */
.fomenu { margin-left: auto; }
.fomenu-lista { display: flex; align-items: center; gap: 4px; list-style: none; }
/* Hosszú főmenü (a fejléc mérőszkriptje, template-parts/header/fejlec.php):
   ha a márka mellett nem fér el egy sorban, a fejléc második sorába kerül
   (.menu-ket-sor); ha ott sem, a fiók veszi át (.menu-szuk). Ha a szkript
   nem futott (.menu-mert nélkül), a menü két sorba törik — nem lóg ki. */
.fejlec:not(.menu-mert) .fomenu { min-width: 0; }
.fejlec:not(.menu-mert) .fomenu-lista { flex-wrap: wrap; justify-content: flex-end; }
.fejlec.menu-ket-sor > .keret { flex-wrap: wrap; row-gap: 0; }
.fejlec.menu-ket-sor .fomenu { order: 5; flex: 1 0 100%; margin: 0; padding-block: 6px 8px; border-top: 2px dashed var(--kek-50); }
.fejlec.menu-ket-sor .fomenu-lista { justify-content: flex-start; margin-left: -12px; }
.fejlec.menu-ket-sor .kereso-gomb { margin-left: auto; }
.fejlec.menu-szuk .fomenu { display: none; }
.fejlec.menu-szuk .hamburger { display: inline-flex; }
.fejlec.menu-szuk .kereso-gomb { margin-left: auto; }
.fomenu-lista > li { position: relative; display: flex; align-items: center; --szin: var(--kek); --hatter: var(--kek-50); }
.fomenu-lista > li:nth-child(5n+2) { --szin: var(--piros); --hatter: var(--piros-50); }
.fomenu-lista > li:nth-child(5n+3) { --szin: var(--zold); --hatter: var(--zold-50); }
.fomenu-lista > li:nth-child(5n+4) { --szin: var(--arany-szoveg); --hatter: var(--arany-50); }
.fomenu-lista > li:nth-child(5n+5) { --szin: var(--sotetkek); --hatter: var(--kek-50); }

.fomenu-lista > li > a {
	display: block; padding: 9px 12px 7px; border-radius: 999px; text-decoration: none; white-space: nowrap;
	font-family: var(--betu-cim); font-weight: 700; font-size: 17px; color: var(--tinta);
	transition: background .15s, color .15s;
}
.fomenu-lista > li.menu-item-has-children > a { padding-right: 4px; }
.fomenu-lista > li > a:hover,
.fomenu-lista > li:focus-within > a,
.fomenu-lista > li.nyitva > a,
.fomenu-lista > .current-menu-item > a,
.fomenu-lista > .current-menu-ancestor > a,
.fomenu-lista > .current-menu-parent > a { background: var(--hatter); color: var(--szin); }

.almenu-gomb {
	width: 28px; height: 28px; margin-left: -2px; border: 0; border-radius: 50%; background: transparent; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center; color: var(--tinta-70);
}
.almenu-gomb:hover { background: var(--hatter); color: var(--szin); }
.almenu-gomb svg { width: 16px; height: 16px; stroke-width: 2.8; transition: transform .2s; }
.nyitva > .almenu-gomb svg { transform: rotate(180deg); }

.fomenu .sub-menu {
	position: absolute; top: calc(100% + 10px); left: -6px; min-width: 270px; padding: 10px; list-style: none;
	background: #fff; border-radius: var(--r-m); box-shadow: var(--arnyek-l); border-top: 5px solid var(--szin);
	opacity: 0; visibility: hidden; transform: translateY(-8px) rotate(-1deg);
	transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; z-index: 5;
}
/* a menüpont és az almenü közti rés ne zárja be az almenüt */
.fomenu .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.fomenu-lista > li:hover > .sub-menu,
.fomenu-lista > li:focus-within > .sub-menu,
.fomenu-lista > li.nyitva > .sub-menu {
	opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
/* Esc után: zárva marad, amíg a fókusz/egér el nem hagyja (nav.js) */
.fomenu-lista > li.esc-zarva > .sub-menu { opacity: 0; visibility: hidden; transform: translateY(-8px); }

.fomenu .sub-menu a {
	display: block; padding: 9px 12px; border-radius: var(--r-s); color: var(--tinta); text-decoration: none;
	font-weight: 700; font-size: 15.5px; line-height: 1.35;
}
.fomenu .sub-menu a:hover, .fomenu .sub-menu .current-menu-item > a { background: var(--hatter); color: var(--szin); }
/* harmadik szint: behúzva, nem újabb legördülő */
.fomenu .sub-menu .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 0 12px; min-width: 0; }
.fomenu .sub-menu .almenu-gomb { display: none; }
/* Hosszú almenü (inc/nav-walker.php): két hasábban, a csoportok egyben
   maradnak. A képernyő jobb széléhez közeli menüpont almenüje jobbra
   igazítva nyílik (a fejléc mérőszkriptje teszi rá az osztályt). */
.fomenu-lista > li.almenu-hosszu > .sub-menu { width: min(580px, calc(100vw - 32px)); columns: 2; column-gap: 8px; }
.fomenu-lista > li.almenu-hosszu > .sub-menu > li { break-inside: avoid; }
.fomenu-lista > li.almenu-jobbra > .sub-menu { left: auto; right: -6px; }

.ikongomb {
	width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; flex: none;
	background: var(--kek-50); display: inline-flex; align-items: center; justify-content: center;
	transition: background .15s, transform .15s; color: var(--kek);
}
.ikongomb:hover { background: var(--kek-100); transform: rotate(-10deg); }
.ikongomb svg { width: 21px; height: 21px; stroke-width: 2.4; }
.hamburger { display: none; }

/* --------------------------------------------------------------------------
   Kereső panel (a fejléc alatt nyílik)
   -------------------------------------------------------------------------- */
.kereso-panel { background: var(--kek-50); border-top: 2px solid var(--kek-100); padding-block: 18px; }
.kereso-panel[hidden] { display: none; }

.keresourlap { display: flex; gap: 10px; max-width: 640px; }
.keresourlap .kereso-mezo { flex: 1; border-radius: 999px; padding-inline: 20px; }
.keresourlap .gomb { flex: none; }

/* --------------------------------------------------------------------------
   Mobil fiók (off-canvas)
   -------------------------------------------------------------------------- */
.fiok-hatter {
	position: fixed; inset: 0; z-index: 90; background: rgba(21, 32, 74, .45);
	opacity: 0; transition: opacity .2s;
}
.fiok {
	position: fixed; top: 0; right: 0; bottom: 0; z-index: 100; width: min(92vw, 400px);
	background: #fff; box-shadow: var(--arnyek-l); overflow-y: auto; overscroll-behavior: contain;
	transform: translateX(105%); transition: transform .25s ease;
	display: flex; flex-direction: column;
}
.fiok[hidden], .fiok-hatter[hidden] { display: none; }
.fiok-nyitva .fiok { transform: none; }
.fiok-nyitva .fiok-hatter { opacity: 1; }
.fiok-nyitva { overflow: hidden; }

.fiok-fej { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 2px solid var(--kek-50); }
.fiok-fej .cimke { margin: 0; }
.fiok-torzs { padding: 16px 18px 28px; display: grid; gap: 20px; }

.fiok-menu { list-style: none; }
.fiok-menu li { position: relative; list-style: none; }
.fiok-menu > li { border-bottom: 2px dashed var(--kek-50); }
.fiok-menu a {
	display: block; padding: 12px 52px 12px 4px; text-decoration: none;
	font-family: var(--betu-cim); font-weight: 700; font-size: 19px; color: var(--tinta);
}
.fiok-menu .current-menu-item > a { color: var(--kek); }
.fiok-menu .almenu-gomb { position: absolute; right: 0; top: 7px; width: 40px; height: 40px; background: var(--kek-50); color: var(--kek); }
.fiok-menu .sub-menu { display: none; padding: 0 0 10px 12px; list-style: none; }
.fiok-menu .nyitva > .sub-menu { display: block; }
.fiok-menu .sub-menu a { font-family: var(--betu-szoveg); font-weight: 700; font-size: 16px; padding-block: 8px; }
.fiok-menu .sub-menu .almenu-gomb { display: none; }
.fiok-menu .sub-menu .sub-menu { display: block; }

.fiok-elerh { display: grid; gap: 10px; background: var(--kek-50); border-radius: var(--r-m); padding: 16px; font-weight: 700; }
.fiok-elerh a { color: var(--tinta); text-decoration: none; display: flex; gap: 10px; align-items: center; }
.fiok-elerh svg { width: 18px; height: 18px; color: var(--kek); flex: none; }

/* --------------------------------------------------------------------------
   Aloldal-fejléc (oldal, bejegyzés, archívum, keresés, 404)
   -------------------------------------------------------------------------- */
.oldalfej { position: relative; background: var(--kek-50); overflow: hidden; }
.oldalfej::before {
	content: ""; position: absolute; inset: 0;
	background-image: radial-gradient(var(--kek-100) 2px, transparent 2.5px); background-size: 26px 26px;
}
.oldalfej .keret { position: relative; z-index: 1; padding-block: clamp(34px, 5vw, 60px) clamp(18px, 3vw, 30px); }
.oldalfej h1 { font-size: clamp(34px, 4.6vw, 56px); color: var(--sotetkek); max-width: 22ch; }
.oldalfej .oldalfej-leiras { margin-top: 12px; font-size: 18px; color: var(--tinta-70); max-width: 62ch; }
.oldalfej .oldalfej-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 16px; font-weight: 800; font-size: 15px; color: var(--tinta-70); }
.oldalfej .hatar { position: relative; z-index: 1; margin-bottom: -1px; }
.oldalfej .dekor { z-index: 0; }

.morzsa { display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; font-weight: 700; color: var(--tinta-70); margin-bottom: 10px; list-style: none; }
.morzsa li + li::before { content: "›"; margin-right: 6px; color: var(--kek-vil); }
.morzsa a { color: var(--tinta-70); text-decoration: none; }
.morzsa a:hover { color: var(--kek); text-decoration: underline; }

/* a „Teljes szélességű” sablon: a cím a gépnek látszik, a szemnek nem */
.oldalfej--rejtett { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.fotartalom { padding-block: clamp(36px, 5vw, 64px) clamp(56px, 7vw, 90px); }

/* --------------------------------------------------------------------------
   Lábléc
   -------------------------------------------------------------------------- */
.lablec { position: relative; background: var(--sotetkek); color: rgba(255, 255, 255, .82); font-size: 15.5px; }
.lablec a { color: rgba(255, 255, 255, .88); text-decoration: none; }
.lablec a:hover { color: var(--arany); text-decoration: underline; }
.lablec > .keret { padding-block: clamp(36px, 5vw, 56px) 0; }
.lablec .hatar { background: var(--lablec-elotte, var(--papir)); }

.lab-racs { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.25fr; gap: 40px; }
.lab-marka { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.lab-marka .cimer { width: 52px; height: 52px; box-shadow: 0 0 0 3px var(--arany); }
.lab-marka strong { display: block; font-family: var(--betu-cim); font-weight: 800; font-size: 19px; color: #fff; line-height: 1.1; }
.lab-marka .om { display: block; font-family: var(--betu-kezi); font-weight: 700; font-size: 20px; color: var(--arany); line-height: 1; margin-top: 3px; }
.lab-leiras { font-size: 14.5px; line-height: 1.6; }
.lab-oszlop h2 {
	font-family: var(--betu-cim); font-weight: 800; font-size: 20px; color: #fff; margin-bottom: 12px;
	display: flex; align-items: center; gap: 8px;
}
.lab-oszlop h2 .virag { width: 18px; height: 18px; }
.lab-oszlop ul { list-style: none; }
.lab-oszlop li { margin-bottom: 8px; }
.lab-elerh li { display: flex; gap: 10px; align-items: flex-start; }
.lab-elerh svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--arany); }
.lab-kozossegi { display: flex; gap: 10px; margin-top: 16px; }
.lab-kozossegi .kozossegi { width: 40px; height: 40px; }
.lab-kozossegi .kozossegi svg { width: 17px; height: 17px; }
.lab-also {
	margin-top: 40px; border-top: 2px dashed rgba(255, 255, 255, .2); padding-block: 20px;
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font-size: 14px; color: rgba(255, 255, 255, .7);
}
.lab-also ul { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; }

.mobilsav { display: none; }

/* --------------------------------------------------------------------------
   Reszponzív
   -------------------------------------------------------------------------- */
/* Mért szélességek (hat menüpont, három almenüvel): 1281 px fölött teljes
   méret; 1101–1280 px között kisebb betű és térköz; 1100 px-től hamburger.
   Hosszabb menünél a hamburger korábban jön (.menu-szuk, lásd fent). */
@media (max-width: 1280px) {
	.fejlec > .keret { gap: 14px; }
	.fomenu-lista { gap: 2px; }
	.fomenu-lista > li > a { padding: 8px 9px 6px; font-size: 16px; }
	.fomenu-lista > li.menu-item-has-children > a { padding-right: 2px; }
}

@media (max-width: 1100px) {
	.fomenu { display: none; }
	.hamburger { display: inline-flex; }
	.fejlec .kereso-gomb { margin-left: auto; }
	.lab-racs { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
	body { font-size: 16px; }
	:root { --fejlec-m: 70px; }
	.felso-sav { font-size: 13px; }
	.felso-sav .keret { min-height: 40px; gap: 8px; }
	.fs-bal .elrejt-mobil, .kreta-gomb .elrejt-mobil { display: none; }
	.cimer { width: 46px; height: 46px; }
	.marka-szoveg strong { font-size: 16.5px; max-width: 210px; }
	.marka-szoveg span { font-size: 18px; }
	.fejlec > .keret { gap: 10px; }
	.fejlec .kereso-gomb { display: none; }
	.fejlec .hamburger { margin-left: auto; }

	.lab-racs { grid-template-columns: 1fr; gap: 30px; }
	.lab-also { flex-direction: column; }
	.lablec { padding-bottom: 84px; }

	.mobilsav {
		display: grid; grid-template-columns: repeat(3, 1fr); position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 50;
		background: #fff; border-radius: 24px; box-shadow: 0 10px 30px rgba(21, 32, 74, .25);
		padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
	}
	.mobilsav a {
		display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none;
		font-family: var(--betu-cim); font-weight: 700; font-size: 13px; color: var(--tinta);
	}
	.mobilsav i { width: 36px; height: 36px; border-radius: 12px; background: var(--fill); display: grid; place-items: center; }
	.mobilsav svg { width: 20px; height: 20px; color: var(--on); stroke-width: 2.2; }
}