/* Hadith Ma3loma theme styles. Logical properties only, so the layout follows the page direction (RTL). */

:root {
	--hd-radius: 10px;
	--hd-shadow: 0 1px 2px rgba(15, 59, 44, 0.06), 0 6px 18px rgba(15, 59, 44, 0.06);
	--hd-shadow-hover: 0 2px 4px rgba(15, 59, 44, 0.08), 0 12px 28px rgba(15, 59, 44, 0.12);
}

/* Tutor LMS pages follow the theme: brand colour and fonts. */
body {
	--tutor-color-primary: #17694D;
	--tutor-color-primary-rgb: 23, 105, 77;
	--tutor-color-primary-hover: #0F3B2C;
	--tutor-font-family-body: var(--wp--preset--font-family--plex-arabic);
	--tutor-font-family-heading: var(--wp--preset--font-family--amiri);
}

/* Focus states: ink ring on light surfaces, gold ring on dark surfaces. */
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
	border-radius: 3px;
}
.has-ink-background-color :where(a, button, input, summary):focus-visible { outline-color: var(--wp--preset--color--gold); }

/* Layout rhythm */
.wp-site-blocks > * { margin-block-start: 0; }
/* Nothing may widen the page sideways (wide ads, off-canvas panels): on phones
   the page would slide left and right. clip, unlike hidden, keeps sticky
   headers working. */
html,
body { overflow-x: clip; }

/* Tutor loads tutor-core.css on course and lesson pages only, after the global
   styles, and it resets body to font-family/line-height "inherit" and a grey
   background. That dropped the Arabic font and changed the header there.
   This file loads after Tutor's, so restore the theme values. */
body {
	font-family: var(--wp--preset--font-family--plex-arabic);
	line-height: 1.85;
	color: var(--wp--preset--color--text);
	background-color: var(--wp--preset--color--cream);
}

/* Full-width sections sit edge to edge: their waves, arches and clouds are
   drawn to meet the next section, so the flow layout gap (1.5rem of page
   background) must not open between them. */
main > .hd-section { margin-block-start: 0; }
.hd-section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.wp-site-blocks > main.hd-main,
.wp-site-blocks > .hd-main { padding-block: clamp(1.5rem, 4vw, 3rem); }

/* Header: sticky, with a gold hairline on top. Once the page scrolls, header.js
   adds .is-scrolled: the bar gets shorter, the logo smaller and a soft shadow. */
.wp-site-blocks > header,
.wp-site-blocks > .site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	border-block-end: 1px solid var(--wp--preset--color--sand);
	transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.admin-bar .wp-site-blocks > header,
.admin-bar .wp-site-blocks > .site-header { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) {
	.admin-bar .wp-site-blocks > header,
	.admin-bar .wp-site-blocks > .site-header { position: static; }
}
.wp-site-blocks > .is-scrolled { box-shadow: 0 6px 24px rgba(15, 59, 44, 0.1); border-block-end-color: transparent; }
.hd-header {
	padding-block: 0.7rem;
	border-block-start: 3px solid var(--wp--preset--color--gold);
	transition: padding 0.25s ease;
}
.is-scrolled .hd-header { padding-block: 0.35rem; }
.hd-header > .alignwide { gap: 1rem; }
.hd-logo { margin: 0; flex-shrink: 0; }
.hd-logo img { width: 190px; height: auto; display: block; transition: width 0.25s ease; }
.is-scrolled .hd-logo img { width: 150px; }
@media (max-width: 600px) {
	.hd-logo img { width: 150px; }
	.is-scrolled .hd-logo img { width: 128px; }
}
.hd-header-tools { gap: 0.6rem; align-items: center; }

/* Desktop links: a gold line grows from the centre on hover and stays under the current page. */
.wp-block-navigation { font-weight: 500; font-size: var(--wp--preset--font-size--small); gap: 0.25rem 1.4rem; }
.wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	padding-block: 0.6rem;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	transition: color 0.2s ease;
}
.wp-block-navigation .wp-block-navigation-item:not(.hd-nav-cta) > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0.35rem;
	height: 2px;
	border-radius: 2px;
	background: var(--wp--preset--color--gold);
	transform: scaleX(0);
	transition: transform 0.25s ease;
}
.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--primary); }
.wp-block-navigation .wp-block-navigation-item:not(.hd-nav-cta) > .wp-block-navigation-item__content:hover::after,
.wp-block-navigation .current-menu-item:not(.hd-nav-cta) > .wp-block-navigation-item__content::after { transform: scaleX(1); }

/* Student dashboard button, with a user icon. */
.wp-block-navigation .hd-nav-cta > .wp-block-navigation-item__content {
	gap: 0.45rem;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	padding-inline: 1rem 1.1rem;
	border-radius: 999px;
	transition: background 0.2s ease;
}
.wp-block-navigation .hd-nav-cta > .wp-block-navigation-item__content::before {
	content: "";
	width: 1.05rem;
	height: 1.05rem;
	flex-shrink: 0;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wp-block-navigation .hd-nav-cta > .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--white); }

/* Round icon buttons: search, and the menu toggle on phones. */
.hd-header-search .wp-block-search__button,
.wp-block-navigation__responsive-container-open {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-width: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--parchment);
	color: var(--wp--preset--color--ink);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--sand);
	transition: background 0.2s ease, color 0.2s ease;
}
.hd-header-search .wp-block-search__button:hover,
.wp-block-navigation__responsive-container-open:hover { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--white); box-shadow: none; }
.hd-header-search .wp-block-search__input { border-radius: 999px; min-height: 44px; }
/* Header search opens as a floating field under the button instead of growing
   inside the header row, which pushed the logo and menu off the screen on
   phones. On phones it spans the width of the header. */
.hd-header-search { position: relative; }
.hd-header-search .wp-block-search__inside-wrapper { width: auto !important; }
.hd-header-search .wp-block-search__input {
	position: absolute;
	z-index: 60;
	top: calc(100% + 0.6rem);
	inset-inline-end: 0;
	width: min(24rem, calc(100vw - 2rem)) !important;
	padding: 0.6rem 1.1rem !important;
	border: 1px solid var(--wp--preset--color--gold) !important;
	background: var(--wp--preset--color--white);
	box-shadow: 0 12px 28px rgba(15, 59, 44, 0.16);
}
.hd-header-search.wp-block-search__searchfield-hidden .wp-block-search__input { display: none; }
@media (max-width: 781px) {
	.hd-header { position: relative; }
	.hd-header > .alignwide,
	.hd-header-tools,
	.hd-header-search { position: static; }
	.hd-header-search .wp-block-search__input {
		top: calc(100% + 0.25rem);
		inset-inline: 1rem;
		width: auto !important;
	}
}


/* Phone menu: full-screen cream sheet, large links with dividers, button at the bottom. */
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--cream);
	padding: 1.25rem 1.5rem 2rem;
	border-block-start: 3px solid var(--wp--preset--color--gold);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch;
	padding-block-start: 3.5rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: stretch;
	gap: 0;
	width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:not(.hd-nav-cta) > .wp-block-navigation-item__content {
	width: 100%;
	padding-block: 0.95rem;
	font-size: var(--wp--preset--font-size--medium);
	border-block-end: 1px solid var(--wp--preset--color--sand);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:not(.hd-nav-cta) > .wp-block-navigation-item__content::after { display: none; }
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--primary); font-weight: 600; }
.wp-block-navigation__responsive-container.is-menu-open .hd-nav-cta { margin-block-start: 1.5rem; }
.wp-block-navigation__responsive-container.is-menu-open .hd-nav-cta > .wp-block-navigation-item__content {
	width: 100%;
	justify-content: center;
	padding-block: 0.85rem;
	font-size: var(--wp--preset--font-size--base);
}
.wp-block-navigation__responsive-container-close {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--wp--preset--color--parchment);
}

/* Labels */
.hd-eyebrow,
.hd-meta {
	font-size: 0.875rem;
	font-weight: 500;
	margin: 0;
}
.hd-eyebrow { color: var(--wp--preset--color--gold); letter-spacing: 0; }
.hd-meta { color: var(--wp--preset--color--gold-dark); }

/* Section titles: short gold rule under the heading. */
.hd-section-title { margin-block: 0 0.75rem; }
.hd-section-title::after {
	content: "";
	display: block;
	width: 3.5rem;
	height: 3px;
	margin-block-start: 0.6rem;
	background: var(--wp--preset--color--gold);
	border-radius: 2px;
}
.hd-section-intro { color: var(--wp--preset--color--muted); max-width: 60ch; margin-block: 0 2rem; }
.hd-more { margin-block-start: 2rem; }

/* Hero */
.hd-hero { position: relative; padding-block-end: calc(clamp(2.5rem, 6vw, 4.5rem) + clamp(48px, 7vw, 96px)); }
.hd-hero {
	/* Gold frieze along the top edge, right under the header: eight-point
	   stars between two gold rules, like a band on a mosque wall or a
	   manuscript page. It repeats the faint star lattice of the hero. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='14' viewBox='0 0 32 14'%3E%3Cpath d='M0 .6h32M0 13.4h32' stroke='%23C9A227' stroke-width='1.2'/%3E%3Cg transform='translate(16 7)' fill='none' stroke='%23C9A227' stroke-width='1.1'%3E%3Crect x='-4.2' y='-4.2' width='8.4' height='8.4'/%3E%3Crect x='-4.2' y='-4.2' width='8.4' height='8.4' transform='rotate(45)'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-position: center top;
	background-size: 32px 14px;
}
/* The frieze replaces the header's bottom line on the home page. */
.wp-site-blocks:has(> main > .hd-hero:first-child) > header:not(.is-scrolled) { border-block-end-color: transparent; }
.hd-hero::after {
	/* Cloud-soft edge into the cream section below: a faint back wave for depth,
	   a solid cream front wave, and a thin gold thread along the crest. */
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: -2px;
	height: calc(clamp(48px, 7vw, 96px) + 2px);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 46C160 18 300 18 450 40S760 78 920 58 1220 6 1440 30V100H0Z' fill='%23FAF7F0' fill-opacity='.18'/%3E%3Cpath d='M0 62C180 34 330 40 480 58S800 92 980 72 1260 34 1440 52V100H0Z' fill='%23FAF7F0'/%3E%3Cpath d='M0 62C180 34 330 40 480 58S800 92 980 72 1260 34 1440 52' fill='none' stroke='%23C9A227' stroke-width='2' stroke-opacity='.85' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat center bottom / 100% 100%;
	pointer-events: none;
}
.hd-hero::before {
	/* Faint eight-point star lattice, a quiet nod to Islamic geometry. */
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0.07;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23C9A227' stroke-width='1.2'%3E%3Crect x='20' y='20' width='24' height='24'/%3E%3Crect x='20' y='20' width='24' height='24' transform='rotate(45 32 32)'/%3E%3C/g%3E%3C/svg%3E");
	pointer-events: none;
}
.hd-hero-inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: center;
}
@media (min-width: 900px) {
	.hd-hero-inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}
.hd-hero-inner > * { margin-block: 0; }
/* The wave already gives room: the section right after the hero starts closer. */
.hd-hero + .hd-section { padding-block-start: clamp(1rem, 3vw, 2rem); }
.hd-hero .wp-block-heading { color: var(--wp--preset--color--cream); text-wrap: balance; margin-block: 0.75rem 1rem; }
.hd-hero-lead { color: #D9E4DE; font-size: var(--wp--preset--font-size--medium); max-width: 48ch; }

/* Hero stats: big gold figure over a small label, split by thin gold rules. */
.hd-stats {
	list-style: none;
	padding: 0;
	margin-block: 1.75rem 2rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 0;
}
.hd-stats li {
	display: flex;
	flex-direction: column;
	padding-inline: 1.25rem;
	border-inline-start: 1px solid rgba(201, 162, 39, 0.45);
}
.hd-stats li:first-child { padding-inline-start: 0; border-inline-start: 0; }
.hd-stats strong {
	font-family: var(--wp--preset--font-family--amiri);
	font-weight: 700;
	font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
	line-height: 1.2;
	color: var(--wp--preset--color--gold);
}
.hd-stats span { color: #CFDCD5; font-size: 0.9375rem; }

/* Hero side: three small question-titled lesson cards, search shortcuts, explore link. */
.hd-hero-side { display: flex; flex-direction: column; gap: 1rem; }
.hd-side-title { margin: 0; color: var(--wp--preset--color--gold); font-weight: 600; font-size: 0.9375rem; }
.hd-mini-lessons { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.hd-mini {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.6rem;
	padding-inline-end: 1rem;
	background: rgba(250, 247, 240, 0.06);
	border: 1px solid rgba(201, 162, 39, 0.25);
	border-radius: 12px;
	/* Enter one after another, then a gold glow passes from card to card. */
	animation:
		hd-mini-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both,
		hd-mini-glow 9s ease-in-out infinite;
	animation-delay: calc(var(--i, 0) * 0.15s), calc(1s + var(--i, 0) * 3s);
	transition: background 0.2s ease, translate 0.2s ease;
}
.hd-mini:hover { background: rgba(250, 247, 240, 0.12); translate: -4px 0; }
[dir="ltr"] .hd-mini:hover { translate: 4px 0; }
.hd-mini-thumb {
	position: relative;
	flex-shrink: 0;
	width: 7.5rem;
	aspect-ratio: 16 / 9;
	border-radius: 8px;
	overflow: hidden;
	background: #0B2A20;
}
.hd-mini-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hd-mini-thumb .hd-play { inset-block-end: auto; inset-inline-start: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1.9rem; height: 1.9rem; }
.hd-mini-thumb .hd-play::before { border-width: 5px 0 5px 8px; }
.hd-mini-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.hd-mini .hd-meta { color: var(--wp--preset--color--gold); font-size: 0.8125rem; }
.hd-mini a {
	color: var(--wp--preset--color--cream);
	text-decoration: none;
	font-weight: 500;
	font-size: 0.9375rem;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.hd-mini a::after { content: ""; position: absolute; inset: 0; }
.hd-mini:hover a { color: var(--wp--preset--color--white); }
@keyframes hd-mini-in {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}
@keyframes hd-mini-glow {
	0%, 30%, 100% { border-color: rgba(201, 162, 39, 0.25); box-shadow: none; }
	10%, 20% { border-color: rgba(201, 162, 39, 0.9); box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.5), 0 8px 24px rgba(201, 162, 39, 0.18); }
}

/* Search shortcuts */
.hd-topics { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-block-start: 0.25rem; }
.hd-topics-label { display: inline-flex; align-items: center; gap: 0.35rem; color: #CFDCD5; font-size: 0.875rem; margin-inline-end: 0.25rem; }
.hd-topics-label svg { color: var(--wp--preset--color--gold); }
.hd-chip {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0.2rem 0.85rem;
	border-radius: 999px;
	border: 1px solid rgba(201, 162, 39, 0.5);
	color: var(--wp--preset--color--cream);
	font-size: 0.875rem;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}
.hd-chip:hover { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--ink); }

/* Explore every lesson */
.hd-explore {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	align-self: flex-start;
	min-height: 44px;
	color: var(--wp--preset--color--gold);
	font-weight: 600;
	text-decoration: none;
}
.hd-explore-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: rgba(201, 162, 39, 0.15);
	transition: transform 0.4s ease, background 0.2s ease;
}
.hd-explore:hover { color: var(--wp--preset--color--cream); }
.hd-explore:hover .hd-explore-icon { transform: rotate(90deg); background: var(--wp--preset--color--gold); color: var(--wp--preset--color--ink); }
.hd-btn-gold .wp-block-button__link { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--ink); }
.hd-btn-gold .wp-block-button__link:hover { background: var(--wp--preset--color--cream); color: var(--wp--preset--color--ink); }
.hd-hero .is-style-outline .wp-block-button__link {
	color: var(--wp--preset--color--cream);
	border: 2px solid currentColor;
	background: transparent;
}
.hd-hero .is-style-outline .wp-block-button__link:hover { background: rgba(250, 247, 240, 0.12); }

/* Cards: one link per card, stretched over the whole card for a large tap target. */
.hd-card {
	position: relative;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: var(--hd-radius);
	box-shadow: var(--hd-shadow);
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.hd-card:hover { box-shadow: var(--hd-shadow-hover); transform: translateY(-2px); border-color: var(--wp--preset--color--gold); }
.hd-card a::after { content: ""; position: absolute; inset: 0; }

/* Course categories */
.hd-cats {
	list-style: none;
	padding: 0;
	margin: 1.5rem 0 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	gap: 1rem;
}
.hd-cat {
	padding: 1.1rem 1.25rem;
	display: flex;
	align-items: center;
	gap: 1rem;
}
.hd-cat-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;
	background: var(--wp--preset--color--parchment);
	color: var(--wp--preset--color--primary);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--sand);
	transition: background 0.2s ease, color 0.2s ease;
}
.hd-cat:hover .hd-cat-icon { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--gold); box-shadow: none; }
.hd-cat-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.hd-cat a {
	font-family: var(--wp--preset--font-family--amiri);
	font-weight: 700;
	font-size: 1.375rem;
	line-height: 1.4;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

/* Course grid (Query Loop) and post grid */
.wp-block-post-template.hd-courses > li,
.wp-block-post-template.hd-posts > li {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: var(--hd-radius);
	box-shadow: var(--hd-shadow);
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.wp-block-post-template.hd-courses > li:hover,
.wp-block-post-template.hd-posts > li:hover { box-shadow: var(--hd-shadow-hover); transform: translateY(-2px); border-color: var(--wp--preset--color--gold); }
.wp-block-post-template :where(.hd-courses, .hd-posts) .wp-block-post-featured-image,
.hd-courses .wp-block-post-featured-image,
.hd-posts .wp-block-post-featured-image { margin: 0; }
.hd-courses .wp-block-post-featured-image img,
.hd-posts .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hd-courses .wp-block-post-title,
.hd-posts .wp-block-post-title { font-size: 1.3125rem; margin: 0; padding-inline: 1.1rem; }
.hd-courses .wp-block-post-title { padding-block-end: 1.1rem; }
.hd-courses .wp-block-post-title a,
.hd-posts .wp-block-post-title a { color: var(--wp--preset--color--ink); text-decoration: none; }
.hd-courses .wp-block-post-title a::after,
.hd-posts .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; }
.hd-posts .wp-block-post-excerpt { margin: 0; padding: 0 1.1rem 1.1rem; }

/* Latest lessons: a dark "screening room" band. A cloud-soft wave joins it to the
   cream section above; the scholars' arcade rises into its lower edge. */
.hd-rail-band {
	--hd-wave-h: clamp(40px, 6vw, 84px);
	position: relative;
	padding-block: calc(clamp(2.5rem, 6vw, 4.5rem) + var(--hd-wave-h)) calc(clamp(2.5rem, 6vw, 4.5rem) + 2.5rem);
}
.hd-rail-band::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	height: calc(var(--hd-wave-h) + 2px);
	pointer-events: none;
	top: -2px;
	transform: scaleY(-1);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 46C160 18 300 18 450 40S760 78 920 58 1220 6 1440 30V100H0Z' fill='%23FAF7F0' fill-opacity='.18'/%3E%3Cpath d='M0 62C180 34 330 40 480 58S800 92 980 72 1260 34 1440 52V100H0Z' fill='%23FAF7F0'/%3E%3Cpath d='M0 62C180 34 330 40 480 58S800 92 980 72 1260 34 1440 52' fill='none' stroke='%23C9A227' stroke-width='2' stroke-opacity='.85' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.hd-rail-band > * { position: relative; z-index: 1; }
.hd-rail-band .hd-section-title { color: var(--wp--preset--color--cream); }
.hd-rail-band .hd-section-intro { color: #CFDCD5; }

/* Arrow buttons */
.hd-rail-nav { display: flex; gap: 0.5rem; }
.hd-rail-nav[hidden] { display: none; }
.hd-rail-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(201, 162, 39, 0.55);
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--gold);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.hd-rail-btn:hover:not(:disabled) { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--ink); }
.hd-rail-btn:disabled { opacity: 0.3; cursor: default; }

/* The rail: native horizontal scroller with snap points. */
.hd-rail {
	list-style: none;
	margin: 0;
	padding: 0 0 0.9rem;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 78%;
	gap: 1.25rem;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	scrollbar-color: rgba(201, 162, 39, 0.6) transparent;
}
@media (min-width: 600px) { .hd-rail { grid-auto-columns: calc((100% - 1.25rem) / 2.15); } }
@media (min-width: 900px) { .hd-rail { grid-auto-columns: calc((100% - 2 * 1.25rem) / 3); } }
@media (min-width: 1150px) { .hd-rail { grid-auto-columns: calc((100% - 3 * 1.25rem) / 4); } }
.hd-rail:focus-visible { outline: 3px solid var(--wp--preset--color--gold); outline-offset: 4px; }
.hd-rail-card {
	position: relative;
	display: flex;
	flex-direction: column;
	scroll-snap-align: start;
	background: rgba(250, 247, 240, 0.05);
	border: 1px solid rgba(201, 162, 39, 0.22);
	border-radius: 12px;
	overflow: hidden;
	transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.hd-rail-card:hover { background: rgba(250, 247, 240, 0.09); border-color: var(--wp--preset--color--gold); transform: translateY(-3px); }
.hd-rail-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #0B2A20; }
.hd-rail-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s ease; }
.hd-rail-card:hover .hd-rail-thumb img { transform: scale(1.05); }
.hd-rail-play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;
	background: rgba(201, 162, 39, 0.92);
	box-shadow: 0 0 0 6px rgba(201, 162, 39, 0.25);
	transform: translate(-50%, -50%) scale(0.8);
	opacity: 0;
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.hd-rail-play::before {
	/* Play triangle always points right, whatever the text direction. */
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 8px 0 8px 13px;
	border-color: transparent transparent transparent var(--wp--preset--color--ink);
}
.hd-rail-card:hover .hd-rail-play,
.hd-rail-card:focus-within .hd-rail-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.hd-rail-new {
	position: absolute;
	top: 0.6rem;
	inset-inline-start: 0.6rem;
	padding: 0.1rem 0.6rem;
	border-radius: 999px;
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
	font-size: 0.75rem;
	font-weight: 700;
}
.hd-rail-len {
	position: absolute;
	bottom: 0.6rem;
	inset-inline-end: 0.6rem;
	padding: 0.05rem 0.45rem;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.78);
	color: var(--wp--preset--color--white);
	font-size: 0.75rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}
.hd-rail-body { flex: 1; display: flex; flex-direction: column; gap: 0.35rem; padding: 0.9rem 1.05rem 1.05rem; }
.hd-rail-card .hd-meta { color: var(--wp--preset--color--gold); font-size: 0.8125rem; }
.hd-rail-card h3 {
	margin: 0;
	font-family: var(--wp--preset--font-family--plex-arabic);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.65;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.hd-rail-card h3 a { color: var(--wp--preset--color--cream); text-decoration: none; }
.hd-rail-card h3 a::after { content: ""; position: absolute; inset: 0; }
.hd-rail-card time { margin-block-start: auto; padding-block-start: 0.25rem; color: #9FB5AA; font-size: 0.8125rem; }

/* Last card: explore every lesson. */
.hd-rail-all { border-style: dashed; border-color: rgba(201, 162, 39, 0.5); background: transparent; }
.hd-rail-all a {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 1.5rem;
	text-align: center;
	text-decoration: none;
	color: #CFDCD5;
	font-size: 0.875rem;
}
.hd-rail-all strong { color: var(--wp--preset--color--gold); font-size: 1.125rem; }
.hd-rail-all .hd-explore-icon { width: 3.5rem; height: 3.5rem; color: var(--wp--preset--color--gold); }
.hd-rail-all:hover .hd-explore-icon { transform: rotate(90deg); background: var(--wp--preset--color--gold); color: var(--wp--preset--color--ink); }

/* Small play mark, used on the hero lesson cards. */
.hd-play {
	position: absolute;
	inset-block-end: 0.75rem;
	inset-inline-start: 0.75rem;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: rgba(15, 59, 44, 0.85);
}
.hd-play::before {
	/* Play triangle always points right, whatever the text direction. */
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 7px 0 7px 11px;
	border-color: transparent transparent transparent var(--wp--preset--color--gold);
}

/* Dome edge: the courses section rises into the section above as a shallow
   arch with a gold rim, and a gold eight-point star sits on the crest. */
.hd-dome {
	--hd-dome-h: clamp(30px, 4.5vw, 60px);
	position: relative;
	overflow: visible;
	padding-block-start: calc(clamp(2.5rem, 6vw, 4.5rem) + 0.5rem);
}
.hd-dome::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: calc(-1 * var(--hd-dome-h) + 1px);
	height: var(--hd-dome-h);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 62' preserveAspectRatio='none'%3E%3Cpath d='M0 62C360-18 1080-18 1440 62Z' fill='%23F3EDE0'/%3E%3Cpath d='M0 62C360-18 1080-18 1440 62' fill='none' stroke='%23C9A227' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat center bottom / 100% 100%;
	pointer-events: none;
}
.hd-dome::after {
	content: "";
	position: absolute;
	left: 50%;
	top: calc(-1 * var(--hd-dome-h));
	width: 34px;
	height: 34px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--wp--preset--color--parchment) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'%3E%3Cg fill='%23C9A227'%3E%3Crect x='-6' y='-6' width='12' height='12'/%3E%3Crect x='-6' y='-6' width='12' height='12' transform='rotate(45)'/%3E%3C/g%3E%3Ccircle r='2.6' fill='%23F3EDE0'/%3E%3C/svg%3E") no-repeat center / 22px 22px;
	box-shadow: 0 0 0 2px var(--wp--preset--color--gold), 0 0 0 6px var(--wp--preset--color--parchment);
	pointer-events: none;
}

/* Section head: title and intro on one side, "all courses" on the other. */
.hd-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 0.5rem 2rem;
	margin-block-end: 2rem;
}
.hd-section-head .hd-section-intro { margin-block-end: 0; }
.hd-head-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.hd-head-link:hover { color: var(--wp--preset--color--ink); text-decoration: underline; }
.hd-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.75rem;
	height: 1.75rem;
	padding-inline: 0.45rem;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	font-size: 0.8125rem;
}

/* Course cards */
.hd-course-grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
	gap: 1.25rem;
}
.hd-course {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 12px;
	box-shadow: var(--hd-shadow);
	overflow: hidden;
	transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.hd-course:hover { box-shadow: var(--hd-shadow-hover); transform: translateY(-3px); border-color: var(--wp--preset--color--gold); }
.hd-course-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--wp--preset--color--ink); }
.hd-course-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s ease; }
.hd-course:hover .hd-course-media img { transform: scale(1.05); }
.hd-course-media::after {
	content: "";
	position: absolute;
	inset: 50% 0 0;
	background: linear-gradient(to top, rgba(15, 59, 44, 0.55), rgba(15, 59, 44, 0));
	pointer-events: none;
}
.hd-course-noimg { display: block; width: 100%; height: 100%; }
.hd-course-badge {
	position: absolute;
	z-index: 1;
	inset-block-end: 0.65rem;
	inset-inline-start: 0.65rem;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.2rem 0.7rem;
	border-radius: 999px;
	background: rgba(15, 59, 44, 0.9);
	color: var(--wp--preset--color--cream);
	font-size: 0.8125rem;
	font-weight: 600;
}
.hd-course-badge svg { color: var(--wp--preset--color--gold); }
.hd-course-body { flex: 1; display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem 1.15rem 1.15rem; }
.hd-course h3 { font-size: 1.3125rem; line-height: 1.45; margin: 0; }
.hd-course h3 a { color: var(--wp--preset--color--ink); text-decoration: none; }
.hd-course h3 a::after { content: ""; position: absolute; inset: 0; }
.hd-course-start {
	position: relative;
	z-index: 2;
	margin-block-start: auto;
	align-self: flex-start;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.hd-course-start::after { content: " ←"; }
.hd-course-start:hover { color: var(--wp--preset--color--ink); text-decoration: underline; }
.hd-course-start.is-muted { color: var(--wp--preset--color--muted); font-weight: 500; }
.hd-course-start.is-muted::after { content: none; }
.hd-course.is-soon .hd-course-media img { filter: grayscale(0.6); opacity: 0.8; }
.hd-course.is-soon .hd-course-badge { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--ink); }
/* The head link covers "all courses" on wide screens; the button stays for phones. */
@media (min-width: 782px) {
	.hd-dome .hd-more { display: none; }
}


/* Course filter: type chips and an in-place search box. */
.hd-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	margin-block: -0.5rem 1.75rem;
}
.hd-filter-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hd-filter-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.3rem 0.6rem 0.3rem 1rem;
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.hd-filter-chip span {
	min-width: 1.6rem;
	padding: 0.05rem 0.45rem;
	border-radius: 999px;
	background: var(--wp--preset--color--parchment);
	color: var(--wp--preset--color--gold-dark);
	font-size: 0.8125rem;
	font-weight: 600;
	text-align: center;
}
.hd-filter-chip:hover { border-color: var(--wp--preset--color--gold); }
.hd-filter-chip[aria-pressed="true"] { background: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--white); }
.hd-filter-chip[aria-pressed="true"] span { background: rgba(255, 255, 255, 0.18); color: var(--wp--preset--color--white); }
.hd-filter-search {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 16rem;
	max-width: 22rem;
	color: var(--wp--preset--color--muted);
}
.hd-filter-search svg { position: absolute; inset-inline-start: 0.95rem; pointer-events: none; }
.hd-filter-search input {
	width: 100%;
	min-height: 44px;
	padding-block: 0.5rem;
	padding-inline: 2.6rem 1rem;
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--text);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
}
.hd-filter-search input:focus { border-color: var(--wp--preset--color--primary); outline: 3px solid rgba(23, 105, 77, 0.2); outline-offset: 0; }
.hd-filter-empty { margin-block: 1.5rem 0; color: var(--wp--preset--color--muted); text-align: center; }
.hd-show-more {
	display: flex;
	margin: 2rem auto 0;
	min-height: 44px;
	padding: 0.6rem 1.6rem;
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--primary);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}
.hd-show-more:hover { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--white); }
/* The hidden attribute must win over the display values above. */
.hd-filter[hidden],
.hd-course[hidden],
.hd-show-more[hidden],
.hd-filter-empty[hidden] { display: none; }
@media (max-width: 600px) {
	.hd-filter-search { max-width: none; }
}
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}


/* Blog section: a small gold ornament (rule, star, rule) marks the top edge. */
.hd-blog { position: relative; }
.hd-blog::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 240px;
	height: 18px;
	transform: translate(-50%, -50%);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 18'%3E%3Cpath d='M0 9h100M140 9h100' stroke='%23C9A227' stroke-width='1.5'/%3E%3Ccircle cx='104' cy='9' r='1.8' fill='%23C9A227'/%3E%3Ccircle cx='136' cy='9' r='1.8' fill='%23C9A227'/%3E%3Cg transform='translate(120 9)' fill='%23C9A227'%3E%3Crect x='-5.5' y='-5.5' width='11' height='11'/%3E%3Crect x='-5.5' y='-5.5' width='11' height='11' transform='rotate(45)'/%3E%3C/g%3E%3Ccircle cx='120' cy='9' r='2.2' fill='%23FAF7F0'/%3E%3C/svg%3E") no-repeat center / contain;
	pointer-events: none;
}

/* Post cards */
.hd-posts-grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
	gap: 1.5rem;
}
.hd-post {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 14px;
	box-shadow: var(--hd-shadow);
	overflow: hidden;
	transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.hd-post:hover { box-shadow: var(--hd-shadow-hover); transform: translateY(-3px); border-color: var(--wp--preset--color--gold); }
.hd-post-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--wp--preset--color--parchment); }
.hd-post-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s ease; }
.hd-post:hover .hd-post-media img { transform: scale(1.04); }
.hd-post-noimg { display: block; width: 100%; height: 100%; }
.hd-post-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; padding: 1.25rem 1.4rem 1.4rem; }
.hd-post-cat {
	padding: 0.1rem 0.7rem;
	border-radius: 999px;
	background: var(--wp--preset--color--parchment);
	color: var(--wp--preset--color--gold-dark);
	font-size: 0.8125rem;
	font-weight: 600;
}
.hd-post h3 { font-size: 1.375rem; line-height: 1.45; margin: 0; }
.hd-post h3 a { color: var(--wp--preset--color--ink); text-decoration: none; }
.hd-post h3 a::after { content: ""; position: absolute; inset: 0; }
.hd-post-excerpt {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.hd-post-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; color: var(--wp--preset--color--muted); font-size: 0.875rem; }
.hd-post-more { margin-block-start: auto; padding-block-start: 0.25rem; font-weight: 600; font-size: 0.9375rem; color: var(--wp--preset--color--primary); }
.hd-post-more::after { content: " ←"; }
.hd-post:hover .hd-post-more { text-decoration: underline; }

/* One post only: a single wide card, image beside the text. */
.hd-posts-grid[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 782px) {
	.hd-posts-grid[data-count="1"] .hd-post { flex-direction: row; }
	.hd-posts-grid[data-count="1"] .hd-post-media { flex: 0 0 48%; aspect-ratio: auto; min-height: 20rem; }
	.hd-posts-grid[data-count="1"] .hd-post-body { justify-content: center; padding: 2rem 2.25rem; gap: 0.85rem; }
	.hd-posts-grid[data-count="1"] .hd-post h3 { font-size: var(--wp--preset--font-size--x-large); }
	.hd-posts-grid[data-count="1"] .hd-post-excerpt { -webkit-line-clamp: 4; font-size: var(--wp--preset--font-size--base); }
	.hd-posts-grid[data-count="1"] .hd-post-more { margin-block-start: 0.5rem; }
}


/* Scholars: portraits in a mihrab arch with a double gold rim. Photos come
   from different videos, so they share one calm green tone; the real
   colours return on hover. */
.hd-section-head--center { justify-content: center; text-align: center; }
.hd-section-head--center .hd-section-title::after { margin-inline: auto; }
.hd-section-head--center .hd-section-intro { margin-inline: auto; }
.hd-eyebrow--dark { color: var(--wp--preset--color--gold-dark); margin-block-end: 0.35rem; }
.hd-scholar-grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
	gap: 2.25rem 1.5rem;
}
.hd-scholar { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hd-scholar-photo {
	position: relative;
	width: 100%;
	max-width: 12.5rem;
	aspect-ratio: 4 / 5;
	margin-block-end: 1.1rem;
	border-radius: 999px 999px 14px 14px;
	overflow: hidden;
	background: var(--wp--preset--color--ink);
	box-shadow: 0 0 0 4px var(--wp--preset--color--white), 0 0 0 5.5px var(--wp--preset--color--gold), 0 14px 30px rgba(15, 59, 44, 0.16);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.hd-scholar-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: grayscale(1) contrast(1.06) brightness(1.04);
	transition: filter 0.45s ease, transform 0.6s ease;
}
.hd-scholar-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(23, 105, 77, 0.12), rgba(15, 59, 44, 0.6));
	mix-blend-mode: multiply;
	transition: opacity 0.45s ease;
	pointer-events: none;
}
.hd-scholar:hover .hd-scholar-photo,
.hd-scholar:focus-within .hd-scholar-photo {
	transform: translateY(-4px);
	box-shadow: 0 0 0 4px var(--wp--preset--color--white), 0 0 0 6px var(--wp--preset--color--gold), 0 0 0 12px rgba(201, 162, 39, 0.18), 0 20px 36px rgba(15, 59, 44, 0.2);
}
.hd-scholar:hover .hd-scholar-photo img,
.hd-scholar:focus-within .hd-scholar-photo img { filter: none; transform: scale(1.04); }
.hd-scholar:hover .hd-scholar-photo::after,
.hd-scholar:focus-within .hd-scholar-photo::after { opacity: 0; }
.hd-scholar h3 { margin: 0; font-size: 1.25rem; line-height: 1.45; }
.hd-scholar h3 a { color: var(--wp--preset--color--ink); text-decoration: none; }
.hd-scholar h3 a::after { content: ""; position: absolute; inset: 0; }
.hd-scholar:hover h3 a { color: var(--wp--preset--color--primary); }
.hd-scholar-rip { display: block; font-family: var(--wp--preset--font-family--plex-arabic); font-size: 0.8125rem; font-weight: 400; color: var(--wp--preset--color--muted); }
.hd-scholar-topic { margin: 0.3rem 0 0; color: var(--wp--preset--color--muted); font-size: 0.9375rem; line-height: 1.6; }
.hd-scholar-count { margin: 0.35rem 0 0; color: var(--wp--preset--color--gold-dark); font-size: 0.8125rem; font-weight: 600; }


/* Scholars: the section rises into the dark lessons band as a row of white
   Islamic arches with a gold rim, echoing the mihrab frames of the portraits.
   The arcade is drawn by this section and overlaps the band by 2px, so no
   hairline can show between them. */
.hd-scholars {
	--hd-arch-h: clamp(30px, 3.4vw, 44px);
	position: relative;
	padding-block-start: calc(clamp(2.5rem, 6vw, 4.5rem) + 0.5rem);
}
.hd-scholars::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: calc(-1 * var(--hd-arch-h) + 2px);
	height: var(--hd-arch-h);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Cpath d='M0 40V28C0 14 14 5 30 2C46 5 60 14 60 28V40Z' fill='%23FFFFFF'/%3E%3Cpath d='M0 28C0 14 14 5 30 2C46 5 60 14 60 28' fill='none' stroke='%23C9A227' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x center bottom / auto 100%;
	pointer-events: none;
}

/* About: parchment band; a soft white cloud with a gold thread hangs from
   the scholars section above. */
.hd-about {
	--hd-about-cloud: clamp(48px, 7vw, 96px);
	position: relative;
	padding-block-start: calc(clamp(2.5rem, 6vw, 4.5rem) + var(--hd-about-cloud) * 0.7);
}
.hd-about::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: -2px;
	height: calc(var(--hd-about-cloud) + 2px);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='%23FFFFFF' fill-opacity='.35' d='M0 0H1440V70A120 50 0 0 1 1210 90 130 54 0 0 1 960 96 110 48 0 0 1 750 90 140 58 0 0 1 480 98 120 50 0 0 1 250 90 120 48 0 0 1 0 84Z'/%3E%3Cpath fill='%23FFFFFF' d='M0 0H1440V52A90 40 0 0 1 1290 70 120 52 0 0 1 1080 66 100 44 0 0 1 900 78 130 56 0 0 1 680 70 110 46 0 0 1 480 80 120 50 0 0 1 270 68 100 44 0 0 1 90 74 80 40 0 0 1 0 60Z'/%3E%3Cpath fill='none' stroke='%23C9A227' stroke-width='2' vector-effect='non-scaling-stroke' d='M1440 52A90 40 0 0 1 1290 70 120 52 0 0 1 1080 66 100 44 0 0 1 900 78 130 56 0 0 1 680 70 110 46 0 0 1 480 80 120 50 0 0 1 270 68 100 44 0 0 1 90 74 80 40 0 0 1 0 60'/%3E%3C/svg%3E") no-repeat center top / 100% 100%;
	pointer-events: none;
}
.hd-about > * { position: relative; z-index: 1; }

/* About strip */
.hd-about-box {
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: var(--hd-radius);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	background: var(--wp--preset--color--white);
	box-shadow: var(--hd-shadow);
}
.hd-about-box > :first-child { margin-block-start: 0; }

/* Article furniture */
.hd-post-meta { gap: 0.5rem 1rem; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }
.wp-block-post-content h2 { margin-block-start: 2.5rem; scroll-margin-block-start: 5rem; }
.wp-block-post-content h3 { margin-block-start: 2rem; }
.wp-block-post-content img { height: auto; }
.wp-block-post-content figcaption { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }

/* Article page: category chip above the title, byline with the team mark,
   and category chips to keep reading at the end. */
.hd-post-cats { margin-block-end: -0.5rem; }
.hd-post-cats a {
	display: inline-block;
	padding: 0.15rem 0.85rem;
	border-radius: 999px;
	background: var(--wp--preset--color--parchment);
	color: var(--wp--preset--color--gold-dark);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}
.hd-post-cats a:hover { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--ink); }
.hd-post-cats .wp-block-post-terms__separator { display: none; }
.hd-byline {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding-block: 1rem;
	border-block: 1px solid var(--wp--preset--color--sand);
}
.hd-byline-mark {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	padding: 4px;
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	box-shadow: 0 0 0 1.5px var(--wp--preset--color--gold);
}
.hd-byline-text { display: flex; flex-direction: column; gap: 0.15rem; }
.hd-byline-author { font-weight: 600; color: var(--wp--preset--color--ink); }
.hd-byline-author a { color: var(--wp--preset--color--primary); text-decoration: none; }
.hd-byline-author a:hover { text-decoration: underline; }
.hd-byline-dates { display: flex; flex-wrap: wrap; gap: 0.15rem 0.5rem; color: var(--wp--preset--color--muted); font-size: 0.875rem; }

/* Category chips (blog page, category pages, end of article). */
.hd-cat-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block: 0.5rem 2rem; }
.hd-cat-chips a {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 40px;
	padding: 0.25rem 0.55rem 0.25rem 1rem;
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.hd-cat-chips a span {
	min-width: 1.5rem;
	padding: 0 0.4rem;
	border-radius: 999px;
	background: var(--wp--preset--color--parchment);
	color: var(--wp--preset--color--gold-dark);
	font-size: 0.8125rem;
	font-weight: 600;
	text-align: center;
}
.hd-cat-chips a:hover { border-color: var(--wp--preset--color--gold); }
.hd-cat-chips a[aria-current="page"] { background: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--white); }
.hd-cat-chips a[aria-current="page"] span { background: rgba(255, 255, 255, 0.18); color: var(--wp--preset--color--white); }
.hd-post-end {
	margin-block-start: 3rem;
	padding-block-start: 2rem;
	border-block-start: 1px solid var(--wp--preset--color--sand);
}
.hd-post-end-title { font-size: var(--wp--preset--font-size--medium); margin-block-end: 1rem; }
.hd-post-end .hd-cat-chips { margin-block-end: 0; }


/* Buttons: outline style on light surfaces */
.is-style-outline > .wp-block-button__link:not(.has-text-color) { color: var(--wp--preset--color--primary); border: 2px solid currentColor; background: transparent; }
.is-style-outline > .wp-block-button__link:not(.has-text-color):hover { background: var(--wp--preset--color--parchment); }

/* Footer: a cloud edge hangs from the section above (it takes that section's
   colour: white under the home page's last section, cream elsewhere), a gold
   thread runs along it, and the site emblem sits in a medallion on the crest.
   The dark band carries the faint star lattice of the hero. */
.hd-footer {
	--hd-cloud-h: clamp(64px, 9vw, 120px);
	position: relative;
	padding-block: calc(var(--hd-cloud-h) + 4.5rem) 1.5rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23C9A227' stroke-opacity='.07' stroke-width='1.2'%3E%3Crect x='20' y='20' width='24' height='24'/%3E%3Crect x='20' y='20' width='24' height='24' transform='rotate(45 32 32)'/%3E%3C/g%3E%3C/svg%3E");
}
.hd-cloud {
	position: absolute;
	inset-inline: 0;
	top: -1px;
	height: var(--hd-cloud-h);
	color: var(--wp--preset--color--cream);
	pointer-events: none;
}
.wp-site-blocks:has(.hd-about) .hd-cloud { color: var(--wp--preset--color--parchment); }
.hd-cloud svg { display: block; width: 100%; height: 100%; }
.hd-footer-medal {
	position: absolute;
	z-index: 2;
	left: 50%;
	top: calc(var(--hd-cloud-h) * 0.62);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: var(--wp--preset--color--cream);
	box-shadow: 0 0 0 3px var(--wp--preset--color--gold), 0 0 0 10px rgba(201, 162, 39, 0.16), 0 12px 28px rgba(0, 0, 0, 0.3);
	transform: translate(-50%, -50%);
	transition: transform 0.3s ease;
}
.hd-footer-medal img { width: 58px; height: 58px; display: block; }
.hd-footer-medal:hover { transform: translate(-50%, -50%) scale(1.06); }

.hd-footer p { color: #CFDCD5; }
.hd-footer a { color: #E6EEE9; text-decoration: none; }
.hd-footer a:hover { color: var(--wp--preset--color--gold); }
.hd-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }

.hd-footer-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2.5rem 2.5rem;
}
@media (min-width: 640px) { .hd-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .hd-footer-grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 0.9fr); } }

/* Brand column */
.hd-footer-mark {
	display: inline-block;
	font-family: var(--wp--preset--font-family--amiri);
	font-weight: 700;
	font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
	line-height: 1.3;
	color: var(--wp--preset--color--gold) !important;
}
.hd-footer-tagline { margin: 0.6rem 0 0; max-width: 38ch; line-height: 1.9; }
.hd-footer-stats { margin: 1rem 0 0; font-size: 0.9375rem; }
.hd-footer-stats strong { font-family: var(--wp--preset--font-family--amiri); font-size: 1.375rem; color: var(--wp--preset--color--gold); }
.hd-footer-search { position: relative; display: flex; margin-block-start: 1.25rem; max-width: 22rem; }
.hd-footer-search input {
	width: 100%;
	min-height: 46px;
	padding-block: 0.5rem;
	padding-inline: 1.1rem 3.25rem;
	border: 1px solid rgba(201, 162, 39, 0.45);
	border-radius: 999px;
	background: rgba(250, 247, 240, 0.07);
	color: var(--wp--preset--color--cream);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
}
.hd-footer-search input::placeholder { color: #9FB5AA; }
.hd-footer-search input:focus { outline: 3px solid rgba(201, 162, 39, 0.35); outline-offset: 0; border-color: var(--wp--preset--color--gold); }
.hd-footer-search button {
	position: absolute;
	inset-block: 4px;
	inset-inline-end: 4px;
	width: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
	cursor: pointer;
}
.hd-footer-search button:hover { background: var(--wp--preset--color--cream); }

/* Link columns */
.hd-footer-col h2 {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--plex-arabic);
	font-size: 1rem;
	font-weight: 600;
	color: var(--wp--preset--color--gold);
}
.hd-footer-col h2::after {
	content: "";
	display: block;
	width: 2rem;
	height: 2px;
	margin-block-start: 0.5rem;
	border-radius: 2px;
	background: rgba(201, 162, 39, 0.6);
}
.hd-footer-col a { display: inline-block; font-size: 0.9375rem; line-height: 1.6; transition: color 0.2s ease, translate 0.2s ease; }
.hd-footer-col a:hover { translate: -3px 0; }
.hd-footer-lessons a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 0.875rem;
}
.hd-footer-lessons li { padding-inline-start: 0.85rem; position: relative; }
.hd-footer-lessons li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.65em;
	width: 5px;
	height: 5px;
	transform: rotate(45deg);
	background: var(--wp--preset--color--gold);
}
.hd-footer-all { color: var(--wp--preset--color--gold) !important; font-weight: 600; }
.hd-footer-all::after { content: " ←"; }

/* Bottom bar */
.hd-footer-bottom {
	margin-block-start: 3rem;
	padding-block-start: 1.25rem;
	border-block-start: 1px solid rgba(201, 162, 39, 0.25);
}
.hd-footer-bottom p { margin: 0; font-size: 0.875rem; }
.hd-back-top {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(201, 162, 39, 0.6);
	color: var(--wp--preset--color--gold) !important;
	transition: background 0.2s ease, color 0.2s ease;
}
.hd-back-top:hover { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--ink) !important; }

/* Pagination and search */
.wp-block-query-pagination { gap: 1rem; font-size: var(--wp--preset--font-size--small); margin-block-start: 2.5rem; }
.wp-block-query-pagination a { color: var(--wp--preset--color--ink); font-weight: 600; }
.wp-block-query-pagination-numbers { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding-inline: 0.75rem;
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 8px;
	background: var(--wp--preset--color--white);
	text-decoration: none;
}
.wp-block-query-pagination .page-numbers.current { background: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--white); }
.wp-block-query-pagination .page-numbers.dots { border-color: transparent; background: none; min-width: auto; }
.wp-block-search__button { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--white); border: 0; border-radius: 8px; }
.wp-block-search__input { border: 1px solid var(--wp--preset--color--sand); border-radius: 8px; padding: 0.6rem 0.9rem; font: inherit; }

/* Tutor LMS: let course and lesson pages breathe inside the theme. */
.tutor-wrap.tutor-page-wrap { padding-block: clamp(1.5rem, 4vw, 3rem); }
.tutor-course-details-title,
.tutor-course-details-page h1 { font-family: var(--wp--preset--font-family--amiri); }

/* Tables in articles: scroll sideways on phones instead of overflowing. */
.wp-block-table { overflow-x: auto; }
.wp-block-table table { border-collapse: collapse; width: 100%; }
.wp-block-table th,
.wp-block-table td { border: 1px solid var(--wp--preset--color--sand); padding: 0.6rem 0.8rem; text-align: start; }
.wp-block-table thead th { background: var(--wp--preset--color--parchment); color: var(--wp--preset--color--ink); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	* { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
	.hd-card:hover,
	.wp-block-post-template > li:hover { transform: none; }
	.hd-mini:hover { translate: none; }
	.hd-course:hover { transform: none; }
	.hd-footer-medal:hover { transform: translate(-50%, -50%); }
	.hd-footer-col a:hover { translate: none; }
	.hd-scholar:hover .hd-scholar-photo,
	.hd-scholar:hover .hd-scholar-photo img,
	.hd-rail-card:hover,
	.hd-rail-card:hover .hd-rail-thumb img,
	.hd-post:hover,
	.hd-post:hover .hd-post-media img { transform: none; }
	.hd-course:hover .hd-course-media img { transform: none; }
	.hd-mini { animation: none; }
	.hd-explore:hover .hd-explore-icon { transform: none; }
}