/*
 * Khayyiroon — the parts of "Quiet Editorial Luxury" that theme.json cannot express:
 * hover transitions, pseudo-elements, counters, and RTL-specific typography fixes.
 */

/* ---------------------------------------------------------------
   Arabic typography baseline
   Latin line-height metrics clip Arabic diacritics; 1.8–1.9 is the
   floor for comfortable Naskh reading at these sizes.
   --------------------------------------------------------------- */

:where(body) {
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

:where(.wp-block-post-content) p,
:where(.wp-block-post-content) li {
	line-height: var(--wp--custom--line-height--editorial);
}

/* Arabic-Indic numerals in running text would fight the Latin-digit UI,
   so figures stay tabular and aligned instead. */
:where(.wp-block-post-content) {
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------
   Editorial card  (.is-style-editorial-card on core/group)
   --------------------------------------------------------------- */

.wp-block-group.is-style-editorial-card {
	background: var(--wp--preset--color--surface-container-lowest);
	border: 1px solid var(--wp--preset--color--outline-variant);
	border-radius: var(--wp--custom--radius--xl);
	padding: var(--wp--preset--spacing--50);
	box-shadow: var(--wp--preset--shadow--tier-1);
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* The lift is deliberately larger than a hint. In a three-up grid every card
   looks alike, so a 2px nudge reads as a rendering wobble rather than an
   answer to "which one am I pointing at". focus-within is listed with hover so
   a keyboard arrives at the same card, not a flat one. */
.wp-block-group.is-style-editorial-card:hover,
.wp-block-group.is-style-editorial-card:focus-within {
	transform: translateY(-6px);
	border-color: rgba(15, 118, 110, 0.45);
	box-shadow: 0 18px 40px rgba(22, 29, 27, 0.12),
		0 2px 6px rgba(22, 29, 27, 0.06);
}

/* ---------------------------------------------------------------
   Virtue card — gold hairline on top, display-serif lead word
   --------------------------------------------------------------- */

.wp-block-group.is-style-virtue-card {
	background: var(--wp--preset--color--surface-container-lowest);
	border: 1px solid var(--wp--preset--color--outline-variant);
	border-top: 4px solid var(--wp--custom--prestige--gold);
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--40);
	height: 100%;
}

/* On the green band the cards need no border of their own: white against deep
   green is already an edge, and a grey hairline there reads as a seam.
   The colour is restated because the band sets a light text colour for its own
   headings, and the cards are white — they have to opt back out of it. */
.khayyiroon-band .wp-block-group.is-style-virtue-card {
	border-color: transparent;
	border-top-color: var(--wp--custom--prestige--gold);
	box-shadow: 0 14px 34px rgba(0, 32, 29, 0.22);
	color: var(--wp--preset--color--on-surface);
}

.wp-block-group.is-style-virtue-card :is(h2, h3, h4) {
	letter-spacing: -0.01em;
	margin-block: 0 0.25rem;
}

/* The lead word carries fatha/shadda marks, so it needs more leading than a
   numeral would, otherwise the diacritics collide with the line above. */
.wp-block-group.is-style-virtue-card .khayyiroon-virtue-word {
	line-height: 1.9;
	margin-block: 0 0.5rem;
}

/* ---------------------------------------------------------------
   Coloured band  (.khayyiroon-band)
   --------------------------------------------------------------- */

/* The brand green, brought up to a full surface. The page is a run of near-white
   panels and this is the one place in the middle that stops being paper; sand was
   tried here first and read as a faded patch rather than as colour. */
.khayyiroon-band {
	border-top: 3px solid var(--wp--custom--prestige--gold);
	border-radius: var(--wp--custom--radius--lg);
}

/* The lighter gold, not the metal one used for rules. At this size #c59d2a on the
   green sits too close to the ground and the heading reads as dimmed.
   Scoped through .entry-content on purpose: section headings are coloured by a
   rule of that shape further down this file, and a shorter selector here loses
   to it — the heading then comes out green on green and vanishes. */
.entry-content > .wp-block-group.khayyiroon-band > h2.wp-block-heading {
	color: var(--wp--preset--color--secondary-fixed);
}

/* The lead line and the hadith attribution. Opacity rather than a fixed grey —
   the band is a gradient, so a grey chosen for its top is wrong by its bottom. */
.khayyiroon-band > p {
	color: var(--wp--preset--color--on-primary);
	opacity: 0.78;
}

.khayyiroon-band > p:last-child {
	opacity: 0.58;
}

/* A centred line needs a measure or it runs the full width of the band and the
   eye loses where each line starts. A class rather than an inline max-width:
   the editor regenerates a block's HTML from its attributes and flags anything
   it did not put there, so an inline style it cannot account for would leave
   the block showing a recovery notice every time the page is opened. */
.khayyiroon-measure {
	max-width: 58ch;
	margin-inline: auto;
}

/* The filled green button disappears into a green band; the gold one is the only
   control on the page that has to be found, so it takes the warm colour. */
.khayyiroon-band .wp-block-button__link {
	font-weight: 700;
}

/* ---------------------------------------------------------------
   Numbered editorial list — right-aligned gold serif numerals
   --------------------------------------------------------------- */

ol.wp-block-list.is-style-editorial-numbered {
	list-style: none;
	counter-reset: khayyiroon-item;
	padding-inline-start: 0;
	/* auto, not 0 — the constrained layout centres the list as a block while its
	   own text stays start-aligned for reading. */
	margin-inline: auto;
}

/* The numeral is absolutely positioned rather than a grid column: a grid turns
   every child node of the <li> into its own cell, so any item containing inline
   markup (<strong>, <br>, <small>) would shatter across rows. */
ol.wp-block-list.is-style-editorial-numbered > li {
	counter-increment: khayyiroon-item;
	position: relative;
	padding-inline-start: 3.25rem;
	padding-block: var(--wp--preset--spacing--30);
	border-block-end: 1px solid var(--wp--preset--color--surface-container-low);
}

ol.wp-block-list.is-style-editorial-numbered > li:last-child {
	border-block-end: 0;
}

ol.wp-block-list.is-style-editorial-numbered > li::before {
	content: counter(khayyiroon-item, arabic-indic);
	position: absolute;
	inset-inline-start: 0;
	top: var(--wp--preset--spacing--30);
	width: 2.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--headline-sm);
	font-variant-numeric: tabular-nums;
	line-height: 1.5;
	color: var(--wp--custom--prestige--gold);
	text-align: start;
}

/* Hadith attribution under each item. */
ol.wp-block-list.is-style-editorial-numbered > li small {
	display: inline-block;
	margin-block-start: 0.375rem;
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--outline);
}

/* ---------------------------------------------------------------
   Qur'anic verse block
   --------------------------------------------------------------- */

/* Centred in the hero, so the gold rule sits on top rather than on one side —
   a side rule would read as an alignment cue and fight the centring. */
.wp-block-group.khayyiroon-ayah {
	max-width: 46ch;
	margin-inline: auto;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--preset--color--outline-variant);
	border-top: 2px solid var(--wp--custom--prestige--gold);
	border-radius: var(--wp--custom--radius--md);
	background: rgba(255, 255, 255, 0.55);
}

/* The verse needs 551px to sit on one line and 46ch left it 534, so it broke
   across two by seventeen pixels — and a verse broken mid-sentence reads as two
   fragments. Widened past the reading measure, which is the one place that is
   right to do it: this is scripture being quoted whole, not body text, and the
   line-length rules exist to protect paragraphs. Only on desktop; below 900px
   there is no width to give it and wrapping is the honest outcome. */
@media (min-width: 900px) {
	.wp-block-group.khayyiroon-ayah {
		max-width: 660px;
	}
}

/* Naskh is the only family here with full Arabic coverage, and the verse is
   fully vocalised — 2.3 leading keeps the fatha/sukun off the line above. */
.khayyiroon-ayah__text {
	font-family: var(--wp--preset--font-family--display);
	line-height: 2.3;
	color: var(--wp--preset--color--primary);
	margin-block: 0;
	text-wrap: pretty;
}

.khayyiroon-ayah__cite {
	margin-block: 0.75rem 0;
}

/* ---------------------------------------------------------------
   Chips — knowledge domain, endowment, neutral
   --------------------------------------------------------------- */

/* Solid, not an 8% wash. A chip at that tint is a stain on the card rather than
   a label on it; at full strength it reads as a deliberate mark and gives the
   page the small blocks of brand colour it was missing entirely. */
.khayyiroon-chip,
.is-style-domain-chip a,
.is-style-domain-chip .wp-block-post-terms__separator + a {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.3125rem 0.75rem;
	border-radius: var(--wp--custom--radius--full);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	line-height: 1.5;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	text-decoration: none;
	white-space: nowrap;
}

.is-style-domain-chip {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.is-style-domain-chip .wp-block-post-terms__separator {
	display: none;
}

.is-style-domain-chip a:hover {
	background: var(--wp--preset--color--primary-container);
	text-decoration: none;
}

.khayyiroon-chip--endowment {
	background: var(--wp--custom--prestige--gold-soft);
	color: #99751a;
	font-weight: 600;
}

.khayyiroon-chip--neutral {
	background: var(--wp--preset--color--surface-container-low);
	color: var(--wp--preset--color--on-surface-variant);
}

/* ---------------------------------------------------------------
   Search shell
   --------------------------------------------------------------- */

/* The hero search spans the column but should not run the full 1280px. */
.wp-block-group.khayyiroon-hero-search {
	max-width: 34rem;
}

.khayyiroon-header .wp-block-search {
	max-width: 260px;
}

/* The menu was set in the caption size and the lightest body weight, which in
   Arabic is the worst combination available: the script has no capitals to
   carry a small size, so short labels like «عن خَيِّرُونَ» turned to grey
   texture. Full body size, a heavier weight and the full-strength ink. */
.khayyiroon-nav .wp-block-navigation-item__content {
	font-weight: 600;
	color: var(--wp--preset--color--on-surface);
	text-decoration: none;
	padding-block: 0.25rem;
	/* The underline is drawn on the border rather than as text-decoration so it
	   sits clear of the descenders and the kasra, instead of cutting them. */
	border-bottom: 2px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.khayyiroon-nav .wp-block-navigation-item__content:hover,
.khayyiroon-nav .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--primary);
	border-bottom-color: var(--wp--custom--prestige--gold);
	text-decoration: none;
}

/* The current page names itself. Five links with nothing marked leaves the
   visitor to work out where they are from the heading alone. */
.khayyiroon-nav .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary);
	border-bottom-color: var(--wp--custom--prestige--gold);
}

/* Below WP's mobile breakpoint the logo, burger and search cannot share one
   nowrap row without overflowing the viewport. The hero search covers mobile. */
@media (max-width: 781px) {
	.khayyiroon-header .wp-block-search {
		display: none;
	}

	.khayyiroon-header .wp-block-site-logo img {
		width: 120px;
	}
}

.wp-block-search__inside-wrapper {
	border: 1px solid var(--wp--preset--color--outline-variant);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--surface-container-lowest);
	padding: 0.25rem;
	box-shadow: var(--wp--preset--shadow--tier-1);
}

.wp-block-search__inside-wrapper .wp-block-search__input {
	border: 0;
	box-shadow: none;
	background: transparent;
}

.wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--primary-container);
	box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.12);
}

.wp-block-search__input {
	border: 1px solid var(--wp--preset--color--outline-variant);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--surface-container-lowest);
	padding: 0.75rem 1rem;
	color: var(--wp--preset--color--on-surface);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wp-block-search__input::placeholder {
	color: #9ca3af;
}

.wp-block-search__input:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary-container);
	box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.12);
}

.wp-block-search__button {
	border-radius: var(--wp--custom--radius--md);
}

/* ---------------------------------------------------------------
   Pull quote — the gold hairline sits on the right in RTL
   --------------------------------------------------------------- */

/* Default to start alignment, but step aside when the block carries its own
   has-text-align-* class, otherwise the editor's alignment control does nothing. */
.wp-block-pullquote:not([class*="has-text-align"]) {
	text-align: start;
}

.wp-block-pullquote {
	border-radius: var(--wp--custom--radius--md);
}

.wp-block-pullquote blockquote {
	margin: 0;
}

.wp-block-pullquote cite {
	display: block;
	margin-block-start: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--caption);
	font-style: normal;
	font-weight: 500;
	color: var(--wp--preset--color--on-surface-variant);
	text-transform: none;
}

.wp-block-quote:not([class*="has-text-align"]) {
	text-align: start;
}

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */

/* The same gold hairline that marks the plates and the section headings, so
   the page closes on the mark it opened with. */
/* A dark green ground, not another shade of the page. The footer is the one
   block that appears on every page, so making it carry real colour gives every
   page a colour anchor without touching any page's own composition. The gold
   rule stays: it is what stops the panel butting straight into the body. */
.khayyiroon-footer {
	border-top: 3px solid var(--wp--custom--prestige--gold);
}

/* A grid, not space-between flex. The columns held different amounts of text,
   so flex spread them by content width and the three headings never lined up
   with each other. Equal tracks put every heading on one line and every list on
   the same left edge. */
.khayyiroon-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	align-items: start;
}

/* The brand stays the first column, but it is two lines against three lists of
   four or five, so aligned to the top it hung from the ceiling with an empty
   half-column beneath it. Centred against the lists it reads as the block the
   others are set beside. Only the brand: the lists must keep their shared top
   edge or their headings stop lining up with each other. */
.khayyiroon-footer__brand {
	align-self: center;
}

@media (max-width: 900px) {
	.khayyiroon-footer__grid {
		grid-template-columns: 1fr 1fr;
	}

	/* Two tracks wide there is no column to be centred against, so the brand
	   goes back to being the row the footer opens with. */
	.khayyiroon-footer__brand {
		grid-column: 1 / -1;
		align-self: start;
	}
}

@media (max-width: 540px) {
	.khayyiroon-footer__grid {
		grid-template-columns: 1fr;
	}
}

/* Gold on the dark ground. It is the only warm thing down here, so it separates
   the column names from the links without needing a second type size. */
.khayyiroon-footer__col > h2 {
	margin: 0;
	color: var(--wp--custom--prestige--gold);
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* The site name is the one thing in the footer allowed to be plain white. */
.khayyiroon-footer .wp-block-site-title a {
	color: var(--wp--preset--color--on-primary);
	text-decoration: none;
}

/* Held back from white so the links above it stay the brighter thing. Opacity
   rather than a fixed grey: the panel is a gradient, so any grey chosen for the
   top of it is wrong by the bottom. */
.khayyiroon-footer__tagline,
.khayyiroon-footer__legal {
	color: var(--wp--preset--color--on-primary);
	opacity: 0.72;
}

/* Every list in the footer — the page list, the categories and the hand-written
   one — is styled from one place, so the three columns do not each arrive with
   whatever markup their block happens to produce. */
.khayyiroon-footer__col ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.khayyiroon-footer__col li {
	margin: 0;
}

.khayyiroon-footer__col a {
	color: var(--wp--preset--color--on-primary);
	opacity: 0.86;
	font-size: var(--wp--preset--font-size--body-sm);
	text-decoration: none;
	transition: color 0.2s ease, opacity 0.2s ease;
}

.khayyiroon-footer__col a:hover,
.khayyiroon-footer__col a:focus-visible {
	color: var(--wp--preset--color--secondary-fixed);
	opacity: 1;
	text-decoration: none;
}

.khayyiroon-footer__base {
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.khayyiroon-footer__base p {
	margin: 0;
}

/* ---------------------------------------------------------------
   Sticky header
   --------------------------------------------------------------- */

.khayyiroon-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(248, 248, 247, 0.88);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	box-shadow: 0 1px 8px rgba(22, 29, 27, 0.04);
}

/* ---------------------------------------------------------------
   Section headings
   --------------------------------------------------------------- */

/* Each section opened with a near-black heading, so six sections ran together
   as one grey column and the brand colour appeared nowhere above the fold.
   h2 only: the hero's h1 keeps the ink, since a page should have one voice
   louder than the section names. */
.entry-content > .wp-block-group > h2.wp-block-heading,
.entry-content > .wp-block-query > h2.wp-block-heading {
	color: var(--wp--preset--color--primary);
}

/* A short gold rule under the name — the same hairline already used on the
   plates and the prestige panels, so the sections and the cards are marked by
   one device instead of two. */
.entry-content > .wp-block-group > h2.wp-block-heading.has-text-align-center::after,
.entry-content > .wp-block-query > h2.wp-block-heading.has-text-align-center::after {
	content: "";
	display: block;
	width: 3rem;
	height: 2px;
	margin: 0.625rem auto 0;
	background: var(--wp--custom--prestige--gold);
}

/* ---------------------------------------------------------------
   Post cards in query loops
   --------------------------------------------------------------- */

/* Posts without a featured image otherwise leave a hole in the column layout. */
.wp-block-column:empty {
	display: none;
}

/* 16/9 matches the generated plates exactly. A narrower ratio here would crop
   the sides, and the plate's own gold frame sits only ~3% in from the edge —
   so even a small crop beheads the frame and the image reads as broken. */
.khayyiroon-loop .wp-block-post-featured-image img {
	border-radius: var(--wp--custom--radius--md);
	aspect-ratio: 16 / 9;
	object-fit: cover;
	width: 100%;
}

/* The featured brief's plate: kept at reading width so the headline stays the
   loudest thing in the card, and inset from the card border so the plate's
   frame and the card's frame do not sit on top of each other. */
.khayyiroon-loop .wp-block-post-featured-image.khayyiroon-plate {
	max-width: 520px;
	margin-inline: auto;
}

.khayyiroon-loop .wp-block-post-title a {
	color: var(--wp--preset--color--on-surface);
	text-decoration: none;
	transition: color 0.25s ease;
}

.khayyiroon-loop .wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

/* The plate leans in slightly with the card. The clip has to live on the
   wrapper, not the image: scaling an image that owns its own rounded corners
   just scales the corners out past the card edge. */
.khayyiroon-loop .wp-block-post-featured-image {
	overflow: hidden;
	border-radius: var(--wp--custom--radius--md);
}

.khayyiroon-loop .wp-block-post-featured-image img {
	transition: transform 0.45s ease;
}

/* Keyed off the card, not the image, so pointing anywhere on the card moves the
   whole thing together — the card is one target, and lighting up in two stages
   would make it feel like two. */
.is-style-editorial-card:hover .wp-block-post-featured-image img,
.is-style-editorial-card:focus-within .wp-block-post-featured-image img {
	transform: scale(1.04);
}

/* The title carries the hover as well, so the card answers even when the
   pointer is nowhere near the words. */
.is-style-editorial-card:hover .wp-block-post-title a,
.is-style-editorial-card:focus-within .wp-block-post-title a {
	color: var(--wp--preset--color--primary);
}

/* ---------------------------------------------------------------
   Prestige surface — alabaster panel with the gold hairline
   --------------------------------------------------------------- */

.khayyiroon-prestige {
	background: #fcfcfb;
	border: var(--wp--custom--prestige--hairline);
	border-radius: var(--wp--custom--radius--xl);
}

/* ---------------------------------------------------------------
   Accessibility
   --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.wp-block-group.is-style-editorial-card,
	.wp-block-search__input {
		transition: none;
	}

	.wp-block-group.is-style-editorial-card:hover {
		transform: none;
	}

	/* The colour and shadow still change, so the card is still clearly the one
	   being pointed at — only the movement is dropped. */
	.is-style-editorial-card:hover .wp-block-post-featured-image img,
	.is-style-editorial-card:focus-within .wp-block-post-featured-image img {
		transform: none;
	}
}

:where(a):focus-visible,
:where(button):focus-visible {
	outline: 3px solid rgba(15, 118, 110, 0.35);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--sm);
}

/* ---------------------------------------------------------------
   Share row  (khayyiroon/share)
   --------------------------------------------------------------- */

.khayyiroon-share {
	margin-block: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--outline-variant);
	border-top: 2px solid var(--wp--custom--prestige--gold);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--surface-container-lowest);
	text-align: center;
}

.khayyiroon-share__label {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 600;
	color: var(--wp--preset--color--on-surface);
}

.khayyiroon-share__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
}

.khayyiroon-share__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 1rem;
	border: 1px solid var(--wp--preset--color--outline-variant);
	border-radius: var(--wp--custom--radius--full);
	background: var(--wp--preset--color--surface-container-lowest);
	color: var(--wp--preset--color--on-surface);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.khayyiroon-share__btn svg {
	width: 1.05rem;
	height: 1.05rem;
	fill: currentColor;
	flex: none;
}

/* Brand colour on hover only. Showing all five at rest would turn a quiet
   editorial page into a toolbar, and the row is not the point of the page. */
.khayyiroon-share__btn:hover,
.khayyiroon-share__btn:focus-visible {
	background: var(--wp--preset--color--surface-container-low);
	border-color: currentColor;
}

.khayyiroon-share__btn--whatsapp:hover { color: #1da851; }
.khayyiroon-share__btn--telegram:hover { color: #1f93d2; }
.khayyiroon-share__btn--x:hover { color: #000; }
.khayyiroon-share__btn--facebook:hover { color: #1877f2; }
.khayyiroon-share__btn--copy:hover { color: var(--wp--preset--color--primary); }

.khayyiroon-share__btn.is-copied {
	color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}

/* ---------------------------------------------------------------
   Zakat calculator  (khayyiroon/zakat-calculator)
   --------------------------------------------------------------- */

.khayyiroon-zakat {
	margin-block: var(--wp--preset--spacing--50);
}

.khayyiroon-zakat__lead {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 600;
}

.khayyiroon-zakat__toggles {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}

.khayyiroon-zakat__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.6rem 1.1rem;
	border: 1px solid var(--wp--preset--color--outline-variant);
	border-radius: var(--wp--custom--radius--full);
	background: var(--wp--preset--color--surface-container-lowest);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.khayyiroon-zakat__toggle:hover {
	border-color: var(--wp--preset--color--primary);
}

/* :has, so the whole pill reads as selected rather than just the box.
   Filled, not tinted. At an 8% wash the six pills were six shades of the same
   near-white, and the only thing marking a chosen one was a tick-box a few
   millimetres across. Which items are picked decides the whole calculation, so
   it has to be legible from the other side of the row. */
.khayyiroon-zakat__toggle:has(input:checked) {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
}

.khayyiroon-zakat__toggle input {
	accent-color: var(--wp--custom--prestige--gold);
	width: 1rem;
	height: 1rem;
	margin: 0;
}

.khayyiroon-zakat__body {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--40);
	align-items: start;
}

.khayyiroon-zakat__panels {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.khayyiroon-zakat__panel {
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--outline-variant);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--surface-container-lowest);
}

.khayyiroon-zakat__panel h3 {
	margin: 0;
	font-size: var(--wp--preset--font-size--headline-sm);
	color: var(--wp--preset--color--primary);
}

.khayyiroon-zakat__hint {
	margin: 0.35rem 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--on-surface-variant);
}

.khayyiroon-zakat__fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--wp--preset--spacing--30);
}

.khayyiroon-zakat__field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 0;
}

.khayyiroon-zakat__field label {
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	color: var(--wp--preset--color--on-surface-variant);
}

.khayyiroon-zakat__field input {
	/* LTR with right alignment: digits belong in logical order, but the field
	   still has to sit against the Arabic label's edge. */
	direction: ltr;
	text-align: right;
	padding: 0.65rem 0.85rem;
	border: 1px solid var(--wp--preset--color--outline-variant);
	border-radius: var(--wp--custom--radius--base);
	background: var(--wp--preset--color--surface-container-lowest);
	color: var(--wp--preset--color--on-surface);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body-sm);
	font-variant-numeric: tabular-nums;
	width: 100%;
}

.khayyiroon-zakat__field input:focus {
	border-color: var(--wp--preset--color--primary);
	outline: none;
	box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.14);
}

.khayyiroon-zakat__empty {
	margin: 0;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
	border: 1px dashed var(--wp--preset--color--outline-variant);
	border-radius: var(--wp--custom--radius--md);
	text-align: center;
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--on-surface-variant);
}

/* Always visible: the nisab cannot be worked out without one of these.
   On the brand green rather than another off-white. These are the only figures
   on the page the visitor did not type, and the page was a field of near-white
   panels in which nothing said which was the source and which was the form. */
.khayyiroon-zakat__prices {
	margin-bottom: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--40);
	border: 0;
	border-top: 3px solid var(--wp--custom--prestige--gold);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--gradient--pine-depth);
	color: var(--wp--preset--color--on-primary);
}

.khayyiroon-zakat__prices h3 {
	margin: 0 0 var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 700;
	color: var(--wp--custom--prestige--gold);
}

.khayyiroon-zakat__prices .khayyiroon-zakat__hint,
.khayyiroon-zakat__prices .khayyiroon-zakat__field label {
	color: var(--wp--preset--color--on-primary);
	opacity: 0.82;
}

.khayyiroon-zakat__stamp {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.8;
	color: var(--wp--preset--color--on-primary);
	opacity: 0.66;
}

/* A locked price is a statement, not a question. Stripping the box and the
   spinner removes the invitation to type, and the figure reads as something the
   page already knows rather than something it is waiting for. */
.khayyiroon-zakat__prices.is-locked input[readonly] {
	border-color: transparent;
	background: none;
	padding-right: 0;
	padding-left: 0;
	-webkit-text-fill-color: var(--wp--custom--prestige--gold);
	font-size: var(--wp--preset--font-size--headline-sm);
	font-weight: 700;
	color: var(--wp--custom--prestige--gold);
	cursor: default;
}

.khayyiroon-zakat__prices.is-locked input[readonly]::-webkit-outer-spin-button,
.khayyiroon-zakat__prices.is-locked input[readonly]::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.khayyiroon-zakat__editwrap {
	margin: var(--wp--preset--spacing--20) 0 0;
}

/* Quiet on purpose. Editing the price is the rare case — a حول that turned on
   another day — and a loud control here would compete with «احسب الزكاة». */
.khayyiroon-zakat__edit {
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--on-primary);
	opacity: 0.7;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--caption);
	text-decoration: underline;
	text-underline-offset: 0.25em;
	cursor: pointer;
}

.khayyiroon-zakat__edit:hover,
.khayyiroon-zakat__edit:focus-visible {
	color: var(--wp--custom--prestige--gold);
	opacity: 1;
}

.khayyiroon-zakat__field select {
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--wp--preset--color--outline-variant);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--surface);
	color: inherit;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body-sm);
	width: 100%;
}

.khayyiroon-zakat__breakdown {
	margin: var(--wp--preset--spacing--30) 0;
	padding: var(--wp--preset--spacing--30) 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	list-style: none;
	font-size: var(--wp--preset--font-size--caption);
	text-align: start;
}

.khayyiroon-zakat__breakdown:empty {
	display: none;
}

.khayyiroon-zakat__breakdown li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 0.35rem;
	color: var(--wp--preset--color--on-primary);
	opacity: 0.82;
}

.khayyiroon-zakat__breakdown li span:last-child {
	font-variant-numeric: tabular-nums;
	/* The figures are Latin; without this the bidi run puts the minus adrift. */
	direction: ltr;
	unicode-bidi: isolate;
}

.khayyiroon-zakat__actions {
	margin: var(--wp--preset--spacing--40) 0 0;
	text-align: center;
}

/* The one loud control on the page, so nobody has to guess that the figures
   come from somewhere. */
.khayyiroon-zakat__calc {
	padding: 0.85rem 2.4rem;
	border: 0;
	border-radius: var(--wp--custom--radius--full);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary, #fff);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body);
	font-weight: 600;
	cursor: pointer;
	transition: filter 0.2s ease, transform 0.2s ease;
}

.khayyiroon-zakat__calc:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
}

.khayyiroon-zakat__pending {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.9;
	color: var(--wp--preset--color--outline);
}

/* The answer. It is the reason the page exists and it was the same near-white
   as the form that produced it, so nothing on the page said "here it is". Dark
   green and sticky, so it stays as the one fixed colour while the reader works
   their way down the fields. */
.khayyiroon-zakat__result {
	position: sticky;
	top: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40);
	border: 0;
	border-top: 3px solid var(--wp--custom--prestige--gold);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--gradient--pine-depth);
	color: var(--wp--preset--color--on-primary);
	text-align: center;
}

.khayyiroon-zakat__result h3 {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 600;
	color: var(--wp--preset--color--on-primary);
	opacity: 0.78;
}

/* Gold, and the largest figure on the page. */
.khayyiroon-zakat__total {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 0.4rem;
	margin: var(--wp--preset--spacing--20) 0;
	font-size: var(--wp--preset--font-size--headline-xl);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--wp--custom--prestige--gold);
}

.khayyiroon-zakat__currency {
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 600;
	color: var(--wp--preset--color--on-primary);
	opacity: 0.78;
}

.khayyiroon-zakat__note,
.khayyiroon-zakat__basis {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.8;
	color: var(--wp--preset--color--on-primary);
	opacity: 0.8;
}

.khayyiroon-zakat__basis {
	opacity: 0.62;
}

.khayyiroon-zakat__reset {
	padding: 0.5rem 1.1rem;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: var(--wp--custom--radius--full);
	background: transparent;
	color: var(--wp--preset--color--on-primary);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--caption);
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.khayyiroon-zakat__reset:hover {
	border-color: var(--wp--custom--prestige--gold);
	color: var(--wp--custom--prestige--gold);
}

.khayyiroon-zakat__disclaimer {
	margin: var(--wp--preset--spacing--40) 0 0;
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.9;
	color: var(--wp--preset--color--outline);
}

@media (max-width: 781px) {
	.khayyiroon-zakat__body {
		grid-template-columns: 1fr;
	}

	/* Sticky in a single column would pin the total over the inputs. */
	.khayyiroon-zakat__result {
		position: static;
		order: -1;
	}
}

/* ---------------------------------------------------------------
   Details  (core/details) — the collapsible sections
   --------------------------------------------------------------- */

/* A gold edge on the opening side. A stack of seven identical white boxes is a
   list of doors with nothing to tell you they are doors; the edge gives the
   stack a spine and a colour without filling seven panels. */
.wp-block-details {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--outline-variant);
	border-inline-start: 4px solid var(--wp--custom--prestige--gold);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--surface-container-lowest);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* The open one is the one being read, so it takes the brand colour outright. */
.wp-block-details[open] {
	border-color: rgba(15, 118, 110, 0.3);
	border-inline-start-color: var(--wp--preset--color--primary);
	background: var(--wp--custom--prestige--pine-soft);
}

.wp-block-details + .wp-block-details {
	margin-top: var(--wp--preset--spacing--20);
}

.wp-block-details summary {
	cursor: pointer;
	padding-block: 0.35rem;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--primary);
	list-style: none;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

/* The chevron is drawn rather than typed: the default marker sits on the wrong
   side in RTL and cannot be moved. */
.wp-block-details summary::after {
	content: "";
	float: left;
	width: 0.5rem;
	height: 0.5rem;
	margin-top: 0.45rem;
	border-right: 2px solid var(--wp--custom--prestige--gold);
	border-bottom: 2px solid var(--wp--custom--prestige--gold);
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.wp-block-details[open] summary::after {
	transform: rotate(-135deg);
	margin-top: 0.7rem;
}

.wp-block-details[open] summary {
	color: var(--wp--preset--color--primary);
	margin-bottom: var(--wp--preset--spacing--20);
}

.wp-block-details > :not(summary) {
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: var(--wp--custom--line-height--editorial);
	color: var(--wp--preset--color--on-surface-variant);
}

/* ---------------------------------------------------------------
   Motion — one rhythm for the whole page
   --------------------------------------------------------------- */

/* Every reveal on the site is built from these five numbers. There used to be
   three unrelated sets — one for the hero, one for whole sections, one for the
   three-column sequence — and they read as three different pages stitched
   together. Changing how the site feels is now changing a number here.

   --step is far shorter than --fade on purpose: the parts are meant to overlap,
   so a section reads as one movement travelling through it rather than a queue
   of things waiting their turn. --move is shorter than --fade so each part stops
   moving while it is still arriving: the motion ends before it becomes the thing
   you are watching. */
:root {
	--khayyiroon-rise: 20px;
	--khayyiroon-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--khayyiroon-fade: 1.25s;
	--khayyiroon-move: 1.05s;
	--khayyiroon-step: 0.28s;
}

@keyframes khayyiroon-rise {
	from {
		opacity: 0;
		transform: translateY(var(--khayyiroon-rise));
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* The opening section is the one nobody scrolls to, so it cannot wait for a
   script: an animation rather than a transition, started by a class printed in
   the head before first paint. `both` holds the start state through the delay
   and the end state after, so it can never be left half-applied. */
.khayyiroon-stagger .entry-content > .wp-block-group:first-child > * {
	animation: khayyiroon-rise var(--khayyiroon-fade) var(--khayyiroon-ease) both;
	animation-delay: calc(var(--khayyiroon-i, 0) * var(--khayyiroon-step));
}

.khayyiroon-stagger
	.entry-content
	> .wp-block-group:first-child
	> *:nth-child(2) {
	--khayyiroon-i: 1;
}

.khayyiroon-stagger
	.entry-content
	> .wp-block-group:first-child
	> *:nth-child(3) {
	--khayyiroon-i: 2;
}

.khayyiroon-stagger
	.entry-content
	> .wp-block-group:first-child
	> *:nth-child(4) {
	--khayyiroon-i: 3;
}

.khayyiroon-stagger
	.entry-content
	> .wp-block-group:first-child
	> *:nth-child(5) {
	--khayyiroon-i: 4;
}

.khayyiroon-stagger
	.entry-content
	> .wp-block-group:first-child
	> *:nth-child(6) {
	--khayyiroon-i: 5;
}

/* An actor is one part of a section that enters on its own — a heading, a
   paragraph, a card, a button. reveal.js picks them out and numbers them, so
   nothing is hidden unless a script is there to show it again. */
.khayyiroon-actor {
	opacity: 0;
	transform: translateY(var(--khayyiroon-rise));
}

.khayyiroon-stage.is-revealed .khayyiroon-actor {
	opacity: 1;
	transform: none;
	transition: opacity var(--khayyiroon-fade) var(--khayyiroon-ease),
		transform var(--khayyiroon-move) var(--khayyiroon-ease);
	transition-delay: calc(var(--khayyiroon-i, 0) * var(--khayyiroon-step));
}

/* A surface has a presence of its own — a coloured section panel, a card's
   border and background — and it appearing abruptly while its contents are
   still fading would undo the effect. Opacity only and quick: the surface is
   laid down, then the parts walk onto it. Anything transparent has nothing to
   show and is left alone. */
.khayyiroon-stage.has-background,
.khayyiroon-stage .khayyiroon-frame {
	opacity: 0;
	transition: opacity 0.5s var(--khayyiroon-ease);
}

.khayyiroon-stage.has-background.is-revealed,
.khayyiroon-stage.is-revealed .khayyiroon-frame {
	opacity: 1;
}

/* Away from the front page a section arrives whole. The children of an article
   are paragraphs, and fading in a paragraph at a time makes reading a chore. */
.khayyiroon-reveal {
	opacity: 0;
	transform: translateY(var(--khayyiroon-rise));
}

.khayyiroon-reveal.is-revealed {
	opacity: 1;
	transform: none;
	transition: opacity var(--khayyiroon-fade) var(--khayyiroon-ease),
		transform var(--khayyiroon-move) var(--khayyiroon-ease);
}

/* A global stop. Every transition in this file is decorative, so honouring the
   system preference is a flat override rather than a per-rule audit. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.khayyiroon-reveal,
	.khayyiroon-actor,
	.khayyiroon-stage.has-background,
	.khayyiroon-stage .khayyiroon-frame {
		opacity: 1;
		transform: none;
	}
}

/* Panels collapse rather than vanish, so choosing an item reads as the form
   growing instead of the page jumping. Driven by .is-ready so a no-JS visitor
   still sees the fields.

   max-height rather than the grid 0fr→1fr recipe: an auto-height grid container
   has no free space to distribute, so the 1fr track measured 0 and the panel
   never opened. The cap only has to clear the tallest panel, which is two
   fields; easing against a cap this close to the real height is imperceptible. */
.khayyiroon-zakat.is-ready .khayyiroon-zakat__panel {
	max-height: 0;
	opacity: 0;
	margin-bottom: 0;
	border-width: 0;
	padding-top: 0;
	padding-bottom: 0;
	overflow: hidden;
	transition: max-height 0.32s ease, opacity 0.24s ease, padding 0.32s ease,
		margin 0.32s ease, border-width 0.32s ease;
}

.khayyiroon-zakat.is-ready .khayyiroon-zakat__panel.is-open {
	max-height: 32rem;
	opacity: 1;
	margin-bottom: var(--wp--preset--spacing--30);
	border-width: 1px;
	padding-top: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--40);
}

.khayyiroon-zakat__gauge {
	margin: var(--wp--preset--spacing--30) 0 0;
}

.khayyiroon-zakat__gauge-track {
	height: 6px;
	border-radius: var(--wp--custom--radius--full);
	background: var(--wp--preset--color--outline-variant);
	overflow: hidden;
}

.khayyiroon-zakat__gauge-track span {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: var(--wp--custom--prestige--gold);
	transition: width 0.6s ease;
}

.khayyiroon-zakat__gauge-label {
	margin: var(--wp--preset--spacing--10) 0 0;
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--on-surface-variant);
}