/*
Theme Name: APPROUVA
Theme URI: https://approuva.com
Description: APPROUVA design system — Astra child theme implementing the APPROUVA Brand & Visual Identity Guidelines v1.0 (Midnight / Electric Blue / Violet, Plus Jakarta Sans + IBM Plex Sans Arabic). Gutenberg + Spectra.
Author: APPROUVA
Template: astra
Version: 1.0.0
Text Domain: approuva
Requires PHP: 8.0
*/

/* ==========================================================================
   1. Design tokens — derived from APPROUVA Brand Guidelines v1.0
   ========================================================================== */
:root {
	/* Brand */
	--apv-midnight: #0B0E30;
	--apv-navy-2: #141A3F;
	--apv-electric: #5844FE;
	--apv-electric-dark: #4A3AE0;
	--apv-violet: #7D35D8;

	/* Neutrals */
	--apv-white: #FFFFFF;
	--apv-soft: #F7F8FB;
	--apv-lgrey: #EDEFF5;
	--apv-cgrey: #C7CCDA;
	--apv-slate: #5A6178;
	--apv-line: #E4E7F0;

	/* Functional — system states only */
	--apv-success: #12B76A;
	--apv-warning: #F5A524;
	--apv-error: #E5484D;
	--apv-info: #2E90FA;

	/* Gradient — Violet -> Electric -> Midnight, 120deg */
	--apv-grad: linear-gradient(120deg, #7D35D8 0%, #5844FE 52%, #0B0E30 100%);
	--apv-grad-soft: linear-gradient(120deg, #7D35D8 0%, #5844FE 100%);

	/* Radius scale — buttons/inputs 12, cards 16, panels 20 */
	--apv-r-sm: 12px;
	--apv-r-md: 16px;
	--apv-r-lg: 20px;
	--apv-r-pill: 999px;

	/* Spacing scale */
	--apv-s-1: 4px;
	--apv-s-2: 8px;
	--apv-s-3: 12px;
	--apv-s-4: 16px;
	--apv-s-5: 24px;
	--apv-s-6: 32px;
	--apv-s-7: 48px;
	--apv-s-8: 64px;
	--apv-s-9: 96px;
	--apv-s-10: 128px;

	/* Shadows — very subtle, never heavy */
	--apv-shadow-sm: 0 1px 2px rgba(11, 14, 48, .05);
	--apv-shadow-md: 0 4px 16px rgba(11, 14, 48, .06);
	--apv-shadow-lg: 0 12px 40px rgba(11, 14, 48, .09);

	/* Type */
	--apv-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--apv-font-ar: "IBM Plex Sans Arabic", "Plus Jakarta Sans", system-ui, sans-serif;

	/* Layout */
	--apv-content: 1140px;
	--apv-narrow: 760px;

	--apv-ease: cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================================================
   2. Base
   ========================================================================== */
body {
	font-family: var(--apv-font);
	color: var(--apv-midnight);
	background: var(--apv-white);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

html[lang^="ar"] body,
body.rtl {
	font-family: var(--apv-font-ar);
	line-height: 1.85;
}

h1, h2, h3, h4, h5, h6,
.entry-title {
	font-family: var(--apv-font);
	color: var(--apv-midnight);
	letter-spacing: -.02em;
}

html[lang^="ar"] h1, html[lang^="ar"] h2, html[lang^="ar"] h3,
html[lang^="ar"] h4, html[lang^="ar"] h5, html[lang^="ar"] h6,
body.rtl h1, body.rtl h2, body.rtl h3, body.rtl h4, body.rtl h5, body.rtl h6 {
	font-family: var(--apv-font-ar);
	letter-spacing: 0;
}

h1 { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem); font-weight: 800; line-height: 1.08; letter-spacing: -.04em; }
h2 { font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); font-weight: 700; line-height: 1.15; letter-spacing: -.03em; }
h3 { font-size: clamp(1.375rem, 1.2rem + .7vw, 1.75rem); font-weight: 700; line-height: 1.25; }
h4 { font-size: 1.125rem; font-weight: 600; line-height: 1.35; }

p, li { font-size: 1.0625rem; line-height: 1.65; color: var(--apv-slate); }
.has-midnight-color p, p.apv-lead { color: inherit; }

p.apv-lead {
	font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem);
	line-height: 1.6;
	color: var(--apv-slate);
}

a { color: var(--apv-electric); text-underline-offset: .18em; }
a:hover, a:focus { color: var(--apv-electric-dark); }

:where(a, button, input, select, textarea, summary, .wp-block-button__link):focus-visible {
	outline: 3px solid var(--apv-electric);
	outline-offset: 3px;
	border-radius: 4px;
}

img { max-width: 100%; height: auto; }

/* ==========================================================================
   3. Layout primitives
   ========================================================================== */
.apv-section { padding-block: clamp(3.5rem, 2rem + 6vw, 7rem); }
.apv-section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.apv-section--soft { background: var(--apv-soft); }
.apv-section--dark { background: var(--apv-midnight); }
.apv-section--dark :where(h1, h2, h3, h4, h5, h6, .apv-eyebrow) { color: var(--apv-white); }
.apv-section--dark :where(p, li) { color: #B9BDE0; }

.apv-eyebrow {
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--apv-electric);
	margin-bottom: var(--apv-s-3);
	display: block;
}

.apv-eyebrow--muted { color: var(--apv-slate); }

/* Gradient text accent — used once per view, on a key word */
.apv-gradient-text {
	background: var(--apv-grad-soft);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	/* background-clip:text paints only inside the box; with tight display line-heights the
	   descenders (g, p, y, Arabic ي ج) fell outside it and were cut off — «Kenntnisprüfung»
	   read «Kenntnisprüfunq» (measured 2026-09-23). Extend the painted box downward. */
	padding-block-end: .14em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* ==========================================================================
   4. Buttons
   ========================================================================== */
.wp-block-button__link,
.apv-btn {
	font-family: var(--apv-font);
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: -.01em;
	border-radius: var(--apv-r-sm);
	padding: .9rem 1.6rem;
	line-height: 1.2;
	transition: background-color .2s var(--apv-ease), color .2s var(--apv-ease),
		border-color .2s var(--apv-ease), transform .2s var(--apv-ease), box-shadow .2s var(--apv-ease);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	flex-wrap: wrap;
	justify-content: center;
}

/* LinkButton.tsx's ArrowRight, wired to the .apv-arrow SVG emitted by build/blocks.py's
   button(); RTL mirror rule already existed in §11 (scaleX(-1)) — this just gives it an
   element to mirror. flex-shrink keeps the icon from squeezing when the label wraps on
   narrow widths (390) instead of the whole button growing a second line under it. */
.wp-block-button__link .apv-arrow { flex-shrink: 0; }

html[lang^="ar"] .wp-block-button__link,
html[lang^="ar"] .apv-btn { font-family: var(--apv-font-ar); }

/* Primary */
.wp-block-button:not(.is-style-outline):not(.is-style-apv-ghost) > .wp-block-button__link,
.apv-btn--primary {
	background: var(--apv-electric);
	color: var(--apv-white);
	border: 1px solid var(--apv-electric);
	box-shadow: 0 6px 20px rgba(88, 68, 254, .22);
}

.wp-block-button:not(.is-style-outline):not(.is-style-apv-ghost) > .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline):not(.is-style-apv-ghost) > .wp-block-button__link:focus,
.apv-btn--primary:hover, .apv-btn--primary:focus {
	background: var(--apv-electric-dark);
	border-color: var(--apv-electric-dark);
	color: var(--apv-white);
	transform: translateY(-1px);
	box-shadow: 0 10px 26px rgba(88, 68, 254, .28);
}

/* Secondary — white with Midnight border */
.wp-block-button.is-style-outline > .wp-block-button__link,
.apv-btn--secondary {
	background: transparent;
	color: var(--apv-midnight);
	border: 1px solid var(--apv-cgrey);
	box-shadow: none;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus,
.apv-btn--secondary:hover, .apv-btn--secondary:focus {
	border-color: var(--apv-midnight);
	background: var(--apv-white);
	color: var(--apv-midnight);
	transform: translateY(-1px);
}

.apv-section--dark .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--apv-white);
	border-color: rgba(255, 255, 255, .28);
}

.apv-section--dark .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: var(--apv-white);
	background: rgba(255, 255, 255, .06);
	color: var(--apv-white);
}

/* ==========================================================================
   5. Cards
   ========================================================================== */
.apv-card {
	background: var(--apv-white);
	border: 1px solid var(--apv-line);
	border-radius: var(--apv-r-md);
	padding: var(--apv-s-6);
	box-shadow: var(--apv-shadow-sm);
	height: 100%;
	transition: box-shadow .25s var(--apv-ease), transform .25s var(--apv-ease), border-color .25s var(--apv-ease);
}

.apv-card:hover {
	box-shadow: var(--apv-shadow-md);
	border-color: var(--apv-cgrey);
	transform: translateY(-2px);
}

.apv-card h3 { margin-top: 0; margin-bottom: var(--apv-s-3); }
.apv-card p:last-child { margin-bottom: 0; }

.apv-card--flat:hover { transform: none; box-shadow: var(--apv-shadow-sm); }

/* Numbered step / capability card */
.apv-card--numbered { position: relative; }
.apv-card--numbered .apv-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--apv-r-sm);
	background: var(--apv-soft);
	color: var(--apv-electric);
	font-weight: 700;
	font-size: .9375rem;
	margin-bottom: var(--apv-s-4);
	font-variant-numeric: tabular-nums;
}

/* Program card */
.apv-card--program { display: flex; flex-direction: column; }
.apv-card--program .apv-badge { margin-bottom: var(--apv-s-4); }
.apv-card--program .wp-block-buttons { margin-top: auto; padding-top: var(--apv-s-5); }

.apv-badge {
	display: inline-block;
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: .35rem .7rem;
	border-radius: var(--apv-r-pill);
	background: var(--apv-lgrey);
	color: var(--apv-slate);
}

.apv-badge--live { background: rgba(88, 68, 254, .1); color: var(--apv-electric); }
.apv-badge--soon { background: var(--apv-lgrey); color: var(--apv-slate); }

/* ==========================================================================
   6. Hero
   ========================================================================== */
.apv-hero {
	position: relative;
	background: var(--apv-midnight);
	overflow: hidden;
	isolation: isolate;
}

.apv-hero::before {
	content: "";
	position: absolute;
	inset: -20% -10% auto -10%;
	height: 120%;
	background: radial-gradient(60% 55% at 28% 20%, rgba(125, 53, 216, .42) 0%, rgba(125, 53, 216, 0) 62%),
		radial-gradient(52% 48% at 78% 68%, rgba(88, 68, 254, .38) 0%, rgba(88, 68, 254, 0) 60%);
	z-index: -1;
	pointer-events: none;
}

.apv-hero :where(h1, h2) { color: var(--apv-white); }
.apv-hero p { color: #C9CBF5; }
.apv-hero .apv-eyebrow { color: #B9BDE0; }

/* ==========================================================================
   7. FAQ — core/details, accessible, no JS
   ========================================================================== */
.apv-faq .wp-block-details {
	border: 1px solid var(--apv-line);
	border-radius: var(--apv-r-md);
	background: var(--apv-white);
	padding: 0;
	margin-bottom: var(--apv-s-3);
	overflow: hidden;
}

.apv-faq .wp-block-details > summary {
	cursor: pointer;
	padding: 1.15rem 1.35rem;
	font-weight: 600;
	font-size: 1.0625rem;
	color: var(--apv-midnight);
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--apv-s-4);
	transition: background-color .2s var(--apv-ease);
}

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

.apv-faq .wp-block-details > summary::after {
	content: "";
	flex: 0 0 auto;
	width: .6rem;
	height: .6rem;
	border-right: 2px solid var(--apv-slate);
	border-bottom: 2px solid var(--apv-slate);
	transform: rotate(45deg) translateY(-2px);
	transition: transform .2s var(--apv-ease);
}

.apv-faq .wp-block-details[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.apv-faq .wp-block-details > summary:hover { background: var(--apv-soft); }
.apv-faq .wp-block-details[open] > summary { background: var(--apv-soft); }
.apv-faq .wp-block-details > :not(summary) { padding: 0 1.35rem 1.25rem; margin: 0; }
.apv-faq .wp-block-details > p { color: var(--apv-slate); }

/* ==========================================================================
   8. Header / navigation
   ========================================================================== */
/* The APPROUVA logo already contains the wordmark — never show the site title
   text beside it, or the brand name appears twice in two different typefaces. */
.ast-site-title-wrap,
.site-header .site-title,
.site-header .site-description { display: none !important; }

.site-header .custom-logo-link img,
.site-header .astra-logo-svg { max-height: 56px; width: auto; }

.site-header { border-bottom: 1px solid var(--apv-line); }
.ast-primary-header-bar, .main-header-bar { padding-block: .5rem; }

/* Hero image */
.apv-hero-img img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	box-shadow: 0 24px 60px rgba(11, 14, 48, .38);
}

@media (max-width: 900px) {
	.apv-hero .wp-block-columns { gap: var(--apv-s-6); }
	.apv-hero-img img { aspect-ratio: 16 / 10; }
}

.main-header-menu .menu-link,
.main-navigation .menu-link {
	font-weight: 600;
	font-size: .9375rem;
	letter-spacing: -.01em;
	color: var(--apv-midnight);
}

.main-header-menu .menu-link:hover,
.main-header-menu .current-menu-item > .menu-link { color: var(--apv-electric); }

/* Language switcher (Polylang) in the menu */
.menu-item .lang-item > a { display: inline-flex; align-items: center; gap: .4rem; }
.lang-item img.iclflag { border-radius: 2px; }

.main-header-menu .pll-parent-menu-item > a {
	border: 1px solid var(--apv-line);
	border-radius: var(--apv-r-pill);
	padding-inline: .9rem;
	font-size: .875rem;
}

.main-header-menu .pll-parent-menu-item > a:hover { border-color: var(--apv-cgrey); }

/* ==========================================================================
   9. Footer
   ========================================================================== */
.apv-footer { background: var(--apv-midnight); color: #B9BDE0; }
.apv-footer :where(h2, h3, h4, strong) { color: var(--apv-white); }
.apv-footer a { color: #C9CBF5; text-decoration: none; }
.apv-footer a:hover, .apv-footer a:focus { color: var(--apv-white); text-decoration: underline; }
.apv-footer ul { list-style: none; padding: 0; margin: 0; }
.apv-footer li { margin-bottom: .6rem; color: inherit; }
.apv-footer-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: var(--apv-s-7) var(--apv-s-5);
}

.apv-footer-grid h4 { margin: 0 0 var(--apv-s-4); font-size: .875rem; letter-spacing: .06em; text-transform: uppercase; }
.apv-footer-grid p { font-size: .9375rem; color: #B9BDE0; }

@media (max-width: 900px) {
	.apv-footer-grid { grid-template-columns: 1fr 1fr; }
	.apv-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
	.apv-footer-grid { grid-template-columns: 1fr; gap: var(--apv-s-6); }
}

.apv-footer .apv-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, .1);
	margin-top: var(--apv-s-7);
	padding-top: var(--apv-s-5);
	font-size: .875rem;
}

/* ==========================================================================
   10. Forms — Fluent Forms mapped to the design system
   ========================================================================== */
.fluentform .ff-el-input--label label,
.fluentform label {
	font-family: var(--apv-font);
	font-weight: 600;
	font-size: .9375rem;
	color: var(--apv-midnight);
}

html[lang^="ar"] .fluentform label { font-family: var(--apv-font-ar); }

.fluentform .ff-el-form-control {
	font-family: inherit;
	font-size: 1rem;
	color: var(--apv-midnight);
	background: var(--apv-white);
	border: 1px solid var(--apv-cgrey);
	border-radius: var(--apv-r-sm);
	padding: .85rem 1rem;
	min-height: 48px;
	transition: border-color .2s var(--apv-ease), box-shadow .2s var(--apv-ease);
	box-shadow: none;
}

.fluentform .ff-el-form-control:focus {
	border-color: var(--apv-electric);
	box-shadow: 0 0 0 3px rgba(88, 68, 254, .16);
	outline: none;
}

.fluentform textarea.ff-el-form-control { min-height: 140px; }

.fluentform .ff-btn-submit {
	background: var(--apv-electric);
	border: 1px solid var(--apv-electric);
	color: var(--apv-white);
	font-weight: 600;
	font-size: 1rem;
	border-radius: var(--apv-r-sm);
	padding: .9rem 1.8rem;
	min-height: 48px;
	box-shadow: 0 6px 20px rgba(88, 68, 254, .22);
	transition: background-color .2s var(--apv-ease), transform .2s var(--apv-ease);
}

.fluentform .ff-btn-submit:hover { background: var(--apv-electric-dark); transform: translateY(-1px); }
.fluentform .ff-el-is-error .ff-el-form-control { border-color: var(--apv-error); }
.fluentform .error, .fluentform .text-danger { color: var(--apv-error); font-size: .875rem; }
.fluentform .ff-el-group { margin-bottom: var(--apv-s-5); }
.ff-message-success {
	border: 1px solid var(--apv-success);
	background: rgba(18, 183, 106, .06);
	color: var(--apv-midnight);
	border-radius: var(--apv-r-md);
	padding: var(--apv-s-5);
}

/* ==========================================================================
   11. RTL corrections
   ========================================================================== */
html[dir="rtl"] .apv-eyebrow { letter-spacing: 0; }
html[dir="rtl"] .apv-faq .wp-block-details > summary::after { transform: rotate(135deg) translateY(-2px); }
html[dir="rtl"] .apv-faq .wp-block-details[open] > summary::after { transform: rotate(-45deg) translateY(-2px); }
html[dir="rtl"] .apv-card--numbered .apv-num { font-variant-numeric: normal; }
html[dir="rtl"] .wp-block-button__link .apv-arrow,
html[dir="rtl"] .apv-arrow { transform: scaleX(-1); display: inline-block; }

/* ==========================================================================
   11b. Legal pages — Impressum / Datenschutz
   ========================================================================== */
.apv-legal h2 {
	font-size: 1.25rem;
	margin-top: var(--apv-s-7);
	margin-bottom: var(--apv-s-3);
	padding-top: var(--apv-s-5);
	border-top: 1px solid var(--apv-line);
}

.apv-legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.apv-legal p { margin-bottom: var(--apv-s-4); }

/* An unresolved provider detail. Impossible to miss, in the editor and on the
   page, so the text can never go public half-filled. */
.apv-placeholder {
	display: inline;
	background: rgba(229, 72, 77, .1);
	color: #A32126;
	border: 1px dashed rgba(229, 72, 77, .5);
	border-radius: 6px;
	padding: .05em .4em;
	font-size: .9375em;
	font-weight: 500;
}

/* ==========================================================================
   12. Utility
   ========================================================================== */
.apv-stack-sm > * + * { margin-top: var(--apv-s-3); }
.apv-measure { max-width: 62ch; }
.screen-reader-text:focus {
	background: var(--apv-white);
	color: var(--apv-midnight);
	z-index: 100000;
	padding: 1rem 1.5rem;
	border-radius: var(--apv-r-sm);
	box-shadow: var(--apv-shadow-lg);
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   13. Approved home sections (design/approved-2026-09-20, Lovable 59d6472)
   ========================================================================== */
/* Centered stacks: hero, pricing/FAQ intros, final CTA */
.apv-center { text-align: center; }
.apv-center .wp-block-buttons { justify-content: center; }
.apv-center .apv-eyebrow { display: block; }
.apv-center .wp-block-image { margin-inline: auto; }

/* Thank-you page — Lovable $lang.thank-you.tsx: light (secondary/50), centred, min 70vh,
   success check, H1 36/60 px, muted lead + small next-step line. */
.apv-thanks {
	background: color-mix(in srgb, #EDEFF5 50%, var(--apv-soft));
	min-block-size: 70vh;
	display: grid;
	align-content: center;
	padding-block: clamp(4rem, 3rem + 4vw, 6rem);
}
.apv-thanks .apv-thanks-check { display: block; margin-inline: auto; color: #198754; }
.apv-thanks h1 { margin-block: 1.5rem 0; font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem); line-height: 1.1; }
.apv-thanks p.apv-lead { margin-block-start: 1.25rem; }
.apv-thanks p.apv-thanks-next { margin-block-start: 1rem; font-size: .9375rem; color: var(--apv-slate); }

/* Hero — the only dark section. Approved 59d6472 scene: midnight ambient glow + the
   stethoscope/ribbon art along the bottom (bytes from the Lovable handoff package,
   source/lovable-handoff/assets/backgrounds/hero-stethoscope.jpg, 1672×441), faded into
   the midnight at its top edge the way Lovable's .hero-stethoscope mask does. */
/* Layer 1 (added 2026-09-23 after Tarek's screenshot): a fade sized EXACTLY to the art
   (width × 441/1672, or 48% of the height on mobile) and pinned to the bottom with it. The
   section-wide fade (layer 2) ends above the art's top edge, so at ≥768 px the art's top
   edge showed as a hard horizontal line and the painted-out caption patch sat visibly next
   to the H1. This does what Lovable's .hero-stethoscope mask does: dissolve the art's own
   top edge into the midnight. */
/* The art's ?ver= below must equal APPROUVA_HERO_VER in functions.php (LCP preload). */
.apv-hero--ribbon {
	background-image:
		linear-gradient(to bottom, #0b0e30 0%, rgb(11 14 48 / .72) 24%, rgb(11 14 48 / 0) 64%),
		linear-gradient(to bottom, #0b0e30 0%, rgb(11 14 48 / .55) 38%, rgb(11 14 48 / 0) 62%),
		url(assets/img/approuva-hero-stethoscope.webp?ver=1790184837),
		radial-gradient(60% 52% at 50% 25%, rgb(88 68 254 / .2), transparent 72%),
		linear-gradient(180deg, #0b0e30 0%, #0b0e30 62%, #14164a 100%);
	background-repeat: no-repeat;
	background-size: 100% calc(100vw * 441 / 1672), 100% 100%, 100% auto, 100% 100%, 100% 100%;
	background-position: center bottom, center, center bottom, center, center;
	padding-block: clamp(5rem, 3rem + 8vw, 9rem) clamp(8rem, 4rem + 14vw, 16rem);
}
@media (max-width: 767px) {
	.apv-hero--ribbon { background-size: 100% 48%, 100% 100%, auto 48%, 100% 100%, 100% 100%; background-position: center bottom, center, 54% bottom, center, center; }
}
@media (max-width: 1279px) {
	.apv-hero--ribbon { background-image:
		linear-gradient(to bottom, #0b0e30 0%, rgb(11 14 48 / .72) 24%, rgb(11 14 48 / 0) 64%),
		linear-gradient(to bottom, #0b0e30 0%, rgb(11 14 48 / .55) 38%, rgb(11 14 48 / 0) 62%),
		url(assets/img/approuva-hero-stethoscope-1200.webp?ver=1790184837),
		radial-gradient(60% 52% at 50% 25%, rgb(88 68 254 / .2), transparent 72%),
		linear-gradient(180deg, #0b0e30 0%, #0b0e30 62%, #14164a 100%); }
}
.apv-hero--ribbon h1 { font-size: clamp(2.75rem, 1.5rem + 5.5vw, 6rem); line-height: .96; }
.apv-hero--ribbon h1 .apv-gradient-text { display: block; margin-block-end: -.14em; }
/* The theme-wide .apv-gradient-text formula (--apv-grad-soft: #7D35D8 -> #5844FE) is
   near-identical in hue and value to the stethoscope art directly behind it here, so
   the accent line of the H1 nearly disappears into the image (measured 2026-09-23).
   Lovable's own approved hero (styles.css .hero-gradient) uses a lighter, higher-
   contrast formula for exactly this image-backed headline — reused verbatim instead
   of inventing a new one. */
.apv-hero--ribbon h1 .apv-gradient-text {
	background: linear-gradient(100deg, #c995ff 0%, #7867ff 56%, #9c77f4 100%);
	-webkit-background-clip: text;
	background-clip: text;
}
.apv-hero--ribbon p.apv-lead { color: var(--apv-white); font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem); }

/* Sections that used to fake the ribbon with a per-section background image
   (assets/img/approuva-ribbon-light.webp) — superseded by the ONE global
   WebGL ribbon layer (assets/js/approuva-ribbon.js, assets/css/ribbon.css,
   front page only). Plain section background colour only; nothing else here
   changes, so unrelated section layout does not shift. */
.apv-section--ribbon {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--apv-white);
}
.apv-section--ribbon.apv-section--soft { background-color: var(--apv-soft); }

/* KP challenge — three numbered markers, staggered like the wave in the design */
.apv-markers .apv-card { background: transparent; border: 0; box-shadow: none; padding-inline: 0; }
.apv-markers .apv-card:hover { transform: none; }
.apv-markers .apv-card h3 { font-size: 1.25rem; }
@media (min-width: 782px) {
	.apv-markers .wp-block-column:nth-child(2) { padding-top: var(--apv-s-9); }
	.apv-markers .wp-block-column:nth-child(3) { padding-top: var(--apv-s-5); }
}

/* LEARN · PRACTICE · PASS */
.apv-pills { display: flex; flex-wrap: wrap; gap: var(--apv-s-4) var(--apv-s-6); margin-top: var(--apv-s-6); }
.apv-pill {
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--apv-electric);
}
.apv-pill + .apv-pill::before { content: "→"; margin-inline-end: var(--apv-s-6); color: var(--apv-cgrey); }
html[dir="rtl"] .apv-pill + .apv-pill::before { content: "←"; }

/* Mentor — portrait column + stats row */
.apv-mentor-img img { width: 100%; height: auto; box-shadow: 0 24px 60px rgba(11, 14, 48, .16); }
.apv-stats { margin-top: var(--apv-s-6) !important; }
.apv-stats .wp-block-column { flex-basis: 0; }
.apv-stat { padding: var(--apv-s-5); }
.apv-stat .apv-stat-value { font-size: 1.5rem; color: var(--apv-electric); margin-bottom: var(--apv-s-2); }
.apv-stat p { margin: 0; font-size: .8125rem; line-height: 1.4; }
.apv-stats-note { margin-top: var(--apv-s-3); }

/* Dark card (Live KP, Early Bird) */
.apv-card--dark,
.apv-card--dark:hover {
	background: var(--apv-midnight) url(assets/img/approuva-live-kp-device-1200.webp) no-repeat center / cover;
	border-color: var(--apv-midnight);
	position: relative;
	isolation: isolate;
}
.apv-card--dark::before { content: ""; position: absolute; inset: 0; background: rgba(11, 14, 48, .72); z-index: -1; border-radius: inherit; }
.apv-card--dark.apv-card--price { background-image: none; }
.apv-card--dark :where(h3, h4) { color: var(--apv-white); }
.apv-card--dark p { color: #C9CBF5; }
.apv-card--dark .apv-eyebrow { color: #B9BDE0; }
.apv-card--dark .apv-badge { background: rgba(255, 255, 255, .1); color: var(--apv-white); }
.apv-card--dark .wp-block-button:not(.is-style-outline) > .wp-block-button__link { background: var(--apv-white); color: var(--apv-midnight); border-color: var(--apv-white); box-shadow: none; }
.apv-card--dark .wp-block-button.is-style-outline > .wp-block-button__link { color: var(--apv-white); border-color: rgba(255, 255, 255, .35); }

/* Program cards need room for the artwork */
.apv-paths .apv-card { min-height: 420px; padding: var(--apv-s-7) var(--apv-s-6); }
.apv-paths .apv-card h3 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); }

/* Outcomes — ten cards, five per row on wide screens */
.apv-outcomes .apv-card h3 { font-size: 1.0625rem; }
.apv-outcomes .apv-card p { font-size: .9375rem; line-height: 1.55; }
.apv-outcomes .apv-card--numbered .apv-num { width: 2rem; height: 2rem; font-size: .8125rem; }
@media (max-width: 1100px) and (min-width: 782px) {
	.apv-outcomes .wp-block-columns { flex-wrap: wrap; }
	.apv-outcomes .wp-block-column { flex-basis: calc(33.333% - var(--apv-s-6)) !important; }
}
.apv-goal {
	display: inline-block;
	margin-top: var(--apv-s-6);
	padding: .75rem 1.5rem;
	border: 1px solid rgba(88, 68, 254, .2);
	border-radius: var(--apv-r-pill);
	background: var(--apv-white);
	color: var(--apv-electric);
	font-weight: 600;
	font-size: .9375rem;
	box-shadow: var(--apv-shadow-sm);
}

/* Pricing */
.apv-card--price .apv-price { font-size: clamp(2rem, 1.6rem + 1.5vw, 2.75rem); letter-spacing: -.03em; margin-bottom: var(--apv-s-4); }
.apv-card--price .apv-eyebrow { margin-bottom: var(--apv-s-4); }
.apv-pricing .wp-block-columns + .wp-block-columns { margin-top: var(--apv-s-5) !important; }
.apv-pricing .apv-card--compact { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 var(--apv-s-6); }
.apv-pricing .apv-card--compact .apv-eyebrow { flex-basis: 100%; }
.apv-pricing .apv-card--compact .apv-price { margin-bottom: 0; }
.apv-pricing .apv-card--compact p:not(.apv-eyebrow) { flex: 1 1 14rem; }
.apv-pricing .apv-card--compact .wp-block-buttons { margin-top: 0; padding-top: 0; }

/* FAQ with the "we're here to help" aside */
.apv-faq-aside { border-inline-start: 2px solid var(--apv-electric); padding-inline-start: var(--apv-s-5); }
.apv-faq-aside h3 { font-size: clamp(1.5rem, 1.3rem + 1vw, 2.25rem); line-height: 1.05; }
.apv-faq-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--apv-s-4);
	margin-top: var(--apv-s-5);
	padding: var(--apv-s-5) var(--apv-s-6);
	border: 1px solid rgba(88, 68, 254, .15);
	border-radius: var(--apv-r-md);
	background: var(--apv-white);
	box-shadow: var(--apv-shadow-sm);
}
.apv-faq-cta .apv-eyebrow { margin: 0; }
.apv-faq-cta .wp-block-buttons { margin: 0 !important; }

/* Final CTA logo */
.apv-final-logo img { width: 176px; height: auto; margin-bottom: var(--apv-s-6); }

/* ==========================================================================
   14. 2026-09-22 HEAD 8f5a9e3 sections (registration, curriculum, announcement bar)
   Logical properties throughout so AR/RTL mirrors correctly; no physical
   left/right beyond what the shared card/section rules above already use.
   ========================================================================== */

/* SiteHeader.tsx's sticky registration notice. Originally shipped as the home page's
   first content block because this theme had no header.php (Astra rendered the
   header) — 2026-09-22 header/footer parity added header.php, so this now renders
   site-wide from there instead (see §15); the markup/classes are unchanged. */
.apv-announce { padding-block: var(--apv-s-3); background: var(--apv-midnight); }
.apv-announce-text {
	margin: 0;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--apv-white);
}
.apv-announce-text a {
	color: var(--apv-white);
	text-decoration: none;
	border-block-end: 1px solid rgba(255, 255, 255, .35);
	padding-block-end: .1em;
}
.apv-announce-text a:hover,
.apv-announce-text a:focus-visible { border-block-end-color: var(--apv-white); }

/* RegistrationSection.tsx — status chip + title + two facts, real Fluent Form beside it.
   overflow:hidden used to sit on .apv-registration-columns to clip both columns to the
   panel's rounded corners; removed (2026-09-23) because position:sticky never works
   inside an overflow-clipped ancestor, and it is no longer needed for the rounding —
   .apv-registration-form now carries its own inset border-radius instead of relying on
   the outer clip (matches RegistrationSection.tsx's own `m-3 ... rounded-xl` box, not
   an edge-to-edge grey fill). align-items:stretch (WP's default for is-vertically-
   aligned-* columns is stretch already, but stated explicitly since the "top" valign
   this used to have on the wrapper is gone) makes the row's height follow the taller
   column — normally the real multi-field Fluent Form — so the grey box always reaches
   the row's full height instead of floating short with a bare gap below it. */
.apv-registration {
	padding-block: var(--apv-s-8);
}
.apv-registration-columns {
	border: 1px solid rgba(88, 68, 254, .16);
	border-radius: var(--apv-r-lg);
	background: var(--apv-white);
	box-shadow: var(--apv-shadow-lg);
	align-items: stretch;
}
.apv-registration-columns > .wp-block-column {
	padding: var(--apv-s-7) var(--apv-s-6);
}
.apv-registration-columns .apv-lead { max-width: 34rem; }
/* Text column: top-aligned (not centered) and, on desktop, sticky — so it stays next
   to a scrolling multi-field form instead of floating mid-height in empty space. */
.apv-reg-text { align-self: flex-start; }
@media (min-width: 782px) {
	.apv-reg-text { position: sticky; top: 7.5rem; }
}
.apv-registration-columns .apv-icon-list {
	margin-block-start: var(--apv-s-5);
	list-style: none;
	padding-inline-start: 0;
	display: grid;
	gap: var(--apv-s-3);
}
.apv-registration-columns .apv-icon-list li {
	display: flex;
	align-items: center;
	gap: var(--apv-s-3);
	font-weight: 600;
}
.apv-icon-list-ic {
	display: inline-flex;
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(88, 68, 254, .1);
	color: var(--apv-electric);
}
.apv-icon-list-ic svg { display: block; }
.apv-registration-form {
	align-self: stretch;
	background: var(--apv-soft);
	border-radius: var(--apv-r-md);
	margin: var(--apv-s-4);
	padding: 0 !important;
	display: flex;
	align-items: center;
}
@media (max-width: 781px) {
	.apv-registration-form { margin-inline: var(--apv-s-3); margin-block: 0 var(--apv-s-3); }
}
.apv-registration-form .wp-block-shortcode { display: block; width: 100%; padding: var(--apv-s-6) var(--apv-s-5); }
.apv-registration-form form.frm-fluent-form,
.apv-registration-form .fluentform { max-width: 34rem; margin-inline: auto; }

/* CurriculumPreview.tsx — course-schedule cards (home: first 3, KP page: all 6) */
.apv-curriculum .wp-block-columns + .wp-block-columns { margin-top: var(--apv-s-5) !important; }
.apv-curriculum-card { display: flex; flex-direction: column; }
.apv-curriculum-period { color: var(--apv-slate); margin-block-start: calc(-1 * var(--apv-s-2)); }
.apv-curriculum-sessions.wp-block-list {
	list-style: none;
	padding-inline-start: 0;
	margin-block-start: var(--apv-s-5);
}
.apv-curriculum-sessions li {
	padding-block: var(--apv-s-3);
	border-block-start: 1px solid var(--apv-line);
	font-size: .875rem;
	line-height: 1.5;
	color: var(--apv-slate);
}
.apv-curriculum-sessions li:first-child { border-block-start: 0; }
.apv-curriculum-sessions time { font-weight: 700; color: var(--apv-midnight); }
.apv-curriculum-review {
	display: inline-block;
	margin-inline-start: var(--apv-s-2);
	padding: .1rem .5rem;
	border-radius: var(--apv-r-pill);
	background: rgba(245, 165, 36, .14);
	color: #8A5A0A;
	font-size: .6875rem;
	font-weight: 700;
}

/* ==========================================================================
   15. §15 — header/footer parity 2026-09-22 (header.php, footer.php)
   SiteHeader.tsx / SiteFooter.tsx, HEAD 8f5a9e3. Logical properties throughout
   so the AR/RTL build mirrors without any left/right overrides. One combined
   breakpoint (900px, already this file's dominant breakpoint — see §3/§9) for
   the whole header bar rather than Tailwind's three-tier md/lg/xl collapse:
   simpler for a static WP header and avoids a dead zone where nothing to open
   the nav is visible between two mismatched breakpoints.
   ========================================================================== */

/* Announcement bar + nav bar pin together as one sticky unit — SiteHeader.tsx
   wraps both in a single `sticky top-0` <header>, so both scroll away or both
   stay; splitting them into two independently-sticky elements would let the
   strip scroll off and leave the nav bar alone at the top. */
.apv-header-sticky { position: sticky; inset-block-start: 0; z-index: 50; }

/* .apv-announce already exists (§14); it only needed centering here since it is no
   longer wrapped in the page-content .apv-center helper build_home() used to add. */
.apv-header-sticky .apv-announce-text { text-align: center; }

.apv-site-header {
	background: var(--apv-midnight);
	color: var(--apv-white);
	border-block-end: 1px solid rgba(255, 255, 255, .1);
}

.apv-header-bar {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 1.25rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--apv-s-5);
	min-height: 5rem;
}

@media (min-width: 768px) {
	.apv-header-bar { padding-inline: 2rem; }
}

.apv-header-logo { display: inline-flex; border-radius: var(--apv-r-sm); flex-shrink: 0; }
.apv-header-logo img { display: block; height: 2.5rem; width: auto; }

.apv-header-nav,
.apv-header-langs,
.apv-header-cta { display: none; }

.apv-header-nav { align-items: center; gap: var(--apv-s-6); }
.apv-header-nav a {
	font-size: .9375rem;
	font-weight: 600;
	color: var(--apv-white);
	text-decoration: none;
	opacity: .82;
	transition: opacity .2s var(--apv-ease);
}
.apv-header-nav a:hover, .apv-header-nav a:focus-visible { opacity: 1; }

.apv-header-actions { display: flex; align-items: center; gap: var(--apv-s-3); }

.apv-header-langs {
	align-items: center;
	gap: var(--apv-s-1);
	padding-inline-end: var(--apv-s-3);
	border-inline-end: 1px solid rgba(255, 255, 255, .15);
}
.apv-header-langs a {
	min-height: 2.75rem;
	min-width: 2.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-inline: .4rem;
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .68);
	text-decoration: none;
}
.apv-header-langs a:hover, .apv-header-langs a.is-current { color: var(--apv-white); }

.apv-header-login {
	display: none;
	font-size: .875rem;
	color: rgba(255, 255, 255, .6);
}

.apv-header-cta {
	border-radius: var(--apv-r-pill);
	background: var(--apv-electric);
	color: var(--apv-white);
	font-weight: 700;
	font-size: .9375rem;
	padding: .65rem 1.4rem;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s var(--apv-ease), transform .2s var(--apv-ease);
}
.apv-header-cta:hover, .apv-header-cta:focus-visible { background: var(--apv-electric-dark); color: var(--apv-white); transform: translateY(-1px); }

@media (min-width: 900px) {
	.apv-header-nav,
	.apv-header-langs { display: flex; }
	.apv-header-cta { display: inline-flex; }
	.apv-header-login { display: inline-flex; }
	.apv-header-burger { display: none; }
}

/* Mobile burger — <details>/<summary>, no JS library: the disclosure state
   (open/closed), keyboard operability (Enter/Space on the <summary>) and
   screen-reader semantics all come from the native element for free. */
.apv-header-burger { position: relative; }
.apv-header-burger summary {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--apv-r-pill);
	border: 1px solid rgba(255, 255, 255, .3);
	cursor: pointer;
	list-style: none;
}
.apv-header-burger summary::-webkit-details-marker { display: none; }
.apv-header-burger summary::marker { content: ""; }
.apv-header-burger summary:hover { background: rgba(255, 255, 255, .1); }

.apv-burger-icon,
.apv-burger-icon::before,
.apv-burger-icon::after {
	display: block;
	width: 18px;
	height: 2px;
	background: var(--apv-white);
	border-radius: 1px;
	transition: transform .2s var(--apv-ease), opacity .2s var(--apv-ease), top .2s var(--apv-ease);
}
.apv-burger-icon { position: relative; }
.apv-burger-icon::before, .apv-burger-icon::after { content: ""; position: absolute; inset-inline-start: 0; }
.apv-burger-icon::before { top: -6px; }
.apv-burger-icon::after { top: 6px; }
.apv-header-burger[open] .apv-burger-icon { background: transparent; }
.apv-header-burger[open] .apv-burger-icon::before { top: 0; transform: rotate(45deg); }
.apv-header-burger[open] .apv-burger-icon::after { top: 0; transform: rotate(-45deg); }

.apv-mobile-nav {
	position: absolute;
	inset-inline-end: 0;
	top: calc(100% + var(--apv-s-3));
	display: grid;
	gap: var(--apv-s-2);
	min-width: 15rem;
	max-width: calc(100vw - 2.5rem);
	padding: var(--apv-s-4);
	background: var(--apv-midnight);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--apv-r-md);
	box-shadow: var(--apv-shadow-lg);
}
.apv-mobile-nav a { padding: .6rem .5rem; border-radius: var(--apv-r-sm); font-size: .9375rem; font-weight: 600; color: var(--apv-white); text-decoration: none; }
.apv-mobile-nav a:hover, .apv-mobile-nav a:focus-visible { background: rgba(255, 255, 255, .08); }
.apv-mobile-nav .apv-header-login { display: block; padding: .4rem .5rem; }
.apv-mobile-langs { display: flex; gap: var(--apv-s-2); padding-block-start: var(--apv-s-2); border-block-start: 1px solid rgba(255, 255, 255, .12); }
.apv-mobile-langs a { flex: 1; text-align: center; padding: .5rem; border-radius: var(--apv-r-sm); border: 1px solid rgba(255, 255, 255, .2); font-size: .75rem; font-weight: 700; text-transform: uppercase; color: var(--apv-white); text-decoration: none; }
.apv-mobile-langs a.is-current { background: var(--apv-electric); border-color: var(--apv-electric); }
.apv-mobile-nav .apv-header-cta { display: flex; justify-content: center; margin-block-start: var(--apv-s-2); }

/* ---------------------------------------------------------------- footer */
.apv-footer {
	background: var(--apv-soft);
	color: var(--apv-midnight);
	padding-block-start: var(--apv-s-9);
	overflow: hidden;
	position: relative;
}
.apv-footer a { color: inherit; }

.apv-footer-top {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 1.25rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--apv-s-6);
	padding-block-end: var(--apv-s-6);
	border-block-end: 1px solid var(--apv-line);
}
@media (min-width: 768px) { .apv-footer-top { padding-inline: 2rem; } }

.apv-footer-logo img { display: block; height: 3.5rem; width: auto; }

.apv-footer-nav { display: flex; flex-wrap: wrap; gap: var(--apv-s-2) var(--apv-s-6); font-size: .9375rem; font-weight: 600; }
.apv-footer-nav a { text-decoration: none; }
.apv-footer-nav a:hover, .apv-footer-nav a:focus-visible { color: var(--apv-electric); }

.apv-footer-langs { display: flex; align-items: center; gap: var(--apv-s-3); font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.apv-footer-langs a { color: var(--apv-slate); text-decoration: none; }
.apv-footer-langs a:hover, .apv-footer-langs a.is-current { color: var(--apv-electric); }

/* Rendered only for networks with a real profile URL (footer.php $apv_social). */
.apv-footer-social { display: flex; align-items: center; gap: var(--apv-s-2); color: var(--apv-slate); }
.apv-footer-social a { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 999px; }
.apv-footer-social a:hover, .apv-footer-social a:focus-visible { color: var(--apv-electric); background: rgba(91, 76, 255, .08); }
.apv-footer-social svg { display: block; }

.apv-footer-bottom {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 1.25rem;
	display: flex;
	flex-wrap: wrap;
	gap: var(--apv-s-4);
	justify-content: space-between;
	padding-block: var(--apv-s-5);
	font-size: .8125rem;
	color: var(--apv-slate);
}
@media (min-width: 768px) { .apv-footer-bottom { padding-inline: 2rem; } }
.apv-footer-legal { display: flex; gap: var(--apv-s-5); }
.apv-footer-legal a { text-decoration: none; }
.apv-footer-legal a:hover, .apv-footer-legal a:focus-visible { color: var(--apv-midnight); text-decoration: underline; }

/* footer-wordmark — pure CSS/text gradient wordmark, aria-hidden (SiteFooter.tsx's
   .footer-wordmark), same gradient formula as the FAQ/hero brand gradient. */
.apv-footer-wordmark {
	margin-block-end: -.16em;
	background: linear-gradient(100deg, var(--apv-violet) 0%, var(--apv-electric) 46%, var(--apv-midnight) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-size: clamp(6rem, 17vw, 17rem);
	font-weight: 800;
	letter-spacing: 0;
	line-height: .82;
	text-align: center;
	text-transform: lowercase;
	pointer-events: none;
	user-select: none;
}

@media (max-width: 767px) {
	.apv-footer-wordmark { font-size: 28vw; }
	.apv-footer-top { justify-content: center; text-align: center; }
	.apv-footer-nav { justify-content: center; }
}

/* Home page no longer builds the announcement bar as its own first content block
   (build/build_pages.py's build_home() dropped the announce() call 2026-09-22) — it
   would otherwise appear twice, once from header.php and once from the page content. */

/* ==========================================================================
   §16 — conversion layer 2026-09-22 (Tarek: registration must be impossible to miss)
   Approved strings only; restrained: no motion beyond a fade, reduced-motion respected.
   ========================================================================== */
/* Facts strip right under the hero */
.apv-facts-strip { padding-block: var(--apv-s-5); background: var(--apv-soft); border-block-end: 1px solid var(--apv-line); }
.apv-facts-strip .apv-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--apv-s-3); margin: 0; }
.apv-facts .apv-pill { background: var(--apv-white); border: 1px solid var(--apv-line); color: var(--apv-midnight); font-weight: 600; font-size: .9375rem; padding: .55rem 1rem; border-radius: var(--apv-r-pill); }

/* Registration panel — framed, glowing, form column readable */
#registration { scroll-margin-top: 7rem; }
.apv-registration { background: linear-gradient(180deg, var(--apv-soft) 0%, var(--apv-white) 100%); }
.apv-reg-panel {
	background: var(--apv-white);
	border: 1px solid rgba(88, 68, 254, .28);
	border-radius: var(--apv-r-lg);
	padding: clamp(1.25rem, 1rem + 2vw, 3rem);
	box-shadow: 0 0 0 6px rgba(88, 68, 254, .06), 0 24px 60px -30px rgba(125, 53, 216, .45), var(--apv-shadow-lg);
}
.apv-reg-panel .apv-eyebrow { color: var(--apv-violet); }
.apv-reg-panel h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); }
.apv-reg-panel ul li { font-weight: 600; color: var(--apv-midnight); }
#registration .frm-fluent-form { --ff-primary: var(--apv-electric); }
#registration .frm-fluent-form .ff-el-form-control { min-height: 48px; font-size: 1rem; border-radius: var(--apv-r-sm); border: 1px solid var(--apv-cgrey); }
#registration .frm-fluent-form .ff-el-form-control:focus { border-color: var(--apv-electric); box-shadow: 0 0 0 3px rgba(88, 68, 254, .18); outline: none; }
#registration .frm-fluent-form .ff-btn-submit {
	width: 100%; min-height: 52px; font-size: 1.0625rem; font-weight: 700;
	background: var(--apv-electric) !important; border-color: var(--apv-electric) !important; color: #fff !important;
	border-radius: var(--apv-r-sm); box-shadow: 0 8px 24px rgba(88, 68, 254, .28);
}
#registration .frm-fluent-form .ff-btn-submit:hover { background: var(--apv-electric-dark) !important; }

/* Mid-page CTA band */
.apv-midcta { background: var(--apv-midnight); }
.apv-midcta h2 { color: var(--apv-white); }

/* Pricing: featured card CTA reads as primary */
.apv-card--price.apv-card--dark .wp-block-button__link { background: var(--apv-electric); border-color: var(--apv-electric); color: #fff; }

/* Tap targets */
.wp-block-button__link, .apv-btn { min-height: 44px; }

/* Mobile sticky CTA (front page only, printed by functions.php) */
.apv-sticky-cta {
	position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
	display: none; padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom));
	background: rgba(11, 14, 48, .96); backdrop-filter: blur(10px);
	transform: translateY(110%); transition: transform .3s var(--apv-ease);
}
.apv-sticky-cta .apv-btn { width: 100%; justify-content: center; min-height: 52px; font-size: 1.0625rem; }
.apv-sticky-cta.is-visible { transform: none; }
@media (max-width: 767px) {
	.apv-sticky-cta { display: block; }
	body.home { padding-block-end: 0; }
	.apv-reg-panel { padding: 1.1rem; }
	.apv-facts .apv-pill { font-size: .875rem; padding: .45rem .8rem; }
}
@media (prefers-reduced-motion: reduce) { .apv-sticky-cta { transition: none; } }

/* ==========================================================================
   2026-09-23 audit — WCAG AA contrast + internal-note fixes
   ========================================================================== */
/* Astra's `.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color)`
   (specificity 0,4,1) outranked §4 above, so every secondary button rendered Astra blue
   #046bd2 — 3.6:1 on Midnight. Same selector shape, declared later, restores the design. */
/* Round 2: Astra also ships the `.wp-block-buttons …` form (0,5,0), which still won inside the
   pricing cards (Astra blue on white; 3.6:1 on the dark card). Listed here, before the dark
   contexts below, so those — same specificity, declared later — keep white text. */
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color),
.wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) { color: var(--apv-midnight); }
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color):hover,
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color):focus,
.wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color):hover,
.wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color):focus {
	color: var(--apv-midnight); background: var(--apv-white); border-color: var(--apv-midnight);
}
.apv-hero .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color),
.apv-midcta .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color),
.apv-section--dark .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color),
.apv-card--dark .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) {
	color: var(--apv-white); background: transparent; border-color: rgba(255, 255, 255, .28);
}
.apv-hero .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color):hover,
.apv-hero .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color):focus,
.apv-midcta .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color):hover,
.apv-midcta .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color):focus,
.apv-section--dark .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color):hover,
.apv-section--dark .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color):focus,
.apv-card--dark .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color):hover,
.apv-card--dark .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color):focus {
	color: var(--apv-white); background: rgba(255, 255, 255, .06); border-color: var(--apv-white);
}
/* Dark sections: `.apv-eyebrow` (Electric, 3.3:1) and `p.apv-lead` (Slate, 2.9:1) beat the
   zero-specificity :where() rules of §3. #B9BDE0 on Midnight = 11:1. */
.apv-section--dark .apv-eyebrow,
.apv-section--dark p.apv-lead { color: #B9BDE0; }
/* The curriculum source flags three sessions for internal review (time slot vs duration,
   one date). The note is for the team, not for visitors; the data stays in the build. */
.apv-curriculum-review { display: none; }

/* Astra's own scroll-to-top button (#ast-scroll-top, astra-settings default) ships
   rgb(4,107,210) — an off-brand blue that matches nothing else on the page (measured
   live 2026-09-23, both x-www and page-specific overrides checked: no Customizer
   override existed). Restyled to the brand electric/midnight pair. */
#ast-scroll-top.ast-scroll-top-icon {
	background-color: var(--apv-electric);
	border-radius: var(--apv-r-sm);
}
#ast-scroll-top.ast-scroll-top-icon:hover { background-color: var(--apv-electric-dark); }
#ast-scroll-top.ast-scroll-top-icon svg { fill: var(--apv-white); }

/* Consent/privacy note under the waitlist forms (markup owned by the forms session):
   its small grey text measured below 4.5:1 on the #F7F8FB form box (axe color-contrast,
   /ar/ 2026-09-23). Colour only — Slate 5.8:1, links Electric-dark 6.5:1. */
.apv-privacy-note, .apv-privacy-note p { color: var(--apv-slate) !important; opacity: 1 !important; } /* inline opacity:.85 dropped it to 4.13:1 */
.apv-privacy-note a { color: var(--apv-electric-dark) !important; }

/* ==========================================================================
   §17 — Round 4, 2026-09-23: inner-page hero, CTA band, kp page, contact/
   waitlist info columns (HANDOFF §0 "Round 4" Found-not-fixed items 2-5).
   Logical properties throughout so /ar/ mirrors without any left/right rules.
   ========================================================================== */

/* Item 2 — PageHero.tsx: light secondary/50 band, start-aligned, faded brand
   mark at the end on lg. Deliberately its OWN class, not `.apv-hero` (that
   class stays dark — the front-page hero and build_legalish's own literal
   .apv-hero group both still use it and are out of this round's scope). */
.apv-page-hero {
	position: relative;
	overflow: hidden;
	background: var(--apv-soft);
	border-block-end: 1px solid var(--apv-line);
	padding-block: clamp(2.5rem, 1.75rem + 3vw, 4rem);
}
.apv-page-hero-title {
	margin-block-start: var(--apv-s-4);
	max-inline-size: 56rem;
	font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
	line-height: 1.05;
}
.apv-page-hero p.apv-lead { margin-block-start: var(--apv-s-5); max-inline-size: 42rem; }
/* The faded brand mark is a CSS background, not an <img> in the page body: as the first
   content image, Rank Math made it every inner page's og:image (a 16%-opacity icon WebP
   instead of the 1200×630 share image / Dr. Fadi's portrait — measured 2026-09-23). */
.apv-page-hero::after {
	content: "";
	display: none;
	position: absolute;
	inset-inline-end: var(--apv-s-8);
	inset-block-end: var(--apv-s-6);
	inline-size: 7.2rem;
	block-size: 6rem;
	background: url(assets/img/approuva-icon-midnight.webp?ver=20260923) no-repeat center / contain;
	opacity: .16;
	pointer-events: none;
}
@media (min-width: 1024px) {
	.apv-page-hero::after { display: block; }
}

/* Item 3 — CtaBand.tsx: light, centred, gradient headline, chat + registration
   buttons. `.apv-cta-final` replaces the old dark `.apv-section--dark` band. */
.apv-cta-final .wp-block-heading { max-inline-size: 44rem; margin-inline: auto; }
.apv-cta-final p.apv-lead { max-inline-size: 38rem; margin-inline: auto; }
.apv-btn-icon { display: inline-flex; }
.apv-btn-icon svg { display: block; }

/* Item 4 — kp page: numbered icon grid (OutcomeGrid.tsx's icon tile — see also §5
   "outcome-icon" for the reference gradient this approximates), dark checklist +
   device image, curriculum card head icon. */
.apv-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 3.5rem;
	block-size: 3.5rem;
	margin-block: var(--apv-s-4) 0;
	border-radius: var(--apv-r-sm);
	background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(88, 68, 254, .16));
	border: 1px solid rgba(88, 68, 254, .24);
	color: var(--apv-electric);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 10px 24px -18px rgba(88, 68, 254, .9);
}
.apv-card--dark .apv-card-icon,
.apv-info-card .apv-card-icon { margin-block-start: 0; }
.apv-outcomes .apv-card--numbered .apv-card-icon { margin-block-start: var(--apv-s-3); }

.apv-checklist-dark {
	list-style: none;
	margin: var(--apv-s-5) 0 0;
	padding: var(--apv-s-6);
	border-radius: var(--apv-r-lg);
	background: var(--apv-midnight);
}
.apv-checklist-dark li {
	display: flex;
	align-items: flex-start;
	gap: var(--apv-s-3);
	padding-block: var(--apv-s-4);
	border-block-end: 1px solid rgba(255, 255, 255, .15);
	color: var(--apv-white);
	font-size: .9375rem;
	font-weight: 500;
}
.apv-checklist-dark li:last-child { border-block-end: 0; }
.apv-checklist-dark .apv-icon-list-ic { background: rgba(88, 68, 254, .22); margin-block-start: .1em; }

.apv-kp-format-img img { width: 100%; height: auto; box-shadow: var(--apv-shadow-lg); }

.apv-curriculum-head { align-items: flex-start; gap: var(--apv-s-3); margin-bottom: var(--apv-s-2); }
.apv-curriculum-head .apv-icon-list-ic { margin-block-start: .2em; }
.apv-curriculum-head-text .wp-block-heading { margin: 0; }
.apv-curriculum-head-text .apv-curriculum-period { margin-block-start: 0; }

/* Item 5 — contact/waitlist: info column next to the form (2-col ≥782px via WP's
   own columns breakpoint, stacked below it — no left/right physical rules). Only
   the form's CONTAINER is styled; Fluent Forms fields are untouched. */
.apv-contact-info,
.apv-waitlist-aside { display: flex; flex-direction: column; }
.apv-info-card + .apv-info-card { margin-block-start: var(--apv-s-4); }
/* Cards keep their content height (they stretched to the form's ~900px, leaving empty boxes). */
.apv-contact-info { align-self: flex-start; }
.apv-contact-info .apv-info-card { flex: 0 0 auto; height: auto; }
.apv-info-card h2 { margin-block: var(--apv-s-4) var(--apv-s-2); font-size: 1.125rem; }
.apv-info-card p { margin: 0; }
.apv-waitlist-aside {
	padding: var(--apv-s-6);
	border-radius: var(--apv-r-lg);
	background: var(--apv-midnight);
}
.apv-waitlist-aside .apv-eyebrow { color: #B9BDE0; }
.apv-waitlist-aside .apv-checklist-dark { padding: 0; margin-block-start: var(--apv-s-5); background: transparent; }
.apv-contact-columns .wp-block-column:last-child .wp-block-shortcode,
.apv-waitlist-columns .wp-block-column:last-child .wp-block-shortcode { display: block; }

/* ==========================================================================
   Round 4 (design session) — team / about / faq / resources vs Lovable
   ($lang.team.tsx, $lang.about.tsx, FaqExplorer.tsx, $lang.resources.tsx).
   Logical properties only, so /ar/ mirrors without left/right rules.
   ========================================================================== */

/* Hairline grid: flat cells divided by 1px lines inside one rounded frame
   (Lovable `grid gap-px overflow-hidden rounded-2xl border bg-border`). */
.apv-cells.wp-block-columns { gap: 1px !important; background: var(--apv-line); border: 1px solid var(--apv-line); border-radius: var(--apv-r-lg); overflow: hidden; }
.apv-cells .apv-cell { border: 0; border-radius: 0; box-shadow: none; padding: var(--apv-s-6); }
.apv-cells .apv-cell:hover { transform: none; box-shadow: none; }
.apv-cells .apv-cell h3 { font-size: 1.25rem; hyphens: auto; overflow-wrap: anywhere; }
.apv-cells .apv-cell p { color: var(--apv-slate); line-height: 1.75; }
@media (min-width: 782px) {
	.apv-cells.wp-block-columns { flex-wrap: wrap !important; }
	.apv-cells--3 > .wp-block-column { flex: 0 0 calc((100% - 2px) / 3) !important; }
	.apv-cells--4 > .wp-block-column { flex: 0 0 calc((100% - 1px) / 2) !important; }
}
@media (min-width: 1024px) {
	.apv-cells--4 > .wp-block-column { flex: 0 0 calc((100% - 3px) / 4) !important; }
}

/* Team — portrait stage: midnight + clinical grid + glow + medical rule, portrait
   anchored at the bottom (Lovable .portrait-stage.clinical-grid). */
.apv-portrait-stage {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	min-block-size: 520px;
	padding-block-start: var(--apv-s-6);
	border-radius: var(--apv-r-lg);
	background-color: var(--apv-midnight);
	background-image: linear-gradient(rgba(228, 231, 240, .16) 1px, transparent 1px),
		linear-gradient(90deg, rgba(228, 231, 240, .16) 1px, transparent 1px);
	background-size: 32px 32px;
	background-position: center;
}
.apv-portrait-stage::before {
	content: "";
	position: absolute;
	inset-inline: 12%;
	inset-block-end: 4%;
	block-size: 65%;
	border-radius: 50%;
	background: rgba(88, 68, 254, .28);
	filter: blur(48px);
	z-index: -1;
}
.apv-portrait-stage::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: 42%;
	block-size: 1px;
	background: linear-gradient(90deg, transparent, var(--apv-electric), var(--apv-violet), transparent);
	z-index: -1;
}
.apv-portrait-stage .apv-portrait { margin: 0; inline-size: 100%; max-inline-size: 760px; }
.apv-portrait-stage .apv-portrait img { display: block; inline-size: 100%; block-size: auto; max-block-size: 620px; object-fit: contain; margin-inline: auto; border-radius: 0 !important; }
@media (min-width: 768px) { .apv-portrait-stage { min-block-size: 650px; } }
.apv-team-profile > .wp-block-column:last-child { padding-block: var(--apv-s-5); }
.apv-team-name { margin-block-start: var(--apv-s-4); font-size: clamp(2.25rem, 1.7rem + 1.8vw, 3rem); line-height: 1.08; }
p.apv-team-bio { margin-block-start: var(--apv-s-5); font-size: 1.125rem; line-height: 1.8; color: var(--apv-slate); }
.wp-block-quote.apv-quote {
	margin: var(--apv-s-6) 0 0;
	padding: 0;
	padding-inline-start: 1.25rem;
	border: 0;
	border-inline-start: 2px solid var(--apv-electric);
	font-style: normal;
}
.wp-block-quote.apv-quote p { margin: 0; font-size: 1.25rem; font-weight: 600; line-height: 1.6; color: var(--apv-midnight); }

/* Team — stats as one hairline band, values in electric (Lovable border-y bg-card). */
.apv-team-stats { background: var(--apv-white); border-block: 1px solid var(--apv-line); padding-block: 0; }
.apv-stats-band.wp-block-columns { gap: 1px !important; background: var(--apv-line); margin-block: 0 !important; }
.apv-stats-band .apv-stat { border: 0; border-radius: 0; box-shadow: none; background: var(--apv-white); padding: 2.25rem var(--apv-s-5); }
.apv-stats-band .apv-stat .apv-stat-value { font-size: 1.875rem; font-weight: 700; margin: 0; }
.apv-stats-band .apv-stat p { margin-block-start: var(--apv-s-2); font-size: .875rem; line-height: 1.6; color: var(--apv-slate); }
p.apv-stats-band-note { margin: 0; padding-block: var(--apv-s-4); font-size: .75rem; line-height: 1.6; color: var(--apv-slate); }

/* Team — two check lists side by side (Lovable InfoList: Check icon, no bullet). */
.apv-infolist-title { font-size: 1.5rem; }
.wp-block-list.apv-check-list { list-style: none; margin: var(--apv-s-5) 0 0; padding: 0; }
.apv-check-list li { display: flex; gap: var(--apv-s-3); margin-block-end: var(--apv-s-4); color: var(--apv-slate); line-height: 1.75; }
.apv-check-list .apv-icon-list-ic { inline-size: 1.25rem; block-size: 1.25rem; margin-block-start: .3em; background: none; border-radius: 0; }

/* Team clinical / about story: title beside the paragraphs; team paragraphs ruled. */
p.apv-ruled { margin-block: 0 var(--apv-s-5); padding-inline-start: 1.25rem; border-inline-start: 1px solid var(--apv-line); font-size: 1.125rem; line-height: 1.8; color: var(--apv-slate); }
p.apv-story-p { margin-block: 0 var(--apv-s-5); font-size: 1.125rem; line-height: 1.8; color: var(--apv-slate); }

/* About — Mission / Vision: midnight band, two hairline-framed panels. */
.apv-mv.wp-block-columns { gap: 1px !important; background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .15); border-radius: var(--apv-r-lg); overflow: hidden; }
.apv-mv .apv-mv-panel { background: var(--apv-midnight); padding: clamp(2rem, 1.2rem + 3vw, 3rem); }
.apv-about-mv .apv-mv-panel .apv-eyebrow { color: #C4C8D6; }
.apv-mv-panel h2 { margin-block-start: var(--apv-s-4); font-size: clamp(1.75rem, 1.5rem + 1vw, 2rem); }
.apv-about-mv .apv-mv-panel p:not(.apv-eyebrow) { margin-block-start: var(--apv-s-5); line-height: 1.8; color: #D7DAE5; }

/* FAQ — explorer: category nav beside the grouped questions. */
.apv-faq-nav { display: flex; flex-wrap: wrap; gap: var(--apv-s-2); }
.apv-faq-nav a {
	display: block;
	padding: .75rem 1.25rem;
	border: 1px solid var(--apv-line);
	border-radius: var(--apv-r-sm);
	background: var(--apv-white);
	color: var(--apv-midnight);
	text-decoration: none;
	text-align: start;
}
.apv-faq-nav a:hover, .apv-faq-nav a:focus-visible { border-color: var(--apv-electric); color: var(--apv-electric); }
.apv-faq-nav-title { display: block; font-size: .875rem; font-weight: 700; }
.apv-faq-nav-intro { display: none; margin-block-start: .25rem; font-size: .75rem; color: var(--apv-slate); }
@media (min-width: 1024px) {
	.apv-faq-nav { flex-direction: column; }
	.apv-faq-nav a { padding: 1rem 1.25rem; }
	.apv-faq-nav-intro { display: block; }
	.apv-faq-navcol { position: sticky; inset-block-start: 8rem; align-self: flex-start; }
}
.apv-faq-group { scroll-margin-block-start: 8rem; }
.apv-faq-group + .apv-faq-group { margin-block-start: var(--apv-s-8); }
.apv-faq-group h2 { margin-block-start: var(--apv-s-3); font-size: 1.875rem; }
p.apv-faq-intro { margin-block: var(--apv-s-3) var(--apv-s-5); color: var(--apv-slate); }

/* Resources — card-soft topic cards (icon, label, title, text, arrow at the bottom). */
.apv-card--resource { display: flex; flex-direction: column; min-block-size: 18rem; padding: var(--apv-s-6); }
.apv-card-icon.apv-card-icon--plain { inline-size: auto; block-size: auto; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; justify-content: flex-start; }
p.apv-res-label { margin-block: var(--apv-s-6) 0; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--apv-electric); }
html[dir="rtl"] p.apv-res-label { letter-spacing: 0; }
.apv-card--resource .apv-res-title { margin-block: var(--apv-s-3) 0; font-size: 1.25rem; }
.apv-card--resource p:not(.apv-res-label) { margin-block-start: var(--apv-s-4); font-size: .875rem; line-height: 1.75; color: var(--apv-slate); }
.apv-res-arrow { margin-block-start: auto; padding-block-start: var(--apv-s-5); color: var(--apv-slate); }
.apv-res-arrow svg { display: block; }
html[dir="rtl"] .apv-res-arrow svg { transform: scaleX(-1); }
p.apv-note-box { margin-block-start: var(--apv-s-6); padding: 1.25rem; border: 1px solid var(--apv-line); border-radius: var(--apv-r-sm); background: color-mix(in srgb, #EDEFF5 60%, var(--apv-white)); font-size: .875rem; color: var(--apv-slate); }

/* Cards in a row share the row height (Lovable's CSS grids stretch their items). `.apv-card
   { height: 100% }` resolves against an indefinite flex line and blocked the stretch, so rows
   ended ragged (resources, about values). Vertically aligned columns keep their alignment. */
.wp-block-columns:not([class*="are-vertically-aligned"]) > .wp-block-column.apv-card:not([class*="is-vertically-aligned"]) { height: auto; }

/* PageHero lead: its 42rem cap made WordPress's constrained layout centre it under a
   start-aligned H1. Pin it to the same start edge as the 1200px shell (0 below 1200px). */
.apv-page-hero.apv-page-hero > p.apv-lead { margin-inline-start: max(0px, calc((100% - 1200px) / 2)) !important; margin-inline-end: auto !important; }

/* FAQ category links: no inherited content-link underline. */
body .entry-content .apv-faq-nav a, body .entry-content .apv-faq-nav a:hover { text-decoration: none; }

/* Long German compounds in narrow cards (outcome grid, 5 across) were broken at an
   arbitrary letter («Differenzialdiagnos|e»). Hyphenate at syllables instead (html lang). */
.apv-card :where(h2, h3, h4) { -webkit-hyphens: auto; hyphens: auto; }