/* CoreCave editorial — homepage page CSS (Wave 3, T3.1).
 * Loaded last in enqueue order, layers EDITORIAL aesthetic atop cards.css
 * (which already gives every card cream surface + paper hairline + hover).
 * RTL: all inline axes use logical properties. No !important, no @import.
 */

/* --- 0. Page baseline --------------------------------------------------- */
body.home,
body.page-id-437 {
	background: var(--cc-ed-bg);
	color: var(--cc-ed-ink);
}

/* --- 1. Hero ------------------------------------------------------------ */
.cc-home-hero {
	position: relative;
	background: var(--cc-ed-bg);
	padding-block: var(--cc-ed-sp-fluid-section);
}
.cc-home-hero__title {
	position: relative;
	margin-block-start: 0;
}

/* Synthesised eyebrows above section H1s/H2s — saffron uppercase kicker.
 * Shared base; each pseudo only sets `content`. */
.cc-home-hero__title::before {
	display: block;
	font-family: var(--cc-font-body);
	font-size: var(--cc-fs-sm);
	font-weight: 700;
	letter-spacing: var(--cc-tracking-eyebrow);
	color: var(--cc-ed-saffron);
	margin-block-end: var(--cc-ed-sp-2);
	text-transform: uppercase;
}
.cc-home-hero__title::before { content: 'أكاديمية CoreCave'; }
.cc-home-hero .cc-home-hero__title,
.cc-home-hero .elementor-widget-heading h1.elementor-heading-title {
	color: var(--cc-ed-ink);
	font-family: var(--cc-font-display);
	font-weight: 900;
	font-size: var(--cc-fs-display);
	line-height: var(--cc-lh-display);
	letter-spacing: var(--cc-tracking-tight);
	max-inline-size: 14ch;
}
.cc-home-hero__sub,
.cc-home-hero .cc-home-hero__sub p {
	font-family: var(--cc-font-body);
	font-size: var(--cc-fs-lead);
	line-height: var(--cc-lh-normal);
	color: var(--cc-ed-ink-soft);
	max-inline-size: 56ch;
	margin-block-start: var(--cc-ed-sp-4);
}
.cc-home-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cc-ed-sp-4);
	margin-block-start: var(--cc-ed-sp-6);
}

/* CTA pair — paint ONLY the inner <a class="elementor-button">; the
 * .cc-cta wrapper is layout-only, otherwise wrapper + inner render as
 * nested visible pills. */
.cc-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.cc-home-hero__ctas .cc-cta > .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cc-ed-sp-2);
	padding-block: var(--cc-ed-sp-3);
	padding-inline: var(--cc-ed-sp-6);
	border-radius: var(--cc-ed-radius-pill);
	font-family: var(--cc-font-body);
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	border: 2px solid transparent;
	transition: background-color var(--cc-ed-dur-mid) var(--cc-ed-ease), border-color var(--cc-ed-dur-mid) var(--cc-ed-ease), color var(--cc-ed-dur-mid) var(--cc-ed-ease);
}
.cc-home-hero__ctas .cc-cta.cc-cta--primary > .elementor-button {
	background: var(--cc-ed-saffron);
	color: var(--cc-ed-bg);
	border-color: var(--cc-ed-saffron);
}
.cc-home-hero__ctas .cc-cta.cc-cta--primary > .elementor-button:hover,
.cc-home-hero__ctas .cc-cta.cc-cta--primary > .elementor-button:focus-visible {
	background: var(--cc-ed-saffron-warm);
	border-color: var(--cc-ed-saffron-warm);
	color: var(--cc-ed-bg);
}
.cc-home-hero__ctas .cc-cta.cc-cta--secondary > .elementor-button {
	background: transparent;
	color: var(--cc-ed-saffron);
	border-color: var(--cc-ed-saffron);
}
.cc-home-hero__ctas .cc-cta.cc-cta--secondary > .elementor-button:hover,
.cc-home-hero__ctas .cc-cta.cc-cta--secondary > .elementor-button:focus-visible {
	background: var(--cc-ed-saffron);
	color: var(--cc-ed-bg);
	border-color: var(--cc-ed-saffron);
}
.cc-home-hero__art {
	padding: var(--cc-ed-sp-3);
	background: var(--cc-ed-bg-tint);
	border: 1px solid var(--cc-ed-paper-rule);
	border-radius: var(--cc-ed-radius-md);
	box-shadow: var(--cc-ed-shadow-card);
}
.cc-home-hero__art img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border-radius: var(--cc-ed-radius-sm);
}

/* --- 2. Stage section --------------------------------------------------- */
.cc-stage-section {
	background: var(--cc-ed-bg);
	text-align: center;
}

/* Shared display-heading recipe for section H2s. */
.cc-stage-section__title,
.cc-stage-section .elementor-widget-heading h2.elementor-heading-title {
	font-family: var(--cc-font-display);
	font-size: var(--cc-fs-h2);
	font-weight: 800;
	color: var(--cc-ed-ink);
	letter-spacing: var(--cc-tracking-tight);
}
.cc-stage-section__title,
.cc-stage-section .elementor-widget-heading h2.elementor-heading-title {
	position: relative;
	display: inline-block;
	margin-block-end: var(--cc-ed-sp-7);
	padding-block-end: var(--cc-ed-sp-4);
}

/* Saffron hairline below the section title — 64px wide, centered. */
.cc-stage-section__title::after,
.cc-stage-section .elementor-widget-heading h2.elementor-heading-title::after {
	content: '';
	position: absolute;
	inset-inline-start: 50%;
	inset-block-end: 0;
	transform: translateX(-50%);
	inline-size: 64px;
	block-size: 3px;
	background: var(--cc-ed-saffron);
	border-radius: var(--cc-ed-radius-pill);
}
/* Elementor's frontend.min.css loads after our homepage.css and sets
 * .e-con { display: var(--display) } (resolves to flex) at specificity
 * (0,1,0) — equal to ours. Raise our selector to (0,2,0) via the
 * .elementor-element wrapper class so the grid override wins the cascade
 * without resorting to !important. */
.elementor-element.cc-stage-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--cc-ed-sp-6);
	margin-block-start: var(--cc-ed-sp-6);
	text-align: start;
}
.cc-stage-card__name {
	font-family: var(--cc-font-display);
	font-size: var(--cc-fs-h3);
	font-weight: 800;
	color: var(--cc-ed-ink);
	margin-block: 0 var(--cc-ed-sp-2);
}
.cc-stage-card__range {
	font-size: var(--cc-fs-body);
	color: var(--cc-ed-muted);
	margin-block-end: var(--cc-ed-sp-5);
}
.cc-stage-card__cta {
	display: inline-flex;
	align-items: center;
}
.cc-stage-card__cta > .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: var(--cc-ed-sp-2);
	padding-block: var(--cc-ed-sp-3);
	padding-inline: var(--cc-ed-sp-5);
	background: var(--cc-ed-saffron);
	color: var(--cc-ed-bg);
	border-radius: var(--cc-ed-radius-pill);
	font-weight: 700;
	text-decoration: none;
	transition: background-color var(--cc-ed-dur-mid) var(--cc-ed-ease);
}
.cc-stage-card__cta > .elementor-button:hover {
	background: var(--cc-ed-saffron-warm);
	color: var(--cc-ed-bg);
}

/* Premium tier — gold gradient owned by cards.css; we only add the tag. */
.cc-stage-card--premium {
	position: relative;
}
.cc-stage-card--premium::before {
	content: 'متميّز';
	position: absolute;
	inset-block-start: var(--cc-ed-sp-4);
	inset-inline-end: var(--cc-ed-sp-4);
	padding-block: var(--cc-ed-sp-1);
	padding-inline: var(--cc-ed-sp-3);
	background: var(--cc-ed-saffron);
	color: var(--cc-ed-bg);
	font-size: var(--cc-fs-xs);
	font-weight: 700;
	letter-spacing: var(--cc-tracking-eyebrow);
	border-radius: var(--cc-ed-radius-pill);
	z-index: 2;
}

/* --- 3. Courses grid — owned by sections/courses.css (moved out of homepage.css) --- */

/* --- 4. Stat row -------------------------------------------------------- */
.cc-stat-row {
	background: var(--cc-ed-bg-tint);
	border-block: 1px solid var(--cc-ed-paper-rule);
}
.cc-stat-row .cc-stat-card,
.cc-stat-row .elementor-icon-box-wrapper {
	text-align: center;
}

/* Oversized stat numeral — applies to Elementor icon-box title element.
 * Uses --cc-font-numeral (skips Cairo Play / chromatic digits); rationale
 * is documented at the token declaration in type.css. */
.cc-stat-row .cc-stat-card .elementor-icon-box-title,
.cc-stat-row .cc-stat-card .elementor-icon-box-title span,
.cc-stat-row .cc-stat-card .cc-stat-numeral,
.cc-stat-row .cc-stat-card__value {
	font-family: var(--cc-font-numeral);
	font-size: var(--cc-fs-stat);
	font-weight: 900;
	line-height: var(--cc-lh-display);
	letter-spacing: var(--cc-tracking-tight);
	font-feature-settings: "lnum", "tnum";
	font-variant-numeric: tabular-nums lining-nums;
	color: var(--cc-ed-ink);
	display: inline-block;
	margin-block-end: var(--cc-ed-sp-2);
	transition: color var(--cc-ed-dur-mid) var(--cc-ed-ease);
}
.cc-stat-row .cc-stat-card .elementor-icon-box-description,
.cc-stat-row .cc-stat-card__caption {
	font-size: var(--cc-fs-body);
	color: var(--cc-ed-muted);
	letter-spacing: var(--cc-tracking-wide);
}
.cc-stat-row .cc-stat-card:hover .elementor-icon-box-title,
.cc-stat-row .cc-stat-card:hover .elementor-icon-box-title span,
.cc-stat-row .cc-stat-card:hover .cc-stat-numeral,
.cc-stat-row .cc-stat-card:hover .cc-stat-card__value {
	color: var(--cc-ed-saffron);
}

/* --- 5. FAQ accordion --------------------------------------------------- */
.cc-faq-accordion {
	background: var(--cc-ed-bg);
}
.cc-faq-accordion .elementor-accordion .elementor-accordion-item {
	border: none;
	border-block-end: 1px solid var(--cc-ed-paper-rule);
	background: transparent;
}
.cc-faq-accordion .elementor-accordion .elementor-accordion-item:first-child {
	border-block-start: 1px solid var(--cc-ed-paper-rule);
}
.cc-faq-accordion .elementor-tab-title,
.cc-faq-accordion .elementor-accordion-title {
	font-family: var(--cc-font-display);
	font-size: var(--cc-fs-h3);
	font-weight: 700;
	color: var(--cc-ed-ink);
	background: transparent;
	border: none;
	padding-block: var(--cc-ed-sp-5);
	padding-inline: 0;
	letter-spacing: var(--cc-tracking-tight);
	transition: color var(--cc-ed-dur-mid) var(--cc-ed-ease);
}
.cc-faq-accordion .elementor-tab-title:hover,
.cc-faq-accordion .elementor-tab-title.elementor-active {
	color: var(--cc-ed-saffron);
}

/* Saffron underline beneath the open question — inset shadow avoids touching
 * the border-block-end that already encodes the inter-item divider. */
.cc-faq-accordion .elementor-tab-title.elementor-active {
	box-shadow: inset 0 -3px 0 0 var(--cc-ed-saffron);
}
.cc-faq-accordion .elementor-tab-content,
.cc-faq-accordion .elementor-accordion-content {
	font-size: var(--cc-fs-body);
	line-height: var(--cc-lh-loose);
	color: var(--cc-ed-ink-soft);
	background: transparent;
	border: none;
	padding-block: 0 var(--cc-ed-sp-5);
	padding-inline: 0;
}

/* --- 6. Payment trust row ---------------------------------------------- */
.cc-payment-trust-row {
	background: var(--cc-ed-bg-tint);
	border-block: 1px solid var(--cc-ed-paper-rule);
}
.cc-payment-trust-row .cc-payment-logo {
	background: transparent;
	border: none;
	box-shadow: none;
	transition: filter var(--cc-ed-dur-mid) var(--cc-ed-ease);
}
.cc-payment-trust-row .cc-payment-logo img {
	opacity: 0.6;
	filter: saturate(0);
	transition:
		opacity var(--cc-ed-dur-mid) var(--cc-ed-ease),
		filter var(--cc-ed-dur-mid) var(--cc-ed-ease);
}
.cc-payment-trust-row .cc-payment-logo:hover img,
.cc-payment-trust-row .cc-payment-logo:focus-within img {
	opacity: 1;
	filter: saturate(1);
}

/* Payment logos are trust marks, not interactive cards — kill cards.css lift. */
.cc-payment-trust-row .cc-payment-logo:hover {
	transform: none;
}

/* --- 7. Responsive ------------------------------------------------------ */
@media (max-width: 768px) {
	.elementor-element.cc-stage-grid {
		grid-template-columns: 1fr;
		gap: var(--cc-ed-sp-5);
	}
	.cc-home-hero .cc-home-hero__title,
	.cc-home-hero .elementor-widget-heading h1.elementor-heading-title {
		max-inline-size: none;
	}
}

@media (max-width: 480px) {
	.cc-home-hero__ctas .cc-cta,
	.cc-home-hero__ctas a.elementor-button {
		inline-size: 100%;
	}
	.cc-stage-card--premium::before {
		inset-block-start: var(--cc-ed-sp-3);
		inset-inline-end: var(--cc-ed-sp-3);
	}
}

/* --- 8. Reduced motion ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.cc-stat-row .cc-stat-card .elementor-icon-box-title,
	.cc-stat-row .cc-stat-card .cc-stat-numeral,
	.cc-stat-row .cc-stat-card__value,
	.cc-payment-trust-row .cc-payment-logo img,
	.cc-faq-accordion .elementor-tab-title {
		transition: none;
	}
}