/*
Theme Name: BAREX
Author: mardor - MadWorks
Author URI: https://madworks.hu
Description: A BAREX Kft. weboldalának témája — a MaD Zero FSE starterre épül. A blokk- és pattern-névterek szándékosan maradnak madzero/*, hogy a starter fejlesztései később átemelhetők legyenek.
Version: 0.1.0
Template Origin: madzero (MaD Zero starter, fork: 2026-08-19)
Requires at least: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: madzero
*/

/*
 * ELV: ide CSAK az kerül, amit a theme.json / blokk-beállítás tényleg nem tud.
 * Blokk-specifikus stílus → wp_enqueue_block_style (functions.php), NEM ide.
 * Ez a fájl a cél szerint 2-3 KB alatt marad.
 */

/* Utility: teljes magasság/szélesség kitöltés (pattern-konvenció) */
.full-height,
.full-height img { height: 100%; }
.full-width,
.full-width img { width: 100%; }

/* Utility: háttérkép-kitöltő kép (pattern-konvenció) */
.bcg-img { height: 100%; width: 100%; }
.bcg-img img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

/* Kijelölés-szín a brandhez */
::selection {
	color: var(--wp--preset--color--txt-light);
	background: var(--wp--preset--color--primary);
}

/* Mobil sorrend-csere utility (pattern-konvenció) */
@media screen and (max-width: 781px) {
	.m-order-2 { order: 2; }
}

/* Marquee logósor (CSS-only, 0 JS) — pattern: logosor-marquee.
   Két azonos fél a trackben → a -50% transzform hézagmentesen loopol.
   A logók alt=""-esek (dekoratívak), a duplikátum így SR-nek néma. */
.madzero-marquee { overflow: hidden; }
.madzero-marquee .madzero-marquee__track {
	display: flex;
	gap: 0;
	width: max-content;
	animation: madzero-marquee 30s linear infinite;
}
.madzero-marquee .madzero-marquee__half {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--h-m);
	padding-right: var(--wp--preset--spacing--h-m);
}
.madzero-marquee:hover .madzero-marquee__track { animation-play-state: paused; }
@keyframes madzero-marquee {
	to { transform: translateX(-50%); }
}

/* Mozgás-érzékeny felhasználóknak: minden animáció/átmenet ki */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ============================================================
 * BAREX — a designból mért, blokk-attribútummal nem kifejezhető réteg
 * Forrás: tools/assets/2026-08-30/prototipus.css
 * ============================================================ */

/* --- Hero-vizuál: három egymásra rétegzett, clip-path-os fotósáv ---------- */
.barex-hero-visual {
	/* A kép-oszlop stretch igazítású, a csoportnak követnie kell. */
	height: 100%;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: 640px;
	background: var(--wp--preset--color--secondary);
}
.barex-hero-visual .barex-layer {
	position: absolute;
	background-size: cover;
	background-repeat: no-repeat;
}
.barex-hero-visual .barex-layer--fleet {
	z-index: 1;
	inset: -10% -8% 20%;
	transform: scale(1.035);
	filter: saturate(0.78);
	background-position: 58%;
	background-image:
		linear-gradient(120deg,
			color-mix(in srgb, var(--wp--preset--color--secondary) 40%, transparent),
			color-mix(in srgb, var(--wp--preset--color--primary) 8%, transparent)),
		url("assets/img/flotta-clean.jpg");
}
.barex-hero-visual .barex-layer--bulk {
	z-index: 2;
	right: -8%;
	bottom: -5%;
	width: 68%;
	height: 49%;
	transform: scale(1.03);
	filter: saturate(0.7);
	clip-path: polygon(20% 10%, 100% 0, 100% 100%, 0 100%);
	background-position: 50% 40%;
	background-image:
		linear-gradient(115deg,
			color-mix(in srgb, var(--wp--preset--color--secondary) 34%, transparent),
			color-mix(in srgb, var(--wp--preset--color--primary) 45%, transparent)),
		url("assets/img/omlesztett-takarmany-clean.png");
}

/* A hero két oszlopa a designban 52/48, a bal oldal függőlegesen középen ül,
 * a jobb oldali vizuál pedig a szekció széléig ér.
 *
 * `:has()`-ra épül, hogy NE kelljen külön osztályt tenni a generált blokkba —
 * így a hero a `build-pages.ps1` újrafuttatása után is helyes marad.
 * Az `!important` azért kell, mert a szekció paddingje inline stílusként ül a
 * blokkon (a mz_section így menti), és azt csak ez üti.
 */
.wp-block-group.alignfull:has(> .wp-block-columns .barex-hero-visual) {
	padding: 0 !important;
}
.wp-block-columns:has(.barex-hero-visual) {
	gap: 0;
	align-items: stretch;
	margin-block: 0;
	/* A szekció tartalom-szélessége 1200px (mz_section alapértelmezés), a hero
	 * viszont a designban teljes szélességű. A max-width a constrained layout
	 * generált szabályából jön, ezért kell az !important. */
	max-width: none !important;
	width: 100%;
}
.wp-block-columns:has(.barex-hero-visual) > .wp-block-column:first-child {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex-basis: 52%;
	padding: var(--wp--preset--spacing--v-m) var(--wp--preset--spacing--h-m);
}
.wp-block-columns:has(.barex-hero-visual) > .wp-block-column:last-child {
	flex-basis: 48%;
	padding: 0;
}

@media (max-width: 900px) {
	.barex-hero-visual { min-height: 380px; }
}

/* --- Fejléc ------------------------------------------------------------- */
.site-header {
	background: var(--wp--preset--color--bcg-light);
	border-bottom: 1px solid var(--wp--preset--color--separator);
}
.site-header .wp-block-site-logo img { width: 150px; height: auto; }
.header-contact a,
.header-contact .wp-block-button__link {
	border: 1px solid var(--wp--preset--color--txt-dark);
	background: transparent;
	color: var(--wp--preset--color--txt-dark);
	padding: 13px 18px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 800;
}
.header-contact a:hover,
.header-contact .wp-block-button__link:hover {
	background: var(--wp--preset--color--txt-dark);
	color: var(--wp--preset--color--txt-light);
}

/* --- Lábléc ------------------------------------------------------------- */
/* A lábléc-sablonrész BURKOLÓJA (`footer.wp-block-template-part`) kapja a WP
 * alapértelmezett blokk-térközét (24px), nem a benne lévő csoport — ezért nem
 * lehetett a szerkesztőből kiszedni. A burkoló nem jelölhető ki blokként,
 * így csak CSS-ből nullázható. (Mérve 2026-08-31: 24px rés a bordó
 * kapcsolat-szekció és a lábléc között.) */
.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0;
}
.site-footer {
	background: var(--wp--preset--color--bcg-light);
	border-top: 1px solid var(--wp--preset--color--separator);
}
.site-footer p,
.site-footer .wp-block-navigation {
	color: var(--wp--preset--color--tertiary);
	font-size: 13px;
	line-height: 1.55;
}
.site-footer .wp-block-site-logo img { width: 170px; height: auto; }
/* --- Kis kijelzős védőháló ----------------------------------------------
 * A nagy fokozatú szövegek (statisztika-számok, feliratok) 360 px-en
 * túlcsordultak: a hosszú, egyben maradó szó szélesebb, mint a nézet.
 * Ugyanaz a hibaosztály, mint a designban mért Szállítmányozás-túlcsordulás.
 */
.entry-content,
.site-footer,
.site-header {
	overflow-wrap: break-word;
}
@media (max-width: 560px) {
	.entry-content strong,
	.entry-content h1,
	.entry-content h2,
	.entry-content h3 {
		overflow-wrap: break-word;
		hyphens: auto;
	}
}
/* --- Statisztika-rács ----------------------------------------------------
 * A rácsot a BELSŐ vonalak rajzolják: a 2. oszlop bal éle és a 2. sortól a
 * cellák felső éle. Szélső vonal nincs — a szekció széle zárja a rácsot.
 *
 * Miért így és nem jobb/alsó éllel: annál a „szélső cella" kiszámítása a
 * cellaszámtól függ, és páratlan darabszámnál rossz cellától vette el a
 * vonalat (mérve a Rólunk oldalon, 3 cella, 2026-08-31). A belső-vonal
 * logika bármennyi cellánál helyes.
 *
 * Méretet és sormagasságot itt NEM állítunk: azok preset-fokozatból jönnek a
 * blokk-attribútumban, hogy a szerkesztőből állíthatók legyenek.
 */
.barex-stat-grid { gap: 0 !important; }
.barex-stat-grid > * {
	padding: 42px;
	margin: 0;
}
.barex-stat-grid--split {
	border-left: 1px solid color-mix(in srgb, currentColor 16%, transparent);
	height: 100%;
	/* Egyenlő magas sorok — a terven a cellák azonos méretűek. */
	grid-auto-rows: 1fr;
}
.barex-stat-grid--split > *:nth-child(2n) {
	border-left: 1px solid color-mix(in srgb, currentColor 16%, transparent);
}
.barex-stat-grid--split > *:nth-child(n+3) {
	border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent);
}
/* A címke halványabb a számnál — de a szekció színéből számolva, nem fix
 * fehérrel: a Rólunk oldalon a rács VILÁGOS szekcióban áll, ott a fehér 64%
 * gyakorlatilag láthatatlan volt. (Mérve 2026-08-31.) */
.barex-stat-grid p:last-child {
	color: color-mix(in srgb, currentColor 64%, transparent);
}

/* Mobilon a rács EGY oszlopra vált, és az oszlop-logikára épülő vonalak
 * (2. oszlop bal éle, 2. sortól felső él) így kimaradnak: az első két cella
 * közé nem jut vonal, az utolsó alá sem. Ilyenkor SOR-logika kell — minden
 * cella fölött és alatt vonal. (Mérve 2026-09-08, Dóri jelezte.) */
@media (max-width: 899px) {
	.barex-stat-grid--split {
		border-left: 0;
		border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent);
	}
	/* `:nth-child(n)` nem szűkít, csak SÚLYT ad: a fenti oszlop-szabályok
	   (`:nth-child(2n)`, `:nth-child(n+3)`) 0,2,0-sak, egy sima `> *` 0,1,0
	   volna, és alulmaradna — a media query ezen nem segít. */
	.barex-stat-grid--split > *:nth-child(n),
	.barex-stat-grid > *:nth-child(n) {
		border-left: 0;
		border-top: 0;
		border-bottom: 1px solid color-mix(in srgb, currentColor 16%, transparent);
	}
	.barex-stat-grid:not(.barex-stat-grid--split) {
		border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent);
	}
}
/* A cella CÍMÉNEK szoros sortáva komponens-tulajdonság, nem blokkonkénti
 * beállítás: a négy cellából egyen hiányzott az érték, és a törzsszöveg
 * 1,6-ját örökölte (64px a 42 helyett) — egyedül az lógott ki.
 * Ez csak ALAPÉRTELMEZÉS: a szerkesztőben megadott érték továbbra is erősebb
 * (inline stílusként felülírja). A terv értéke 1,05. */
.barex-stat-grid p:first-child {
	line-height: 1.05;
}
/* --- Link-aláhúzások (a designban ez jelöli a továbbvezető linkeket) ------ */


/* A „tovább" típusú linkek a designban aláhúzott, félkövér szövegek — de ez
 * VÁLASZTHATÓ stílus (`Gomb – aláhúzott`), nem a sötét kártya kényszere.
 * A korábbi blanket szabály minden gombról leszedte a keretet a színes
 * kártyákon belül, ezért nem lehetett őket körvonalasra állítani. (2026-08-31) */
/* --- Színes (bordó / ink) kártya: a design mértékei ----------------------- */
.is-style-card-dark {
	/* A designban 50px / 96px (≈5vw). A blokk inline paddingjét kell ütni. */
	padding: 3.125rem clamp(1.75rem, 5vw, 6rem) !important;
}
/* A felcím a sötét kártyán nem lehet bordó (azon láthatatlan). Alapból halvány
 * fehérre esik vissza, de VÁLASZTHATÓ a „Felcím – világos" változat is
 * (#E8B4BD). A választott változat nyerjen, ezért nincs !important. */
.is-style-card-dark .is-style-text-eyebrow:not(.has-text-color) {
	color: color-mix(in srgb, currentColor 75%, transparent);
}
/* A kártya törzsszövege halványabb — de a FELCÍM-változatok (alap és világos)
 * es a sajat szinnel jelolt bekezdesek kimaradnak, kulonben feluluetnenk a
 * valasztott stilusvaltozat szinet. (Mérve 2026-08-31: a `text-eyebrow-light`
 * emiatt kapott fehér 80%-ot a #E8B4BD helyett.) */
.is-style-card-dark p:not([class*="is-style-text-eyebrow"]):not(.has-text-color) {
	color: color-mix(in srgb, currentColor 80%, transparent);
	font-size: 1rem;
}
.is-style-card-dark .wp-block-heading,
.is-style-card-dark strong {
	color: currentColor;
}

/* --- Statisztika-számok: a designban FEHÉR a sötét sávon, nem bordó ------- */
.barex-stat-grid p:first-child,
.barex-stat-grid p:first-child strong {
	color: currentColor !important;
}
/* --- FluentForms: a designterv űrlap-stílusa -----------------------------
 * A FluentForms saját alapstílust hoz (7px lekerekítés, szürke keret, 500-as
 * gombfelirat), ezt kell a BAREX-nyelvre hangolni. Tokenekből dolgozunk, hogy
 * a paletta-változás ide is átjöjjön.
 *
 * A terv mért értékei (.contact-form): keret 1px `line`, háttér fehér,
 * mezőpadding 13px, címke 800-as súllyal, gomb bordó + 800-as felirat.
 * ÉLES SAROK mindenhol — a MaD Zero / BAREX alapelv.
 */
.fluentform .ff-el-group {
	margin-bottom: 18px;
}

/* Címkék — a lényeg a vastagság */
.fluentform .ff-el-input--label label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 800;
	line-height: 1.3;
	color: inherit;
	margin-bottom: 8px;
}
.fluentform .ff-el-input--label.ff-el-is-required label:after {
	color: var(--wp--preset--color--primary);
}

/* Mezők — halvány keret, fehér háttér, éles sarok */
/* A `.ff-el-form-control` osztályt használjuk, mert a plugin `.ff-default
 * .ff-el-form-control` szabálya erősebb, mint egy puszta elem-szelektor —
 * emiatt a textarea korábban megtartotta a 7px lekerekítést. */
.fluentform input.ff-el-form-control,
.fluentform select.ff-el-form-control,
.fluentform textarea.ff-el-form-control,
.fluentform input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.fluentform select,
.fluentform textarea {
	width: 100%;
	padding: 13px;
	font-size: 1rem;
	font-family: inherit;
	line-height: 1.4;
	color: var(--wp--preset--color--txt-dark);
	background: #fff;
	border: 1px solid var(--wp--preset--color--separator);
	border-radius: 0;
	box-shadow: none;
	transition: border-color 0.15s;
}
.fluentform input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus,
.fluentform select:focus,
.fluentform textarea:focus {
	border-color: var(--wp--preset--color--primary);
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: none;
}
.fluentform textarea {
	min-height: 150px;
	resize: vertical;
}

/* Hozzájárulás-sor — ez nem címke-súlyú, hanem folyószöveg */
.fluentform .ff-el-form-check-label,
.fluentform .ff_tc_label {
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 400;
	line-height: 1.5;
}

/* Küldés gomb — bordó, éles sarok, vastag felirat */
/* A gomb szinet a FluentForms URLAP-SZINTU sajat CSS-e allitja
 * (`form.fluent_form_1 .wpf_has_custom_css.ff-btn-submit`, feketere), ami
 * eroesebb barmilyen esszerű tema-szelektornal. Ezt csak !important veri —
 * cserebe minden urlapra egysegesen all a bordo, nem urlaponkent kell beallitani. */
.fluentform .ff-btn-submit,
.fluentform .ff-btn.ff-btn-submit {
	background: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--txt-light) !important;
	padding: 15px 22px;
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.2;
	color: var(--wp--preset--color--txt-light);
	background: var(--wp--preset--color--primary);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	transition: background-color 0.15s;
}
.fluentform .ff-btn-submit:hover,
.fluentform .ff-btn.ff-btn-submit:hover {
	background: var(--wp--preset--color--bcg-dark) !important;
	color: var(--wp--preset--color--txt-light) !important;
}
/* --- Felsorolás: bordó négyzet-jelölő -----------------------------------
 * FIGYELEM a szelektorra: a bejegyzés-rács (Query Loop) is <ul>/<li>
 * (`wp-block-post-template` / `wp-block-post`), ezért azt KI KELL ZÁRNI —
 * különben a bejegyzés-kártyák elé is odakerül a négyzet, és a kártya
 * szövege felveszi a lista 14px/700-as tipográfiáját (a kivonat félkövér
 * lesz). Mérve a Szakmai tartalmak oldalon, 2026-09-02.
 * Dorina 2026-09-02-én átírta: a korábbi, hajszálvonallal elválasztott lista
 * helyett kis bordó négyzet áll a tételek előtt, vonalak nélkül.
 *
 * A terv mért értékei (.service-copy ul / li):
 *   ul  → display:grid, gap 11px, margin-top 24px, list-style none
 *   li  → padding-left 20px, 14px / 700 / 1.5, position relative
 *   ::before → 7×7 px bordó négyzet, top .55em, left 0
 *
 * A jelölőt `::before` adja, nem `list-style`, mert így a mérete és a
 * függőleges helye pontosan állítható.
 */
.entry-content ul:not(.wp-block-navigation__container):not(.wp-block-page-list):not(.wp-block-post-template) {
	display: grid;
	gap: 11px;
	margin: 24px 0 0;
	padding-left: 0;
	list-style: none;
}
.entry-content ul:not(.wp-block-navigation__container):not(.wp-block-page-list):not(.wp-block-post-template) > li {
	position: relative;
	margin: 0;
	padding: 0 0 0 20px;
	list-style: none;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.5;
}
.entry-content ul:not(.wp-block-navigation__container):not(.wp-block-page-list):not(.wp-block-post-template) > li::before {
	content: "";
	position: absolute;
	top: 0.55em;
	left: 0;
	width: 7px;
	height: 7px;
	background: var(--wp--preset--color--primary);
}
/* Sötét szekcióban a bordó négyzet elveszne — ott meleg fehér. */
.is-style-section-dark .entry-content ul > li::before,
.is-style-section-accent ul > li::before,
.is-style-section-dark ul > li::before,
.wp-block-cover ul > li::before {
	background: var(--wp--preset--color--warm-white);
}
/* A korábbi generátor bordó korong-jelölőt tett a tételek elé (ikon-doboz
 * blokk). A generátorból már kikerült, de a MEGLÉVŐ oldalakon a blokk még
 * benne lehet a tartalomban — ott elrejtve marad, amíg újra nem generáljuk. */
.entry-content li > .wp-block-group:has(> .madzero-icon) {
	display: none;
}

/* --- GYIK (Yoast FAQ blokk): halvány vonal + lenyíló ---------------------
 * A Yoast markupját megtartjuk, mert az adja a GYIK strukturált adatot
 * (schema.org FAQPage). A lenyílást progresszív ráépítés adja: JS nélkül
 * minden válasz látszik, tehát tartalom nem vész el.
 */
.wp-block-yoast-faq-block .schema-faq-section {
	border-bottom: 1px solid var(--wp--preset--color--separator);
	padding: 0;
}
.wp-block-yoast-faq-block .schema-faq-section:first-child {
	border-top: 1px solid var(--wp--preset--color--separator);
}
.barex-faq-gomb {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 20px 0;
	background: none;
	border: 0;
	border-radius: 0;
	text-align: left;
	font: inherit;
	color: inherit;
	cursor: pointer;
}
.barex-faq-gomb .schema-faq-question {
	font-size: var(--wp--preset--font-size--base-lg);
	font-weight: 800;
	line-height: 1.35;
}
/* Nyitás-jelző: zárva ▸, nyitva ▾ — a gomb állapotából, nem külön elemből. */
.barex-faq-gomb::before {
	content: "";
	flex: 0 0 auto;
	width: 0;
	height: 0;
	border-left: 7px solid currentColor;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	transition: transform 0.15s;
}
.barex-faq-gomb[aria-expanded="true"]::before {
	transform: rotate(90deg);
}
.barex-faq-gomb:hover .schema-faq-question {
	color: var(--wp--preset--color--primary);
}
.barex-faq-gomb:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}
.wp-block-yoast-faq-block .schema-faq-answer {
	margin: 0;
	padding: 0 30px 24px 0;
	max-width: 700px;
	color: var(--wp--preset--color--tertiary);
	line-height: 1.6;
}

/* =========================================================================
 * A 2026-09-02-i egységesített terv komponensei
 * ========================================================================= */

/* --- Hero-rétegek: a középső réteg lecserélődött -------------------------
 * A tervben a `hero-turkey` (pulyka-fotó) helyére `hero-thermal-plant`
 * (hőközpont) lépett, és mindhárom réteg új duoton-fedést kapott. A régi
 * `--turkey` réteg BENNMARAD, mert a főoldal jelenlegi tartalma még azt
 * használja — így a meglévő oldal nem törik el a váltás előtt.
 */
.barex-layer--fleet {
	z-index: 1;
	filter: saturate(0.78);
	background-image:
		linear-gradient(120deg, #69303F8A, #69303F6B),
		url(assets/img/20260817_084044-clean.png);
	background-position: right 62%;
	inset: 0 0 38%;
}
.barex-layer--thermal-plant {
	z-index: 2;
	clip-path: polygon(0 7%, 100% 0, 100% 100%, 0 100%);
	filter: saturate(0.74) contrast(1.04);
	background-image:
		linear-gradient(110deg, #17203385, #232A4C75),
		url(assets/img/termal-hokozpont.jpg);
	background-position: 48%;
	width: 50%;
	height: 52%;
	bottom: 0;
	right: 0;
}
.barex-layer--bulk {
	z-index: 3;
	clip-path: polygon(0 14%, 100% 7%, 100% 100%, 0 100%);
	filter: saturate(0.72);
	background-image:
		linear-gradient(115deg, #1720338F, #3230697A),
		url(assets/img/omlesztett-takarmany-clean.png);
	background-position: 58%;
	width: 52%;
	height: 52%;
	bottom: 0;
	left: 0;
}

/* --- Fotó-hátterű kártya -------------------------------------------------
 * A CSS-osztályos változat (`is-style-card-photo`, a képpel ide égetve)
 * 2026-09-02-én kikerült: a natív `core/cover` nyert, mert ott a kép és a
 * fedés a SZERKESZTŐBŐL állítható. A fedett képen a bordó felcím elveszne,
 * ezért a cover-en meleg fehér — ez az egy szabály maradt belőle.
 */
.wp-block-cover .is-style-text-eyebrow,
.wp-block-cover .is-style-text-eyebrow-light {
	color: var(--wp--preset--color--warm-white) !important;
}
/* --- Címsor a fotón ------------------------------------------------------
 * Visszatérő minta: a szekció-cím a képen ül, alul. A képet `core/cover`
 * hordozza, ez a réteg csak a szöveg-dobozt pozicionálja.
 */
.barex-photo-copy {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	padding: 48px 4.5vw;
	color: #fff;
}
.barex-photo-copy .is-style-text-eyebrow,
.barex-photo-copy .is-style-text-eyebrow-light {
	color: var(--wp--preset--color--warm-white) !important;
}

/* --- Kör alakú jelvény (a hero-fotón) ------------------------------------
 * „35+ ÉV SZAKMAI TAPASZTALAT", „92–95 °C". A statikus forrásban NINCS benne
 * (kliens-oldalon renderelődik), ezért az importtal nem jön át — a markupot
 * kézzel kell elhelyezni. A stílus itt készen áll hozzá.
 */
.barex-jelveny {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 190px;
	height: 190px;
	border: 1px solid #FFFFFFD0;
	border-radius: 50%;
	background: #FFF4ECE8;
	color: var(--wp--preset--color--txt-dark);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.barex-jelveny strong {
	font-size: 68px;
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.06em;
}
.barex-jelveny small {
	max-width: 130px;
	margin-top: 12px;
	font-size: 10px;
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: 0.11em;
	text-align: center;
	text-transform: uppercase;
}



/* --- FluentForms: a címke SOSE örökölje a szekció színét -----------------
 * Az űrlap fehér panelen ül, a panel viszont bordó szekcióban van. A `color:
 * inherit` így fehér címkét adott fehér háttéren — a feliratok eltűntek.
 * (Mérve a főoldal kapcsolat-szekciójában, 2026-09-02.)
 * A mezők és a címkék ezért EXPLICIT sötét színt kapnak; a sötét hátterű
 * változatot lentebb külön osztály kapcsolja.
 */
.fluentform .ff-el-input--label label,
.fluentform .ff-el-form-check-label,
.fluentform .ff_tc_label {
	color: var(--wp--preset--color--txt-dark);
}

/* --- Űrlap sötét (bordó/ink) háttéren ------------------------------------
 * A Kapcsolat oldal terve szerint: nincs fehér panel, az űrlap közvetlenül a
 * bordó sávon ül. Fehér címkék, áttetsző mezők halvány fehér kerettel, fehér
 * gomb bordó felirattal.
 *
 * HASZNÁLAT: tedd a `barex-urlap-vilagos` osztályt VAGY magára a Fluent Forms
 * blokkra, VAGY egy körülölelő csoportra (Blokk → Speciális → További
 * CSS-osztályok). Mindkettő működik: a plugin a blokk osztályát a saját
 * `.fluentform` burkolójára fűzi rá, ezért a szelektorok `:is()`-szel a
 * „ugyanaz az elem" és a „felmenő elem" esetet is lefedik. (Mérve 2026-09-02:
 * leszármazott-szelektorral a frontenden semmi nem érvényesült, miközben a
 * szerkesztőben jónak látszott.)
 * Szándékosan nem automatikus: a főoldalon ugyanaz az űrlap fehér panelen áll,
 * és a kettőt megbízhatóan csak jelöléssel lehet szétválasztani.
 */
:is(.barex-urlap-vilagos.fluentform, .barex-urlap-vilagos .fluentform) .ff-el-input--label label,
:is(.barex-urlap-vilagos.fluentform, .barex-urlap-vilagos .fluentform) .ff-el-form-check-label,
:is(.barex-urlap-vilagos.fluentform, .barex-urlap-vilagos .fluentform) .ff_tc_label {
	color: var(--wp--preset--color--txt-light);
	letter-spacing: 0.04em;
}
:is(.barex-urlap-vilagos.fluentform, .barex-urlap-vilagos .fluentform) input.ff-el-form-control,
:is(.barex-urlap-vilagos.fluentform, .barex-urlap-vilagos .fluentform) select.ff-el-form-control,
:is(.barex-urlap-vilagos.fluentform, .barex-urlap-vilagos .fluentform) textarea.ff-el-form-control,
:is(.barex-urlap-vilagos.fluentform, .barex-urlap-vilagos .fluentform) input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
:is(.barex-urlap-vilagos.fluentform, .barex-urlap-vilagos .fluentform) select,
:is(.barex-urlap-vilagos.fluentform, .barex-urlap-vilagos .fluentform) textarea {
	color: var(--wp--preset--color--txt-light);
	background: #FFFFFF0C;
	border-color: #FFFFFF50;
	padding: 15px;
}
:is(.barex-urlap-vilagos.fluentform, .barex-urlap-vilagos .fluentform) input::placeholder,
:is(.barex-urlap-vilagos.fluentform, .barex-urlap-vilagos .fluentform) textarea::placeholder {
	color: var(--wp--preset--color--txt-light-muted);
}
:is(.barex-urlap-vilagos.fluentform, .barex-urlap-vilagos .fluentform) input.ff-el-form-control:focus,
:is(.barex-urlap-vilagos.fluentform, .barex-urlap-vilagos .fluentform) select.ff-el-form-control:focus,
:is(.barex-urlap-vilagos.fluentform, .barex-urlap-vilagos .fluentform) textarea.ff-el-form-control:focus {
	border-color: var(--wp--preset--color--txt-light);
}
/* A legördülő nyitott listája a rendszer háttérén jelenik meg — ott sötét
 * szöveg kell, különben fehér a fehéren. */
:is(.barex-urlap-vilagos.fluentform, .barex-urlap-vilagos .fluentform) select option {
	color: var(--wp--preset--color--txt-dark);
}
:is(.barex-urlap-vilagos.fluentform, .barex-urlap-vilagos .fluentform) a {
	color: var(--wp--preset--color--txt-light);
	text-decoration: underline;
}
:is(.barex-urlap-vilagos.fluentform, .barex-urlap-vilagos .fluentform) .ff-btn-submit,
:is(.barex-urlap-vilagos.fluentform, .barex-urlap-vilagos .fluentform) .ff-btn.ff-btn-submit {
	background: var(--wp--preset--color--bcg-light) !important;
	color: var(--wp--preset--color--primary) !important;
	padding: 17px 23px;
}
:is(.barex-urlap-vilagos.fluentform, .barex-urlap-vilagos .fluentform) .ff-btn-submit:hover,
:is(.barex-urlap-vilagos.fluentform, .barex-urlap-vilagos .fluentform) .ff-btn.ff-btn-submit:hover {
	background: var(--wp--preset--color--warm-white) !important;
	color: var(--wp--preset--color--primary) !important;
}


/* --- Legördülő: olvasható opciók + többszörös választás védőhálója -------
 * (1) Az `option` a natív listában a rendszer hátterén jelenik meg, ezért
 *     EXPLICIT sötét szöveget kap — különben egyes böngészőkben a select
 *     örökölt (világos) színét veszi át, és fehér lesz a fehéren.
 * (2) `select[multiple]` esetén a böngésző lista-dobozt rajzol: a 13px-es
 *     mező-padding ilyenkor egy eltolt, belső keretnek látszik. A padding
 *     ezért kisebb, és a magasságot a lista adja.
 *     MEGJEGYZÉS: ha a mező egyválasztós legördülőnek készült, a `multiple`-t
 *     magában az űrlapban kell kikapcsolni — ez itt csak kozmetikai védőháló.
 */
.fluentform select option,
.fluentform select optgroup {
	color: var(--wp--preset--color--txt-dark);
	background: #fff;
}
.fluentform select[multiple] {
	padding: 6px;
	min-height: 48px;
	background-image: none;
}
.fluentform select[multiple] option {
	padding: 8px 7px;
}

/* A hozzájárulás-sor LINKJEI is örökölték a szekció fehér színét, ezért
 * eltűntek a fehér panelen. Bordó, aláhúzva. */
.fluentform a {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

/* --- Cikkoldal (Bejegyzés sablon) ---------------------------------------
 * A szerkezetet a `templates/single.html` adja natív blokkokból; itt csak az
 * van, amit blokk-attribútummal nem lehet kifejezni: a ragadós
 * tartalomjegyzék, a kiemelt kép rögzített magassága és a cikk-törzs
 * tipográfiája.
 *
 * A terv mért értékei:
 *   vissza-link → 13px/800, fehér 71%, alul 1px fehér 44%
 *   kiemelt kép → magasság min(58vw, 720px), object-fit: cover
 *   tartalomjegyzék → 260px, ragadós (top 30px), felül vonal, tételenként alsó vonal
 *   törzs → 19px / 1.75, halvány szöveg; h2 clamp(34→54); idézet bordó, keretes
 */
.barex-vissza-link a {
	color: var(--wp--preset--color--txt-light-muted);
	border-bottom: 1px solid color-mix(in srgb, currentColor 44%, transparent);
	text-decoration: none;
}
.barex-vissza-link a:hover {
	color: var(--wp--preset--color--txt-light);
}

.barex-cikk-kep img {
	width: 100%;
	height: min(58vw, 720px);
	object-fit: cover;
	display: block;
}

/* Tartalomjegyzék — a cikk mellett marad görgetéskor. */
.barex-cikk-toc {
	align-self: start;
	position: sticky;
	top: 30px;
	border-top: 1px solid var(--wp--preset--color--separator);
}
.barex-cikk-toc a {
	display: block;
	padding: 13px 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--tertiary);
	border-bottom: 1px solid var(--wp--preset--color--separator);
	text-decoration: none;
}
.barex-cikk-toc a:hover {
	color: var(--wp--preset--color--primary);
}
/* A jegyzékben a lista se kapjon négyzet-jelölőt. */
.barex-cikk-toc ul,
.barex-cikk-toc li {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: 400;
}
.barex-cikk-toc li::before {
	content: none;
}

/* Cikk-törzs */
.barex-cikk-torzs {
	font-size: var(--wp--preset--font-size--base-lg);
	line-height: 1.75;
}
.barex-cikk-torzs p,
.barex-cikk-torzs li {
	color: var(--wp--preset--color--tertiary);
}
.barex-cikk-torzs h2 {
	margin: 20px 0 24px;
	font-size: clamp(2.125rem, 3.5vw, 3.375rem);
	line-height: 1.08;
	letter-spacing: -0.04em;
}
.barex-cikk-torzs h3 {
	margin: 30px 0 15px;
	font-size: 25px;
}
/* Kiemelt idézet: bordó, felül-alul hajszálvonal — a terv szerint. */
.barex-cikk-torzs blockquote {
	margin: 25px 0 50px;
	padding: 35px 0;
	border-top: 1px solid var(--wp--preset--color--separator);
	border-bottom: 1px solid var(--wp--preset--color--separator);
	border-left: 0;
	color: var(--wp--preset--color--primary);
	font-size: clamp(1.625rem, 2.5vw, 2.375rem);
	font-weight: 700;
	line-height: 1.3;
}
.barex-cikk-torzs blockquote p {
	color: inherit;
	margin: 0;
}


/* --- Mobil menü ----------------------------------------------------------
 * A terv `<details>`-alapú lenyílót használ; a core navigáció overlayt csinál
 * (teljes képernyős modál). A látvány ugyanaz lesz: a panel a fejléc ALATT
 * nyílik ki, teljes szélességben, vonalakkal elválasztott tételekkel.
 *
 * A terv mért értékei (.mobile-menu):
 *   kapcsoló  → 1px ink keret, min-width 76px, padding 12px 15px, 13px/800
 *   nyitva    → bordó háttér, fehér felirat, bordó keret
 *   panel     → fehér, felül 1px vonal, padding 16px 5vw 22px, top 92px,
 *               árnyék 0 18px 35px rgba(23,32,51,.12), z-index 20
 *   tételek   → alul 1px vonal, padding 14px 0, 15px/800
 *
 * A fejléc magassága 92px (mérve mobilon is) — ezt tokenben tartjuk, hogy egy
 * helyen lehessen állítani, ha a fejléc változik.
 */
:root {
	--barex-fejlec-magassag: 92px;
}

/* Kapcsoló — a "Menü" felirat a core-ból jön (hasIcon: false). */
/* A core `.…-open.…-open { font-size: inherit; font-weight: inherit }` szabálya
 * ugyanolyan erős, és később töltődik — ezért kell a szülő nav-osztály is. */
.wp-block-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) {
	min-width: 120px;
	padding: 12px 18px;
	border: 1px solid var(--wp--preset--color--txt-dark);
	border-radius: 0;
	color: var(--wp--preset--color--txt-dark);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
	justify-content: center;
}

/* A kinyíló panel: a fejléc alatt, teljes szélességben — nem teljes képernyős. */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
	top: var(--barex-fejlec-magassag);
	right: 0;
	bottom: auto;
	left: 0;
	/* Fix px, nem vw: 390-en az 5vw csak ~19px, és a core belső wrapperje
	   ezt le is nullázta — ezért tapadt a lista a szélére. */
	padding: 22px 24px 26px;
	/* A záró gomb a panel FÖLÉ lóg (oda, ahol a kapcsoló volt), ezért a
	   panel nem vághatja le. */
	overflow: visible;
	background-color: var(--wp--preset--color--bcg-light);
	border-top: 1px solid var(--wp--preset--color--separator);
	box-shadow: 0 18px 35px rgba(23, 32, 51, 0.12);
	z-index: 20;
}
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: 0;
	margin: 0;
	align-items: stretch;
}
/* A menü-lista térköze 0: a tételeket a hajszálvonalak választják el, nem a gap.
 * `!important` azért kell, mert a térközt a WP blokk-elrendezése adja egy
 * GENERÁLT osztályon (`wp-container-core-navigation-is-layout-…{gap:2rem}`),
 * aminek a súlyát és a betöltési sorrendjét nem lehet előre tudni. */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list {
	gap: 0 !important;
	align-items: stretch;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid var(--wp--preset--color--separator);
}
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	/* Szimmetrikus padding + normál sortáv: így a felirat a két hajszálvonal
	   között középen ül, nem tapad az egyikhez. */
	padding: 18px 0;
	line-height: 1.4;
	font-size: 15px;
	font-weight: 800;
	color: var(--wp--preset--color--txt-dark);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary);
}

/* EGYETLEN gomb: a „Menü" nyit és zár is. A core bezáró gombját elrejtjük —
 * a nyitó gomb kattintását a mobil-menu.js irányítja rá (a miértet lásd ott).
 * Nyitott állapotban a gomb bordó: ez a terv „nyitott kapcsoló" állapota. */
/* A core bezáró gombja NEM `display:none`, hanem képernyőn kívülre kerül:
 * a mobil-menu.js programozottan „megnyomja", és egy display:none elem
 * kattintása nem mindenhol vált ki eseményt. Így viszont biztosan igen. */
.wp-block-navigation .wp-block-navigation__responsive-container-close {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
/* NYITOTT állapot: a WP új navigációja Interactivity API-t használ — a nyitó
 * gombon NINCS `aria-expanded`, az állapot a konténer `is-menu-open`
 * osztályában él. A gomb a konténer ELŐTT áll, ezért `:has()` kell hozzá. */
.wp-block-navigation:has(.wp-block-navigation__responsive-container.is-menu-open) .wp-block-navigation__responsive-container-open {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--txt-light);
}
@media (max-width: 899px) {
	/* A core nyitáskor elrejtené a kapcsolót — nekünk végig kell látszania. */
	.wp-block-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
		position: relative;
		z-index: 21;
	}
}

/* A Kapcsolat a fejlécben gombként áll (asztali), a mobil panelben viszont
 * menütételként — a tervben is így van. A kettő ugyanaz a cél, csak más
 * megjelenés, ezért mindig CSAK az egyik látszik. */
/* A core `.wp-block-navigation-item { display: flex }` ugyanolyan erős és
 * később töltődik, ezért kell az elem-osztályt is beletenni. */
.wp-block-navigation-item.barex-csak-mobil {
	display: none;
}
@media (max-width: 899px) {
	.is-menu-open .wp-block-navigation-item.barex-csak-mobil {
		display: flex;
	}
	.site-header .wp-block-buttons {
		display: none;
	}
}

/* --- Lábléc mobilon: minden egymás alatt, balra rendezve -----------------
 * Asztali nézetben a lábléc két sávja `space-between` flex — mobilon ettől a
 * menü jobbra sodródik és tördelten tapad. A terv szerint mobilon minden
 * BALRA rendezve, egymás alatt áll.
 */
@media (max-width: 899px) {
	.site-footer .wp-block-group.is-layout-flex {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 1.5rem;
	}
	.site-footer .wp-block-navigation__container {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
	}
	.site-footer .wp-block-site-logo {
		margin-bottom: 0.5rem;
	}
}

/* --- Segéd-osztály: mobilon teljes szélességű gomb -----------------------
 * HASZNÁLAT: a GOMB blokkon (nem a Gombok csoporton) → Blokk → Speciális →
 * További CSS-osztályok → `barex-mobil-teljes`.
 *
 * Miért osztály és nem stílusváltozat: a stílusváltozat `css` mezőjében a
 * téma átvételi kapuja (tools/check.js) tiltja a `@media`-t — a mobil-only
 * viselkedést tehát nem lehet változatba tenni. Ugyanezt a mintát követi a
 * `barex-urlap-vilagos` és a `barex-csak-mobil` is.
 */
@media (max-width: 899px) {
	.wp-block-button.barex-mobil-teljes {
		width: 100%;
	}
	.wp-block-button.barex-mobil-teljes .wp-block-button__link {
		width: 100%;
		justify-content: center;
	}
	/* Ha a gombok egy sorban álltak, mobilon egymás alá kerülnek. */
	.wp-block-buttons:has(.barex-mobil-teljes) {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}
}

/* --- Aktív menüpont ------------------------------------------------------
 * A tervben minden menü-link alatt van egy 2px-es ÁTLÁTSZÓ vonal, és az
 * aktívnál ez vált bordóra — így a szöveg nem ugrik meg, amikor átváltasz
 * egy másik oldalra (ha csak az aktívnak lenne kerete, minden link 2px-et
 * mozdulna).
 *
 * A WordPress a `current-menu-item` osztályt teszi a listaelemre; az aloldalak
 * miatt a `current-menu-ancestor` és a `current_page_parent` is kell — így egy
 * cikkoldalon a „Szakmai tartalmak" marad jelölve.
 */
.site-header .wp-block-navigation-item__content {
	border-bottom: 2px solid transparent;
	padding-bottom: 7px;
}
.site-header .current-menu-item > .wp-block-navigation-item__content,
.site-header .current-menu-ancestor > .wp-block-navigation-item__content,
.site-header .current_page_parent > .wp-block-navigation-item__content,
.site-header .current-menu-item > .wp-block-navigation-item__content:hover {
	border-bottom-color: var(--wp--preset--color--primary);
}

/* Mobilon nincs alsó vonal (ott a tételeket hajszálvonal választja el),
 * helyette a felirat vált bordóra — a terv `.mobile-menu a.active` szerint. */
@media (max-width: 899px) {
	.is-menu-open .wp-block-navigation-item__content {
		border-bottom: 0;
		padding-bottom: 18px;
	}
	.is-menu-open .current-menu-item > .wp-block-navigation-item__content,
	.is-menu-open .current-menu-ancestor > .wp-block-navigation-item__content,
	.is-menu-open .current_page_parent > .wp-block-navigation-item__content {
		color: var(--wp--preset--color--primary);
	}
}
/* --- Felcím és címsor távolsága -----------------------------------------
 * A felcím (eyebrow) és az alatta lévő címsor a tervben szorosan ül egymáson.
 * Ezt korábban oldalanként, kézzel beállított `margin-top: 5px` adta a
 * címsoron — 22 helyen. Mobilon rossz volt (ott több levegő kell), és
 * karbantarthatatlan.
 *
 * Most a FELCÍM húzza magához a címsort, negatív alsó margóval, és CSAK
 * asztali nézetben. Mobilon marad a blokk alapértelmezett térköze.
 */
@media (min-width: 900px) {
	.is-style-text-eyebrow,
	.is-style-text-eyebrow-light {
		margin-bottom: -12px;
	}
}
/* --- Elválasztó ----------------------------------------------------------
 * A core alapból alsó szegéllyel (és néhol háttérrel) rajzolja az elválasztót;
 * a tervben viszont felül fut a hajszálvonal. Szín nincs megadva, tehát
 * `currentColor` — így a szekció szövegszínéből öröklődik, és sötét sávon is
 * jól néz ki anélkül, hogy külön szabály kellene rá.
 */
.wp-block-separator {
	border-top: 1px solid;
}