/* base.css */
/**
 * Állj meg! - alap design-rendszer
 *
 * Itt CSAK olyan stílus van, amit több szekció is használ, vagy amit a
 * theme.json nem tud kifejezni (kemény árnyék, sticker-pozicionálás,
 * accordion, számozott listák). Egy-egy szekció saját stílusa az
 * assets/css/sections/<pattern-slug>.css fájlba kerül.
 *
 * Design tokenek (theme.json):
 *   --wp--preset--color--base       #F5EBDB  krém háttér
 *   --wp--preset--color--base-2     #F5F0E8  világosabb krém szekció
 *   --wp--preset--color--white      #FFFFFF
 *   --wp--preset--color--contrast   #131313  fekete
 *   --wp--preset--color--contrast-2 #5C5C5C  szürke törzsszöveg
 *   --wp--preset--color--red        #E32218  figyelem
 *   --wp--preset--color--yellow     #FFE25F  kampány
 *   --wp--preset--color--green      #8DC63F  teendő
 */

:root {
	--am-border: 2px solid var(--wp--preset--color--contrast);
	--am-border-thin: 1px solid var(--wp--preset--color--contrast);
	/* A Figmában az árnyékok szinte függőlegesek: dobozok 1/8 px, gombok 2/6 px
	   (48:443, 48:748, 48:520) - nem 45 fokos eltolás. */
	--am-shadow: 1px 8px 0 0 var(--wp--preset--color--contrast);
	--am-shadow-sm: 2px 6px 0 0 var(--wp--preset--color--contrast);
}

/* -------------------------------------------------------------------------
   Alapok
   ------------------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
	/* A sticky fejléc ne takarja el a horgonyzott szekció címét. */
	scroll-padding-top: 7rem;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* A szekciók (hero, sávok, lábléc) élben érnek össze, nincs köztük rés. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

:where(a, button, summary, input, textarea):focus-visible {
	outline: 3px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

/* Sötét, piros és zöld hátterű szekciókban a fekete fókuszgyűrű nem látszik,
   ezért ott világos (sárga) gyűrűt adunk - így a tabbal navigálás mindenhol
   követhető. */
.am-wtd :where(a, button, summary):focus-visible,
.am-footer :where(a, button, summary):focus-visible,
.am-step-banner :where(a, button, summary):focus-visible,
.am-video:focus-visible {
	outline-color: var(--wp--preset--color--yellow);
}

/* Kampány-arculat: a nagy feliratok a design display betűjével (Jomhuria).
   A Jomhuria em-doboza szokatlanul nagy (cap-height ~0.39em), ezért a rá
   állított font-size nagyjából a DUPLÁJA egy hagyományos grotesk méretének,
   és a sortávolság is 1 alatt van. Egyetlen vastagsága van (400). */
.am-display {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	line-height: 0.6;
	letter-spacing: 0;
	text-transform: uppercase;
}

/* Szekció címek a Figma szerint: desktopon 36 / 40, mobilon 24.06 / 32.08.
   (A preset fix méretű, a mobil értéket itt adjuk meg - a WP fluid motorja
   a megadott min alá is skálázna.) */
@media (max-width: 781px) {
	h2,
	.wp-block-heading.has-xx-large-font-size {
		font-size: 1.504rem !important;
		line-height: 1.333;
	}

}

/* A .am-display feliratok a Jomhuria kis cap-height-ja miatt nagyobb
   font-size-t kapnak, hogy a vizuális méret a designnal egyezzen. */
h1.am-display:not(.am-hero__title) {
	font-size: clamp(3.5rem, 9vw, 7rem);
}

/* -------------------------------------------------------------------------
   Mono label - a szekciók feletti apró, ritkított feliratok
   pl. "KÖZÖSSÉGI VÉDELEM", "SÜRGŐS TEENDŐK", "MI TÖRTÉNIK?"
   ------------------------------------------------------------------------- */

/* Figma 48:507 / 48:445: mono Regular 18 / 16.04, 1.203px betűköz.
   Félkövér csak ott, ahol a design is az (lásd .am-label--on-red és a
   csalástípus-harmonika címkéi). */
.am-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1.128rem;
	font-weight: 400;
	letter-spacing: 1.203px;
	line-height: 0.889;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-2);
	margin-bottom: 0.75rem;
}

.am-label--on-dark {
	color: rgba(255, 255, 255, 0.65);
}

/* Figma 48:210: piros háttéren is sötét (#131313), Consolas Bold 18 / 16.04. */
.am-label--on-red {
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
}

/* -------------------------------------------------------------------------
   Kemény árnyék - a kampány vizuális aláírása
   Használat: <div class="wp-block-group am-hard"> ... </div>
   ------------------------------------------------------------------------- */

.am-hard {
	border: var(--am-border);
	box-shadow: var(--am-shadow);
}

.am-hard-sm {
	border: var(--am-border);
	box-shadow: var(--am-shadow-sm);
}

/* Világos kereten belül vékonyabb vonal (kártyák krém háttéren). */
.am-hard--thin {
	border: var(--am-border-thin);
	box-shadow: var(--am-shadow);
}

/* -------------------------------------------------------------------------
   Címsor aláhúzás - rövid, kemény vonal a szekciócím alatt
   ------------------------------------------------------------------------- */

.am-underline::after {
	content: "";
	display: block;
	width: 3.75rem;
	height: 4px;
	margin-top: 0.875rem;
	background: currentColor;
}

.am-underline--full::after {
	width: 100%;
	height: 1px;
}

/* -------------------------------------------------------------------------
   Számozott lista - "Mit tegyen?", "Már megtörtént?" szekciók
   Szerkezet:
   <ol class="am-steps-list am-steps-list--green">
     <li><span class="am-steps-list__num">1</span><span class="am-steps-list__text">...</span></li>
   </ol>
   ------------------------------------------------------------------------- */

.am-steps-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border: var(--am-border);
	box-shadow: var(--am-shadow);
	background: var(--wp--preset--color--white);
}

.am-steps-list > li {
	display: grid;
	/* Figma 28:886 / 48:215: a sorszám-oszlop 56px (mobil) / 90px (desktop). */
	grid-template-columns: 5.625rem 1fr;
	align-items: stretch;
	border-bottom: var(--am-border);
	margin: 0;
}

.am-steps-list > li:last-child {
	border-bottom: 0;
}

.am-steps-list__num {
	display: flex;
	align-items: center;
	justify-content: center;
	/* A Figmában ezek a sorszámok félkövér Interrel futnak (a lépés-kártyák
	   sorszáma az, ami mono - lásd .am-wtd__num). */
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	border-right: var(--am-border);
}

.am-steps-list--green .am-steps-list__num {
	background: var(--wp--preset--color--green);
}

.am-steps-list--yellow .am-steps-list__num {
	background: var(--wp--preset--color--yellow);
}

.am-steps-list__text {
	display: flex;
	align-items: center;
	padding: 1rem 1.25rem;
	font-weight: 500;
	line-height: 1.45;
}

/* -------------------------------------------------------------------------
   Tiltó lista - "Mit NE tegyen?" piros szekció fehér kártyái
   Szerkezet:
   <ul class="am-dont-list">
     <li>Ne adjon meg kódot.</li>
   </ul>
   A ✕ jelet CSS maszk helyett inline SVG background adja, hogy a lista
   szemantikusan egyszerű maradjon.
   ------------------------------------------------------------------------- */

.am-dont-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border: var(--am-border);
	box-shadow: var(--am-shadow);
	background: var(--wp--preset--color--white);
}

.am-dont-list > li {
	display: grid;
	grid-template-columns: 3.5rem 1fr;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 1rem 1.25rem 1rem 0;
	border-bottom: var(--am-border);
	font-weight: 700;
	line-height: 1.4;
}

.am-dont-list > li:last-child {
	border-bottom: 0;
}

.am-dont-list > li::before {
	content: "";
	display: block;
	width: 1.5rem;
	height: 1.5rem;
	margin: 0 auto;
	background: var(--wp--preset--color--red);
	clip-path: polygon(20% 0, 50% 30%, 80% 0, 100% 20%, 70% 50%, 100% 80%, 80% 100%, 50% 70%, 20% 100%, 0 80%, 30% 50%, 0 20%);
}

/* -------------------------------------------------------------------------
   Accordion (core/details) - "Ismerje fel a csalás jeleit"
   ------------------------------------------------------------------------- */

.am-accordion {
	border: var(--am-border-thin);
	background: var(--wp--preset--color--white);
}

.am-accordion .wp-block-details {
	margin: 0;
	border-bottom: var(--am-border-thin);
	padding: 0;
}

.am-accordion .wp-block-details:last-child {
	border-bottom: 0;
}

.am-accordion .wp-block-details > summary {
	position: relative;
	list-style: none;
	cursor: pointer;
	padding: 1.25rem 3.5rem 1.25rem 1.25rem;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.0625rem;
}

.am-accordion .wp-block-details > summary::-webkit-details-marker {
	display: none;
}

/* A summary egy kattintható sor - kell rá hover-visszajelzés. */
.am-accordion .wp-block-details > summary {
	transition: background-color 0.15s ease;
}

.am-accordion .wp-block-details > summary:hover {
	background-color: rgba(255, 226, 95, 0.35);
}

.am-accordion .wp-block-details[open] > summary:hover {
	background-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
	.am-accordion .wp-block-details > summary {
		transition: none;
	}
}

/* + / − jelzés jobb oldalon */
.am-accordion .wp-block-details > summary::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: 1.25rem;
	transform: translateY(-50%);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1;
	color: var(--wp--preset--color--contrast);
}

.am-accordion .wp-block-details[open] > summary::after {
	content: "\2212";
}

.am-accordion .wp-block-details[open] > summary {
	padding-bottom: 0.5rem;
}

/* A summary-n belüli sorszám + leírás */
.am-accordion__index {
	display: block;
	/* Figma: mono 12.03 / 16.04 / 1.2px betűköz. */
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.752rem;
	font-weight: 400;
	line-height: 1.333;
	letter-spacing: 1.2px;
	color: var(--wp--preset--color--contrast-3);
	margin-bottom: 0.35rem;
}

.am-accordion__lead {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast-2);
	margin-top: 0.35rem;
}

/* Kinyitott tartalom: sárga panel */
.am-accordion__body {
	background: var(--wp--preset--color--yellow);
	padding: 1.25rem;
}

.am-accordion__body > :first-child {
	margin-top: 0;
}

.am-accordion__body > :last-child {
	margin-bottom: 0;
}

.am-accordion__body .am-label {
	color: rgba(19, 19, 19, 0.6);
	margin-bottom: 0.25rem;
}

.am-accordion__body p {
	margin: 0 0 1rem;
}

.am-accordion__body p:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   Sticker - dekoratív ikonok (stop tábla, háromszög, csaló, sárga X)
   A szülő elem kapja: class="am-stickers" (position: relative)
   Az ikon: class="am-sticker am-sticker--<hely>"
   Minden sticker aria-hidden, mobilon a zavaróbbak elrejthetők.
   ------------------------------------------------------------------------- */

.am-stickers {
	position: relative;
}

.am-sticker {
	position: absolute;
	pointer-events: none;
	user-select: none;
	z-index: 2;
}

/* A WP flow-layout blokk-rése (:where(...) > * + *) az abszolút pozíciójú
   matricákra is ráülne, és 24px-szel elcsúsztatná a százalékos helyüket. */
.am-stickers > .am-sticker {
	margin: 0;
}

.am-sticker img,
.am-sticker svg {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 781px) {
	.am-sticker--hide-mobile {
		display: none;
	}

	.am-chain {
		font-size: 0.875rem;
		gap: 0.5rem 0.75rem;
	}
}

/* -------------------------------------------------------------------------
   Pill - lekerekített, kemény szegélyű sáv (fejléc, lépés-szalag)
   ------------------------------------------------------------------------- */

.am-pill {
	border-radius: 999px;
}

/* Lépés-szalag: ÁLLJ MEG! > ÁLLÍTSD MEG! > ELLENŐRÍZD */
 /* Figma 48:252: Jomhuria, 16px köz, a szeparátor sárga. */
.am-chain {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 1rem;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0;
	/* A Jomhuria tintája 0.082em-mel a sorbox közepe FÖLÖTT ül - ennyit
	   tolunk vissza, hogy a szalagban optikailag középen legyen. */
	transform: translateY(0.082em);
}

.am-chain__sep {
	color: var(--wp--preset--color--yellow);
	font-weight: 400;
}

/* -------------------------------------------------------------------------
   Jelvény - piros keretes pill a stoptábla-ikonnal ("ÁLLJ MEG!")
   Szekció-felvezetőként, a cím fölött.
   ------------------------------------------------------------------------- */

/* A jelvény blokkszintű sorban ül, hogy a szekció tartalomsávjához
   igazodjon (az inline-flex elem kiesne a constrained layout igazításából). */
.am-badge-row {
	position: relative;
	display: block;
	margin-bottom: 1.5rem;
}

/* Mobilon a soron végigfut egy vonal a jelvény MAGASSÁGÁNAK közepén, széltől
   szélig - a jelvény tömör háttere takarja ki a vonalat maga alatt.
   Desktopon a design szerint nincs vonal, csak a jelvény áll magában. */
@media (max-width: 781px) {
	.am-badge-row::before {
		content: "";
		position: absolute;
		top: 50%;
		left: calc(-1 * var(--wp--style--root--padding-left));
		right: calc(-1 * var(--wp--style--root--padding-right));
		height: 1px;
		background: var(--wp--preset--color--contrast);
	}
}

.am-badge {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	/* A térköz a soron van, hogy a vonal a JELVÉNY közepére essen. */
	margin: 0;
	padding: 0.3rem 1rem 0.3rem 0.4rem;
	border: 2px solid var(--wp--preset--color--red);
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	line-height: 1;
}

.am-badge__icon {
	display: block;
	width: 1.75rem;
	height: 1.75rem;
}

.am-badge__text {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.881rem;
	font-weight: 400;
	line-height: 0.62;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	white-space: nowrap;
	/* A Jomhuria tintája 0.082em-mel a sorbox közepe fölött ül - ennyit
	   tolunk vissza, hogy az ikonnal egy vonalban legyen. */
	transform: translateY(0.082em);
}

/* -------------------------------------------------------------------------
   Videó poszter play-gombbal
   Szerkezet:
   <a class="am-video" href="..."><img ...><span class="am-video__play"></span></a>
   ------------------------------------------------------------------------- */

.am-video {
	position: relative;
	display: block;
	text-decoration: none;
	border: var(--am-border-thin);
	background: var(--wp--preset--color--contrast);
}

.am-video img {
	display: block;
	width: 100%;
	height: auto;
}

.am-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--yellow);
	border: 2px solid var(--wp--preset--color--contrast);
	display: grid;
	place-items: center;
	transition: transform 0.15s ease;
}

.am-video__play::before {
	content: "";
	width: 0;
	height: 0;
	margin-left: 0.35rem;
	border-left: 1.15rem solid var(--wp--preset--color--contrast);
	border-top: 0.7rem solid transparent;
	border-bottom: 0.7rem solid transparent;
}

.am-video:hover .am-video__play,
.am-video:focus-visible .am-video__play {
	transform: translate(-50%, -50%) scale(1.08);
}

.am-video--small .am-video__play {
	width: 2.75rem;
	height: 2.75rem;
}

.am-video--small .am-video__play::before {
	margin-left: 0.2rem;
	border-left-width: 0.7rem;
	border-top-width: 0.45rem;
	border-bottom-width: 0.45rem;
}

@media (prefers-reduced-motion: reduce) {
	.am-video__play {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
   Letöltés-sor - "Add tovább az információt" zöld szekció
   ------------------------------------------------------------------------- */

.am-download-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem 0;
	border-bottom: var(--am-border);
}

.am-download-row__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.0625rem;
	max-width: 34ch;
}

/* -------------------------------------------------------------------------
   Fejléc
   ------------------------------------------------------------------------- */

.am-header {
	position: sticky;
	top: 0;
	z-index: 50;
}

.am-logo {
	display: inline-flex;
	align-items: center;
	/* A doboz magassága a Figma szerinti (~44px), a felső belső margó
	   0.164em-mel nagyobb az alsónál - ennyivel ül a Jomhuria tintája a
	   sorbox közepe FÖLÖTT. */
	padding: 0.23em 0.16em 0.066em;
	border: var(--am-border);
	background: var(--wp--preset--color--white);
	/* Figma 48:103 / 48:603: Jomhuria 45.867 (láblécben 43.93), lekerekített
	   dobozban. A Jomhuria tintája a sorbox felső felében ül (alapvonal 0.613em,
	   cap 0.391em), ezért a felső belső margó nagyobb - így kerül optikailag
	   középre. */
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: 2.865rem;
	line-height: 0.62;
	border-radius: 8px;
	letter-spacing: 0;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	white-space: nowrap;
}

.am-logo--red {
	background: var(--wp--preset--color--red);
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--white);
}

/* -------------------------------------------------------------------------
   Segéd-osztályok
   ------------------------------------------------------------------------- */

.am-nowrap {
	white-space: nowrap;
}

/* Kiemelt szó fekete/sárga alappal - pl. "Mit NE tegyen?" */
.am-mark {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--white);
	padding: 0 0.25em;
}

.am-screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------------------------------------------
   Mobil tipográfia - a Figma mobil design szerint a gombok és a szekciócímek
   kisebbek, mint amit a fluid skála adna.
   ------------------------------------------------------------------------- */

@media (max-width: 781px) {
	.wp-element-button,
	.wp-block-button__link {
		font-size: 0.9375rem;
		padding-left: 1.1rem;
		padding-right: 1.1rem;
	}

}

/* -------------------------------------------------------------------------
   Gombok: explicit átmenet (a "transition: all" feleslegesen animálná a
   layout-tulajdonságokat is).
   ------------------------------------------------------------------------- */

.wp-element-button,
.wp-block-button__link {
	transition-property: background-color, color, box-shadow, border-color;
	transition-duration: 0.15s;
	transition-timing-function: ease;
}

/* Hover: fekete alap + fehér felirat MINDEN gombon. A WordPress a
   has-*-background-color osztályokat !important-tal írja ki, ezért a
   theme.json :hover háttere önmagában nem érvényesülne - így világos
   gomboknál fehér szöveg maradna világos alapon. */
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible,
.wp-element-button:hover,
.wp-element-button:focus-visible {
	background-color: var(--wp--preset--color--contrast) !important;
	color: var(--wp--preset--color--white) !important;
}

@media (prefers-reduced-motion: reduce) {
	.wp-element-button,
	.wp-block-button__link {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
   Mobil felülírások - a fájl VÉGÉN, hogy a fenti alap-szabályokat biztosan
   felülírják (azonos specificitásnál a később jövő nyer).
   ------------------------------------------------------------------------- */

@media (max-width: 781px) {
	/* Figma 28:879 / 28:928 / 28:1055: a mono szekció-címkék mobilon 12.03 /
	   16.04 (desktopon 18). */
	.am-label {
		font-size: 0.752rem;
		line-height: 1.333;
	}

	/* Figma 28:735: a sorszám-oszlop mobilon 52px. */
	.am-steps-list > li {
		grid-template-columns: 3.25rem 1fr;
	}
}

/* 00-chrome.css */
/**
 * Fejléc és lábléc (parts/header.html, parts/footer.html)
 */

/* -------------------------------------------------------------------------
   Fejléc
   ------------------------------------------------------------------------- */

.am-header__bar {
	gap: 1rem;
}

.am-header .am-nav {
	flex: 1 1 auto;
	justify-content: center;
}

.am-header .am-nav .wp-block-navigation__container {
	justify-content: center;
	row-gap: 0.5rem;
}

.am-header .am-nav a {
	color: var(--wp--preset--color--contrast);
	white-space: nowrap;
	/* Figma 48:105: Inter Regular 11 / 20.05 / -0.5px. */
	font-size: 0.6875rem;
}

@media (min-width: 782px) {
	.am-header__bar {
		flex-wrap: nowrap;
	}

	.am-header .am-nav .wp-block-navigation__container {
		gap: 0.9rem;
	}
}

.am-header .am-nav a:hover,
.am-header .am-nav a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* -------------------------------------------------------------------------
   Mobil menü-overlay (Figma "Frame 40")
   Fehér, teljes képernyős lap: a menüpontok bal oldalt behúzva, egymástól
   vékony vonallal elválasztva, jobbra fent a vastag piros X.
   ------------------------------------------------------------------------- */
.am-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--white);
	padding: 0;
}

/* A belső margót a tartalom kapja (nem a lap), így a bezáró X a képernyő
   sarkához igazodik. Figma: az első menüpont sordoboza 74px-re a lap
   tetejétől, a szöveg 58px-re a bal széltől, a vonalak 60px-re a jobb
   széltől érnek véget. (A core 56px-es felső belső margója helyett.) */
.am-header .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
	padding: 4.625rem 3.75rem 3rem;
}

.am-header .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content,
.am-header .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container {
	width: 100%;
	align-items: stretch;
}

/* Figma: 56.7px-es függőleges ritmus - 22.4px sordoboz + 5.6px + vonal + 28px. */
.am-header .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container {
	gap: 1.75rem;
}

.am-header .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item {
	padding-bottom: 0.35rem;
	border-bottom: 1px solid var(--wp--preset--color--contrast);
}

/* Figma: Inter Regular 16 / 1.4, fekete - nem a fejléc 11px-es menüje. */
.am-header .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item a {
	display: block;
	font-size: 1rem;
	line-height: 1.4;
	letter-spacing: normal;
	color: var(--wp--preset--color--contrast);
}

.am-header .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item a:hover,
.am-header .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item a:focus-visible {
	text-decoration: none;
	color: var(--wp--preset--color--red);
}

.am-header .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--contrast);
}

/* Bezárás: a core vékony SVG-keresztje helyett a design 20x20-as, 3px vastag
   piros X-e (a hamburgerhez hasonlóan CSS-ből rajzolva). */
.am-header .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-close {
	top: 2rem;
	right: 1.875rem;
	width: 20px;
	height: 20px;
	padding: 0;
	color: var(--wp--preset--color--red);
}

.am-header .wp-block-navigation__responsive-container-close svg {
	display: none;
}

.am-header .wp-block-navigation__responsive-container-close::before,
.am-header .wp-block-navigation__responsive-container-close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 28px;
	height: 3px;
	background: currentColor;
}

.am-header .wp-block-navigation__responsive-container-close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.am-header .wp-block-navigation__responsive-container-close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

/* Nagy kontrasztú (forced-colors) módban a pszeudo-elemek háttere eltűnik -
   ott az eredeti SVG-ikont hagyjuk meg, különben a menü bezárhatatlan lenne. */
@media (forced-colors: active) {
	.am-header .wp-block-navigation__responsive-container-close::before,
	.am-header .wp-block-navigation__responsive-container-close::after {
		display: none;
	}

	.am-header .wp-block-navigation__responsive-container-close svg {
		display: block;
		width: 24px;
		height: 24px;
	}

	.am-header .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-close {
		width: auto;
		height: auto;
	}
}

.am-header__cta {
	display: inline-flex;
	align-items: center;
	padding: 0.266em 0.6em 0.102em;
	border: 1px solid rgba(19, 19, 19, 0.2);
	border-radius: 999px;
	/* Figma 48:114: Jomhuria 30.212 / uppercase / 0.6042px betűköz.
	   A Jomhuria tintája a sorbox felső felében ül (alapvonal 0.613em,
	   cap 0.391em), ezért a felső belső margó 0.164em-mel nagyobb - így kerül
	   a felirat optikailag középre. */
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.888rem;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.6042px;
	text-transform: uppercase;
	text-decoration: none;
	color: rgba(19, 19, 19, 0.2);
	white-space: nowrap;
	transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.am-header__cta:hover,
.am-header__cta:focus-visible {
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	background: rgba(255, 255, 255, 0.55);
}

/* Inaktív állapot: a funkció még nem él, a gomb csak helyfoglaló. */
.am-header__cta--inactive {
	cursor: default;
	pointer-events: none;
	opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
	.am-header__cta {
		transition: none;
	}
}

/* Sticky fejléc: a sáv alatt nem látszódhat át a tartalom. */
.am-header {
	background: var(--wp--preset--color--base);
}

/* Mobilon (design szerint) a fejléc teljes szélességű sárga sáv,
   lekerekítés és "Saját történeted" CTA nélkül: csak logó + hamburger. */
@media (max-width: 781px) {
	/* A külső group vízszintes (root) paddingját nullázzuk, a gutter-t maga a
	   sáv adja - így a sárga háttér a képernyő széléig ér. */
	.am-header {
		padding: 0 !important;
		background: transparent;
	}

	.wp-block-group.am-header__bar {
		justify-content: space-between;
		flex-wrap: nowrap;
		border-radius: 0 !important;
		border-left: 0;
		border-right: 0;
		border-top: 0;
		border-bottom: 2px solid var(--wp--preset--color--contrast);
		/* Figma 28:615: a sor 26px-re a sáv tetejétől, 19px-re az aljától,
		   30px-re a bal széltől. */
		padding: 1.625rem 1.875rem 1.2rem !important;
		margin: 0 !important;
		max-width: none !important;
		width: 100%;
	}

	/* Figma 28:616-618: a logó mobilon 104 x 30 (Jomhuria ~35px). */
	.am-logo {
		font-size: 2.19rem;
		border-radius: 6px;
	}

	.am-header__cta--desktop {
		display: none;
	}

	.am-header .am-nav {
		flex: 0 0 auto;
	}

	/* Hamburger: a WordPress alapból KÉT vonalat rajzol, a design (28:620-622)
	   hármat - 28.1 x 3 px-es vonalak, 9px-es ritmusban. Az SVG-t elrejtjük és
	   a gombra rajzoljuk a három vonalat. */
	.am-header .wp-block-navigation__responsive-container-open {
		width: 28px;
		height: 21px;
		padding: 0;
		background-image: repeating-linear-gradient(
			to bottom,
			currentColor 0 3px,
			transparent 3px 9px
		);
	}

	.am-header .wp-block-navigation__responsive-container-open svg {
		display: none;
	}

	/* Nagy kontrasztú (forced-colors) módban a háttérkép nem jelenik meg -
	   ilyenkor az eredeti SVG-ikont mutatjuk, különben üres gomb maradna,
	   és a mobil menü elérhetetlenné válna. */
	@media (forced-colors: active) {
		.am-header .wp-block-navigation__responsive-container-open {
			width: auto;
			height: auto;
			background-image: none;
		}

		.am-header .wp-block-navigation__responsive-container-open svg {
			display: block;
			width: 28px;
			height: 28px;
		}
	}
}

/* -------------------------------------------------------------------------
   Lábléc
   ------------------------------------------------------------------------- */

/* Figma 48:607-616: a menü-oszlopok 56px-rel a lábléc tetejétől indulnak -
   pontosan ott, ahol a logó alatti bekezdés szövege is kezdődik.
   (Mobilon egy folyamatos lista van, ott nem kell ez a behúzás.) */
@media (min-width: 782px) {
	.am-footer__top .am-footer__list {
		padding-top: 3.5rem;
	}
}

.am-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Figma 48:610: Inter Regular 11 / 20.05, -0.5px betűköz, 3px sorköz. */
.am-footer__list li {
	margin: 0 0 3px;
	font-size: 0.6875rem;
	line-height: 1.823;
	letter-spacing: -0.5px;
}

.am-footer__list a {
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.am-footer__list a:hover,
.am-footer__list a:focus-visible {
	color: var(--wp--preset--color--white);
	text-decoration: underline;
}

/* Figma 48:607: az első oszlop Inter Medium 14. */
.am-footer__list--strong li {
	font-size: 0.875rem;
}

.am-footer__list--strong a {
	font-weight: 500;
	color: var(--wp--preset--color--white);
}

/* Figma 48:616: a jogi oszlop 50%-os fehér, aláhúzva. */
.am-footer__list--underline a {
	color: rgba(255, 255, 255, 0.5);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.am-footer__rule {
	border: 0;
	height: 1px;
	opacity: 0.25;
}

/* -------------------------------------------------------------------------
   Lábléc - mobil (design szerint egy hasáb, NAVIGÁCIÓ / JOGI címkékkel)
   ------------------------------------------------------------------------- */

/* Desktopon a design nem tartalmaz szekciócímkéket a láblécben, és a
   "Saját történeted" sem szerepel ott. */
.am-footer__label,
.am-footer__item--mobile {
	display: none;
}

@media (max-width: 781px) {
	.am-footer__label,
	.am-footer__item--mobile {
		display: block;
	}

	.am-footer__label {
		margin-bottom: 1rem;
	}

	/* Figma 28:1081: a JOGI csoport 32px-rel lejjebb kezdődik. */
	.am-footer__legal .am-footer__label {
		margin-top: 2rem;
	}

	/* A "Mit tegyen / Mit NE tegyen" és a többi navigációs link mobilon EGY
	   folyamatos listát alkot, egységes stílussal. A core columns flex row-gap-et
	   használ, ezért azt nullázzuk, és a térközöket hasábonként adjuk meg. */
	.am-footer__top {
		row-gap: 0 !important;
	}

	.am-footer__top > .wp-block-column:first-child {
		margin-bottom: 2.25rem;
	}

	.am-footer__nav + .wp-block-column .am-footer__list {
		margin-top: 0;
	}

	/* Figma 28:1081: mobilon minden navigációs link egyforma (Inter 14),
	   egységes 27.7px-es sorritmussal. */
	.am-footer__list li,
	.am-footer__list--strong li {
		font-size: 0.875rem;
		line-height: 1.5;
		margin-bottom: 0.42rem;
	}

	.am-footer__list--strong a {
		font-weight: 400;
		color: var(--wp--preset--color--white);
	}

	.am-footer__list li {
		margin-bottom: 0.85rem;
	}

	.am-footer__legal {
		margin-top: 1.5rem;
	}

	/* A design a szerzői jogi sort balra zárja. */
	.am-footer p.am-label.am-label--on-dark:last-child {
		text-align: left;
	}
}

/* 10-hero.css */
/**
 * Hero szekció (patterns/hero.php)
 *
 * A méretek a Figma designból származnak:
 *   desktop  node 48:93   (1280px-es frame)
 *   mobil    node 28:611  (402px-es frame)
 * A matricák helye a piros táblához (.am-hero__board) van kötve százalékban,
 * így a tábla méretével együtt skálázódnak.
 */

.am-hero {
	/* A fotó körüli matricák szándékosan túllógnak - de vízszintes görgetést
	   soha nem okozhatnak. */
	overflow-x: clip;
}

.am-hero__cols {
	align-items: flex-end;
}

/* A Figmában a fotó ÁTFEDI a szövegoszlopot (a gombok a hölgy előtt vannak),
   ezért a fotó kilóg a saját hasábjából balra, a szöveg pedig fölé kerül. */
.am-hero__copy {
	position: relative;
	z-index: 2;
}

/* Felütés: Inter SemiBold 21 / 24.812 (Figma 48:117).
   (!important: a blokk inline font-weight-jét és a has-large-font-size
   preset-osztály !important-ját kell felülírni.) */
.am-hero__kicker {
	font-size: 1.3125rem !important;
	font-weight: 600 !important;
	line-height: 1.181;
	margin-bottom: 1.25rem;
}

/* A piros tábla és a körülötte lévő matricák "asztala" */
.am-hero__board {
	position: relative;
	display: inline-block;
	max-width: 100%;
}

/* Jomhuria 176.854 / 79.217 (= 0.448 sortáv), tábla-belsőmargók a Figma
   48:119 szerint, a betűmérethez kötve (em), hogy együtt skálázódjanak.
   A felső margó tartalmazza a Figma szövegdobozának felső holtterét is
   (196.935 - 2 x 79.217 = 38.5px), különben a tábla alacsonyabb lenne. */
.am-hero__title {
	position: relative;
	z-index: 1;
	display: inline-block;
	font-size: clamp(5.5rem, 13.8vw, 11rem);
	line-height: 0.448;
	padding: 0.3421em 0.2714em 0.0679em 0.1583em !important;
	border: 1.36px solid var(--wp--preset--color--contrast);
	border-radius: 0.1229em;
	box-shadow: var(--am-shadow);
	max-width: 100%;
}

/* A matricák helye a Figma desktop frame-jéből, a táblához viszonyítva:
   tábla x=176.78 y=308.55 w=386.27 h=233.65. */

.am-hero__cross {
	z-index: 0;
	width: 81.6%;
	top: -13.6%;
	left: -18.8%;
}

.am-hero__window-password {
	width: 40.6%;
	top: 13.3%;
	left: 105.4%;
}

.am-hero__window-warning {
	width: 29%;
	top: 42.3%;
	left: 89.6%;
}

.am-hero__thief {
	width: 18.1%;
	top: 68.3%;
	left: 120.8%;
}

/* -------------------------------------------------------------------------
   "JELSZÓ" widget - a Figma SVG-exportból kimaradt a szöveg (a Figma a
   textet nem path-ként exportálja), ezért a widget HTML+CSS-ből épül.
   ------------------------------------------------------------------------- */

.am-pwbox {
	display: block;
	border-radius: 8px;
	overflow: hidden;
	background: var(--wp--preset--color--white);
	box-shadow: 0 2px 6px rgba(19, 19, 19, 0.12);
	font-size: clamp(0.5rem, 0.85vw, 0.75rem);
}

.am-pwbox__bar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.35em;
	padding: 0.5em 0.7em;
	background: var(--wp--preset--color--yellow);
}

.am-pwbox__bar i {
	width: 0.7em;
	height: 0.7em;
	border-radius: 50%;
	background: #4CC3E8;
}

.am-pwbox__bar i:nth-child(2) {
	background: #3FA34D;
}

.am-pwbox__bar i:nth-child(3) {
	background: var(--wp--preset--color--red);
}

.am-pwbox__field {
	display: flex;
	align-items: center;
	gap: 0.3em;
	padding: 0.6em 0.8em 0.75em;
}

.am-pwbox__label {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.5em;
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-2);
	white-space: nowrap;
	margin-right: 0.15em;
}

.am-pwbox__field b {
	display: grid;
	place-items: center;
	width: 1.9em;
	height: 1.9em;
	border: 1px solid #C9C9C9;
	border-radius: 3px;
	font-size: 1.1em;
	font-weight: 400;
	line-height: 1;
	color: var(--wp--preset--color--contrast-2);
}

.am-hero__lead {
	position: relative;
	z-index: 1;
	max-width: 28.25rem;
	/* Figma 48:123: rgba(0,0,0,0.5). */
	color: rgba(0, 0, 0, 0.5) !important;
	font-size: 1.125rem !important;
	line-height: 1.337;
}

/* Gombok: Inter Bold 16 / 24.06, egymás mellett 20px közzel (Figma 48:124). */
.am-hero__actions {
	gap: 1.25rem;
}

.am-hero__actions .wp-block-button__link {
	font-size: 1rem;
	line-height: 1.5;
	padding: 1rem 1.5rem;
}

/* Az idős hölgy fotója, alul a vonalig - a Figma alul vágja a képet
   (384.264 x 560.373 kivágat, a kép 103.76%-os magassággal, -1.56% eltolással).
   A vágás KÜLÖN elemen van, különben a mellette lévő matricák (felkiáltójel,
   stoptábla) is levágódnának. */
.am-hero__figure {
	position: relative;
	display: block;
	padding-top: 0;
	/* 384.264 / 970 = 39.6% a tartalomsávból, a 20.6%-os hasábból balra kilógva. */
	width: 192%;
	margin-left: -92%;
	margin-bottom: -2px;
}

.am-hero__photo-crop {
	position: relative;
	display: block;
	aspect-ratio: 384.264 / 560.373;
	overflow: hidden;
}

.am-hero__photo {
	position: absolute;
	left: 0;
	top: -1.56%;
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	margin: 0;
}

/* A fotó körüli matricák a .am-hero__figure méretéhez kötve (design arányok). */

.am-hero__exclamation {
	width: 8%;
	top: 19%;
	left: 94.5%;
}

.am-hero__stop {
	width: 32%;
	top: 56.5%;
	left: 83%;
	transform: rotate(-6deg);
}

/* Keskenyebb desktopon a stoptábla kilógna a képernyőből (vízszintes görgetés),
   ezért ott beljebb csúszik a fotóra. */
@media (max-width: 1200px) {
	.am-hero__stop {
		left: 74%;
	}
}

/* Az alsó vonal teljes szélességben, de a hasáb szélein belül */
.am-hero__rule {
	max-width: 80%;
	margin-left: auto;
	margin-right: auto;
}

/* -------------------------------------------------------------------------
   Mobil (a Figma mobil design szerint)

   A hero nem egyszerű egymás-alá rendezés, hanem átlapoló kompozíció:
   a piros tábla bal felül, az idős hölgy fotója JOBBRA, a tábla MÖGÖTT,
   a bevezető szöveg a fotó mellett, keskeny hasábban. A böngésző-, csaló- és
   stoptábla-matricák a mobil designon nem szerepelnek.
   ------------------------------------------------------------------------- */

@media (max-width: 781px) {
	.am-hero {
		/* Figma mobil frame: 402px. Az itt szereplő vw-értékek ebből számoltak
		   (px / 402 * 100), a min(...) pedig azért kell, hogy a 402-nél
		   szélesebb telefon/tablet felé ne nőjön aránytalanul nagyra. */
		padding-top: min(12.44vw, 3.75rem) !important;
	}

	.wp-block-columns.am-hero__cols {
		position: relative;
		display: block;
	}

	.am-hero__cols .wp-block-column.am-hero__copy,
	.am-hero__cols .wp-block-column.am-hero__visual {
		flex-basis: auto !important;
	}

	/* Rétegsorrend a Figma rajzolási sorrendje szerint:
	   sárga X < piros tábla < fotó < szöveg/gombok.
	   Ezért a hasáb itt NEM nyithat saját rétegkontextust. */
	.am-hero__cols .wp-block-column.am-hero__copy {
		position: relative;
		z-index: auto;
		width: 100%;
	}

	/* Felütés: Inter SemiBold 18.045/24.812 (Figma 28:625). */
	.am-hero__kicker {
		max-width: none;
		font-size: min(4.49vw, 1.25rem) !important;
		font-weight: 600 !important;
		line-height: 1.375;
	}

	/* Piros tábla: a tartalomsáv 80.3%-a (275.05 / 342.34). */
	.am-hero__board {
		display: block;
		width: 80.3%;
		margin-top: min(2.49vw, 0.75rem);
	}

	/* Jomhuria 130.496 / 58.452 (= 0.448 sortáv). A tábla belső margói a
	   betűmérethez kötve (em), hogy együtt skálázódjanak. */
	.am-hero__title {
		display: block;
		width: 100%;
		box-sizing: border-box;
		font-size: min(32.46vw, 9.5rem);
		line-height: 0.448;
		border-width: 1px;
		border-radius: 16px;
		box-shadow: none;
		padding: 0.3253em 0.2151em 0.0922em 0.1383em !important;
		/* Az "ÁLLJON" nem törhet ketté (a markupban <br> választja el). */
		overflow-wrap: normal;
		word-break: keep-all;
	}

	/* Sárga X a tábla mögött, balra kifutva (Figma 29:1159). */
	.am-hero__cross {
		z-index: 0;
		width: 76.3%;
		top: 31.5%;
		left: -21.2%;
		transform: none;
	}

	/* A jelszó-ablak, a csaló és a figyelmeztető ablak mobilon is látszik:
	   a tábla felső élére, illetve tőle jobbra - a képernyőn belül maradva. */
	.am-hero__window-password {
		display: block;
		width: 40%;
		top: -10%;
		left: 53%;
	}

	.am-hero__thief {
		display: block;
		width: 19%;
		top: 3%;
		left: 104%;
	}

	.am-hero__window-warning {
		display: block;
		width: 28%;
		top: 95%;
		left: 100%;
	}

	/* Ez a kettő a fotó körül van, mobilon nem fér el. */
	.am-hero__exclamation,
	.am-hero__stop {
		display: none;
	}

	/* A matricák a fotó FÖLÉ kerülnek. */
	.am-hero__board .am-sticker:not(.am-hero__cross) {
		z-index: 3;
	}

	/* Bevezető: Inter Regular 16.04/24.06, a tartalomsáv 47.9%-a (Figma 28:631).
	   (!important: a blokk inline margin-top-ját kell felülírni.) */
	.am-hero__lead {
		position: relative;
		z-index: 4;
		width: 47.9%;
		max-width: none;
		margin-top: min(2.58vw, 0.8rem) !important;
		font-size: 1rem !important;
		line-height: 1.5;
	}

	/* A fotó a tábla ELŐTT, jobbra a képernyő széléig (Figma 28:629). */
	.am-hero__cols .wp-block-column.am-hero__visual {
		position: absolute;
		top: min(26vw, 7.6rem);
		right: -8.7%;
		width: 64.4%;
		z-index: 2;
		pointer-events: none;
	}

	/* Mobilon a fotó a saját (abszolút) hasábját tölti ki, nem lóg ki balra. */
	.am-hero__figure {
		display: block;
		position: relative;
		padding-top: 0;
		width: 100%;
		margin-left: 0;
	}

	.am-hero__photo-crop {
		aspect-ratio: 220.39 / 285.88;
	}

	.am-hero__photo {
		top: -1.75%;
	}

	/* Gombok: teljes szélesség, 16.04/24.06 belső margó, kemény vetett árnyék.
	   A fotó alja épp a zöld gomb tetejénél ér véget (Figma 28:632). */
	.am-hero__actions {
		position: relative;
		z-index: 5;
		margin-top: min(10.47vw, 3.15rem) !important;
		margin-bottom: var(--wp--preset--spacing--40) !important;
	}

	.am-hero__actions .wp-block-button {
		width: 100%;
	}

	.am-hero__actions .wp-block-button__link {
		width: 100%;
		text-align: center;
		font-size: 1rem;
		line-height: 1.5;
		/* A leghosszabb felirat (Figma: 296px, egy sorban) csak így fér ki. */
		padding: 1rem;
	}

	/* A mobil designon nincs elválasztó vonal a hero alján. */
	.am-hero__rule {
		display: none;
	}
}

/* 20-step-banner.css */
/**
 * Lépés-szalag (patterns/step-banner.php)
 *
 * A pill a krém szekció aljára kerül, majd transform-mal a saját magasságának
 * felével lejjebb csúszik, így a közepe pontosan a krém/fekete színváltásnál
 * van. A transform nem változtatja a folyást, ezért a következő szekció
 * (what-to-do) nagyobb felső paddingja adja a helyet az átlógó félnek.
 */

.am-step-banner {
	position: relative;
	z-index: 3;
}

.am-step-banner__pill {
	position: relative;
	width: fit-content;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	/* Fekete háttéren a fekete keret/árnyék láthatatlan lenne: krémre váltunk. */
	border-color: var(--wp--preset--color--base);
	box-shadow: 1px 8px 0 0 var(--wp--preset--color--base);
	transform: translateY(50%);
}

.am-step-banner__chain {
	margin: 0;
	/* Figma 48:253: Jomhuria 48.179. */
	font-size: 3.011rem;
	line-height: 1;
	white-space: nowrap;
}

.am-step-banner__chain .am-chain__sep {
	font-size: 1em;
	line-height: 1;
}

/* -------------------------------------------------------------------------
   Mobil: a design szerint a szalag NEM a hero és a fekete szekció határán
   van, hanem a fekete szekció ALJÁN, a négy lépés-kártya után. A szekciók
   a főoldal tartalmában (.am-front) testvérek, ezért order-rel cseréljük a sorrendet:
   a szalag a "Ezt tegye" szekció után, de minden további szekció előtt.
   ------------------------------------------------------------------------- */

@media (max-width: 781px) {
	/* Mobilon a lánc kisebb (Figma: Jomhuria 30.1). */
	.am-step-banner__chain {
		font-size: 1.881rem;
	}

	.am-front {
		display: flex;
		flex-direction: column;
	}

	/* FIGYELEM: flex-konténerben a WordPress alignfull negatív margója nem
	   NÖVELI az elem szélességét (a cross-size a stretch-ből jön), ezért a
	   teljes szélességű szekciók 2x root-padding-gal rövidebbek lennének.
	   A WordPress saját root-padding változóival kompenzálunk, így a
	   theme.json styles.spacing.padding módosításakor sem csúszik el. */
	.am-front > .alignfull {
		width: calc(
			100% + var(--wp--style--root--padding-left) +
				var(--wp--style--root--padding-right)
		);
	}

	.am-front > .alignwide,
	.am-front > *:not(.alignfull):not(.alignwide) {
		width: 100%;
	}

	.am-step-banner {
		order: 1;
	}

	.am-dd,
	.am-scam-types,
	.am-already,
	.am-community,
	.am-videos,
	.am-downloads {
		order: 2;
	}

	/* Mobilon a szalag a fekete szekció folytatása: fekete háttér, nincs
	   átlógás, és a pill a designnak megfelelően vékonyabb kerettel. */
	.am-step-banner {
		background: var(--wp--preset--color--contrast) !important;
		padding-top: 0 !important;
		padding-bottom: var(--wp--preset--spacing--50) !important;
	}

	.am-step-banner__pill {
		transform: none;
		padding-left: 1.25rem !important;
		padding-right: 1.25rem !important;
		box-shadow: 2px 6px 0 0 var(--wp--preset--color--base);
	}

	/* A design szerint a lánc egy sorban fér ki. A Jomhuria jóval keskenyebb,
	   mint a korábbi Inter, ezért a design 30.1px-e is elfér. */
	.am-step-banner__chain {
		gap: 0.35rem 0.6rem;
		flex-wrap: nowrap;
	}
}

/* 30-what-to-do.css */
/**
 * Gyanús a helyzet? Ezt tegye (patterns/what-to-do.php)
 *
 * A felső padding szándékosan nagy (spacing-70): a lépés-szalag pillje
 * félig ebbe a szekcióba lóg át.
 */

/* Figma 48:167: Inter Black 36 / 40 (mobilon 24.06 / 32.08). */
.am-wtd__heading {
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.111;
}

/* Kártya: kemény keret + árnyék, de fekete háttéren SÁRGA színnel */
.am-wtd__card {
	max-width: 34.375rem;
	margin-left: auto;
	margin-right: auto;
	border-color: var(--wp--preset--color--yellow);
	box-shadow: 1px 8px 0 0 var(--wp--preset--color--yellow);
	background: var(--wp--preset--color--contrast);
}

.am-wtd__steps {
	list-style: none;
	margin: 0;
	padding: 0;
}

.am-wtd__step {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto auto auto;
	column-gap: 1.25rem;
	margin: 0;
	padding: 1.25rem 2.25rem;
	color: var(--wp--preset--color--base);
}

/* Sorok közti vékony, halvány elválasztó (a sárga 1. sor alatt nem kell) */
.am-wtd__step + .am-wtd__step {
	border-top: 1px solid rgba(245, 235, 219, 0.3);
}

.am-wtd__step--first + .am-wtd__step {
	border-top: 0;
}

/* Az 1. sor: sárga háttér, fekete szöveg, stop-tábla ikon jobbra */
.am-wtd__step--first {
	background: var(--wp--preset--color--yellow);
	color: var(--wp--preset--color--contrast);
}

.am-wtd__num {
	grid-column: 1;
	/* Figma 48:171: Consolas 21 / 16.04. */
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1.3125rem;
	line-height: 0.764;
	opacity: 0.85;
}

.am-wtd__title {
	grid-column: 1;
	/* A Jomhuria tintája ~10px-kel a 0.5-ös sorbox FÖLÉ nyúlik, ezért a
	   sorszám alá extra hely kell, különben a szám a címre csúszik. */
	margin: 1.6rem 0 0.75rem;
	/* Figma 48:175: Jomhuria 56.14 / 28.07. */
	font-family: var(--wp--preset--font-family--display);
	font-size: 3.509rem;
	font-weight: 400;
	line-height: 0.5;
	letter-spacing: 0;
	color: inherit;
}

.am-wtd__desc {
	grid-column: 1;
	margin: 0;
	/* Figma 48:181: Inter Regular 16.04 / 22.807. */
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	line-height: 1.422;
	opacity: 0.85;
}

.am-wtd__step--first .am-wtd__desc {
	opacity: 1;
	color: var(--wp--preset--color--contrast);
}

.am-wtd__icon {
	grid-column: 2;
	grid-row: 1 / 4;
	align-self: center;
	width: clamp(4.5rem, 8vw, 6.25rem);
	transform: rotate(-6deg);
	pointer-events: none;
	user-select: none;
}

.am-wtd__icon img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 781px) {
	/* Figma 28:645: a sorszám mobilon 17.042 / 16.04 (desktopon 21 / 16.04). */
	.am-wtd__num {
		font-size: 1.065rem;
		line-height: 0.941;
	}

	/* Figma 28:646: a cím szövegdoboza 26px-re van a sorszám alatt. */
	.am-wtd__title {
		margin-top: 1.9rem;
	}

	/* Mobilon a szalag már nem lóg át ide, nem kell a nagy felső hely. */
	.am-wtd {
		padding-top: var(--wp--preset--spacing--50) !important;
		padding-bottom: var(--wp--preset--spacing--50) !important;
	}

	/* Mobilon a cím egy sorban, BALRA zárva (design). */
	/* A WordPress .has-text-align-center szabálya később töltődik be, ezért
	   az elem-szelektorral növelt specificitás kell a balra zárásához. */
	h2.am-wtd__heading.has-text-align-center,
	.am-wtd__heading {
		font-size: 1.504rem !important;
		text-align: left;
	}

	.am-wtd__heading br {
		display: none;
	}

	.am-wtd__heading mark::after {
		content: " ";
	}

	.am-wtd__card {
		max-width: none;
		box-shadow: 2px 6px 0 0 var(--wp--preset--color--yellow);
	}

	.am-wtd__step {
		padding: 1.25rem 1rem 1rem;
		column-gap: 0.75rem;
	}

	.am-wtd__icon {
		width: 4.5rem;
	}

	/* A design mobilon egy kis sárga nyíllal vezeti a szemet a következő lépésre */
	.am-wtd__step:not(:last-child)::after {
		content: "\2193";
		grid-column: 1 / -1;
		display: block;
		margin-top: 0.75rem;
		text-align: center;
		font-family: var(--wp--preset--font-family--heading);
		font-size: 1.125rem;
		font-weight: 700;
		line-height: 1;
		color: var(--wp--preset--color--yellow);
	}

	/* Sárga kártyán a sárga nyíl láthatatlan lenne. A :not(:last-child)
	   szelektor specificitása 0,2,0 - ezért itt is kell egy :not(). */
	.am-wtd__step--first:not(:last-child)::after {
		color: var(--wp--preset--color--contrast);
	}
}

/* 40-do-dont.css */
/**
 * Mit NE tegyen? / Mit tegyen? (patterns/do-dont.php)
 *
 * Két, teljes szélességű, egyenlő oszlop. A belső tartalom mindkét oldalon a
 * középvonalhoz igazodik (bal: jobbra tolt, jobb: balra tolt), így a két
 * kártya együtt a 1000px-es tartalomsávba esik. Mobilon egymás alá kerülnek.
 */

.am-dd {
	gap: 0;
}

.am-dd__col {
	min-width: 0;
}

/* Belső tartalom szélessége és a középvonaltól mért távolsága */
.am-dd__inner {
	max-width: 22rem;
}

.am-dd__col--dont .am-dd__inner {
	margin-left: auto;
	margin-right: clamp(0rem, 6vw, 6.5rem);
}

.am-dd__col--do .am-dd__inner {
	margin-right: auto;
	margin-left: clamp(0rem, 6vw, 6.5rem);
}

/* Figma 48:261 / 48:293: Inter Black 36 / 40. */
.am-dd__heading {
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.111;
	letter-spacing: 0;
}

/* A "NE" szó: fehér, vastag fehér aláhúzással a piros háttéren */
.am-dd__col--dont .am-dd__heading mark {
	padding: 0 0.05em;
	border-bottom: 3px solid currentColor;
	line-height: 1;
}

/* Zöld pill - "AZ ALAPRUTIN:" alatt, középre */
.am-dd__routine {
	width: fit-content;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.am-dd__chain {
	margin: 0;
	gap: 0.5rem 1rem;
	/* Figma 48:325: Jomhuria 30.1. */
	font-size: 1.881rem;
	line-height: 1;
	white-space: nowrap;
	flex-wrap: nowrap;
}

/* A lánc szeparátorai fehérek (a design szerint). */
.am-dd__chain .am-chain__sep {
	color: var(--wp--preset--color--white);
	font-size: 1em;
	line-height: 1;
}

/* -------------------------------------------------------------------------
   Mobil: a design szerint a "Mit NE tegyen?" NEM piros hátterű - mindkét
   blokk a krém alapon, egymás alatt fut. A piros/krém osztott felület csak
   desktopon van.
   ------------------------------------------------------------------------- */

@media (max-width: 781px) {
	/* Figma 28:757: mobilon az "alaprutin" pill majdnem teljes szélességű,
	   a lánc szövege nagy. */
	.am-dd__routine {
		width: 100%;
		max-width: none;
	}

	.am-dd__chain {
		justify-content: center;
		font-size: 1.5rem;
		gap: 0.4rem 0.7rem;
	}

	.am-dd {
		background: var(--wp--preset--color--base);
	}

	.am-dd__col--dont.has-red-background-color {
		background-color: transparent !important;
	}

	/* A piros háttéren fehér volt a cím és a "NE" kiemelés - krémen fekete. */
	.am-dd__col--dont .am-dd__heading {
		color: var(--wp--preset--color--contrast);
	}

	.am-dd__col--dont .am-dd__heading mark {
		color: var(--wp--preset--color--red) !important;
		background: transparent !important;
	}

	.am-dd__col--dont .am-dd__heading::after,
	.am-dd__col--do .am-dd__heading::after {
		background: var(--wp--preset--color--contrast);
	}

	.am-dd__col--dont .am-label {
		color: var(--wp--preset--color--contrast-2);
	}

	.am-dd__inner {
		max-width: none;
	}

	.am-dd__col--dont .am-dd__inner,
	.am-dd__col--do .am-dd__inner {
		margin-left: 0;
		margin-right: 0;
	}

	/* A gutter-t a szekció root paddingja adja, a hasáb ne duplázza. */
	.am-dd__col {
		padding-left: var(--wp--style--root--padding-left) !important;
		padding-right: var(--wp--style--root--padding-right) !important;
	}

	.am-dd__col--do.has-base-2-background-color {
		background-color: transparent !important;
	}

	.am-dd__chain {
		gap: 0.4rem 0.7rem;
		font-size: 1.5rem;
	}
}

/* 50-scam-types.css */
/**
 * "Ismerje fel a csalás jeleit" szekció (patterns/scam-types.php)
 *
 * Az accordion alapstílusa (.am-accordion, __index, __lead, __body) a
 * base.css-ben él - itt csak a szekció-specifikus finomítások vannak.
 */

/* Figma: minden szekció-cím Inter Black 36 / 40 (mobilon 24.06 / 32.08). */
.am-scam-types__title {
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.111;
	letter-spacing: 0;
}

/* A summary címe a sorszám és a leírás között: kissé nagyobb, mint az alap */
.am-scam-types .am-accordion .wp-block-details > summary {
	font-size: 1.125rem;
	line-height: 1.3;
}

/* A "Mit tegyen?" blokk előtt pontozott elválasztó, mint a designban */
.am-scam-types .am-scam-types__do-label {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px dotted rgba(19, 19, 19, 0.45);
}

.am-scam-types .am-accordion__body .am-scam-types__do {
	margin-bottom: 0;
}

/* Az alsó vonal: szélesebb a tartalomnál, de nem éri el a szélét (mint a hero alatt) */
.am-scam-types__rule {
	max-width: 90%;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 781px) {
	.am-scam-types {
		padding-top: var(--wp--preset--spacing--50) !important;
	}

	/* Figma 28:781/783/791: mobilon a tétel-cím 16.04/23, a bevezető 14/20.5,
	   a törzsszöveg 16.04/23 - kisebb, mint a desktop 18px. */
	.am-scam-types .am-accordion .wp-block-details > summary {
		padding-right: 3rem;
		font-size: 1rem;
		line-height: 1.434;
	}

	.am-scam-types .am-accordion__lead {
		font-size: 0.875rem;
		line-height: 1.464;
	}

	.am-scam-types .am-accordion__body p {
		font-size: 1rem;
		line-height: 1.434;
	}

	/* Mobilon nincs záróvonal a szekció alján (a piros szekció adja a határt). */
	.am-scam-types__rule {
		display: none;
	}
}

/* A harmonika-címkék ("MI TÖRTÉNIK?", "MIÉRT GYANÚS?", "MIT TEGYEN?"):
   mono Bold 12.03 / 16.04, 1.2px betűköz, rgba(0,0,0,0.5) - a szekció-eyebrow
   18px-es méreténél jóval kisebbek. */
.am-scam-types .am-label {
	font-size: 0.752rem;
	font-weight: 700;
	line-height: 1.333;
	letter-spacing: 1.2px;
	color: rgba(0, 0, 0, 0.5);
}

/* 60-already-happened.css */
/**
 * "Már megtörtént?" szekció (patterns/already-happened.php)
 *
 * A számozott lista (.am-steps-list--green) a base.css-ből jön; itt a piros
 * háttéren szükséges kontraszt-igazítások és a fejléc/ikon elrendezés van.
 */

/* Figma: minden szekció-cím Inter Black 36 / 40 (mobilon 24.06 / 32.08). */
.am-already__title {
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.111;
	letter-spacing: 0;
}

/* Fejléc: bal oldalon a címek, jobb oldalon a csaló-ikon */
.am-already__head {
	align-items: flex-start;
}

.am-already__thief {
	flex: 0 0 auto;
	width: 5.625rem;
	margin-top: 0.25rem;
}

.am-already__thief img {
	display: block;
	width: 100%;
	height: auto;
}

/* A lista szövege fekete marad a fehér kártyákon - a szekció fehér színe ne öröklődjön */
.am-already__list {
	color: var(--wp--preset--color--contrast);
}

/* A designon ez a gomb ÁTLÁTSZÓ: fehér keret, fehér felirat, krém árnyék
   a piros háttéren. */
.am-already__btn-white .wp-block-button__link {
	background-color: transparent !important;
	border-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--white) !important;
	box-shadow: 2px 6px 0 0 var(--wp--preset--color--base);
}

.am-already__btn-white .wp-block-button__link:hover,
.am-already__btn-white .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--white) !important;
	color: var(--wp--preset--color--red) !important;
}

.am-already__btn-white .wp-block-button__link:hover,
.am-already__btn-white .wp-block-button__link:focus {
	box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
}

/* Fókuszgyűrű a piros háttéren fehér, hogy látható maradjon */
.am-already :where(a, button):focus-visible {
	outline-color: var(--wp--preset--color--white);
}

@media (max-width: 781px) {
	.am-already {
		padding-top: var(--wp--preset--spacing--50) !important;
		padding-bottom: var(--wp--preset--spacing--50) !important;
	}

	/* Figma 28:920: a csaló mobilon 48.3 x 55.7. */
	.am-already__thief {
		width: 3.02rem;
	}

	/* Figma 28:886: a sorszám-oszlop mobilon 56px. */
	.am-already__list > li {
		grid-template-columns: 3.5rem 1fr;
	}

	.am-already__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.am-already__actions .wp-block-button,
	.am-already__actions .wp-block-button__link {
		width: 100%;
		text-align: center;
	}
}

/* 70-community-help.css */
/**
 * Segítsünk egymásnak felismerni a csalást (patterns/community-help.php)
 */

/* A kártyák felett elég hely a kilógó matricáknak */
.am-community__cards {
	margin-top: 5.75rem;
}

/* A kártya oszlopként töltse ki a magasságot, hogy a gomb az aljára kerüljön. */
.am-community__card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* "IDŐSEKNEK" / "CSALÁDOKNAK" felirat, alatta rövid, vastag fekete vonal.
   Figma 48:445: Consolas 18.045 / 16.04 / 1.203px betűköz / rgba(0,0,0,0.5).
   A vonal 32.073 x 4.005, 2.005px lekerekítéssel, 12.03px-re a felirat alatt. */
.am-community__eyebrow {
	/* Figma 48:445: itt Regular (a többi címke félkövér). */
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1.128rem;
	font-weight: 400;
	line-height: 0.889;
	letter-spacing: 1.203px;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.5);
	margin-bottom: 0.5rem;
}

.am-community__eyebrow::after {
	content: "";
	display: block;
	width: 2.005rem;
	height: 4px;
	margin-top: 0.752rem;
	border-radius: 2px;
	background: var(--wp--preset--color--contrast);
}

/* Kötőjeles lista a pontok helyett.
   Figma 48:449-463: Inter Regular 16.04 / 24.06, a gondolatjel Consolas,
   8.02px-re a szövegtől, a tételek közt 12.03px. */
.am-community__list {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
}

.am-community__list > li {
	position: relative;
	padding-left: 1.564rem;
	margin-bottom: 0.752rem;
	font-size: 1rem;
	line-height: 1.5;
}

.am-community__list > li:last-child {
	margin-bottom: 0;
}

.am-community__list > li::before {
	content: "\2013";
	position: absolute;
	left: 0;
	top: 0;
	font-family: var(--wp--preset--font-family--mono);
	color: var(--wp--preset--color--contrast);
}

/* A gomb a kártya aljához tapad, teljes szélességben */
.am-community__actions {
	margin-top: auto !important;
}

.am-community__actions .wp-block-button {
	width: 100%;
}

.am-community__actions .wp-block-button__link {
	width: 100%;
	text-align: center;
	/* Figma 48:748: Inter Bold 16.04 / 24.06, 16.04/24.06 belső margó. */
	font-size: 1rem;
	line-height: 1.5;
	padding: 1rem 1.5rem;
	margin-top: 0.752rem;
}

/* Matricák a kártya jobb felső sarkából kilógva (Figma 48:468 / 48:504).
   A méret a designban abszolút (108.6 x 96, ill. 73 x 90) - a mi kártyáink
   szélesebbek, ezért felső korláttal tartjuk a rajz arányait: nagyobbra
   húzva a körvonal arányosan elvékonyodna, és a kéz ujjai összeolvadnának.
   A kilógás az elem SAJÁT magasságához kötve (translateY), így mindig
   ugyanannyit (~1/3-át) takar a kártya tetejéből. */
.am-community__sticker--triangle {
	width: min(29.3%, 7rem);
	aspect-ratio: 108.6 / 96;
	top: 0;
	right: 4.9%;
	transform: translateY(-67%);
}

.am-community__sticker--hand {
	width: min(19.7%, 4.75rem);
	aspect-ratio: 84 / 101;
	top: 0;
	right: 9.4%;
	transform: translateY(-71%);
}

/* Az alsó vonal a hasáb szélein belül, szélesebben mint a tartalom */
.am-community__rule {
	max-width: 80%;
	margin-left: auto;
	margin-right: auto;
}

/* Alap (desktop): a kártyán az "alt" matrica nem látszik. */
.am-community__sticker--alt {
	display: none;
}

/* -------------------------------------------------------------------------
   Mobil: a design szerint az IDŐSEKNEK kártyán a sárga KÉZ, a CSALÁDOKNAK
   kártyán a FIGYELMEZTETŐ HÁROMSZÖG van (desktopon fordítva). A cím alatti
   vonal mobilon nincs.
   ------------------------------------------------------------------------- */

@media (max-width: 781px) {
	.am-community__col:first-child .am-community__sticker--triangle:not(.am-community__sticker--alt),
	.am-community__col:last-child .am-community__sticker--hand:not(.am-community__sticker--alt) {
		display: none;
	}

	.am-community__sticker--alt {
		display: block;
	}

	/* A cím alatt mobilon nincs vonal (desktopon marad). */
	.am-community .am-underline--full::after {
		display: none;
	}

	.am-community__cards {
		margin-top: 2rem;
		/* Figma 28:932/28:961: a két kártya közt 94px hely - ebben ül a
		   figyelmeztető háromszög. */
		gap: 5.875rem;
	}

	/* Figma 28:934: a kártya belső margója mobilon 25px. */
	.am-community__card {
		padding: 1.55rem !important;
	}

	/* Figma 28:958: a háromszög mobilon 96.6 x 85.4, a MÁSODIK kártya tetején. */
	.am-community__sticker--triangle {
		width: 26.1%;
		top: 0;
		right: 3.6%;
		transform: translateY(-72.2%);
	}

	/* Figma 28:995: a kéz mobilon 66.2 x 88.4, az ELSŐ kártya tetején. */
	.am-community__sticker--hand {
		width: 17.9%;
		top: 0;
		right: 7.7%;
		transform: translateY(-65.6%);
	}

	/* A designon a záróvonal a szekció ALJÁN fut, széltől szélig - ezért a
	   külön <hr> helyett a szekció alsó kerete adja. */
	.am-community__rule {
		display: none;
	}

	.am-community {
		border-bottom: 1px solid var(--wp--preset--color--contrast);
	}
}

/* A zöld gomb felirata a designban krém, nem fekete (Figma 48:749). */
.am-community__col:first-child .am-community__actions .wp-block-button__link {
	color: var(--wp--preset--color--base);
}

/* 80-videos.css */
/**
 * Deák Zsu elmagyarázza - videók (patterns/videos.php)
 */

/* A jobbra kilógó matrica ne okozzon vízszintes görgetést */
.am-videos {
	overflow-x: clip;
}

/* Figma 28:1002: Inter SemiBold 16.04 / 19. */
.am-videos__lead {
	font-size: 1rem !important;
	max-width: 44rem;
	margin-left: auto;
	margin-right: auto;
}

/* Nagy poszter - a design-ban fekvő formátumra vágva */
.am-videos__feature {
	position: relative;
	/* alul hely a kilógó ÁLLÍTSD MEG! matricának */
	margin-bottom: clamp(7rem, 12vw, 10rem);
}

.am-videos__poster img {
	aspect-ratio: 1.9;
	object-fit: cover;
	object-position: center 35%;
}

/* ÁLLÍTSD MEG! matrica: piros nyolcszög, mögötte sárga X */
/* A matrica helye a poszterhez képest, a design arányai szerint:
   a nyolcszög a poszter jobb alsó sarkán ül, félig kilógva. */
/* Matrica a Figma 48:580 szerint: a teljes jelvény 236.755 x 236.755, ezen
   belül a nyolcszög tölti ki a keretet, a sárga X pedig jobbra-fölé lóg
   (bal 63.17%, felül -12.82%, szélesség 58.96%, magasság 40.96%). */
.am-videos__badge {
	/* A poszter méretéhez kötve: 236.755 / 854 = 27.7%, pozíció 88.6% / 78.8%. */
	width: 27.7%;
	max-width: 14.8rem;
	/* A jelvény kerete négyzet (236.755 x 236.755) - a sárga X százalékos
	   helye ehhez van kötve; a nyolcszög ezen belül 88%. */
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	left: 88.6%;
	top: 78.8%;
	right: auto;
	bottom: auto;
}

/* A Figmában (48:589) az X a nyolcszög UTÁN jön, tehát FÖLÖTTE van:
   az egyik szára rálóg a piros táblára. */
.am-videos__badge .am-videos__badge-cross {
	position: absolute;
	z-index: 2;
	top: -12.82%;
	left: 63.17%;
	right: auto;
	width: 58.96%;
	height: 40.96%;
	object-fit: contain;
	transform: none;
}

.am-videos__badge-sign {
	position: relative;
	z-index: 1;
	display: block;
	/* A Figmában a nyolcszög a 236.755-ös jelvény-kereten belül ~208 széles
	   (5.9% behúzás minden oldalon) - a maradék hely kell a sárga X-nek. */
	width: 88%;
	/* A designon a nyolcszögnek nincs kemény vetett árnyéka, csak a saját
	   fehér gyűrűje. */
	transform: none;
	filter: none;
}

.am-videos__badge-text {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--wp--preset--color--white);
	/* Figma 48:587-588: Jomhuria 83.84 / 41.8 (= 0.5 sortáv).
	   A Jomhuria tintája 0.082em-mel a sorbox közepe FÖLÖTT ül, ezért enélkül
	   a felirat alatt maradna üres hely a táblában. */
	font-size: 5.24rem;
	line-height: 0.5;
	letter-spacing: 0;
	transform: translateY(0.082em);
}

/* További videók */
/* Figma 48:578: Inter Black 36 / 40. */
.am-videos__more-title {
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 900;
	line-height: 1.111;
	letter-spacing: 0;
}

.am-videos__grid > * {
	margin-block-start: 0 !important;
}

.am-videos__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.5rem;
}

.am-videos__item .am-video img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.am-videos__caption {
	margin: 1rem 0 0;
	font-weight: 700;
	line-height: 1.3;
}

@media (max-width: 781px) {
	.am-videos__feature {
		margin-bottom: var(--wp--preset--spacing--40);
	}

	.am-videos__poster img {
		aspect-ratio: 16 / 9;
	}

	/* Mobilon a matrica a poszter alá, középre kerül */
	/* Figma 28:1009: mobilon a matrica a poszter ALATT, középen, ugyanakkora
	   (236.8), csak a sárga X négyzetes (97.2 x 97.2) a fekvő helyett. */
	/* A .am-stickers > .am-sticker margó-nullázás specifikusabb, ezért itt is
	   gyerek-szelektorral írjuk felül - különben nem kerül középre. */
	.am-stickers > .am-videos__badge {
		position: relative;
		left: auto;
		top: auto;
		right: auto;
		bottom: auto;
		width: 14.8rem;
		max-width: 100%;
		margin: 3.25rem auto 0;
	}

	.am-videos__badge .am-videos__badge-cross {
		width: 41%;
		height: 41%;
	}

	/* Figma 28:1015: a "További videók" cím mobilon középre igazítva. */
	.am-videos__more-title {
		text-align: center;
	}

	/* A design mobilon EGY hasábot használ, a bélyegképek kicsit behúzva,
	   közöttük nagy levegővel. */
	.am-videos__grid {
		grid-template-columns: 1fr;
		gap: 3.25rem;
		width: 88%;
		margin-left: auto;
		margin-right: auto;
	}

	.am-videos__item .am-video img {
		aspect-ratio: 3 / 2;
	}

	.am-videos__caption {
		padding-left: 0.75rem;
	}
}

/* -------------------------------------------------------------------------
   Videó-lightbox (assets/js/video-modal.js)
   A YouTube iframe csak kattintásra jön létre - az oldal betöltésekor semmi
   nem megy a YouTube felé.
   ------------------------------------------------------------------------- */

.am-video-modal {
	width: min(60rem, 92vw);
	max-width: none;
	padding: 0;
	border: var(--am-border);
	border-radius: 12px;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--white);
	box-shadow: var(--am-shadow);
}

.am-video-modal::backdrop {
	background: rgba(19, 19, 19, 0.75);
}

.am-video-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem 0.75rem 0.75rem 1.25rem;
}

.am-video-modal__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5;
}

.am-video-modal__close {
	flex: 0 0 auto;
	width: 2.25rem;
	height: 2.25rem;
	display: grid;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.am-video-modal__close:hover,
.am-video-modal__close:focus-visible {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--contrast);
}

.am-video-modal__frame {
	aspect-ratio: 16 / 9;
	background: #000;
}

.am-video-modal__frame iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.am-video-modal__note {
	margin: 0;
	display: grid;
	place-items: center;
	height: 100%;
	padding: 2rem;
	text-align: center;
	color: rgba(255, 255, 255, 0.75);
}

/* 90-downloads.css */
/**
 * Add tovább az információt - letöltések (patterns/downloads.php)
 */

/* Figma 48:507: zöld háttéren rgba(0,0,0,0.5). */
.am-label--on-green {
	color: rgba(0, 0, 0, 0.5);
}

.am-downloads__lead {
	max-width: var(--wp--style--global--content-size);
}

/* A sorok között ne legyen blockGap, a vonalak adják a ritmust */
.am-downloads__list > .am-download-row {
	margin-top: 0;
	margin-bottom: 0;
	/* A base.css szerinti sor-belső gap felülírja a core flex-layout gap-jét */
	gap: 1rem 1.5rem;
}

.am-downloads__list > .am-download-row:first-child {
	padding-top: 0;
}

/* A cím a sor bal oldalán, a gomb a jobb szélen. A designban a cím-oszlop
   keskeny (187-217px), ezért a hosszabb címek KÉT SORBA törnek - nem futnak
   végig a soron (Figma 48:519 / 48:524 / 48:529). */
.am-download-row__title {
	flex: 0 1 auto;
	max-width: 14rem;
	/* Figma 48:519: Inter SemiBold 17.042 / 24.06. */
	font-size: 1.065rem;
	font-weight: 600;
	line-height: 1.412;
}

.am-download-row .wp-block-buttons {
	flex: 0 0 auto;
}

.am-download-row .wp-block-button__link {
	min-width: 7rem;
	text-align: center;
	/* Figma 48:520: Inter Bold 16.04 / 24.06, 8.02 / 21.05 belső margó. */
	font-size: 1rem;
	line-height: 1.5;
	padding: 0.5rem 1.3rem;
}

@media (max-width: 781px) {
	/* A design mobilon vonalak nélkül, csak térközzel választja el a sorokat. */
	.am-download-row {
		border-bottom: 0;
		padding: 0;
	}

	.am-downloads__list {
		display: flex;
		flex-direction: column;
		gap: 2.25rem;
	}

	/* Mobilon a cím a gomb melletti teljes helyet megkapja - a designban
	   a "60+ tájékoztató plakát" egy sorban van (Figma 28:1060). */
	.am-download-row__title {
		/* 1 1 0: a cím a maradék helyet kapja és SZÖVEGBEN törik, nem tolja
		   új sorba a gombot. */
		flex: 1 1 0;
		min-width: 0;
		max-width: none;
	}

	.am-download-row .wp-block-button__link {
		min-width: 0;
	}
}

/* 95-form.css */
/**
 * Contact Form 7 űrlap - "Saját történeted" oldal
 * A kampány kemény-árnyékos, vastag keretes vizuális nyelvén.
 */

.am-form .wpcf7-form {
	display: grid;
	gap: 1.25rem;
}

.am-form .wpcf7-form > p {
	margin: 0;
}

.am-form label {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.3;
}

.am-form .wpcf7-form-control-wrap {
	display: block;
	margin-top: 0.4rem;
}

.am-form input:not([type="submit"]):not([type="checkbox"]),
.am-form select,
.am-form textarea {
	/* box-sizing nélkül a 100% + belső margó + keret 8px-szel túllógna a
	   képernyőn mobilon. */
	box-sizing: border-box;
	width: 100%;
	padding: 0.85rem 1rem;
	font: inherit;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--white);
	border: var(--am-border);
	border-radius: 0;
	box-shadow: var(--am-shadow-sm);
	appearance: none;
}

.am-form textarea {
	min-height: 11rem;
	resize: vertical;
}

.am-form input:focus-visible,
.am-form select:focus-visible,
.am-form textarea:focus-visible {
	outline: 3px solid var(--wp--preset--color--yellow);
	outline-offset: 0;
}

.am-form ::placeholder {
	color: var(--wp--preset--color--contrast-3);
}

/* Beleegyező checkbox */
.am-form .am-form__consent label {
	display: grid;
	grid-template-columns: 1.5rem 1fr;
	gap: 0.75rem;
	align-items: start;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.am-form .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.am-form .wpcf7-acceptance input[type="checkbox"] {
	width: 1.5rem;
	height: 1.5rem;
	margin: 0;
	accent-color: var(--wp--preset--color--green);
	border: var(--am-border);
}

.am-form .wpcf7-acceptance a {
	color: inherit;
	text-decoration: underline;
}

/* Honeypot mező: képernyőn kívül, de a botok "látják" */
.am-form .am-form__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* A rejtett mező a billentyűzet-sorrendből is essen ki: aria-hidden mellett
   Tabbal sem szabad fókuszálhatónak lennie (axe: aria-hidden-focus). */
.am-form .am-form__hp input,
.am-form .am-form__hp textarea,
.am-form .am-form__hp select {
	pointer-events: none;
}

/* Küldés gomb = kampány gomb */
.am-form input[type="submit"] {
	width: auto;
	cursor: pointer;
	padding: 0.9rem 1.75rem;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--green);
	border: var(--am-border);
	box-shadow: var(--am-shadow-sm);
	transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.am-form input[type="submit"]:hover,
.am-form input[type="submit"]:focus-visible {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--white);
	box-shadow: none;
}

.am-form .wpcf7-spinner {
	margin-left: 0.75rem;
}

/* Hibaüzenetek, visszajelzés */
.am-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.35rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--red);
}

.am-form .wpcf7-form .wpcf7-response-output {
	margin: 0;
	padding: 1rem 1.25rem;
	border: var(--am-border);
	box-shadow: var(--am-shadow-sm);
	background: var(--wp--preset--color--yellow);
	font-weight: 600;
}

.am-form .wpcf7-form.sent .wpcf7-response-output {
	background: var(--wp--preset--color--green);
}

.am-form .wpcf7-form.invalid .wpcf7-response-output,
.am-form .wpcf7-form.failed .wpcf7-response-output,
.am-form .wpcf7-form.spam .wpcf7-response-output {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--red);
}

@media (prefers-reduced-motion: reduce) {
	.am-form input[type="submit"] {
		transition: none;
	}
}

/* 96-consent.css */
/**
 * Complianz sütibanner a kampány arculatára igazítva
 * (kemény fekete keret + árnyék, zöld elfogadás, sárga fókusz).
 *
 * A Complianz saját beállításaiból csak a SZÖVEGEK jönnek (adatbázis);
 * a megjelenítést szándékosan itt, a témában tartjuk, hogy verziózott és
 * deployolható legyen.
 */

#cmplz-cookiebanner-container .cmplz-cookiebanner {
	border: 2px solid var(--wp--preset--color--contrast, #131313);
	border-radius: 0;
	box-shadow: 1px 8px 0 0 var(--wp--preset--color--contrast, #131313);
	background: var(--wp--preset--color--base, #F5EBDB);
	color: var(--wp--preset--color--contrast, #131313);
	font-family: var(--wp--preset--font-family--body, "Inter", sans-serif);
	padding: 1.5rem;
	max-width: 30rem;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title {
	font-family: var(--wp--preset--font-family--heading, "Inter", sans-serif);
	font-weight: 800;
	font-size: 1.25rem;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--contrast, #131313);
	margin-bottom: 0.5rem;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-body,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--wp--preset--color--contrast, #131313);
}

/* Gombok: a téma gomb-stílusa (szögletes, kemény árnyék) */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn {
	border: 2px solid var(--wp--preset--color--contrast, #131313);
	border-radius: 0;
	box-shadow: 2px 6px 0 0 var(--wp--preset--color--contrast, #131313);
	font-family: var(--wp--preset--font-family--body, "Inter", sans-serif);
	font-weight: 700;
	font-size: 0.9375rem;
	padding: 0.7rem 1.25rem;
	transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

/* Complianz sizes these from its own banner width, which is wider than the theme's max-width. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories {
	width: 100%;
	box-sizing: border-box;
}

/* The client-approved labels are long; let the buttons wrap instead of overflowing. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons {
	flex-wrap: wrap;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
	flex: 1 1 auto;
	width: auto;
	white-space: nowrap;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-accept {
	background: var(--wp--preset--color--green, #8DC63F);
	color: var(--wp--preset--color--contrast, #131313);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-deny,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences {
	background: var(--wp--preset--color--white, #fff);
	color: var(--wp--preset--color--contrast, #131313);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn:hover,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn:focus-visible {
	background: var(--wp--preset--color--contrast, #131313);
	color: var(--wp--preset--color--white, #fff);
	box-shadow: none;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner :focus-visible {
	outline: 3px solid var(--wp--preset--color--yellow, #FFE25F);
	outline-offset: 2px;
}

/* Dokumentum-linkek a banner alján */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links a,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-documents a {
	color: var(--wp--preset--color--contrast, #131313);
	text-decoration: underline;
	text-underline-offset: 3px;
	font-size: 0.8125rem;
}

/* Kategória-kapcsolók a "Beállítások" nézetben */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category {
	border: 1px solid var(--wp--preset--color--contrast, #131313);
	border-radius: 0;
	background: var(--wp--preset--color--white, #fff);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category .cmplz-category-header .cmplz-category-title {
	font-family: var(--wp--preset--font-family--heading, "Inter", sans-serif);
	font-weight: 700;
	color: var(--wp--preset--color--contrast, #131313);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-slider-checkbox input:checked + .cmplz-slider {
	background-color: var(--wp--preset--color--green, #8DC63F);
}

/* "Sütibeállítások" visszahívó gomb */
.cmplz-manage-consent {
	font-family: var(--wp--preset--font-family--body, "Inter", sans-serif);
	font-size: 0.8125rem;
	font-weight: 600;
	border: 2px solid var(--wp--preset--color--contrast, #131313) !important;
	border-radius: 0 !important;
	background: var(--wp--preset--color--yellow, #FFE25F) !important;
	color: var(--wp--preset--color--contrast, #131313) !important;
}

@media (prefers-reduced-motion: reduce) {
	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn {
		transition: none;
	}
}

@media (max-width: 600px) {
	#cmplz-cookiebanner-container .cmplz-cookiebanner {
		max-width: none;
		box-shadow: none;
		padding: 1.25rem;
	}
}

/* 99-lang-ro.css */
/* Romanian copy is longer than the Hungarian the design was drawn for. */

:lang(ro) .am-dd__chain {
	flex-wrap: wrap;
	justify-content: center;
	white-space: normal;
}

:lang(ro) .am-dd__routine {
	border-radius: 1.5rem;
}

@media (max-width: 781px) {
	:lang(ro) .am-hero__title {
		font-size: min(23vw, 6.8rem);
	}

	:lang(ro) .am-step-banner__chain {
		font-size: 1.35rem;
		gap: 0.35rem 0.45rem;
	}
}