/*
 * Al Basar — minimal front-end rules theme.json cannot express.
 * Keep this tiny; prefer theme.json / block styles. Loaded globally (small).
 */

/* Header: brand + actions keep their size; the nav flexes and centres so the
   bar stays a single row. Nav item + button text never wrap. */
.ab-header__row { gap: 24px; }
/* v5 nav: hairline bottom border (Neutral-300) + Neutral-700 link colour, Jost 500. */
.ab-header { border-bottom-color: var(--wp--custom--neutral--300) !important; }
.ab-header .wp-block-navigation-item__content { color: var(--wp--custom--neutral--700); font-weight: 500; }
.ab-header .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--ab-navy); }
.ab-header__brand,
.ab-header__actions { flex: 0 0 auto; }
.ab-header .wp-block-navigation { flex: 1 1 auto; justify-content: center; }
.ab-header .wp-block-navigation-item__content { white-space: nowrap; }
.ab-header__donate .wp-block-button__link { white-space: nowrap; }
.ab-header .wp-block-site-title a { text-decoration: none; }

/* ===== Footer (v5) ============================================== */
.ab-footer { color: var(--wp--preset--color--ab-ink); }
.ab-footer__top { align-items: flex-start; }
.ab-footer__brand-col img { height: auto; max-width: 250px; }
.ab-footer__tagline {
	margin: 18px 0 0;
	max-width: 275px;
	color: var(--wp--custom--neutral--700);
	font-size: 0.9375rem;
	line-height: 1.5;
}
/* Column headings: Action-orange, uppercase, 1.4px tracked (Jost 500). */
.ab-footer__head {
	margin: 0 0 20px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--wp--custom--action--500);
}
/* Link lists: Primary-700 blue, 1.4px tracked, no bullets/underline. */
.ab-footer__list { list-style: none; margin: 0; padding: 0; }
.ab-footer__list li { margin: 0 0 14px; }
.ab-footer__list li:last-child { margin-bottom: 0; }
.ab-footer__list a {
	color: var(--wp--custom--primary--700);
	text-decoration: none;
	font-size: 1.0625rem;
	letter-spacing: 1.4px;
}
.ab-footer__list a:hover,
.ab-footer__list a:focus { color: var(--wp--preset--color--ab-navy); }
/* Divider (hairline). */
.ab-footer__divider {
	margin: 30px 0;
	border: 0;
	border-top: 0.6px solid var(--wp--preset--color--ab-line);
	height: 0;
	opacity: 1;
}
/* Meta row: socials + legal on the left, seals hard-right (per design). */
.ab-footer__meta {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 40px;
	width: 100%;
}
.ab-footer__meta-left { flex: 1 1 auto; min-width: 0; }
.ab-footer__seals { margin-left: auto; }
/* Circular social buttons (42px). */
.ab-footer__socials { display: flex; gap: 10px; margin-bottom: 20px; }
.ab-footer__socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 999px;
	background: var(--wp--custom--neutral--100);
	color: var(--wp--custom--primary--700);
	transition: background-color 0.15s ease, color 0.15s ease;
}
.ab-footer__socials a:hover,
.ab-footer__socials a:focus {
	background: var(--wp--custom--primary--700);
	color: #fff;
}
.ab-footer__socials svg { width: 21px; height: 21px; }
.ab-footer__legal-links { margin: 0 0 8px; font-size: 1rem; }
.ab-footer__legal-links a { color: var(--wp--custom--primary--700); text-decoration: none; }
.ab-footer__legal-links a:hover,
.ab-footer__legal-links a:focus { text-decoration: underline; }
.ab-footer__legal-links span { color: var(--wp--custom--neutral--400); margin: 0 4px; }
.ab-footer__legal { margin: 0; font-size: 1rem; color: var(--wp--custom--neutral--700); }
/* Trust seals, 100px tall. Candid's is its live widget SVG (the year updates
   itself); GreatNonprofits' is a self-hosted copy of its yearly badge. */
.ab-footer__seals { flex: 0 0 auto; display: flex; align-items: center; gap: 20px; }
.ab-footer__seal { display: block; line-height: 0; }
.ab-footer__seal img { display: block; height: 100px; width: auto; }
/* Navy copyright bar. */
.ab-footer__copyright { font-size: 1.125rem; }

@media (max-width: 781px) {
	.ab-footer__meta { flex-direction: column; align-items: flex-start; }
	.ab-footer__seals { margin-left: 0; }
	.ab-footer__tagline { max-width: none; }
}

/* Program cards: navy titles (not link-blue), tidy wrapping. */
.ab-card .wp-block-post-title a { color: var(--wp--preset--color--ab-navy); text-decoration: none; }
.ab-card .wp-block-post-title a:hover { color: var(--wp--preset--color--ab-blue); }
.ab-card .wp-block-post-title { overflow-wrap: break-word; }
/* Left-align the "Learn more" link: the constrained group centres fit-content
   children with margin:auto !important — the design left-aligns it, so match. */
.ab-card .wp-block-read-more { margin-left: 0 !important; margin-right: auto !important; }
.ab-card { overflow: hidden; }

/* Leadership card styling (about) lives in the conditional leadership.css, keyed
   to .ab-leadership. */

/* Equal-height "Our Solution" program cards (program-cards pattern). The query
   loop renders a grid <ul> of <li> items; the grid stretches each <li> to the
   tallest in its row, but the card box inside only takes its content height, so
   uneven titles/excerpts left the cards different sizes. Make the card fill its
   cell and lay it out as a column, with the body growing and "Learn more" pinned
   to the bottom so every card is the same size and the links align. */
.ab-programs .wp-block-post-template > li { display: flex; }
.ab-programs .ab-card {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}
.ab-programs .ab-card > figure { flex: 0 0 auto; }
.ab-programs .ab-card > .wp-block-group {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}
.ab-programs .ab-card .wp-block-read-more { margin-top: auto; }

/* Equal-height tier cards: fill the stretched column and pin the CTA to the
   bottom so the Donate buttons line up regardless of description length. */
.ab-tier { overflow: hidden; height: 100%; display: flex; flex-direction: column; }
.ab-tier > .wp-block-cover { flex: 0 0 auto; }
.ab-tier > .wp-block-group { flex: 1 1 auto; display: flex; flex-direction: column; }
.ab-tier .wp-block-buttons { margin-top: auto; }

/* FAQ disclosure headings: styled in CSS rather than an inline <summary> style,
   which core/details does not serialize (it would fail block validation). */
.wp-block-details > summary {
	font-weight: 600;
	color: var(--wp--preset--color--ab-navy);
	cursor: pointer;
}

/* Stat numbers never split the figure itself across lines (e.g. "38.5M+"). */
.ab-stat__number { white-space: nowrap; }
.ab-stat__unit { white-space: normal; }

/* Stats-strip cell dividers: a hairline between cells (not on the last), drawn
   in CSS rather than an inline border so the column blocks stay valid. Only
   when the cells sit side by side (≥600px); hidden once they stack on mobile. */
@media (min-width: 600px) {
	.ab-stats-strip .wp-block-column:not(:last-child) {
		border-right: 1px solid var(--wp--preset--color--ab-line);
	}
}

/* ==========================================================================
   Brand logo (header + footer). The lockup ships as an SVG; we size by height
   and let width follow the intrinsic 299:78 ratio. The width/height attributes
   on the <img> reserve space to avoid layout shift.
   ========================================================================== */
.ab-brand {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	text-decoration: none;
}
.ab-brand__logo {
	display: block;
	width: auto;
	max-width: 100%;
}
.ab-header .ab-brand__logo { height: 65px; } /* Figma header: logo 250×65 */
.ab-footer .ab-brand__logo { height: 80px; } /* matches the comp footer lockup */

/* ==========================================================================
   Interactions — hover + focus + active states (QA #3).
   All transitions are disabled under prefers-reduced-motion (see bottom).
   ========================================================================== */

/* --- Primary navigation: hover colour + a centred underline that also marks
   the current page (the .current-menu-item / [aria-current] state is added by
   inc/nav.php since the menu uses custom-URL links). ----------------------- */
.ab-header .wp-block-navigation-item__content {
	position: relative;
	padding-bottom: 4px;
	transition: color 0.18s ease;
}
.ab-header .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--wp--preset--color--ab-orange);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.2s ease;
}
.ab-header .wp-block-navigation-item__content:hover,
.ab-header .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--ab-blue);
}
.ab-header .wp-block-navigation-item__content:hover::after,
.ab-header .wp-block-navigation-item__content:focus-visible::after,
.ab-header .current-menu-item > .wp-block-navigation-item__content::after,
.ab-header .wp-block-navigation-item__content[aria-current]::after {
	transform: scaleX(1);
}
/* Current page: stronger colour + weight so the active section reads at a glance. */
.ab-header .current-menu-item > .wp-block-navigation-item__content,
.ab-header .wp-block-navigation-item__content[aria-current] {
	color: var(--wp--preset--color--ab-navy);
	font-weight: 600;
}

/* --- Buttons: smooth colour change plus a subtle lift on solid buttons.
   theme.json already swaps the background on :hover; this adds the motion and a
   shadow. Outline / plain buttons (e.g. the hero "Watch the story") don't lift. */
.wp-element-button,
.wp-block-button__link {
	transition: background-color 0.18s ease, color 0.18s ease,
		transform 0.18s ease, box-shadow 0.18s ease;
}
.wp-block-button:not(.is-style-outline):not(.ab-button-plain) .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline):not(.ab-button-plain) .wp-block-button__link:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(12, 46, 78, 0.18);
}
/* Plain text buttons just shift colour toward navy on hover. */
.ab-button-plain .wp-block-button__link:hover,
.ab-button-plain .wp-block-button__link:focus-visible {
	color: var(--wp--preset--color--ab-navy);
}

/* ==========================================================================
   Responsive (QA #7) — tablet + mobile.
   ========================================================================== */

/* Top-level regions sit flush. WordPress's root layout adds a block-gap margin
   to every direct child of .wp-site-blocks (header, main, footer), which leaves
   an empty strip below the header and above the footer. The header has its own
   divider and each section owns its padding, so we remove that gap. The :where()
   selector core uses has zero specificity, so this plain selector wins. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* Floating header (Appearance → Theme Options, inc/theme-options.php). The
   <header> template-part wrapper sticks below the admin bar when it shows; on
   phones the admin bar scrolls away, so it sticks at 0. scroll-padding keeps
   in-page anchors (#faq, …) from landing under the header. */
.ab-header-floating .wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}
html:has(body.ab-header-floating) { scroll-padding-top: 110px; }
@media (max-width: 600px) {
	.admin-bar.ab-header-floating .wp-site-blocks > header.wp-block-template-part { top: 0; }
	html:has(body.ab-header-floating) { scroll-padding-top: 80px; }
}

/* Section vertical rhythm (QA #6). Every section's top/bottom padding uses the
   "Section" spacing token (--wp--preset--spacing--80). We enforce it here in CSS
   rather than only in theme.json because WordPress's defaultSpacingSizes scale
   (slugs 20–80) overrides a theme preset that reuses the same slug, so the
   theme.json value never reaches the page. Overriding the token on `body` (the
   preset is defined on :root, so body wins for every section) sets it for all
   sections at once and lets us scale it down off desktop — without touching any
   other spacing, so the rest of the tuned layout is unchanged. */
body { --wp--preset--spacing--80: 100px; }
@media (max-width: 1024px) {
	body { --wp--preset--spacing--80: 72px; }
}
@media (max-width: 600px) {
	body { --wp--preset--spacing--80: 56px; }
}

/* Header navigation collapse (QA: tablet/mobile).
   The six-item menu + Donate CTA cannot fit inline below ~1024px, and core's
   navigation overlay only collapses below 600px — so on tablets the flat menu
   used to overflow and clip the Donate button. We extend the hamburger overlay
   up to 1024px: hide the inline menu, show the toggle, and keep the brand left
   with the Donate + toggle grouped on the right. Above 1024px nothing here
   applies, so the inline menu (core's >=600px rules) is used as before. */
@media (max-width: 1024px) {
	/* Note: WordPress emits a per-block layout container class
	   (.wp-container-…-is-layout-flex) with the same specificity as a single
	   class but later in source order, so plain .ab-header__* rules lose to it.
	   Scoping every layout rule under .ab-header raises specificity so they win. */
	.ab-header .ab-header__row { gap: 16px; }

	/* Brand stays left; everything else clusters on the right. */
	.ab-header .ab-header__brand { margin-right: auto; }
	.ab-header .ab-header__actions { order: 2; gap: 14px; }
	.ab-header .wp-block-navigation { order: 3; flex: 0 0 auto; justify-content: flex-end; }

	/* Show the hamburger toggle, hide the inline menu (core hides the toggle /
	   shows the menu at >=600px; the .ab-header scope raises specificity to win).
	   The .is-menu-open state is untouched, so the modal still opens normally. */
	.ab-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.ab-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	/* The language switcher is a disabled placeholder — hide it whenever the
	   menu is collapsed so the brand + Donate + toggle have room. (Scoped under
	   .ab-header to beat core's layout container display:flex.) */
	.ab-header .ab-lang-slot { display: none; }

	/* Shrink the 250×65 logo once the menu collapses, so the brand + cart +
	   Donate + hamburger all fit the row. At full size the logo alone eats most
	   of a phone's width and pushes the hamburger off-screen (it was rendered but
	   clipped by overflow). Let the brand shrink as a last resort, too. */
	.ab-header .ab-header__brand { min-width: 0; }
	.ab-header .ab-brand__logo { height: 46px; }
}

@media (max-width: 600px) {
	.ab-header .ab-brand__logo { height: 40px; }
	.ab-header__donate .wp-block-button__link {
		padding-left: 12px;
		padding-right: 12px;
		font-size: 0.9rem;
	}
}
@media (max-width: 380px) {
	.ab-header .ab-brand__logo { height: 34px; }
}
/* Smallest phones (≤360px, e.g. iPhone SE): tighten the collapsed header so the
   brand + "Donate Now" + hamburger clear a 320px viewport with no horizontal
   scroll. Scoped to this width, so normal phones/tablets are unaffected. */
@media (max-width: 360px) {
	.ab-header .ab-header__row { gap: 10px; }
	.ab-header .ab-brand__logo { height: 32px; }
	.ab-header__donate .wp-block-button__link {
		padding-left: 14px;
		padding-right: 14px;
	}
}

/* Footer: stack the brand above the link panel and centre it; the inner link
   columns already stack via core at the small breakpoint. */
@media (max-width: 781px) {
	.ab-footer__brand { justify-content: center; }
	.ab-footer .ab-brand__logo { height: 60px; }
}

/* Belt-and-braces: nothing should force horizontal scroll on a phone. */
img,
svg {
	max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
	.ab-header .wp-block-navigation-item__content,
	.ab-header .wp-block-navigation-item__content::after,
	.wp-element-button,
	.wp-block-button__link {
		transition: none;
	}
	.wp-block-button:not(.is-style-outline):not(.ab-button-plain) .wp-block-button__link:hover,
	.wp-block-button:not(.is-style-outline):not(.ab-button-plain) .wp-block-button__link:focus-visible {
		transform: none;
	}
}

/* A photo that fills its box like background-size: cover, as a real <img>
   (albasar_cover_image()): the box sets the size, the image covers it. */
.ab-has-cover {
	position: relative;
	overflow: hidden;
}

.ab-cover-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* "Al Basar USA" in the logo's colours (wrapped by inc/brand.php): bold like
   the logo, the name in brand blue and "USA" in brand orange.
   Dark bands get the reversed lockup: brand blue is unreadable there (1.2:1 on
   green), so the name takes the band's white and "USA" a lighter brand orange
   (ab-orange-200: 3.8:1 on green, 3.2:1 on blue, vs 2.6 / 2.2 for the brand
   orange). The navy footer bar keeps the brand orange, which passes (5.1:1). */
.ab-wordmark {
	font-weight: 700;
	text-transform: uppercase; /* "AL BASAR USA", as on albasarusa.org; the text stays as written */
	white-space: nowrap; /* never split the name across lines */
}

.ab-wordmark__name {
	color: var(--wp--preset--color--ab-blue);
}

.ab-wordmark__usa {
	color: var(--wp--preset--color--ab-orange);
}

.has-ab-navy-background-color .ab-wordmark__name,
.has-ab-blue-background-color .ab-wordmark__name,
.has-ab-green-background-color .ab-wordmark__name,
.ab-footer__bar .ab-wordmark__name,
.ab-cty-zakat .ab-wordmark__name,
.ab-prog-cta .ab-wordmark__name,
.ab-www-cta .ab-wordmark__name,
.ab-zakat-hero .ab-wordmark__name,
.ab-zakat-closing .ab-wordmark__name,
.ab-sac-zakat .ab-wordmark__name {
	color: inherit;
}

.has-ab-blue-background-color .ab-wordmark__usa,
.has-ab-green-background-color .ab-wordmark__usa,
.ab-cty-zakat .ab-wordmark__usa,
.ab-prog-cta .ab-wordmark__usa,
.ab-www-cta .ab-wordmark__usa,
.ab-zakat-hero .ab-wordmark__usa,
.ab-zakat-closing .ab-wordmark__usa,
.ab-sac-zakat .ab-wordmark__usa {
	color: var(--wp--preset--color--ab-orange-200);
}

/* Count-up numbers (assets/js/count-up.js): equal-width digits, so a number's
   width stays steady while it counts and nothing around it shifts. */
.ab-stats-strip .ab-stat__number,
.ab-home-proof__num,
.ab-mec-stat__num,
.ab-prog-stat__num {
	font-variant-numeric: tabular-nums;
}