/*
 * Al Manal front-end styles.
 * Logical properties only (inline/block, start/end) so every rule
 * mirrors automatically between Arabic (RTL) and English (LTR).
 */

:root {
	--almanal-radius: 8px;
	--almanal-maxw: 1320px;
	--almanal-gutter: clamp(0.75rem, 1.8vw, 1.5rem);
}

/* The block-theme <main> group carries a default flow margin-top (~24px)
   that opens a gap below the sticky navbar. Zero it so content (and the
   full-bleed hero) sits flush under the header. */
main.wp-block-group {
	margin-block-start: 0;
}

/* ---------- Layered page: animated gradient backdrop ---------- */
/* The page background is a slow, subtle brand-tone gradient. It shows
   in the gutters around the content. Content floats on a solid surface
   over it. Navbar + footer stay full-width (handled in their own rules). */
body {
	background: linear-gradient(
		135deg,
		color-mix(in srgb, var(--wp--preset--color--primary) 12%, #fff) 0%,
		color-mix(in srgb, var(--wp--preset--color--accent) 22%, #fff) 35%,
		var(--wp--preset--color--surface) 65%,
		color-mix(in srgb, var(--wp--preset--color--primary) 9%, #fff) 100%
	);
	background-size: 300% 300%;
	background-attachment: fixed;
	animation: almanal-gradient 22s ease infinite;
}

@keyframes almanal-gradient {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
	body { animation: none; }
}

/* Main content floats on a solid surface over the gradient, with
   horizontal gutters. Logical props so the inset mirrors RTL/LTR.
   Navbar/footer opt OUT of this by being outside .almanal-main. */
.almanal-main {
	max-inline-size: var(--almanal-maxw);
	margin-inline: auto;
	margin-block-start: var(--wp--preset--spacing--30);
	margin-block-end: var(--wp--preset--spacing--50);
	padding-inline: var(--almanal-gutter);
	padding-block: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--base);
	border-radius: var(--almanal-radius);
	box-shadow: 0 2px 24px rgba(46, 62, 78, 0.07);
}

/* ---------- Site Header ---------- */
.almanal-header {
	background: color-mix(in srgb, var(--wp--preset--color--surface) 92%, var(--wp--preset--color--primary));
	border-block-end: 1px solid var(--wp--preset--color--border);
	position: sticky;
	inset-block-start: 0;
	z-index: 50;
	box-shadow: 0 1px 0 rgba(46, 62, 78, 0.04);
	transition: box-shadow 0.25s ease, background-color 0.25s ease;
}

/* Elevation once scrolled away from the top. */
.almanal-header.is-scrolled {
	background: color-mix(in srgb, var(--wp--preset--color--surface) 80%, var(--wp--preset--color--primary));
	box-shadow: 0 4px 18px rgba(46, 62, 78, 0.14);
	-webkit-backdrop-filter: saturate(1.1) blur(2px);
	backdrop-filter: saturate(1.1) blur(2px);
}

.almanal-header__inner {
	max-inline-size: var(--almanal-maxw);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
	padding-block: 0.75rem;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	flex-wrap: wrap;
}

.almanal-header__logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.almanal-header__logo-img {
	block-size: 44px;
	inline-size: auto;
	display: block;
}

.almanal-header__nav {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin-inline-start: auto; /* pushes nav toward the end side; mirrors in RTL */
	flex-wrap: wrap;
}

.almanal-header__link {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--medium);
	padding-block: 0.25rem;
	border-block-end: 2px solid transparent;
	transition: border-color 0.15s ease;
}

.almanal-header__link:hover {
	border-block-end-color: var(--wp--preset--color--accent-deep);
}

.almanal-header__lang {
	flex-shrink: 0;
}

.almanal-header__lang ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 0.5rem;
}

.almanal-header__lang a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	padding-inline: 0.5rem;
	padding-block: 0.25rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
}

.almanal-header__lang a:hover {
	border-color: var(--wp--preset--color--accent-deep);
	color: var(--wp--preset--color--primary);
}

/* ---------- Home: Hero ---------- */
.almanal-hero {
	--hero-img: none;
	position: relative;
	min-block-size: clamp(380px, 60vh, 560px);
	display: flex;
	align-items: center;
	overflow: hidden;
	isolation: isolate;
}

/* ---- Slideshow ---- */
.almanal-hero--slides {
	display: block;
}
.almanal-hero--slides .almanal-slide {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.9s ease;
	display: flex;
	align-items: center;
	overflow: hidden;
}
.almanal-hero--slides .almanal-slide.is-active {
	opacity: 1;
	visibility: visible;
	position: relative; /* the active slide gives the hero its height */
	inline-size: 100%;
	z-index: 1;
}

/* Background image per slide, blurred slightly, with a slow Ken Burns
   pan/zoom on the active slide. */
.almanal-slide::before {
	content: "";
	position: absolute;
	inset: -24px;
	z-index: -2;
	background-image: var(--hero-img);
	background-size: cover;
	background-position: center;
	filter: blur(4px) saturate(1.05);
	transform: scale(1.08);
}
.almanal-slide.is-active::before {
	animation: almanal-kenburns 12s ease-out forwards;
}
@keyframes almanal-kenburns {
	from { transform: scale(1.08) translate3d(0, 0, 0); }
	to   { transform: scale(1.18) translate3d(0, -2%, 0); }
}

/* Brand tint over each slide image. */
.almanal-slide::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		to inline-start,
		color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--primary) 58%, transparent) 100%
	);
}

/* Text slides up + fades in on the active slide. */
.almanal-slide .almanal-hero__glass {
	opacity: 0;
	transform: translateY(18px);
}
.almanal-slide.is-active .almanal-hero__glass {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.7s ease 0.25s, transform 0.7s ease 0.25s;
}

/* Nav dots. */
.almanal-hero__dots {
	position: absolute;
	z-index: 3;
	inset-block-end: 1.25rem;
	inset-inline-start: 0;
	inline-size: 100%;
	display: flex;
	gap: 0.6rem;
	justify-content: center;
}
.almanal-hero__dot {
	inline-size: 11px;
	block-size: 11px;
	border-radius: 50%;
	border: 1.5px solid #fff;
	background: transparent;
	padding: 0;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.almanal-hero__dot.is-active { background: #fff; transform: scale(1.15); }

@media (prefers-reduced-motion: reduce) {
	.almanal-slide.is-active::before { animation: none; }
	.almanal-hero--slides .almanal-slide { transition: none; }
	.almanal-slide.is-active .almanal-hero__glass { transition: none; }
}

.almanal-hero__overlay {
	inline-size: 100%;
	display: flex;
	align-items: center;
	padding-block: var(--wp--preset--spacing--60);
}

.almanal-hero__content {
	max-inline-size: var(--almanal-maxw);
	margin-inline: auto;
	padding-inline: var(--almanal-gutter);
	inline-size: 100%;
}

/* Frosted-glass container holding the hero text. */
.almanal-hero__glass {
	max-inline-size: 40rem;
	padding: clamp(1.5rem, 4vw, 2.75rem);
	border-radius: 16px;
	background: color-mix(in srgb, var(--wp--preset--color--primary) 72%, transparent);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	backdrop-filter: blur(14px) saturate(1.2);
	border: 1px solid color-mix(in srgb, #fff 22%, transparent);
	box-shadow: 0 8px 40px rgba(46, 62, 78, 0.35);
}

.almanal-hero__title {
	color: #fff;
	font-size: clamp(2rem, 5vw, 3.25rem);
	line-height: 1.15;
	margin-block: 0 1rem;
}

.almanal-hero__lead {
	color: #fff;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
	margin-block: 0 1.75rem;
}

.almanal-hero__cta {
	display: inline-block;
	background: var(--wp--preset--color--accent-deep);
	color: #fff;
	font-weight: 600;
	padding-block: 0.85rem;
	padding-inline: 1.75rem;
	border-radius: 6px;
	text-decoration: none;
}

.almanal-hero__cta:hover { background: #fff; color: var(--wp--preset--color--primary); }

/* Home middle (focus + tracks) sits on the surfaced .almanal-home-body
   wrapper, which provides width + gutters. Sections just space vertically. */
.almanal-home-body {
	margin-block-start: var(--wp--preset--spacing--50);
}
.almanal-focus,
.almanal-tracks {
	padding-block: var(--wp--preset--spacing--50);
}

.almanal-focus { text-align: center; }
.almanal-focus h2,
.almanal-tracks h2 {
	font-size: var(--wp--preset--font-size--x-large);
	color: var(--wp--preset--color--primary);
	margin-block: 0 1rem;
}
.almanal-focus p { max-inline-size: 65ch; margin-inline: auto; color: var(--wp--preset--color--ink); font-size: var(--wp--preset--font-size--large); }

.almanal-tracks__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--wp--preset--spacing--40);
	margin-block-start: var(--wp--preset--spacing--40);
}

.almanal-track {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--almanal-radius);
	text-decoration: none;
	color: inherit;
	box-shadow: 0 2px 16px rgba(46, 62, 78, 0.06);
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.almanal-track:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(46,62,78,0.12); border-color: var(--wp--preset--color--accent-deep); }
.almanal-track h3 { color: var(--wp--preset--color--primary); margin: 0; font-size: var(--wp--preset--font-size--large); }
.almanal-track__count { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }
.almanal-track__cta { margin-block-start: auto; color: var(--wp--preset--color--accent-deep); font-weight: 600; }

/* Track card WITH a background image: image fills the card, text sits on a
   dark gradient for contrast (white text). */
.almanal-track--has-visual {
	--track-img: none;
	position: relative;
	min-block-size: 200px;
	border: none;
	overflow: hidden;
	color: #fff;
	isolation: isolate;
}
.almanal-track--has-visual::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: var(--track-img);
	background-size: cover;
	background-position: center;
	transition: transform 0.3s ease;
}
.almanal-track--has-visual::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, color-mix(in srgb, var(--wp--preset--color--primary) 92%, transparent) 8%, color-mix(in srgb, var(--wp--preset--color--primary) 30%, transparent) 100%);
}
.almanal-track--has-visual:hover::before { transform: scale(1.06); }
.almanal-track--has-visual h3 { color: #fff; }
.almanal-track--has-visual .almanal-track__count { color: color-mix(in srgb, #fff 80%, transparent); }
.almanal-track--has-visual .almanal-track__cta { color: #fff; }

/* ---------- Trust Bar ---------- */
.almanal-trust {
	margin-block: var(--wp--preset--spacing--50);
	padding-block: var(--wp--preset--spacing--40);
	border-block: 1px solid var(--wp--preset--color--border);
	text-align: center;
}

.almanal-trust__label {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-block: 0 1.25rem;
}

.almanal-trust__logos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(1.5rem, 5vw, 3.5rem);
}

.almanal-trust__logo {
	display: block;
	block-size: auto;
	max-block-size: 56px;
	inline-size: auto;
	filter: grayscale(0.2);
	opacity: 0.9;
	transition: filter 0.2s ease, opacity 0.2s ease;
}

.almanal-trust__logo:hover {
	filter: grayscale(0);
	opacity: 1;
}

/* SPEA is very wide; give it a touch more height room */
.almanal-trust__logo--spea { max-block-size: 44px; }

/* ---------- Site Footer ---------- */
.almanal-footer {
	background: var(--wp--preset--color--primary);
	color: #fff;
}

.almanal-footer__inner {
	max-inline-size: var(--almanal-maxw);
	margin-inline: auto;
	padding-inline: var(--almanal-gutter);
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: var(--wp--preset--spacing--50);
}

@media (max-width: 720px) {
	.almanal-footer__inner { grid-template-columns: 1fr; }
}

.almanal-footer__col h3 {
	color: #fff;
	font-size: var(--wp--preset--font-size--large);
	margin-block: 0 0.75rem;
}

.almanal-footer__col h4 {
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--medium);
	margin-block: 0 1rem;
}

.almanal-footer__brand p {
	color: color-mix(in srgb, #fff 80%, var(--wp--preset--color--primary));
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.7;
	margin: 0;
}

.almanal-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}

.almanal-footer__col a {
	color: color-mix(in srgb, #fff 88%, var(--wp--preset--color--primary));
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small);
}

.almanal-footer__col a:hover {
	color: var(--wp--preset--color--accent);
}

.almanal-footer__contact li {
	color: color-mix(in srgb, #fff 80%, var(--wp--preset--color--primary));
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

.almanal-footer__bar {
	border-block-start: 1px solid color-mix(in srgb, #fff 15%, transparent);
}

.almanal-footer__bar p {
	max-inline-size: var(--almanal-maxw);
	margin-inline: auto;
	padding-inline: var(--almanal-gutter);
	padding-block: 1rem;
	font-size: var(--wp--preset--font-size--small);
	color: color-mix(in srgb, #fff 70%, var(--wp--preset--color--primary));
	margin-block: 0;
}

/* ---------- Courses Listing ---------- */
.almanal-courses__head h1 {
	font-size: var(--wp--preset--font-size--xx-large);
	color: var(--wp--preset--color--primary);
	margin-block: 0 var(--wp--preset--spacing--40);
}

.almanal-courses__section {
	margin-block-end: var(--wp--preset--spacing--60);
}

.almanal-courses__cat {
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--primary);
	padding-block-end: 0.5rem;
	margin-block-end: var(--wp--preset--spacing--40);
	border-block-end: 2px solid var(--wp--preset--color--accent);
}

.almanal-courses__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--wp--preset--spacing--40);
}

.almanal-card {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--almanal-radius);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.almanal-card:hover {
	border-color: var(--wp--preset--color--accent-deep);
	box-shadow: 0 6px 20px rgba(46, 62, 78, 0.10);
	transform: translateY(-2px);
}

.almanal-card__visual {
	display: flex;
	align-items: center;
	justify-content: center;
	block-size: 120px;
	margin: calc(-1 * var(--wp--preset--spacing--40)) calc(-1 * var(--wp--preset--spacing--40)) 0.4rem;
	background: var(--wp--preset--color--surface);
	border-end-start-radius: 0;
	border-end-end-radius: 0;
	border-start-start-radius: var(--almanal-radius);
	border-start-end-radius: var(--almanal-radius);
	overflow: hidden;
}

/* Logo: contained on a clean surface, never cropped. */
.almanal-card__visual--logo {
	background: var(--wp--preset--color--base);
	padding: 1rem;
}
.almanal-card__visual--logo img {
	max-block-size: 64px;
	max-inline-size: 72%;
	inline-size: auto;
	block-size: auto;
	object-fit: contain;
}

/* Photo: fills the visual area edge to edge. */
.almanal-card__visual--photo img {
	inline-size: 100%;
	block-size: 120px;
	object-fit: cover;
}

.almanal-card__badge {
	align-self: flex-start;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--accent-deep);
	background: color-mix(in srgb, var(--wp--preset--color--accent) 35%, white);
	padding-block: 0.2rem;
	padding-inline: 0.7rem;
	border-radius: 999px;
}

.almanal-card__title {
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--primary);
	margin: 0;
	line-height: 1.3;
}

.almanal-card__meta {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 1rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.almanal-card__cta {
	margin-block-start: auto;
	color: var(--wp--preset--color--accent-deep);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
}

/* ---------- Course Profile ---------- */
.almanal-course {
	/* Width + gutters now come from .almanal-main wrapper. */
}

.almanal-course__head {
	padding-block-end: var(--wp--preset--spacing--40);
	border-block-end: 1px solid var(--wp--preset--color--border);
	margin-block-end: var(--wp--preset--spacing--50);
}

.almanal-badge {
	display: inline-block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--accent-deep);
	background: color-mix(in srgb, var(--wp--preset--color--accent) 35%, white);
	padding-block: 0.25rem;
	padding-inline: 0.75rem;
	border-radius: 999px;
	margin-block-end: 0.75rem;
}

.almanal-course__title {
	font-size: var(--wp--preset--font-size--xx-large);
	color: var(--wp--preset--color--primary);
	line-height: 1.2;
	margin-block: 0 1rem;
}

.almanal-course__meta {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 2rem;
}

.almanal-course__meta li {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.almanal-course__meta-k {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* Two-column body + CTA on wide screens; stacks on small. */
.almanal-course__body {
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

.almanal-course__section h2 {
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--primary);
	margin-block-end: 0.75rem;
}

.almanal-course__outcomes {
	display: grid;
	gap: 0.5rem;
	padding-inline-start: 1.25rem;
}

.almanal-course__outline {
	list-style: none;
	counter-reset: mod;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}

.almanal-module {
	counter-increment: mod;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--almanal-radius);
	padding: 1.25rem;
	position: relative;
	padding-inline-start: 3.25rem;
}

.almanal-module::before {
	content: counter(mod);
	position: absolute;
	inset-inline-start: 1rem;
	inset-block-start: 1.25rem;
	inline-size: 1.6rem;
	block-size: 1.6rem;
	display: grid;
	place-items: center;
	background: var(--wp--preset--color--primary);
	color: #fff;
	border-radius: 50%;
	font-size: 0.85rem;
	font-weight: 700;
}

.almanal-module__title {
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--primary);
	margin: 0 0 0.25rem;
}

.almanal-module__desc {
	margin: 0;
	color: var(--wp--preset--color--ink);
}

/* CTA panel */
.almanal-course__cta {
	margin-block-start: var(--wp--preset--spacing--60);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--almanal-radius);
	padding: var(--wp--preset--spacing--50);
}

.almanal-course__cta h2 {
	color: var(--wp--preset--color--primary);
	margin-block-start: 0;
}

.almanal-course__dates {
	font-weight: 600;
	color: var(--wp--preset--color--accent-deep);
}

/* ---------- Reduced motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}