/*
Theme Name: ABA 4 Change Theme
Theme URI: https://aba4change.org
Author: ABA4Change
Author URI: https://aba4change.org
Description: Native WordPress Full Site Editing block theme for ABA4Change. Unifies the former aba4change-institutional theme (a4c-*), the ibt-landing.css certificate-page kit (.ibt-kit-4), and the live (non-draft) components from the site's Global Styles Additional CSS into one component library, one naming convention, one CSS file. Standardized on the original a4c-* coral/navy palette — components ported from the other two systems have been retoned onto theme.json's color tokens instead of their own local hardcoded hex values.
Requires at least: 6.6
Tested up to: 6.7
Requires PHP: 8.0
Version: 0.13.42
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aba4change
Tags: full-site-editing, block-patterns, rtl-language-support, education, custom-colors
*/

/* ===========================================================
   BUILD STATUS

   CSS layer complete: every rule from aba4change-institutional's
   style.css is accounted for (carried over unchanged where it was
   a plugin-markup bug-fix, merged into a shared component where a
   real duplicate existed), plus every confirmed-live component
   from .ibt-kit-4 (ibt-landing.css) and the live (non-draft) part
   of the site's Global Styles Additional CSS — all retoned onto
   the a4c-* coral/navy palette and theme.json tokens.

   NOT YET DONE, so DO NOT ACTIVATE THIS THEME YET:
   - No page's saved block content has been updated to the new
     component names (a4c-course-card, a4c-pricing-box, a4c-faq,
     etc. — the live pages still say .course-card, .pk, .faq-acc).
   - The copied patterns/templates/parts haven't been checked
     against the new names either.
   - No page-by-page visual check has been done yet.
   Activating now would leave every page that used a renamed
   component completely unstyled.
=========================================================== */

/* -----------------------------------------------------------
   Language direction switching — Arabic default (Tajawal),
   English secondary (Arial body / Georgia serif headings).
   Ported unchanged from aba4change-institutional/style.css.
----------------------------------------------------------- */
html[dir="ltr"] body,
html[dir="ltr"] p,
html[dir="ltr"] li,
html[dir="ltr"] .wp-block-button__link {
	font-family: var(--wp--preset--font-family--body-sans);
}
html[dir="ltr"] h1,
html[dir="ltr"] h2,
html[dir="ltr"] h3,
html[dir="ltr"] .wp-block-post-title,
html[dir="ltr"] .a4c-serif {
	font-family: var(--wp--preset--font-family--heading-serif);
	letter-spacing: -0.04em;
}
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] .wp-block-post-title,
html[dir="rtl"] .a4c-serif {
	font-family: var(--wp--preset--font-family--tajawal);
	letter-spacing: 0;
}
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3 { font-weight: 500; }

:focus-visible {
	outline: 3px solid var(--wp--preset--color--coral);
	outline-offset: 3px;
}

.skip-link {
	position: absolute;
	left: 0;
	top: -100px;
	z-index: 100000;
	background: var(--wp--preset--color--ink);
	color: #fff;
	padding: 14px 22px;
	border-radius: 0 0 10px 0;
	transition: top .2s ease;
}
.skip-link:focus { top: 0; }

img { max-width: 100%; height: auto; }
html { overflow-x: clip; }

.wp-block-post-content > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.wp-site-blocks > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.alignfull {
	max-width: none;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* -----------------------------------------------------------
   Typography helpers
----------------------------------------------------------- */
.a4c-eyebrow {
	color: var(--wp--preset--color--ink-soft);
	font-size: 0.9rem;
	font-weight: 800;
	letter-spacing: .10em;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.a4c-eyebrow::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--coral);
	box-shadow: 0 0 0 5px rgba(239, 124, 87, .16);
}
.a4c-section-dark .a4c-eyebrow, .a4c-section-navy .a4c-eyebrow { color: #c0d7e8; }

.a4c-lead {
	font-size: 1.15rem;
	line-height: 1.65;
	color: var(--wp--preset--color--ink-soft);
}
.a4c-narrow { max-width: 640px; }

.a4c-stat strong, .a4c-stat .a4c-stat-number {
	font-family: var(--wp--preset--font-family--heading-serif);
	font-size: 1.75rem;
	display: block;
}
html[dir="rtl"] .a4c-stat strong,
html[dir="rtl"] .a4c-stat .a4c-stat-number {
	font-family: var(--wp--preset--font-family--tajawal);
}

/* -----------------------------------------------------------
   Buttons
----------------------------------------------------------- */
.wp-block-button__link {
	min-height: 44px;
	transition: transform .2s ease;
}
.wp-block-button__link:hover { transform: translateY(-2px); }

/* Same class works two ways: as a wp:button className (WP puts it
   on the outer .wp-block-button div; styling flows to the inner
   .wp-block-button__link) or directly on a plain <a> tag (the
   certificate-page CTAs). Tag-qualifying the plain-anchor rules
   with "a." keeps the two cases from ever colliding, so there's
   no :not() guessing and no border to double up. */
/* !important on these `color` declarations: the still-loaded legacy
   ibt-landing.css (see functions.php) has a `.ibt-kit a { color:
   var(--blue) }` rule of identical specificity (one type + one
   class selector) that loads after this stylesheet, so on plain
   `<a class="a4c-btn-*">` CTAs — inside the .ibt-kit-scoped
   certificate pages — it was winning the cascade tie and silently
   recoloring every button's text to a dark blue-on-dark/white-on-
   white mismatch instead of the color declared here. */
.wp-block-button.a4c-btn-coral .wp-block-button__link,
a.a4c-btn-coral {
	background-color: var(--wp--preset--color--coral);
	color: #fff !important;
}
.wp-block-button.a4c-btn-dark .wp-block-button__link,
a.a4c-btn-dark {
	background-color: var(--wp--preset--color--ink);
	color: #fff !important;
}
.wp-block-button.a4c-btn-outline .wp-block-button__link,
a.a4c-btn-outline {
	background-color: transparent;
	color: var(--wp--preset--color--ink) !important;
}
html[dir="ltr"] .a4c-btn-outline .wp-block-button__link:hover,
html[dir="rtl"] .a4c-btn-outline .wp-block-button__link:hover,
a.a4c-btn-outline:hover {
	background-color: var(--wp--preset--color--sea-pale);
}
.wp-block-button.a4c-btn-outline-white .wp-block-button__link,
a.a4c-btn-outline-white {
	background-color: transparent;
	color: #fff !important;
}
.wp-block-button.a4c-btn-outline-white .wp-block-button__link:hover,
a.a4c-btn-outline-white:hover {
	background-color: rgba(255, 255, 255, .14);
}
.wp-block-button.a4c-btn-small .wp-block-button__link,
a.a4c-btn-small {
	min-height: 40px;
	padding: 8px 18px;
	font-size: 0.85rem;
}
a.a4c-btn-coral, a.a4c-btn-dark, a.a4c-btn-outline, a.a4c-btn-outline-white {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 28px;
	border-radius: 999px;
	min-height: 48px;
	text-decoration: none;
	font-weight: 700;
}

/* -----------------------------------------------------------
   Section background helpers
----------------------------------------------------------- */
.a4c-section-soft { background-color: var(--wp--preset--color--paper); }
.a4c-section-tint { background-color: var(--wp--preset--color--sea-pale); }
.a4c-section-dark { background-color: var(--wp--preset--color--ink); color: #fff; }
.a4c-section-dark h2, .a4c-section-dark h3 { color: #fff; }
.a4c-section-dark p { color: #afcadc; }
.a4c-section-navy { background-color: var(--wp--preset--color--navy-contact); color: #fff; }
.a4c-section-navy h2, .a4c-section-navy h3, .a4c-section-navy h4 { color: #fff; }
/* Inline text links (not button links, which already set their own
   color) default to the theme's dark ink link color, which fails
   contrast on this section's navy background. */
.a4c-section-navy p a:not(.wp-element-button) { color: #fff; text-decoration: underline; }
.a4c-section-navy p { color: #cfe0ec; }
.a4c-section-footer { background-color: var(--wp--preset--color--navy-footer); color: #fff; }
.a4c-section-pad { padding: clamp(64px, 8vw, 110px) 0; }

/* Fix: /consultation/'s own top-level section wrapper class never got
   a padding rule ported over when its inner "who this is for" grid was
   renamed to the shared .a4c-audience-grid component — it used to get
   its vertical rhythm from the (now-orphaned, theme-switched-away-from)
   Customizer Additional CSS's `.consultation-audiences { padding: 104px
   0 }`. Give it the same rhythm as every other section on the site. */
.consultation-audiences { padding: clamp(64px, 8vw, 110px) 0; }

/* -----------------------------------------------------------
   Fix: the certificate-page kit (.ibt-kit / .ibt-kit-4) wraps every
   full-bleed section of a course page — announcement bar, hero,
   each .a4c-section-pad block, the closing sticky buy-bar — in one
   top-level group with no `layout` of its own, so it falls back to
   core's default "flow" layout, which adds `margin-block-start:
   1.5rem` (the site's global block-gap) between every direct child.
   Each section already has its own generous vertical padding via
   .a4c-section-pad, so this extra 24px showed up as a visible seam
   of the wrapper's own background between two adjacent full-bleed
   sections of different colours, and — after the very last section
   — as a blank gap before the footer, since the invisible
   fixed-position sticky-buybar wrapper still receives the same top
   margin. Sections manage their own rhythm; the wrapper shouldn't
   add more on top.
----------------------------------------------------------- */
.ibt-kit > .alignfull {
	margin-block-start: 0;
}

.a4c-section-dark .a4c-btn-outline .wp-block-button__link,
.a4c-section-navy .a4c-btn-outline .wp-block-button__link,
.a4c-section-dark a.a4c-btn-outline,
.a4c-section-navy a.a4c-btn-outline {
	color: #fff;
}
.a4c-section-dark .a4c-btn-outline .wp-block-button__link:hover,
.a4c-section-navy .a4c-btn-outline .wp-block-button__link:hover,
.a4c-section-dark a.a4c-btn-outline:hover,
.a4c-section-navy a.a4c-btn-outline:hover {
	background-color: rgba(255, 255, 255, .14);
}

/* -----------------------------------------------------------
   Arch-shaped imagery
----------------------------------------------------------- */
.a4c-arch img,
.a4c-arch .wp-block-image img,
.a4c-arch.wp-block-image img,
.a4c-arch.wp-block-cover {
	border-radius: 220px 220px 26px 26px;
	object-fit: cover;
	box-shadow: 0 26px 70px rgba(23, 59, 90, .18);
	border: 8px solid rgba(255, 255, 255, .66);
}
.a4c-arch-sm img { border-radius: 140px 140px 22px 22px; }
@media (max-width: 782px) {
	.a4c-arch img, .a4c-arch .wp-block-image img { border-radius: 130px 130px 22px 22px; }
}

/* -----------------------------------------------------------
   Institutional cards / grids with hairline dividers
----------------------------------------------------------- */
.a4c-card {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 26px;
	padding: 30px;
}
.a4c-card-sea { background-color: var(--wp--preset--color--sea-pale); }
.a4c-card-paper { background-color: var(--wp--preset--color--paper); }
.a4c-card-coral { background-color: var(--wp--preset--color--coral-soft); }
.a4c-card-cream { background-color: var(--wp--preset--color--cream); }

/* -----------------------------------------------------------
   service-card-grid (homepage) — never renamed, had no CSS at
   all, so the 3 cards fell back to plain block stacking.
----------------------------------------------------------- */
.service-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .service-card-grid { grid-template-columns: 1fr; } }

.a4c-divider-grid.wp-block-columns {
	border-top: 1px solid var(--wp--preset--color--line);
	border-inline-start: 1px solid var(--wp--preset--color--line);
}
.a4c-divider-grid.wp-block-columns > .wp-block-column {
	border-inline-end: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 28px !important;
}
.a4c-divider-grid.a4c-section-dark.wp-block-columns,
.a4c-divider-grid.a4c-section-dark.wp-block-columns > .wp-block-column {
	border-color: rgba(255, 255, 255, .18);
}
@media (max-width: 782px) {
	.a4c-divider-grid.wp-block-columns { flex-wrap: wrap; }
}

/* -----------------------------------------------------------
   a4c-course-card — unifies the academy course listing card
   (formerly .course-card-grid/.course-card) and the supervision
   pricing card (formerly .supervision-option-grid/article).
   Base = bordered card, topline label, h3, description, a
   meta/price row, footer link. Two content patterns share it:
   dt/dd meta grid (course listings) or a plain price line
   (pricing use — see .a4c-course-card__price-line).
----------------------------------------------------------- */
.a4c-course-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
}
@media (max-width: 900px) { .a4c-course-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .a4c-course-card-grid { grid-template-columns: 1fr; } }
.catalogue-course-grid { margin-top: 26px; }
.catalogue-course-grid .a4c-course-card { background: #fff; }

/* academy's own listing — 3 columns max (supervision's pricing
   grid keeps the base 4-up auto-fit behavior above, untouched) */
.a4c-course-card-grid.academy-course-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .a4c-course-card-grid.academy-course-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .a4c-course-card-grid.academy-course-grid { grid-template-columns: 1fr; } }

/* -----------------------------------------------------------
   featured-courses-section (academy) — never renamed, had no
   CSS, so the section had no top/bottom padding at all.
----------------------------------------------------------- */
.featured-courses-section { padding: clamp(64px, 8vw, 108px) 0; background: #fff; }
@media (max-width: 782px) { .featured-courses-section { padding-block: 76px; } }
.featured-courses-section.a4c-reveal, .featured-courses-section .a4c-reveal {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

.a4c-course-card,
.a4c-course-card-grid > article {
	display: flex;
	flex-direction: column;
	min-height: 450px;
	padding: 28px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 26px;
	background: var(--wp--preset--color--paper);
	transition: transform 180ms ease, box-shadow 180ms ease;
}
.a4c-course-card:hover,
.a4c-course-card-grid > article:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 48px rgba(23, 59, 90, .1);
}
.a4c-course-card.is-recommended,
.a4c-course-card-grid > article.is-recommended {
	position: relative;
	border: 2px solid var(--wp--preset--color--coral);
	background: var(--wp--preset--color--white);
	box-shadow: 0 18px 45px rgba(239, 124, 87, .14);
}
.a4c-course-card-grid > article > span:not(.a4c-course-card__badge),
.a4c-course-card-grid > article > p:first-child > span:not(.a4c-course-card__badge) {
	color: var(--wp--preset--color--coral);
	font-size: .68rem;
	font-weight: 850;
}
.a4c-course-card__topline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	color: var(--wp--preset--color--ink-soft);
	font-size: 0.7rem;
	font-weight: 800;
}
.a4c-course-card__badge {
	padding: 7px 10px;
	border-radius: 999px;
	background: var(--wp--preset--color--sea-pale);
	color: var(--wp--preset--color--ink);
}
.a4c-course-card__badge--open {
	background: var(--wp--preset--color--coral);
	color: #fff;
}
.a4c-course-card__badge--featured {
	position: absolute;
	top: 20px;
	inset-inline-end: 20px;
	padding: 7px 9px;
	border-radius: 999px;
	background: var(--wp--preset--color--coral);
	color: #fff;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .02em;
}
.a4c-course-card h3,
.a4c-course-card-grid > article h3 {
	margin: 40px 0 14px;
	font-size: 1.5rem;
	line-height: 1.15;
}
.a4c-course-card h3 a:hover,
.a4c-course-card-grid > article h3 a:hover { color: var(--wp--preset--color--coral); }
.a4c-course-card-grid > article ul {
	margin: 16px 0;
	padding-inline-start: 20px;
	font-size: .9rem;
	color: var(--wp--preset--color--ink-soft);
	line-height: 1.6;
}
.a4c-course-card-grid > article > p:last-child a {
	margin-top: auto;
	color: var(--wp--preset--color--ink);
	font-weight: 800;
	text-decoration: none;
}
.a4c-course-card__summary {
	margin: 0 0 26px;
	color: var(--wp--preset--color--ink-soft);
	font-size: 0.9rem;
	line-height: 1.65;
}
.a4c-course-card__meta {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin: auto 0 24px;
	list-style: none;
	padding: 0;
}
.a4c-course-card__meta > div {
	padding-top: 14px;
	border-top: 1px solid var(--wp--preset--color--line);
}
.a4c-course-card__meta dt {
	margin-bottom: 6px;
	color: var(--wp--preset--color--ink-soft);
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.a4c-course-card__meta dd { margin: 0; font-size: .8rem; font-weight: 700; line-height: 1.45; }
.a4c-course-card__meta-price {
	grid-column: 1 / -1;
	padding: 14px 16px;
	border-radius: 12px;
	background: #d9e3d5;
}
.a4c-course-card__meta-price dd { color: var(--wp--preset--color--ink); font-size: 1rem; }
.a4c-course-card__meta-price dd h6.wp-block-heading {
	font-size: 1.35rem;
	font-weight: 800;
	color: var(--wp--preset--color--ink);
}
.a4c-course-card__meta-price dd h6.wp-block-heading ins {
	font-size: 1em;
	font-weight: 800;
	text-decoration: none;
	color: var(--wp--preset--color--coral);
}
.a4c-course-card__meta-price dd h6.wp-block-heading del {
	margin-inline-end: 8px;
	font-size: .65em;
	font-weight: 400;
	text-decoration: line-through;
	opacity: .6;
}
.a4c-course-card__meta-price .woocommerce-Price-currencySymbol {
	font-size: .5em;
}

.a4c-course-card__price-line {
	margin: 23px 0 0;
	padding: 17px 0;
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.a4c-course-card__price-line strong,
.a4c-course-card__price-line small { display: block; }
.a4c-course-card__price-line strong { color: var(--wp--preset--color--ink); font-size: 1.4rem; }
.a4c-course-card__price-line small { margin-top: 4px; color: var(--wp--preset--color--ink-soft); font-size: .68rem; }

.a4c-course-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding-top: 18px;
	margin-top: auto;
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: .75rem;
}
.a4c-course-card__footer > span { color: var(--wp--preset--color--ink-soft); }
.a4c-course-card__footer a { font-weight: 800; text-decoration: none; }

/* -----------------------------------------------------------
   a4c-pricing-box — ported from .ibt-kit-4 .price/.pk (the
   qasp-s-180h-certificate pricing box with the payment-plan
   toggle). Real, verified behavior — keeps the pay-toggle.js
   contract (.pay-toggle/.pay-opt/.plan-note) so the existing
   script keeps working unchanged; only class NAMES on the
   containers changed, not the data-* attributes it reads.
   Retoned from gold to coral for the featured state.
----------------------------------------------------------- */
.a4c-pricing-box-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	align-items: start;
}
@media (max-width: 900px) { .a4c-pricing-box-grid { grid-template-columns: 1fr; } }
/* a single box shouldn't stretch full-width — cap it and center it */
.a4c-pricing-box-grid:has(> .a4c-pricing-box:only-child) {
	grid-template-columns: minmax(0, 480px);
	justify-content: center;
}
/* two boxes on the base 3-column grid leaves a phantom empty third
   track, which shoves both real boxes off toward one side instead
   of centering them (round 12) - give exactly-2-box pages their own
   2-column grid, capped and centered, same pattern as the
   single-box case above. Pages with 3 real boxes are untouched.
   The explicit max-width override below is required: :has() has
   higher specificity than the plain-class mobile rule further down
   (@media (max-width:900px) .a4c-pricing-box-grid{1fr}), so without
   it this would win over that rule even on mobile and force 2
   columns side by side instead of stacking. */
.a4c-pricing-box-grid:has(> .a4c-pricing-box:nth-child(2):last-child) {
	grid-template-columns: repeat(2, minmax(0, 420px));
	justify-content: center;
}
@media (max-width: 900px) {
	.a4c-pricing-box-grid:has(> .a4c-pricing-box:nth-child(2):last-child) {
		grid-template-columns: 1fr;
	}
}

.a4c-pricing-box {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 26px;
	padding: 32px 26px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.a4c-pricing-box.is-featured {
	border: 2px solid #F2B544;
	box-shadow: 0 20px 50px rgba(37, 83, 120, .12);
	position: relative;
}
.a4c-pricing-box__badge {
	position: absolute;
	top: -16px;
	inset-inline-start: 40px;
	background: #F2B544;
	/* !important: it's a plain <p>, and the still-loaded legacy
	   ibt-landing.css has `.ibt-kit-4 p { color: var(--ink2) }` at
	   higher specificity (two classes vs. this rule's one), which
	   was winning and showing grey text on the gold badge. */
	color: rgb(42, 32, 19) !important;
	font-size: .95rem;
	font-weight: 700;
	padding: 8px 18px;
	border-radius: 999px;
}
.a4c-pricing-box__amount {
	font-size: 2.8rem;
	font-weight: 800;
	color: var(--wp--preset--color--ink);
	line-height: 1;
}
.a4c-pricing-box__currency {
	font-size: 0.5em;
}
.a4c-pricing-box__was {
	font-size: 1.15rem;
	color: var(--wp--preset--color--ink-soft);
	text-decoration: line-through;
	margin-inline-start: 12px;
	font-weight: 400;
}
.a4c-pricing-box .pay-toggle {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}
.a4c-pricing-box .pay-toggle-switch {
	display: inline-flex;
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	padding: 4px;
	gap: 4px;
}
.a4c-pricing-box .pay-opt {
	appearance: none;
	border: 0;
	background: transparent;
	border-radius: 999px;
	padding: 7px 16px;
	font-size: .82rem;
	font-weight: 600;
	font-family: inherit;
	color: var(--wp--preset--color--ink-soft);
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.a4c-pricing-box .pay-opt.is-active {
	background: var(--wp--preset--color--ink);
	color: #fff;
}
.a4c-pricing-box.is-featured .pay-opt.is-active {
	background: #F2B544;
	color: rgb(42, 32, 19);
}
.a4c-pricing-box .plan-note {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: .82rem;
	font-weight: 600;
	/* !important: same tie as .a4c-pricing-box__badge above — this
	   is also a plain <p>, and `.ibt-kit-4 p` (two classes) ties
	   this rule's specificity (also two classes) and loads later. */
	color: var(--wp--preset--color--ink) !important;
}
.a4c-pricing-box .plan-note[hidden] { display: none; }
.a4c-pricing-box ul {
	display: grid;
	gap: 12px;
	list-style: none;
	padding: 0;
}
.a4c-pricing-box li {
	font-size: 1rem;
	color: var(--wp--preset--color--ink-soft);
	font-weight: 300;
	padding-inline-start: 26px;
	position: relative;
	line-height: 1.6;
}
.a4c-pricing-box li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 9px;
	width: 14px;
	height: 8px;
	border-inline-start: 2px solid #D97D0D;
	border-bottom: 2px solid #D97D0D;
	transform: rotate(-45deg);
}
.a4c-pricing-box .wp-block-button { margin-top: auto; }
.a4c-pricing-box-note {
	background: #F7EEDB;
	border-radius: 26px;
	padding: 22px 26px;
	margin-top: 26px;
	font-size: .9rem !important;
	font-weight: 400 !important;
	line-height: 1.8;
	color: var(--wp--preset--color--ink-soft) !important;
}

/* -----------------------------------------------------------
   Header — ported unchanged from aba4change-institutional
   (Polylang language-switcher CSS dropped: plugin isn't active).
----------------------------------------------------------- */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}
.a4c-header {
	background: rgba(255, 253, 248, .97);
	border-bottom: 1px solid rgba(39, 83, 120, .09);
}
.a4c-header .wp-block-navigation a {
	font-weight: 700;
	font-size: 0.95rem;
}
@media (max-width: 1320px) {
	.a4c-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}
	.a4c-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none !important;
	}
}
.a4c-header .wp-block-navigation__responsive-container.is-menu-open {
	position: fixed !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	background: var(--wp--preset--color--cream) !important;
	z-index: 999999 !important;
	overflow-y: auto;
}
.a4c-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: 90px 24px 40px !important;
}
.a4c-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: 24px;
	inset-inline-end: 24px;
	inset-inline-start: auto;
	width: 44px;
	height: 44px;
}
.a4c-header .wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}
.a4c-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.a4c-header .wp-block-navigation__responsive-container.is-menu-open a.wp-block-navigation-item__content {
	display: block;
	padding: 16px 4px;
	font-size: 1.1rem;
	min-height: 44px;
}
.a4c-header .a4c-nav-contact-item { display: none; }
.a4c-header .wp-block-navigation__responsive-container.is-menu-open .a4c-nav-contact-item { display: flex; }
@media (max-width: 1320px) {
	.a4c-header .a4c-header-cta { display: none; }
}
.a4c-header .wp-block-navigation a:hover { color: var(--wp--preset--color--coral); }
.a4c-header .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--coral);
	box-shadow: inset 0 -2px 0 var(--wp--preset--color--coral);
}
.a4c-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item {
	border-inline-start: 3px solid var(--wp--preset--color--coral);
}
.a4c-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	box-shadow: none;
}
.a4c-logo img { width: 152px; height: auto; }
.a4c-footer .a4c-logo img { filter: brightness(0) invert(1); width: 150px; }

.a4c-cart-icon-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--wp--preset--color--ink);
	flex-shrink: 0;
}
.a4c-cart-icon-wrap:hover { color: var(--wp--preset--color--coral); }
.a4c-cart-icon-wrap--empty { display: none; }
.a4c-cart-count {
	position: absolute;
	top: 0;
	inset-inline-end: -2px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--wp--preset--color--coral);
	color: var(--wp--preset--color--white);
	font-size: 0.65rem;
	font-weight: 800;
	line-height: 17px;
	text-align: center;
}
.a4c-account-link-wrap {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	color: var(--wp--preset--color--ink);
	font-weight: 700;
	font-size: 0.9rem;
	text-decoration: none;
	white-space: nowrap;
}
.a4c-account-link-wrap:hover { color: var(--wp--preset--color--coral); }
.a4c-header > .wp-block-group > .wp-block-group:not(.a4c-logo) > p {
	display: flex;
	align-items: center;
	margin: 0;
}
@media (max-width: 1320px) {
	.a4c-header > .wp-block-group {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 10px;
	}
	.a4c-header > .wp-block-group > .wp-block-group.a4c-logo {
		order: 1;
		flex-basis: auto;
		flex-shrink: 1;
		flex-grow: 0;
		min-width: 0;
	}
	.a4c-logo img { width: 110px; max-width: 100%; }
	.a4c-header > .wp-block-group > .wp-block-group:not(.a4c-logo) {
		order: 2;
		margin-inline-start: auto;
		flex-shrink: 0;
	}
	.a4c-account-icon { display: none; }
	.a4c-account-link-wrap { font-size: 0.8rem; }
	.a4c-header > .wp-block-group > nav.wp-block-navigation {
		order: 3;
		flex-shrink: 0;
	}
}
@media (max-width: 600px) {
	.a4c-header > .wp-block-group > .wp-block-group {
		flex-wrap: wrap;
		row-gap: 10px;
	}
	.a4c-header .wp-block-button__link { min-height: 44px; }
}

/* -----------------------------------------------------------
   Footer columns
----------------------------------------------------------- */
.a4c-footer h3, .a4c-footer .wp-block-heading {
	color: #81a4bd;
	font-size: .7rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-family: var(--wp--preset--font-family--body-sans);
}
.a4c-footer a { color: #d7e3ec; font-size: .95rem; }
.a4c-footer a:hover { color: #fff; }
.a4c-footer p { color: #a6bfd2; }
@media (max-width: 1320px) {
	.a4c-footer { padding-inline: clamp(24px, 5vw, 78px); box-sizing: border-box; }
}

/* -----------------------------------------------------------
   Layout/breakout fixes (alignfull, alignwide centering,
   block-gap removal, course-archive/checkout gutters) — kept
   verbatim, these are structural, not a "look."
----------------------------------------------------------- */
@media (max-width: 1320px) {
	.alignfull > .is-layout-constrained {
		padding-inline: clamp(24px, 5vw, 78px);
		box-sizing: border-box;
	}
	.wp-block-learnpress-list-courses,
	.wp-block-learnpress-course-filter {
		padding-inline: clamp(24px, 5vw, 78px);
		box-sizing: border-box;
	}
}
.is-layout-constrained > .alignwide {
	margin-left: auto;
	margin-right: auto;
}
.woocommerce-cart .entry-content > .woocommerce,
.woocommerce-checkout .entry-content > .woocommerce {
	margin-left: auto;
	margin-right: auto;
	float: none;
}
main.wp-block-group {
	padding-top: clamp(48px, 6vw, 88px);
	padding-bottom: clamp(48px, 6vw, 88px);
}
main.wp-block-group:has(> .entry-content > .alignfull:first-child),
main.wp-block-group:has(> .alignfull:first-child) { padding-top: 0; }
main.wp-block-group:has(> .entry-content > .alignfull:last-child),
main.wp-block-group:has(> .alignfull:last-child) { padding-bottom: 0; }
@media (max-width: 1320px) {
	main.wp-block-group { padding-inline: clamp(20px, 5vw, 78px); box-sizing: border-box; }
}
.wp-block-post-title, .wp-block-query-title { text-align: center; }

/* -----------------------------------------------------------
   WooCommerce checkout — ported unchanged from
   aba4change-institutional. These are defensive fixes against
   WooCommerce core / Amazon Payment Services (PayFort) / Valu
   gateway markup, not a "look" — no equivalent existed in the
   other two systems, nothing to deduplicate here.
----------------------------------------------------------- */
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout .checkout_coupon.woocommerce-form-coupon {
	max-width: 48%;
	margin-left: auto;
	margin-right: auto;
}
.woocommerce-checkout .woocommerce-form-coupon-toggle .wc-block-components-notice-banner {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	padding: 16px;
	margin: 0 0 20px;
}
.woocommerce-checkout .woocommerce-form-coupon-toggle svg { fill: var(--wp--preset--color--ink-soft); flex: none; }
.woocommerce-checkout .woocommerce-form-coupon-toggle .wc-block-components-notice-banner__content {
	color: var(--wp--preset--color--ink);
	font-weight: 700;
}
.woocommerce-checkout .showcoupon { color: var(--wp--preset--color--coral); text-decoration: underline; }
.woocommerce-checkout .checkout_coupon.woocommerce-form-coupon:not([style*="display:none"]):not([style*="display: none"]) {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	padding: 16px;
	margin-top: 0;
	margin-bottom: 20px;
}
.woocommerce-checkout .checkout_coupon .form-row { margin: 0 !important; padding: 0 !important; }
.woocommerce-checkout .checkout_coupon .form-row-first { flex: 1 1 220px; }
.woocommerce-checkout .checkout_coupon .form-row-last { flex: 0 0 auto; }
.woocommerce-checkout .checkout_coupon input#coupon_code {
	width: 100%;
	border: 1px solid var(--wp--preset--color--line) !important;
	border-radius: 10px;
	padding: 12px;
	font-size: 1rem;
	box-sizing: border-box;
}
.woocommerce-checkout .checkout_coupon button[name="apply_coupon"] { white-space: nowrap; }
@media (max-width: 768px) {
	.woocommerce-checkout .woocommerce-form-coupon-toggle,
	.woocommerce-checkout .checkout_coupon.woocommerce-form-coupon { max-width: 100%; }
}
@media (max-width: 600px) {
	.woocommerce-checkout .checkout_coupon.woocommerce-form-coupon:not([style*="display:none"]):not([style*="display: none"]) {
		flex-direction: column;
		align-items: stretch;
	}
	.woocommerce-checkout .checkout_coupon .form-row-first { flex: none; }
	.woocommerce-checkout .checkout_coupon button[name="apply_coupon"] { width: 100%; }
}

.woocommerce-checkout-payment { background: var(--wp--preset--color--white) !important; }
.wc_payment_methods.payment_methods {
	border: none;
	background: transparent;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.wc_payment_methods.payment_methods li.wc_payment_method {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	padding: 14px 16px;
	background: var(--wp--preset--color--white);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.wc_payment_methods.payment_methods li.wc_payment_method:has(input[type="radio"]:checked) {
	border-color: var(--wp--preset--color--coral);
	box-shadow: 0 0 0 3px var(--wp--preset--color--coral-soft);
}
.wc_payment_methods.payment_methods label {
	color: var(--wp--preset--color--ink);
	font-weight: 700;
	font-size: 0.95rem;
	display: flex;
	align-items: center;
	gap: 10px;
}
.wc_payment_methods .payment-icons, .wc_payment_methods .card-icon { height: 20px; width: auto; vertical-align: middle; }
.payment_box {
	padding: 14px !important;
	margin: 12px 0 0 !important;
	border: 1px solid var(--wp--preset--color--line) !important;
	border-radius: 10px !important;
	background: var(--wp--preset--color--paper) !important;
}
.aps_hosted_form { margin-top: 0; }
.aps_hosted_form .form-row { margin: 0 0 14px; }
.aps_hosted_form label {
	display: block;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	margin-bottom: 6px;
}
.aps_hosted_form input.input-text {
	border: 1px solid var(--wp--preset--color--line) !important;
	border-radius: 8px !important;
	padding: 10px 12px !important;
	background: var(--wp--preset--color--white) !important;
	font-size: 1rem !important;
	width: 100%;
	box-sizing: border-box;
}
.card-row { display: block; padding: 3px; box-sizing: border-box; }
.card-row .card-icon { display: none; }
.card-row input.input-text { width: 100%; height: auto !important; }
.aps_hosted_form input.input-text:focus { outline: none; border-color: var(--wp--preset--color--coral) !important; }
#aps_expiry_month_field { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
#aps_expiry_month_field label { flex-basis: 100%; }
#aps_expiry_month_field input.aps_expiry_month,
#aps_expiry_month_field input.aps_expiry_year { display: inline-block !important; width: 64px !important; flex: none; }
#aps_card_security_code_field input.aps_card_security_code { width: 100px !important; }
#aps_card_security_code_field { display: flex; align-items: center; gap: 10px; }
#aps_card_security_code_field label:not(.aps_error) { display: inline-block; margin-bottom: 0; white-space: nowrap; }

.valu_form input.input-text {
	border: 1px solid var(--wp--preset--color--line) !important;
	border-radius: 8px !important;
	padding: 10px 12px;
	background: var(--wp--preset--color--white) !important;
	font-size: 1rem !important;
	box-sizing: border-box;
	width: 100%;
}
.valu_form .aps-row { display: flex !important; align-items: center; flex-wrap: nowrap; gap: 8px; margin: 0 0 14px; }
.valu_form .aps-col-sm-1, .valu_form .aps-col-sm-3, .valu_form .aps-col-sm-4, .valu_form .aps-col-sm-8 { width: auto !important; padding: 0 !important; }
.valu_form .aps-row:has(.aps_valu_mob_number) .aps-col-sm-1 { flex: none; }
.valu_form .aps-row:has(.aps_valu_mob_number) .aps-col-sm-8 { flex: 1 1 auto; min-width: 0; }
.valu_form .aps-row:has(.aps_valu_mob_number) .aps-col-sm-3 { flex: none; }
.valu_form .country_code { color: var(--wp--preset--color--ink-soft); font-weight: 700; white-space: nowrap; }
.valu_form .aps-pull-left { color: var(--wp--preset--color--ink); font-size: 0.9rem; }
.valu_form button.aps-btn, .valu_form button.valu_customer_verify { white-space: nowrap; flex: none; }

#customer_details .col-2 { display: none; }
#customer_details .col-1 { float: none; margin: 0 auto; }

.woocommerce-page input.input-text,
.woocommerce-page textarea {
	border: 1px solid var(--wp--preset--color--line) !important;
	border-radius: 8px !important;
	background: var(--wp--preset--color--white) !important;
	font-size: 1rem !important;
	box-sizing: border-box;
}
.woocommerce-page input.input-text:focus { outline: none; border-color: var(--wp--preset--color--coral) !important; }
.woocommerce-checkout .select2-container .select2-selection--single {
	border: 1px solid var(--wp--preset--color--line) !important;
	border-radius: 8px !important;
	background: var(--wp--preset--color--white) !important;
}
.woocommerce-checkout .select2-container--focus .select2-selection--single,
.woocommerce-checkout .select2-container--open .select2-selection--single { border-color: var(--wp--preset--color--coral) !important; }
.woocommerce-checkout .select2-selection__rendered { font-size: 1rem !important; }
.woocommerce-checkout .select2-search__field { font-size: 1rem !important; }

.woocommerce-checkout .woocommerce-billing-fields .form-row.woocommerce-invalid input.input-text,
.woocommerce-checkout .woocommerce-billing-fields .form-row.woocommerce-invalid select,
.woocommerce-checkout .woocommerce-billing-fields .form-row.woocommerce-invalid textarea,
.woocommerce-checkout .woocommerce-billing-fields .form-row.woocommerce-invalid .select2-container .select2-selection { border-color: #e2401c !important; }

.woocommerce-page input.input-text,
.woocommerce-page input[type="number"],
.woocommerce-page input[type="tel"],
.woocommerce-page input[type="email"],
.woocommerce-page select,
.woocommerce-page textarea { font-size: 16px !important; }

.a4c-checkout-trust {
	clear: both;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--wp--preset--color--line);
	text-align: center;
}
.a4c-checkout-trust p { margin: 0 0 6px; font-size: 0.85rem; color: var(--wp--preset--color--ink-soft); }
.a4c-checkout-trust p:last-child { margin-bottom: 0; }
.a4c-checkout-trust a { color: var(--wp--preset--color--coral); text-decoration: underline; }

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout .wc-proceed-to-checkout a.checkout-button { font-size: 1rem; padding: 14px 28px; }

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
#place_order,
.wc-forward,
.valu_form .aps-btn {
	background: var(--wp--preset--color--contrast, #32373c);
	color: var(--wp--preset--color--white) !important;
	border: none;
	border-radius: 999px;
	padding: 13px 24px;
	font-weight: 800;
	font-size: 0.9375rem;
	line-height: 1;
	display: inline-block;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
#place_order:hover,
.wc-forward:hover,
.valu_form .aps-btn:hover { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--white) !important; }
#place_order { display: block; width: 100%; padding: 18px 24px; font-size: 1.125rem; }

/* -----------------------------------------------------------
   My Account — ported unchanged from aba4change-institutional.
   Pairs with woocommerce/myaccount/navigation.php + dashboard.php
   overrides already copied into this theme.
----------------------------------------------------------- */
body.logged-in.woocommerce-account .woocommerce {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 24px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation-link { margin: 0; padding: 0; border: none; }
.woocommerce-account .woocommerce-MyAccount-navigation-link a {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--wp--preset--color--ink-soft);
	transition: background-color .15s ease, color .15s ease;
}
.a4c-nav-icon { display: inline-flex; flex: 0 0 auto; color: currentColor; }
.a4c-nav-label { flex: 1 1 auto; min-width: 0; }
.a4c-nav-chevron { display: none; flex: 0 0 auto; color: var(--wp--preset--color--sea); }
.a4c-nav-chevron svg { transform: scaleX(1); }
html[dir="ltr"] .a4c-nav-chevron svg { transform: scaleX(-1); }
.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a {
	background: var(--wp--preset--color--coral-soft);
	color: var(--wp--preset--color--ink);
	font-weight: 500;
}
.woocommerce-account .woocommerce-MyAccount-navigation-link:not(.is-active) a:hover {
	background: var(--wp--preset--color--sea-pale);
	color: var(--wp--preset--color--ink);
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--wp--preset--color--line);
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--wp--preset--color--ink-soft); font-weight: 400; }
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a:hover { background: transparent; color: var(--wp--preset--color--coral); }
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout .a4c-nav-chevron { display: none; }

.a4c-account-userblock { display: none; }
.a4c-account-userblock__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wp--preset--color--coral);
	color: var(--wp--preset--color--white);
	font-weight: 700;
	flex: 0 0 auto;
}
.a4c-account-userblock__meta { display: flex; flex-direction: column; min-width: 0; }
.a4c-account-userblock__name { font-weight: 600; color: var(--wp--preset--color--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a4c-account-userblock__status { font-size: 0.8rem; color: var(--wp--preset--color--ink-soft); }

.a4c-account-back { display: none; }
.a4c-account-back__link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--wp--preset--color--ink-soft); font-weight: 500; }
.a4c-account-back__link svg { transform: scaleX(1); }
html[dir="ltr"] .a4c-account-back__link svg { transform: scaleX(-1); }

.a4c-account-greeting { font-size: 1.05rem; font-weight: 600; color: var(--wp--preset--color--ink); margin: 0 0 14px; }
.a4c-continue-card {
	display: flex;
	gap: 16px;
	align-items: center;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	padding: 16px;
}
.a4c-continue-card--empty { flex-direction: column; align-items: flex-start; gap: 12px; }
.a4c-continue-card__thumb { flex: 0 0 96px; width: 96px; height: 96px; object-fit: cover; border-radius: 8px; }
.a4c-continue-card__body { flex: 1 1 auto; min-width: 0; }
.a4c-continue-card__title { margin: 0 0 4px; font-weight: 700; font-size: 1.05rem; color: var(--wp--preset--color--ink); }
.a4c-continue-card__progress { margin: 0 0 10px; font-size: 0.85rem; color: var(--wp--preset--color--ink-soft); }
.a4c-continue-card__cta {
	display: inline-block;
	background: var(--wp--preset--color--coral);
	color: var(--wp--preset--color--white) !important;
	padding: 9px 20px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
}
.a4c-continue-card__cta:hover { background: var(--wp--preset--color--ink-soft); }

.a4c-settings-list { display: flex; flex-direction: column; gap: 10px; }
.a4c-settings-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}
.a4c-settings-row:hover { background: var(--wp--preset--color--sea-pale); }
.a4c-settings-row__label { flex: 1 1 auto; }
.a4c-settings-row .a4c-nav-chevron { display: inline-flex; }

.a4c-scheduled-orders-callout { margin: 0 0 16px; padding: 10px 14px; background: var(--wp--preset--color--sea-pale); border-radius: 8px; font-size: 0.9rem; }
.a4c-scheduled-orders-callout a { color: var(--wp--preset--color--ink); font-weight: 600; }

.woocommerce-account .lp-archive-courses,
.woocommerce-account .lp-archive-courses ul.profile-courses-list,
.woocommerce-account .lp-archive-courses li.course { width: 100%; }
.woocommerce-account .lp-archive-courses ul.profile-courses-list { display: flex; flex-direction: column; gap: 14px; list-style: none; margin: 0; padding: 0; }
.woocommerce-account .lp-archive-courses .course-item {
	display: flex;
	flex-direction: row;
	width: 100%;
	gap: 18px;
	align-items: flex-start;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	background: var(--wp--preset--color--white);
	padding: 16px;
}
.woocommerce-account .lp-archive-courses .course-thumbnail { flex: 0 0 200px; width: 200px; }
.woocommerce-account .lp-archive-courses .course-thumbnail .course-img { border-radius: 8px; overflow: hidden; }
.woocommerce-account .lp-archive-courses .course-thumbnail img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.woocommerce-account .lp-archive-courses .course-content { flex: 1 1 auto; width: 100%; min-width: 0; }
.woocommerce-account .lp-archive-courses .wap-course-title { display: block; width: 100%; margin: 0 0 8px; font-size: 1.3rem; line-height: 1.35; font-weight: 700; color: var(--wp--preset--color--ink); }
.woocommerce-account .lp-archive-courses .wap-course-title a { display: block; }
.woocommerce-account .lp-archive-courses .course-instructor-category { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.85rem; color: var(--wp--preset--color--ink-soft); margin-bottom: 8px; }
.woocommerce-account .lp-archive-courses .course-wrap-meta { margin-bottom: 12px; font-size: 0.85rem; color: var(--wp--preset--color--ink-soft); }
.woocommerce-account .lp-archive-courses .meta-item-duration,
.woocommerce-account .lp-archive-courses .meta-item-level,
.woocommerce-account .lp-archive-courses .meta-item-quiz,
.woocommerce-account .lp-archive-courses .meta-item-student,
.woocommerce-account .lp-archive-courses .course-short-description,
.woocommerce-account .lp-archive-courses .course-price,
.woocommerce-account .lp-archive-courses .lp-wrap-btn-view-course-students { display: none; }
.woocommerce-account .lp-archive-courses .course-readmore a {
	display: inline-block;
	background: var(--wp--preset--color--coral);
	color: var(--wp--preset--color--white);
	padding: 9px 20px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
}
.woocommerce-account .lp-archive-courses .course-readmore a:hover { background: var(--wp--preset--color--ink-soft); }

@media (min-width: 769px) {
	body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation { flex: 0 0 230px; border-inline-end: none; }
	body.logged-in.woocommerce-account .woocommerce-MyAccount-content { flex: 1 1 auto; min-width: 0; }
	.a4c-account-userblock {
		display: flex;
		align-items: center;
		gap: 10px;
		padding-inline: 10px;
		padding-block-end: 14px;
		margin-block-end: 6px;
		border-block-end: 1px solid var(--wp--preset--color--line);
	}
	.woocommerce-account .woocommerce-MyAccount-navigation-link a { padding: 9px 10px; border-radius: 8px; font-size: 0.92rem; }
	.a4c-account-back { display: none !important; }
	.woocommerce-account .lp-archive-courses .course-item { flex-direction: row; }
}
@media (max-width: 768px) {
	body.logged-in.woocommerce-account .woocommerce { flex-direction: column; gap: 16px; }
	body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation,
	body.logged-in.woocommerce-account .woocommerce-MyAccount-content { flex-basis: auto; width: 100%; }
	body.a4c-account-home.logged-in.woocommerce-account .woocommerce-MyAccount-content { order: 1; }
	body.a4c-account-home.logged-in.woocommerce-account .woocommerce-MyAccount-navigation { order: 2; }
	body.a4c-account-inner.logged-in.woocommerce-account .woocommerce-MyAccount-navigation { display: none; }
	body.a4c-account-inner .a4c-account-back { display: block; margin-block-end: 4px; }
	.woocommerce-account .woocommerce-MyAccount-navigation-link a { min-height: 48px; padding: 12px 14px; }
	.woocommerce-account .woocommerce-MyAccount-navigation ul { display: flex; flex-direction: column; gap: 10px; }
	.a4c-nav-chevron { display: inline-flex; }
	.a4c-continue-card { flex-direction: column; align-items: stretch; text-align: center; }
	.a4c-continue-card__thumb { width: 100%; height: 160px; flex-basis: auto; }
	.a4c-continue-card__cta { display: block; text-align: center; }
	.woocommerce-account .lp-archive-courses .course-item { flex-direction: column; }
	.woocommerce-account .lp-archive-courses .course-thumbnail { width: 100%; flex-basis: auto; }
}

/* -----------------------------------------------------------
   Contact/lead form container + workforce roster — ported
   unchanged. Pairs with the a4c_workforce_apply/a4c_workforce_roster
   shortcodes in functions.php.
----------------------------------------------------------- */
.a4c-form-card {
	background: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 28px;
	padding: 34px;
	box-shadow: 0 25px 70px rgba(39, 83, 120, .1);
}
.a4c-form-card .ff-el-form-control { border-radius: 12px !important; min-height: 44px; }
.a4c-form-card .ff-btn-submit { background-color: var(--wp--preset--color--ink) !important; border-radius: 999px !important; min-height: 48px; font-weight: 800; }
.a4c-form-card label { display: block; font-weight: 700; font-size: .8rem; margin-bottom: 14px; }
.a4c-form-card input[type="text"],
.a4c-form-card input[type="email"],
.a4c-form-card input[type="tel"],
.a4c-form-card input[type="number"],
.a4c-form-card select,
.a4c-form-card textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px !important;
	min-height: 44px;
	padding: 10px 14px;
	font-family: inherit;
	font-size: .95rem;
	background: #fff;
	margin-top: 6px;
	font-weight: 400;
}
.a4c-form-card textarea { min-height: 110px; resize: vertical; }
.a4c-form-card input[type="file"] { display: block; margin-top: 6px; font-size: .8rem; }
.a4c-form-card .a4c-wf-consent { display: flex; gap: 10px; align-items: flex-start; font-size: .8rem; font-weight: 400; }
.a4c-form-card .a4c-wf-consent input { margin-top: 3px; flex-shrink: 0; }
.a4c-wf-submit {
	background-color: var(--wp--preset--color--ink) !important;
	color: #fff !important;
	border: 0;
	border-radius: 999px !important;
	min-height: 48px;
	padding: 0 28px;
	font-weight: 800;
	cursor: pointer;
	font-size: .9rem;
}
.a4c-wf-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.a4c-wf-tab {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	padding: 9px 20px;
	font-size: .8rem;
	font-weight: 700;
	cursor: pointer;
	background: #fff;
	color: var(--wp--preset--color--ink);
}
.a4c-wf-tab.is-active { background: var(--wp--preset--color--ink); color: #fff; border-color: var(--wp--preset--color--ink); }
.a4c-wf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.a4c-wf-card { border: 1px solid var(--wp--preset--color--line); border-radius: 26px; padding: 28px 22px; text-align: center; background: #fff; }
.a4c-wf-card h3 { margin: 0 0 4px; font-size: 1.1rem; }
.a4c-wf-photo {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 auto 16px;
	display: block;
	border: 4px solid var(--wp--preset--color--paper);
	box-shadow: 0 12px 30px rgba(23, 59, 90, .16);
}
@media (max-width: 900px) { .a4c-wf-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .a4c-wf-grid { grid-template-columns: 1fr; } }

/* -----------------------------------------------------------
   Fluent Forms + Contact Form 7 field borders — ported unchanged
   (defensive fixes against third-party plugin CSS, not a "look").
----------------------------------------------------------- */
.ff-el-form-control {
	border: 1px solid var(--wp--preset--color--line) !important;
	border-radius: 8px !important;
	background: var(--wp--preset--color--white) !important;
	font-size: 1rem !important;
	box-sizing: border-box;
}
.ff-el-form-control:focus { outline: none; border-color: var(--wp--preset--color--coral) !important; }
.wpcf7-form-control {
	display: block;
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--line) !important;
	border-radius: 12px !important;
	min-height: 44px;
	padding: 10px 14px;
	font-family: inherit;
	font-size: .95rem;
	background: var(--wp--preset--color--white) !important;
	margin-top: 6px;
	font-weight: 400;
}
.wpcf7-form-control:focus { outline: none; border-color: var(--wp--preset--color--coral) !important; }
textarea.wpcf7-form-control { min-height: 110px; resize: vertical; }

/* -----------------------------------------------------------
   LearnPress single-course + lesson viewer fixes — ported
   unchanged. Pairs with learnpress/block/html/single-course-
   template-default.html already copied into this theme.
----------------------------------------------------------- */
@media (min-width: 992px) {
	body.single-lp_course .lp-block-course-sidebar { margin-top: 0 !important; margin-block-start: 0 !important; }
}
@media (max-width: 781px) {
	body.single-lp_course .a4c-course-content-col { padding-left: 20px; padding-right: 20px; }
}
.content-item-wrap iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; }
.lp-button.completed,
.lp-button.completed:disabled,
.lp-button.completed[disabled] {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	background: #3db748 !important;
	color: #fff !important;
	border: 1px solid transparent !important;
	border-radius: 999px !important;
	padding: 8px 16px !important;
	opacity: 1 !important;
}
.lp-button.completed i { font-size: 0.8em; }
#popup-footer .course-item-nav .next::before { content: "\f0d9" !important; }
#popup-footer .course-item-nav .prev::before,
#popup-footer .prev::before { content: "\f0da" !important; }

/* -----------------------------------------------------------
   Booking widget (WooCommerce Bookings, [aba_booking_widget] on
   /consultation/) + the standalone price-card also used there —
   ported unchanged.
----------------------------------------------------------- */
/* align-items: stretch (not center) — the plugin's markup nests the
   date-picker several levels inside <form class="cart">, and with
   align-items:center that <form> (the actual flex item) shrink-wraps
   to its content's own preferred width instead of filling the widget,
   so a width:100%/max-width:420px further down had nothing to be
   100% of and silently computed to a much narrower ~346px. Stretching
   the flex item to the widget's full width, then centering everything
   inside it explicitly (text-align + margin:auto below), fixes that. */
.aba-booking-widget { margin-top: 8px; display: flex; flex-direction: column; align-items: stretch; text-align: center; }
.aba-booking-widget form.cart,
.aba-booking-widget .wc-bookings-booking-form { width: 100%; }
.aba-booking-widget .wc-bookings-date-picker,
.aba-booking-widget .form-field,
.aba-booking-widget .timezone-details,
.aba-booking-widget .wc-bookings-booking-cost { width: 100%; max-width: 420px; margin-inline: auto; }

/* Calendar card shell — wider, softer, no jQuery-UI-default border grid */
.aba-booking-widget .picker .ui-datepicker-inline {
	width: 100%;
	margin: 0 auto;
	border: 1px solid var(--wp--preset--color--sea-pale, #e4eff7);
	border-radius: 22px;
	padding: 22px 20px;
	background: var(--wp--preset--color--white);
	box-shadow: 0 16px 40px rgba(23, 59, 90, .08);
}

/* Header: month/year + prev/next — plain text title, circular nav */
.aba-booking-widget .ui-datepicker .ui-datepicker-header {
	position: relative;
	background: transparent;
	border: 0;
	padding: 0 40px 18px;
	color: var(--wp--preset--color--ink);
}
.aba-booking-widget .ui-datepicker .ui-datepicker-title {
	font-size: 1.05rem;
	font-weight: 800;
	text-transform: none;
	line-height: 1.4;
}
.aba-booking-widget .ui-datepicker .ui-datepicker-prev,
.aba-booking-widget .ui-datepicker .ui-datepicker-next {
	top: -4px;
	width: 34px;
	height: 34px;
	background-color: var(--wp--preset--color--sea-pale) !important;
	border-radius: 50%;
	border: 0;
}
.aba-booking-widget .ui-datepicker .ui-datepicker-prev-hover,
.aba-booking-widget .ui-datepicker .ui-datepicker-next-hover,
.aba-booking-widget .ui-datepicker .ui-datepicker-prev.ui-state-hover,
.aba-booking-widget .ui-datepicker .ui-datepicker-next.ui-state-hover {
	top: -4px;
	background-color: var(--wp--preset--color--sea) !important;
}
.aba-booking-widget .ui-datepicker .ui-datepicker-prev span,
.aba-booking-widget .ui-datepicker .ui-datepicker-next span {
	margin-top: -8px;
}

/* Weekday row — quiet, no grid border/fill */
.aba-booking-widget .ui-datepicker th {
	border: 0 !important;
	background: transparent !important;
	padding: 0 0 10px !important;
	color: var(--wp--preset--color--ink-soft);
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
}

/* Day cells — circular, gapped, no grid lines */
.aba-booking-widget .ui-datepicker td {
	border: 0 !important;
	background: transparent !important;
	padding: 2px !important;
}
.aba-booking-widget .ui-datepicker td .ui-state-default,
.aba-booking-widget .ui-datepicker td span {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin: 0 auto;
	padding: 0 !important;
	border-radius: 50%;
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	transition: background .15s ease, color .15s ease;
}
.aba-booking-widget .ui-datepicker td.ui-datepicker-other-month .ui-state-default {
	color: var(--wp--preset--color--line);
}
.aba-booking-widget .ui-datepicker td.ui-datepicker-other-month { background: transparent !important; }

/* Available days — the site's light blue instead of the plugin's green */
.aba-booking-widget .ui-datepicker td.bookable a,
.aba-booking-widget .ui-datepicker td.partial_booked a,
.aba-booking-widget .ui-datepicker td.bookable-range .ui-state-default,
.aba-booking-widget .ui-datepicker td.bookable-range a.ui-state-default {
	background-color: var(--wp--preset--color--sea-pale) !important;
	background-image: none !important;
	color: var(--wp--preset--color--ink) !important;
	text-decoration: none !important;
	font-weight: 700;
}
.aba-booking-widget .ui-datepicker td.bookable a:hover,
.aba-booking-widget .ui-datepicker td.partial_booked a:hover {
	background-color: var(--wp--preset--color--sea) !important;
	color: var(--wp--preset--color--white) !important;
}
.aba-booking-widget .ui-datepicker td.ui-datepicker-current-day a {
	background-color: var(--wp--preset--color--sea) !important;
	color: var(--wp--preset--color--white) !important;
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--ink);
	opacity: 1 !important;
}

/* Selected day stays coral, matching the site's other selection states */
.aba-booking-widget .ui-datepicker td .ui-state-active,
.aba-booking-widget .ui-datepicker td a.ui-state-active {
	background-color: var(--wp--preset--color--coral) !important;
	background-image: none !important;
	color: var(--wp--preset--color--white) !important;
	border-color: var(--wp--preset--color--coral);
	text-decoration: none !important;
}

.aba-booking-widget .block-picker {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	width: 100%;
	max-width: 420px;
	list-style: none;
	margin: 16px auto 0;
	padding: 0;
}
.aba-booking-widget .block-picker li { margin: 0; }
.aba-booking-widget .block-picker li:only-child { color: var(--wp--preset--color--ink); opacity: .7; }
.aba-booking-widget .block-picker label {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid var(--wp--preset--color--sea-pale, #e3e6e0);
	border-radius: 999px;
	cursor: pointer;
}
.aba-booking-widget .block-picker input { position: absolute; opacity: 0; pointer-events: none; }
.aba-booking-widget .block-picker input:checked + label,
.aba-booking-widget .block-picker label.block-selected {
	background: var(--wp--preset--color--coral);
	border-color: var(--wp--preset--color--coral);
	color: var(--wp--preset--color--white);
}
.aba-booking-widget .wc-bookings-booking-cost { margin-top: 12px; font-weight: 700; }
.aba-booking-widget .wc-bookings-booking-form-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin-top: 16px;
	padding: 0 28px;
	background-color: var(--wp--preset--color--coral);
	color: #fff;
	border: none;
	border-radius: 999px;
	font-weight: 700;
	cursor: pointer;
	transition: transform .2s ease;
}
.aba-booking-widget .wc-bookings-booking-form-button:hover:not(.disabled) { transform: translateY(-2px); }
.aba-booking-widget .wc-bookings-booking-form-button.disabled { opacity: .5; cursor: not-allowed; }

/* Mobile: the calendar sits inside .a4c-form-card's 34px padding plus
   the plugin's own ~18px form padding and ~5px date-picker padding —
   fine on desktop where there's width to spare, but on a ~360-390px
   phone that overhead alone eats over 100px, leaving too little room
   for fixed 38px day circles (7 columns doesn't fit — title and nav
   buttons started overlapping). Shrink the card's own padding when it
   wraps the booking widget specifically, and shrink the calendar's
   circles/buttons/spacing to fit what's actually left. */
@media (max-width: 480px) {
	.a4c-form-card:has(.aba-booking-widget) { padding: 18px 14px; }
	.aba-booking-widget .picker .ui-datepicker-inline { padding: 16px 10px; border-radius: 18px; }
	.aba-booking-widget .ui-datepicker .ui-datepicker-header { padding: 0 30px 14px; }
	.aba-booking-widget .ui-datepicker .ui-datepicker-title { font-size: .92rem; }
	.aba-booking-widget .ui-datepicker .ui-datepicker-prev,
	.aba-booking-widget .ui-datepicker .ui-datepicker-next { width: 26px; height: 26px; }
	.aba-booking-widget .ui-datepicker td .ui-state-default,
	.aba-booking-widget .ui-datepicker td span { width: 30px; height: 30px; font-size: .85rem; }
	.aba-booking-widget .ui-datepicker th { font-size: .62rem; }
}

.a4c-price-card {
	gap: 32px;
	margin: 20px 0 4px;
	padding: 22px 28px;
	background: var(--wp--preset--color--paper, #fff);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 20px;
}
.a4c-price-card-label { margin: 0; font-size: .8rem; font-weight: 700; color: var(--wp--preset--color--ink-soft); text-transform: uppercase; letter-spacing: .06em; }
.a4c-price-card-value { display: block; margin-top: 6px; font-size: 1.4rem; font-weight: 800; color: var(--wp--preset--color--ink); }
.a4c-price-card-amount,
.a4c-price-card-amount .woocommerce-Price-amount { color: var(--wp--preset--color--coral); }

/* ===========================================================
   Components ported from .ibt-kit-4 (ibt-landing.css) — retoned
   from gold/amber onto the a4c-* coral/navy palette and
   theme.json tokens. .ibt-kit-4 .final and the Global Styles
   .cta-band (already merged above) served the same "closing CTA"
   role, so both now share a4c-cta-band instead of staying two
   components.
=========================================================== */

/* -----------------------------------------------------------
   a4c-announcement — top bar
----------------------------------------------------------- */
.a4c-announcement {
	background: var(--wp--preset--color--ink);
	color: #fff;
	text-align: center;
	padding: 13px 24px;
	font-size: 1rem;
	font-weight: 500;
}
.a4c-announcement b { color: var(--wp--preset--color--coral); }
/* ibt-kit-4 pages originally used a lighter blue bar with a gold
   highlight for this exact component (.ann) — keep that distinct
   look rather than the generic ink/coral bar used elsewhere. */
.ibt-kit-4 .a4c-announcement { background: #255378; }
.ibt-kit-4 .a4c-announcement b { color: #F2B544; }

/* -----------------------------------------------------------
   a4c-whatsapp-btn — collapsed to a small round icon button
   (was a wide text pill that kept covering pricing/CTA content
   near the bottom of pages as users scrolled - a round ~52px
   button in the corner is the standard floating-chat pattern and
   has a much smaller footprint). The link text stays in the
   markup (font-size:0 hides it visually only) so its accessible
   name/screen-reader label is unchanged.
----------------------------------------------------------- */
.a4c-whatsapp-btn {
	position: fixed;
	bottom: 22px;
	inset-inline-start: 22px;
	z-index: 60;
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgb(37, 211, 102);
	color: #fff;
	border-radius: 50%;
	padding: 0;
	font-size: 0;
	font-weight: 600;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
	text-decoration: none;
}
.a4c-whatsapp-btn::before { content: "\1F4AC"; font-size: 24px; line-height: 1; }

/* -----------------------------------------------------------
   a4c-sticky-buybar — fixed mobile purchase bar. Disabled per
   explicit request: it was covering most of the mobile screen.
   Kept as display:none (not deleted) since the markup still
   exists in page content; never re-enable the mobile display:flex.
----------------------------------------------------------- */
.a4c-sticky-buybar {
	display: none !important;
}

/* -----------------------------------------------------------
   a4c-hero — richer hero variant (media card + "what you get"
   checklist), for use alongside/instead of the hero-split.php
   pattern's simpler two-column layout.
----------------------------------------------------------- */
.a4c-hero-grid {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 48px;
	align-items: start;
}
@media (max-width: 900px) { .a4c-hero-grid { grid-template-columns: 1fr; } }
.a4c-hero-media { position: relative; }
.a4c-hero-media img { width: 100%; border-radius: 26px 26px 0 0; object-fit: cover; }
.a4c-hero-media .a4c-hero-tag {
	position: absolute;
	top: 28px;
	inset-inline-start: -18px;
	background: var(--wp--preset--color--coral);
	color: var(--wp--preset--color--ink);
	padding: 14px 20px;
	border-radius: 10px;
	font-size: 1rem;
	font-weight: 700;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}
.a4c-hero-includes {
	background: #fff;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 26px;
	padding: 24px 28px;
	margin-top: 22px;
}
/* the label is a plain <p> in the actual markup, not a <b> — style
   whichever tag shows up as the first child. !important: .ibt-kit-4
   p (same specificity, loads after this file) would otherwise force
   its own lighter body-text color/weight onto the label. */
.a4c-hero-includes > b,
.a4c-hero-includes > p:first-child {
	display: block;
	margin-bottom: 14px;
	font-size: 1.05rem !important;
	font-weight: 800 !important;
	color: #255378 !important;
}
.a4c-hero-includes ul { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; list-style: none !important; margin: 0; padding: 0 !important; }
.a4c-hero-includes li { font-size: .9rem; color: var(--wp--preset--color--ink-soft); padding-inline-start: 22px; position: relative; }
.a4c-hero-includes li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 7px;
	width: 12px;
	height: 7px;
	border-inline-start: 2px solid #D97D0D;
	border-bottom: 2px solid #D97D0D;
	transform: rotate(-45deg);
}
@media (max-width: 600px) { .a4c-hero-includes ul { grid-template-columns: 1fr; } }

/* -----------------------------------------------------------
   a4c-outcomes-grid — numbered 4-across benefit grid. Redone as
   a light card grid on the a4c-card foundation (the ibt-kit-4
   source reused a dark .ibt-kit-3 component via ad-hoc inline
   color overrides on every live page — this gives it a real
   light variant instead of carrying that workaround forward).
----------------------------------------------------------- */
.a4c-outcomes-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--wp--preset--color--line);
}
@media (max-width: 900px) { .a4c-outcomes-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .a4c-outcomes-grid { grid-template-columns: 1fr; } }
.a4c-outcomes-grid > div {
	background: #fff;
	padding: 30px 26px;
	min-height: 200px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.a4c-outcomes-grid .a4c-outcomes-grid__n {
	font-size: 1.9rem;
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--coral);
}
.a4c-outcomes-grid h4 { font-size: 1.25rem; line-height: 1.4; margin: 0; }
.a4c-outcomes-grid p { font-size: .95rem; line-height: 1.7; color: var(--wp--preset--color--ink-soft); font-weight: 300; margin: 0; }

/* -----------------------------------------------------------
   a4c-curriculum — module accordion (native <details>)
----------------------------------------------------------- */
.a4c-curriculum { border-top: 1px solid var(--wp--preset--color--line); }
.a4c-curriculum details { border-bottom: 1px solid var(--wp--preset--color--line); }
.a4c-curriculum summary {
	list-style: none;
	cursor: pointer;
	display: grid;
	grid-template-columns: 56px 1fr auto auto;
	gap: 20px;
	align-items: center;
	padding: 22px 0;
}
.a4c-curriculum summary::-webkit-details-marker { display: none; }
.a4c-curriculum summary .num { font-size: 1.9rem; font-weight: 700; color: rgba(23, 59, 90, .22); }
.a4c-curriculum summary .t { font-size: 1.15rem; font-weight: 800; color: var(--wp--preset--color--ink); transition: color .2s; }
.a4c-curriculum summary:hover .t { color: var(--wp--preset--color--coral); }
.a4c-curriculum summary .cnt { font-size: .85rem; color: var(--wp--preset--color--ink-soft); }
.a4c-curriculum summary::after { content: "+"; color: var(--wp--preset--color--coral); font-size: 1.35rem; font-weight: 400; }
.a4c-curriculum details[open] summary::after { content: "\2013"; }
/* Block editor wraps the summary's RichText content in its own
   .block-editor-rich-text__editable div, which becomes the only
   direct child of the grid — collapsing num/t/cnt into one 56px
   column instead of the front-end's 3 separate spans. Only exists
   in the editor iframe; harmless no-op on the front end. */
.a4c-curriculum summary .block-editor-rich-text__editable { display: contents; }
/* !important: .ibt-kit-4 ul (same specificity, loads after this
   file) resets padding/list-style to 0, which un-indents this
   sub-list from the right so it no longer reads as nested. */
.a4c-curriculum ul { list-style: none !important; margin: 0; padding: 0 56px 22px 0 !important; display: grid; gap: 10px; }
.a4c-curriculum li { font-size: .9rem; color: var(--wp--preset--color--ink-soft); font-weight: 300; padding-inline-start: 18px; position: relative; }
.a4c-curriculum li::before { content: ""; position: absolute; inset-inline-start: 0; top: 8px; width: 6px; height: 6px; background: var(--wp--preset--color--coral); }
@media (max-width: 900px) {
	.a4c-curriculum summary { grid-template-columns: 40px 1fr auto; }
	.a4c-curriculum summary .cnt { display: none; }
}

/* -----------------------------------------------------------
   a4c-faq — question accordion (native <details>), + a4c-faq-more
   nested "show all" toggle
----------------------------------------------------------- */
.a4c-faq details { border-bottom: 1px solid var(--wp--preset--color--line); }
.a4c-faq summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	padding: 22px 0;
	cursor: pointer;
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	list-style: none;
}
.a4c-faq summary::-webkit-details-marker { display: none; }
.a4c-faq summary::after { content: "+"; color: var(--wp--preset--color--coral); flex: 0 0 auto; font-size: 1.4rem; font-weight: 400; }
.a4c-faq details[open] summary::after { content: "\2013"; }
.a4c-faq details p { font-size: 1rem; max-width: 820px; margin: 0 0 22px; }
.a4c-faq-more {
	border-bottom: none !important;
	text-align: center;
	margin-top: 12px;
}
.a4c-faq-more > summary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	list-style: none;
	cursor: pointer;
	padding: 12px 24px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	font-size: .9rem;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	margin: 8px 0 0;
	transition: border-color .2s, color .2s;
}
.a4c-faq-more > summary:hover { border-color: var(--wp--preset--color--coral); color: var(--wp--preset--color--coral); }
.a4c-faq-more > summary::after { content: "\2193"; font-size: .8rem; }
.a4c-faq-more[open] > summary::after { content: "\2191"; }
.a4c-faq-more[open] > summary { margin-bottom: 8px; }

/* -----------------------------------------------------------
   a4c-testimonial — reuses a4c-card
----------------------------------------------------------- */
.a4c-testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .a4c-testimonial-grid { grid-template-columns: 1fr; } }
.a4c-testimonial { display: flex; flex-direction: column; gap: 16px; }
.a4c-testimonial__who { display: flex; gap: 12px; align-items: center; margin-top: auto; }
.a4c-testimonial__who img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.a4c-testimonial__who b { font-size: 1rem; color: var(--wp--preset--color--ink); display: block; }
.a4c-testimonial__who span { font-size: .85rem; color: var(--wp--preset--color--ink-soft); }

/* -----------------------------------------------------------
   a4c-quote
----------------------------------------------------------- */
.a4c-quote {
	background: var(--wp--preset--color--paper);
	border-radius: 26px;
	padding: 36px 40px;
	margin-top: 40px;
}
.a4c-quote p { font-size: 1.5rem; line-height: 1.65; color: var(--wp--preset--color--ink); font-weight: 600; }
.a4c-quote__attribution { display: block; margin-top: 18px; font-size: 1rem; color: var(--wp--preset--color--ink-soft); }

/* -----------------------------------------------------------
   a4c-guarantee — compact trust bar: small round check badge +
   one bold line + one short line. Redesigned from the old large
   bordered card + hexagon "48 ساعة" shield, which research on
   guarantee/trust-badge placement flagged as oversized relative
   to the content it conveys (one signal should read in ~1s, not
   dominate the layout). The checkmark is CSS-only (::before) on
   an emptied shield paragraph, so it isn't announced by screen
   readers as stray "48 ساعة" text the way the old badge was.
----------------------------------------------------------- */
.a4c-guarantee {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	background: var(--wp--preset--color--coral-soft);
	border-radius: 16px;
	padding: 18px 22px;
}
/* padding-bottom: the fixed .a4c-whatsapp-btn pill sits ~90px above the
   viewport bottom on mobile; without this buffer, this box's own text
   (often the section's last content before more sections below) can end
   up permanently covered by that fixed button while it's in view. */
@media (max-width: 600px) { .a4c-guarantee { padding-bottom: 100px; } }
.a4c-guarantee__shield {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	margin-top: 2px;
	border-radius: 50%;
	background: var(--wp--preset--color--coral);
	display: flex;
	align-items: center;
	justify-content: center;
}
.a4c-guarantee__shield::before {
	content: "\2713";
	color: #fff;
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1;
}
.a4c-guarantee > .wp-block-group { flex: 1 1 auto; min-width: 0; }
.a4c-guarantee h3 {
	font-size: 1.05rem;
	margin: 0 0 4px;
}
.a4c-guarantee p {
	font-size: .92rem;
	color: var(--wp--preset--color--ink-soft);
	margin: 0;
	line-height: 1.5;
}

/* -----------------------------------------------------------
   a4c-cta-band — closing call-to-action row. Defaults to the
   dark brand-blue background (formerly .final, the ibt-kit-4
   closing band); add .a4c-section-coral for the coral variant
   (formerly .cta-band/.cta-inner). Merges the two components
   that served this exact role in the old systems.
----------------------------------------------------------- */
.a4c-cta-band {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
	padding: clamp(64px, 8vw, 110px) 0;
	background-color: var(--wp--preset--color--ink-soft);
	color: #fff;
}
/* !important: on the ibt-kit-4 pages, .ibt-kit-4 h2/p (same
   specificity, loads after this file) sets a dark-on-light color
   meant for a white background — it ties and wins, leaving this
   band's heading/paragraph nearly invisible on its dark bg. */
.a4c-cta-band h2, .a4c-cta-band h3 { color: #fff !important; }
.a4c-cta-band p { color: rgba(255, 255, 255, .84) !important; }
.a4c-cta-band .a4c-eyebrow { color: #fff !important; }
.a4c-cta-band__text { flex: 1 1 420px; }
.a4c-cta-band .wp-block-buttons { flex: 0 0 auto; }

.a4c-cta-band.a4c-section-coral { background-color: var(--wp--preset--color--coral); }
.a4c-cta-band.a4c-section-coral .a4c-eyebrow::before {
	background: #fff;
	box-shadow: 0 0 0 5px rgba(255, 255, 255, .25);
}

/* ===========================================================
   Components ported from the live (non-draft) part of the site's
   Global Styles Additional CSS.
=========================================================== */

/* -----------------------------------------------------------
   a4c-section-header — eyebrow + heading + intro paragraph,
   two-column on desktop (heading left, intro right).
----------------------------------------------------------- */
.a4c-section-header {
	display: grid;
	grid-template-columns: 1fr .72fr;
	align-items: end;
	gap: 48px;
	margin-bottom: 40px;
}
@media (max-width: 782px) { .a4c-section-header { grid-template-columns: 1fr; } }
.a4c-section-header h2 { max-width: 650px; margin-bottom: 0; }
.a4c-section-header > p { max-width: 480px; margin-bottom: 4px; color: var(--wp--preset--color--ink-soft); }

/* -----------------------------------------------------------
   a4c-process-steps — numbered step row, for a4c-section-dark
----------------------------------------------------------- */
.a4c-process-steps {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid rgba(255, 255, 255, .2);
}
@media (max-width: 900px) { .a4c-process-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .a4c-process-steps { grid-template-columns: 1fr; } }
.a4c-process-steps li {
	position: relative;
	min-height: 200px;
	padding: 28px 20px 18px;
	border-inline-end: 1px solid rgba(255, 255, 255, .2);
}
.a4c-process-steps li:last-child { border-inline-end: 0; }
.a4c-process-steps li::before {
	content: '';
	position: absolute;
	top: -5px;
	inset-inline-start: 20px;
	width: 9px;
	height: 9px;
	border: 2px solid var(--wp--preset--color--ink);
	border-radius: 50%;
	background: var(--wp--preset--color--coral);
}
.a4c-process-steps li > span { color: #f3e6ba; font-size: .68rem; font-weight: 850; }
.a4c-process-steps h4 { margin: 50px 0 10px; font-size: 1.1rem; }
.a4c-process-steps p { margin: 0; color: rgba(255, 255, 255, .65); font-size: .8rem; line-height: 1.6; }

/* -----------------------------------------------------------
   journey-section (schools) — never renamed, had no CSS at all;
   also the only place a4c-process-steps sits on a LIGHT background
   instead of a4c-section-dark, so its light-on-dark text/border
   colors need a matching light-context override here.
----------------------------------------------------------- */
.journey-section {
	padding: clamp(64px, 8vw, 110px) 0;
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
}
.centred-heading { max-width: 850px; margin: 0 auto 40px; text-align: center; }
.centred-heading .a4c-eyebrow { justify-content: center; }
.journey-section .a4c-process-steps {
	border-top-color: var(--wp--preset--color--line);
}
.journey-section .a4c-process-steps li {
	border-inline-end-color: var(--wp--preset--color--line);
}
.journey-section .a4c-process-steps li::before { border-color: var(--wp--preset--color--paper); }
.journey-section .a4c-process-steps li > span { color: var(--wp--preset--color--coral); }
.journey-section .a4c-process-steps p { color: var(--wp--preset--color--ink-soft); }

/* -----------------------------------------------------------
   a4c-event-card (+ body) — media/press card
----------------------------------------------------------- */
.a4c-event-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .a4c-event-card-grid { grid-template-columns: 1fr; } }
.a4c-event-card {
	display: flex;
	min-height: 100%;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 16px 40px rgba(23, 59, 90, .06);
}
.a4c-event-card figure { height: 215px; margin: 0; overflow: hidden; background: var(--wp--preset--color--sea-pale); }
.a4c-event-card figure img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.a4c-event-card:hover figure img { transform: scale(1.035); }
.a4c-event-card-body { display: flex; flex: 1; flex-direction: column; padding: 24px; }
.a4c-event-card-date { margin: 18px 0 8px; color: var(--wp--preset--color--ink-soft); font-size: .75rem; font-weight: 700; }
.a4c-event-card-body h5 { margin: 0 0 12px; font-size: 1.2rem; line-height: 1.27; }
.a4c-event-card-body > p:not(.a4c-event-card-date) { margin: 0; color: var(--wp--preset--color--ink-soft); font-size: .82rem; line-height: 1.68; }
.a4c-event-card-body > a { margin-top: 16px; color: var(--wp--preset--color--ink); font-size: .78rem; font-weight: 850; text-decoration: none; }
.a4c-event-card-body > a:hover { color: var(--wp--preset--color--coral); }

/* -----------------------------------------------------------
   a4c-evidence-note — credentials block (about-us)
----------------------------------------------------------- */
.a4c-evidence-note { padding: 70px 0; background: var(--wp--preset--color--sea-pale); }
.a4c-evidence-note-inner { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: start; }
@media (max-width: 900px) { .a4c-evidence-note-inner { grid-template-columns: 1fr; } }
.a4c-evidence-note p { margin: 0; color: var(--wp--preset--color--ink-soft); line-height: 1.75; }

/* -----------------------------------------------------------
   a4c-audience-grid — unifies about-us's "core activities" grid
   and consultation's "who this is for" grid (same anatomy: a
   bordered card, a small coral label, an h3, a paragraph).
----------------------------------------------------------- */
.a4c-audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .a4c-audience-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .a4c-audience-grid { grid-template-columns: 1fr; } }
.a4c-audience-grid article {
	min-height: 260px;
	padding: 28px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 22px;
	background: var(--wp--preset--color--paper);
}
.a4c-audience-grid article:nth-child(2n) { background: #fff; }
.a4c-audience-grid article > span { color: var(--wp--preset--color--coral); font-size: .68rem; font-weight: 850; }
.a4c-audience-grid h3 { max-width: 490px; margin: 45px 0 12px; font-size: 1.3rem; line-height: 1.28; }
.a4c-audience-grid p { max-width: 590px; margin: 0; color: var(--wp--preset--color--ink-soft); font-size: .8rem; line-height: 1.75; }

/* -----------------------------------------------------------
   a4c-outcome-list — numbered outcome list, used both on
   consultation (light) and supervision (works on a4c-section-dark
   too, since it only sets its own item background).
----------------------------------------------------------- */
.a4c-outcome-list-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: start; }
@media (max-width: 900px) { .a4c-outcome-list-wrap { grid-template-columns: 1fr; } }
.a4c-outcome-list { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; background: rgba(23, 59, 90, .13); }
.a4c-outcome-list li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 18px 0; background: var(--wp--preset--color--sea-pale); }
.a4c-outcome-list span { color: var(--wp--preset--color--coral); font-size: .68rem; font-weight: 850; }
.a4c-outcome-list p { margin: 0; line-height: 1.65; }

/* -----------------------------------------------------------
   a4c-story-feature — alternating image/copy row (our-stories)
----------------------------------------------------------- */
.a4c-story-feature-grid { display: grid; gap: 36px; }
.a4c-story-feature,
.a4c-story-feature-grid > article {
	display: grid;
	grid-template-columns: minmax(260px, .8fr) 1.2fr;
	gap: clamp(28px, 6vw, 80px);
	align-items: center;
	padding-bottom: 36px;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.a4c-story-feature:last-child,
.a4c-story-feature-grid > article:last-child { padding-bottom: 0; border-bottom: 0; }
.a4c-story-feature figure,
.a4c-story-feature-grid > article figure {
	height: 320px;
	margin: 0;
	overflow: hidden;
	border-radius: 26px 110px 26px 26px;
	background: var(--wp--preset--color--sea-pale);
}
.a4c-story-feature:nth-child(even) figure,
.a4c-story-feature-grid > article:nth-child(even) figure { order: 2; border-radius: 110px 26px 26px 26px; }
.a4c-story-feature img,
.a4c-story-feature-grid > article img { display: block; width: 100%; height: 100%; object-fit: cover; }
.a4c-story-feature__number { margin: 0 0 18px; color: var(--wp--preset--color--coral); font-size: .68rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.a4c-story-feature h3,
.a4c-story-feature-grid > article h3 { max-width: 600px; margin: 0 0 12px; }
.a4c-story-feature h3 + p,
.a4c-story-feature-grid > article h3 + p { max-width: 600px; margin: 0; color: var(--wp--preset--color--ink-soft); }
.a4c-story-reflection {
	max-width: 600px;
	margin-top: 22px;
	padding: 18px 20px;
	border-inline-start: 3px solid var(--wp--preset--color--coral);
	background: var(--wp--preset--color--paper);
}
.a4c-story-reflection strong { display: block; margin-bottom: 6px; font-size: .75rem; }
.a4c-story-reflection p { margin: 0; color: var(--wp--preset--color--ink-soft); font-size: .8rem; line-height: 1.7; }

/* ===========================================================
   FIX PASS (post-activation visual audit) — gaps found by
   cross-referencing every live page's real classes against
   this file. Two categories: (1) the numbered spacing
   utilities, used sitewide, entirely missing from the first
   port; (2) foundational .ibt-kit-4 classes (hero/shell/section/
   card/button/auth) that were never added to the rename map,
   so the 5 certificate pages lost their basic layout.
=========================================================== */

/* -----------------------------------------------------------
   a4c-s1 – a4c-s49 — ported unchanged, verbatim values. Several
   of these are per-card background/border/padding presets (each
   card in a wp:columns row got its own auto-generated a4c-sNN
   from the editor's border panel, rather than sharing one class).
   As the sole child of a flex-stretched wp-block-column, a block
   child doesn't inherit that stretched height on its own — so a
   card with less text renders shorter than its row's tallest
   card instead of matching it. Fill the stretched parent instead.
----------------------------------------------------------- */
.wp-block-column > [class*="a4c-s"] {
	height: 100%;
	box-sizing: border-box;
}
.a4c-s1 { padding-top:var(--wp--preset--spacing--60);padding-right:0;padding-bottom:var(--wp--preset--spacing--60);padding-left:0 }
.a4c-s2 { padding-right:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--60) }
.a4c-s3 { padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60) }
.a4c-s4 { margin-top:0;margin-bottom:var(--wp--preset--spacing--60) }
.a4c-s5 { padding-right:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20) }
.a4c-s6 { background-color:#eceff3;padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50) }
.a4c-s7 { margin-top:0px;padding-top:var(--wp--preset--spacing--60);padding-right:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--60) }
.a4c-s8 { margin-top:0px;padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50) }
.a4c-s9 { margin-top:var(--wp--preset--spacing--40) }
.a4c-s10 { min-height:800px;padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40) }
.a4c-s11 { padding-right:var(--wp--preset--spacing--60);padding-left:0 }
.a4c-s12 { min-height:0px;padding-top:0;padding-bottom:0 }
.a4c-s13 { padding-top:0;padding-right:var(--wp--preset--spacing--20);padding-bottom:0;padding-left:var(--wp--preset--spacing--20) }
.a4c-s14 { min-height:400px;padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40) }
.a4c-s15 { background:linear-gradient(118deg, var(--wp--preset--color--paper) 0 57%, #e7f0f7 57% 100%);padding:clamp(56px,7vw,90px) 0 }
.a4c-s16 { margin-top:-60px }
.a4c-s17 { background:var(--wp--preset--color--cream);border:1px solid var(--wp--preset--color--line);border-radius:16px;padding:16px 18px;box-shadow:0 18px 46px rgba(23,59,90,.14);max-width:220px;margin-bottom:16px }
.a4c-s18 { padding:24px 0 }
.a4c-s19 { background-color:#e4eff7;border-radius:30px;padding:clamp(30px,5vw,54px) }
.a4c-s20 { background-color:#f4e3da;border-radius:30px;padding:clamp(30px,5vw,54px) }
.a4c-s21 { background-color:var(--wp--preset--color--cream);border:1px solid var(--wp--preset--color--line);border-radius:24px;padding:28px;min-height:260px }
.a4c-s22 { background-color:var(--wp--preset--color--sea-pale);border:1px solid var(--wp--preset--color--line);border-radius:24px;padding:28px;min-height:260px }
.a4c-s23 { background-color:#f5ded4;border:1px solid var(--wp--preset--color--line);border-radius:24px;padding:28px;min-height:260px }
.a4c-s24 { background-color:var(--wp--preset--color--ink);color:#fff;border-radius:28px;padding:40px }
.a4c-s25 { padding:0 0 clamp(64px, 8vw, 110px) 0 }
.a4c-s26 { background-color:var(--wp--preset--color--cream);border:1px solid var(--wp--preset--color--line);border-radius:20px;padding:24px }
.a4c-s27 { padding:26px 0;border-radius:0 }
.a4c-s28 { background-color:#e4eff7;border-radius:26px;padding:28px }
.a4c-s29 { background-color:#f5f1e8;border-radius:26px;padding:28px }
.a4c-s30 { background-color:#f4ded5;border-radius:26px;padding:28px }
.a4c-s31 { border-top:1px solid var(--wp--preset--color--line);margin-top:24px }
.a4c-s32 { border-bottom:1px solid var(--wp--preset--color--line);padding:14px 0 }
.a4c-s33 { background:var(--wp--preset--color--cream);border:1px solid var(--wp--preset--color--line);border-radius:26px;padding:22px }
.a4c-s34 { margin-top:30px }
.a4c-s35 { padding:clamp(64px, 8vw, 110px) 0 0 0 }
.a4c-s36 { background-color:#f3e6ba;border-radius:26px;padding:28px }
.a4c-s37 { border-radius:28px;padding:36px;margin-top:12px }
.a4c-s38 { background:var(--wp--preset--color--sea-pale);border-radius:30px;padding:clamp(24px,4vw,40px) }
.a4c-s39 { background:var(--wp--preset--color--sea-pale);border-radius:30px;padding:clamp(24px,4vw,40px);margin-top:24px }
.a4c-s40 { border-radius:26px;padding:28px }
.a4c-s41 { margin-top:24px }
.a4c-s42 { border-top:1px solid var(--wp--preset--color--line);margin-top:40px }
.a4c-s43 { border-bottom:1px solid var(--wp--preset--color--line);padding:16px 0 }
.a4c-s44 { padding-top:14px;padding-bottom:14px;padding-left:clamp(24px, 5vw, 78px);padding-right:clamp(24px, 5vw, 78px) }
.a4c-s45 { border-top-color:rgba(255,255,255,0.12);border-top-width:1px;padding-top:22px;padding-bottom:22px }
.a4c-s46 { padding-top:14px;padding-bottom:14px;padding-left:24px;padding-right:24px }
.a4c-s47 { border-top-width:1px;border-top-color:var(--wp--preset--color--line);padding-top:20px;margin-top:36px }
.a4c-s48 { margin-top:20px }
.a4c-s49 { padding-bottom:60px }

/* -----------------------------------------------------------
   a4c-badge — base pill (used for post category tags on the
   5 story posts; color-by-category is set inline in the post
   content itself, this just provides the pill shape).
----------------------------------------------------------- */
.a4c-badge {
	display: inline-flex;
	align-items: center;
	padding: 5px 13px;
	border-radius: 999px;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .03em;
	white-space: nowrap;
}

/* Fix: a4c-course-card__price-line-label (the supervision
   "duration" label) never got a rule — same treatment as the
   price-line's own <small>. */
.a4c-course-card__price-line-label {
	display: block;
	margin: 0 0 4px;
	color: var(--wp--preset--color--ink-soft);
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.a4c-step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 8px;
	border-radius: 999px;
	background: var(--wp--preset--color--coral-soft);
	color: var(--wp--preset--color--ink);
	font-size: .8rem;
	font-weight: 800;
}

/* -----------------------------------------------------------
   a4c-shell — content-width wrapper for the certificate-page
   kit (was .shell / .w on the raw markup — both the same role).
----------------------------------------------------------- */
.a4c-shell {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 48px;
}
@media (max-width: 782px) {
	.a4c-shell { padding: 0 24px; }
}

/* -----------------------------------------------------------
   a4c-hero (base) — gradient hero background + top padding,
   pairs with a4c-hero-grid/-media/-includes above.
----------------------------------------------------------- */
.a4c-hero {
	background: linear-gradient(160deg, #fff 0%, #F7FAFC 48%, var(--wp--preset--color--paper) 100%);
	padding: 80px 0 0;
	overflow: hidden;
}
.a4c-hero h1 { margin: 20px 0 22px; }

/* -----------------------------------------------------------
   Our CSS-grid card components sit on top of WordPress's "flow"/
   "constrained" block-gap support (the block's saved layout type
   is still flow or constrained, we've just overridden display to
   grid via class). That support still adds margin-block-start to
   every child but the first, meant for vertical stacking — our
   grids already space children with `gap`, so that extra margin
   makes every card but the first render shorter/lower than its
   grid cell. Cancel it for both layout types.

   IMPORTANT: every class below sets `display: grid` on a WP
   group/columns block somewhere in this file. Whenever a NEW such
   class is added, it MUST be added to this list too, or it will
   silently reproduce the exact same "first item looks bigger" bug.
----------------------------------------------------------- */
.a4c-course-card-grid:is(.is-layout-flow, .is-layout-constrained) > *,
.a4c-pricing-box-grid:is(.is-layout-flow, .is-layout-constrained) > *,
.a4c-cards:is(.is-layout-flow, .is-layout-constrained) > *,
.a4c-testimonial-grid:is(.is-layout-flow, .is-layout-constrained) > *,
.a4c-event-card-grid:is(.is-layout-flow, .is-layout-constrained) > *,
.a4c-audience-grid:is(.is-layout-flow, .is-layout-constrained) > *,
.a4c-story-feature-grid:is(.is-layout-flow, .is-layout-constrained) > *,
.a4c-wf-grid:is(.is-layout-flow, .is-layout-constrained) > *,
.a4c-trainer-bio:is(.is-layout-flow, .is-layout-constrained) > *,
.a4c-trainer-bio__points:is(.is-layout-flow, .is-layout-constrained) > *,
.a4c-evidence-note-inner:is(.is-layout-flow, .is-layout-constrained) > *,
.a4c-outcome-list-wrap:is(.is-layout-flow, .is-layout-constrained) > *,
.service-card-grid:is(.is-layout-flow, .is-layout-constrained) > * {
	margin-block-start: 0;
}

/* -----------------------------------------------------------
   story-image / support-grid / support-image / media-proof-section
   — homepage-only components that were never renamed to a4c-* and
   so never picked up any CSS (missing width/aspect-ratio constraint
   is why these images render at their full natural size).
----------------------------------------------------------- */
.story-image {
	margin: 0;
	overflow: hidden;
	border-radius: 30px 140px 30px 30px;
	box-shadow: 0 20px 48px rgba(23, 59, 90, .1);
}
html[dir="rtl"] .story-image { border-radius: 140px 30px 30px 30px; }
.story-image img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 782px) {
	.story-image, html[dir="rtl"] .story-image { border-radius: 26px 90px 26px 26px; }
}

.support-grid {
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	align-items: center;
	gap: clamp(48px, 7vw, 100px);
}
@media (max-width: 900px) { .support-grid { grid-template-columns: 1fr; } }
.support-image {
	order: 2;
	margin: 0;
	overflow: hidden;
	border-radius: 160px 30px 30px 30px;
	box-shadow: 0 24px 70px rgba(23, 62, 84, .16);
}
html[dir="rtl"] .support-image { border-radius: 30px 160px 30px 30px; }
.support-image img { display: block; width: 100%; min-height: 560px; aspect-ratio: 4 / 4.2; object-fit: cover; }
@media (max-width: 900px) {
	.support-image, html[dir="rtl"] .support-image { order: 0; border-radius: 90px 26px 26px 26px; }
	.support-image img { min-height: 480px; aspect-ratio: 4 / 3.5; }
}

.media-proof-section {
	padding: clamp(64px, 8vw, 94px) 0;
	background: #173e54;
	color: #fff;
}
.media-proof-section h2 { color: #fff; }
.media-proof-section > .a4c-shell > div > p { color: rgba(255, 255, 255, .66); }

/* -----------------------------------------------------------
   Credential-proof row (homepage): logos + Mayada's photo.
----------------------------------------------------------- */
/* core's figure.wp-block-gallery.has-nested-images rule outranks a
   plain 2-class selector (it has a tag + 2 classes), so align-items
   never took — !important forces it regardless of load order. */
.a4c-credential-logos.wp-block-gallery { align-items: center !important; }
@media (max-width: 782px) {
	.a4c-credential-columns.wp-block-columns { flex-wrap: wrap; }
	.a4c-credential-columns > .wp-block-column:last-child { order: -1; }
	.a4c-credential-logos.wp-block-gallery { flex-direction: column; gap: 20px !important; }
	.a4c-credential-logos.wp-block-gallery img { width: auto !important; max-width: 220px; max-height: 110px; }
}

/* -----------------------------------------------------------
   a4c-payment-logos — small accepted-payment-method icon row
   (IBT pricing section). Distinct from a4c-credential-logos above:
   that one is tuned for 2-3 large trust logos that stack into a
   column on mobile; this is 5 small icons that should stay a
   centered, wrapping row at every width instead.
----------------------------------------------------------- */
.a4c-payment-logos.wp-block-gallery { justify-content: center; align-items: center; flex-wrap: wrap; gap: 20px 28px !important; }
/* core block-library CSS forces every gallery figure to exactly
   "50% - gap/2" width regardless of the image's own size (see
   .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image)
   in wp-includes/css/dist/block-library/style.css) - that's what was
   pairing these 5 small icons into oversized 2-per-row blocks. Override
   it here so each figure only takes the width its image needs, and let
   each <img>'s own inline width (set per-logo in the block markup) win -
   do NOT add a width:auto rule for the img here, it would override
   those deliberate inline per-logo widths and blow every logo up to
   its native pixel size instead (this was tried and made it worse). */
.a4c-payment-logos.wp-block-gallery figure.wp-block-image { width: auto !important; flex: 0 0 auto !important; }
@media (max-width: 600px) { .a4c-payment-logos.wp-block-gallery { gap: 16px 20px !important; } }

/* padding-bottom: same reasoning as the .a4c-guarantee rule above -
   the fixed WhatsApp pill can sit over this block's last line on
   mobile since it's the last thing before the guarantee box. */
@media (max-width: 600px) { .a4c-payment-block { padding-bottom: 90px; } }

/* -----------------------------------------------------------
   a4c-cards — audience-card grid (2/3/4-col modifiers), reuses
   a4c-card for the individual card look.
----------------------------------------------------------- */
.a4c-cards { display: grid; gap: 20px; }
.a4c-cards--c2 { grid-template-columns: repeat(2, 1fr); }
.a4c-cards--c3 { grid-template-columns: repeat(3, 1fr); }
.a4c-cards--c4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
	.a4c-cards--c3, .a4c-cards--c4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.a4c-cards--c2, .a4c-cards--c3, .a4c-cards--c4 { grid-template-columns: 1fr; }
}
.a4c-card__icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--wp--preset--color--sea-pale);
	color: var(--wp--preset--color--ink-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	font-weight: 700;
	margin-bottom: 16px;
}
.a4c-chips { display: flex; gap: 12px; flex-wrap: wrap; }
.a4c-chips span {
	background: #fff;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	padding: 14px 20px;
	font-size: 1rem;
}

/* -----------------------------------------------------------
   a4c-trainer-bio — trainer photo + credentials block
----------------------------------------------------------- */
.a4c-trainer-bio { display: grid; grid-template-columns: 40% 60%; gap: 40px; align-items: center; }
@media (max-width: 782px) { .a4c-trainer-bio { grid-template-columns: 1fr; } }
.a4c-trainer-bio__photo img { border-radius: 26px; width: 100%; object-fit: cover; }
.a4c-trainer-bio__badges { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 16px 0; padding: 0; }
.a4c-trainer-bio__badges li {
	border: 2px solid var(--wp--preset--color--sea);
	border-radius: 8px;
	padding: 8px 16px;
	font-size: .85rem;
	font-weight: 700;
}
.a4c-trainer-bio__points { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; }
@media (max-width: 600px) { .a4c-trainer-bio__points { grid-template-columns: 1fr; } }
.a4c-trainer-bio__point { border-top: 2px solid var(--wp--preset--color--coral); padding-top: 12px; }
.a4c-trainer-bio__point b { display: block; margin-bottom: 4px; }

/* -----------------------------------------------------------
   a4c-free-offer-grid — free-preview-video + text block on the
   ADHD 21-day page. Same two-column pattern as a4c-trainer-bio
   above; was previously an unstyled alignleft-floated video with
   text wrapping around it (no dedicated CSS at all), which wrapped
   unevenly and didn't stack cleanly on mobile.
----------------------------------------------------------- */
.a4c-free-offer-grid { display: grid; grid-template-columns: 40% 60%; gap: 40px; align-items: center; }
@media (max-width: 782px) { .a4c-free-offer-grid { grid-template-columns: 1fr; } }
.a4c-free-offer-grid__video .wp-block-embed__wrapper { border-radius: 16px; overflow: hidden; }

/* -----------------------------------------------------------
   a4c-page-hero — consultation/supervision hero section
   (soft background + padding); pairs with a4c-hero-grid above
   for the 2-column layout.
----------------------------------------------------------- */
.a4c-page-hero {
	background: var(--wp--preset--color--paper);
	padding: 70px 0 90px;
}
.a4c-page-hero aside {
	padding: 38px;
	border-radius: 28px 112px 28px 28px;
	background: var(--wp--preset--color--navy-contact);
	color: #fff;
}
html[dir="rtl"] .a4c-page-hero aside {
	border-radius: 112px 28px 28px 28px;
}
.a4c-page-hero aside h3 { margin: 0 0 8px; }
.a4c-page-hero aside p { margin: 0; color: #cfe0ec; }
.a4c-page-hero aside strong {
	display: block;
	margin: 12px 0 28px;
	font-family: var(--wp--preset--font-family--heading-serif);
	font-size: 3.4rem;
	font-weight: 500;
	line-height: .9;
}
html[dir="rtl"] .a4c-page-hero aside strong { font-family: var(--wp--preset--font-family--tajawal); }
.a4c-page-hero aside dl {
	display: grid;
	gap: 1px;
	margin: 0;
	background: rgba(255, 255, 255, .15);
}
.a4c-page-hero aside dl > div { display: flex; justify-content: space-between; gap: 18px; padding: 14px 0; background: var(--wp--preset--color--navy-contact); }
.a4c-page-hero aside dt { color: rgba(255, 255, 255, .6); font-size: .68rem; }
.a4c-page-hero aside dd { margin: 0; font-size: .75rem; font-weight: 700; }

/* -----------------------------------------------------------
   a4c-notice-banner — small icon + text callout (formerly
   .supervision-notice, single use on the supervision page).
----------------------------------------------------------- */
.a4c-notice-banner { padding: 54px 0; background: var(--wp--preset--color--sea-pale); }
.a4c-notice-banner .a4c-shell {
	display: grid;
	grid-template-columns: 58px 1fr;
	gap: 22px;
	max-width: 1000px;
}
.a4c-notice-banner .a4c-shell > p:first-child {
	display: grid;
	width: 42px;
	height: 42px;
	margin: 0;
	place-items: center;
	border-radius: 50%;
	background: var(--wp--preset--color--coral);
	color: #fff;
	font-weight: 900;
}
.a4c-notice-banner h2 { margin: 0 0 9px; font-size: 1.2rem; }
.a4c-notice-banner p { margin: 0; color: var(--wp--preset--color--ink-soft); line-height: 1.7; }

/* -----------------------------------------------------------
   IBT page round 2 fixes (2026-09-11)
----------------------------------------------------------- */

/* .fit5 (لمن cards): was completely unstyled (default heading
   color read as near-black, no card container at all) - give it
   the same light bordered-card look as .a4c-card used elsewhere,
   and navy heading color instead of the browser-default heavy black. */
.fit5 > div { border: 1px solid var(--wp--preset--color--line); border-radius: 26px; padding: 30px; }
.fit5 h4 { color: var(--wp--preset--color--ink); font-weight: 700; }

/* روق: "not for you" note (.closer, reused for both the المشكلة
   closer line and the لمن "not for you" line) renders like a large
   bold heading-weight paragraph, competing with the CTA button right
   above it. Only the لمن one needs to shrink - target it specifically
   via a dedicated class rather than changing .closer's other use. */
.fit5-note { font-size: .9rem; font-weight: 400; color: var(--wp--preset--color--ink-soft); }
.fit5-note strong { font-weight: 600; color: var(--wp--preset--color--ink-soft); }

/* Roadmap step titles: only some steps had manual <strong> wrapping
   (an inconsistency - step 03 was the one done "right"). Target the
   title paragraph structurally (2nd <p> in each .step: 1st is the
   "01".."07" number, 2nd is the title, 3rd+ is the description) so
   every step matches regardless of markup, without editing all 7. */
.road .step > p:nth-of-type(2) { font-weight: 800; font-size: 1.05rem; }

/* Testimonials: quote text was reading small next to the empty space
   left by shorter quotes in an equal-height grid row. */
.a4c-testimonial > p { font-size: 1.05rem; line-height: 1.6; }

/* -----------------------------------------------------------
   #qualify (lead magnet) round-2 fixes
----------------------------------------------------------- */

/* CF7's default submit button was unstyled browser-white; match the
   site's coral primary-button look (same values as a4c-btn-coral).
   !important needed: the generic .wpcf7-form-control rule (shared with
   text inputs/selects) sets background/border/border-radius with
   !important of its own, which otherwise wins regardless of this
   selector's higher specificity. */
.k4q .wpcf7-form-control.wpcf7-submit,
.k4q input[type="submit"] {
	display: inline-flex !important; align-items: center; justify-content: center;
	width: auto !important;
	font: inherit; font-weight: 700; cursor: pointer;
	padding: 15px 28px !important; min-height: 48px; border-radius: 999px !important; border: 0 !important;
	background: var(--wp--preset--color--coral, #ef7c57) !important;
	color: #fff !important;
}
.k4q .wpcf7-form-control.wpcf7-submit:hover,
.k4q input[type="submit"]:hover { opacity: .92; }

/* The Turnstile widget (CF7's own [turnstile size:compact] tag, real
   markup: <div class="wpcf7-turnstile cf-turnstile" data-sitekey="...">)
   sits as its own block-level div between the country field and the
   submit button - give it the same vertical rhythm as the <p>-wrapped
   fields around it instead of relying on the browser default. */
.k4q div[data-sitekey] { margin: 8px 0; }

/* Eyebrow to match the rest of the page's section headers. */
.k4q .a4c-eyebrow { display: block; margin-bottom: 6px; }

/* -----------------------------------------------------------
   Real-testimonial verification link (IBT page round 4).
   Small, muted, secondary to the quote itself - a "see the real
   post" affordance for skeptics, not a competing CTA. Opens in a
   new tab so clicking it never actually loses the visitor from
   this page (best-practice pattern for outbound trust links).
----------------------------------------------------------- */
.a4c-testimonial__verify { margin-top: 4px; }
.a4c-testimonial__verify a {
	font-size: .8rem;
	color: var(--wp--preset--color--ink-soft);
	text-decoration: none;
	border-bottom: 1px dashed var(--wp--preset--color--line);
	transition: color .15s, border-color .15s;
}
.a4c-testimonial__verify a:hover {
	color: var(--wp--preset--color--coral);
	border-color: var(--wp--preset--color--coral);
}

/* Two-card variant of a4c-testimonial-grid (kept as a separate
   modifier class rather than changing the base grid's column count,
   since that base class is also used on other pages with 3 cards). */
.a4c-testimonial-grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 820px; margin-inline: auto; }
@media (max-width: 900px) { .a4c-testimonial-grid--2 { grid-template-columns: 1fr; } }

/* -----------------------------------------------------------
   a4c-price-anchor — starting-price line right under the hero
   CTA, so visitors who read top-to-bottom see the price within
   the first screen instead of ~15 screens down at the pricing
   section (round 7 offer/pricing improvements).
----------------------------------------------------------- */
.a4c-price-anchor { margin-top: 14px; font-size: .95rem; font-weight: 600; color: var(--wp--preset--color--ink-soft); }
/* padding-inline-end: on mobile the fixed .a4c-whatsapp-btn sits in the
   bottom-right corner (right = inline-start in this RTL layout), and on
   common phone heights this line's row lands in that exact corner, so the
   button visually covers its last word. Reserving that corner forces an
   earlier wrap instead of letting text run under the button. */
@media (max-width: 480px) { .a4c-price-anchor { padding-inline-end: 60px; } }

/* -----------------------------------------------------------
   pay-toggle-global — one shared "full payment / installments"
   switch above a whole pricing grid (round 8), following the
   common international pattern (a single Monthly/Annual-style pill
   above the cards, driving every card's price at once) instead of
   a separate switch duplicated inside each card. The .pay-toggle
   data holders + pay-toggle.js already existed per-card; this is
   just the shared control and its own label.
----------------------------------------------------------- */
.a4c-pay-mode-row { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 22px 0 8px; }
.a4c-pay-mode-label { font-size: .9rem; font-weight: 700; color: var(--wp--preset--color--ink-soft); }
/* Reference pattern (round 11): a transparent track with just a thin
   border outline - not a filled light-gray background - so the
   solid dark "thumb" pill really pops against white/transparent
   space, matching the common Annual/Monthly segmented-control look. */
.pay-toggle-global { display: inline-flex; background: transparent; border: 1px solid var(--wp--preset--color--line, #d8dde0); border-radius: 999px; padding: 4px; gap: 2px; }
.pay-toggle-global .pay-opt {
	appearance: none; -webkit-appearance: none; border: 0; background: transparent; cursor: pointer;
	font: inherit; font-weight: 700; font-size: .88rem;
	padding: 10px 22px; border-radius: 999px;
	color: var(--wp--preset--color--ink);
	transition: background .15s, color .15s;
}
.pay-toggle-global .pay-opt.is-active { background: var(--wp--preset--color--ink); color: #fff; }
.a4c-pricing-box .plan-note { margin-top: 10px; font-size: .82rem; color: var(--wp--preset--color--ink-soft); }

/* -----------------------------------------------------------
   a4c-pricing-box__was-wrap — stacks the struck-through original
   price above a small "السعر الأصلي" label (round 9), matching the
   reference pattern the user provided. Replaces the bare .was span
   as the id target the pay-toggle JS hides/shows in installment
   mode, so the label disappears together with its price.
   [hidden] override is required: this element's own display:
   inline-flex has higher specificity than the browser's built-in
   [hidden]{display:none} UA rule, so pay-toggle.js setting
   el.hidden = true had no visual effect at all (confirmed live) -
   the price just stayed on screen with hidden="true" in the DOM.
----------------------------------------------------------- */
.a4c-pricing-box__was-wrap { display: inline-flex; flex-direction: column; align-items: flex-start; margin-inline-start: 8px; vertical-align: middle; }
.a4c-pricing-box__was-wrap[hidden] { display: none !important; }
.a4c-pricing-box__was-label { font-size: .7rem; font-weight: 400; color: var(--wp--preset--color--ink-soft); text-decoration: none; margin-top: 2px; }

/* -----------------------------------------------------------
   a4c-pricing-box__remainder — "والباقي X$ بعد 30 يومًا" inline next
   to the price in installment mode (round 10), replacing the old
   plan-note paragraph below the price. Sized between the main
   amount (2.8rem) and the small was-label (.7rem). Deliberately no
   "display" property here - stays a plain inline span so the
   browser's native [hidden]{display:none} keeps working (the
   was-wrap bug from round 9 was caused by exactly this, setting a
   custom display value on a hide/show-toggled element).
----------------------------------------------------------- */
.a4c-pricing-box__remainder { font-size: 1.05rem; font-weight: 600; color: var(--wp--preset--color--ink-soft); margin-inline-start: 6px; }

/* -----------------------------------------------------------
   a4c-instructor-card — individual instructor profile (circular
   photo + name + credential pills), for use inside .a4c-cards
   .a4c-card. New component (child-and-adolescent-psychologist
   diploma page, 2026-09-12): none of the existing team/testimonial
   components fit a 3-up "full individual profile" grid — a4c-
   trainer-bio is a single large photo+bio layout, a4c-testimonial
   only has a 48px avatar for a quote attribution. Reuses a4c-card's
   own border/radius/padding as the outer shape and a4c-trainer-bio__
   badges' pill styling for credentials, so it still reads as part
   of the same family rather than a one-off. Circular photo crop is
   deliberate: it gives every instructor the same frame regardless
   of the source photo's own background/lighting (see the page's
   two ad-cropped portraits vs. the one studio headshot).
----------------------------------------------------------- */
.a4c-instructor-card { text-align: center; display: flex; flex-direction: column; align-items: center; }
.a4c-instructor-card__photo {
	width: 148px;
	height: 148px;
	margin: 0 0 20px;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 14px 34px rgba(23, 59, 90, .16);
}
.a4c-instructor-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.a4c-instructor-card h3 { font-size: 1.2rem; margin: 0 0 4px; }
.a4c-instructor-card__role { font-size: .85rem; color: var(--wp--preset--color--ink-soft); margin: 0 0 14px; }
.a4c-instructor-card__badges {
	display: flex;
	flex-direction: column;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}
.a4c-instructor-card__badges li {
	border-top: 2px solid var(--wp--preset--color--coral);
	padding-top: 8px;
	font-size: .85rem;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
	text-align: start;
}

/* a4c-process-steps li kicker built as a real, block-editor-native
   core/paragraph (so it stays independently editable) rather than a
   raw <span> — the existing `li > span` rule only matches hand-authored
   HTML, so mirror it for a first-child <p> too. */
.a4c-process-steps li > p:first-child { color: #f3e6ba; font-size: .68rem; font-weight: 850; margin: 0; }

/* -----------------------------------------------------------
   Checkout column widths — 2026-09-13, desktop only.

   Narrow the billing-fields column and the payment column to
   65% each (kept equal so their outer edges line up), and the
   order-review table to 85% — all still centered within the
   full-width #customer_details / #order_review wrappers they
   already sit in. #customer_details .col-1 is already centered
   at 48% via margin:0 auto (see the rule near the coupon/select2
   checkout block above); only its width changes here.

   Mobile is untouched on purpose: WooCommerce's own
   woocommerce-smallscreen.css already forces .col-1 back to
   100% under 768px independent of this, and the table/payment
   box were never narrowed there to begin with.
----------------------------------------------------------- */
/* The "list courses" accordion (learnpress-woo-payment's
   list-courses-assign-product-checkout.php template) shows a raw,
   half-translated "<course name> - list courses" string with no real
   content behind it — not useful to shoppers, hide it everywhere. */
#order_review .lp-course-sold-out { display: none; }

@media (min-width: 769px) {
	#customer_details .col-1 { width: 65%; }
	#order_review_heading,
	#order_review .woocommerce-checkout-review-order-table {
		width: 85%;
		margin-inline: auto;
	}
	#order_review #payment.woocommerce-checkout-payment {
		width: 65%;
		margin-inline: auto;
	}
}