/*
Theme Name: CRESCOM BESS
Theme URI: https://bess.crescom.hu/
Author: CRESCOM Kft.
Author URI: https://crescom.hu/
Description: Ipari akkumulátoros energiatárolás (BESS) blokk-téma a CRESCOM Kft. részére. Teljes körű Full Site Editing támogatás, magyar nyelvű mintakönyvtárral, mobil-első elrendezéssel, lokálisan hosztolt betűtípusokkal. A tartalmi adatmodellt (projektek, űrlap, schema) a "CRESCOM BESS Core" bővítmény adja.
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
Version: 0.3.8
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: crescom-bess
Tags: full-site-editing, block-patterns, business, one-column, custom-colors, custom-menu, editor-style, translation-ready
*/

/* ==========================================================================
   1. Alapok, akadálymentesség
   ========================================================================== */

html {
	-webkit-text-size-adjust: 100%;
}

body {
	/*
	 * Szándékosan "clip" és nem "hidden": az overflow:hidden a törzsön
	 * görgetési kontextust hoz létre, ami kikapcsolná a ragadós fejléc
	 * position:sticky viselkedését. A clip ugyanazt a védelmet adja
	 * vízszintes túlcsordulás ellen, a sticky elrontása nélkül.
	 */
	overflow-x: clip;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

/*
 * Akcentus szín SÖTÉT háttéren futó apró szövegekhez.
 * A márka pirosa (#E53329) az ink háttérrel 4,39:1 kontrasztot ad, ami éppen
 * a WCAG AA 4,5:1 küszöb alatt van. Ez az árnyalat 4,75:1-et ad, szabad
 * szemmel megkülönböztethetetlenül. Világos háttéren továbbra is az
 * "accent-hover" a szövegszín, ott a márka pirosa nem elég sötét.
 */
:root {
	--bess-accent-sotet-hatteren: #EA3E33;

	/*
	 * A felső sáv magassága. Ennyivel tapad feljebb a ragadós fejléc, hogy a
	 * felső sáv kigördüljön és csak a menüsor maradjon fent. Telefonon a sáv
	 * rejtve van, ezért ott nulla – lásd a 10. szakaszt.
	 */
	--bess-felso-sav: 0px;
}

@media (min-width: 600px) {
	:root {
		--bess-felso-sav: 49px;
	}
}

/*
 * A theme.json ".has-accent-color { color: … !important }" alakban generálja a
 * paletta-osztályokat, ezért a sötét szekciókban is a márkapiros érvényesülne.
 * Ez a szabály két osztállyal (és így nagyobb fajsúllyal) cseréli a jól olvasható
 * árnyalatra – kizárólag ink hátterű szekcióban, ahol a kontraszt szűk volt.
 */
.has-ink-background-color .has-accent-color,
.bess-header .has-accent-color,
.bess-footer .has-accent-color {
	color: var(--bess-accent-sotet-hatteren) !important;
}

/* Ugrás a tartalomra (billentyűzetes navigáció) */
.bess-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999999;
	padding: 12px 20px;
	background: var(--wp--preset--color--accent-hover);
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--saira);
	font-weight: 700;
	text-decoration: none;
}

.bess-skip-link:focus {
	left: 8px;
	top: 8px;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 2px;
}

.has-ink-background-color :where(a, button, input, select, textarea):focus-visible,
.bess-header :where(a, button):focus-visible {
	outline-color: var(--wp--preset--color--paper);
}

/*
 * Érintési célok: a navigációs jellegű hivatkozások legalább 44x44 px-esek.
 * Szándékosan NEM minden linkre: a folyó szövegbe ágyazott hivatkozásokat
 * (pl. telefonszám a láblécben) ez szétfeszítené.
 */
.wp-block-button__link,
.bess-footer .wp-block-list a,
.bess-filter__gomb {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/*
 * A menüpontoknál külön szabály kell: a WordPress saját
 * ".wp-block-navigation .wp-block-navigation-item__content" szabálya
 * (két osztály) legyőzné az általánosabbat, és a felirat a 44 px-es
 * doboz tetején maradna – emiatt csúszott el a fejléc.
 */
.bess-header .wp-block-navigation .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding-top: 0;
	padding-bottom: 0;
}

/* A ragadós fejléc logója is ugyanígy középre igazodik. */
.bess-header .wp-block-site-title a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/*
 * A WordPress gyökérszinten is alkalmazza a blokk-közt:
 * ":where(.wp-site-blocks) > * { margin-block-start: … }". Emiatt a fejléc és a
 * tartalom, illetve a tartalom és a lábléc közé egy áttetsző sáv került, amin
 * a törzs világos háttere látszott át – ez volt a "fehér csík a menü alatt".
 * A három gyökérelem (fejléc, tartalom, lábléc) szándékosan hézag nélkül,
 * egymáshoz simulva következik; a szekciók saját paddingja adja a levegőt.
 */
.wp-site-blocks > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/*
 * Horgonyra ugráskor (pl. /termekek/#muszaki-adatok, "Ugrás a tartalomra")
 * a ragadós fejléc eltakarná a cél elejét, ezért a gördítés előbb megáll.
 * Görgetés közben csak a menüsor tapad (legfeljebb 77 px), plusz levegő.
 */
:target {
	scroll-margin-top: 96px;
}

/* ==========================================================================
   2. Fejléc
   ========================================================================== */

/* ==========================================================================
   2/a. Hero – fotó háttér és a fölé kerülő sötétítő fátyol
   --------------------------------------------------------------------------
   A háttérkép magán a blokkon van (WordPress "background" támogatás), így a
   Szerkesztőben cserélhető. A fátyol viszont csak CSS-ből tehető rá, mert a
   blokk-támogatás nem ismer átfedő réteget.

   A fátyol erőssége az adminban állítható (CRESCOM BESS → Beállítások →
   Megjelenés); az érték a `--bess-hero-fatyol` változóban érkezik, itt csak
   alapértéke van, hogy a téma a bővítmény nélkül is helyes legyen.

   A 0,84-es alapérték számításból jön. A legrosszabb eset a fotó fehér
   konténere (0,999 luminancia): azon ennyi sötétítéssel a fehér szöveg 4,9:1
   kontrasztot ad (WCAG AA: 4,5:1). 0,83 alatt már bukna – ezért figyelmeztet
   az adminban a csúszka. A megszokott halványszürke (muted-light) ugyanezen
   csak 2,9:1-et adna, ezért a hero bevezető szövege fehér.
   ========================================================================== */

.bess-hero {
	position: relative;
	isolation: isolate;
}

/*
 * A fátyol külön réteg, hogy a szekció saját tartalma fölötte maradjon.
 * Telefonon egyenletesen erős: ott a szöveg a teljes szélességet elfoglalja.
 */
.bess-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgb(14 16 19 / calc(var(--bess-hero-fatyol, 0.84) * 100%));
}

@media (min-width: 782px) {
	/*
	 * Asztali nézetben a szöveg a bal oldali hasábban ül, a jobb oldalon pedig
	 * egy tömör kártya takarja a fotót – ezért balra erős a fátyol, jobbra
	 * enged, hogy a telephely látszódjon. A 62%-os határ a bal hasáb (57%)
	 * mögé nyúlik, tehát a szöveg végig a sötét sávban marad.
	 */
	.bess-hero::before {
		background:
			linear-gradient(to right,
				rgb(14 16 19 / calc((var(--bess-hero-fatyol, 0.84) + 0.03) * 100%)) 0%,
				rgb(14 16 19 / calc(var(--bess-hero-fatyol, 0.84) * 100%)) 62%,
				rgb(14 16 19 / calc((var(--bess-hero-fatyol, 0.84) - 0.25) * 100%)) 85%,
				rgb(14 16 19 / calc((var(--bess-hero-fatyol, 0.84) - 0.32) * 100%)) 100%);
	}
}

/* A jelvény piros felirata a fotó fölött is olvasható maradjon. */
.bess-hero .bess-jelveny {
	background: var(--wp--preset--color--ink);
}

.bess-header {
	border-bottom: 1px solid var(--wp--preset--color--vonal-sotet);
}

/*
 * A ragadós fejléc a sablonrész BURKOLÓJÁN működik, nem a belső csoporton:
 * a WordPress a template partot egy <header class="wp-block-template-part">
 * elembe teszi, ami pontosan olyan magas, mint a fejléc – ott a sticky-nek
 * nincs hova tapadnia.
 *
 * Csak a MENÜSOR marad fent: a burkoló a felső sáv magasságával feljebb tapad,
 * így a felső sáv (nyelvváltó, közösségi ikonok) kigördül a képernyőről, a
 * menüsor pedig pontosan a képernyő tetejére kerül. A felső sáv magassága ezért
 * nem "amekkora éppen lesz", hanem rögzített érték – lásd `.bess-topbar`.
 */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: calc(-1 * var(--bess-felso-sav));
	z-index: 100;
}

/*
 * A statikus előnézetben nincs burkoló elem: ott a felső sáv és a menüsor
 * külön testvér, tehát a felső sáv magától kigördül.
 */
.wp-site-blocks > .bess-header {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* Bejelentkezve a WordPress admin sávja foglalja a képernyő tetejét. */
.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: calc(32px - var(--bess-felso-sav));
}

.admin-bar .wp-site-blocks > .bess-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: calc(46px - var(--bess-felso-sav));
	}

	.admin-bar .wp-site-blocks > .bess-header {
		top: 46px;
	}
}

@media screen and (max-width: 600px) {
	/* Ezen a méreten a WordPress admin sávja már nem rögzített, elgörgethető. */
	.admin-bar .wp-site-blocks > header.wp-block-template-part,
	.admin-bar .wp-site-blocks > .bess-header {
		top: 0;
	}
}

/* Fejléc logó. A kép SVG, tehát a magasság szabja meg a méretét; a szélesség
   `auto`, különben a `wp-block-image` alapértelmezett `max-width: 100%`-ja
   szűk fejlécben aránytalanra nyomná. */
.bess-fejlec-logo {
	margin: 0;
	flex-shrink: 0;
}

.bess-fejlec-logo a,
.bess-fejlec-logo img {
	display: block;
}

.bess-fejlec-logo img {
	height: 36px;
	width: auto;
	max-width: none;
}

/* Telefonon a fejléc ne foglaljon el fél képernyőt – ugyanaz a megfontolás,
   ami korábban a szöveges oldalcímet is kisebbre vette. */
@media (max-width: 599px) {
	.bess-fejlec-logo img { height: 28px; }
}

/* A szöveges oldalcím szabályai: a fejléc 2026-09-15 óta a logót használja,
   de a blokk a Szerkesztőben továbbra is beszúrható. */
.bess-header .wp-block-site-title {
	line-height: 1.15;
	max-width: 15ch;
}

/* Telefonon a fejléc ne foglaljon el fél képernyőt: kisebb logószöveg, két sorban. */
@media (max-width: 599px) {
	.bess-header .wp-block-site-title {
		font-size: 15px !important;
		max-width: 11ch;
		letter-spacing: 0;
	}
}

.bess-header .wp-block-site-title a {
	text-decoration: none;
	color: inherit;
}

@media (min-width: 1100px) {
	.bess-header .wp-block-site-title {
		white-space: nowrap;
		max-width: none;
	}
}

.bess-header .wp-block-navigation a {
	text-decoration: none;
}

.bess-header .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent);
}

/* Aktív menüpont (az aktuális oldal), illetve a szülő menüpont
   projekt- és híroldalakon. */
.bess-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.bess-header .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--paper);
	font-weight: 700;
	box-shadow: inset 0 -2px 0 var(--wp--preset--color--accent);
	padding-bottom: 2px;
}

/* Mobil menü (natív Navigation overlay) */
.bess-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 24px;
}

.bess-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 24px;
}

.bess-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	font-size: 1.25rem;
	padding-block: 6px;
}

/*
 * A hamburger ikon 24x24, az érintési célja 44x44. A WordPress a nyitógombot
 * "display: flex"-re állítja, igazítás nélkül – így az ikon a doboz bal felső
 * sarkába ült, 20 px üresen maradt tőle jobbra és alatta. Innen az elcsúszás.
 */
.bess-header .wp-block-navigation__responsive-container-open,
.bess-header .wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	padding: 0;
}

/* A fejléc CTA gombja mobilon is elérhető maradjon */
.bess-header__cta .wp-block-button__link {
	padding-inline: 18px;
	font-size: var(--wp--preset--font-size--xs);
	white-space: nowrap;
}

@media (max-width: 480px) {
	.bess-header__cta .wp-block-button__link {
		padding-inline: 14px;
	}
}

/* ==========================================================================
   3. Ismétlődő szekció-elemek
   ========================================================================== */

/* Eyebrow / szekciócímke */
.bess-eyebrow {
	font-family: var(--wp--preset--font-family--saira);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: var(--wp--preset--font-size--xs);
	margin-bottom: 8px;
}

/* Kártya: az árnyék és a keret a blokk beállításaiból jön, ez csak a viselkedés */
.bess-card {
	height: 100%;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.bess-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--kiemelt);
}

@media (prefers-reduced-motion: reduce) {
	.bess-card,
	.bess-card:hover {
		transform: none;
		transition: none;
	}
}

/* Sorszám-jelvény (folyamat 01–04) */
.bess-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: var(--wp--preset--color--ink);
	color: var(--bess-accent-sotet-hatteren);
	font-family: var(--wp--preset--font-family--saira);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--md);
	letter-spacing: 0.02em;
	margin-bottom: 16px;
}

.bess-num--aktiv {
	background: var(--wp--preset--color--accent-hover);
	color: var(--wp--preset--color--paper);
}

/* Kép-helyőrzők: mindig arányos, sosem fix magasság */
.bess-placeholder img,
.bess-placeholder .wp-block-image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--wp--custom--radius--alap);
}

.bess-media--4x3 img { aspect-ratio: 4 / 3; object-fit: cover; }
.bess-media--16x9 img { aspect-ratio: 16 / 9; object-fit: cover; }
.bess-media--1x1 img { aspect-ratio: 1 / 1; object-fit: cover; }

/* Partner-logósáv: mobilon 2 oszlop, desktopon 6 */
/* Partner logósáv.
   A rács `auto-fit`-tel áll be, hogy öt és hat logó mellett is kitöltse a sort
   (a logók száma a partnerlistától függ). Minden logó azonos méretű DOBOZT kap;
   magukat a logókat nem azonos magasságra, hanem azonos optikai súlyra
   méretezzük – a soron belüli max-height/max-width a képeken ezt hordozza,
   számítását lásd a build/partner_logok.py fejlécében. */
/* Flex és nem grid, mert a logók száma a partnerlistától függ: ötnél a 2- és
   3-oszlopos töréseknél marad árva elem, amit a flex középre zár (a grid balra
   igazítva hagyná). Asztali nézetben `flex: 1 1 0` – ahány logó, annyi egyenlő
   szélességű cella. */
.bess-logos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.bess-logos .wp-block-image {
	flex: 1 1 calc(50% - 6px);
	max-width: calc(50% - 6px);
}

@media (min-width: 600px) {
	.bess-logos .wp-block-image {
		flex-basis: calc(33.333% - 8px);
		max-width: calc(33.333% - 8px);
	}
}

/* Egy sorba a fejléc törésponthatárán túl: 1100 px alatt öt logó cellája már
   olyan keskeny, hogy a hosszú szóképek olvashatatlanul összemennének. */
@media (min-width: 1100px) {
	.bess-logos { gap: 16px; }
	.bess-logos .wp-block-image { flex: 1 1 0; max-width: none; }
}

.bess-logos .wp-block-image {
	margin: 0;
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--vonal);
	border-radius: var(--wp--custom--radius--alap);
	padding: 14px 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	/* A doboz belvilága a legmagasabb (majdnem négyzetes) logóhoz igazodik:
	   52 px logó + 2 × 14 px padding. */
	min-height: 80px;
}

/* Színes alátét a logócellában. Az MVM Zöld Generáció logója fehér, átlátszó
   háttéren érkezett: a fehér sávban láthatatlan lenne, ezért csak ez az egy
   cella kap színes alapot – a márka zöldjét. A jelölés a logó-manifestből jön
   (`alatet: true`), nem kézzel írjuk a mintába.

   Kontraszt: a fehér logó a #1E965E-n 3,76:1 – a WCAG 1.4.11 grafikus elemekre
   vonatkozó 3:1-es küszöbét teljesíti (a szövegre vonatkozó 4,5:1-et nem, de
   itt nem szövegről van szó). */
.bess-logos .bess-logo-alatet {
	background: #1E965E;
	border-color: #1E965E;
}

.bess-logos .wp-block-image img {
	/* A magasságot a kép soron belüli `max-height`-ja adja logónként; ez itt a
	   tartalék, ha nincs (pl. a Szerkesztőben cserélt logó). A `max-width: 100%`
	   viszont MINDIG hat: szűkebb cellában ez veszi arányosan kisebbre a széles
	   szóképeket, ezért nem kerül soron belüli max-width a képekre. */
	max-height: 40px;
	max-width: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Hero statisztika-kártya */
.bess-stat {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 14px 16px;
	border: 1px solid var(--wp--preset--color--vonal-sotet);
	border-radius: var(--wp--custom--radius--alap);
	background: rgba(255, 255, 255, 0.03);
}

.bess-stat__cimke {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted-light);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.bess-stat__ertek {
	font-family: var(--wp--preset--font-family--saira);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--h-4);
	color: var(--wp--preset--color--paper);
	white-space: nowrap;
}

.bess-stat__ertek--accent {
	color: var(--wp--preset--color--accent);
}

/* ==========================================================================
   4. Specifikációs táblázat – mobilon vízszintesen görgethető
   ========================================================================== */

.bess-spec {
	position: relative;
}

.bess-spec .wp-block-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	margin-bottom: 8px;
}

.bess-spec .wp-block-table table {
	min-width: 560px;
	border-collapse: collapse;
	width: 100%;
}

.bess-spec th,
.bess-spec td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--wp--preset--color--vonal);
	text-align: left;
	vertical-align: top;
}

.bess-spec thead th {
	font-family: var(--wp--preset--font-family--saira);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
	border-bottom: 2px solid var(--wp--preset--color--ink);
	white-space: nowrap;
}

.bess-spec tbody th,
.bess-spec tbody td:first-child {
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

/*
 * Sokoszlopos specifikációs táblázat (öt oszlop: paraméter + négy termék).
 *
 * A háromoszlopos alapváltozat kényelmesen elfér, ez viszont csak akkor, ha
 * szűkebb a belső margó, kisebb a betű, és a fejlécsorban is törhet a szöveg.
 * Enélkül asztali nézetben is görgetni kellett – kimérve: 1920 px-es ablakban
 * a táblázat 1036 px-t kért egy 760 px-es dobozban.
 */
.bess-spec__tabla--sok th,
.bess-spec__tabla--sok td {
	padding: 9px 10px;
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.45;
}

.bess-spec__tabla--sok thead th {
	white-space: normal;
}

/* Az első oszlop (a paraméter neve) ne törjön szét szavanként. */
.bess-spec__tabla--sok td:first-child {
	min-width: 132px;
}

/* Görgetés-jelzés: csak akkor látszik, amíg van hova görgetni */
.bess-spec__hint {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
	margin: 0;
}

.bess-spec__hint::before {
	content: "";
	width: 16px;
	height: 16px;
	flex: none;
	background: currentColor;
	-webkit-mask: var(--bess-arrow) center / contain no-repeat;
	mask: var(--bess-arrow) center / contain no-repeat;
	--bess-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h16m0 0-5-5m5 5-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (min-width: 782px) {
	.bess-spec__hint {
		display: none;
	}
}

/* ==========================================================================
   5. Projektek, hírek (bővítmény által renderelt blokkok)
   ========================================================================== */

.bess-racs {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 600px) {
	.bess-racs--2,
	.bess-racs--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
	.bess-racs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.bess-projekt {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--light);
	border: 1px solid var(--wp--preset--color--vonal);
	border-radius: var(--wp--custom--radius--alap);
	overflow: hidden;
	height: 100%;
}

.bess-projekt__kep img,
.bess-hir__kep img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.bess-projekt__torzs {
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex-grow: 1;
}

.bess-projekt__cim {
	font-family: var(--wp--preset--font-family--saira);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--h-4);
	line-height: 1.25;
	margin: 0;
	color: var(--wp--preset--color--ink);
}

.bess-projekt__cim a {
	color: inherit;
	text-decoration: none;
}

.bess-projekt__cim a:hover {
	color: var(--wp--preset--color--accent-hover);
	text-decoration: underline;
}

.bess-projekt__leiras {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
	margin: 0;
}

.bess-projekt__adatok {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--wp--preset--color--vonal);
}

.bess-projekt__adat-cimke {
	display: block;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
}

.bess-projekt__adat-ertek {
	display: block;
	font-family: var(--wp--preset--font-family--saira);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--ink);
}

.bess-projekt__adat-ertek--accent {
	color: var(--wp--preset--color--accent-hover);
}

/* Projekt adatlap (single) */
.bess-adatlap {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 1px;
	background: var(--wp--preset--color--vonal);
	border: 1px solid var(--wp--preset--color--vonal);
	border-radius: var(--wp--custom--radius--alap);
	overflow: hidden;
}

@media (min-width: 600px) {
	.bess-adatlap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
	.bess-adatlap { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.bess-adatlap__cella {
	background: var(--wp--preset--color--paper);
	padding: 18px 20px;
}

/* A hidden attribútum erősebb, mint a kártyák display:flex értéke */
.bess-projekt[hidden],
.bess-hir[hidden],
.bess-filter__allapot[hidden],
.bess-filter__ures[hidden] {
	display: none !important;
}

/* Szűrő gombsor */
.bess-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 32px;
}

.bess-filter__gomb {
	font-family: var(--wp--preset--font-family--saira);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 10px 18px;
	border-radius: var(--wp--custom--radius--alap);
	border: 1px solid var(--wp--preset--color--vonal);
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	cursor: pointer;
}

.bess-filter__gomb:hover {
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
}

.bess-filter__allapot {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
	margin: -20px 0 24px;
	letter-spacing: 0.02em;
}

.bess-filter__ures {
	padding: 32px 0;
}

.bess-filter__gomb[aria-current="true"],
.bess-filter__gomb.aktiv {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

/* Hírkártyák */
.bess-hir {
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--vonal);
	border-radius: var(--wp--custom--radius--alap);
	overflow: hidden;
	height: 100%;
}

.bess-hir__torzs {
	padding: 20px 22px 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex-grow: 1;
}

.bess-hir__cim {
	font-family: var(--wp--preset--font-family--saira);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--h-4);
	line-height: 1.25;
	margin: 0;
}

.bess-hir__cim a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.bess-hir__cim a:hover {
	color: var(--wp--preset--color--accent-hover);
	text-decoration: underline;
}

.bess-hir__kivonat {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
	margin: 0;
}

.bess-meta {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
	letter-spacing: 0.02em;
	margin: 0;
}

.bess-cimke {
	font-family: var(--wp--preset--font-family--saira);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--accent-hover);
}

/*
 * A projekt adatlapján a kategóriacímke hivatkozás (core/post-terms). Enélkül a
 * globális linkszínt (kék) kapná, ami a sötét fejlécben olvashatatlan (2,4:1).
 */
.bess-cimke a {
	color: inherit;
	text-decoration: none;
}

.bess-cimke a:hover,
.bess-cimke a:focus-visible {
	text-decoration: underline;
}

/* Sötét szekcióban a sötétpiros sem elég: ott a világosabb akcentus a helyes. */
.has-ink-background-color .bess-cimke {
	color: var(--bess-accent-sotet-hatteren);
}

/* ==========================================================================
   6. Űrlap
   ========================================================================== */

.bess-form {
	display: grid;
	gap: 18px;
}

.bess-form__sor {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 600px) {
	.bess-form__sor--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.bess-form__mezo {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.bess-form label {
	font-family: var(--wp--preset--font-family--saira);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--muted);
}

.bess-form input[type="text"],
.bess-form input[type="email"],
.bess-form input[type="tel"],
.bess-form select,
.bess-form textarea {
	width: 100%;
	min-height: 48px;
	font-family: var(--wp--preset--font-family--open-sans);
	font-size: 16px; /* iOS: 16px alatt automatikus nagyítás történne */
	line-height: 1.5;
	color: var(--wp--preset--color--szoveg);
	background: var(--wp--preset--color--paper);
	border: 1px solid #C7CED5;
	border-radius: var(--wp--custom--radius--alap);
	padding: 12px 14px;
	appearance: none;
	-webkit-appearance: none;
}

.bess-form select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%235C6670' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 20px 20px;
	padding-right: 40px;
}

.bess-form textarea {
	min-height: 140px;
	resize: vertical;
}

.bess-form input:focus,
.bess-form select:focus,
.bess-form textarea:focus {
	border-color: var(--wp--preset--color--accent-hover);
	outline: 3px solid rgba(229, 51, 41, 0.25);
	outline-offset: 0;
}

.bess-form__gdpr {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

/* 44x44 px érintési cél, benne 24 px-es, rajzolt jelölőnégyzettel. */
.bess-form__gdpr input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 44px;
	height: 44px;
	min-width: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	position: relative;
	cursor: pointer;
	flex: none;
}

.bess-form__gdpr input[type="checkbox"]::after {
	content: "";
	position: absolute;
	inset: 10px;
	border: 2px solid #C7CED5;
	border-radius: 3px;
	background: var(--wp--preset--color--paper);
}

.bess-form__gdpr input[type="checkbox"]:checked::after {
	background: var(--wp--preset--color--accent-hover);
	border-color: var(--wp--preset--color--accent-hover);
}

.bess-form__gdpr input[type="checkbox"]:checked::before {
	content: "";
	position: absolute;
	left: 19px;
	top: 14px;
	width: 6px;
	height: 12px;
	border: solid var(--wp--preset--color--paper);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	z-index: 1;
}

.bess-form__gdpr input[type="checkbox"]:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: -6px;
	border-radius: 6px;
}

.bess-form__gdpr label {
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
	font-family: var(--wp--preset--font-family--open-sans);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
	line-height: 1.6;
	padding: 8px 0;
}

.bess-form__kotelezo {
	color: var(--wp--preset--color--accent-hover);
}

.bess-form__gomb {
	min-height: 52px;
	width: 100%;
	border: 0;
	cursor: pointer;
	background: var(--wp--preset--color--accent-hover);
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--saira);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--md);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-radius: var(--wp--custom--radius--alap);
	padding: 14px 24px;
}

.bess-form__gomb:hover {
	background: var(--wp--preset--color--accent);
}

.bess-form__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.bess-uzenet {
	padding: 16px 18px;
	border-radius: var(--wp--custom--radius--alap);
	font-size: var(--wp--preset--font-size--sm);
	margin-bottom: 20px;
	border-left: 4px solid;
}

.bess-uzenet--ok {
	background: #EAF6EE;
	border-color: #1E7B45;
	color: #14512E;
}

.bess-uzenet--hiba {
	background: #FDECEA;
	border-color: var(--wp--preset--color--accent-hover);
	color: #8C1B14;
}

.bess-form__hibaszoveg {
	font-family: var(--wp--preset--font-family--open-sans);
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--wp--preset--font-size--xs);
	color: #8C1B14;
}

.bess-form input[aria-invalid="true"],
.bess-form textarea[aria-invalid="true"],
.bess-form select[aria-invalid="true"] {
	border-color: #8C1B14;
	background: #FFF8F7;
}

/* ==========================================================================
   7. Lábléc
   ========================================================================== */

.bess-footer a {
	color: var(--wp--preset--color--muted-light);
	text-decoration: none;
}

.bess-footer a:hover {
	color: var(--wp--preset--color--paper);
	text-decoration: underline;
}

.bess-footer .wp-block-heading {
	color: var(--wp--preset--color--paper);
}

/* ==========================================================================
   8. Elrendezési finomhangolás (mobil-első)
   ========================================================================== */

/* 4 elemű kártyasor: telefonon 1, kis tableten 2, desktopon 4 oszlop */
@media (min-width: 600px) and (max-width: 781px) {
	.bess-cols-4.wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-wrap: wrap !important;
	}

	.bess-cols-4.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: calc(50% - var(--wp--style--block-gap, 24px) / 2) !important;
		flex-grow: 0;
	}
}

/* Termékkártya-rács.

   Alapból két hasáb egy sorban, nem négy: a termékleírások 45–55 szavasak,
   négy hasábban (~280 px) ez tíz-tizenkét soros, keskeny oszlopokat adna.
   A `flex-wrap` + 50%-os alapszélesség ugyanaz a fogás, mint a
   .bess-cols-4-nél, csak itt a desktop tartományra.

   A `--negy` módosítót az elrendezés-váltó teszi rá (véleményezéshez). Ott a
   szűkebb hasábhoz a képmező és a leírás is kisebb lesz, különben pont az a
   torlódás jönne vissza, ami miatt eleve kettő lett az alapérték. */
@media (min-width: 782px) {
	.bess-termek-racs.wp-block-columns {
		flex-wrap: wrap !important;
	}

	.bess-termek-racs.wp-block-columns > .wp-block-column {
		flex-basis: calc(50% - var(--wp--style--block-gap, 24px) / 2) !important;
		flex-grow: 0;
	}

	.bess-termek-racs--negy.wp-block-columns > .wp-block-column {
		flex-basis: calc(25% - var(--wp--style--block-gap, 24px) * 3 / 4) !important;
	}

	/*
	 * "4 / sor, széles": a rács kilép az 1200 px-es tartalomszélességből, és a
	 * gyökér oldalpaddingig terjed. Négy hasáb 1200 px-en ~264 px széles, itt
	 * viszont már 380-420 px – ettől lélegzik a kártya.
	 *
	 * Két osztállyal, hogy legyőzze a WordPress `.is-layout-constrained > *`
	 * szabályát (`max-width: <contentSize>`), ami csak egy osztály fajsúlyú.
	 * A `margin: auto` marad, tehát középen áll.
	 */
	.bess-termek-racs.bess-termek-racs--szeles {
		max-width: min(
			1720px,
			calc(100vw - 2 * clamp(16px, 4vw, 40px))
		);
	}
}

/* A kártyák alja egy vonalban.

   A négy leírás nem egyforma hosszú, ezért enélkül a "Részletek" link, a meta
   sor és az elválasztó kártyánként más magasságban ülne, és a sor szétesne.
   A leírás nyúlik meg, minden más marad a helyén. */
.bess-termek-racs .bess-card {
	display: flex;
	flex-direction: column;
}

.bess-termek-racs .bess-termek__leiras {
	flex: 1 0 auto;
}

.bess-termek-racs--negy .bess-termek__leiras {
	font-size: var(--wp--preset--font-size--xs);
}

@media (min-width: 782px) {
	.bess-termek-racs--negy .bess-termek-kep {
		min-height: 168px;
	}

	.bess-termek-racs--negy .bess-termek-kep img {
		max-height: 136px;
	}
}

/* Elrendezés-váltó (2 / 4 oszlop) – csak véleményezés idejére.

   A `hidden` attribútumot a szkript veszi le, ezért JavaScript nélkül nem
   látszik olyan gomb, ami nem csinálna semmit. A stílusa szándékosan
   segédeszköz-szerű, nem márkaelem: ugyanaz a borostyán kiemelés, mint a
   verzió-jelölőn, hogy egyértelmű legyen, mi tartozik a fejlesztői
   eszköztárhoz és mi a kész oldalhoz. */
.bess-racs-valto[hidden] {
	display: none;
}

.bess-racs-valto {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
}

.bess-racs-valto__cimke {
	font-family: var(--wp--preset--font-family--saira);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.bess-racs-valto__gomb {
	min-height: 34px;
	padding: 0 14px;
	border: 1px solid var(--wp--preset--color--vonal);
	border-radius: var(--wp--custom--radius--kicsi);
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--szoveg);
	font-family: var(--wp--preset--font-family--saira);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.04em;
	cursor: pointer;
}

.bess-racs-valto__gomb:hover {
	border-color: var(--wp--preset--color--muted);
}

.bess-racs-valto__gomb[aria-pressed="true"] {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

/* Telefonon nincs mit váltani: ott a rács amúgy is egy oszlop. */
@media (max-width: 781px) {
	.bess-racs-valto {
		display: none;
	}
}

/* Kép + szöveg váltakozó szekciók: mobilon a szöveg kerüljön előre */
@media (max-width: 781px) {
	.bess-media-first.wp-block-columns {
		flex-direction: column;
	}

	.bess-media-first.wp-block-columns > .wp-block-column:first-child {
		order: 2;
	}

	.bess-media-first.wp-block-columns > .wp-block-column:last-child {
		order: 1;
	}
}

/* Sötét szekciókban a törzsszöveg olvasható másodlagos színe */
.has-ink-background-color .bess-halvany,
.has-ink-light-background-color .bess-halvany {
	color: var(--wp--preset--color--muted-light);
}

/* Idézet (testimonial) */
.bess-idezet {
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.6;
	font-style: italic;
	color: var(--wp--preset--color--szoveg);
}

.bess-idezet::before {
	content: "„";
	font-family: var(--wp--preset--font-family--saira);
	font-size: 3em;
	line-height: 0.1;
	color: var(--wp--preset--color--vonal);
	vertical-align: -0.35em;
	margin-right: 4px;
}

.bess-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: var(--wp--preset--color--ink);
	color: var(--bess-accent-sotet-hatteren);
	font-family: var(--wp--preset--font-family--saira);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--sm);
}

/* Lapozó (hír-lista blokk) */
.bess-lapozo {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 40px;
	justify-content: center;
}

.bess-lapozo .page-numbers {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 14px;
	border: 1px solid var(--wp--preset--color--vonal);
	border-radius: var(--wp--custom--radius--alap);
	font-family: var(--wp--preset--font-family--saira);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: none;
	color: var(--wp--preset--color--szoveg);
}

.bess-lapozo .page-numbers:hover {
	border-color: var(--wp--preset--color--ink);
}

.bess-lapozo .page-numbers.current {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

/* Lapozó (core query blokk) */
.wp-block-query-pagination {
	margin-top: 40px;
	gap: 12px;
}

.wp-block-query-pagination a {
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

.wp-block-query-pagination a:hover {
	border-color: var(--wp--preset--color--accent);
}

/* Nyomtatás */
@media print {
	.bess-header,
	.bess-footer,
	.bess-form {
		display: none !important;
	}
}

/* ==========================================================================
   9. Navigáció: a hamburger 1100 px-ig marad
   --------------------------------------------------------------------------
   A hat menüpont + a CTA gomb mérve csak 1084 px-es ablakszélességtől fér ki
   egy sorba. A korábbi 900 px-es töréspont miatt 900 és 1080 px között a menü
   két sorba tört, és a fejléc 71 px helyett 133 px magas lett (tableten
   fekvő tájolásban ez az alapeset). 1100 px biztonságos tartalékkal.
   ========================================================================== */

@media (max-width: 1099px) {
	.bess-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.bess-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Lábléc listák jelölő nélkül */
.bess-footer .wp-block-list {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

/* ==========================================================================
   10. Felső sáv: nyelvváltó és közösségi profilok
   ========================================================================== */

.bess-topbar {
	font-size: var(--wp--preset--font-size--xs);
	/*
	 * Rögzített magasság, nem "amekkora éppen lesz": a ragadós fejléc pontosan
	 * ennyivel tapad feljebb (--bess-felso-sav), hogy a menüsor a képernyő
	 * tetejére kerüljön. Ha ide egyszer több tartalom kerül, a változót is
	 * emelni kell, különben a menüsor elcsúszik.
	 */
	height: var(--bess-felso-sav);
}

/* Ha sem nyelv, sem közösségi profil nincs beállítva, a sáv teljesen eltűnik. */
.bess-topbar:not(:has(.bess-nyelvvalto)):not(:has(.bess-kozossegi)) {
	display: none;
}

.bess-nyelvvalto ul,
.bess-kozossegi {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bess-nyelvvalto a,
.bess-kozossegi a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	min-height: 36px;
	padding: 0 8px;
	color: var(--wp--preset--color--muted-light);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--saira);
	font-weight: 600;
	letter-spacing: 0.08em;
	border-radius: var(--wp--custom--radius--kicsi);
}

.bess-nyelvvalto a:hover,
.bess-kozossegi a:hover {
	color: var(--wp--preset--color--paper);
}

.bess-nyelv--aktiv {
	color: var(--wp--preset--color--paper) !important;
	background: rgba(255, 255, 255, 0.08);
}

/*
 * Még nem elérhető nyelv, illetve be nem állított közösségi profil:
 * látszik a tervezett elem, de nem kattintható – így nem keletkezik
 * sehová sem vezető hivatkozás.
 */
.bess-nyelv--inaktiv,
.bess-kozossegi__inaktiv {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	min-height: 36px;
	padding: 0 8px;
	font-family: var(--wp--preset--font-family--saira);
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--muted-light);
	opacity: 0.45;
	cursor: default;
}

.bess-kozossegi__inaktiv {
	padding: 0 6px;
}

/* A felső sáv mindig látszik, ha van benne bármi – a nyelvek és az ikonok
   alapból megjelennek, akkor is, ha még nincs mögöttük cél. */
.bess-topbar .bess-nyelvvalto,
.bess-topbar .bess-kozossegi {
	min-height: 36px;
}

/* Telefonon a felső sáv elrejtve: ott a hely a menünek és a CTA-nak kell. */
@media (max-width: 599px) {
	.bess-topbar {
		display: none;
	}
}

.bess-kozossegi--vilagos a {
	color: var(--wp--preset--color--muted);
}

.bess-kozossegi--vilagos a:hover {
	color: var(--wp--preset--color--ink);
}

/* ==========================================================================
   11. Morzsamenü
   ========================================================================== */

.bess-morzsa ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
}

.bess-morzsa li + li::before {
	content: "/";
	margin-right: 10px;
	opacity: 0.6;
}

.bess-morzsa a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.bess-morzsa a:hover {
	color: var(--wp--preset--color--accent-hover);
	border-bottom-color: currentColor;
}

.bess-morzsa [aria-current="page"] {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

/* Sötét fejlécben (aloldal fejléc) */
.bess-morzsa--vilagos ol {
	color: var(--wp--preset--color--muted-light);
	justify-content: center;
}

.bess-morzsa--vilagos [aria-current="page"] {
	color: var(--wp--preset--color--paper);
}

/* ==========================================================================
   12. Kártya-ikonok, jelvény, szalag, csillagok
   ========================================================================== */

.bess-kartya-ikon img {
	width: 32px;
	height: 32px;
}

/* A szalag 2026-09-15-ig egy pulzáló piros pöttyöt viselt (`::before` +
   `bess-pulzal` keyframe). Megrendelői kérés: kerüljön le. A bal oldali
   padding ezért 10px-ről 14px-re nőtt – a szűkebb érték a pöttynek szólt,
   nélküle a pill láthatóan aszimmetrikus lenne. */
.bess-jelveny {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border: 1px solid var(--wp--preset--color--vonal-sotet);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.03);
	font-family: var(--wp--preset--font-family--saira);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--bess-accent-sotet-hatteren);
}

/* Sarokszalag a hero statisztika-kártyán */
.bess-hero-kartya {
	position: relative;
	overflow: hidden;
}

.bess-szalag {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	padding: 5px 14px;
	background: var(--wp--preset--color--accent-hover);
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--saira);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border-bottom-left-radius: var(--wp--custom--radius--alap);
}

.bess-csillagok {
	display: flex;
	gap: 3px;
	margin: 0 0 8px;
}

.bess-csillagok img {
	width: 16px;
	height: 16px;
}

/* „Részletek →" jellegű linkek */
.bess-tovabb a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font-family: var(--wp--preset--font-family--saira);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--sm);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--accent-hover);
	text-decoration: none;
}

.bess-tovabb a::after {
	content: "";
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: var(--bess-nyil) center / contain no-repeat;
	mask: var(--bess-nyil) center / contain no-repeat;
	--bess-nyil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15m0 0l-5-5m5 5l-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	transition: transform 0.15s ease;
}

.bess-tovabb a:hover {
	text-decoration: underline;
}

.bess-tovabb a:hover::after {
	transform: translateX(3px);
}

/* Pipás előny-lista */
.bess-elonyok {
	list-style: none;
	padding-left: 0;
}

.bess-elonyok li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 10px;
}

.bess-elonyok li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.25em;
	width: 18px;
	height: 18px;
	background: var(--wp--preset--color--accent-hover);
	-webkit-mask: var(--bess-pipa) center / contain no-repeat;
	mask: var(--bess-pipa) center / contain no-repeat;
	--bess-pipa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ==========================================================================
   13. Fekvő projektkártya és soros hírkártya
   ========================================================================== */

@media (min-width: 782px) {
	.bess-projekt--fekvo {
		display: grid;
		grid-template-columns: 2fr 3fr;
	}

	.bess-projekt--fekvo .bess-projekt__kep img {
		height: 100%;
		aspect-ratio: auto;
		min-height: 220px;
	}

	.bess-hir--sor {
		display: grid;
		grid-template-columns: 1fr 2.4fr;
		align-items: center;
	}

	.bess-racs--sor {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.bess-hir--sor .bess-hir__kep img {
		height: 100%;
		min-height: 180px;
	}
}

/* ==========================================================================
   14. Kapcsolódó projektek
   ========================================================================== */

.bess-kapcsolodo__cim {
	font-family: var(--wp--preset--font-family--saira);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--h-3);
	text-transform: uppercase;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink);
	margin: 0 0 24px;
}

/* ==========================================================================
   15. Ragadós mobil CTA sáv
   ========================================================================== */

/*
 * A sáv KIZÁRÓLAG telefonon és kis tableten látszik. A ".wp-site-blocks"
 * előtag nem díszítés: a WordPress globális stílusa
 * "body .is-layout-flex { display: flex }" alakban érkezik, ami fajsúlyban
 * legyőzte az egyosztályos ".bess-mobil-cta { display: none }" szabályt –
 * emiatt jelent meg a sáv asztali nézetben is, az oldal alján, nem ragadósan.
 */
.wp-site-blocks .bess-mobil-cta {
	display: none;
}

@media (max-width: 899px) {
	.wp-site-blocks .bess-mobil-cta {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 90;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
		background: rgba(14, 16, 19, 0.96);
		border-top: 1px solid var(--wp--preset--color--vonal-sotet);
		backdrop-filter: blur(6px);
	}

	.bess-mobil-cta .wp-block-buttons,
	.bess-mobil-cta .wp-block-button {
		width: 100%;
	}

	.bess-mobil-cta .wp-block-button__link {
		width: 100%;
		min-height: 48px;
	}

	/*
	 * Ne takarja el a lábléc végét. A lábléc alsó paddingja a sablonrészben
	 * SOR BELI stílusként él (var:preset|spacing|60), amit külső szabállyal
	 * !important nélkül nem lehet felülírni – emiatt lógott rá a sáv a
	 * copyright sorra. Ezért nem a paddingot növeljük, hanem a lábléc utolsó
	 * elemének adunk alsó margót: így a Szerkesztőben a lábléc paddingja
	 * továbbra is szabadon állítható.
	 */
	body:not(.bess-kapcsolat-oldal) .bess-footer > :last-child {
		margin-bottom: 72px;
	}

	/* A kapcsolat oldalon felesleges: ott az űrlap a tartalom. */
	body.bess-kapcsolat-oldal .wp-site-blocks .bess-mobil-cta {
		display: none;
	}
}

/* A fejléc CTA gombja jelezze, ha épp a kapcsolat oldalon vagyunk. */
body.bess-kapcsolat-oldal .bess-header__cta .wp-block-button__link {
	background: transparent !important;
	color: var(--wp--preset--color--paper) !important;
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent);
}

/* ==========================================================================
   16. Kereső: a mobil menüben és a felső sávban
   ========================================================================== */

.bess-header .wp-block-navigation .wp-block-search {
	display: none;
	width: 100%;
	margin-top: 20px;
}

.bess-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-search {
	display: block;
}

.bess-header .wp-block-search__input {
	min-height: 48px;
	font-size: 16px;
	border: 1px solid var(--wp--preset--color--vonal-sotet);
	border-radius: var(--wp--custom--radius--alap);
	background: rgba(255, 255, 255, 0.06);
	color: var(--wp--preset--color--paper);
	padding: 10px 14px;
}

.bess-header .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--muted-light);
}

.bess-header .wp-block-search__button {
	min-height: 48px;
	background: var(--wp--preset--color--accent-hover);
	color: var(--wp--preset--color--paper);
	border: 0;
	border-radius: var(--wp--custom--radius--alap);
	font-family: var(--wp--preset--font-family--saira);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding-inline: 18px;
}

/*
 * Felső sávi kereső (asztali nézet).
 *
 * A mobil menüben eddig is volt kereső, az asztalin nem – ez pótolja, a
 * közösségi ikonok mellett. A gomb a mezőn BELÜL, nagyító ikonnal: a felső sáv
 * rögzített 49 px magas, oda külön feliratos gomb nem fér el.
 *
 * A `.bess-header` alatti szabályok itt nem hatnak (a kereső a felső sávban
 * van, nem a fejlécben), ezért kap saját, teljes készletet.
 */
.bess-topbar .bess-kereso {
	margin: 0;
	max-width: 220px;
}

.bess-topbar .bess-kereso .wp-block-search__inside-wrapper {
	border: 1px solid var(--wp--preset--color--vonal-sotet);
	border-radius: var(--wp--custom--radius--kicsi);
	background: rgba(255, 255, 255, 0.06);
	padding: 0;
}

.bess-topbar .bess-kereso .wp-block-search__input {
	min-height: 32px;
	padding: 4px 10px;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--paper);
	font-size: var(--wp--preset--font-size--xs);
}

.bess-topbar .bess-kereso .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--muted-light);
	opacity: 1;
}

.bess-topbar .bess-kereso .wp-block-search__input:focus {
	outline: 2px solid var(--wp--preset--color--paper);
	outline-offset: -2px;
}

.bess-topbar .bess-kereso .wp-block-search__button {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Az érintési cél a sáv magasságát nem lépheti túl: 32 px marad, de a
	   gomb a teljes mezőmagasságot lefedi, tehát a célterület nem kisebb nála. */
	min-width: 34px;
	min-height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--muted-light);
}

.bess-topbar .bess-kereso .wp-block-search__button:hover,
.bess-topbar .bess-kereso .wp-block-search__button:focus-visible {
	color: var(--wp--preset--color--paper);
}

.bess-topbar .bess-kereso .wp-block-search__button svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/*
 * A felső sáv 599 px alatt csak akkor jelenik meg, ha van benne verzió-jelölő
 * – ott viszont CSAK az kell: a keresőt a mobil menü már tartalmazza, és a
 * 220 px-es mező szétfeszítené a 44 px-es sávot.
 */
@media (max-width: 599px) {
	.bess-topbar .bess-kereso {
		display: none;
	}
}

/* ==========================================================================
   17. Spec-táblázat: ragadós első oszlop mobilon
   ========================================================================== */

@media (max-width: 781px) {
	.bess-spec th:first-child,
	.bess-spec td:first-child {
		position: sticky;
		left: 0;
		z-index: 1;
		background: var(--wp--preset--color--paper);
		box-shadow: 1px 0 0 var(--wp--preset--color--vonal);
		min-width: 150px;
	}

	.bess-spec thead th:first-child {
		background: var(--wp--preset--color--paper);
	}
}

/* ==========================================================================
   18. Eredmények számokban sáv
   ========================================================================== */

.bess-szam {
	display: block;
	font-family: var(--wp--preset--font-family--saira);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--display);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--paper);
}

.bess-szam--accent {
	color: var(--wp--preset--color--accent);
}

.bess-szam-cimke {
	display: block;
	font-family: var(--wp--preset--font-family--saira);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--muted-light);
	margin-top: 10px;
}

/* ============================================================
   Verzió-jelölő (V1 / V2 / V3 …)

   A felső sávban ül, a nyelvváltó és a közösségi ikonok mellett, és csak
   azokon az oldalakon jelenik meg, amiknek több verziója van. A bővítmény
   blokkja rajzolja (`Crescom_Bess_Verzio`), nem a tartalom része – így egy
   beállítással lekapcsolható, és a Szerkesztőben nem lehet kitörölni.

   Miért a felső sávba és nem a menüsorba: a menüsor 1099 px-nél amúgy is épp
   csak kifér (hat menüpont + CTA), oda egy további elem visszahozná a
   kétsoros törést. A felső sáv viszont rögzített magasságú, félig üres
   segédsáv – pont ilyesminek van fenntartva.

   Kontraszt az ink (#0E1013) sávon kimérve: a címke és az inaktív gomb
   (#AEB6BE) 9,29:1, az aktív gomb (#F0BE33 háttéren ink szöveg) 10,99:1,
   a gombcsoport kerete (#6B7683) 4,12:1 – bőven a 3:1-es nem-szöveg küszöb
   fölött. Az aktív verziót nem csak a szín jelöli: `aria-current="page"` van
   rajta, és nem link.
   ============================================================ */

.bess-verzio {
	display: flex;
	align-items: center;
	gap: 8px;
}

.bess-verzio__cimke {
	font-family: var(--wp--preset--font-family--saira);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted-light);
}

.bess-verzio ul {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bess-verzio__gomb {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Ugyanaz az érintési cél, mint a nyelvváltóé a sáv másik oldalán. */
	min-width: 36px;
	min-height: 36px;
	padding: 0 10px;
	border: 1px solid #6B7683;
	border-radius: var(--wp--custom--radius--kicsi);
	font-family: var(--wp--preset--font-family--saira);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--muted-light);
	text-decoration: none;
}

a.bess-verzio__gomb:hover,
a.bess-verzio__gomb:focus-visible {
	color: var(--wp--preset--color--paper);
	border-color: var(--wp--preset--color--paper);
}

a.bess-verzio__gomb:focus-visible {
	outline: 2px solid #F0BE33;
	outline-offset: 1px;
}

.bess-verzio__gomb--aktiv {
	background: #F0BE33;
	border-color: #F0BE33;
	color: var(--wp--preset--color--ink);
}

/*
 * Telefonon a felső sáv rejtve van (a hely a menünek és a CTA-nak kell), a
 * verzió-jelölő viszont pont ott kell a legjobban: a megrendelő telefonon is
 * végig akarja nézni a verziókat. Ezért ha van jelölő, a sáv megjelenik –
 * de CSAK a jelölővel, a nyelvek és az ikonok nélkül, és alacsonyabban.
 *
 * A `--bess-felso-sav` értékét is állítani kell, mert a ragadós fejléc pontosan
 * ennyivel tapad feljebb; enélkül a menüsor elcsúszna.
 */
@media (max-width: 599px) {
	:root:has(.bess-verzio) {
		--bess-felso-sav: 44px;
	}

	.bess-topbar:has(.bess-verzio) {
		display: block;
	}

	.bess-topbar:has(.bess-verzio) .bess-nyelvvalto,
	.bess-topbar:has(.bess-verzio) .bess-kozossegi {
		display: none;
	}

	.bess-verzio__gomb {
		min-height: 32px;
	}
}

/* ==========================================================================
   10. V4 – gyártói fülek, fotós termékkártya, neves logó-helyőrző
   ========================================================================== */

/* Gyártói fülsáv (JD Energy / CATL / Sineng).

   A `hidden` attribútumot a szkript veszi le, miután megtalálta a
   szakaszokat – JavaScript nélkül tehát minden szakasz egymás alatt látszik,
   és nem marad itt egy fülsáv, ami nem csinál semmit.

   Ellentétben az elrendezés-váltóval ez a KÉSZ oldal része, ezért nem a
   segédeszköz-stílust kapja, hanem a márkáét: aláhúzásos fül, piros aktív
   jelöléssel. */
.bess-fulek[hidden] {
	display: none;
}

.bess-fulek {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	justify-content: center;
	margin-bottom: var(--wp--preset--spacing--50);
	border-bottom: 1px solid var(--wp--preset--color--vonal);
}

.bess-fulek__gomb {
	min-height: 44px;
	display: flex;
	align-items: center;
	padding: 0 20px;
	margin-bottom: -1px;
	border-bottom: 2px solid transparent;
	background: none;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--saira);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}

.bess-fulek__gomb:hover,
.bess-fulek__gomb:focus-visible {
	color: var(--wp--preset--color--szoveg);
	text-decoration: none;
}

/* Telefonon a három fül csak akkor fér egy sorba, ha szűkebb a belvilág és
   apróbb a betű – két sorban tördelve a sáv nem olvasódna fülsávnak. */
@media (max-width: 599px) {
	.bess-fulek__gomb {
		padding: 0 10px;
		font-size: var(--wp--preset--font-size--xs);
		letter-spacing: 0.02em;
	}
}

.bess-fulek__gomb[aria-selected="true"] {
	color: var(--wp--preset--color--szoveg);
	border-bottom-color: var(--wp--preset--color--accent);
}

/* A fülekhez tartozó szakasz. JavaScript nélkül mindegyik látszik, ezért kell
   neki saját felső távolság; a szkript ilyenkor a `hidden`-t kezeli. */
.bess-ful-szakasz[hidden] {
	display: none;
}

/* Fotós termékkártya (V4).

   A V1–V3 képei a forgalmazó fehér hátterű renderei, azokat a kártya közepén,
   saját méretükben mutatjuk. A V4 fotói a gyártó sötét stúdióhátterű renderei,
   AZONOS 4:3 kivágással – ezeknél a kép a kártya teljes szélességét kitölti,
   különben a sötét tábla úgy hatna, mintha véletlenül csúszott volna oda. */
.bess-termek-kep--foto img {
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--alap);
}

.bess-termek-racs--negy .bess-termek-kep--foto img {
	max-height: none;
}

/* Neves logó-helyőrző.

   Azoknak a partnereknek, akik szerepelnek a megrendelő listáján, de a
   logójuk még nem érkezett meg. Szaggatott keret: ránézésre is látszik, hogy
   ez nem a végleges állapot. */
.bess-logo-helyorzo {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 80px;
	padding: 14px 12px;
	border: 1px dashed var(--wp--preset--color--vonal);
	border-radius: var(--wp--custom--radius--alap);
	background: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--saira);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* Ugyanaz a cellaméretezés, mint a valódi logóké – különben a helyőrző
   kilógna a sorból. A szabályok a logósáv töréspontjait követik. */
.bess-logos .bess-logo-helyorzo {
	flex: 1 1 calc(50% - 6px);
	max-width: calc(50% - 6px);
}

@media (min-width: 600px) {
	.bess-logos .bess-logo-helyorzo {
		flex: 1 1 calc(33.333% - 8px);
		max-width: calc(33.333% - 8px);
	}
}

@media (min-width: 1100px) {
	.bess-logos .bess-logo-helyorzo {
		flex: 1 1 0;
		max-width: none;
	}
}

/* Hiányzó adat jelölése a V4 szövegeiben (pl. a javaslatból kimaradt mondat).
   Szándékosan feltűnő: ez a lista, amit még ki kell tölteni. */
.bess-hianyzik {
	display: inline-block;
	padding: 2px 8px;
	border: 1px dashed var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--kicsi);
	color: var(--wp--preset--color--accent-hover);
	font-family: var(--wp--preset--font-family--saira);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.04em;
}

/* Referenciafotó a Projektjeink oldal részletező kártyáin.

   A kártya belvilága 28 px, a kép viszont a kártya széléig ér: a fotó így
   nem „beágyazott illusztráció", hanem a kártya fejléce.

   A `figure` szó a szelektorban nem díszítés: a kártya kötött szélességű
   (`is-layout-constrained`) elrendezés, ami minden gyerekére `max-width`-et és
   automatikus oldalmargót tesz – azonos súlyú szelektorral. Az elemnévvel a
   sajátunk lesz az erősebb, enélkül a kép 760 px-en, középre igazítva marad. */
.bess-card figure.bess-referencia-kep {
	max-width: none;
	width: calc(100% + 56px);
	margin: -28px -28px 20px;
}

.bess-card figure.bess-referencia-kep img {
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--alap) var(--wp--custom--radius--alap) 0 0;
}