/*
Theme Name:   SCMEP Online
Theme URI:    https://www.scmep-online.org/
Description:  Child theme of Twenty Twenty-Five. Carries the SCMEP brand palette, typography and design system, plus the SEO meta tags and structured data core WordPress omits.
Author:       SCMEP
Template:     twentytwentyfive
Version:      1.2.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  scmep-child
*/

/* SINGLE SOURCE OF TRUTH for the design system.
   Matches the CSS currently in Site Editor > Styles > Additional CSS
   (global-styles id 9). That store is THEME-SCOPED and does not survive a theme
   switch, which is why the whole sheet lives here. Once this theme is active,
   clear the Additional CSS box so there is exactly one source. */

/* ============================================================================
   SCMEP ONLINE — DESIGN SYSTEM
   Enterprise learning-platform UI. Tokens first, then components.
   No inline styles; every value resolves from a custom property.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------------------- */
:root {
	/* Brand */
	--sc-primary:        #0B3B6E;
	--sc-primary-700:    #092F58;
	--sc-secondary:      #0F6CBD;
	--sc-secondary-700:  #0C5698;
	--sc-accent:         #18B7C7;
	--sc-accent-700:     #0E7F8B;
	--sc-bg:             #F8FAFC;
	--sc-surface:        #FFFFFF;
	--sc-text:           #243B53;
	--sc-muted:          #6B7280;
	--sc-success:        #2E7D32;
	--sc-border:         #E5E7EB;

	/* On dark grounds */
	--sc-on-dark:        #FFFFFF;
	--sc-on-dark-muted:  #C7D3E0;

	/* 8px spacing system */
	--sc-1:  0.5rem;   /*  8px */
	--sc-2:  1rem;     /* 16px */
	--sc-3:  1.5rem;   /* 24px */
	--sc-4:  2rem;     /* 32px */
	--sc-5:  2.5rem;   /* 40px */
	--sc-6:  3rem;     /* 48px */
	--sc-8:  4rem;     /* 64px */
	--sc-10: 5rem;     /* 80px */
	--sc-12: 6rem;     /* 96px */

	/* Radius */
	--sc-radius:    16px;
	--sc-radius-sm: 8px;
	--sc-radius-btn: 12px;
	--sc-radius-pill: 999px;

	/* Elevation */
	--sc-shadow-sm: 0 1px 2px rgb(16 42 67 / 6%), 0 1px 3px rgb(16 42 67 / 8%);
	--sc-shadow:    0 10px 30px rgb(0 0 0 / 8%);
	--sc-shadow-lg: 0 12px 24px -6px rgb(16 42 67 / 12%), 0 4px 8px -4px rgb(16 42 67 / 8%);
	--sc-shadow-header: 0 1px 3px rgb(16 42 67 / 10%);

	/* Type */
	--sc-font: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	--sc-fs-hero: clamp(2.25rem, 5.2vw, 4rem);   /* -> 64px */
	--sc-fs-h1:   clamp(2rem, 4vw, 3rem);        /* -> 48px */
	--sc-fs-h2:   clamp(1.5rem, 2.8vw, 2.25rem); /* -> 36px */
	--sc-fs-h3:   1.25rem;
	--sc-fs-body: 1.125rem;                      /*    18px */
	--sc-fs-sm:   0.9375rem;
	--sc-fs-xs:   0.8125rem;
	--sc-lh:      1.6;
	--sc-lh-tight: 1.1;

	/* Motion */
	--sc-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--sc-dur:  0.24s;

	/* Layout */
	--sc-header-h: 80px;
	--sc-container: 1200px;
}

/* ---------------------------------------------------------------------------
   2. BASE
   --------------------------------------------------------------------------- */
html, body { overflow-x: clip; }

body {
	background-color: var(--sc-bg);
	color: var(--sc-text);
	font-family: var(--sc-font);
	font-size: var(--sc-fs-body);
	line-height: var(--sc-lh);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--sc-font);
	color: var(--sc-primary);
	letter-spacing: -0.02em;
	line-height: 1.2;
}

/* Focus — visible on every interactive element (WCAG 2.4.7) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--sc-secondary);
	outline-offset: 2px;
	border-radius: var(--sc-radius-sm);
}

.sc-visually-hidden {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------------------
   3. HEADER — sticky, 80px, shadow on scroll
   --------------------------------------------------------------------------- */
.scmep-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--sc-surface);
	border-bottom: 1px solid var(--sc-border);
	box-shadow: none;
	transition: box-shadow var(--sc-dur) var(--sc-ease);
}

/* .is-scrolled is toggled by a 12-line IntersectionObserver (see header.js) */
.scmep-header.is-scrolled {
	box-shadow: var(--sc-shadow-header);
}

.scmep-header__bar {
	max-width: var(--sc-container);
	margin-inline: auto;
	min-height: var(--sc-header-h);
	padding-inline: var(--sc-3);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sc-3);
}

.scmep-header__logo {
	display: inline-flex;
	align-items: center;
	color: var(--sc-primary);
	flex: 0 1 auto;
	min-width: 0;
}

.scmep-header__logo svg { width: 208px; height: auto; display: block; }

/* --- Primary nav --- */
.scmep-nav { display: flex; align-items: center; gap: var(--sc-1); }
.scmep-nav__list {
	display: flex;
	align-items: center;
	gap: var(--sc-1);
	list-style: none;
	margin: 0;
	padding: 0;
}

.scmep-nav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--sc-1);
	/* 48px target height, generous horizontal padding */
	padding: 0.75rem 0.7rem;
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0;
	text-decoration: none;
	color: var(--sc-text);
	border-radius: var(--sc-radius-sm);
	transition: color var(--sc-dur) var(--sc-ease), background-color var(--sc-dur) var(--sc-ease);
}

/* Blue underline that wipes in */
.scmep-nav__link::after {
	content: "";
	position: absolute;
	left: 0.7rem;
	right: 0.7rem;
	bottom: 0.375rem;
	height: 2px;
	border-radius: 2px;
	background-color: var(--sc-secondary);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform var(--sc-dur) var(--sc-ease);
}

.scmep-nav__link:hover { color: var(--sc-secondary); }
.scmep-nav__link:hover::after,
.scmep-nav__link:focus-visible::after { transform: scaleX(1); transform-origin: left center; }

.scmep-nav__item.is-current > .scmep-nav__link { color: var(--sc-secondary); }
.scmep-nav__item.is-current > .scmep-nav__link::after { transform: scaleX(1); transform-origin: left center; }

/* --- Dropdown --- */
.scmep-nav__item--has-children { position: relative; }

.scmep-nav__toggle-icon { width: 14px; height: 14px; transition: transform var(--sc-dur) var(--sc-ease); }
.scmep-nav__item--has-children:hover .scmep-nav__toggle-icon,
.scmep-nav__item--has-children:focus-within .scmep-nav__toggle-icon { transform: rotate(180deg); }

.scmep-nav__submenu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 240px;
	margin: 0;
	padding: var(--sc-1);
	list-style: none;
	background-color: var(--sc-surface);
	border: 1px solid var(--sc-border);
	border-radius: var(--sc-radius-sm);
	box-shadow: var(--sc-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--sc-dur) var(--sc-ease), transform var(--sc-dur) var(--sc-ease), visibility var(--sc-dur);
}

.scmep-nav__item--has-children:hover > .scmep-nav__submenu,
.scmep-nav__item--has-children:focus-within > .scmep-nav__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.scmep-nav__submenu a {
	display: block;
	padding: 0.75rem var(--sc-2);
	font-size: var(--sc-fs-sm);
	font-weight: 500;
	text-decoration: none;
	color: var(--sc-text);
	border-radius: var(--sc-radius-sm);
	transition: background-color var(--sc-dur) var(--sc-ease), color var(--sc-dur) var(--sc-ease);
}

.scmep-nav__submenu a:hover { background-color: var(--sc-bg); color: var(--sc-secondary); }

/* --- Header actions --- */
.scmep-header__actions { display: flex; align-items: center; gap: var(--sc-1); flex: 0 0 auto; min-width: 0; }

.scmep-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: var(--sc-radius-sm);
	background: transparent;
	color: var(--sc-text);
	cursor: pointer;
	transition: background-color var(--sc-dur) var(--sc-ease), color var(--sc-dur) var(--sc-ease);
}

.scmep-iconbtn:hover { background-color: var(--sc-bg); color: var(--sc-secondary); }
.scmep-iconbtn svg { width: 20px; height: 20px; }

/* --- Search disclosure --- */
.scmep-search { display: none; border-top: 1px solid var(--sc-border); background-color: var(--sc-surface); }
.scmep-search.is-open { display: block; }
.scmep-search__form {
	max-width: var(--sc-container);
	margin-inline: auto;
	padding: var(--sc-2) var(--sc-3);
	display: flex;
	gap: var(--sc-1);
}
.scmep-search__input {
	flex: 1 1 auto;
	height: 48px;
	padding: 0 var(--sc-2);
	font: inherit;
	font-size: 1rem;
	color: var(--sc-text);
	background-color: var(--sc-bg);
	border: 1px solid var(--sc-border);
	border-radius: var(--sc-radius-sm);
}
.scmep-search__input::placeholder { color: var(--sc-muted); }

/* --- Mobile hamburger --- */
.scmep-header__burger { display: none; }

/* ---------------------------------------------------------------------------
   4. BUTTONS — 48px height
   --------------------------------------------------------------------------- */
.sc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sc-1);
	min-height: 48px;
	padding: 0 var(--sc-3);
	font-family: var(--sc-font);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	border: 2px solid transparent;
	border-radius: var(--sc-radius-btn);
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: background-color var(--sc-dur) var(--sc-ease), color var(--sc-dur) var(--sc-ease),
	            border-color var(--sc-dur) var(--sc-ease), transform var(--sc-dur) var(--sc-ease),
	            box-shadow var(--sc-dur) var(--sc-ease);
}

.sc-btn svg { width: 20px; height: 20px; flex: 0 0 20px; }

/* Accent ground carries NAVY text: white on #18B7C7 is 2.43:1 and fails AA,
   #0B3B6E on #18B7C7 is 4.63:1 and passes. */
.sc-btn--primary {
	background-color: var(--sc-accent);
	color: var(--sc-primary);
}
.sc-btn--primary:hover {
	background-color: #3FC7D5;
	transform: translateY(-2px);
	box-shadow: var(--sc-shadow-lg);
}

.sc-btn--secondary {
	background-color: transparent;
	color: var(--sc-on-dark);
	border-color: rgb(255 255 255 / 55%);
}
.sc-btn--secondary:hover {
	background-color: rgb(255 255 255 / 12%);
	border-color: var(--sc-on-dark);
	transform: translateY(-2px);
}

.sc-btn--solid {
	background-color: var(--sc-primary);
	color: var(--sc-on-dark);
}
.sc-btn--solid:hover { background-color: var(--sc-secondary); transform: translateY(-2px); }

.sc-btn--sm { min-height: 40px; padding: 0 var(--sc-2); font-size: var(--sc-fs-sm); }

/* Ripple — pure CSS, triggered on :active */
.sc-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle, rgb(255 255 255 / 45%) 10%, transparent 10.01%);
	background-position: center;
	background-repeat: no-repeat;
	transform: scale(12);
	opacity: 0;
	transition: transform 0.5s var(--sc-ease), opacity 0.8s var(--sc-ease);
	pointer-events: none;
}
.sc-btn:active::before { transform: scale(0); opacity: 0.35; transition: 0s; }

/* ---------------------------------------------------------------------------
   5. HERO
   --------------------------------------------------------------------------- */
.scmep-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 720px;
	padding-block: var(--sc-12);
	background-color: var(--sc-primary-700);
	overflow: hidden;
}

.scmep-hero__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Reserve the box so the image cannot shift layout in */
	aspect-ratio: 16 / 9;
}

/* Dark blue gradient, heaviest on the left where the copy sits */
.scmep-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg,
		rgb(9 47 88 / 96%) 0%,
		rgb(9 47 88 / 88%) 34%,
		rgb(11 59 110 / 62%) 62%,
		rgb(11 59 110 / 38%) 100%);
}

.scmep-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--sc-container);
	margin-inline: auto;
	padding-inline: var(--sc-3);
}

.scmep-hero__content { max-width: 46rem; }

.scmep-hero__eyebrow {
	display: inline-block;
	margin: 0 0 var(--sc-2);
	padding-bottom: var(--sc-1);
	border-bottom: 2px solid var(--sc-accent);
	color: var(--sc-accent);
	font-size: var(--sc-fs-xs);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.scmep-hero__title {
	margin: 0 0 var(--sc-3);
	color: var(--sc-on-dark);
	font-size: var(--sc-fs-hero);
	font-weight: 800;
	line-height: var(--sc-lh-tight);
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.scmep-hero__lede {
	margin: 0 0 var(--sc-4);
	max-width: 34rem;
	color: var(--sc-on-dark);
	font-size: clamp(1rem, 1.6vw, 1.25rem);
	line-height: var(--sc-lh);
}

.scmep-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sc-2); }

/* ---------------------------------------------------------------------------
   6. SECTIONS + CARDS
   --------------------------------------------------------------------------- */
.sc-section {
	padding-block: var(--sc-12);
}
.sc-section--tint { background-color: var(--sc-bg); }
.sc-section--surface { background-color: var(--sc-surface); }

.sc-container {
	max-width: var(--sc-container);
	margin-inline: auto;
	padding-inline: var(--sc-3);
}

.sc-section__head { max-width: 44rem; margin: 0 auto var(--sc-6); text-align: center; }
.sc-section__title { margin: 0 0 var(--sc-2); font-size: var(--sc-fs-h2); font-weight: 800; }
.sc-section__sub { margin: 0; color: var(--sc-muted); font-size: var(--sc-fs-body); }

.sc-grid { display: grid; gap: var(--sc-3); }
.sc-grid--3 { grid-template-columns: repeat(3, 1fr); }

.sc-card {
	display: flex;
	flex-direction: column;
	gap: var(--sc-2);
	padding: var(--sc-4);
	background-color: var(--sc-surface);
	border: 1px solid var(--sc-border);
	border-radius: var(--sc-radius);
	box-shadow: var(--sc-shadow-sm);
	transition: transform var(--sc-dur) var(--sc-ease), box-shadow var(--sc-dur) var(--sc-ease),
	            border-color var(--sc-dur) var(--sc-ease);
}

.sc-card:hover,
.sc-card:focus-within {
	transform: translateY(-6px);
	box-shadow: var(--sc-shadow-lg);
	border-color: #CBD5E1;
}

.sc-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--sc-radius-sm);
	background-color: rgb(15 108 189 / 10%);
	color: var(--sc-secondary);
}
.sc-card__icon svg { width: 24px; height: 24px; }

.sc-card__title { margin: 0; font-size: var(--sc-fs-h3); font-weight: 700; }
.sc-card__body { margin: 0; color: var(--sc-muted); font-size: 1rem; line-height: var(--sc-lh); }

.sc-card__cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: var(--sc-1);
	font-size: var(--sc-fs-sm);
	font-weight: 700;
	color: var(--sc-secondary);
	text-decoration: none;
}
.sc-card__cta svg { width: 16px; height: 16px; transition: transform var(--sc-dur) var(--sc-ease); }
.sc-card:hover .sc-card__cta svg { transform: translateX(4px); }
.sc-card__cta:hover { text-decoration: underline; }

/* Whole-card click target without nesting interactive elements */
.sc-card__link::after { content: ""; position: absolute; inset: 0; }
.sc-card { position: relative; }

/* ---------------------------------------------------------------------------
   7. MOTION — fade-up on enter
   --------------------------------------------------------------------------- */
/* Progressive enhancement: content is visible by default. Only once JS has
   confirmed it can run (html.sc-js) do we hide it to animate it in. Without
   this, a JS failure leaves the page permanently blank. */
.sc-js .sc-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.5s var(--sc-ease), transform 0.5s var(--sc-ease);
}
.sc-js .sc-reveal.is-visible { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------------
   8. RESPONSIVE
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.sc-grid--3 { grid-template-columns: repeat(2, 1fr); }
	.scmep-header__logo svg { width: 180px; }
}

@media (max-width: 900px) {
	/* Collapse to hamburger */
	.scmep-header__nav-wrap {
		position: fixed;
		inset: var(--sc-header-h) 0 0 0;
		background-color: var(--sc-surface);
		padding: var(--sc-3);
		overflow-y: auto;
		transform: translateX(100%);
		visibility: hidden;
		transition: transform var(--sc-dur) var(--sc-ease), visibility var(--sc-dur);
	}
	.scmep-header__nav-wrap.is-open { transform: translateX(0); visibility: visible; }

	.scmep-nav { align-items: stretch; }
	.scmep-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.scmep-nav__link {
		width: 100%;
		min-height: 48px;
		padding: var(--sc-2) var(--sc-1);
		font-size: 1rem;
		border-bottom: 1px solid var(--sc-border);
		border-radius: 0;
	}
	.scmep-nav__link::after { display: none; }
	.scmep-nav__item.is-current > .scmep-nav__link {
		border-left: 3px solid var(--sc-secondary);
		padding-left: var(--sc-2);
	}
	.scmep-nav__submenu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		padding-left: var(--sc-2);
	}
	.scmep-header__burger { display: inline-flex; }
	.scmep-hero { min-height: 520px; }
}

@media (max-width: 640px) {
	.sc-grid--3 { grid-template-columns: 1fr; }
	.sc-section { padding-block: var(--sc-8); }
	.scmep-hero__actions .sc-btn { width: 100%; }

	/* The bar must fit 390px: 132 logo + 148 actions + 16 gap + 32 padding = 328. */
	.scmep-header__bar { padding-inline: var(--sc-2); gap: var(--sc-2); }
	.scmep-header__logo svg { width: 132px; }

	/* Sign In collapses to its icon — the label is redundant next to a log-in glyph */
	.sc-btn--sm.scmep-header__signin { padding: 0; width: 44px; min-height: 44px; }
	.scmep-header__signin .scmep-header__signin-label { display: none; }
	.sc-btn--sm.scmep-header__signin svg { margin: 0; }
}

/* ---------------------------------------------------------------------------
   9. MOTION PREFERENCE
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.sc-js .sc-reveal { opacity: 1; transform: none; }
	.sc-card:hover, .sc-btn:hover { transform: none; }
}


/* ============================================================
   FOOTER
   Navy ground traces to the archived rule
   `.navy-footer { background-color: #233346; color: #ffffff }`.
   Orange is used for buttons only — as link text on this navy it
   measures 2.43:1 and fails WCAG AA, so links are white -> teal.
   ============================================================ */

.scmep-footer {
	background-color: var(--sc-primary-700); /* dark enterprise footer */
	color: #ffffff;
}

.scmep-footer__inner {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1.4fr 1.4fr;
	gap: clamp(1.75rem, 3vw, 3.5rem);
	align-items: start;
}

/* --- Column headings ------------------------------------- */
.scmep-footer h2 {
	font-family: var(--sc-font);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sc-accent); /* 5.54:1 on #092F58 */
	margin: 0 0 1.1rem;
}

.scmep-footer p {
	font-size: 0.92rem;
	line-height: 1.65;
	color: var(--sc-on-dark-muted); /* 8.87:1 */
	margin: 0 0 0.85rem;
}

/* --- Lists ------------------------------------------------ */
.scmep-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.scmep-footer li {
	margin: 0 0 0.6rem;
}

.scmep-footer a {
	color: #ffffff;
	text-decoration: none;
	font-size: 0.92rem;
	line-height: 1.5;
	transition: color 0.2s ease, padding-left 0.2s ease;
}

.scmep-footer a:hover,
.scmep-footer a:focus-visible {
	color: var(--sc-accent);
	text-decoration: underline;
}

/* Quick links get a small slide affordance. */
.scmep-footer__links a {
	display: inline-block;
	position: relative;
}

.scmep-footer__links a:hover {
	padding-left: 0.35rem;
}

/* --- Contact --------------------------------------------- */
.scmep-footer__contact li {
	display: flex;
	gap: 0.7rem;
	align-items: flex-start;
	margin-bottom: 1rem;
}

.scmep-footer__contact svg {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	margin-top: 0.2rem;
	fill: var(--sc-accent);
}

.scmep-footer__contact address {
	font-style: normal;
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--sc-on-dark-muted);
}

.scmep-footer__office {
	display: block;
	font-weight: 700;
	color: #ffffff;
	margin-bottom: 0.15rem;
}

/* --- Newsletter ------------------------------------------ */
.scmep-footer__cta {
	display: inline-block;
	background-color: var(--sc-accent);
	/* Navy on accent = 4.63:1. White on accent is 2.43:1 and fails AA. */
	color: var(--sc-primary) !important;
	padding: 0.75rem 1.5rem;
	border-radius: var(--sc-radius-sm);
	font-weight: 700;
	font-size: 0.9rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none !important;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.scmep-footer__cta:hover,
.scmep-footer__cta:focus-visible {
	background-color: #3FC7D5;
	color: var(--sc-primary) !important;
	transform: translateY(-1px);
}

/* --- Social ---------------------------------------------- */
.scmep-footer__social {
	display: flex;
	gap: 0.6rem;
	margin-top: 1.25rem;
}

.scmep-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; /* WCAG 2.5.8 target size */
	height: 44px;
	border: 1px solid rgb(255 255 255 / 22%);
	border-radius: 4px;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.scmep-footer__social a:hover,
.scmep-footer__social a:focus-visible {
	background-color: var(--sc-accent);
	border-color: var(--sc-accent);
	transform: translateY(-2px);
}

.scmep-footer__social svg {
	width: 18px;
	height: 18px;
	fill: #ffffff;
	transition: fill 0.2s ease;
}

.scmep-footer__social a:hover svg,
.scmep-footer__social a:focus-visible svg {
	fill: var(--sc-primary); /* 4.63:1 against the accent hover */
}

/* --- Bottom bar ------------------------------------------ */
.scmep-footer__bar {
	border-top: 1px solid rgb(255 255 255 / 14%);
	margin-top: clamp(2rem, 4vw, 3rem);
	padding-top: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	align-items: center;
	justify-content: space-between;
}

.scmep-footer__bar p,
.scmep-footer__bar li {
	font-size: 0.82rem;
	color: var(--sc-on-dark-muted); /* #6B7280 is only 2.79:1 here and fails AA */
	margin: 0;
}

.scmep-footer__bar ul {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
}

.scmep-footer__bar a {
	font-size: 0.82rem;
	color: var(--sc-on-dark-muted);
}

/* --- Responsive ------------------------------------------ */
@media (max-width: 1024px) {
	.scmep-footer__inner {
		grid-template-columns: 1fr 1fr;
		gap: 2.5rem;
	}
}

@media (max-width: 600px) {
	.scmep-footer__inner {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.scmep-footer__bar {
		flex-direction: column;
		align-items: flex-start;
	}

	.scmep-footer__social {
		gap: 0.75rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.scmep-footer a,
	.scmep-footer__cta,
	.scmep-footer__social a {
		transition: none;
	}

	.scmep-footer__links a:hover { padding-left: 0; }
	.scmep-footer__cta:hover,
	.scmep-footer__social a:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   CATALOG PAGE
   Additive only — no existing selector is modified.
   --------------------------------------------------------------------------- */
.sc-catalog__intro { max-width: 60rem; margin-bottom: var(--sc-6); }

.sc-lede {
	font-size: clamp(1.1rem, 1.6vw, 1.3rem);
	line-height: 1.6;
	color: var(--sc-text);
	margin: 0 0 var(--sc-2);
}

/* Status note — flagged, not hidden. Visitors arriving from an old course URL
   need to know why there is no course list. */
.sc-note-inline {
	margin: 0 0 var(--sc-3);
	padding: var(--sc-2);
	border-left: 4px solid var(--sc-accent);
	background: var(--sc-bg);
	border-radius: 0 var(--sc-radius-sm) var(--sc-radius-sm) 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--sc-text);
}

.sc-catalog__actions { display: flex; flex-wrap: wrap; gap: var(--sc-2); margin: 0; }

.sc-catalog__h2 {
	font-size: var(--sc-fs-h2);
	font-weight: 800;
	margin: 0 0 var(--sc-3);
}

.sc-catalog__grid { margin-bottom: var(--sc-8); }

.sc-card__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--sc-border);
	padding-top: var(--sc-2);
}

.sc-card__list li {
	position: relative;
	padding-left: 1.1rem;
	margin-bottom: 0.5rem;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--sc-text);
}

.sc-card__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--sc-accent);
}

.sc-catalog__foot { max-width: 60rem; }

.sc-steps { margin: 0 0 var(--sc-3); padding-left: 1.25rem; }
.sc-steps li { margin-bottom: 0.75rem; line-height: 1.65; }

@media (max-width: 640px) {
	.sc-catalog__actions .sc-btn { width: 100%; }
}

/* ---------------------------------------------------------------------------
   COMPARISON TABLE
   Scrolls inside its own wrapper on desktop; becomes stacked cards on mobile
   so the page body never scrolls sideways.
   --------------------------------------------------------------------------- */
.sc-tablewrap {
	overflow-x: auto;
	margin: 0 0 var(--sc-8);
	border: 1px solid var(--sc-border);
	border-radius: var(--sc-radius);
	background: var(--sc-surface);
	-webkit-overflow-scrolling: touch;
}

.sc-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
	line-height: 1.55;
}

.sc-table thead th {
	background: var(--sc-primary);
	color: #fff;
	text-align: left;
	font-size: var(--sc-fs-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: var(--sc-2);
	white-space: nowrap;
}

.sc-table tbody th,
.sc-table tbody td {
	padding: var(--sc-2);
	border-top: 1px solid var(--sc-border);
	vertical-align: top;
	text-align: left;
}

.sc-table tbody th {
	font-weight: 700;
	color: var(--sc-primary);
	min-width: 12rem;
}

.sc-table tbody tr:nth-child(even) { background: var(--sc-bg); }

.sc-table abbr { text-decoration: none; border-bottom: 1px dotted var(--sc-muted); cursor: help; }

.sc-source {
	font-size: 0.9rem;
	color: var(--sc-muted);
	border-top: 1px solid var(--sc-border);
	padding-top: var(--sc-2);
	margin-bottom: var(--sc-3);
}

/* Stacked cards below 720px. Each cell carries its column name via data-label,
   so the header row can be dropped without losing meaning. */
@media (max-width: 720px) {
	.sc-tablewrap { border: 0; background: transparent; overflow-x: visible; }
	.sc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.sc-table, .sc-table tbody, .sc-table tr, .sc-table th, .sc-table td { display: block; width: 100%; }
	.sc-table tr {
		border: 1px solid var(--sc-border);
		border-radius: var(--sc-radius-sm);
		background: var(--sc-surface);
		margin-bottom: var(--sc-2);
		padding: var(--sc-1) var(--sc-2) var(--sc-2);
	}
	.sc-table tbody tr:nth-child(even) { background: var(--sc-surface); }
	.sc-table tbody th, .sc-table tbody td { border-top: 0; padding: var(--sc-1) 0; min-width: 0; }
	.sc-table tbody th { font-size: 1.05rem; border-bottom: 1px solid var(--sc-border); padding-bottom: var(--sc-1); }
	.sc-table tbody td::before {
		content: attr(data-label);
		display: block;
		font-size: 0.6875rem;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--sc-muted);
		margin-bottom: 2px;
	}
}

/* ---------------------------------------------------------------------------
   CARD MEDIA (catalog topic cards)
   Image sits flush to the card edges above the padded body.
   --------------------------------------------------------------------------- */
.sc-card:has(.sc-card__media) { padding: 0; overflow: hidden; }

.sc-card__media {
	margin: 0;
	aspect-ratio: 16 / 9;
	background: var(--sc-bg);
	overflow: hidden;
}

.sc-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s var(--sc-ease);
}

.sc-card:has(.sc-card__media):hover .sc-card__media img { transform: scale(1.04); }

/* Re-pad everything after the image, since the card itself lost its padding. */
.sc-card:has(.sc-card__media) > .sc-card__icon { margin: var(--sc-3) var(--sc-3) 0; }
.sc-card:has(.sc-card__media) > .sc-card__title,
.sc-card:has(.sc-card__media) > .sc-card__body,
.sc-card:has(.sc-card__media) > .sc-card__list { margin-left: var(--sc-3); margin-right: var(--sc-3); }
.sc-card:has(.sc-card__media) > .sc-card__list { margin-bottom: var(--sc-3); }

/* Icon overlaps the image edge — ties the two halves together. */
.sc-card:has(.sc-card__media) > .sc-card__icon {
	margin-top: calc(var(--sc-3) * -1.15);
	position: relative;
	z-index: 1;
	background: var(--sc-surface);
	box-shadow: var(--sc-shadow-sm);
}

@media (prefers-reduced-motion: reduce) {
	.sc-card:has(.sc-card__media):hover .sc-card__media img { transform: none; }
}

/* ---------------------------------------------------------------------------
   SUPPORT PAGE — additive only
   --------------------------------------------------------------------------- */
.sc-support__top {
	display: grid;
	grid-template-columns: 1fr 460px;
	gap: var(--sc-5);
	align-items: center;
	margin-bottom: var(--sc-8);
}

.sc-support__intro { min-width: 0; }

.sc-support__media {
	margin: 0;
	border-radius: var(--sc-radius);
	overflow: hidden;
	box-shadow: var(--sc-shadow);
	aspect-ratio: 3 / 2;
}
.sc-support__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sc-card__addr {
	font-style: normal;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--sc-muted);
	margin: 0;
}

/* --- FAQ accordion (native <details>: keyboard + screen reader for free) --- */
.sc-faq {
	border: 1px solid var(--sc-border);
	border-radius: var(--sc-radius-sm);
	background: var(--sc-surface);
	margin-bottom: var(--sc-1);
	overflow: hidden;
}

.sc-faq summary {
	cursor: pointer;
	list-style: none;
	padding: var(--sc-2) var(--sc-5) var(--sc-2) var(--sc-2);
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--sc-primary);
	position: relative;
	transition: background-color var(--sc-dur) var(--sc-ease);
}
.sc-faq summary::-webkit-details-marker { display: none; }
.sc-faq summary:hover { background: var(--sc-bg); }

/* Chevron, rotated when open */
.sc-faq summary::after {
	content: "";
	position: absolute;
	right: var(--sc-2);
	top: 50%;
	width: 9px;
	height: 9px;
	margin-top: -6px;
	border-right: 2px solid var(--sc-secondary);
	border-bottom: 2px solid var(--sc-secondary);
	transform: rotate(45deg);
	transition: transform var(--sc-dur) var(--sc-ease);
}
.sc-faq[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.sc-faq[open] summary { background: var(--sc-bg); }

.sc-faq__body { padding: 0 var(--sc-2) var(--sc-2); }
.sc-faq__body p { margin: 0; line-height: 1.7; color: var(--sc-text); font-size: 1rem; }

@media (max-width: 900px) {
	.sc-support__top { grid-template-columns: 1fr; gap: var(--sc-3); }
	.sc-support__media { aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion: reduce) {
	.sc-faq summary::after { transition: none; }
}

/* ---------------------------------------------------------------------------
   ABOUT PAGE — additive only
   --------------------------------------------------------------------------- */
.sc-support__top--reverse { grid-template-columns: 460px 1fr; margin-top: var(--sc-4); }

.sc-stats-intro { color: var(--sc-muted); margin: 0 0 var(--sc-3); font-size: 1rem; }

.sc-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sc-2);
	margin-bottom: var(--sc-2);
}

.sc-stat-card {
	background: var(--sc-primary);
	color: #fff;
	border-radius: var(--sc-radius);
	padding: var(--sc-3);
	text-align: center;
}

.sc-stat-card__num {
	margin: 0 0 4px;
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: #fff;
}

/* #C7D3E0 on #0B3B6E = 9.7:1. The spec muted (#6B7280) is 2.3:1 here and fails. */
.sc-stat-card__label {
	margin: 0;
	font-size: var(--sc-fs-xs);
	color: var(--sc-on-dark-muted);
	line-height: 1.4;
}

@media (max-width: 900px) {
	.sc-support__top--reverse { grid-template-columns: 1fr; }
	/* Image after text on mobile reads better than a lone photo up top */
	.sc-support__top--reverse .sc-support__media { order: 2; }
	.sc-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.sc-stats { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   IN-CONTENT PAGE TITLE
   Replaces the theme's centred title band. Left-aligned to match the content
   column, so the page starts where the reading starts.
   --------------------------------------------------------------------------- */
.sc-page-title {
	margin: 0 0 var(--sc-3);
	font-size: var(--sc-fs-h1);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: var(--sc-primary);
	text-wrap: balance;
}

/* ---------------------------------------------------------------------------
   Kill the default block-gap between header and main.
   Core applies margin-block-start to each top-level child of .wp-site-blocks,
   which showed as a ~19px strip of page background under the sticky header.
   Sections own their own vertical rhythm.
   --------------------------------------------------------------------------- */
.wp-site-blocks > main,
.wp-site-blocks > footer { margin-block-start: 0; }

/* ---------------------------------------------------------------------------
   Tighten the first section under the sticky header.
   Sections carry var(--sc-12) (96px) block padding for rhythm between them,
   but that much dead space above the H1 just pushes the page down.
   Scoped to .entry-content's first child, so the full-bleed homepage hero
   (not a .sc-section) is untouched.
   --------------------------------------------------------------------------- */
.entry-content > .sc-section:first-child { padding-top: var(--sc-5); }

@media (max-width: 640px) {
	.entry-content > .sc-section:first-child { padding-top: var(--sc-3); }
}

/* ---------------------------------------------------------------------------
   FOOTER LOGO
   Replaces the plain-text brand line. The wordmark uses currentColor so it
   picks up the footer's white; the hex uses a lightened gradient because the
   primary one starts at #0B3B6E — 1.20:1 on this ground, i.e. invisible.
   --------------------------------------------------------------------------- */
.scmep-footer__logo {
	display: block;
	width: 200px;
	max-width: 100%;
	color: #fff;
	margin: 0 0 var(--sc-2);
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.scmep-footer__logo svg { width: 100%; height: auto; display: block; }
.scmep-footer__logo:hover { opacity: 0.85; text-decoration: none; }
.scmep-footer__logo:focus-visible { outline: 3px solid var(--sc-accent); outline-offset: 4px; }

@media (max-width: 600px) { .scmep-footer__logo { width: 176px; } }


/* ============================================================
   ARTICLE PROSE
   Added for the first blog posts. The site had no posts, so it
   had no prose styles. Everything else these articles need
   (.sc-lede, .sc-tablewrap, .sc-table, .sc-faq) already exists
   above and is reused rather than redefined.
   ============================================================ */

.sc-article {
	max-width: 46rem;       /* measure — deliberately not --sc-container */
	margin-inline: auto;
	padding-inline: var(--sc-3);
}

.sc-article > * + * { margin-top: var(--sc-3); }

.sc-article h2 {
	margin-top: var(--sc-8);
	font-size: clamp(1.5rem, 2.4vw, 1.875rem);
	font-weight: 800;
	line-height: 1.25;
}

.sc-article h3 {
	margin-top: var(--sc-5);
	font-size: 1.25rem;
	font-weight: 700;
}

.sc-article p,
.sc-article li { font-size: var(--sc-fs-body); line-height: 1.7; }

.sc-article ul,
.sc-article ol { padding-left: var(--sc-3); }
.sc-article li + li { margin-top: var(--sc-1); }

.sc-article a {
	color: var(--sc-secondary);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.sc-article a:hover { color: var(--sc-primary); }

.sc-article figure { margin: var(--sc-5) 0; }
.sc-article img { max-width: 100%; height: auto; border-radius: var(--sc-radius-sm); }

.sc-article figcaption {
	margin-top: var(--sc-1);
	font-size: var(--sc-fs-xs);
	color: var(--sc-muted);
}

/* The FAQ list sits directly in the article; give it air from the h2 above. */
.sc-article details.sc-faq:first-of-type { margin-top: var(--sc-3); }

/* Tables inside an article break out of the 46rem measure — a comparison table
   needs the width. It still scrolls inside .sc-tablewrap, so the page body never
   scrolls sideways. */
.sc-article .sc-tablewrap {
	margin-block: var(--sc-5);
	width: 100%;
}

/* .sc-table had no caption rule; these articles caption every table. */
.sc-table caption {
	padding: var(--sc-2);
	font-size: var(--sc-fs-sm);
	font-weight: 600;
	color: var(--sc-muted);
	text-align: left;
	caption-side: top;
}

/* ============================================================
   HOMEPAGE — SECTION HEAD WITH ACTION LINK
   .sc-section__head defaults to a centered, single-column head.
   Sections that also carry a "View all" link (Programs, Topics)
   switch to a left-aligned row instead — scoped with :has() so
   the centered sections (e.g. Why SCMEP) are untouched.
   ============================================================ */
.sc-section__head:has(.sc-section__action) {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sc-3);
	max-width: none;
	text-align: left;
}

.sc-section__headings { max-width: 44rem; }

.sc-section__action {
	display: inline-flex;
	align-items: center;
	gap: var(--sc-1);
	flex: 0 0 auto;
	font-size: var(--sc-fs-sm);
	font-weight: 700;
	color: var(--sc-secondary);
	text-decoration: none;
	white-space: nowrap;
}
.sc-section__action svg { width: 16px; height: 16px; transition: transform var(--sc-dur) var(--sc-ease); }
.sc-section__action:hover { text-decoration: underline; }
.sc-section__action:hover svg { transform: translateX(4px); }

@media (max-width: 640px) {
	.sc-section__head:has(.sc-section__action) { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   HOMEPAGE — MANUFACTURING TOPICS GRID
   Nine tiles, icon + title + example courses. Distinct from any
   earlier topic-tile treatment in the prototype (icon-only chips) —
   this one needs room for real course examples, so it's a card
   row rather than a centered icon chip.
   ============================================================ */
.sc-topics {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sc-2);
}

.sc-topic {
	display: flex;
	align-items: flex-start;
	gap: var(--sc-2);
	padding: var(--sc-3);
	background: var(--sc-surface);
	border: 1px solid var(--sc-border);
	border-radius: var(--sc-radius);
	color: inherit;
	text-decoration: none;
	transition: transform var(--sc-dur) var(--sc-ease), border-color var(--sc-dur) var(--sc-ease),
	            box-shadow var(--sc-dur) var(--sc-ease);
}
.sc-topic:hover,
.sc-topic:focus-visible {
	transform: translateY(-4px);
	border-color: #CBD5E1;
	box-shadow: var(--sc-shadow-lg);
}

.sc-topic__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border-radius: var(--sc-radius-sm);
	background: rgb(15 108 189 / 10%);
	color: var(--sc-secondary);
}
.sc-topic__icon svg { width: 24px; height: 24px; }

.sc-topic__text { min-width: 0; }
.sc-topic__title { margin: 0 0 4px; font-size: 1.05rem; font-weight: 700; color: var(--sc-primary); }
.sc-topic__ex { margin: 0; color: var(--sc-muted); font-size: var(--sc-fs-sm); line-height: 1.5; }

@media (max-width: 1024px) {
	.sc-topics { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.sc-topics { grid-template-columns: 1fr; }
}

/* ============================================================
   HOMEPAGE — CLOSING CTA
   ============================================================ */
.sc-cta {
	background: var(--sc-primary-700);
	color: #fff;
	padding-block: var(--sc-10);
	text-align: center;
}
.sc-cta__title { margin: 0 0 var(--sc-2); color: #fff; font-size: var(--sc-fs-h2); font-weight: 800; }
.sc-cta__sub { margin: 0 auto var(--sc-4); max-width: 46rem; color: var(--sc-on-dark-muted); }
.sc-cta__actions { display: flex; flex-wrap: wrap; gap: var(--sc-2); justify-content: center; }