/*
Theme Name: FOCUS4U (Elementor)
Theme URI: https://focus4you.hu
Description: A FOCUS4U oldal Elementor-alapú változata. A gyerektéma szándékosan sovány: csak a márka betűit, az ikonkészletet és az önértékelő kvíz kódját hozza. Minden elrendezés és stílus az Elementorban van, hogy szerkeszthető maradjon.
Author: Kreatívoldal
Author URI: https://kreativoldal.hu
Template: hello-elementor
Version: 1.0.0
Text Domain: focus4u-elementor
*/

/* ==========================================================================
   Márkaszabályok.

   Csak az kerül ide, ami az EGÉSZ oldalra érvényes tipográfiai márkajegy, és
   amit Elementor-vezérlővel nem lehet kifejezni. Elrendezés, térköz, szín NEM
   tartozik ide – azt az Elementorban kell állítani, különben az ügyfél hiába
   nyúl hozzá a szerkesztőben, a CSS felülírja.
   ========================================================================== */

/* ── A márkajegy: dőlt, narancs kiemelés a címsorokban ───────────────────
   A mockup minden főcímében van egy `<em>`, ami Fraunces 300 italic és
   narancs. Ez végigmegy az oldalon, ezért itt a helye, nem widgetenként.
   A színt a Kit globális változójából vesszük: ha az ügyfél átállítja a
   márkaszínt, ez is követi. */
.elementor-heading-title em,
.elementor-widget-text-editor h1 em,
.elementor-widget-text-editor h2 em,
.elementor-widget-text-editor h3 em {
	font-style: italic;
	font-weight: 300;
	color: var(--e-global-color-primary, #F5922E);
}

/* Sötét szekcióban a kiemelés világosabb narancs, különben beleolvad. */
.f4u-sotet .elementor-heading-title em {
	color: var(--e-global-color-f4uvilagos, #FBCFA0);
}

/* ── Sötét szekció: a benne lévő szöveg alapszíne fehér ──────────────────
   Az Elementor a konténer háttérszínét tudja, de a gyerekek szövegszínét
   nem örökíti. A `f4u-sotet` osztályt a sötét szekciók kapják meg. */
.f4u-sotet,
.f4u-sotet p,
.f4u-sotet li {
	color: rgba(255, 255, 255, .72);
}

.f4u-sotet .elementor-heading-title {
	color: #fff;
}

/* ── Ugrás a tartalomra ──────────────────────────────────────────────────
   A Hello saját kihagyó-linkjét a márka szerint öltöztetjük. */
.skip-link {
	background: var(--e-global-color-secondary, #3D3D3D);
	color: #fff;
	border-radius: 0 0 12px 0;
	padding: 12px 20px;
	font-size: 14px;
}

/* ── Fókuszjelölés billentyűzetes navigációhoz ──────────────────────────── */
:focus-visible {
	outline: 2px solid var(--e-global-color-primary, #F5922E);
	outline-offset: 2px;
}

/* ── Fejléc: elmosott, áttetsző háttér ───────────────────────────────────
   A `backdrop-filter`-re nincs Elementor-vezérlő, ezért marad CSS. A színt és
   a keretet viszont az Elementor adja, hogy állítható maradjon. */
.f4u-fejlec {
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

/* ── „Hamarosan” menüpontok ──────────────────────────────────────────────
   Három kurzushoz még nincs oldal. A megbízó kérése az volt, hogy jelzéssel
   maradjanak bent – nem kattintható, halvány elemként, hogy senki ne fusson
   bele egy sehová nem vezető linkbe. */
.f4u-hamarosan > a {
	pointer-events: none;
	color: #B5AFA4 !important;
	cursor: default;
}

.f4u-hamarosan > a::after {
	content: 'hamarosan';
	margin-inline-start: 10px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #C4BCB0;
}

/* ── Pirula-címke („eyebrow”) ────────────────────────────────────────────
   A doboz stílusát az Elementor adja; itt csak az elrendezés és a narancs
   pötty van, amire nincs vezérlő. */
.f4u-pirula .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.f4u-pont {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--e-global-color-primary, #F5922E);
	flex-shrink: 0;
}

/* ── Jogi folyószöveg (adatkezelési tájékoztató) ─────────────────────────
   Egyetlen szövegdobozban áll a teljes tájékoztató, ezért a benne lévő
   címsorok és listák tagolását itt kell megadni – widgetenként nem lehetne. */
.f4u-jogi h2 {
	font-family: 'Fraunces', Georgia, serif;
	font-size: 26px;
	font-weight: 400;
	line-height: 1.25;
	margin: 44px 0 14px;
	color: var(--e-global-color-secondary, #3D3D3D);
}

.f4u-jogi h3 {
	font-family: 'Fraunces', Georgia, serif;
	font-size: 20px;
	font-weight: 400;
	margin: 30px 0 10px;
	color: var(--e-global-color-secondary, #3D3D3D);
}

.f4u-jogi h2:first-child {
	margin-top: 0;
}

.f4u-jogi p,
.f4u-jogi ul,
.f4u-jogi ol {
	margin-bottom: 16px;
}

.f4u-jogi ul,
.f4u-jogi ol {
	padding-inline-start: 22px;
}

.f4u-jogi li {
	margin-bottom: 8px;
}

.f4u-jogi table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 20px;
	font-size: 14px;
}

.f4u-jogi th,
.f4u-jogi td {
	border: 1px solid var(--e-global-color-f4ukeret, #E8E2D9);
	padding: 10px 12px;
	text-align: start;
	vertical-align: top;
}

.f4u-jogi th {
	background: var(--e-global-color-f4uszekcio, #F4F1EC);
	font-weight: 700;
}

/* ── Mobil biztonsági háló ───────────────────────────────────────────────
   Egy képpontban megadott elem-szélesség (pl. „a bevezető legyen 620 px”)
   telefonon vízszintes túlcsordulást okoz: az Elementor NEM szűkíti magától.
   Az elemek külön-külön is kapnak mobil felülírást, ez a szabály a háló arra
   az esetre, ha egy új elem kimaradna. */
@media (max-width: 640px) {
	.elementor-widget {
		max-width: 100% !important;
	}
}

/* ── Tabler ikonok igazítása a szöveghez ────────────────────────────────── */
.elementor-button .ti,
.elementor-heading-title .ti {
	line-height: 1;
	vertical-align: middle;
}

/* ── Horgony-ugrás a tapadó fejléc alá ───────────────────────────────────
   A fejléc `sticky: top`, tehát egy `#horgony` gomb a szekció tetejére
   görget, és a fejléc eltakarja a címét. A `scroll-margin-top` a fejléc
   magasságával megemeli a leállási pontot. Csak azokra az Elementor-
   elemekre vonatkozik, amiknek adtunk CSS ID-t – más `id` (menü, űrlap)
   nem érintett. */
html {
	scroll-behavior: smooth;
}

.elementor-element[id] {
	scroll-margin-top: 96px;
}

@media (max-width: 640px) {
	.elementor-element[id] {
		scroll-margin-top: 76px;
	}
}

/* ── A lábléc DSP-mondata linkként ───────────────────────────────────────
   A mondat a Demján Sándor Program aloldalára visz (a WebOrigo mintája is
   így csinálja). A lábléc halvány szövegszínét megtartja, hogy ne törje meg
   a blokk képét. */
.f4u-dsp-mondat a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.f4u-dsp-mondat a:hover {
	color: #FFFFFF;
}