/* Területoldalak egységes, sablonosztály alapján vezérelt színezése. */

/* Grafika */
.grafika,
.sarga-grafika,
body:has(.grafika),
body:has(.sarga-grafika.single-teacher) {
	--lumen-area-color: #B4BD3B;
	--lumen-area-dark-color: #868D2B;
	--lumen-area-card-background: var(--Gradients-Yellow, linear-gradient(121deg, #A5C216 0%, #A8BF16 31%, #B4B917 62%, #C8AF1A 93%, #CEAD1B 100%));
	--lumen-area-faq-background: var(--Gradients-Yellow, linear-gradient(121deg, #A5C216 0%, #A8BF16 31%, #B4B917 62%, #C8AF1A 93%, #CEAD1B 100%));
	--lumen-area-button-arrow: url("../images/button-arrow-yellow-default.svg");
	--lumen-area-faq-background-image: url("../images/gyik-bg-grafika.png");
	--lumen-area-shadow-color: rgba(180, 189, 59, 0.38);
}

/* Látványtervezés */
.latvanytervezes,
.zold-latvanytervezes,
body:has(.latvanytervezes),
body:has(.zold-latvanytervezes.single-teacher) {
	--lumen-area-color: #4D9E5C;
	--lumen-area-dark-color: #3C7346;
	--lumen-area-card-background: #4D9E5C;
	--lumen-area-faq-background: var(--Gradients-Green, linear-gradient(121deg, #118E56 0%, #8EB037 100%));
	--lumen-area-button-arrow: url("../images/button-arrow-green-default.svg");
	--lumen-area-faq-background-image: url("../images/gyik-bg-latvanytervezes.png");
	--lumen-area-shadow-color: rgba(77, 158, 92, 0.38);
}

/* CAD */
.cad,
.kek-cad,
body:has(.cad),
body:has(.kek-cad.single-teacher) {
	--lumen-area-color: #3E68C7;
	--lumen-area-dark-color: #2E4F97;
	--lumen-area-card-background: #3E68C7;
	--lumen-area-faq-background: var(--Gradients-Blue, linear-gradient(121deg, #4E2798 0%, #167ABE 100%));
	--lumen-area-button-arrow: url("../images/button-arrow-blue-default.svg");
	--lumen-area-faq-background-image: url("../images/gyik-bg-cad.png");
	--lumen-area-shadow-color: rgba(62, 104, 199, 0.4);
}

/* Videó és film */
.video,
.piros-video-es-film,
body:has(.video),
body:has(.piros-video-es-film.single-teacher) {
	--lumen-area-color: #C24044;
	--lumen-area-dark-color: #923034;
	--lumen-area-card-background: #C24044;
	--lumen-area-faq-background: var(--Gradients-Red, linear-gradient(121deg, #A51467 0%, #CC3D16 100%));
	--lumen-area-button-arrow: url("../images/button-arrow-red-default.svg");
	--lumen-area-faq-background-image: url("../images/gyik-bg-video.png");
	--lumen-area-shadow-color: rgba(194, 64, 68, 0.38);
}

/* Online marketing */
.ppc,
.lila-online-marketing,
body:has(.ppc),
body:has(.lila-online-marketing.single-teacher) {
	--lumen-area-color: #6C2D96;
	--lumen-area-dark-color: #491F66;
	--lumen-area-card-background: #6C2D96;
	--lumen-area-faq-background: var(--Gradients-Purple, linear-gradient(121deg, #3F218D 0%, #842597 100%));
	--lumen-area-button-arrow: url("../images/button-arrow-purple-default.svg");
	--lumen-area-faq-background-image: url("../images/gyik-bg-ppc.png");
	--lumen-area-shadow-color: rgba(108, 45, 150, 0.38);
}

/* Webfejlesztés */
.web,
.narancssarga-webfejlesztes,
body:has(.web),
body:has(.narancssarga-webfejlesztes.single-teacher) {
	--lumen-area-color: #DB9832;
	--lumen-area-dark-color: #AB7627;
	--lumen-area-card-background: #DB9832;
	--lumen-area-faq-background: var(--Gradients-Orange, linear-gradient(121deg, #CB7117 0%, #CBA21A 100%));
	--lumen-area-button-arrow: url("../images/button-arrow-orange-default.svg");
	--lumen-area-faq-background-image: url("../images/gyik-bg-web.png");
	--lumen-area-shadow-color: rgba(219, 152, 50, 0.4);
}

/* Közvetlenül alkalmazható területspecifikus gradiens hátterek */
:is(
	.sarga-grafika,
	.zold-latvanytervezes,
	.kek-cad,
	.piros-video-es-film,
	.lila-online-marketing,
	.narancssarga-webfejlesztes
) {
	background: var(--lumen-area-faq-background) !important;
}

/*
 * Az oktatókártya külső burka ne kapja meg a segédosztály gradiensét.
 * A területi háttér csak a .trainer-photo és .trainer-back rétegen jelenik meg.
 */
.trainer-flip-card:is(
	.sarga-grafika,
	.zold-latvanytervezes,
	.kek-cad,
	.piros-video-es-film,
	.lila-online-marketing,
	.narancssarga-webfejlesztes
) {
	background: transparent !important;
}

/* Szövegek és számozások */
:is(body:has(.grafika), body:has(.latvanytervezes), body:has(.cad), body:has(.video), body:has(.ppc), body:has(.web), .grafika, .latvanytervezes, .cad, .video, .ppc, .web) .outline-card .post-title,
:is(body:has(.grafika), body:has(.latvanytervezes), body:has(.cad), body:has(.video), body:has(.ppc), body:has(.web), .grafika, .latvanytervezes, .cad, .video, .ppc, .web) .outline-card .elementor-heading-title,
:is(body:has(.grafika), body:has(.latvanytervezes), body:has(.cad), body:has(.video), body:has(.ppc), body:has(.web), .grafika, .latvanytervezes, .cad, .video, .ppc, .web) .outline-card .title h4,
:is(body:has(.grafika), body:has(.latvanytervezes), body:has(.cad), body:has(.video), body:has(.ppc), body:has(.web), .grafika, .latvanytervezes, .cad, .video, .ppc, .web) .outline-card .neked-szol-ha,
:is(body:has(.grafika), body:has(.latvanytervezes), body:has(.cad), body:has(.video), body:has(.ppc), body:has(.web), .grafika, .latvanytervezes, .cad, .video, .ppc, .web) .color-number p,
:is(body:has(.grafika), body:has(.latvanytervezes), body:has(.cad), body:has(.video), body:has(.ppc), body:has(.web), .grafika, .latvanytervezes, .cad, .video, .ppc, .web) .terulet-programok {
	color: var(--lumen-area-color);
}

/* Modul kártyák ikonjai */
:is(body:has(.grafika), body:has(.latvanytervezes), body:has(.cad), body:has(.video), body:has(.ppc), body:has(.web), .grafika, .latvanytervezes, .cad, .video, .ppc, .web) .outline-card svg {
	fill: var(--lumen-area-color);
}

/* A „Neked szól, ha…” elemek elválasztópontja */
:is(body:has(.grafika), body:has(.latvanytervezes), body:has(.cad), body:has(.video), body:has(.ppc), body:has(.web), .grafika, .latvanytervezes, .cad, .video, .ppc, .web) .kepzes-kinek-ajanlott {
	--kepzes-elvalaszto-pont-szin: var(--lumen-area-color);
}

.color-card-tanfolyam .kepzes-kinek-ajanlott__elem:not(:first-child)::before {
	background:#fff!important;
}


/* Területspecifikus Elementor gombok */
:is(body:has(.grafika), body:has(.latvanytervezes), body:has(.cad), body:has(.video), body:has(.ppc), body:has(.web), .grafika, .latvanytervezes, .cad, .video, .ppc, .web) .button-with-arrow .elementor-button {
	height: 60px;
	background-image: var(--lumen-area-button-arrow);
	background-position: right 10px center;
	background-repeat: no-repeat;
}

:is(body:has(.grafika), body:has(.latvanytervezes), body:has(.cad), body:has(.video), body:has(.ppc), body:has(.web), .grafika, .latvanytervezes, .cad, .video, .ppc, .web) .button-with-arrow:not(.button-outline-white):not(.primary) .elementor-button {
	color: var(--lumen-area-color) !important;
}

/* A main változat hoverben is megtartja a területszínű szöveget és ikont. */
:is(body:has(.grafika), body:has(.latvanytervezes), body:has(.cad), body:has(.video), body:has(.ppc), body:has(.web), .grafika, .latvanytervezes, .cad, .video, .ppc, .web) .button-with-arrow.main .elementor-button:hover,
:is(body:has(.grafika), body:has(.latvanytervezes), body:has(.cad), body:has(.video), body:has(.ppc), body:has(.web), .grafika, .latvanytervezes, .cad, .video, .ppc, .web) .button-with-arrow.main .elementor-button:focus-visible {
	background-color: #fff !important;
	background-image: var(--lumen-area-button-arrow) !important;
	color: var(--lumen-area-color) !important;
}

/* A sima gomb hoverben területszínű hátteret és fehér tartalmat kap. */
:is(body:has(.grafika), body:has(.latvanytervezes), body:has(.cad), body:has(.video), body:has(.ppc), body:has(.web), .grafika, .latvanytervezes, .cad, .video, .ppc, .web) .button-with-arrow:not(.main):not(.primary):not(.button-outline-white) .elementor-button:hover,
:is(body:has(.grafika), body:has(.latvanytervezes), body:has(.cad), body:has(.video), body:has(.ppc), body:has(.web), .grafika, .latvanytervezes, .cad, .video, .ppc, .web) .button-with-arrow:not(.main):not(.primary):not(.button-outline-white) .elementor-button:focus-visible {
	background-color: var(--lumen-area-color) !important;
	background-image: url("../images/button-arrow-cyan-hover.svg") !important;
	background-position: right 10px center;
	background-repeat: no-repeat;
	border-color: var(--lumen-area-color) !important;
	color: #fff !important;
}

/* A fehér körvonalas gomb hover szövege követi a terület színét. */
:is(body:has(.grafika), body:has(.latvanytervezes), body:has(.cad), body:has(.video), body:has(.ppc), body:has(.web), .grafika, .latvanytervezes, .cad, .video, .ppc, .web) .button-outline-white .elementor-button:hover,
:is(body:has(.grafika), body:has(.latvanytervezes), body:has(.cad), body:has(.video), body:has(.ppc), body:has(.web), .grafika, .latvanytervezes, .cad, .video, .ppc, .web) .button-outline-white .elementor-button:focus-visible {
	color: var(--lumen-area-color) !important;
}

/* Tanfolyam kártyák háttere */
:is(body:has(.grafika), body:has(.latvanytervezes), body:has(.cad), body:has(.video), body:has(.ppc), body:has(.web), .grafika, .latvanytervezes, .cad, .video, .ppc, .web) .color-card-tanfolyam .bg {
	background: var(--lumen-area-card-background);
}

/* Területspecifikus hero háttér */
:is(body:has(.grafika), body:has(.latvanytervezes), body:has(.cad), body:has(.video), body:has(.ppc), body:has(.web), .grafika, .latvanytervezes, .cad, .video, .ppc, .web) .hero-bg,
.hero-bg:is(.grafika, .cad, .ppc, .latvanytervezes, .web, .video) {
	background: var(--lumen-area-faq-background);
}

.home .hero-bg {
	background: var(--Gradients-Cian1, linear-gradient(121deg, #22A0AF 0%, #37B88E 100%));
}

/* Területspecifikus action háttér */
:is(body:has(.grafika), body:has(.latvanytervezes), body:has(.cad), body:has(.video), body:has(.ppc), body:has(.web), .grafika, .latvanytervezes, .cad, .video, .ppc, .web) .action-bg {
	background: var(--lumen-area-dark-color)!important;
}

/* Körvonalas kártyák */
:is(body:has(.grafika), body:has(.latvanytervezes), body:has(.cad), body:has(.video), body:has(.ppc), body:has(.web), .grafika, .latvanytervezes, .cad, .video, .ppc, .web) .outline-color-card {
	border-color: var(--lumen-area-color);
}

/* A képzés bemutatkozó kártyáinak kerete kövesse az aktuális terület színét. */
body.single-kepzes .couse-color-card .outline-card {
	border-color: var(--lumen-area-color, #37B0A6) !important;
}

/* A tanulási formák kártyái semleges keretet kapnak a területszín helyett. */
body.single-kepzes .mouse-glow-card {
	border-color: #00000033 !important;
}

:is(body:has(.grafika), body:has(.latvanytervezes), body:has(.cad), body:has(.video), body:has(.ppc), body:has(.web), .grafika, .latvanytervezes, .cad, .video, .ppc, .web) .outline-color-card .title h4{
	color: var(--lumen-area-color)!important;
}

/* Területspecifikus mouse glow kártyakeret */
:is(.grafika, .latvanytervezes, .cad, .video, .ppc, .web) .mouse-glow-card,
.mouse-glow-card:is(.grafika, .latvanytervezes, .cad, .video, .ppc, .web) {
	border-color: var(--lumen-area-color) !important;
}

/* Területspecifikus kapcsolatfelvételi űrlap háttere */
:is(body:has(.grafika), body:has(.latvanytervezes), body:has(.cad), body:has(.video), body:has(.ppc), body:has(.web), .grafika, .latvanytervezes, .cad, .video, .ppc, .web) .contact-form-box,
:is(body:has(.grafika), body:has(.latvanytervezes), body:has(.cad), body:has(.video), body:has(.ppc), body:has(.web), .grafika, .latvanytervezes, .cad, .video, .ppc, .web) .gradient-bg {
	background: var(--lumen-area-faq-background) !important;
}

/* Területspecifikus FAQ plusz/mínusz ikon */
:is(body:has(.grafika), body:has(.latvanytervezes), body:has(.cad), body:has(.video), body:has(.ppc), body:has(.web), .grafika, .latvanytervezes, .cad, .video, .ppc, .web) .lumen-faq__icon::before,
:is(body:has(.grafika), body:has(.latvanytervezes), body:has(.cad), body:has(.video), body:has(.ppc), body:has(.web), .grafika, .latvanytervezes, .cad, .video, .ppc, .web) .lumen-faq__icon::after {
	background-color: var(--lumen-area-color);
}

/* Területspecifikus FAQ-háttér tableten és mobilon */
@media (min-width:881px) {
	:is(body:has(.grafika), body:has(.latvanytervezes), body:has(.cad), body:has(.video), body:has(.ppc), body:has(.web), .grafika, .latvanytervezes, .cad, .video, .ppc, .web) .lumen-faq-section {
		/*
		 * A háttér mérete nem az accordion pillanatnyi magasságából számolódik,
		 * ezért nyitáskor nem ugrik. A kép alatti területet a háttérszín
		 * és a színréteg tölti ki, a fotó átméretezése nélkül.
		 */
		background-color: var(--lumen-area-dark-color) !important;
		background-image: var(--lumen-area-faq-background-image) !important;
		background-position: left top !important;
		background-repeat: no-repeat !important;
		background-size: auto 1500px !important;
	}
}

/*
 * A fotó fölötti területspecifikus színréteg minden asztali méretben aktív.
 * Nem a bejegyzéstípusból, hanem a sablon area-osztályából dolgozik, ezért
 * a régi és az új képzésoldalakon is ugyanúgy működik.
 */
@media (min-width: 881px) {
	:is(
		body.grafika,
		body.latvanytervezes,
		body.cad,
		body.video,
		body.ppc,
		body.web,
		body:has(.grafika),
		body:has(.latvanytervezes),
		body:has(.cad),
		body:has(.video),
		body:has(.ppc),
		body:has(.web),
		.grafika,
		.latvanytervezes,
		.cad,
		.video,
		.ppc,
		.web
	) .lumen-faq-section:not(.dark)::before {
		position: absolute;
		z-index: 0;
		inset: 0;
		background: linear-gradient(
			90deg,
			transparent 16%,
			var(--lumen-area-color, #278079) 64%,
			var(--lumen-area-dark-color, #278079) 100%
		);
		content: "";
		opacity: 0.72;
		pointer-events: none;
	}
}

@media (max-width: 880px) {
	:is(body:has(.grafika), body:has(.latvanytervezes), body:has(.cad), body:has(.video), body:has(.ppc), body:has(.web), .grafika, .latvanytervezes, .cad, .video, .ppc, .web) .lumen-faq-section {
		background: var(--lumen-area-faq-background) !important;
	}
}

/*
 * Oktatói adatlapok területspecifikus megjelenése.
 *
 * A single-teacher és a színt meghatározó segédosztály ugyanazon a
 * szülőelemen található. Az oldal alapháttere fehér marad, miközben a
 * leszármazott komponensek az adott terület CSS-változóit használják.
 */
:is(
	.sarga-grafika,
	.zold-latvanytervezes,
	.kek-cad,
	.piros-video-es-film,
	.lila-online-marketing,
	.narancssarga-webfejlesztes
).single-teacher {
	background: initial !important;
}

/* Szövegek, számozások és modulikonok */
:is(
	.sarga-grafika,
	.zold-latvanytervezes,
	.kek-cad,
	.piros-video-es-film,
	.lila-online-marketing,
	.narancssarga-webfejlesztes
).single-teacher :is(
	.outline-card .post-title,
	.outline-card .elementor-heading-title,
	.outline-card .title h4,
	.outline-card .neked-szol-ha,
	.color-number p,
	.terulet-programok
) {
	color: var(--lumen-area-color);
}

:is(
	.sarga-grafika,
	.zold-latvanytervezes,
	.kek-cad,
	.piros-video-es-film,
	.lila-online-marketing,
	.narancssarga-webfejlesztes
).single-teacher .outline-card svg {
	fill: var(--lumen-area-color);
}

:is(
	.sarga-grafika,
	.zold-latvanytervezes,
	.kek-cad,
	.piros-video-es-film,
	.lila-online-marketing,
	.narancssarga-webfejlesztes
).single-teacher .kepzes-kinek-ajanlott {
	--kepzes-elvalaszto-pont-szin: var(--lumen-area-color);
}

/* Gombok */
:is(
	.sarga-grafika,
	.zold-latvanytervezes,
	.kek-cad,
	.piros-video-es-film,
	.lila-online-marketing,
	.narancssarga-webfejlesztes
).single-teacher .button-with-arrow .elementor-button {
	height: 60px;
	background-image: var(--lumen-area-button-arrow);
	background-position: right 10px center;
	background-repeat: no-repeat;
}

:is(
	.sarga-grafika,
	.zold-latvanytervezes,
	.kek-cad,
	.piros-video-es-film,
	.lila-online-marketing,
	.narancssarga-webfejlesztes
).single-teacher .button-with-arrow:not(.button-outline-white):not(.primary) .elementor-button {
	color: var(--lumen-area-color) !important;
}

:is(
	.sarga-grafika,
	.zold-latvanytervezes,
	.kek-cad,
	.piros-video-es-film,
	.lila-online-marketing,
	.narancssarga-webfejlesztes
).single-teacher .button-with-arrow.main .elementor-button:is(:hover, :focus-visible) {
	background-color: #fff !important;
	background-image: var(--lumen-area-button-arrow) !important;
	color: var(--lumen-area-color) !important;
}

:is(
	.sarga-grafika,
	.zold-latvanytervezes,
	.kek-cad,
	.piros-video-es-film,
	.lila-online-marketing,
	.narancssarga-webfejlesztes
).single-teacher .button-with-arrow:not(.main):not(.primary):not(.button-outline-white) .elementor-button:is(:hover, :focus-visible) {
	background-color: var(--lumen-area-color) !important;
	background-image: url("../images/button-arrow-cyan-hover.svg") !important;
	background-position: right 10px center;
	background-repeat: no-repeat;
	border-color: var(--lumen-area-color) !important;
	color: #fff !important;
}

:is(
	.sarga-grafika,
	.zold-latvanytervezes,
	.kek-cad,
	.piros-video-es-film,
	.lila-online-marketing,
	.narancssarga-webfejlesztes
).single-teacher .button-outline-white .elementor-button:is(:hover, :focus-visible) {
	color: var(--lumen-area-color) !important;
}

/* Kártyák és területi hátterek */
:is(
	.sarga-grafika,
	.zold-latvanytervezes,
	.kek-cad,
	.piros-video-es-film,
	.lila-online-marketing,
	.narancssarga-webfejlesztes
).single-teacher .color-card-tanfolyam .bg {
	background: var(--lumen-area-card-background);
}

:is(
	.sarga-grafika,
	.zold-latvanytervezes,
	.kek-cad,
	.piros-video-es-film,
	.lila-online-marketing,
	.narancssarga-webfejlesztes
).single-teacher :is(.hero-bg, .gradient-bg) {
	background: var(--lumen-area-faq-background) !important;
}

/*
 * Az oktatói adatlap kapcsolatfelvételi űrlapja.
 * A selector az Elementorban előforduló mindhárom osztályelrendezést kezeli:
 * a két osztály lehet ugyanazon a szülőn, illetve egymásba is ágyazhatók.
 */
:is(
	.sarga-grafika,
	.zold-latvanytervezes,
	.kek-cad,
	.piros-video-es-film,
	.lila-online-marketing,
	.narancssarga-webfejlesztes
).single-teacher .contact-form-box,
:is(
	.sarga-grafika,
	.zold-latvanytervezes,
	.kek-cad,
	.piros-video-es-film,
	.lila-online-marketing,
	.narancssarga-webfejlesztes
) .single-teacher .contact-form-box,
.single-teacher :is(
	.sarga-grafika,
	.zold-latvanytervezes,
	.kek-cad,
	.piros-video-es-film,
	.lila-online-marketing,
	.narancssarga-webfejlesztes
) .contact-form-box {
	background: var(--lumen-area-faq-background) !important;
}

/*
 * Az oktatói sablonban a területi osztály és az űrlap külön Elementor-
 * szekciókban is lehet. Ilyenkor a body:has() kapcsolja össze őket.
 */
:is(
	body:has(.sarga-grafika.single-teacher),
	body:has(.zold-latvanytervezes.single-teacher),
	body:has(.kek-cad.single-teacher),
	body:has(.piros-video-es-film.single-teacher),
	body:has(.lila-online-marketing.single-teacher),
	body:has(.narancssarga-webfejlesztes.single-teacher)
) .contact-form-box {
	background: var(--lumen-area-faq-background) !important;
}

:is(
	.sarga-grafika,
	.zold-latvanytervezes,
	.kek-cad,
	.piros-video-es-film,
	.lila-online-marketing,
	.narancssarga-webfejlesztes
).single-teacher .action-bg {
	background: var(--lumen-area-dark-color) !important;
}

:is(
	.sarga-grafika,
	.zold-latvanytervezes,
	.kek-cad,
	.piros-video-es-film,
	.lila-online-marketing,
	.narancssarga-webfejlesztes
).single-teacher :is(.outline-color-card, .mouse-glow-card) {
	border-color: var(--lumen-area-color) !important;
}

:is(
	.sarga-grafika,
	.zold-latvanytervezes,
	.kek-cad,
	.piros-video-es-film,
	.lila-online-marketing,
	.narancssarga-webfejlesztes
).single-teacher .outline-color-card :is(.title, .title h4, .description) {
	color: var(--lumen-area-color) !important;
}

/* FAQ ikon és területi háttér */
:is(
	.sarga-grafika,
	.zold-latvanytervezes,
	.kek-cad,
	.piros-video-es-film,
	.lila-online-marketing,
	.narancssarga-webfejlesztes
).single-teacher .lumen-faq__icon::before,
:is(
	.sarga-grafika,
	.zold-latvanytervezes,
	.kek-cad,
	.piros-video-es-film,
	.lila-online-marketing,
	.narancssarga-webfejlesztes
).single-teacher .lumen-faq__icon::after {
	background-color: var(--lumen-area-color);
}

@media (min-width: 881px) {
	:is(
		.sarga-grafika,
		.zold-latvanytervezes,
		.kek-cad,
		.piros-video-es-film,
		.lila-online-marketing,
		.narancssarga-webfejlesztes
	).single-teacher .lumen-faq-section {
		background-image:
			var(--lumen-area-faq-background-image),
			var(--lumen-area-faq-background) !important;
		background-position: center top, center !important;
		background-repeat: no-repeat, no-repeat !important;
		background-size: 100% auto, cover !important;
	}
}

@media (max-width: 880px) {
	:is(
		.sarga-grafika,
		.zold-latvanytervezes,
		.kek-cad,
		.piros-video-es-film,
		.lila-online-marketing,
		.narancssarga-webfejlesztes
	).single-teacher .lumen-faq-section {
		background: var(--lumen-area-faq-background) !important;
	}
}