/* ==========================================================================
   Hellófotó — a bemutatkozó oldalak (Kezdőlap, Hogyan működik, Óvodáknak, Iskoláknak,
   Árak) a landing mintájára: váltogatott hátterű szakaszok, matrica-címek, kártyák.

   BLOKKOKBÓL épül (Árpád döntése, 2026-10-01): a szöveg az adminban szerkeszthető.
   - Szakasz = Csoport blokk teljes szélességben, a „Stílusok" panelen: Krém / Sárga /
     Magenta / Fekete / Lila szakasz (`is-style-hf-*`, a functions.php regisztrálja).
     Egymás után ne ismétlődjön ugyanaz a háttér.
   - Matrica = kijelölt szöveg a szerkesztő eszköztárán „Matrica: …" (`stk--*` span,
     brand/editor.js). A címben minden matrica külön sorba kerül.
   - Kártyák = Oszlopok blokk `hf-cards` osztállyal; lépések = `hf-cards hf-cards--num`.
   A mozgást a brand/pages.js adja (csak ha fut, és csak mozgás-engedéllyel).
   Ez a fájl a szerkesztőben is betöltődik (add_editor_style), hogy ott is így látszódjon.
   ========================================================================== */

:root {
	--hf-maxw: 1180px;
	--hf-pad: clamp(18px, 4vw, 40px);
	--hf-ease: cubic-bezier(.2, .8, .2, 1);
}

/* --- Matrica a toolbarról: a `stk--*` osztály magában is matrica (a landing `.stk` mellett) --- */
.stk--y, .stk--yp, .stk--m, .stk--p, .stk--py, .stk--k, .stk--c, .stk--cp {
	display: inline-block;
	font-family: var(--hf-head);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1;
	letter-spacing: 0.01em;
	padding: 0.16em 0.42em 0.1em;
	background: var(--stk-bg, var(--hf-yellow));
	color: var(--stk-ink, var(--hf-ink));
	transform: rotate(var(--tilt, -2deg));
	box-shadow: 0 0.1em 0 rgba(0, 0, 0, 0.08);
	text-decoration: none;
}

/* ==========================================================================
   Szakaszok
   ========================================================================== */

.hf-band {
	position: relative;
	padding: clamp(64px, 11vh, 128px) var(--hf-pad);
	overflow: hidden; /* a beúszó elemek ne adjanak vízszintes görgetősávot */
}

.hf-band.alignfull {
	margin-top: 0;
	margin-bottom: 0;
	max-width: none;
	width: 100%;
}

.hf-band > * {
	max-width: var(--hf-maxw);
	margin-left: auto;
	margin-right: auto;
}

/* Klasszikus témánál a csoport tartalma egy belső tárolóban van (wp-block-group__inner-container). */
.hf-band > .wp-block-group__inner-container > * + *,
.hf-band > * + * { margin-top: clamp(18px, 2.4vw, 28px); }

.hf-band > .wp-block-group__inner-container > :first-child { margin-top: 0; }
.hf-band > .wp-block-group__inner-container > :last-child { margin-bottom: 0; }

.hf-band--hero { padding-top: clamp(40px, 7vh, 88px); }

.is-style-hf-cream  { background: var(--hf-cream);  color: var(--hf-ink); }
.is-style-hf-yellow { background: var(--hf-yellow); color: var(--hf-ink); }
.is-style-hf-pink   { background: var(--hf-accent); color: var(--hf-cream); }
.is-style-hf-black  { background: var(--hf-black);  color: var(--hf-cream); }
.is-style-hf-purple { background: var(--hf-purple); color: var(--hf-cream); }

/* Sötét/színes háttéren minden szöveg és link a háttérhez igazodik. */
:is(.is-style-hf-pink, .is-style-hf-black, .is-style-hf-purple) :is(h1, h2, h3, h4, p, li, a:not(.wp-block-button__link)) {
	color: inherit;
}

:is(.is-style-hf-pink, .is-style-hf-black, .is-style-hf-purple) a:not(.wp-block-button__link) {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* Sárgán a link fekete, aláhúzva (magenta a sárgán gyenge kontraszt). */
.is-style-hf-yellow a:not(.wp-block-button__link) {
	color: var(--hf-ink);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* ==========================================================================
   Címek: nagy Barlow, a matricák egymás alatt (a landing .ttl .ln mintája)
   ========================================================================== */

.hf-band :is(h1, h2) {
	font-size: clamp(40px, 6.2vw, 92px);
	line-height: 1.02;
	margin-bottom: 0.4em;
}

.hf-band h3 { font-size: clamp(22px, 2.3vw, 30px); }

.hf-band--hero h1 { font-size: clamp(44px, 7vw, 108px); }

.hf-band :is(h1, h2) :is(.stk, .stk--y, .stk--yp, .stk--m, .stk--p, .stk--py, .stk--k, .stk--c, .stk--cp) {
	display: block;
	width: fit-content;
	margin: 0.08em 0;
	padding: 0.14em 0.4em 0.08em;
}

.hf-band :is(h1, h2).has-text-align-center :is(.stk, .stk--y, .stk--yp, .stk--m, .stk--p, .stk--py, .stk--k, .stk--c, .stk--cp) {
	margin-left: auto;
	margin-right: auto;
}

/* A szerkesztő (pre-wrap) a matricák közti szóközből külön sort csinálna — ott ne. */
.hf-band :is(h1, h2).block-editor-rich-text__editable { white-space: normal !important; }

/* Minden második matrica a másik irányba dől — szabálytalan, mint a brosúrán. */
.hf-band :is(h1, h2) :is(span):nth-of-type(2n) { --tilt: 1.5deg; }

/* Bevezető mondat: nagyobb, mint a törzsszöveg. */
.hf-band .hf-lead,
.hf-band .has-large-font-size {
	font-size: clamp(19px, 1.9vw, 26px);
	line-height: 1.45;
	max-width: 38em;
}

.hf-band .has-text-align-center.hf-lead { margin-left: auto; margin-right: auto; }

.hf-band p { max-width: 46em; }
.hf-band .has-text-align-center { margin-left: auto; margin-right: auto; }

/* ==========================================================================
   Kártyák (Oszlopok blokk `hf-cards` osztállyal) — a landing .card / .feat mintája.
   A kártya címe (h3) kis matrica; a kártyák színe váltakozik.
   ========================================================================== */

.hf-cards.wp-block-columns { gap: clamp(16px, 2.2vw, 28px); align-items: stretch !important; }

.hf-cards > .wp-block-column {
	background: var(--hf-cream);
	color: var(--hf-ink);
	border-radius: 18px;
	padding: clamp(22px, 2.4vw, 32px);
	box-shadow: 0 22px 44px -30px rgba(17, 17, 17, 0.45);
}

.hf-cards > .wp-block-column :is(p, li, a:not(.wp-block-button__link)) { color: var(--hf-ink); }
.hf-cards > .wp-block-column p:last-child { margin-bottom: 0; }

/* Krém szakaszon a kártya fehér, hogy elváljon. */
.is-style-hf-cream .hf-cards > .wp-block-column { background: var(--hf-card); }

.hf-cards > .wp-block-column h3 {
	display: inline-block;
	margin: 0 0 14px;
	padding: 0.16em 0.42em 0.1em;
	font-size: clamp(20px, 2vw, 27px);
	line-height: 1;
	text-transform: uppercase;
	background: var(--hf-yellow);
	color: var(--hf-ink);
	transform: rotate(-2deg);
	box-shadow: 0 0.1em 0 rgba(0, 0, 0, 0.08);
}

.hf-cards > .wp-block-column:nth-child(3n+2) h3 { background: var(--hf-purple); color: var(--hf-cream); transform: rotate(1.5deg); }
.hf-cards > .wp-block-column:nth-child(3n)   h3 { background: var(--hf-accent); color: var(--hf-cream); }

/* Sárga szakaszon a sárga matrica nem látszana: ott fekete. */
.is-style-hf-yellow .hf-cards > .wp-block-column:nth-child(3n+1) h3 { background: var(--hf-black); color: var(--hf-cream); }

/* Számozott lépések: nagy, kontúros szám a kártya tetején. */
.hf-cards--num { counter-reset: hf-num; }

.hf-cards--num > .wp-block-column::before {
	counter-increment: hf-num;
	content: counter(hf-num);
	display: block;
	font-family: var(--hf-head);
	font-weight: 700;
	font-size: clamp(64px, 7vw, 104px);
	line-height: 0.9;
	margin-bottom: 10px;
	color: var(--hf-accent);
}

/* ==========================================================================
   Gombok a szakaszokban
   ========================================================================== */

.hf-band .wp-block-buttons { gap: 12px; }

.hf-band .wp-block-button__link {
	padding: 16px 26px 14px;
	font-size: 19px;
	border-radius: 999px;
}

/* Krémen a márka gombja: magenta pirula krém betűvel. */
.is-style-hf-cream .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--hf-accent);
	color: var(--hf-cream);
	box-shadow: 0 10px 26px -12px rgba(230, 0, 121, 0.7);
}

/* Sárgán fekete pirula (a magenta a sárgán is megy, de a fekete erősebb). */
.is-style-hf-yellow .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--hf-black);
	color: var(--hf-cream);
}

/* Magentán / lilán / feketén: sárga pirula fekete betűvel; a körvonalas krém keretes. */
:is(.is-style-hf-pink, .is-style-hf-purple, .is-style-hf-black) .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--hf-yellow);
	color: var(--hf-ink);
	box-shadow: none;
}

:is(.is-style-hf-pink, .is-style-hf-purple, .is-style-hf-black, .is-style-hf-yellow) .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: inherit;
	border: 0;
	box-shadow: inset 0 0 0 2px currentColor;
}

.hf-band .wp-block-button__link:hover { filter: brightness(0.94); }

/* ==========================================================================
   Képek: keretes, enyhén elforgatott „fotó" (a landing .frame mintája)
   ========================================================================== */

.hf-band .wp-block-image.is-style-hf-frame img {
	border: clamp(8px, 1vw, 14px) solid var(--hf-cream);
	border-radius: 6px;
	transform: rotate(var(--tilt, 2deg));
	box-shadow: 0 30px 60px -30px rgba(17, 17, 17, 0.55);
}

.is-style-hf-cream .wp-block-image.is-style-hf-frame img { border-color: var(--hf-yellow); }

/* ==========================================================================
   Kezdőlap: nyitókép két oszlopban (cím + bevezető + „Galéria kódom" gomb | majom)
   ========================================================================== */

.hf-hero.wp-block-columns { align-items: center !important; gap: clamp(24px, 4vw, 64px); }

.hf-hero .hf-code-box { margin: 0 0 0 auto; max-width: 520px; width: 100%; }

/* A doboz saját címe kicsi marad (a szakasz nagy címe nem rá vonatkozik). */
.hf-band .hf-code-box h2 { font-size: 1.5rem; line-height: 1.1; margin: 0 0 8px; }

@media (max-width: 600px) {
	.hf-band .hf-code-box h2 { font-size: 1.4rem; }
}

.hf-majom img {
	width: clamp(160px, 18vw, 260px);
	height: auto;
	filter: drop-shadow(0 24px 30px rgba(17, 17, 17, 0.18));
	animation: hf-float 6s ease-in-out infinite;
}

/* Nyitókép jobb oszlopában a majom nagyobb, az oszlop közepén. */
.hf-hero .hf-majom { text-align: center; }
.hf-hero .hf-majom img { width: clamp(200px, 26vw, 380px); }

@keyframes hf-float {
	0%, 100% { translate: 0 0; }
	50%      { translate: 0 -10px; }
}

/* Mobilon a kódbeviteli doboznak az első képernyőn a helye: a majom ott nem fér. */
@media (max-width: 781px) {
	.hf-hide-mobile { display: none !important; }
	.hf-band--hero { padding-top: 28px; padding-bottom: 56px; }
	.hf-band--hero h1 { font-size: clamp(38px, 11vw, 56px); margin-bottom: 0.25em; }
	.hf-hero .hf-code-box { margin: 0 auto; }
	.hf-hero.wp-block-columns { gap: 12px; }
	.hf-hero .hf-majom { margin-top: 28px; }
	.hf-hero .hf-majom img { width: 180px; }
}

/* „Elveszett a kód?" doboz (#84) szakaszon belül: kártya marad, középen. */
.hf-band .hf-lost-code { margin-top: 0; }

/* A .hf-band h3 mérete nem rá való: a kiút címe kisebb a kódbeviteli doboz címénél. */
.hf-band .hf-lost-code h3 { font-size: 1.25rem; }

/* ==========================================================================
   Gyakori kérdések (Részletek blokk `hf-faq` csoportban): nyitható sorok
   ========================================================================== */

.hf-faq .wp-block-details {
	background: var(--hf-card);
	color: var(--hf-ink);
	border-radius: 14px;
	padding: 0;
	margin: 0 0 12px;
	box-shadow: 0 14px 30px -26px rgba(17, 17, 17, 0.5);
}

.hf-faq .wp-block-details summary {
	cursor: pointer;
	list-style: none;
	padding: 18px 56px 16px 22px;
	position: relative;
	font-family: var(--hf-head);
	font-weight: 700;
	font-size: clamp(20px, 2vw, 25px);
	text-transform: uppercase;
	line-height: 1.1;
	min-height: 44px;
}

.hf-faq .wp-block-details summary::-webkit-details-marker { display: none; }

.hf-faq .wp-block-details summary::after {
	content: "+";
	position: absolute;
	right: 20px;
	top: 50%;
	translate: 0 -50%;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--hf-accent);
	color: var(--hf-cream);
	font-size: 22px;
	line-height: 1;
	transition: rotate 0.25s var(--hf-ease);
}

.hf-faq .wp-block-details[open] summary::after { rotate: 45deg; }

.hf-faq .wp-block-details > :not(summary) { padding: 0 22px; color: var(--hf-ink); }
.hf-faq .wp-block-details > :last-child { padding-bottom: 20px; margin-bottom: 0; }
.hf-faq .wp-block-details a { color: var(--hf-accent); }

/* ==========================================================================
   Árlista (`[hf_arlista]` — a Sunshine termékeiből, brand/pages.php)
   ========================================================================== */

.hf-prices { display: grid; gap: clamp(18px, 2.4vw, 28px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }

.hf-prices__cat {
	background: var(--hf-card);
	color: var(--hf-ink);
	border-radius: 18px;
	padding: clamp(22px, 2.4vw, 30px);
	box-shadow: 0 22px 44px -30px rgba(17, 17, 17, 0.45);
}

.hf-prices__cat h3 {
	display: inline-block;
	margin: 0 0 14px;
	padding: 0.16em 0.42em 0.1em;
	font-size: clamp(20px, 2vw, 27px);
	line-height: 1;
	text-transform: uppercase;
	background: var(--hf-yellow);
	color: var(--hf-ink);
	transform: rotate(-2deg);
}

.hf-prices__cat:nth-child(3n+2) h3 { background: var(--hf-purple); color: var(--hf-cream); transform: rotate(1.5deg); }
.hf-prices__cat:nth-child(3n)   h3 { background: var(--hf-accent); color: var(--hf-cream); }

.hf-prices__list { list-style: none; margin: 0; padding: 0; }

.hf-prices__list li {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 12px 0;
	border-bottom: 1px dashed var(--hf-line);
	color: var(--hf-ink);
}

.hf-prices__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.hf-prices__name { flex: 1 1 auto; }
.hf-prices__desc { display: block; color: var(--hf-muted); font-size: 0.9em; margin-top: 2px; }

.hf-prices__price {
	flex: 0 0 auto;
	font-family: var(--hf-head);
	font-weight: 700;
	font-size: 1.35em;
	white-space: nowrap;
	color: var(--hf-accent);
}

/* ==========================================================================
   Mozgás — csak ha a brand/pages.js fut (html.hf-motion), és nem kértek
   csökkentett mozgást. JS nélkül minden azonnal látszik.
   ========================================================================== */

html.hf-motion .hf-rv {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.9s var(--hf-ease), transform 1s var(--hf-ease);
	transition-delay: var(--d, 0s);
}

html.hf-motion .hf-rv.hf-in { opacity: 1; transform: none; }

html.hf-motion .hf-slap {
	opacity: 0;
	transform: scale(1.45) rotate(calc(var(--tilt, -2deg) * 3));
	transition: opacity 0.35s ease, transform 0.55s cubic-bezier(.34, 1.56, .64, 1);
	transition-delay: var(--d, 0s);
}

html.hf-motion .hf-slap.hf-in { opacity: 1; transform: rotate(var(--tilt, -2deg)); }

@media (prefers-reduced-motion: reduce) {
	.hf-majom img { animation: none; }
	html.hf-motion .hf-rv, html.hf-motion .hf-slap { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   „Hamarosan" menüpont (`hf-menu-soon`, a brand/pages.php veszi le a linkjét)
   ========================================================================== */

.hf-menu-soon > .wrap > a,
.hf-menu-soon > a {
	cursor: default;
	opacity: 0.45;
	pointer-events: none;
}

.hf-menu-soon {
	position: relative;
}

.hf-menu-soon::after {
	content: "Hamarosan";
	position: absolute;
	top: -12px;
	right: -18px;
	padding: 3px 6px 2px;
	font-family: var(--hf-head);
	font-weight: 700;
	font-size: 11px;
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: var(--hf-yellow);
	color: var(--hf-purple);
	transform: rotate(6deg);
	pointer-events: none;
	white-space: nowrap;
}

/* Mobil oldalmenüben a bélyeg a felirat mellé kerül. */
.header-menu-sidebar .hf-menu-soon {
	display: flex;
	align-items: center;
}

.header-menu-sidebar .hf-menu-soon > .wrap {
	width: auto;
}

.header-menu-sidebar .hf-menu-soon::after {
	position: static;
	margin-left: 10px;
}

/* ==========================================================================
   Kétoszlopos szakasz (`hf-split`): balra a matrica-cím, jobbra a szöveg
   ========================================================================== */

.hf-split.wp-block-columns { gap: clamp(20px, 5vw, 72px); }
.hf-band .hf-split h2 { font-size: clamp(36px, 4.6vw, 66px); margin-bottom: 0; }
.hf-split .wp-block-column > p:last-child { margin-bottom: 0; }

/* „Hamarosan" gomb (Gomb blokk `hf-btn-soon` osztállyal, link nélkül): halvány, nem kattintható, bélyeggel. */
.wp-block-button.hf-btn-soon {
	position: relative;
}

.wp-block-button.hf-btn-soon .wp-block-button__link {
	opacity: 0.5;
	cursor: default;
	pointer-events: none;
}

.wp-block-button.hf-btn-soon::after {
	content: "Hamarosan";
	position: absolute;
	top: -12px;
	right: -14px;
	padding: 3px 6px 2px;
	font-family: var(--hf-head);
	font-weight: 700;
	font-size: 11px;
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: var(--hf-yellow);
	color: var(--hf-purple);
	transform: rotate(6deg);
	pointer-events: none;
}

/* ==========================================================================
   Kezdőlap = kódbevitel (Árpád, 2026-10-01: letisztult, semmi más) — egy krém
   szakasz középen: cím, kódbeviteli doboz, „Elveszett a kód?" (#84).
   A cím szándékosan kicsi és matrica nélküli (Árpád, 2026-10-31: a sok ferde doboz
   már tolakodó) — a szülő ide kódot beírni jön, a figyelem a mezőé.
   ========================================================================== */

.hf-band--code {
	min-height: calc(100vh - 200px);
	padding-bottom: clamp(48px, 8vh, 96px);
}

.hf-band--code .hf-code-box {
	margin-left: auto;
	margin-right: auto;
}

.hf-band--code h1 { font-size: clamp(30px, 3.4vw, 40px); margin-bottom: 0.6em; }

.hf-band--code .hf-lost-code { margin-top: 28px; }

/* A Galéria kódom oldalnak (68) nincs címe, a doboz különben a fejlécre tapadna. */
.page-id-68 .hf-code-box { margin-top: clamp(32px, 6vh, 64px); }

@media (max-width: 781px) {
	.hf-band--code { padding-top: 24px; min-height: 0; }
	.hf-band--code h1 { font-size: clamp(26px, 7.4vw, 32px); margin-bottom: 0.6em; }
}

/* --- Árak oldal (kép-alapú árazás, 2026-10-29): nagy ár, árlista-sorok, példa-doboz. --- */
.hf-price-big { font-family: var(--hf-head); font-weight: 700; font-size: clamp(44px, 9vw, 84px) !important; line-height: 1 !important; margin: 4px 0 8px !important; white-space: nowrap; }
.hf-cards .hf-price-big { font-size: clamp(36px, 7vw, 56px) !important; color: var(--hf-accent); }
.hf-price-rows { list-style: none; padding: 0 !important; margin: 10px 0 14px !important; max-width: 560px; }
.hf-price-rows li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed currentColor; border-bottom-color: rgba(17,17,17,.25); margin: 0 !important; }
.is-style-hf-purple .hf-price-rows li, .is-style-hf-pink .hf-price-rows li, .is-style-hf-black .hf-price-rows li { border-bottom-color: rgba(255,247,232,.35); }
.hf-price-rows li strong { white-space: nowrap; }
.hf-price-example { background: rgba(255,255,255,.14); border-radius: var(--hf-radius); padding: 10px 14px; }
.is-style-hf-cream .hf-price-example, .is-style-hf-yellow .hf-price-example { background: rgba(0,0,0,.06); }

/* --- Kapcsolat (63): balra üzenő űrlap, jobbra „Elveszett a kód?" és a csevegő.
   Rács, nem az Oszlopok blokk flexe: az oszlopok a saját, szélesebb töréspontunkon (900 px) állnak
   egymás mellé, addig az űrlap és a kódablak egymás alatt, teljes szélességben. A címek egyenesek,
   matrica nélkül (Árpád, 2026-10-31). --- */
/* A Neve oldalcíme itt egyenes, doboz nélkül — mint a Kezdőlapon. */
.page-id-63 .nv-page-title h1 {
	padding: 0;
	background: none;
	transform: none;
	box-shadow: none;
	font-size: clamp(26px, 3.4vw, 40px);
}

.hf-contact-lead { max-width: 680px; font-size: 1.1rem; }

.wp-block-columns.hf-contact {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	align-items: start;
	margin: 28px 0 32px;
}

.wp-block-columns.hf-contact > .wp-block-column { margin: 0; min-width: 0; }

.hf-contact .hf-lost-code { max-width: none; margin: 0; }

.hf-contact-form,
.hf-contact-chat {
	border: 1px solid var(--hf-line);
	border-radius: 14px;
	padding: 22px 24px;
	background: var(--hf-card);
}

.hf-contact-chat { margin-top: 20px; }
.hf-contact-chat h3 { margin: 0 0 10px; font-size: 1.25rem; color: var(--hf-purple); line-height: 1.1; }
.hf-contact-chat p { margin: 0 0 12px; }
.hf-contact-chat .hf-hint { margin: 12px 0 0; font-size: 0.9rem; color: var(--hf-muted); }

.hf-contact-form h2 { margin: 0 0 14px; font-size: 1.25rem; color: var(--hf-purple); line-height: 1.1; }

.hf-contact-form__fields { display: flex; flex-direction: column; gap: 10px; margin: 0 0 14px; }

.hf-contact-form__fields label { font-weight: 600; font-size: 0.95rem; }

.hf-contact-form__fields input:not([type="hidden"]),
.hf-contact-form__fields textarea {
	width: 100%;
	/* 16px alatt az iPhone ráközelít a mezőre. */
	font-size: 1.05rem;
	padding: 14px;
	border: 2px solid var(--hf-line);
	border-radius: var(--hf-radius);
	background: var(--hf-card);
	box-sizing: border-box;
	min-height: 52px;
}

.hf-contact-form__fields textarea { min-height: 170px; resize: vertical; line-height: 1.45; }

.hf-contact-form__fields input:focus,
.hf-contact-form__fields textarea:focus {
	border-color: var(--hf-accent);
	outline: 3px solid var(--hf-focus);
	outline-offset: 0;
}

/* A kitöltött magenta gomb itt a főszereplő, a kódablaké keretes marad. */
.hf-contact-form__button,
.hf-contact-chat__button {
	width: 100%;
	min-height: 52px;
	padding: 14px 20px 12px;
	font-size: 1.1rem;
	border: 2px solid var(--hf-accent);
	border-radius: 999px;
	cursor: pointer;
}

.hf-contact-form__button { margin-top: 6px; background: var(--hf-accent); color: var(--hf-cream); }
.hf-contact-chat__button { background: var(--hf-card); color: var(--hf-accent); }

.hf-contact-chat__button:hover,
.hf-contact-chat__button:focus-visible { background: var(--hf-accent); color: var(--hf-cream); }

.hf-contact-form__note { margin: 0; font-size: 0.9rem; color: var(--hf-muted); }

/* Az üzemeltető adatai: kötelező, de nem ezért jön ide a szülő — halkan, az oldal alján. */
.hf-contact-owner { margin-bottom: clamp(48px, 8vh, 96px); font-size: 0.95rem; color: var(--hf-muted); }
.hf-contact-owner h2 { margin: 0 0 8px; font-size: 1.25rem; color: var(--hf-purple); line-height: 1.1; }
.hf-contact-owner p { margin: 0; }

@media (min-width: 900px) {
	.wp-block-columns.hf-contact { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px; }
}

/* --- Rövid nyitósáv (`hf-band--intro`, Hogyan működik — Árpád, 2026-10-31): a cím matricái egy sorban,
   alatta a bevezető, minden középen, hogy a következő szakasz már az első képernyőn kilátsszon. --- */
.hf-band.hf-band--intro {
	padding-top: clamp(28px, 5vh, 56px);
	padding-bottom: clamp(14px, 3vh, 28px);
}

.hf-band.hf-band--intro h1 {
	font-size: clamp(42px, 5.3vw, 76px); /* picivel nagyobb, mint a hf-split h2-je */
	margin-bottom: 0.3em;
	white-space: nowrap;
}

/* Mobilon a szélesség szab határt: a cím a legkeskenyebb telefonon is férjen ki egy sorban. */
@media (max-width: 781px) {
	.hf-band.hf-band--intro h1 { font-size: clamp(32px, 10.2vw, 44px); }
}

.hf-band.hf-band--intro h1 :is(.stk, .stk--y, .stk--yp, .stk--m, .stk--p, .stk--py, .stk--k, .stk--c, .stk--cp) {
	display: inline-block;
	margin: 0;
}

.hf-band.hf-band--intro .hf-lead { font-size: clamp(17px, 1.5vw, 21px); }

/* „Görgess lefelé" (bekezdés `hf-scroll-down` osztállyal, a link a következő szakasz horgonyára mutat). */
.hf-band .hf-scroll-down { margin-top: clamp(12px, 2.4vh, 22px); margin-bottom: 0; }

.hf-scroll-down a {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-height: 44px;
	padding: 6px 14px;
	font-family: var(--hf-head);
	font-weight: 700;
	font-size: 18px;
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--hf-purple);
}

.hf-scroll-down a::after {
	content: "";
	width: 13px;
	height: 13px;
	border-right: 3px solid var(--hf-accent);
	border-bottom: 3px solid var(--hf-accent);
	rotate: 45deg;
	animation: hf-bob 1.6s ease-in-out infinite;
}

.hf-scroll-down a:hover { color: var(--hf-accent); }

@keyframes hf-bob {
	0%, 100% { translate: 0 0; }
	50%      { translate: 0 8px; }
}

@media (prefers-reduced-motion: no-preference) {
	html:has(.hf-scroll-down) { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
	.hf-scroll-down a::after { animation: none; }
}