/* ==========================================================================
   Thara Academy — Visual Redesign Layer v2
   Design: deep navy (#0c1a3d) × heritage gold (#ffb606) × cool off-white (#f5f7ff)
   Purpose-built for an Arabic-first LMS + digital-book ecommerce.
   Additive only — no parent files modified.
   ========================================================================== */

/* ---- 0. Design tokens -------------------------------------------------- */
:root {
	--ta-navy:        #0c1a3d;
	--ta-navy-mid:    #1a3166;
	--ta-navy-soft:   #e8edf8;
	--ta-gold:        #ffb606;
	--ta-gold-warm:   #ff9e00;
	--ta-gold-pale:   #fff4d6;
	--ta-bg:          #f5f7ff;
	--ta-white:       #ffffff;
	--ta-text:        #111827;
	--ta-muted:       #6b7a99;
	--ta-border:      rgba(12, 26, 61, 0.10);
	--ta-shadow-card: 0 4px 24px -6px rgba(12, 26, 61, 0.13);
	--ta-shadow-lift: 0 16px 40px -12px rgba(12, 26, 61, 0.22);
	--ta-radius-card: 18px;
	--ta-radius-btn:  50px;

	/* keep existing theme tokens coherent */
	--thim-font-body-font-family: 'Tajawal', 'Roboto', sans-serif;
	--thim-body-primary-color: #ffb606;
	--thim-font-body-color: #111827;
	--thim-font-title-color: #0c1a3d;
	--thim-placeholder-color: #9aa3b8;
}

/* ---- 1. Typography ---------------------------------------------------- */
body,
button, input, select, textarea {
	font-family: 'Tajawal', 'Roboto', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.entry-title,
.sc_heading .title,
.thim-heading .heading-title,
.course-title {
	font-family: 'Cairo', 'Roboto Slab', sans-serif;
	letter-spacing: -0.01em;
}

/* ---- 2. Global base --------------------------------------------------- */
body {
	background-color: var(--ta-white);
	color: var(--ta-text);
}

::selection {
	background: var(--ta-gold);
	color: var(--ta-navy);
}

a { transition: color 0.2s ease; }

a:focus-visible,
button:focus-visible,
.elementor-button:focus-visible {
	outline: 2px solid var(--ta-gold);
	outline-offset: 3px;
}

/* ---- 3. Hero section -------------------------------------------------- */
/*
 * Container 24580b9: outer boxed flex row
 * 04a2ec0: left child  → holds the hero image
 * c10a5dc: right child → holds heading + body text + CTA
 *
 * RTL naturally puts first child on the RIGHT.
 * row-reverse flips it: image goes LEFT, text goes RIGHT.
 */
.elementor-element-24580b9 {
	background: linear-gradient(145deg, var(--ta-navy) 0%, #142756 55%, #0c2248 100%);
	padding: 60px 0 0 !important;
	position: relative;
	overflow: hidden;
}

/* Decorative ring behind hero image */
.elementor-element-24580b9::before {
	content: "";
	position: absolute;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	border: 60px solid rgba(255, 182, 6, 0.07);
	top: -80px;
	left: -100px;
	pointer-events: none;
}

.elementor-element-24580b9::after {
	content: "";
	position: absolute;
	width: 280px;
	height: 280px;
	border-radius: 50%;
	background: rgba(255, 182, 6, 0.05);
	bottom: 30px;
	right: 8%;
	pointer-events: none;
}

/* Flip column order: image LEFT, text RIGHT */
.elementor-element-24580b9 > .e-con-inner {
	flex-direction: row-reverse !important;
	align-items: flex-end !important;
	min-height: 82vh;
}

/* Image column — sits at the bottom of the hero */
.elementor-element-04a2ec0 {
	position: relative;
	align-self: flex-end !important;
}

.elementor-element-04a2ec0 img {
	display: block;
	max-height: 540px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	object-position: bottom;
	filter: drop-shadow(0 -8px 32px rgba(0,0,0,0.35));
	position: relative;
	z-index: 1;
}

/* Subtle gold glow behind the hero image */
.elementor-element-04a2ec0::after {
	content: "";
	position: absolute;
	width: 85%;
	height: 60%;
	background: radial-gradient(ellipse at 50% 80%, rgba(255,182,6,0.18) 0%, transparent 70%);
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	pointer-events: none;
}

/* Text column */
.elementor-element-c10a5dc {
	padding: 40px 40px 80px 20px !important;
	align-self: center !important;
}

/* Hero H2 — "اطمح ، تعلّم ، تقدّم" */
.elementor-element-71bd591 .elementor-heading-title {
	color: var(--ta-white) !important;
	font-family: 'Cairo', sans-serif !important;
	font-size: clamp(2.4rem, 5vw, 4.2rem) !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	text-wrap: balance;
	text-align: end !important;
}

/* Gold underline on hero headline */
.elementor-element-71bd591 .elementor-heading-title::after {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	background: var(--ta-gold);
	border-radius: 2px;
	margin: 16px 0 0 auto;
}

/* Hero body text */
.elementor-element-17ad38c,
.elementor-element-17ad38c p {
	color: rgba(255, 255, 255, 0.82) !important;
	font-size: clamp(1rem, 1.8vw, 1.2rem) !important;
	line-height: 1.75 !important;
	text-align: end !important;
}

/* Hero CTA button */
.elementor-element-f69a86f .elementor-button {
	background: linear-gradient(135deg, var(--ta-gold-warm) 0%, var(--ta-gold) 100%) !important;
	color: var(--ta-navy) !important;
	fill: var(--ta-navy) !important;
	border-radius: var(--ta-radius-btn) !important;
	font-family: 'Cairo', sans-serif !important;
	font-weight: 700 !important;
	font-size: 1.05rem !important;
	padding: 14px 36px !important;
	border: none !important;
	box-shadow: 0 6px 24px -4px rgba(255, 182, 6, 0.55) !important;
	transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.elementor-element-f69a86f .elementor-button:hover {
	transform: translateY(-3px) !important;
	box-shadow: 0 14px 32px -6px rgba(255, 182, 6, 0.65) !important;
}

/* ---- 4. Logo / brand strip (ee12bdf) ---------------------------------- */
.elementor-element-ee12bdf {
	background: var(--ta-white) !important;
	border-top: 1px solid var(--ta-border) !important;
	border-bottom: 1px solid var(--ta-border) !important;
	padding: 24px 0 !important;
	min-height: unset !important;
}

.elementor-element-ee12bdf img {
	filter: grayscale(100%) brightness(0.6);
	opacity: 0.65;
	transition: filter 0.3s, opacity 0.3s;
}

.elementor-element-ee12bdf img:hover {
	filter: grayscale(0%) brightness(1);
	opacity: 1;
}

/* Right-side heading in the partner strip */
.elementor-element-57533a6 .elementor-heading-title,
.elementor-element-a2064c9 .elementor-heading-title {
	color: var(--ta-navy) !important;
	font-size: clamp(1.6rem, 3vw, 2.4rem) !important;
	font-weight: 800 !important;
}

/* ---- 5. Section rhythm — shared headings ------------------------------ */
.sc_heading .title,
.thim-heading .heading-title,
.elementor-heading-title {
	color: var(--ta-navy);
}

/* Gold accent underline on all section headings */
.sc_heading,
.thim-heading {
	position: relative;
}

.sc_heading .title::after,
.thim-heading .heading-title::after {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	background: var(--ta-gold);
	border-radius: 2px;
	margin: 12px auto 0;
}

/* ---- 6. Courses section (a57ecee) ------------------------------------- */
.elementor-element-a57ecee {
	background: var(--ta-white) !important;
	padding-top: 60px !important;
	padding-bottom: 20px !important;
}

/* ---- 7. Digital products section (b70affa) ----------------------------- */
.elementor-element-b70affa {
	background: var(--ta-bg) !important;
	padding-top: 60px !important;
	padding-bottom: 60px !important;
}

/* ---- 8. Course & product cards ----------------------------------------- */
.thim-course-item,
.course-item,
.thim-post-item,
li.type-lp_course,
.learnpress .learnpress-courses .course-item,
.woocommerce ul.products li.product {
	background: var(--ta-white) !important;
	border-radius: var(--ta-radius-card) !important;
	box-shadow: var(--ta-shadow-card) !important;
	border: 1px solid var(--ta-border) !important;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.thim-course-item:hover,
.course-item:hover,
li.type-lp_course:hover,
.woocommerce ul.products li.product:hover {
	transform: translateY(-6px) !important;
	box-shadow: var(--ta-shadow-lift) !important;
}

/* Course image */
.thim-course-item .course-thumbnail,
.thim-course-item img,
li.type-lp_course img,
.woocommerce ul.products li.product img {
	border-radius: var(--ta-radius-card) var(--ta-radius-card) 0 0;
}

/* Course price */
.price, .course-price,
.lp-course-price,
.woocommerce .price {
	color: var(--ta-gold-warm) !important;
	font-weight: 700;
}

/* "View all" / section CTA buttons */
.elementor-element-4b33cdd .elementor-button,
.elementor-element-2156965 .elementor-button {
	border-radius: var(--ta-radius-btn) !important;
	font-weight: 700 !important;
	font-family: 'Cairo', sans-serif !important;
	transition: transform 0.25s, box-shadow 0.25s !important;
}

.elementor-element-4b33cdd .elementor-button:hover,
.elementor-element-2156965 .elementor-button:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 20px -6px rgba(12, 26, 61, 0.3) !important;
}

/* ---- 9. "Sign up now" section (749413db) -------------------------------- */
.elementor-element-749413db .elementor-background-overlay {
	background: linear-gradient(135deg, rgba(12,26,61,0.85) 0%, rgba(12,34,72,0.7) 100%) !important;
}

.elementor-element-749413db .sc_heading .title {
	color: var(--ta-white) !important;
}

/* ---- 10. "Why choose us" section (135e925) ----------------------------- */
.elementor-element-135e925 {
	background: var(--ta-navy) !important;
	padding: 80px 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.elementor-element-135e925 .sc_heading .title,
.elementor-element-135e925 .thim-heading .heading-title {
	color: var(--ta-white) !important;
}

.elementor-element-135e925 .sc_heading .title::after {
	background: var(--ta-gold) !important;
}

/* Icon boxes on navy bg */
.elementor-element-135e925 .thim-widget-icon-box {
	background: rgba(255, 255, 255, 0.05) !important;
	border: 1px solid rgba(255, 255, 255, 0.10) !important;
	border-radius: var(--ta-radius-card) !important;
	padding: 32px 24px !important;
	transition: background 0.3s, transform 0.3s, box-shadow 0.3s !important;
}

.elementor-element-135e925 .thim-widget-icon-box:hover {
	background: rgba(255, 255, 255, 0.09) !important;
	transform: translateY(-5px) !important;
	box-shadow: 0 16px 40px -10px rgba(0,0,0,0.4) !important;
}

/* SVG icons — tint gold */
.elementor-element-135e925 .thim-widget-icon-box svg path,
.elementor-element-135e925 .thim-widget-icon-box svg circle,
.elementor-element-135e925 .thim-widget-icon-box svg rect {
	fill: var(--ta-gold) !important;
	stroke: var(--ta-gold) !important;
}

.elementor-element-135e925 .boxes-icon {
	margin-bottom: 20px;
}

/* Icon box title and description text */
.elementor-element-135e925 .box-title,
.elementor-element-135e925 .title-box {
	color: var(--ta-white) !important;
	font-weight: 700 !important;
}

.elementor-element-135e925 .box-content,
.elementor-element-135e925 .content-box,
.elementor-element-135e925 p {
	color: rgba(255, 255, 255, 0.72) !important;
}

/* ---- 11. Footer -------------------------------------------------------- */
#colophon,
footer.site-footer,
.elementor-8920 {
	background: var(--ta-navy) !important;
	color: rgba(255,255,255,0.75) !important;
}

#colophon a,
footer.site-footer a,
.elementor-8920 a {
	color: rgba(255,255,255,0.75);
	transition: color 0.2s;
}

#colophon a:hover,
footer.site-footer a:hover,
.elementor-8920 a:hover {
	color: var(--ta-gold);
}

.elementor-8920 .sc_heading .title,
.elementor-8920 .thim-heading .heading-title {
	color: var(--ta-white) !important;
}

.thim-copyright {
	background: rgba(0,0,0,0.25) !important;
	color: rgba(255,255,255,0.5) !important;
}

/* ---- 12. Header / nav refinements ------------------------------------- */
#masthead {
	transition: box-shadow 0.3s ease;
}

.thim-sticky-active #masthead,
#masthead.sticky-on {
	box-shadow: 0 2px 20px rgba(12, 26, 61, 0.10) !important;
}

/* Toolbar strip top of header */
#toolbar {
	background: var(--ta-navy) !important;
}

/* ---- 13. Buttons — global --------------------------------------------- */
.elementor-button,
.thim-button,
button.button,
a.button,
.learn-press-button,
input[type="submit"] {
	border-radius: var(--ta-radius-btn) !important;
	font-family: 'Cairo', sans-serif !important;
	font-weight: 700 !important;
	transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

/* Primary gold buttons site-wide */
.elementor-button[style*="background-color: #FFB606"],
.elementor-button[style*="background-color:#FFB606"],
.elementor-button[style*="background-color: #ffb606"],
.elementor-button[style*="background-color:#ffb606"] {
	background: linear-gradient(135deg, var(--ta-gold-warm), var(--ta-gold)) !important;
	color: var(--ta-navy) !important;
	fill: var(--ta-navy) !important;
}

/* RevSlider primary button (if any) */
.rev-btn.thim-slider-button {
	background: linear-gradient(135deg, var(--ta-gold-warm), var(--ta-gold)) !important;
	color: var(--ta-navy) !important;
	border-radius: var(--ta-radius-btn) !important;
}

/* ---- 14. Login/register popup buttons --------------------------------- */
.thim-link-login a {
	font-family: 'Cairo', sans-serif;
	font-weight: 600;
}

/* ---- 15. Responsive — mobile ------------------------------------------ */
@media (max-width: 1024px) {
	.elementor-element-24580b9 > .e-con-inner {
		flex-direction: column !important;
		min-height: unset !important;
		align-items: stretch !important;
	}

	.elementor-element-04a2ec0 {
		order: -1;
	}

	.elementor-element-04a2ec0 img {
		max-height: 340px;
		width: auto;
		margin: 0 auto;
	}

	.elementor-element-c10a5dc {
		padding: 32px 20px 40px !important;
	}

	.elementor-element-71bd591 .elementor-heading-title {
		font-size: clamp(1.8rem, 7vw, 2.6rem) !important;
		text-align: center !important;
	}

	.elementor-element-71bd591 .elementor-heading-title::after {
		margin: 12px auto 0 !important;
	}

	.elementor-element-17ad38c,
	.elementor-element-17ad38c p {
		text-align: center !important;
	}

	.elementor-element-f69a86f {
		text-align: center !important;
	}

	.elementor-element-24580b9::before,
	.elementor-element-24580b9::after {
		display: none;
	}
}

/* ---- 16. Motion-reduction respect ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}