/**
 * Asmae — homepage mockup pass (v2)
 *
 * Revision after client feedback: v1 compressed the page too tightly, the
 * ⵣ glyph rendered as a missing-glyph box (Cairo has no Tifinagh coverage —
 * fixed by loading Noto Sans Tifinagh, scoped here), the search shortcut
 * chips read as near-invisible, and the category cards were smaller than
 * the reference. This revision keeps the same architecture — one file,
 * loaded last, scoped to the homepage — and corrects those four things
 * plus general spacing.
 *
 * Two departures from the mockup remain, both explained to the client:
 * the hero photo is an honest illustrated placeholder (no rights to the
 * mockup's AI-generated photo, and a real photo cannot be fabricated —
 * swap it via the `asmae_hero_photo` filter or the ASMAE_HERO_PHOTO
 * constant); the stat figures are real counts read live from the
 * database, never the mockup's fabricated numbers.
 *
 * @package Asmae
 */

/* ==================================================================
   Hero
   ================================================================== */

.asmae-hero.asmae-hero--search {
	position: relative;
	background: linear-gradient(180deg, #f6f3ff 0%, #fbfaff 55%, #ffffff 100%);
	border-radius: 28px;
	padding: 0;
	overflow: visible;
	text-align: right;
	isolation: isolate;
}

.asmae-hero.asmae-hero--search::before {
	display: none;
}

/*
 * The photo is the hero's background image, not a boxed <img>. Left half
 * carries the photo full-bleed; a gradient layered above it fades to
 * solid lavender toward the text side, so the headline stays readable
 * over any photo without a fixed darkening box. Text sits in its own
 * half-width column so it never overlaps the face.
 */
.asmae-hero__inner {
	position: relative;
	min-height: 460px;
	overflow: hidden;

	background-image:
		linear-gradient(90deg, rgba(246,243,255,0) 0%, rgba(246,243,255,0.55) 46%, #f6f3ff 62%, #f6f3ff 100%),
		var(--asmae-hero-photo, none);
	background-repeat: no-repeat;
	background-position: left center;
}

.asmae-hero__copy {
	position: relative;
	z-index: 1;
	min-width: 0;
	padding: 80px 150px 100px 0;
}

.asmae-hero.asmae-hero--search .asmae-hero__headline {
	font-family: var(--asmae-font-display);
	font-weight: 800;
	font-size: clamp(2rem, 3.6vw, 2.75rem);
	line-height: 1.35;
	color: var(--asmae-ink-800);
	margin: 0 0 14px;
}

.asmae-hero.asmae-hero--search .asmae-hero__lede {
	font-size: 1.125rem;
	line-height: 1.9;
	color: var(--asmae-ink-600);
	max-width: 58ch;
	margin: 0 0 28px;
}

/* --- Stat bar: full-size cards, icons, readable -------------------- */

.asmae-stat-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.asmae-stat-bar__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	background: #ffffff;
	border: 1px solid var(--asmae-ink-100);
	border-radius: 18px;
	padding: 14px 20px;
	box-shadow: var(--asmae-e-card);
	min-width: 150px;
}


.asmae-stat-bar__value {
	display: block;
	font-family: var(--asmae-font-display);
	font-weight: 800;
	font-size: 1.2rem;
	color: var(--asmae-primary-600);
	font-variant-numeric: tabular-nums;
	line-height: 1.3;
}

.asmae-stat-bar__label {
	display: block;
	font-size: 0.8438rem;
	color: var(--asmae-ink-600);
}

/* ==================================================================
   Category grid — larger cards, 2 rows of 4
   ================================================================== */

.asmae-cta {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	max-width: var(--asmae-max);
	margin: 44px auto 0;
	background: none;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
}

.asmae-cta__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	background: #ffffff;
	border: 1px solid var(--asmae-ink-100);
	border-radius: 22px;
	padding: 26px 24px 22px;
	text-decoration: none;
	box-shadow: var(--asmae-e-card);
	transition: box-shadow 160ms ease, transform 160ms ease, border-color 160ms ease;
	min-height: 168px;
}

.asmae-cta__item::before {
	display: none;
}

.asmae-cta__item:hover,
.asmae-cta__item:focus-visible {
	box-shadow: var(--asmae-e-card-hover);
	border-color: transparent;
	transform: translateY(-3px);
}

.asmae-cta__icon {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	margin-bottom: 14px;
	flex: none;
}

.asmae-cta__icon svg {
	width: 26px;
	height: 26px;
}

/* The two custom glyphs render as text at icon scale, and the Tifinagh
   character needs its own font — Cairo has no coverage for that block. */
.asmae-cta__glyph {
	font-size: 1.7rem;
	font-weight: 800;
	line-height: 1;
}

.asmae-cta__glyph[lang="zgh"] {
	font-family: "Noto Sans Tifinagh", sans-serif;
}

.asmae-cta__item--girl    .asmae-cta__icon { background: var(--asmae-cat-girl-bg);    color: var(--asmae-cat-girl-fg); }
.asmae-cta__item--boy     .asmae-cta__icon { background: var(--asmae-cat-boy-bg);     color: var(--asmae-cat-boy-fg); }
.asmae-cta__item--islam   .asmae-cta__icon { background: var(--asmae-cat-islam-bg);   color: var(--asmae-cat-islam-fg); }
.asmae-cta__item--foreign .asmae-cta__icon { background: var(--asmae-cat-foreign-bg); color: var(--asmae-cat-foreign-fg); }
.asmae-cta__item--arabic  .asmae-cta__icon { background: var(--asmae-cat-arabic-bg);  color: var(--asmae-cat-arabic-fg); }
.asmae-cta__item--rare    .asmae-cta__icon { background: var(--asmae-cat-rare-bg);    color: var(--asmae-cat-rare-fg); }
.asmae-cta__item--amazigh .asmae-cta__icon { background: var(--asmae-cat-amazigh-bg); color: var(--asmae-cat-amazigh-fg); }

.asmae-cta__label {
	font-family: var(--asmae-font-display);
	font-weight: 700;
	font-size: 1.1875rem;
	color: var(--asmae-ink-800);
}

.asmae-cta__desc {
	font-size: 0.9063rem;
	color: var(--asmae-ink-600);
	line-height: 1.7;
}

.asmae-cta__count {
	margin-top: auto;
	padding-top: 10px;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--asmae-ink-400);
	font-variant-numeric: tabular-nums;
}

/* ==================================================================
   Search band
   ================================================================== */

.asmae-hero__search-band {
	margin: 40px auto 0;
	max-width: var(--asmae-max);
	background: mediumpurple;
	border-radius: 26px;
	padding: 38px 36px 32px;
	text-align: center;
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.asmae-hero__search-band::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0.06;
	background-image: radial-gradient(circle, #fff 1px, transparent 1px);
	background-size: 22px 22px;
	pointer-events: none;
}

.asmae-hero__search-inner {
	max-width: 640px;
	margin: 0 auto;
}

.asmae-hero__search-title {
	font-family: var(--asmae-font-display);
	font-weight: 800;
	font-size: 1.4rem;
	color: #fff;
	margin: 0 0 6px;
}

.asmae-hero__search-sub {
	font-size: 0.9688rem;
	color: rgba(255, 255, 255, 0.78);
	margin: 0 0 24px;
}

.asmae-suggest { position: relative; }

.asmae-hero__search-band .asmae-search {
	display: flex;
	align-items: center;
	background: #fff;
	border-radius: 999px;
	padding: 8px 8px 8px 8px;
	box-shadow: 0 14px 34px rgba(18, 15, 60, 0.3);
}

.asmae-hero__search-band .asmae-search__field {
	flex: 1;
	border: 0;
	background: transparent;
	padding: 14px 20px;
	font-size: 1.0625rem;
	color: var(--asmae-ink-800);
	outline: none;
}

.asmae-hero__search-band .asmae-search__field::placeholder {
	color: var(--asmae-ink-400);
}

.asmae-hero__search-band .asmae-search__submit {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--asmae-primary-600);
	color: #fff;
	border: 0;
	flex: none;
	cursor: pointer;
	transition: background-color 160ms ease;
}

.asmae-hero__search-band .asmae-search__submit:hover {
	background: var(--asmae-primary-700);
}

/*
 * Shortcut chips — the client's central complaint was that these were
 * near-invisible. Fixed with a solid white fill instead of a translucent
 * one, real contrast, and larger touch targets.
 */
.asmae-shortcuts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 22px;
}

.asmae-shortcut {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 20px;
	border-radius: 999px;
	background: #ffffff;
	color: var(--asmae-primary-700);
	font-size: 0.9063rem;
	font-weight: 700;
	text-decoration: none;
	border: 1px solid transparent;
	box-shadow: 0 2px 8px rgba(18, 15, 60, 0.18);
	transition: background-color 150ms ease, transform 150ms ease;
}

.asmae-shortcut:hover,
.asmae-shortcut:focus-visible {
	background: var(--asmae-primary-100);
	transform: translateY(-1px);
}

/* ==================================================================
   Letters
   ================================================================== */

.asmae-letters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	padding: 4px 0 8px;
}

.asmae-letter {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--asmae-ink-100);
	text-decoration: none;
	box-shadow: none;
}

.asmae-letter span:first-child {
	font-family: var(--asmae-font-display);
	font-weight: 700;
	font-size: 1.125rem;
	color: var(--asmae-ink-800);
}

.asmae-letter .asmae-count {
	font-size: 0.6563rem;
	color: var(--asmae-ink-400);
}

.asmae-letter:hover,
.asmae-letter:focus-visible {
	border-color: var(--asmae-primary-600);
	background: var(--asmae-primary-100);
}

.asmae-letter--more {
	width: auto;
	height: 56px;
	border-radius: 999px;
	padding: 0 24px;
	background: var(--asmae-ink-800);
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 600;
}

.asmae-letter--more:hover {
	background: var(--asmae-primary-600);
}

/* ==================================================================
   Three-panel row — origin / meaning / Quran
   ================================================================== */

.asmae-pair.asmae-pair--3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.asmae-pair.asmae-pair--3 > * {
	margin: 0;
}

.asmae-pair--3 .asmae-panel-block:nth-child(1) {
	background: var(--asmae-cat-foreign-bg);
	border-radius: 24px;
	padding: 28px;
}

.asmae-pair--3 .asmae-panel-block:nth-child(2) {
	background: #eaf1fd;
	border-radius: 24px;
	padding: 28px;
}

.asmae-pair--3 .asmae-band--green {
	border-radius: 24px;
	padding: 28px;
}

/* ==================================================================
   Smart tools — inert cards, "قريباً" badge, no dead links
   ================================================================== */

.asmae-tools {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
}

.asmae-tools__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	background: #fff;
	border: 1px solid var(--asmae-ink-100);
	border-radius: 20px;
	padding: 22px 20px;
	box-shadow: var(--asmae-e-card);
	opacity: 0.92;
}

.asmae-tools__icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 14px;
	background: var(--asmae-primary-100);
	color: var(--asmae-primary-600);
}

.asmae-tools__icon svg {
	width: 20px;
	height: 20px;
}

.asmae-tools__label {
	font-family: var(--asmae-font-display);
	font-weight: 700;
	font-size: 0.9688rem;
	color: var(--asmae-ink-800);
}

.asmae-tools__desc {
	font-size: 0.8125rem;
	color: var(--asmae-ink-600);
	line-height: 1.6;
}

.asmae-tools__soon {
	position: absolute;
	top: 14px;
	left: 14px;
	font-size: 0.625rem;
	font-weight: 700;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--asmae-ink-050);
	color: var(--asmae-ink-400);
}

/* ==================================================================
   Today's picks — gender badge
   ================================================================== */

.asmae-item {
	position: relative;
}

.asmae-item__badge {
	position: absolute;
	bottom: 16px;
	left: 16px;
	font-size: 0.6875rem;
	font-weight: 700;
	padding: 4px 12px;
	border-radius: 999px;
	pointer-events: none;
}

.asmae-item__badge--girl    { background: var(--asmae-cat-girl-bg); color: var(--asmae-cat-girl-fg); }
.asmae-item__badge--boy     { background: var(--asmae-cat-boy-bg);  color: var(--asmae-cat-boy-fg); }
.asmae-item__badge--unisex  { background: var(--asmae-ink-100);     color: var(--asmae-ink-600); }

/* ==================================================================
   General rhythm — the page must not read as compressed
   ================================================================== */

.asmae-ground {
	padding-block: 56px;
}

/* ==================================================================
   Responsive
   ================================================================== */

@media (max-width: 960px) {

	.asmae-hero.asmae-hero--search {
		padding: 40px 24px 36px;
	}

	/*
	 * Below 960px the photo becomes a tall band above the text rather than
	 * a side-by-side background: at narrower widths the two-layer gradient
	 * trick has too little horizontal room to fade before reaching the
	 * text, and the face gets covered. Stacking keeps the photo fully
	 * visible and the text fully legible instead of compromising both.
	 */
	.asmae-hero__inner {
		/* display:flex no longer set on the base rule (client change, round
		   4) — flex-direction/align-items below are inert without it and
		   were left over from before that change; removed. */
		min-height: 0;
		max-height: 600px; /* 9 */

		background-image:
			linear-gradient(180deg, rgba(246,243,255,0) 0%, rgba(246,243,255,0.65) 72%, #f6f3ff 92%, #f6f3ff 100%),
			var(--asmae-hero-photo, none);
		background-position: center top; /* 8 — single value, applies to both layers */
		background-size: cover, cover;
	}

	.asmae-hero__inner::after {
		content: "";
		display: block;
		padding-top: 62%; /* reserves the photo band's height in normal flow */
	}

	.asmae-hero__copy {
		width: 100%;
		max-width: none;
		text-align: center;
		padding: 0 24px 28px;
	}

	.asmae-hero__copy .asmae-hero__lede {
		margin-inline: auto;
	}

	.asmae-stat-bar {
		justify-content: center;
	}

	/* 9 — wide enough to read the value and label on one line without
	   the pill shrinking to an awkward width on a narrow screen. */
	.asmae-stat-bar__item {
		min-width: 200px;
	}

	.asmae-cta__intro {
		padding-inline: 20px;
	}

	.asmae-cta {
		grid-template-columns: repeat(2, 1fr);
	}

	.asmae-pair.asmae-pair--3 {
		grid-template-columns: 1fr;
	}

	.asmae-tools {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 640px) {

	/* 6 — outer hero padding removed entirely at phone width. */
	.asmae-hero.asmae-hero--search {
		padding: 0;
		border-radius: 22px;
	}

	/* 7 — the copy block's own top spacing at this width, since the outer
	   padding above no longer provides any. */
	.asmae-hero__copy {
		padding: 30px 0 0;
	}

	/* 10 — the lede sits directly over the photo at this width (no side
	   gradient fade at this size), so it needs its own contrast rather
	   than relying on the ground colour behind it. */
	.asmae-hero.asmae-hero--search .asmae-hero__lede {
		color: #000;
		text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8), 0 1px 12px rgba(255, 255, 255, 0.6);
	}

	.asmae-cta {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.asmae-cta__item {
		padding: 20px 16px;
		min-height: 148px;
	}

	.asmae-hero__search-band {
		padding: 26px 18px 22px;
		border-radius: 20px;
	}

	.asmae-shortcuts {
		gap: 8px;
	}

	.asmae-shortcut {
		padding: 0 14px;
		font-size: 0.8438rem;
	}

	.asmae-letters {
		gap: 8px;
	}

	.asmae-letter {
		width: 46px;
		height: 46px;
	}

	.asmae-tools {
		grid-template-columns: repeat(2, 1fr);
	}

	.asmae-ground {
		padding-block: 40px;
	}
}


/* ==================================================================
   Client feedback round 2 — appended, does not touch anything above
   ================================================================== */

/* --- Hero: full viewport width, not capped by the theme's content
   column. The inner grid still centres at var(--asmae-max). --------- */
.asmae-block.asmae-hero.asmae-hero--search {
	max-width: 100%;
	width: 100%;
}

/* --- Card gloss + gender badge: real separation so the badge never
   sits flush against the truncated meaning text. -------------------- */
.asmae-item__gloss {
	margin-bottom: 34px; /* clears the absolutely-positioned badge below */
}

.asmae-item__badge {
	bottom: 14px;
}

/* --- Chips: a visible ring, and the count becomes a true circle
   instead of trailing text — easier to scan at a glance. ------------ */
.asmae-chip {
	border-width: 1.5px;
	font-weight: 600;
}

.asmae-chip .asmae-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 5px;
	border: 1px solid currentColor;
	border-radius: 50%;
	opacity: 0.7;
	font-size: 0.6875rem;
}

/* --- The "more letters" button, kept for other templates that may
   still render it, forced to readable white text on its dark fill. -- */
.asmae-letter--more,
.asmae-letter--more span {
	color: #fff !important;
}

/* --- Letters: the empty (unpopulated) cells from the full 27-letter
   render, dimmed and inert rather than absent. ---------------------- */
.asmae-letter--empty {
	background: var(--asmae-ink-050);
	border-color: var(--asmae-ink-100);
	opacity: 0.4;
	cursor: default;
}

.asmae-letter--empty span {
	color: var(--asmae-ink-400);
}

/* --- Smart tools section removed from the page; its rules are kept
   dormant here in case it is reinstated later, but nothing on the
   page references .asmae-tools any more. ---------------------------- */


/* ==================================================================
   Client feedback round 3 — icon glyphs and 3-panel spacing
   ================================================================== */

/*
 * The 3-panel row was stretching every card to the height of its tallest
 * sibling (CSS Grid's default `align-items: stretch`), so a card with
 * fewer chips — origin, Quran — ended up with a large dead gap between its
 * last chip row and the "عرض ..." link at the bottom. Each card now sizes
 * to its own content instead.
 */
.asmae-pair.asmae-pair--3 {
	align-items: start;
}

.asmae-pair--3 .asmae-panel-block,
.asmae-pair--3 .asmae-band--green {
	height: auto;
}

/* Tighten the gap between the intro line and the chip row, and between
   the chips and the closing link — both were carrying the base spacing
   scale's largest step, oversized for a compact panel. */
.asmae-pair--3 .asmae-band__note {
	margin-bottom: var(--asmae-space-2);
}

.asmae-pair--3 .asmae-chips {
	gap: 6px;
}

.asmae-pair--3 .asmae-more {
	margin-top: var(--asmae-space-2);
}

.asmae-pair--3 .asmae-head {
	margin-bottom: var(--asmae-space-3);
}


/* ==================================================================
   Client feedback round 4
   ================================================================== */

/* 3 — mediumpurple on the two remaining primary buttons in the hero
   area, matching the search band's new colour. */
.asmae-block .asmae-featured__link,
.asmae-hero__search-band .asmae-search__submit {
	background: mediumpurple;
}

.asmae-block .asmae-featured__link:hover,
.asmae-hero__search-band .asmae-search__submit:hover {
	background: #8a6fc9; /* mediumpurple, one step darker for hover */
}

/* A visible line between the hero (ending in the search band) and the
   اسم اليوم card that follows it. */
.asmae-featured {
	border-top: 1px solid var(--asmae-ink-100);
	padding-top: 40px;
	margin-top: 8px;
}

/*
 * 4 — breathing room below the assurance strip. !important because the
 * plain rule above was being neutralised by CSS margin collapse: this is
 * the last element before the section boundary with no border/padding on
 * its wrapper, so its bottom margin was collapsing with the wrapper's own
 * edge instead of producing visible space — a specificity fight would not
 * have fixed that, forcing the margin to apply does.
 */
.asmae-assure {
	margin-bottom: 50px !important;
}

/* ==================================================================
   Client feedback round 5
   ================================================================== */

/* 2 — stat items become links; keep them visually identical to the
   static version, just with a hover cue so it reads as interactive. */
.asmae-stat-bar__link {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: inherit;
}

.asmae-stat-bar__item:has(.asmae-stat-bar__link) {
	padding: 0;
}

.asmae-stat-bar__item .asmae-stat-bar__link {
	padding: 14px 20px;
}

.asmae-stat-bar__link:hover .asmae-stat-bar__value,
.asmae-stat-bar__link:focus-visible .asmae-stat-bar__value {
	color: var(--asmae-primary-700);
}

.asmae-stat-bar__item:has(.asmae-stat-bar__link):hover {
	box-shadow: var(--asmae-e-card-hover);
	border-color: transparent;
}

/* 4 — heading and lede above the category grid, centred. */
.asmae-cta__intro {
	max-width: 640px;
	margin: 28px auto 28px;
	text-align: center;
}

.asmae-cta__title {
	font-family: var(--asmae-font-display);
	font-weight: 800;
	font-size: clamp(1.5rem, 2.6vw, 1.9rem);
	color: var(--asmae-ink-800);
	margin: 0 0 10px;
}

.asmae-cta__lede {
	font-size: 1rem;
	line-height: 1.85;
	color: var(--asmae-ink-600);
	margin: 0;
}