/* =============================================================================
 * DREAM ACADEMY — BRAND LAYER  (brand-identity, 2026-10)
 * -----------------------------------------------------------------------------
 * Loads LAST (inc/theme-setup.php, priority 100). Values come ONLY from
 * dream-tokens.css — no colour literals here except legacy values used as
 * attribute-selector MATCHES (never as output colours).
 *
 * Why this file exists: some markup carries colours we deliberately do NOT edit at
 * the source, because the source is booking/payment logic or JS we keep frozen:
 *   - inline <style> printed by dream-booking.php (.dbk-payov) and
 *     inc/dream-payment.php (.dpay-resume)  → beaten here by specificity;
 *   - SVG presentation attributes (fill="#…", stroke="#…") in PHP templates and
 *     ones set at runtime by JS (rating stars)  → a CSS property always beats a
 *     presentation attribute, and attribute selectors re-match live.
 * No DOM, class, id or data-attribute is added or renamed (GA4 cta_location reads them).
 * ========================================================================== */

/* ---------- 1. Typography — headings in the Arabic display face (p.14-15) ---------- */
/* Element fallback (zero specificity — any component rule still wins). */
:where(h1, h2, h3, h4) { font-family: var(--da-font-display); }

/* Component headings: every rule in the theme that sets ≥22px / ≥700 Arabic text.
 * Arabic must never be tracked (letter-spacing breaks joining) and Changa needs
 * the book's line-height (≥1.25) so marks are not clipped. */
.dream-pkg-name, .dream-why .dw-title, .dw-cta-title, .da-title, .da-success strong,
.dcp-title, .dhub-t, .dd-top-h, .dream-auth-h, .dream-auth-logo, .dream-join-h,
.dbk-h1, .dbk-h, .dbk-done-t, .dex-hero-h, .dex-sec-title, .dfaq-title, .dfaq-cta-t,
.mx-h1, .mx-sec-t, .mx-cta-t, .mx-csp-name, .mx-bento-t, .mx-hero--market .mx-h1--start,
.mx-cv-name, .mx-reviews-empty-t, .mx-csp-card .mx-csp-name, .dch-h1,
.pd-top-h, .pd-h1, .pd-hero-title, .pd-hero-h, .pd-plan-name,
.cd-top-h, .cd-pv-name, .cd-soon-h,
.dpay-title, .dpay-notice-title, .dpay-success-title, .dpay-oc-title,
.dab-h1, .dab-h2, .dab-values h2, .dab-vm-head h2, .dab-card h3, .dab-cta h2,
.dauth-hero, .dauth-head h2, .dauth-mini-card h2, .dlg-title, .dlg-wrap h2, .dlg-wrap h3,
.dbk-payov-t, .drr-title {
	/* !important: style.css forces the text face with !important on p/li/label/td (a
	 * legacy anti-Elementor block); some headings above are <p>/<li> elements. */
	font-family: var(--da-font-display) !important;
	letter-spacing: 0;
}
.dbk-h1, .mx-h1, .dch-h1, .dab-h1, .dauth-hero, .dex-hero-h, .pd-hero-title, .pd-h1 { line-height: var(--da-lh-h1); }
.mx-sec-t, .mx-cta-t, .dab-h2, .dab-cta h2, .dfaq-title, .dex-sec-title, .dbk-h { line-height: var(--da-lh-h2); }

/* Body copy measure (p.14: ≤70 characters per line) on long-form pages. */
.dlg-wrap p, .dlg-wrap li, .dfaq-a, .dab-lead { max-width: var(--da-measure); }

/* Arabic is never justified (p.15). */
.dream-app p, .dlg-wrap p, .dfaq-a { text-align: start; }

/* ---------- 2. Focus, selection ---------- */
html body :focus-visible {
	outline: var(--da-focus-outline);
	outline-offset: 2px;
}
::selection { background: var(--da-green); color: var(--da-on-green); }

/* ---------- 3. Logo (p.6-8): symbol ≥32px, full logo ≥90px, never glow/filter ---------- */
/* !important: WooCommerce/checkout image rules (height:auto !important) otherwise blow the
 * symbol up to its intrinsic 192px on /checkout/ and order-received. */
/* 60px (was 44px, +36%): fills the 76px header bar with 8px breathing room top/bottom. */
html body .dh-hdr .dh-logo-img { height: 60px !important; width: auto !important; max-width: none; filter: none; }
.dh-fbrand-img { filter: none; }
.dh-fbrand-tag { display: none; } /* the vertical logo already carries the wordmark — brand: logo appears once */
.pd-brand-logo, .cd-brand-logo img { height: 36px; width: auto; filter: none; }

/* ---------- 4. SVG presentation attributes (PHP templates + JS) ---------- */
[stroke="#C7FF3C" i], [stroke="#BEF264" i] { stroke: var(--da-green); }
[fill="#C7FF3C" i], [fill="#BEF264" i]     { fill: var(--da-green); }
[stop-color="#C7FF3C" i]                    { stop-color: var(--da-green); }
[stroke="#34E1CB" i]                        { stroke: var(--da-support); }
[fill="#34E1CB" i]                          { fill: var(--da-support); }
[stroke="#0B0B0B" i], [stroke="#062b27" i]  { stroke: var(--da-black); }
[fill="#121212" i]                          { fill: var(--da-surface-1); }
/* Rating stars (dream-player-dashboard.php + dream-player.js set gold) → brand green */
[fill="#E4B549" i]                          { fill: var(--da-green); }
[stroke="#E4B549" i]                        { stroke: var(--da-green); }
[stroke="rgba(230,230,224,.35)"]            { stroke: rgba(var(--da-white-rgb), .35); }
[stroke="rgba(230,230,224,.5)"]             { stroke: rgba(var(--da-white-rgb), .5); }
[stroke="rgba(230,230,224,.6)"]             { stroke: rgba(var(--da-white-rgb), .6); }
/* Default coach avatar (inc/coach-sync.php) — olive gradient → brand neutrals */
[stop-color="#1c2712" i]                    { stop-color: var(--da-graphite); }
[stop-color="#12170c" i]                    { stop-color: var(--da-surface-1); }
[stop-color="#0a0d06" i]                    { stop-color: var(--da-black); }

/* Inline style="color:#C7FF3C" emitted by JS (booking coach rating star).
 * !important: only way to beat an inline style attribute. */
.dbk-wrap [style*="#C7FF3C" i], #dbk-app [style*="#C7FF3C" i] { color: var(--da-green) !important; }

/* ---------- 5. Booking payment overlay (inline <style> in dream-booking.php) ---------- */
html body .dbk-payov { background: rgba(var(--da-black-rgb), .82); font-family: var(--da-font-text); }
html body .dbk-payov-card {
	background: var(--da-graphite); color: var(--da-text);
	border-radius: var(--da-radius-lg); box-shadow: var(--da-shadow-3);
}
html body .dbk-payov-spin { border-color: rgba(var(--da-green-rgb), .2); border-top-color: var(--da-green); }
html body .dbk-payov-s { color: var(--da-text-2); }
html body .dbk-payov-ic { border-radius: var(--da-radius-round); }
html body .dbk-payov-retry {
	background: var(--da-green); color: var(--da-on-green);
	font-family: var(--da-font-text); border-radius: var(--da-radius-md);
}
html body .dbk-payov-retry:hover { background: var(--da-green-hover); }
html body .dbk-payov-close { color: var(--da-text); font-family: var(--da-font-text); border-radius: var(--da-radius-md); }

/* ---------- 6. "Resume payment" bar (inline <style> in inc/dream-payment.php) ---------- */
html body .dpay-resume {
	background: var(--da-graphite); color: var(--da-text);
	border-top-color: var(--da-green-line); font-family: var(--da-font-text);
}
html body .dpay-resume-btn { background: var(--da-green); color: var(--da-on-green); border-radius: var(--da-radius-md); }
html body .dpay-resume-btn:hover { background: var(--da-green-hover); }
html body .dpay-resume-del { color: var(--da-text); font-family: var(--da-font-text); border-radius: var(--da-radius-md); }

/* ---------- 7. Touch targets (WCAG 2.5.8 / brief: ≥44px) on primary actions ---------- */
.dh-signin, .dh-signup, .dh-burger, .dbk-payov-retry, .dbk-payov-close,
.dpay-resume-btn, .dpay-resume-del { min-height: 44px; }

/* ---------- 8. Contact form (Contact Form 7 on /contact-us/) — was unstyled browser defaults ---------- */
/* The CF7 form carries dir="ltr" lang="en-US" from its own locale setting (DB); the
 * fields are Arabic, so render RTL from CSS without touching the form. */
.wpcf7 { direction: rtl; text-align: right; max-width: 640px; margin-inline: auto; padding: var(--da-space-6) var(--da-space-4); color: var(--da-text); font-family: var(--da-font-text); }
.wpcf7 input[type="email"] { direction: ltr; text-align: right; }
.wpcf7 form p { margin: 0 0 var(--da-space-5); }
.wpcf7 label { display: block; color: var(--da-text-2); font-size: var(--da-fs-caption); font-weight: var(--da-fw-medium); }
.wpcf7 .wpcf7-form-control-wrap { display: block; margin-top: var(--da-space-2); }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 input[type="url"],
.wpcf7 input[type="number"], .wpcf7 select, .wpcf7 textarea {
	width: 100%; box-sizing: border-box; min-height: 48px;
	background: var(--da-surface-1); color: var(--da-text);
	border: 1px solid var(--da-line-strong); border-radius: var(--da-radius-md);
	padding: var(--da-space-3) var(--da-space-4); font: inherit; font-size: var(--da-fs-body);
}
.wpcf7 textarea { min-height: 160px; resize: vertical; }
.wpcf7 ::placeholder { color: var(--da-text-3); opacity: 1; }
.wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus { border-color: var(--da-green); outline: var(--da-focus-outline); outline-offset: 1px; }
.wpcf7 .wpcf7-submit {
	min-height: 48px; padding: 0 var(--da-space-6); cursor: pointer;
	background: var(--da-green); color: var(--da-on-green); border: 0; border-radius: var(--da-radius-md);
	font: inherit; font-weight: var(--da-fw-bold);
}
.wpcf7 .wpcf7-submit:hover { background: var(--da-green-hover); }
.wpcf7 .wpcf7-not-valid { border-color: var(--da-danger); }
.wpcf7 .wpcf7-not-valid-tip { color: var(--da-danger-text); font-size: var(--da-fs-caption); margin-top: var(--da-space-1); }
.wpcf7 form .wpcf7-response-output { margin: var(--da-space-4) 0 0; padding: var(--da-space-3) var(--da-space-4); border-radius: var(--da-radius-md); color: var(--da-text); }
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--da-green); }
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output { border-color: var(--da-danger); }

/* ---------- 9. WooCommerce notices & empty cart — were white default boxes ---------- */
/* :where() keeps specificity at 0 for the wrapper so the checkout's own .dpay-page rules still win. */
:where(.woocommerce, .woocommerce-page) .woocommerce-info,
:where(.woocommerce, .woocommerce-page) .woocommerce-message,
:where(.woocommerce, .woocommerce-page) .woocommerce-error,
:where(.woocommerce, .woocommerce-page) .wc-block-components-notice-banner {
	background: var(--da-graphite); color: var(--da-text);
	border: 1px solid var(--da-line-2); border-inline-start: 3px solid var(--da-green);
	border-top-width: 1px; border-top-color: var(--da-line-2);
	border-radius: var(--da-radius-md); font-family: var(--da-font-text);
}
:where(.woocommerce, .woocommerce-page) .woocommerce-error { border-inline-start-color: var(--da-danger); }
:where(.woocommerce, .woocommerce-page) .woocommerce-info::before,
:where(.woocommerce, .woocommerce-page) .woocommerce-message::before { color: var(--da-green); }
:where(.woocommerce, .woocommerce-page) .woocommerce-error::before { color: var(--da-danger); }
.cart-empty, .wc-empty-cart-message, .wc-block-cart__empty-cart__title { color: var(--da-text); }
.woocommerce .wc-empty-cart-message, .woocommerce .return-to-shop { max-width: 760px; margin-inline: auto; padding-inline: var(--da-space-4); box-sizing: border-box; }
.woocommerce .wc-empty-cart-message { margin-top: var(--da-space-7); }
.woocommerce .cart-empty.woocommerce-info { padding: var(--da-space-4) var(--da-space-5); padding-inline-start: 3.5em; margin: 0 0 var(--da-space-4); } /* keep room for Woo's notice icon */
/* (0,2,1) beats WooCommerce's own `.woocommerce a.button` (0,1,1) */
.woocommerce .return-to-shop a.button, .wc-block-cart__empty-cart .wp-block-button__link {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--da-space-5);
	background: var(--da-green); color: var(--da-on-green); border-radius: var(--da-radius-md);
	font-family: var(--da-font-text); font-weight: var(--da-fw-bold);
}
.woocommerce .return-to-shop a.button:hover { background: var(--da-green-hover); color: var(--da-on-green); }