/*
 * McNeese Program Pages — Single Template Styles (v1.1.0)
 *
 * Design system:
 *   - MSU Blue:   #01529b   (primary brand)
 *   - MSU Blue 2: #0C5294   (drop variant)
 *   - MSU Gold:   #fcd61f   (accent / CTAs)
 *   - Black:      #000000   (text)
 *
 * Typography (already loaded by Breakdance):
 *   - Body:     "Plus Jakarta Sans", sans-serif
 *   - Headings: "Roboto Slab", serif
 *
 * Layout philosophy: hero spans full width (breaks out of theme container);
 * main content uses a two-column shell with sticky sidebar on desktop,
 * collapses to one column on mobile.
 */

:root {
	--mpp-blue:        #01529b;
	--mpp-blue-dark:   #003b73;
	--mpp-blue-soft:   #e8f1fa;
	--mpp-gold:        #fcd61f;
	--mpp-gold-deep:   #d4b212;
	--mpp-ink:         #1a1a1a;
	--mpp-ink-soft:    #4b5563;
	--mpp-rule:        #e5e7eb;
	--mpp-paper:       #ffffff;
	--mpp-paper-soft:  #f8fafc;
	--mpp-body-font:   "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--mpp-heading-font:"Roboto Slab", Georgia, serif;
	--mpp-radius:      8px;
	--mpp-radius-lg:   12px;
	--mpp-shadow:      0 2px 8px rgba(0,0,0,0.06);
	--mpp-shadow-lg:   0 8px 24px rgba(0,0,0,0.12);
	--mpp-shell-max:   1180px;
}

/* Base */
.mpp-page {
	color: var(--mpp-ink);
	font-family: var(--mpp-body-font);
	font-size: 17px;
	line-height: 1.6;
	letter-spacing: 0.01em;
}
.mpp-page * { box-sizing: border-box; }
.mpp-page h1, .mpp-page h2, .mpp-page h3, .mpp-page h4 {
	font-family: var(--mpp-heading-font);
	color: var(--mpp-blue);
	font-weight: 700;
	line-height: 1.2;
}
.mpp-page p { margin: 0 0 1em; }
.mpp-page a { color: var(--mpp-blue); }
.mpp-page a:hover { color: var(--mpp-blue-dark); }

/* ==========================================================================
   ACCESSIBILITY: skip link + focus visibility
   ========================================================================== */

/* Skip-to-content link. Visually hidden until focused by Tab key, then
   slides into view at the top-left. Lets keyboard users bypass the global
   header. WCAG 2.4.1 (Bypass Blocks). */
.mpp-skip-link {
	position: absolute;
	top: -100px;
	left: 8px;
	z-index: 100000;
	padding: 12px 20px;
	background: var(--mpp-blue);
	color: #fff !important;
	font-weight: 700;
	text-decoration: none;
	border-radius: 4px;
	transition: top 0.15s ease;
}
.mpp-skip-link:focus,
.mpp-skip-link:focus-visible {
	top: 8px;
	outline: 3px solid var(--mpp-gold);
	outline-offset: 2px;
}

/* When the skip-link target gains focus programmatically (after a click),
   we suppress its default outline since it isn't really an interactive
   element — but keep the JS-driven focus so screen readers announce it. */
#mpp-main-content:focus { outline: none; }

/* Visible focus indicator on all interactive elements.
   WCAG 2.4.7 (Focus Visible) requires a clear visual indicator on the
   currently focused element for keyboard users. */
.mpp-page a:focus-visible,
.mpp-page button:focus-visible,
.mpp-page summary:focus-visible,
.mpp-page details:focus-visible,
.mpp-page input:focus-visible,
.mpp-page textarea:focus-visible,
.mpp-page select:focus-visible {
	outline: 3px solid var(--mpp-gold);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Buttons get a slightly different treatment so the gold doesn't clash with
   their own gold/blue backgrounds. */
.mpp-page .mpp-btn:focus-visible {
	outline: 3px solid var(--mpp-blue);
	outline-offset: 3px;
}
.mpp-page .mpp-btn--gold:focus-visible {
	outline-color: var(--mpp-blue);
}
.mpp-page .mpp-btn--blue:focus-visible,
.mpp-hero .mpp-btn--ghost:focus-visible {
	outline-color: var(--mpp-gold);
}

/* Sidebar buttons sit on a dark blue gradient; gold ring is more visible. */
.mpp-sidebar__cta .mpp-btn:focus-visible {
	outline: 3px solid var(--mpp-gold);
	outline-offset: 3px;
}

/* Prose blocks (WYSIWYG content) */
.mpp-prose p { margin: 0 0 1em; }
.mpp-prose p:last-child { margin-bottom: 0; }
.mpp-prose ul, .mpp-prose ol { margin: 0 0 1em 1.2em; padding: 0; }
.mpp-prose li { margin-bottom: 0.4em; }
.mpp-prose strong { color: var(--mpp-blue); }
.mpp-prose a { text-decoration: underline; text-underline-offset: 2px; }
.mpp-prose a:hover { text-decoration: none; }

.mpp-prose--inverse { color: rgba(255,255,255,0.9); }
.mpp-prose--inverse strong { color: var(--mpp-gold); }
.mpp-prose--inverse a { color: var(--mpp-gold); }

/* ============================== HERO ============================== */
.mpp-hero {
	position: relative;
	min-height: 380px;
	background-color: var(--mpp-blue-dark);
	background-size: cover;
	background-position: center;
	color: #fff;
	overflow: hidden;
}
.mpp-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg,
		rgba(1, 50, 100, 0.92) 0%,
		rgba(1, 82, 155, 0.78) 50%,
		rgba(1, 82, 155, 0.55) 100%);
}
.mpp-hero__inner {
	position: relative;
	max-width: var(--mpp-shell-max);
	margin: 0 auto;
	padding: 80px 28px 96px;
	z-index: 1;
}
.mpp-hero__overline {
	color: var(--mpp-gold);
	font-family: var(--mpp-body-font);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0 0 14px;
}
.mpp-hero__title {
	font-family: var(--mpp-heading-font);
	color: #fff !important;
	font-size: clamp(30px, 3.8vw, 46px);
	font-weight: 700;
	line-height: 1.1;
	margin: 0 0 18px;
	max-width: 1050px;
}
.mpp-hero__lede {
	max-width: 720px;
	font-size: 19px;
	line-height: 1.5;
	margin: 0 0 28px;
	color: rgba(255,255,255,0.92);
}
.mpp-hero__cta { margin: 0; }

/* ============================== BUTTONS ============================== */
.mpp-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 28px;
	font-family: var(--mpp-body-font);
	font-size: 16px;
	font-weight: 700;
	text-decoration: none !important;
	border-radius: var(--mpp-radius);
	border: 2px solid transparent;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
	white-space: nowrap;
}
.mpp-btn:hover { transform: translateY(-1px); box-shadow: var(--mpp-shadow); }
.mpp-btn__arrow { display: inline-block; transition: transform 0.15s ease; }
.mpp-btn:hover .mpp-btn__arrow { transform: translateX(4px); }

.mpp-btn--gold {
	background: var(--mpp-gold);
	color: #1a1a1a !important;
}
.mpp-btn--gold:hover {
	background: var(--mpp-gold-deep);
	color: #000 !important;
}

.mpp-btn--blue {
	background: var(--mpp-blue);
	color: #fff !important;
	border-color: var(--mpp-blue);
}
.mpp-btn--blue:hover {
	background: #003a73;
	border-color: #003a73;
	color: #fff !important;
}

.mpp-btn--ghost {
	background: transparent;
	color: var(--mpp-blue) !important;
	border-color: var(--mpp-blue);
}
.mpp-btn--ghost:hover {
	background: var(--mpp-blue);
	color: #fff !important;
}

/* Ghost variant on the dark hero overlay — visible text on photo background.
   We assume any .mpp-btn--ghost inside .mpp-hero is on the photo. */
.mpp-hero .mpp-btn--ghost {
	color: #fff !important;
	border-color: rgba(255, 255, 255, 0.8);
	background: rgba(0, 0, 0, 0.25);
}
.mpp-hero .mpp-btn--ghost:hover {
	background: #fff;
	color: var(--mpp-blue) !important;
	border-color: #fff;
}

.mpp-btn--full { display: flex; justify-content: center; width: 100%; }

/* Hero CTA row — flexbox so two buttons sit nicely side by side, wrap on
   narrow screens. */
.mpp-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

/* Inline link with arrow */
.mpp-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	text-decoration: none;
}
.mpp-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ============================== SHELL ============================== */
.mpp-shell {
	max-width: var(--mpp-shell-max);
	margin: 0 auto;
	padding: 48px 28px 80px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}
@media (min-width: 960px) {
	.mpp-shell {
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: 56px;
	}
}

.mpp-main { min-width: 0; }

/* ============================== SECTION HEADERS ============================== */
.mpp-section {
	margin: 0 0 56px;
}
.mpp-section > h2 {
	font-size: clamp(26px, 3vw, 34px);
	margin: 0 0 20px;
	padding-bottom: 12px;
	position: relative;
}
.mpp-section > h2::after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 56px;
	height: 4px;
	background: var(--mpp-gold);
	border-radius: 2px;
}

/* ============================== AT-A-GLANCE ============================== */
.mpp-glance {
	background: var(--mpp-paper-soft);
	border: 1px solid var(--mpp-rule);
	border-radius: var(--mpp-radius-lg);
	padding: 32px 40px;
	margin-bottom: 48px;
	box-shadow: var(--mpp-shadow);
}
.mpp-glance__heading {
	font-family: var(--mpp-body-font);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--mpp-ink-soft);
	margin: 0 0 24px;
}
.mpp-glance__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 32px 48px;
	margin: 0;
}
.mpp-glance__item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	position: relative;
}
/* Subtle vertical divider between items on desktop. */
@media (min-width: 720px) {
	.mpp-glance__item:not(:last-child)::after {
		content: '';
		position: absolute;
		top: 4px;
		bottom: 4px;
		right: -24px;
		width: 1px;
		background: var(--mpp-rule);
	}
	/* Hide the divider on items that wrap to a new row — when an item is
	   followed by one that aligns at the same horizontal start, the divider
	   would appear at the end of a row. CSS can't reliably know about
	   row breaks, so this is approximate; if you see a stray divider, we
	   can switch to JS or accept it. */
}
.mpp-glance__icon {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--mpp-blue);
	color: #fff;
	border-radius: 50%;
	margin-top: 2px;
}
.mpp-glance__icon svg { width: 18px; height: 18px; }
.mpp-glance__item dt {
	font-family: var(--mpp-body-font);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--mpp-ink-soft);
	margin: 0 0 3px;
}
.mpp-glance__item dd {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--mpp-ink);
	line-height: 1.3;
}

/* ============================== HIGHLIGHTS ============================== */

/* Two-column layout when a Highlight Image is set. The order property on
   the figure handles right-vs-left without changing markup order. */
.mpp-highlights__layout {
	display: grid;
	gap: 32px;
	align-items: start;
	margin: 0 0 24px;
}
.mpp-highlights__layout--right,
.mpp-highlights__layout--left {
	grid-template-columns: 1fr minmax(220px, 35%);
}
.mpp-highlights__layout--right .mpp-highlights__figure { order: 2; }
.mpp-highlights__layout--right .mpp-highlights__body   { order: 1; }
.mpp-highlights__layout--left  .mpp-highlights__figure { order: 1; }
.mpp-highlights__layout--left  .mpp-highlights__body   { order: 2; }

.mpp-highlights__layout--above {
	grid-template-columns: 1fr;
}
.mpp-highlights__layout--above .mpp-highlights__figure { margin: 0 0 16px; }

.mpp-highlights__figure {
	margin: 0;
}
.mpp-highlights__img,
.mpp-highlights__figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--mpp-radius);
}

/* On narrower screens, always stack — image first. */
@media (max-width: 720px) {
	.mpp-highlights__layout--right,
	.mpp-highlights__layout--left,
	.mpp-highlights__layout--above {
		grid-template-columns: 1fr;
	}
	.mpp-highlights__layout--right .mpp-highlights__figure,
	.mpp-highlights__layout--left  .mpp-highlights__figure {
		order: 1;
		margin-bottom: 8px;
	}
	.mpp-highlights__layout--right .mpp-highlights__body,
	.mpp-highlights__layout--left  .mpp-highlights__body {
		order: 2;
	}
}

.mpp-subhighlight {
	margin-top: 32px;
	padding: 24px 28px;
	background: var(--mpp-blue-soft);
	border-left: 4px solid var(--mpp-blue);
	border-radius: 0 var(--mpp-radius) var(--mpp-radius) 0;
}
.mpp-subhighlight h3 {
	font-size: 22px;
	color: var(--mpp-blue);
	margin: 0 0 12px;
}

/* ============================== AFFILIATIONS ============================== */
.mpp-affiliations {
	margin: 0 0 48px;
}
.mpp-affiliations__grid {
	list-style: none;
	padding: 24px 16px;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 32px 48px;
	background: var(--mpp-paper-soft);
	border: 1px solid var(--mpp-rule);
	border-radius: var(--mpp-radius);
}
.mpp-affiliations__item {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mpp-affiliations__link {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	border-radius: 8px;
	transition: transform 0.18s ease, background-color 0.18s ease;
	cursor: zoom-in;
}
.mpp-affiliations__link:hover,
.mpp-affiliations__link:focus-visible {
	transform: scale(1.05);
	background-color: rgba(1, 82, 155, 0.04);
}
.mpp-affiliations__img {
	max-width: 180px;
	max-height: 110px;
	width: auto;
	height: auto;
	display: block;
	object-fit: contain;
	/* Slight desaturation by default; full color on hover. Common for
	   accreditation/partner logo rows. */
	filter: grayscale(0.2);
	opacity: 0.92;
	transition: filter 0.2s ease, opacity 0.2s ease;
}
.mpp-affiliations__link:hover .mpp-affiliations__img,
.mpp-affiliations__link:focus-visible .mpp-affiliations__img {
	filter: grayscale(0);
	opacity: 1;
}
@media (max-width: 720px) {
	.mpp-affiliations__grid {
		gap: 24px 32px;
		padding: 20px 12px;
	}
	.mpp-affiliations__img {
		max-width: 140px;
		max-height: 80px;
	}
}

/* ============================== LIGHTBOX ============================== */
.mpp-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(0, 0, 0, 0.85);
	opacity: 0;
	transition: opacity 0.2s ease;
}
.mpp-lightbox[hidden] {
	display: none;
}
.mpp-lightbox.is-open {
	opacity: 1;
}
.mpp-lightbox__figure {
	max-width: min(90vw, 1000px);
	max-height: 90vh;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}
.mpp-lightbox__img {
	max-width: 100%;
	max-height: 80vh;
	width: auto;
	height: auto;
	display: block;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.mpp-lightbox__caption {
	color: #fff;
	font-size: 15px;
	text-align: center;
	max-width: 600px;
	margin: 0;
	line-height: 1.5;
}
.mpp-lightbox__caption:empty {
	display: none;
}
.mpp-lightbox__close {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mpp-lightbox__close:hover,
.mpp-lightbox__close:focus-visible {
	background: rgba(255, 255, 255, 0.3);
	outline: 2px solid #fcd61f;
	outline-offset: 2px;
}
@media (max-width: 720px) {
	.mpp-lightbox {
		padding: 16px;
	}
	.mpp-lightbox__close {
		top: 12px;
		right: 12px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.mpp-lightbox,
	.mpp-affiliations__link,
	.mpp-affiliations__img {
		transition: none;
	}
}

/* ============================== EXPLORE ============================== */
.mpp-explore__intro {
	font-size: 18px;
	color: var(--mpp-ink-soft);
	margin: 0 0 28px;
	max-width: 800px;
}
.mpp-explore__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
}
.mpp-explore__card {
	padding: 24px;
	background: var(--mpp-paper);
	border: 1px solid var(--mpp-rule);
	border-radius: var(--mpp-radius);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	display: flex;
	flex-direction: column;
}
.mpp-explore__card:hover {
	transform: translateY(-2px);
	box-shadow: var(--mpp-shadow);
	border-color: var(--mpp-blue);
}
.mpp-explore__card h3 {
	font-size: 19px;
	margin: 0 0 10px;
	color: var(--mpp-blue);
}
.mpp-explore__card .mpp-prose { flex-grow: 1; }
.mpp-explore__card .mpp-prose p:last-child { margin-bottom: 0; }
.mpp-explore__card p:has(a.mpp-link) {
	margin-top: 16px;
	margin-bottom: 0;
	padding-top: 16px;
	border-top: 1px solid var(--mpp-rule);
}
.mpp-explore__card a.mpp-link {
	color: var(--mpp-blue);
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-family: var(--mpp-body-font);
	text-decoration: underline;
	text-decoration-color: rgba(1, 82, 155, 0.3);
	text-underline-offset: 4px;
	transition: color 0.15s ease, text-decoration-color 0.15s ease, gap 0.15s ease;
}
.mpp-explore__card a.mpp-link:hover {
	color: var(--mpp-blue-dark, #003a73);
	text-decoration-color: var(--mpp-blue);
	gap: 10px;
}
.mpp-explore__card a.mpp-link span[aria-hidden] {
	transition: transform 0.15s ease;
}
.mpp-explore__card a.mpp-link:hover span[aria-hidden] {
	transform: translateX(4px);
}

/* ============================== CONCENTRATIONS ============================== */
.mpp-concentrations__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
	margin-top: 28px;
}
.mpp-concentrations__card {
	padding: 28px 24px;
	background: var(--mpp-paper);
	border: 1px solid var(--mpp-rule);
	border-radius: var(--mpp-radius);
	text-align: left;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	display: flex;
	flex-direction: column;
}
.mpp-concentrations__card:hover {
	transform: translateY(-3px);
	box-shadow: var(--mpp-shadow-lg);
	border-color: var(--mpp-blue);
}
.mpp-concentrations__card h3 {
	font-size: 20px;
	margin: 0 0 12px;
	color: var(--mpp-blue);
}
.mpp-concentrations__card .mpp-prose { flex-grow: 1; }
.mpp-concentrations__card .mpp-prose p:last-child { margin-bottom: 0; }
.mpp-concentrations__card p:has(a.mpp-link) {
	margin-top: 16px;
	margin-bottom: 0;
	padding-top: 16px;
	border-top: 1px solid var(--mpp-rule);
}
.mpp-concentrations__card a.mpp-link {
	color: var(--mpp-blue);
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-family: var(--mpp-body-font);
	text-decoration: underline;
	text-decoration-color: rgba(1, 82, 155, 0.3);
	text-underline-offset: 4px;
	transition: color 0.15s ease, text-decoration-color 0.15s ease, gap 0.15s ease;
}
.mpp-concentrations__card a.mpp-link:hover {
	color: var(--mpp-blue-dark, #003a73);
	text-decoration-color: var(--mpp-blue);
	gap: 10px;
}
.mpp-concentrations__card a.mpp-link span[aria-hidden] {
	transition: transform 0.15s ease;
}
.mpp-concentrations__card a.mpp-link:hover span[aria-hidden] {
	transform: translateX(4px);
}

/* ============================== OPPORTUNITIES ============================== */
.mpp-opportunities__lead {
	font-size: 19px;
	font-weight: 600;
	color: var(--mpp-blue);
	margin: 0 0 20px;
	font-family: var(--mpp-heading-font);
}

/* ============================== WILDCARD CARDS ============================== */
.mpp-wildcards-section {
	max-width: var(--mpp-shell-max);
	margin: 0 auto;
	padding: 0 28px 64px;
	/* Pull up to absorb part of the shell's 80px bottom padding so the gap
	   between the main content and the cards is balanced (~64px total). */
	margin-top: -32px;
}
.mpp-wildcards-section__heading {
	font-family: var(--mpp-heading-font);
	color: var(--mpp-ink);
	font-size: clamp(26px, 3vw, 34px);
	font-weight: 700;
	margin: 0 0 24px;
	padding-bottom: 12px;
	position: relative;
}
.mpp-wildcards-section__heading::after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 56px;
	height: 4px;
	background: var(--mpp-gold);
	border-radius: 2px;
}
.mpp-wildcards-grid {
	display: grid;
	gap: 24px;
}
/* 1 col when only 1 card */
.mpp-wildcards-grid--1col {
	grid-template-columns: minmax(0, 1fr);
	max-width: 720px;
	margin: 0 auto;
}
/* 2 col when exactly 2 cards */
.mpp-wildcards-grid--2col {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* 3 col when 3+ cards */
.mpp-wildcards-grid--3col {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mpp-wildcard-card {
	background: #fff;
	border: 1px solid var(--mpp-rule);
	border-radius: var(--mpp-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.mpp-wildcard-card:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}
.mpp-wildcard-card__image {
	width: 100%;
	aspect-ratio: 16 / 9;
	background-size: cover;
	background-position: center;
	background-color: var(--mpp-paper-soft);
}
.mpp-wildcard-card__body {
	padding: 20px 24px 24px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}
.mpp-wildcard-card__heading {
	font-family: var(--mpp-heading-font);
	color: var(--mpp-ink);
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 12px;
	line-height: 1.25;
}
.mpp-wildcard-card__content {
	color: var(--mpp-ink);
	font-size: 15px;
	line-height: 1.55;
	flex-grow: 1;
}
.mpp-wildcard-card__content p:last-child {
	margin-bottom: 0;
}
.mpp-wildcard-card__video,
.mpp-page .mpp-wildcard-card__video {
	margin: 28px 0 0;
}
.mpp-wildcard-card__video-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--mpp-blue);
	font-weight: 600;
	text-decoration: none;
	font-size: 14px;
	border-bottom: 1px solid transparent;
	transition: border-color 0.15s ease;
}
.mpp-wildcard-card__video-link:hover,
.mpp-wildcard-card__video-link:focus {
	border-bottom-color: var(--mpp-blue);
}
.mpp-wildcard-card__cta,
.mpp-page .mpp-wildcard-card__cta {
	margin: 28px 0 0;
}
.mpp-wildcard-card__cta .mpp-btn {
	/* Keep buttons within card width on narrow viewports rather than overflow. */
	max-width: 100%;
}
/* When both video link and CTA button are present, tighten the gap between
   them so they read as a related action group (28px content→video, 16px
   video→button). Specificity raised so the .mpp-page p rule doesn't win. */
.mpp-page .mpp-wildcard-card__video + .mpp-wildcard-card__cta {
	margin-top: 16px;
}
/* Tablet — collapse to 2 columns */
@media (max-width: 900px) {
	.mpp-wildcards-grid--3col {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
/* Phone — single column */
@media (max-width: 600px) {
	.mpp-wildcards-section {
		padding: 0 16px 48px;
		margin-top: -24px;
	}
	.mpp-wildcards-grid--2col,
	.mpp-wildcards-grid--3col {
		grid-template-columns: minmax(0, 1fr);
	}
	.mpp-wildcard-card__heading { font-size: 20px; }
}

/* ============================== ACCORDION ============================== */
.mpp-accordion__list { margin-top: 16px; }
.mpp-accordion__item {
	border: 1px solid var(--mpp-rule);
	border-radius: var(--mpp-radius);
	background: var(--mpp-paper);
	margin-bottom: 12px;
	overflow: hidden;
}
.mpp-accordion__item summary {
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 24px;
	font-family: var(--mpp-heading-font);
	font-size: 18px;
	font-weight: 600;
	color: var(--mpp-blue);
	list-style: none;
}
.mpp-accordion__item summary::-webkit-details-marker { display: none; }
.mpp-accordion__label {
	font-family: var(--mpp-body-font);
	font-size: 15px;
	font-weight: 600;
	color: var(--mpp-ink);
}
.mpp-accordion__headline { flex: 1; }
.mpp-accordion__chevron {
	font-size: 24px;
	color: var(--mpp-blue);
	transition: transform 0.2s ease;
}
.mpp-accordion__item[open] .mpp-accordion__chevron {
	transform: rotate(45deg);
}
.mpp-accordion__body {
	padding: 0 24px 20px;
}

/* ============================== TESTIMONIALS ============================== */
.mpp-testimonial {
	margin: 0 0 24px;
	padding: 28px 32px 28px 56px;
	background: var(--mpp-paper);
	border: 1px solid var(--mpp-rule);
	border-left: 4px solid var(--mpp-blue);
	border-radius: 0 var(--mpp-radius) var(--mpp-radius) 0;
	position: relative;
}
.mpp-testimonial::before {
	content: '\201C'; /* Real left-double-quote glyph; renders better than a straight " */
	position: absolute;
	top: 14px;
	left: 20px;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 56px;
	line-height: 1;
	color: var(--mpp-blue);
	opacity: 0.85;
	font-weight: 700;
}
.mpp-testimonial__quote {
	margin: 0 0 16px;
	font-size: 18px;
	line-height: 1.55;
	color: var(--mpp-ink);
	font-style: italic;
	position: relative;
}
.mpp-testimonial__source {
	font-weight: 600;
	color: var(--mpp-ink);
	font-size: 15px;
	padding-top: 12px;
	border-top: 1px solid var(--mpp-rule);
}

/* ============================== RELATED ============================== */
.mpp-related__highlight {
	font-size: 17px;
	color: var(--mpp-ink-soft);
	margin: 0 0 20px;
	max-width: 800px;
}
.mpp-related__list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.mpp-related__list li {
	border-bottom: 1px solid var(--mpp-rule);
}
.mpp-related__list li:first-child { border-top: 1px solid var(--mpp-rule); }
.mpp-related__list a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 4px;
	color: var(--mpp-blue);
	text-decoration: none;
	font-weight: 600;
	transition: padding 0.15s ease;
}
.mpp-related__list a:hover {
	padding-left: 12px;
	color: var(--mpp-blue-dark);
}

/* ============================== SIDEBAR ============================== */
.mpp-sidebar { min-width: 0; }
.mpp-sidebar__sticky {
	position: static;
}
@media (min-width: 960px) {
	.mpp-sidebar__sticky {
		position: sticky;
		top: 100px;
	}
}

.mpp-sidebar__card {
	background: var(--mpp-paper);
	border: 1px solid var(--mpp-rule);
	border-radius: var(--mpp-radius-lg);
	padding: 24px;
	margin-bottom: 20px;
	box-shadow: var(--mpp-shadow);
}

.mpp-sidebar__heading {
	font-family: var(--mpp-heading-font);
	font-size: 18px;
	color: var(--mpp-blue);
	margin: 0 0 16px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--mpp-gold);
}

/* Search widget card — wraps an arbitrary third-party shortcode (typically
   from Plugin A's program directory search form). Constrain widths so the
   embedded form doesn't break the sidebar layout. */
.mpp-search-card__body { max-width: 100%; }
.mpp-search-card__body input[type="text"],
.mpp-search-card__body input[type="search"],
.mpp-search-card__body select {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}
.mpp-search-card__body form { margin: 0; }
.mpp-search-card__body * { max-width: 100%; }

/* Contact card */
.mpp-contact-card__name,
.mpp-page .mpp-contact-card__name {
	font-weight: 700;
	font-size: 16px;
	margin: 0 0 2px;
	color: var(--mpp-ink);
	line-height: 1.3;
}
.mpp-contact-card__title,
.mpp-page .mpp-contact-card__title {
	font-size: 14px;
	color: var(--mpp-ink-muted, #555);
	margin: 0 0 10px;
	line-height: 1.35;
}
/* If there's a title, the bottom margin lives on the title; if not, the name
   keeps its own spacing. */
.mpp-contact-card__name:not(:last-child) {
	margin-bottom: 2px;
}
.mpp-contact-card__line {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 6px;
	font-size: 15px;
	word-break: break-word;
}
.mpp-contact-card__icon {
	flex: 0 0 20px;
	color: var(--mpp-blue);
	font-size: 14px;
}
/* Each contact person is visually separated when there are multiples */
.mpp-contact-card__person {
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--mpp-rule);
}
.mpp-contact-card__person:last-child {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}

/* Sidebar Apply CTA */
.mpp-sidebar__cta {
	background: linear-gradient(135deg, var(--mpp-blue) 0%, var(--mpp-blue-dark) 100%);
	color: #fff;
	border-color: var(--mpp-blue);
}
.mpp-sidebar__cta .mpp-sidebar__heading {
	color: #fff;
	border-bottom-color: var(--mpp-gold);
}
.mpp-sidebar__cta p {
	color: rgba(255,255,255,0.92);
	font-size: 15px;
	margin: 0 0 12px;
}
.mpp-sidebar__cta p:last-child { margin-bottom: 0; }

/* Override button colors for the dark sidebar CTA background.
   Request Information (--blue) needs to stand out from the blue gradient;
   Visit Campus (--ghost) needs visible white text/border. */
.mpp-sidebar__cta .mpp-btn--blue {
	background: rgba(255, 255, 255, 0.12);
	color: #fff !important;
	border-color: rgba(255, 255, 255, 0.4);
}
.mpp-sidebar__cta .mpp-btn--blue:hover {
	background: rgba(255, 255, 255, 0.22);
	border-color: rgba(255, 255, 255, 0.7);
	color: #fff !important;
}
.mpp-sidebar__cta .mpp-btn--ghost {
	background: transparent;
	color: #fff !important;
	border-color: rgba(255, 255, 255, 0.6);
}
.mpp-sidebar__cta .mpp-btn--ghost:hover {
	background: #fff;
	color: var(--mpp-blue) !important;
	border-color: #fff;
}

/* ============================== MOBILE ============================== */
@media (max-width: 959px) {
	.mpp-hero__inner { padding: 56px 20px 64px; }
	.mpp-shell { padding: 32px 20px 56px; }
	.mpp-section { margin-bottom: 40px; }
	.mpp-glance__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 519px) {
	.mpp-glance__grid { grid-template-columns: 1fr; }
}