/* ==========================================================================
   ABA — Site chrome (header · hero · footer)

   Layout ported from the riyadh-hospital theme: 2-tier sticky header,
   full-bleed hero with a floating actions bar, and a deep mega-footer.

   Colours come from the ABA logo (assets/img/logo.png): blue #01A1F4
   as primary, pink #FB2890 and orange #FD9600 as accents, over a deep blue
   #08395C derived from the same hue.

   Loads AFTER assets/css/main.css, so anything here wins over the older
   green chrome that main.css still carries for inner-page components.

   Font weight is pinned to 400 site-wide (see §0) — the source theme ships a
   single font face, and synthetic bold thickens Arabic joins until the dots
   merge into the letter beside them.
   ========================================================================== */

/* ── 0. TOKENS · BASE ─────────────────────────────────────────────────────
   Every colour here resolves through the theme's own --aba-* variables, which
   inc/helpers.php prints from the Customizer — so changing "اللون الأساسي"
   still recolours the whole chrome. The literals are only fallbacks for the
   case where that inline block is missing.
   ------------------------------------------------------------------------ */
:root {
	/* Brand blue #01A1F4 — the logo's dominant colour. */
	--aba-teal: var(--aba-primary, #01a1f4);
	--aba-teal-dark: var(--aba-primary-dark, #0084c8);
	--aba-teal-light: #e8f6ff;
	--aba-teal-hover: var(--aba-primary-dark, #0084c8);
	--aba-teal-rgb: var(--aba-primary-rgb, 1, 161, 244);

	/* Deep blue derived from the same hue — carries the footer. */
	--aba-navy: var(--aba-ink, #08395c);
	--aba-navy-rgb: var(--aba-ink-rgb, 8, 57, 92);

	/* Light blue for footer rules, icons and link accents. */
	--aba-cyan: #8cd8ff;

	/* The logo's other two colours, kept for accents. */
	--aba-pink: var(--aba-accent, #fb2890);
	--aba-pink-rgb: var(--aba-accent-rgb, 251, 40, 144);
	--aba-orange: #fd9600;

	--chrome-bg-white: #ffffff;
	--chrome-bg-soft: #f5fbff;
	--chrome-border-light: #dceffb;
	--chrome-text-muted: #5a7183;
	--chrome-text-light: #8ba2b4;

	--chrome-radius-sm: 8px;
	--chrome-radius-md: 14px;
	--chrome-radius-lg: 20px;
	--chrome-radius-pill: 9999px;
	--chrome-transition: all .3s ease;

	/* Measured by JS on load/resize; the mobile drawer hangs off it. */
	--header-height: 64px;
}

/* Body copy sits at one weight — 400. The !important is load-bearing:
   main.css sets 500–900 on nav links, buttons, badges and meta rows with
   equal specificity, and the mix read as noise. */
*,
*::before,
*::after {
	font-weight: 400 !important;
}

/* Titles are the exception: they carry the hierarchy, so they stay bold.
   No !important needed to beat the rule above — a type or class selector
   already outranks `*` — but these are !important anyway so a stray
   `font-weight` further down main.css cannot flatten them back. */
h1,
h2,
h3,
h4,
h5,
h6,
.hero-copy h1,
.hero-title-accent,
.section-head__title,
.page-hero__title,
.course-card__title,
.course-card__title a,
.track-card__title,
.post-card__title,
.entry-title,
.widget-title,
.footer-col-head,
.preloader-title,
.stat__num,
.aba-header .site-brand__name,
.aba-footer .site-brand__name {
	font-weight: 700 !important;
}

/* Tajawal and Cairo both ship a real 700, so nothing here is synthesised.
   font-synthesis: none makes that explicit — a faked bold thickens Arabic
   joins until the dots merge into the letter beside them. */
body {
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
}

/* Fixes the scroll-down shift.
   main.css had `overflow-x: hidden` on <body>, which propagates to the
   viewport and makes it a *scroll container* on the x-axis — scrollable by
   script/focus but with no scrollbar to scroll back. Any focus() or
   scrollIntoView on content that pokes past the edge slid the whole page
   sideways and left it there. `clip` clips identically but is NOT a scroll
   container, so nothing can scroll it. */
html {
	overflow-x: clip;
	scrollbar-gutter: stable;
	/* main.css offsets anchors by the old one-row header (--aba-header-h).
	   This header is two rows, and JS keeps --header-height measured. */
	scroll-padding-block-start: calc(var(--header-height, 64px) + 24px);
}

body {
	overflow-x: clip;
	width: 100%;
	max-width: 100%;
}

/* Old chrome from main.css — replaced by the blocks below. */
.topbar,
.mobile-nav,
.nav-toggle,
.site-header {
	display: none !important;
}

.container {
	max-width: 1260px;
}

::selection {
	background: rgba(var(--aba-teal-rgb), .18);
	color: var(--aba-navy);
}

/* ── 1. HEADER ────────────────────────────────────────────────────────────
   Two tiers: brand + CTAs on top, nav + dashboard link below. Sticky, with
   an offset-and-blurred shadow rather than a halo.
   ------------------------------------------------------------------------ */
.aba-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	width: 100%;
	background: rgba(255, 255, 255, .98);
	box-shadow: 0 4px 20px rgba(var(--aba-navy-rgb), .06), 0 1px 0 rgba(var(--aba-teal-rgb), .08);
}

@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
	.aba-header {
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
	}
}

/* WP's admin bar is `position: fixed` above 782px, so a sticky header at
   top:0 would slide underneath it for logged-in users. */
.admin-bar .aba-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .aba-header {
		top: 46px;
	}
}

/* Below 601px the admin bar stops being fixed and scrolls away. */
@media (max-width: 600px) {
	.admin-bar .aba-header {
		top: 0;
	}
}

/* Two columns: the brand sits in the right-hand cell and spans BOTH rows, so
   the logo can be as tall as the whole header; everything else stacks into
   two rows in the left cell (actions above, nav below). In RTL the first
   named column resolves to the right, which is why `brand` leads each row. */
.header-grid {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"brand actions"
		"brand nav";
	align-items: center;
	column-gap: 1.5rem;
}

.header-brand-cluster {
	grid-area: brand;
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	align-self: stretch;
	/* In RTL inline-end is the LEFT edge — the seam facing the content. */
	padding-inline-end: 1.5rem;
	border-inline-end: 1px solid rgba(var(--aba-teal-rgb), .12);
}

.header-actions-row {
	grid-area: actions;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .7rem 0 .35rem;
}

.aba-header .site-brand {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	flex-shrink: 0;
	color: var(--aba-navy);
}

/* The logo file is square (1254×1254), so it is sized by HEIGHT — a
   width-based rule would make it as tall as it is wide and blow the row open.
   Sized to fill both header rows, which is what makes the lockup read. */
.aba-header .site-brand__logo {
	width: auto;
	height: clamp(64px, 5.5vw, 84px);
	max-height: none;
	object-fit: contain;
	transition: height .3s ease;
}

/* The lockup is Latin ("ABA" / "LET'S CHANGE WITH ABA") sitting inside an RTL
   document, so it gets its own direction. Without this the short name aligns
   to the RTL edge and floats away from the tagline's first letter; ltr +
   flex-start puts both lines flush on the same left edge. */
.aba-header .site-brand__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	direction: ltr;
	text-align: left;
}

.aba-header .site-brand__name {
	font-size: 1.2rem;
	color: var(--aba-navy);
	line-height: 1.2;
	letter-spacing: .01em;
}

/* `display` is declared here on purpose: main.css:1756 hides the tagline
   below 860px for the old one-row header. A media query adds no specificity,
   so this two-class selector outranks it at every width — without this the
   slogan stayed hidden on phones no matter what the mobile blocks said. */
.aba-header .site-brand__tagline {
	display: block;
	max-width: 15ch;
	font-size: .64rem;
	color: var(--chrome-text-muted);
	letter-spacing: .04em;
	line-height: 1.45;
	text-transform: uppercase;
}

/* Trust micro — the "٣ مسارات • ٢٤/٧ دعم" pill beside the logo. */
.header-trust-micro {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	padding: .35rem .75rem;
	background: var(--chrome-bg-soft);
	border: 1px solid rgba(var(--aba-teal-rgb), .10);
	border-radius: var(--chrome-radius-pill);
}

.trust-badge {
	padding: .15rem .5rem;
	border: 1px solid rgba(var(--aba-teal-rgb), .14);
	border-radius: var(--chrome-radius-pill);
	background: var(--aba-teal-light);
	color: var(--aba-teal);
	font-size: .72rem;
	letter-spacing: .08em;
	line-height: 1;
}

.trust-micro-divider {
	width: 1px;
	height: 18px;
	background: rgba(var(--aba-teal-rgb), .14);
}

.trust-micro-text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	font-size: .78rem;
	line-height: 1;
	color: var(--aba-navy);
}

.trust-micro-sub {
	font-size: .66rem;
	color: var(--chrome-text-muted);
	letter-spacing: .02em;
}

.header-actions-wrap {
	display: flex;
	align-items: center;
	gap: .65rem;
}

/* Email ghost — visible on desktop, dropped below 1024px. */
.header-email-ghost {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	min-height: 42px;
	padding: .56rem .95rem;
	border: 1.5px solid rgba(var(--aba-teal-rgb), .10);
	border-radius: var(--chrome-radius-pill);
	background: var(--chrome-bg-soft);
	color: var(--chrome-text-muted);
	font-size: .84rem;
	white-space: nowrap;
	transition: var(--chrome-transition);
}

.header-email-ghost:hover {
	border-color: var(--aba-teal);
	background: var(--aba-teal-light);
	color: var(--aba-teal);
	transform: translateY(-1px);
}

/* Primary CTA — the tracks pill. */
.header-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	min-height: 42px;
	padding: .62rem 1.35rem;
	border: 1.5px solid transparent;
	border-radius: var(--chrome-radius-pill);
	background: var(--aba-teal);
	color: #fff;
	font-size: .88rem;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(var(--aba-teal-rgb), .22);
	transition: transform .22s cubic-bezier(.16, 1, .3, 1), background .2s ease, box-shadow .22s ease;
}

.header-btn-primary:hover {
	background: var(--aba-teal-dark);
	color: #fff;
	transform: translateY(-1.5px);
	box-shadow: 0 8px 20px rgba(var(--aba-teal-rgb), .28);
}

.header-btn-primary:active {
	transform: translateY(0);
}

/* Secondary CTA — account / dashboard. */
.header-btn-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	min-height: 42px;
	padding: .62rem 1.2rem;
	border: 1.5px solid var(--chrome-border-light);
	border-radius: var(--chrome-radius-pill);
	background: #fff;
	color: var(--aba-teal);
	font-size: .88rem;
	white-space: nowrap;
	cursor: pointer;
	transition: var(--chrome-transition);
}

.header-btn-ghost:hover {
	border-color: var(--aba-teal);
	background: var(--aba-teal);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(var(--aba-teal-rgb), .18);
}

.aba-menu-btn {
	display: none;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border: 1.5px solid var(--chrome-border-light);
	border-radius: var(--chrome-radius-pill);
	background: var(--aba-teal-light);
	color: var(--aba-teal);
	font-size: 1.35rem;
	line-height: 1;
	cursor: pointer;
	transition: var(--chrome-transition);
}

.aba-menu-btn:hover {
	background: var(--aba-teal);
	border-color: var(--aba-teal);
	color: #fff;
}

.header-btn-primary:focus-visible,
.header-btn-ghost:focus-visible,
.header-email-ghost:focus-visible,
.aba-menu-btn:focus-visible {
	outline: 2px solid var(--aba-teal);
	outline-offset: 2px;
}

/* Second tier — nav row. Sits in the grid's `nav` area, beside the brand. */
.header-bottom-row {
	grid-area: nav;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .35rem 0 .7rem;
	border-top: 1px solid rgba(var(--aba-teal-rgb), .08);
	transition: max-height .35s ease, opacity .35s ease;
}

.aba-nav {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 1.15rem;
}

.aba-nav ul.aba-nav__list {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 1.15rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aba-nav__list li {
	position: relative;
	margin: 0;
}

.aba-nav__list a {
	position: relative;
	display: inline-flex;
	align-items: center;
	/* The walker appends a chevron inside the <a> for parent items. */
	gap: .28rem;
	min-height: 32px;
	padding: .42rem .15rem;
	color: #2d3748;
	font-size: .88rem;
	line-height: 1.2;
	white-space: nowrap;
	transition: color .2s ease;
}

.aba-nav__list a .aba-icon {
	opacity: .6;
}

.aba-nav__list a:hover,
.aba-nav__list li.current-menu-item > a,
.aba-nav__list li.current-menu-ancestor > a,
.aba-nav__list li.current_page_item > a {
	color: var(--aba-teal);
}

.aba-nav__list > li > a::after {
	content: "";
	position: absolute;
	bottom: -2px;
	right: 0;
	width: 0;
	height: 2px;
	border-radius: 9999px;
	background: var(--aba-teal);
	transition: width .26s cubic-bezier(.16, 1, .3, 1);
}

.aba-nav__list > li > a:hover::after,
.aba-nav__list > li.current-menu-item > a::after {
	width: 100%;
}

.aba-nav__list a:focus-visible {
	outline: 2px solid var(--aba-teal);
	outline-offset: 2px;
	border-radius: var(--chrome-radius-sm);
}

/* Sub-menus — flyout on desktop, inline list in the drawer. */
.aba-nav__list ul.sub-menu {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 20;
	min-width: 220px;
	margin: 0;
	padding: .4rem;
	list-style: none;
	border: 1px solid var(--chrome-border-light);
	border-radius: var(--chrome-radius-md);
	background: #fff;
	box-shadow: 0 12px 32px rgba(var(--aba-navy-rgb), .12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

.aba-nav__list li:hover > ul.sub-menu,
.aba-nav__list li:focus-within > ul.sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.aba-nav__list ul.sub-menu a {
	display: block;
	width: 100%;
	padding: .55rem .7rem;
	border-radius: var(--chrome-radius-sm);
	font-size: .85rem;
	white-space: normal;
}

.aba-nav__list ul.sub-menu a:hover {
	background: var(--aba-teal-light);
}

.aba-nav__list ul.sub-menu a::after {
	display: none;
}

/* Dashboard / portal link at the end of the nav row. */
.nav-portal-link {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	flex-shrink: 0;
	padding: .38rem .75rem;
	border: 1px solid rgba(var(--aba-teal-rgb), .12);
	border-radius: var(--chrome-radius-pill);
	background: var(--aba-teal-light);
	color: var(--aba-teal);
	font-size: .82rem;
	white-space: nowrap;
	transition: var(--chrome-transition);
}

.nav-portal-link:hover {
	background: var(--aba-teal);
	border-color: var(--aba-teal);
	color: #fff;
	transform: translateY(-1px);
}

/* ── 2. HERO ──────────────────────────────────────────────────────────────
   Full-bleed media (video → image → gradient), dark scrim, centred copy, and
   a single frosted bar holding both CTAs.
   ------------------------------------------------------------------------ */
.hero-video-section {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
	height: 75vh;
	height: 75dvh;
	min-height: 480px;
	min-height: max(480px, 55svh);
	max-height: 720px;
	padding-bottom: max(3.5rem, env(safe-area-inset-bottom));
	overflow: hidden;
	overflow: clip;
	isolation: isolate;
	color: #fff;
	text-align: center;
}

.hero-video-bg {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

/* Gradient fallback when neither a video nor an image is set. */
.hero-video-bg--gradient {
	background-color: var(--aba-navy);
	background-image:
		radial-gradient(24rem 18rem at 78% 12%, rgba(var(--aba-teal-rgb), .55), rgba(var(--aba-teal-rgb), 0) 66%),
		linear-gradient(150deg, var(--aba-navy) 0%, rgba(var(--aba-navy-rgb), .82) 55%, var(--aba-teal) 100%);
}

.hero-background-video,
.hero-background-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hero-overlay-dim {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(180deg, rgba(0, 0, 0, .10) 0%, rgba(0, 0, 0, .28) 55%, rgba(var(--aba-navy-rgb), .62) 100%);
}

.hero-content-wrapper {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: 860px;
	margin: 0 auto;
	padding: 0 1.25rem;
}

.hero-copy {
	max-width: 760px;
	margin: 0 auto 1.6rem;
	color: #fff;
	text-align: center;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .3);
}

.hero-kicker {
	display: inline-block;
	margin-bottom: .75rem;
	padding: .35rem .8rem;
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: 999px;
	background: rgba(var(--aba-navy-rgb), .28);
	font-size: .84rem;
	letter-spacing: .06em;
}

.hero-copy h1 {
	margin: 0 0 .75rem;
	color: #fff;
	font-size: clamp(1.85rem, 3.6vw, 3.1rem);
	line-height: 1.22;
}

/* The accent is a subordinate clause, not a second headline — it stays at the
   body weight so the h1 above it keeps the hierarchy. */
.hero-copy .hero-title-accent {
	display: block;
	margin-top: .5rem;
	font-size: .52em;
	font-weight: 400 !important;
	line-height: 1.6;
	color: rgba(255, 255, 255, .92);
}

.hero-copy p {
	max-width: 62ch;
	margin: 0 auto;
	color: rgba(255, 255, 255, .94);
	font-size: 1.05rem;
	line-height: 1.8;
}

.hero-badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .5rem .9rem;
	margin: 1.1rem 0 0;
	padding: 0;
	list-style: none;
}

.hero-badges li {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	margin: 0;
	padding: .28rem .7rem;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: var(--chrome-radius-pill);
	background: rgba(255, 255, 255, .14);
	color: #fff;
	font-size: .8rem;
}

.hero-badges .aba-icon {
	width: 15px;
	height: 15px;
	color: var(--aba-cyan);
}

.hero-floating-actions-bar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	padding: .5rem .6rem;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: var(--chrome-radius-pill);
	background: rgba(255, 255, 255, .15);
	box-shadow: 0 16px 36px rgba(0, 0, 0, .25);
	transition: var(--chrome-transition);
}

@supports (backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px)) {
	.hero-floating-actions-bar {
		-webkit-backdrop-filter: blur(16px);
		backdrop-filter: blur(16px);
	}
}

.hero-floating-actions-bar:hover {
	background: rgba(255, 255, 255, .22);
	border-color: rgba(255, 255, 255, .55);
}

.btn-hero-primary,
.btn-hero-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	min-height: 42px;
	padding: .55rem 1.25rem;
	border: 0;
	border-radius: var(--chrome-radius-pill);
	font-size: .9rem;
	white-space: nowrap;
	cursor: pointer;
	transition: var(--chrome-transition);
}

.btn-hero-primary .aba-icon,
.btn-hero-secondary .aba-icon {
	width: 16px;
	height: 16px;
}

.btn-hero-primary {
	background: var(--aba-teal);
	color: #fff;
	box-shadow: 0 8px 24px rgba(var(--aba-teal-rgb), .45);
}

.btn-hero-primary:hover {
	background: var(--aba-teal-dark);
	color: #fff;
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(var(--aba-teal-rgb), .6);
}

.btn-hero-secondary {
	background: #fff;
	color: var(--aba-teal);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
}

.btn-hero-secondary:hover {
	background: #f4fafc;
	color: var(--aba-teal-dark);
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, .25);
}

/* ── 3. FOOTER ────────────────────────────────────────────────────────────
   Navy mega-footer: brand column with trust strip + contact, two link
   columns, a newsletter/social column, then a darker utility bar.
   ------------------------------------------------------------------------ */
.aba-footer {
	position: relative;
	padding: 3.5rem 0 0;
	border-top: 1px solid rgba(255, 255, 255, .08);
	background: var(--aba-navy);
	color: #cbd5e1;
}

.aba-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 1260px;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(126, 211, 232, .14), transparent);
}

.footer-top-grid {
	display: grid;
	grid-template-columns: 1.55fr 1fr 1fr 1.15fr;
	gap: 2rem 1.75rem;
	padding-bottom: 2.5rem;
}

.aba-footer .site-brand {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	margin-bottom: .9rem;
	color: #fff;
}

.aba-footer .site-brand__logo {
	height: 42px;
	width: auto;
	max-width: 200px;
	max-height: none;
	object-fit: contain;
}

.aba-footer .site-brand__name {
	color: #fff;
	font-size: 1.02rem;
}

.aba-footer .site-brand__tagline {
	color: rgba(255, 255, 255, .5);
	font-size: .6rem;
	letter-spacing: .04em;
}

.footer-desc {
	margin-bottom: 1.15rem;
	color: #b8c6d5;
	font-size: .875rem;
	line-height: 1.7;
}

.footer-trust-strip {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .55rem;
	margin-bottom: 1.15rem;
	padding: .45rem .75rem;
	border: 1px solid rgba(255, 255, 255, .10);
	border-radius: var(--chrome-radius-pill);
	background: rgba(255, 255, 255, .07);
}

.footer-trust-item {
	color: #d4e3ee;
	font-size: .73rem;
	white-space: nowrap;
}

.footer-trust-item strong {
	color: #fff;
	letter-spacing: .02em;
}

.footer-trust-divider {
	flex-shrink: 0;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: rgba(126, 211, 232, .55);
}

.footer-findus {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.footer-contact-item {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	color: #b8c6d5;
	font-size: .84rem;
}

.footer-contact-item .aba-icon,
.footer-contact-item svg {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	color: var(--aba-cyan);
	opacity: .95;
}

.footer-contact-item:hover {
	color: #fff;
}

.footer-col-head {
	position: relative;
	margin: 0 0 1rem;
	padding-bottom: .55rem;
	color: #fff;
	font-size: .98rem;
	letter-spacing: .01em;
}

.footer-col-head::after {
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	width: 22px;
	height: 2px;
	border-radius: 9999px;
	background: rgba(126, 211, 232, .45);
}

/* The heading's inner button is a plain heading on desktop — the chevron and
   the tap target only appear at the accordion breakpoint below. */
.footer-col-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: start;
	cursor: default;
}

.footer-col-toggle .aba-icon {
	display: none;
	flex-shrink: 0;
	transition: transform .25s var(--chrome-transition, ease);
}

.footer-instructor {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 1.15rem;
	padding: .45rem .8rem;
	border: 1px solid rgba(255, 255, 255, .10);
	border-radius: var(--chrome-radius-pill);
	background: rgba(255, 255, 255, .07);
	color: #d4e3ee;
	font-size: .82rem;
}

.footer-instructor .aba-icon {
	flex-shrink: 0;
	color: var(--aba-cyan);
}

.footer-instructor strong {
	color: #fff;
}

.footer-instructor__creds {
	display: block;
	color: #9fb3c5;
	font-size: .7rem;
	letter-spacing: .04em;
}

.footer-links-col,
.aba-footer ul.footer-links-col {
	display: flex;
	flex-direction: column;
	gap: .55rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-links-col li {
	margin: 0;
}

.footer-links-col a,
.footer-link-a {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	color: #9fb3c5;
	font-size: .84rem;
	line-height: 1.5;
	transition: color .2s ease, transform .2s ease;
}

.footer-links-col a:hover,
.footer-link-a:hover {
	color: #fff;
	transform: translateX(-1.5px);
}

.footer-hours-note {
	margin: .35rem 0 0;
	padding-top: .6rem;
	border-top: 1px solid rgba(255, 255, 255, .08);
	color: var(--chrome-text-light);
	font-size: .74rem;
	line-height: 1.6;
}

/* Newsletter — posts over AJAX to the subscribers table (inc/newsletter.php),
   with a plain POST to admin-post.php as the no-JS fallback. */
.footer-newsletter {
	margin-top: 1.15rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(255, 255, 255, .08);
}

.footer-newsletter-label {
	display: block;
	margin-bottom: .45rem;
	color: #d4e3ee;
	font-size: .78rem;
}

.footer-newsletter-row {
	display: flex;
	align-items: center;
	gap: .4rem;
}

.footer-newsletter-input {
	flex: 1;
	min-width: 0;
	min-height: 38px;
	padding: .45rem .85rem;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--chrome-radius-pill);
	background: rgba(255, 255, 255, .08);
	color: #fff;
	font-size: .82rem;
	transition: var(--chrome-transition);
}

.footer-newsletter-input::placeholder {
	color: var(--chrome-text-light);
}

.footer-newsletter-input:focus {
	outline: none;
	background: rgba(255, 255, 255, .12);
	border-color: rgba(126, 211, 232, .45);
}

.footer-newsletter-btn {
	min-height: 38px;
	padding: .45rem .95rem;
	border: 1px solid transparent;
	border-radius: var(--chrome-radius-pill);
	background: var(--aba-teal);
	color: #fff;
	font-size: .78rem;
	white-space: nowrap;
	cursor: pointer;
	transition: var(--chrome-transition);
}

.footer-newsletter-btn:hover {
	background: var(--aba-teal-hover);
	transform: translateY(-1px);
}

.footer-newsletter-btn[disabled] {
	opacity: .65;
	cursor: progress;
	transform: none;
}

/* Bot trap — clipped rather than display:none, which some bots skip. Clipping
   (not a negative offset) keeps it from widening the page in this RTL layout. */
.footer-newsletter-trap {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.footer-newsletter-msg {
	margin: .55rem 0 0;
	font-size: .78rem;
	line-height: 1.6;
}

.footer-newsletter-msg.is-ok {
	color: #7ed3e8;
}

.footer-newsletter-msg.is-error {
	color: #ffb4ae;
}

.footer-social {
	display: flex;
	align-items: center;
	gap: .4rem;
	margin-top: .9rem;
}

.footer-social a,
.footer-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid rgba(255, 255, 255, .10);
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	color: #b8c6d5;
	transition: var(--chrome-transition);
}

.footer-social a:hover,
.footer-social-link:hover {
	background: #fff;
	border-color: #fff;
	color: var(--aba-navy);
	transform: translateY(-1.5px);
}

.footer-newsletter-btn:focus-visible,
.footer-social a:focus-visible,
.footer-links-col a:focus-visible,
.footer-backtop:focus-visible {
	outline: 2px solid var(--aba-cyan);
	outline-offset: 2px;
}

.footer-bottom-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem 1rem;
	padding: 1rem;
	border-top: 1px solid rgba(255, 255, 255, .10);
	background: rgba(0, 0, 0, .14);
	color: var(--chrome-text-light);
	font-size: .8rem;
}

.footer-bottom-left {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	min-width: 0;
}

.footer-copy {
	margin: 0;
	color: #b8c6d5;
	font-size: .8rem;
	letter-spacing: .01em;
}

.footer-bottom-tagline {
	margin: 0;
	color: #7fa0b8;
	font-size: .76rem;
	letter-spacing: .02em;
}

.footer-bottom-links {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .55rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .77rem;
}

.footer-bottom-links li {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	margin: 0;
}

.footer-bottom-links li + li::before {
	content: "";
	flex-shrink: 0;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .32);
}

.footer-bottom-links a {
	color: var(--chrome-text-light);
	font-size: .77rem;
	white-space: nowrap;
	transition: var(--chrome-transition);
}

.footer-bottom-links a:hover {
	color: #fff;
}

.footer-backtop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	color: #b8c6d5;
	transition: var(--chrome-transition);
}

/* The icon set has no chevron-up, so the down one is flipped. */
.footer-backtop .aba-icon {
	transform: rotate(180deg);
}

.footer-backtop:hover {
	background: #fff;
	border-color: #fff;
	color: var(--aba-navy);
	transform: translateY(-1.5px);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

/* ── 3.5 FLOATING WHATSAPP ────────────────────────────────────────────────
   The icon is now the official WhatsApp glyph — one solid path. main.css sets
   `stroke: currentColor; fill: none` on .aba-icon, which the path's own
   fill/stroke attributes already beat; these rules restate it so a future
   edit to main.css cannot quietly hollow the glyph out again.
   ------------------------------------------------------------------------ */
.aba-icon--whatsapp path {
	fill: currentColor;
	stroke: none;
}

.wa-float {
	width: 56px;
	height: 56px;
	/* WhatsApp brand green — deliberately NOT a theme token; the logo is
	   theirs and recolouring it reads as a different service. */
	background: #25d366;
	color: #fff;
	box-shadow: 0 6px 18px rgba(37, 211, 102, .34), 0 2px 6px rgba(var(--aba-navy-rgb), .18);
}

.wa-float .aba-icon {
	width: 30px;
	height: 30px;
}

.wa-float:hover {
	background: #1da851;
	color: #fff;
}

/* Keep it clear of the sticky footer bar on short screens. */
@media (max-height: 520px) {
	.wa-float {
		width: 48px;
		height: 48px;
	}

	.wa-float .aba-icon {
		width: 26px;
		height: 26px;
	}
}

/* ── 4. RESPONSIVE ────────────────────────────────────────────────────── */

@media (max-width: 1260px) and (min-width: 1025px) {
	.aba-nav,
	.aba-nav ul.aba-nav__list {
		gap: .75rem;
	}

	.aba-nav__list a {
		font-size: .82rem;
	}

	.nav-portal-link {
		padding: .32rem .6rem;
		font-size: .78rem;
	}
}

@media (max-width: 1024px) {
	.header-email-ghost {
		display: none;
	}

	.aba-nav,
	.aba-nav ul.aba-nav__list {
		gap: 1.15rem;
	}

	.aba-nav__list a {
		font-size: .85rem;
	}

	.footer-top-grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* Drawer breakpoint — nav row leaves the flow and becomes a full-height
   scrollable panel hanging off the measured header height. */
@media (max-width: 991px) {
	/* The two-row grid collapses: brand and actions share one row, and the
	   nav leaves the grid entirely to become the fixed drawer below. */
	.header-grid {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: nowrap;
		gap: .6rem;
		min-width: 0;
		padding: .62rem 0;
		column-gap: .6rem;
	}

	.header-brand-cluster {
		padding-inline-end: 0;
		border-inline-end: 0;
	}

	.header-actions-row {
		flex: 0 1 auto;
		justify-content: flex-end;
		gap: .38rem;
		min-width: 0;
		padding: 0;
	}

	.header-brand-cluster {
		flex: 1 1 auto;
		gap: .6rem;
		min-width: 0;
	}

	.aba-header .site-brand {
		flex-shrink: 0;
		min-width: 0;
	}

	.aba-header .site-brand__logo {
		height: 60px;
		max-width: 100%;
	}

	.header-trust-micro {
		display: none;
	}

	.header-actions-wrap {
		flex-shrink: 0;
		flex-wrap: nowrap;
		gap: .38rem;
	}

	.header-btn-primary {
		min-height: 40px;
		padding: .5rem 1rem;
		font-size: .82rem;
	}

	.header-btn-ghost {
		min-height: 40px;
		padding: .5rem .9rem;
		font-size: .82rem;
	}

	.header-btn-primary .aba-icon,
	.header-btn-ghost .aba-icon {
		width: 14px;
		height: 14px;
	}

	.aba-menu-btn {
		display: flex;
	}

	/* Desktop nav row is simply gone on mobile — the drawer is its own
	   element outside the header now (see header.php for why). */
	.header-bottom-row {
		display: none;
	}

	.aba-nav,
	.aba-nav ul.aba-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
	}

	.aba-nav__list a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 44px;
		padding: .9rem .5rem;
		border-bottom: 1px solid #f1f5f9;
		font-size: .95rem;
		white-space: normal;
	}

	.aba-nav__list > li:last-child > a {
		border-bottom: none;
	}

	.aba-nav__list > li > a::after {
		display: none;
	}

	/* Sub-menus go inline inside the drawer. */
	.aba-nav__list ul.sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		min-width: 0;
		margin: 0 0 .25rem;
		padding: 0 0 0 .25rem;
		border: 0;
		box-shadow: none;
		background: transparent;
	}

	.aba-nav__list ul.sub-menu a {
		padding: .7rem .5rem .7rem 1.25rem;
		font-size: .88rem;
		color: var(--chrome-text-muted);
	}

	.hero-video-section {
		height: 74svh;
		height: 74dvh;
		min-height: 520px;
		max-height: 680px;
		padding-inline: 0;
		padding-bottom: max(2rem, env(safe-area-inset-bottom));
	}

	.hero-content-wrapper {
		padding: 0 1rem;
	}

	.hero-floating-actions-bar {
		flex-direction: column;
		width: 100%;
		gap: .5rem;
		padding: .5rem;
		border-radius: var(--chrome-radius-lg);
	}

	.btn-hero-primary,
	.btn-hero-secondary {
		width: 100%;
		max-width: 100%;
		min-height: 44px;
		padding: .6rem 1.1rem;
		font-size: .88rem;
	}

	.footer-top-grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.footer-bottom-bar {
		flex-direction: column;
		align-items: center;
		gap: .75rem;
		text-align: center;
		padding-bottom: max(1rem, env(safe-area-inset-bottom));
	}

	.footer-bottom-left {
		align-items: center;
		text-align: center;
	}

	.footer-bottom-links {
		justify-content: center;
	}

	.footer-links-col a,
	.footer-link-a {
		min-height: 36px;
		align-items: center;
	}

	/* Footer columns become an accordion — four stacked open columns made the
	   mobile footer several screens tall. */
	.footer-col {
		border-bottom: 1px solid rgba(255, 255, 255, .09);
	}

	.footer-col .footer-col-head {
		margin: 0;
		padding: 0;
	}

	.footer-col .footer-col-head::after {
		display: none;
	}

	.footer-col-toggle {
		min-height: 48px;
		padding: .35rem 0;
		cursor: pointer;
	}

	.footer-col-toggle .aba-icon {
		display: block;
	}

	.footer-col-toggle[aria-expanded="true"] .aba-icon {
		transform: rotate(180deg);
	}

	.footer-col-body {
		overflow: hidden;
		padding-bottom: .5rem;
	}

	/* Collapsed by default; JS flips aria-expanded and this class together. */
	.footer-col-body:not(.is-open) {
		display: none;
	}

}

@media (max-width: 640px) {
	.container {
		padding: 0 1rem;
		padding-left: max(1rem, env(safe-area-inset-left));
		padding-right: max(1rem, env(safe-area-inset-right));
	}

	.aba-header .site-brand__logo {
		height: 56px;
	}

	.header-top-row {
		flex-wrap: nowrap;
		gap: .35rem;
		padding: .55rem 0;
	}

	.header-brand-cluster {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* Tagline stays visible on phones -- there is room beside the logo, and
	   the name alone ("ABA") does not identify the site. */
	.aba-header .site-brand__tagline {
		max-width: 13ch;
		font-size: .58rem;
		line-height: 1.4;
	}

	.aba-header .site-brand__name {
		font-size: 1.05rem;
	}

	.header-actions-wrap {
		flex-shrink: 0;
		flex-wrap: nowrap;
		gap: .32rem;
	}

	.header-btn-primary {
		min-height: 40px;
		gap: .35rem;
		padding: .45rem .85rem;
		font-size: .78rem;
	}

	.header-btn-ghost {
		min-height: 40px;
		padding: .42rem .75rem;
		font-size: .78rem;
	}

	.aba-menu-btn {
		width: 40px;
		min-width: 40px;
		height: 40px;
	}

	.hero-video-section {
		height: 70svh;
		height: 70dvh;
		min-height: 480px;
		max-height: 640px;
	}

	.hero-copy p {
		font-size: .98rem;
	}

	/* Pillar/feature cards stay two-up on phones. main.css uses auto-fit with
	   a 270px floor, which drops to a single column here and made the "من نحن"
	   pillars read as two full-width blocks. */
	.feature-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .7rem;
	}

	.feature-grid .feature {
		padding: 1rem .8rem;
	}

	.feature-grid .feature__title {
		font-size: 1rem;
	}

	.feature-grid .feature__text {
		font-size: .82rem;
		line-height: 1.7;
	}
}

@media (max-width: 480px) {
	.header-btn-ghost {
		display: none !important;
	}

	.aba-header .site-brand__logo {
		height: 50px;
	}

	.header-top-row {
		gap: .28rem;
	}

	.header-actions-wrap {
		gap: .26rem;
	}

	.header-btn-primary {
		padding: .42rem .75rem;
		font-size: .76rem;
	}

	.hero-video-section {
		height: 68svh;
		height: 68dvh;
		min-height: 460px;
		max-height: 620px;
	}

	.hero-badges {
		gap: .4rem .5rem;
	}
}

@media (max-width: 380px) {
	.aba-header .site-brand__logo {
		height: 46px;
	}

	.header-btn-primary {
		padding: .4rem .62rem;
		font-size: .74rem;
	}

	.header-actions-wrap {
		gap: .22rem;
	}

	.footer-trust-strip {
		gap: .35rem;
		padding: .35rem .5rem;
	}
}

/* ── 5. TOUCH · MOTION ────────────────────────────────────────────────── */
@media (hover: none) {
	.header-btn-primary:hover,
	.header-btn-ghost:hover,
	.header-email-ghost:hover,
	.nav-portal-link:hover,
	.btn-hero-primary:hover,
	.btn-hero-secondary:hover,
	.footer-social a:hover,
	.footer-backtop:hover,
	.footer-links-col a:hover,
	.footer-link-a:hover {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aba-drawer__panel {
		animation: none;
	}

	.header-btn-primary,
	.header-btn-ghost,
	.btn-hero-primary,
	.btn-hero-secondary,
	.footer-social a,
	.footer-backtop {
		transition: none;
	}
}

@media print {
	.aba-header,
	.aba-footer,
	.hero-video-section,
	.wa-float,
	#aba-preloader {
		display: none !important;
	}
}

/* ── 6. AUTH MODAL ────────────────────────────────────────────────────────
   Login / register popup, opened by anything carrying data-aba-auth. The
   panel reuses .aba-field and .btn from main.css so the inputs match every
   other form on the site; only the shell is defined here.
   ------------------------------------------------------------------------ */
.aba-modal {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
}

/* `display: flex` above outranks the browser's own `[hidden]{display:none}`
   rule, so the dialog rendered open on page load. An attribute selector on
   the same class wins the specificity contest and puts it back. */
.aba-modal[hidden] {
	display: none;
}

.aba-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(var(--aba-navy-rgb), .55);
	animation: abaModalFade .2s ease both;
}

@supports (backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px)) {
	.aba-modal__backdrop {
		-webkit-backdrop-filter: blur(4px);
		backdrop-filter: blur(4px);
	}
}

.aba-modal__panel {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 420px;
	/* The panel scrolls, not the page behind it. */
	max-height: calc(100vh - 2.5rem);
	max-height: calc(100dvh - 2.5rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 1.75rem 1.5rem 1.5rem;
	border-radius: var(--chrome-radius-lg);
	background: #fff;
	box-shadow: 0 24px 60px rgba(var(--aba-navy-rgb), .28);
	animation: abaModalRise .26s cubic-bezier(.16, 1, .3, 1) both;
}

.aba-modal__close {
	position: absolute;
	top: .85rem;
	/* inline-end is the LEFT edge in RTL — away from the logo. */
	inset-inline-end: .85rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--aba-teal-light);
	color: var(--aba-navy);
	cursor: pointer;
	transition: var(--chrome-transition);
}

.aba-modal__close:hover {
	background: var(--aba-teal);
	color: #fff;
}

.aba-modal__head {
	margin-bottom: 1.25rem;
	text-align: center;
}

.aba-modal__logo {
	width: 56px;
	height: 56px;
	margin: 0 auto .6rem;
	object-fit: contain;
}

.aba-modal__title {
	margin: 0 0 .3rem;
	color: var(--aba-navy);
	font-size: 1.15rem;
	line-height: 1.4;
}

.aba-modal__sub {
	margin: 0;
	color: var(--chrome-text-muted);
	font-size: .88rem;
	line-height: 1.6;
}

/* Segmented control rather than underlined tabs — reads as a switch, which
   is what a two-way login/register choice actually is. */
.aba-modal__tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	margin-bottom: 1.25rem;
	padding: 4px;
	border-radius: var(--chrome-radius-pill);
	background: var(--aba-teal-light);
}

.aba-modal__tab {
	min-height: 40px;
	padding: .5rem .75rem;
	border: 0;
	border-radius: var(--chrome-radius-pill);
	background: none;
	color: var(--aba-navy);
	font-size: .9rem;
	cursor: pointer;
	transition: var(--chrome-transition);
}

.aba-modal__tab:hover {
	color: var(--aba-teal-dark);
}

.aba-modal__tab.is-active {
	background: #fff;
	color: var(--aba-teal-dark);
	box-shadow: 0 2px 8px rgba(var(--aba-navy-rgb), .10);
}

.aba-modal__tab:focus-visible,
.aba-modal__close:focus-visible {
	outline: 2px solid var(--aba-teal);
	outline-offset: 2px;
}

.aba-modal .aba-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.aba-modal .aba-field label {
	font-size: .88rem;
}

.aba-modal__link {
	display: block;
	color: var(--chrome-text-muted);
	font-size: .84rem;
	text-align: center;
}

.aba-modal__link:hover {
	color: var(--aba-teal);
}

@keyframes abaModalFade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes abaModalRise {
	from {
		opacity: 0;
		transform: translateY(14px) scale(.98);
	}

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

@media (max-width: 480px) {
	.aba-modal {
		padding: .75rem;
	}

	.aba-modal__panel {
		padding: 1.5rem 1.15rem 1.25rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aba-modal__backdrop,
	.aba-modal__panel {
		animation: none;
	}
}

/* ── 7. FEATURE GRID — fixed 3 columns ────────────────────────────────────
   main.css uses `auto-fit, minmax(270px, 1fr)`, which resolved to 4 columns
   on a wide viewport and left the 6 feature cards as 4 + 2 — a ragged second
   row. This modifier pins the count so 6 cards read as two even rows of 3.
   The phone rule in §4 (two-up) still applies below 640px.
   ------------------------------------------------------------------------ */
.feature-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
	.feature-grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Inline error inside the auth dialog — replaces the trip to wp-login.php,
   where WordPress would render its own page in English. */
.aba-modal__error {
	margin: 0;
	padding: .7rem .85rem;
	border: 1px solid rgba(217, 74, 74, .28);
	border-radius: var(--chrome-radius-sm);
	background: #fdeeee;
	color: #a82f2f;
	font-size: .86rem;
	line-height: 1.6;
}

.aba-modal .aba-form button[aria-busy="true"] {
	opacity: .65;
	cursor: progress;
}

/* Success note in the auth dialog (password-reset confirmation). */
.aba-modal__note {
	margin: 0;
	padding: .7rem .85rem;
	border: 1px solid rgba(18, 163, 122, .28);
	border-radius: var(--chrome-radius-sm);
	background: #eafaf3;
	color: #0e7f5f;
	font-size: .86rem;
	line-height: 1.6;
}

/* "Back to login" is a button, not a link — keep it looking like the link
   beside it rather than inheriting button chrome. */
button.aba-modal__link {
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font: inherit;
}

/* ── 8. CHECKOUT AUTH — responsive course strip ───────────────────────────
   main.css lays this out as a flex row and only reflows at 600px, which left
   the price squeezed into a tall narrow capsule beside the title on phones
   and small tablets. Reflowing at 860px, and giving the price its own full
   width row, removes the squeeze entirely.
   ------------------------------------------------------------------------ */
@media (max-width: 860px) {
	.aba-checkout-auth__course {
		flex-direction: column;
		align-items: center;
		gap: .85rem;
		text-align: center;
	}

	/* The featured image is the square logo — stretching it to 16:10 (as the
	   600px rule did) distorts it. Keep it square and small. */
	.aba-checkout-auth__course img {
		width: 64px;
		height: 64px;
		aspect-ratio: auto;
	}

	.aba-checkout-auth__course > div {
		flex: 0 0 auto;
		width: 100%;
	}

	.aba-checkout-auth__price {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		width: 100%;
		margin-inline-start: 0;
		border-radius: var(--chrome-radius-md);
	}

	/* Tutor wraps the amounts in its own element; keep them on one line. */
	.aba-checkout-auth__price .tutor-item-price,
	.aba-checkout-auth__price .list-item-price {
		display: inline-flex;
		align-items: center;
		gap: 10px;
	}
}

/* ── 9. MOBILE DRAWER ─────────────────────────────────────────────────────
   A sibling of <header>, never a child of it. `position: fixed` resolves
   against the viewport only when no ancestor establishes a containing block
   for it — and .aba-header carries `backdrop-filter`, which does exactly
   that. While the drawer lived inside the header it anchored to the header's
   box instead of the screen, so once the page was scrolled it started above
   the fold and the page showed through beneath it.

   Hidden outright above the breakpoint, so the markup costs nothing on
   desktop where .header-bottom-row is the real nav.
   ------------------------------------------------------------------------ */
.aba-drawer {
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: none;
}

/* `hidden` alone would lose to `display: flex` below, same trap as the auth
   dialog — so the attribute gets its own higher-specificity rule. */
.aba-drawer[hidden] {
	display: none;
}

.aba-drawer.is-open {
	display: block;
}

.aba-drawer.is-open[hidden] {
	display: none;
}

.aba-drawer__panel {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	/* dvh tracks the mobile URL bar; vh is the fallback for older engines. */
	height: 100vh;
	height: 100dvh;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 0 1.25rem max(1.25rem, env(safe-area-inset-bottom));
	background: #fff;
	animation: abaDrawerIn .24s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes abaDrawerIn {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}

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

.aba-drawer__head {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex: 0 0 auto;
	margin-inline: -1.25rem;
	padding: .75rem 1.25rem;
	background: #fff;
	border-block-end: 1px solid var(--chrome-border-light);
}

.aba-drawer__head .site-brand__logo {
	width: auto;
	height: 46px;
	max-height: none;
}

.aba-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1.5px solid var(--chrome-border-light);
	border-radius: 50%;
	background: var(--aba-teal-light);
	color: var(--aba-navy);
	cursor: pointer;
	transition: var(--chrome-transition);
}

.aba-drawer__close:hover {
	background: var(--aba-teal);
	border-color: var(--aba-teal);
	color: #fff;
}

/* Links sit directly under the header rather than stretching to fill. */
.aba-drawer__nav {
	flex: 0 0 auto;
	display: block;
	width: 100%;
	padding-block-start: .5rem;
}

.aba-drawer__nav ul.aba-nav__list {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aba-drawer__nav .aba-nav__list li {
	margin: 0;
}

.aba-drawer__nav .aba-nav__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	min-height: 52px;
	padding: .85rem .25rem;
	border-block-end: 1px solid #f1f5f9;
	color: var(--aba-navy);
	font-size: 1rem;
	white-space: normal;
}

.aba-drawer__nav .aba-nav__list a::after {
	display: none;
}

.aba-drawer__nav .aba-nav__list li.current-menu-item > a {
	color: var(--aba-teal);
}

/* Sub-menus inline, not as flyouts. */
.aba-drawer__nav .aba-nav__list ul.sub-menu {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

.aba-drawer__nav .aba-nav__list ul.sub-menu a {
	min-height: 46px;
	padding-inline-start: 1.25rem;
	color: var(--chrome-text-muted);
	font-size: .92rem;
}

/* Actions pinned to the bottom of the panel. */
.aba-drawer__foot {
	display: flex;
	flex-direction: column;
	gap: .6rem;
	flex: 0 0 auto;
	margin-block-start: auto;
	padding-block-start: 1.25rem;
}

.aba-drawer__foot .nav-portal-link {
	display: inline-flex;
	width: 100%;
	justify-content: center;
	min-height: 48px;
	padding: .85rem;
	font-size: .95rem;
}

/* Desktop: the drawer must never appear, whatever the class state. */
@media (min-width: 992px) {
	.aba-drawer,
	.aba-drawer.is-open {
		display: none !important;
	}
}