/* University Marketplace — Modern Minimalist theme
   Palette: near-white paper bg, near-black ink, single indigo accent.
   Sans-serif throughout, generous whitespace, balanced (not sparse, not dense) card sizing. */

:root {
	--um-ink: #16181d;
	--um-ink-soft: #5b6169;
	--um-paper: #ffffff;
	--um-surface: #f6f8f7;
	--um-border: #e3e8e6;

	/* Brand: strictly green, black and white. Deep green carries structure
	   and every primary action; emphasis comes from tint and weight rather
	   than introducing a second hue. */
	--um-accent: #0F6E56;
	--um-accent-hover: #0a5342;
	--um-accent-soft: #e6f2ee;
	/* Palette is strictly green / black / white. Emphasis is created with
	   tint and weight rather than a second hue. */
	--um-accent-mid: #12886a;
	--um-accent-tint: #eef5f2;

	--um-radius: 10px;
	--um-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ================= SITE-WIDE NAV ================= */

.um-site-nav {
	background: var(--um-paper);
	border-bottom: 1px solid var(--um-border);
	font-family: var(--um-font);
	position: sticky;
	top: 0;
	z-index: 999;
}

.um-nav-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 16px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.um-nav-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--um-ink);
	line-height: 1.2;
}

.um-nav-logo-mark {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	display: block;
}

.um-nav-logo-text {
	display: flex;
	flex-direction: column;
}

.um-nav-logo-name {
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.um-nav-tagline {
	font-size: 0.7rem;
	font-weight: 500;
	color: var(--um-ink-soft);
	letter-spacing: 0;
}

/* ================= ABOUT / LANDING PAGE ================= */

.um-about {
	font-family: var(--um-font);
	color: var(--um-ink);
	max-width: 1100px;
	margin: 0 auto;
	padding: 24px;
}

.um-about-hero {
	text-align: center;
	padding: 72px 24px 56px;
	border-bottom: 1px solid var(--um-border);
}

.um-about-headline {
	font-size: 2.8rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	margin: 0 0 16px;
	line-height: 1.1;
}

.um-about-subheadline {
	font-size: 1.12rem;
	color: var(--um-ink-soft);
	max-width: 620px;
	margin: 0 auto 32px;
	line-height: 1.5;
}

.um-about-cta {
	display: inline-block;
	background: var(--um-accent);
	color: #fff;
	text-decoration: none;
	font-size: 1rem;
	font-weight: 600;
	padding: 14px 32px;
	border-radius: 8px;
}

.um-about-cta:hover {
	background: var(--um-accent-hover);
	color: #fff;
}

.um-about-body {
	max-width: 700px;
	margin: 56px auto;
	font-size: 1.02rem;
	line-height: 1.7;
	color: var(--um-ink);
}

.um-about-preview {
	margin-top: 56px;
	padding-top: 8px;
}

.um-about-section-title {
	font-size: 1.4rem;
	font-weight: 700;
	margin-bottom: 20px;
	letter-spacing: -0.02em;
}

@media (max-width: 640px) {
	.um-about-headline {
		font-size: 2rem;
	}
	.um-about-hero {
		padding: 48px 16px 40px;
	}
}

.um-nav-links {
	display: flex;
	gap: 24px;
	flex: 1;
	margin-left: 24px;
}

.um-nav-links a {
	color: var(--um-ink-soft);
	text-decoration: none;
	font-size: 0.92rem;
	font-weight: 500;
}

.um-nav-links a:hover {
	color: var(--um-ink);
}

.um-nav-right {
	display: flex;
	align-items: center;
	gap: 18px;
}

.um-lang-switch {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 0.82rem;
	color: var(--um-ink-soft);
}

.um-lang-switch a {
	color: var(--um-ink-soft);
	text-decoration: none;
	padding: 2px 4px;
}

.um-lang-switch a.active {
	color: var(--um-accent);
	font-weight: 700;
}

.um-nav-cart {
	position: relative;
	text-decoration: none;
	font-size: 1.05rem;
}

.um-cart-count {
	position: absolute;
	top: -6px;
	right: -10px;
	background: var(--um-accent);
	color: #fff;
	font-size: 0.65rem;
	font-family: var(--um-font);
	padding: 1px 5px;
	border-radius: 20px;
}

.um-nav-user {
	font-size: 0.88rem;
	color: var(--um-ink-soft);
}

.um-nav-button {
	background: var(--um-ink);
	color: #fff;
	text-decoration: none;
	padding: 8px 16px;
	border-radius: 6px;
	font-size: 0.88rem;
	font-weight: 500;
}

.um-nav-button:hover {
	background: var(--um-accent);
	color: #fff;
}

/* ================= FOOTER ================= */

.um-site-footer {
	border-top: 1px solid var(--um-border);
	margin-top: 60px;
	padding: 24px;
	font-family: var(--um-font);
}

.um-footer-inner {
	max-width: 1200px;
	margin: 0 auto;
	color: var(--um-ink-soft);
	font-size: 0.85rem;
}

/* ================= SHARED PAGE SHELL ================= */

.um-entry-hall,
.um-hallway,
.um-course-page,
.um-auth-wrap {
	font-family: var(--um-font);
	color: var(--um-ink);
	max-width: 1200px;
	margin: 0 auto;
	padding: 48px 24px;
}

.um-hall-title {
	font-size: 1.9rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin-bottom: 36px;
}

/* ================= CARDS (shared grid pattern) ================= */

.um-university-grid,
.um-course-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 20px;
}

.um-university-card,
.um-course-card {
	display: block;
	background: var(--um-paper);
	border: 1px solid var(--um-border);
	border-radius: var(--um-radius);
	overflow: hidden;
	text-decoration: none;
	color: var(--um-ink);
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.um-university-card:hover,
.um-course-card:hover {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
	border-color: var(--um-accent);
}

.um-card-image {
	position: relative;
	aspect-ratio: 16 / 10;
	background: #fff;
	overflow: hidden;
}

/* Cards lift slightly and the artwork scales a touch on hover — enough to
   feel responsive without becoming a distraction on a page of nine. */
.um-university-card .um-card-img,
.um-course-card .um-card-img {
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.um-university-card:hover .um-card-img,
.um-course-card:hover .um-card-img {
	transform: scale(1.035);
}

.um-card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.um-card-icon {
	/* `cover` rather than `contain`: the icons are drawn at the card's own
	   16:10 ratio, so they fill the slot edge to edge instead of leaving
	   grey letterbox bars either side. */
	object-fit: cover;
	background: #fff;
	padding: 0;
}

.um-card-abbr {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--um-accent);
	letter-spacing: 0.3px;
	margin: 0 0 4px;
}

.um-card-body {
	padding: 16px 18px;
}

.um-card-body h3,
.um-card-body h4 {
	margin: 0 0 4px;
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: -0.01em;
}

.um-card-meta,
.um-card-instructor {
	font-size: 0.82rem;
	color: var(--um-ink-soft);
	margin: 0 0 4px;
}

.um-card-price {
	font-weight: 600;
	color: var(--um-ink);
	margin: 8px 0 0;
	font-size: 0.92rem;
}

.um-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	padding: 3px 10px;
	font-size: 0.68rem;
	border-radius: 20px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	font-weight: 600;
}

.um-badge-enrolled {
	background: var(--um-accent);
	color: #ffffff;
}

/* ================= HALLWAY ================= */

.um-hallway {
	display: block;
}

.um-hallway-header {
	margin-bottom: 24px;
}

.um-hallway-title {
	font-size: 1.9rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0 0 6px;
}

.um-hallway-sub {
	font-size: 0.88rem;
	color: var(--um-ink-soft);
	margin: 0;
}

.um-dept-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-bottom: 20px;
	margin-bottom: 28px;
	border-bottom: 1px solid var(--um-border);
}

.um-dept-tab {
	background: transparent;
	border: 1px solid var(--um-border);
	border-radius: 999px;
	padding: 9px 18px;
	font-family: var(--um-font);
	font-size: 0.88rem;
	font-weight: 500;
	color: var(--um-ink-soft);
	cursor: pointer;
	transition: all 0.12s ease;
	line-height: 1.3;
}

.um-dept-tab:hover {
	border-color: var(--um-ink-soft);
	color: var(--um-ink);
}

.um-dept-tab.is-active {
	background: var(--um-ink);
	border-color: var(--um-ink);
	color: #fff;
	font-weight: 600;
}

/* "All Courses" reads as the default/reset option, so it gets its own
   treatment and a divider separating it from the department list. */
.um-dept-tab-all {
	font-weight: 600;
	color: var(--um-accent);
	border-color: var(--um-accent);
	margin-right: 8px;
	position: relative;
}

.um-dept-tab-all::after {
	content: "";
	position: absolute;
	right: -12px;
	top: 20%;
	height: 60%;
	width: 1px;
	background: var(--um-border);
}

.um-dept-tab-all:hover {
	background: #eef1ff;
	border-color: var(--um-accent);
	color: var(--um-accent);
}

.um-dept-tab-all.is-active {
	background: var(--um-accent);
	border-color: var(--um-accent);
	color: #fff;
}

.um-course-results {
	transition: opacity 0.15s ease;
	min-height: 120px;
}

.um-empty {
	color: var(--um-ink-soft);
}

/* ================= COURSE PAGE ================= */

.um-breadcrumb {
	font-size: 0.82rem;
	color: var(--um-ink-soft);
	margin-bottom: 20px;
}

.um-breadcrumb a {
	color: var(--um-ink-soft);
	text-decoration: none;
}

.um-course-header h1 {
	font-size: 1.8rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin-bottom: 10px;
}

.um-course-meta-row {
	display: flex;
	gap: 24px;
	font-size: 0.88rem;
	color: var(--um-ink-soft);
	margin-bottom: 32px;
}

.um-course-layout {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 40px;
	align-items: start;
}

.um-course-featured-image img {
	width: 100%;
	border-radius: var(--um-radius);
	margin-bottom: 24px;
}

.um-course-locked-preview {
	position: relative;
}

.um-lock-notice {
	background: var(--um-surface);
	border: 1px dashed var(--um-border);
	border-radius: var(--um-radius);
	padding: 16px;
	margin-top: 16px;
	font-size: 0.92rem;
	color: var(--um-ink-soft);
}

.um-course-sidebar {
	position: sticky;
	top: 90px;
}

.um-enroll-box {
	background: var(--um-ink);
	color: #fff;
	border-radius: var(--um-radius);
	padding: 24px;
	text-align: center;
}

.um-price-display {
	font-size: 1.7rem;
	font-weight: 700;
	margin: 0 0 16px;
}

.um-enroll-button {
	background: var(--um-accent);
	color: #fff;
	border: none;
	padding: 13px 24px;
	width: 100%;
	font-size: 0.95rem;
	font-family: var(--um-font);
	font-weight: 600;
	border-radius: 6px;
	cursor: pointer;
}

.um-enroll-button:hover {
	background: var(--um-accent-hover);
}

.um-enrolled-state,
.um-notice {
	font-size: 0.92rem;
}

/* ================= CURRICULUM / LESSONS ================= */

.um-curriculum {
	margin-top: 44px;
}

.um-curriculum-title {
	font-size: 1.3rem;
	font-weight: 700;
	margin-bottom: 18px;
}

.um-lesson {
	border: 1px solid var(--um-border);
	border-radius: var(--um-radius);
	margin-bottom: 14px;
	overflow: hidden;
}

.um-lesson-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	background: var(--um-surface);
}

.um-lesson-number {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--um-ink);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8rem;
	font-weight: 700;
	flex-shrink: 0;
}

.um-lesson-title {
	margin: 0;
	font-size: 0.98rem;
	font-weight: 600;
	flex: 1;
}

.um-badge-preview {
	background: var(--um-accent);
	color: #fff;
	font-size: 0.68rem;
	font-weight: 600;
	text-transform: uppercase;
	padding: 3px 9px;
	border-radius: 20px;
}

.um-lesson-lock {
	opacity: 0.5;
}

.um-lesson-locked .um-lesson-header {
	opacity: 0.6;
}

.um-lesson-body {
	padding: 20px;
}

.um-lesson-video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 16px;
	background: #000;
}

.um-lesson-video iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

.um-lesson-text {
	font-size: 0.94rem;
	line-height: 1.6;
	color: var(--um-ink);
}

.um-lesson-exercise {
	margin-top: 16px;
	background: var(--um-surface);
	border-radius: 8px;
	padding: 14px 16px;
}

.um-exercise-label {
	font-weight: 700;
	font-size: 0.88rem;
	margin: 0 0 6px;
}

.um-exercise-download {
	display: inline-block;
	margin-top: 8px;
	background: var(--um-ink);
	color: #fff;
	text-decoration: none;
	font-size: 0.85rem;
	font-weight: 600;
	padding: 8px 16px;
	border-radius: 6px;
}

.um-exercise-download:hover {
	background: var(--um-accent);
}

/* ================= AUTH / LOGIN ================= */

.um-auth-panels {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	max-width: 800px;
	margin: 0 auto;
}

.um-auth-panel {
	background: var(--um-paper);
	border: 1px solid var(--um-border);
	border-radius: var(--um-radius);
	padding: 32px;
}

.um-auth-panel h2 {
	font-size: 1.25rem;
	margin-top: 0;
	margin-bottom: 20px;
}

.um-auth-panel label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	margin: 14px 0 6px;
	color: var(--um-ink-soft);
}

.um-auth-panel input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--um-border);
	border-radius: 6px;
	font-size: 0.92rem;
	box-sizing: border-box;
}

.um-auth-panel input:focus {
	outline: none;
	border-color: var(--um-accent);
}

.um-auth-button {
	width: 100%;
	margin-top: 20px;
	padding: 12px;
	background: var(--um-accent);
	color: #fff;
	border: none;
	border-radius: 6px;
	font-size: 0.92rem;
	font-weight: 600;
	cursor: pointer;
}

.um-auth-button:hover {
	background: var(--um-accent-hover);
}

.um-auth-button-secondary {
	background: var(--um-ink);
}

.um-auth-error {
	background: #fdeceb;
	color: #b3261e;
	border-radius: 6px;
	padding: 10px 14px;
	font-size: 0.85rem;
	margin-bottom: 4px;
}

.um-auth-secondary-link {
	text-align: center;
	margin-top: 14px;
}

.um-auth-secondary-link a {
	font-size: 0.85rem;
	color: var(--um-ink-soft);
}

/* ================= POST-PURCHASE CONFIRMATION ================= */

.um-enrollment-confirmation {
	max-width: 600px;
	margin: 40px auto;
	background: var(--um-surface);
	border: 1px solid var(--um-border);
	border-radius: var(--um-radius);
	padding: 32px;
	text-align: center;
	font-family: var(--um-font);
}

.um-enrollment-confirmation h2 {
	margin-top: 0;
}

.um-enrollment-confirmation ul {
	list-style: none;
	padding: 0;
	margin: 16px 0 24px;
}

.um-enrollment-confirmation li {
	margin-bottom: 8px;
}

.um-enrollment-confirmation a.um-nav-button {
	display: inline-block;
}

@media (max-width: 768px) {
	.um-hallway,
	.um-course-layout,
	.um-auth-panels {
		grid-template-columns: 1fr;
	}
	.um-nav-links {
		display: none;
	}
}

/* ================= THEME TITLE SUPPRESSION ================= */
/* The theme prints its own page title above our shortcode output, which
   duplicates or contradicts the heading the shortcode already renders
   (e.g. a literal "Hallway" above the university name). Hidden only on
   pages this plugin owns, so the rest of the site is untouched. */

body.um-page .entry-title,
body.um-page .page-title,
body.um-page .ast-archive-title,
body.um-page header.entry-header,
body.um-page .entry-header .entry-title {
	display: none !important;
}


/* ================= BRAND ACCENTS ================= */

.um-about-hero {
	border-bottom: 1px solid var(--um-border);
}

.um-about-headline {
	color: var(--um-ink);
}

.um-dept-tab-all {
	color: var(--um-accent);
	border-color: var(--um-accent);
}

.um-dept-tab-all:hover {
	background: var(--um-accent-soft);
	border-color: var(--um-accent);
	color: var(--um-accent);
}

.um-card-abbr {
	color: var(--um-accent);
}

.um-lesson-number {
	background: var(--um-accent);
}

.um-badge-preview {
	background: var(--um-accent-tint);
	color: var(--um-accent);
}

.um-lock-notice {
	background: var(--um-accent-tint);
	border: 1px solid #d6e5df;
	color: #234a3f;
}

.um-enroll-box {
	background: var(--um-accent);
}

.um-enroll-button {
	background: var(--um-accent);
	color: #ffffff;
}

.um-enroll-button:hover {
	background: var(--um-accent-hover);
}

/* ================= THEME HEADER SUPPRESSION ================= */
/* The plugin renders its own site-wide nav via wp_body_open, which sits
   above the active theme's header — producing two stacked bars. Since the
   plugin nav fully replaces it (logo, menu, language, cart, account), the
   theme's header and its page-title banner are hidden.
   Covers Astra plus the common WordPress default-theme selectors. */

.um-site-nav ~ #masthead,
.um-site-nav ~ .site-header,
body #masthead,
body header.site-header,
body .ast-main-header-wrap,
body .ast-above-header-wrap,
body .ast-below-header-wrap,
body .ast-mobile-header-wrap,
body .site-header .site-branding,
body .wp-block-template-part header,
body .ast-single-entry-banner,
body .ast-page-header,
body .page-header,
body .ast-archive-description {
	display: none !important;
}

/* Themes often reserve top spacing for their own sticky header. With that
   header gone the gap reads as a broken empty band, so it's reclaimed. */
body .site-content,
body #content,
body .ast-container > .site-content {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

/* ================= CURRICULUM SECTIONS ================= */

.um-curriculum-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 20px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--um-border);
}

.um-curriculum-head .um-curriculum-title {
	margin: 0;
}

.um-curriculum-count {
	font-size: 0.85rem;
	color: var(--um-ink-soft);
}

.um-section-title {
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.9px;
	color: var(--um-accent);
	margin: 28px 0 12px;
}

.um-section-title:first-of-type {
	margin-top: 8px;
}

.um-lesson-locked .um-lesson-header {
	opacity: 0.55;
}

.um-lesson-title {
	margin: 0;
	font-size: 0.98rem;
	font-weight: 600;
	flex: 1;
}

/* ================= ENROLLMENT STATES ================= */

.um-enrolled-banner {
	background: var(--um-accent-soft);
	border: 1px solid var(--um-accent);
	color: #0a4536;
	border-radius: var(--um-radius);
	padding: 14px 18px;
	margin-bottom: 24px;
	font-size: 0.95rem;
	font-family: var(--um-font);
}

a.um-enroll-button {
	display: block;
	text-decoration: none;
	text-align: center;
	box-sizing: border-box;
}

.um-sidebar-link {
	display: inline-block;
	margin-top: 14px;
	color: #fff;
	font-size: 0.85rem;
	text-decoration: underline;
	opacity: 0.9;
}

.um-sidebar-link:hover {
	color: #fff;
	opacity: 1;
}

.um-nav-cart.has-items {
	position: relative;
	text-decoration: none;
	font-size: 1.05rem;
	margin-right: 4px;
}

/* ================= LESSON CONTENT TYPOGRAPHY ================= */

.um-lesson-text ul,
.um-exercise-text ul {
	padding-left: 20px;
	margin: 10px 0;
}

.um-lesson-text li,
.um-exercise-text li {
	margin-bottom: 6px;
	line-height: 1.6;
}

.um-lesson-text strong,
.um-exercise-text strong {
	color: var(--um-ink);
	font-weight: 700;
}

.um-lesson-text em,
.um-exercise-text em {
	color: var(--um-ink-soft);
}

.um-exercise-text {
	font-size: 0.93rem;
	line-height: 1.65;
}

.um-exercise-text p {
	margin: 0 0 10px;
}

.um-lesson-exercise {
	border-left: 3px solid var(--um-accent);
	border-radius: 0;
	background: var(--um-accent-tint);
}

.um-exercise-label {
	color: var(--um-accent);
}

.um-admin-note {
	background: var(--um-accent-tint);
	border: 1px solid #d6e5df;
	color: #234a3f;
	border-radius: var(--um-radius);
	padding: 10px 14px;
	font-size: 0.85rem;
	margin-bottom: 20px;
	font-family: var(--um-font);
}

/* ================= THEME FOOTER SUPPRESSION ================= */
/* The plugin renders its own footer via wp_footer, so the theme's footer
   (and its "Powered by" credit) would appear as a second, conflicting
   footer below it. Hidden for the same reason as the theme header. */

body .site-footer,
body #colophon,
body .ast-small-footer,
body .ast-footer-copyright,
body .ast-footer-overlay,
body footer.site-footer,
body .site-info {
	display: none !important;
}

/* Keep the plugin's own footer visible — it shares the `site-footer`
   naming convention with some themes, so it's re-shown explicitly. */
body .um-site-footer {
	display: block !important;
}

/* ================= CHAPTERS ================= */

.um-chapter {
	border: 1px solid var(--um-border);
	border-radius: var(--um-radius);
	margin-bottom: 14px;
	overflow: hidden;
}

.um-chapter-head {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	background: var(--um-surface);
}

.um-chapter-no {
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: var(--um-accent);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.9rem;
	font-weight: 700;
	flex-shrink: 0;
}

.um-chapter-title {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	flex: 1;
	line-height: 1.35;
	letter-spacing: -0.01em;
}

.um-chapter-meta {
	font-size: 0.78rem;
	color: var(--um-ink-soft);
	white-space: nowrap;
	flex-shrink: 0;
}

.um-chapter-body {
	padding: 8px 20px 16px;
}

.um-chapter-body .um-lesson {
	border: none;
	border-top: 1px solid var(--um-border);
	border-radius: 0;
	margin-bottom: 0;
}

.um-chapter-body .um-lesson:first-child {
	border-top: none;
}

.um-chapter-body .um-lesson-header {
	background: transparent;
	padding: 14px 0;
}

.um-chapter-body .um-lesson-number {
	width: auto;
	min-width: 34px;
	height: 22px;
	border-radius: 6px;
	background: transparent;
	color: var(--um-ink-soft);
	font-size: 0.8rem;
	font-weight: 600;
	justify-content: flex-start;
}

.um-chapter-body .um-lesson-body {
	padding: 0 0 18px 34px;
}

@media (max-width: 640px) {
	.um-chapter-meta { display: none; }
	.um-chapter-body { padding: 8px 14px 14px; }
	.um-chapter-body .um-lesson-body { padding-left: 0; }
}

/* ================= CHAPTER ROWS (course page) ================= */

.um-chapter-row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 20px;
	border: 1px solid var(--um-border);
	border-radius: var(--um-radius);
	margin-bottom: 10px;
	text-decoration: none;
	color: var(--um-ink);
	background: var(--um-paper);
	transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.um-chapter-row:hover {
	border-color: var(--um-accent);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
	color: var(--um-ink);
}

.um-chapter-row.is-empty {
	opacity: 0.62;
}

.um-chapter-main {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.um-chapter-row .um-chapter-title {
	font-size: 0.98rem;
	font-weight: 600;
	line-height: 1.35;
}

.um-chapter-row .um-chapter-meta {
	font-size: 0.78rem;
	color: var(--um-ink-soft);
}

.um-chapter-arrow {
	color: var(--um-ink-soft);
	flex-shrink: 0;
	font-size: 1rem;
}

.um-chapter-row:hover .um-chapter-arrow {
	color: var(--um-accent);
}

/* ================= CHAPTER PAGE ================= */

.um-chapter-page {
	font-family: var(--um-font);
	color: var(--um-ink);
	max-width: 860px;
	margin: 0 auto;
	padding: 44px 24px;
}

.um-chapter-page-head {
	margin-bottom: 30px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--um-border);
}

.um-chapter-eyebrow {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.9px;
	color: var(--um-accent);
	margin: 0 0 8px;
}

.um-chapter-page-title {
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.25;
	margin: 0;
}

.um-chapter-intro {
	margin-top: 14px;
	color: var(--um-ink-soft);
	font-size: 0.96rem;
	line-height: 1.6;
}

/* ---- Subchapter accordion ---- */

.um-sub {
	border: 1px solid var(--um-border);
	border-radius: var(--um-radius);
	margin-bottom: 10px;
	overflow: hidden;
}

.um-sub.is-open {
	border-color: var(--um-accent);
}

.um-sub-toggle {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 16px 18px;
	background: var(--um-paper);
	border: none;
	font-family: var(--um-font);
	font-size: 0.95rem;
	text-align: left;
	cursor: pointer;
	color: var(--um-ink);
}

.um-sub-toggle:hover:not(:disabled) {
	background: var(--um-surface);
}

.um-sub-toggle:disabled {
	cursor: default;
	opacity: 0.55;
}

.um-sub.is-open .um-sub-toggle {
	background: var(--um-accent-soft);
}

.um-sub-no {
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--um-accent);
	min-width: 34px;
	flex-shrink: 0;
}

.um-sub-title {
	flex: 1;
	font-weight: 500;
	line-height: 1.4;
}

.um-sub-chevron {
	color: var(--um-ink-soft);
	transition: transform 0.15s ease;
	flex-shrink: 0;
}

.um-sub.is-open .um-sub-chevron {
	transform: rotate(180deg);
}

.um-sub-lock {
	flex-shrink: 0;
	opacity: 0.6;
}

.um-sub-panel {
	padding: 20px 18px 22px;
	border-top: 1px solid var(--um-border);
}

.um-sub-panel[hidden] {
	display: none;
}

/* ---- Locked CTA + chapter navigation ---- */

.um-chapter-locked-cta {
	margin-top: 26px;
	padding: 22px;
	background: var(--um-surface);
	border: 1px solid var(--um-border);
	border-radius: var(--um-radius);
	text-align: center;
}

.um-chapter-locked-cta p {
	margin: 0 0 16px;
	color: var(--um-ink-soft);
	font-size: 0.94rem;
}

.um-chapter-locked-cta .um-enroll-button {
	display: inline-block;
	width: auto;
	padding: 12px 28px;
}

.um-chapter-nav {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: 36px;
	padding-top: 22px;
	border-top: 1px solid var(--um-border);
}

.um-chapter-nav-link {
	font-size: 0.88rem;
	color: var(--um-ink-soft);
	text-decoration: none;
	max-width: 45%;
	line-height: 1.4;
}

.um-chapter-nav-link:hover {
	color: var(--um-accent);
}

.um-chapter-nav-next {
	text-align: right;
}

@media (max-width: 640px) {
	.um-chapter-page-title { font-size: 1.4rem; }
	.um-chapter-row { padding: 14px 16px; gap: 12px; }
	.um-sub-panel { padding: 16px 14px 18px; }
}


/* ================= SCROLL REVEAL ================= */
/* Cards fade and rise into place as they enter the viewport. Purely
   decorative, so it degrades to "always visible" if JS never runs, and it
   is switched off entirely for anyone who has asked their OS to reduce
   motion. */

.um-reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.um-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.um-reveal,
	.um-reveal.is-visible {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.um-university-card:hover .um-card-img,
	.um-course-card:hover .um-card-img {
		transform: none;
	}
}



/* =========================================================
   FULL-PAGE STRIPE BACKDROP
   Tuning knobs — adjust these first.
   ========================================================= */

:root {
	--pstripe-w: 120px;      /* stripe thickness */
	--pstripe-gap: 260px;    /* distance between stripe centres */
	--pstripe-tilt: -14deg;  /* tilt */
	--pstripe-alpha: 0.14;   /* base opacity — text still sits over this */
}

.um-page-stripes {
	position: fixed;
	inset: -25vh -25vw;
	z-index: -1;
	pointer-events: none;
	transform: rotate(var(--pstripe-tilt));
	/* Scroll offset is written to this variable by JS. */
	--scroll-shift: 0px;
}

.um-pstripe {
	position: absolute;
	top: -10vh;
	height: 140vh;
	width: var(--pstripe-w);
	left: calc(var(--i) * var(--pstripe-gap));
	/* Each stripe wipes downward into place, staggered by index, so the
	   background assembles itself rather than simply being there. */
	clip-path: inset(0 0 100% 0);
	animation: um-stripe-in 1.05s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	animation-delay: calc(0.06s + (var(--i) * 0.09s));
	background: linear-gradient(
		180deg,
		rgba(15, 110, 86, calc(var(--pstripe-alpha) * 1.35)) 0%,
		rgba(15, 110, 86, var(--pstripe-alpha)) 50%,
		rgba(15, 110, 86, calc(var(--pstripe-alpha) * 0.55)) 100%
	);
	/* Alternating stripes shift at different rates, so scrolling produces
	   gentle parallax rather than the whole layer sliding as one block. */
	transform: translate3d(0, calc(var(--scroll-shift) * (1 + (var(--i) * 0.22))), 0);
	will-change: transform;
}

.um-pstripe:nth-child(even) {
	width: calc(var(--pstripe-w) * 0.42);
	--pstripe-alpha: 0.20;
}

/* Content must sit above the backdrop. */
.um-site-nav,
.um-site-footer,
.um-entry-hall,
.um-hallway,
.um-course-page,
.um-chapter-page,
.um-auth-wrap,
.um-about {
	position: relative;
	z-index: 1;
}

/* Cards and panels stay solid so text never fights the stripes. */
.um-university-card,
.um-course-card,
.um-chapter-row,
.um-sub,
.um-lesson,
.um-auth-panel {
	background: var(--um-paper);
}

.um-site-nav {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: saturate(180%) blur(10px);
	-webkit-backdrop-filter: saturate(180%) blur(8px);
}

/* ---- Hero (stripes now come from the page layer) ---- */

.um-about-hero {
	position: relative;
	padding: 92px 24px 76px;
	border-bottom: 1px solid var(--um-border);
}

.um-hero-content {
	position: relative;
	z-index: 2;
}

.um-about-headline {
	animation: um-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.um-about-subheadline {
	animation: um-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

.um-about-cta {
	animation: um-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
	box-shadow: 0 6px 18px rgba(15, 110, 86, 0.22);
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.um-about-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(15, 110, 86, 0.28);
}

@keyframes um-rise {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.um-pstripe {
		transform: none !important;
	}
	.um-about-headline,
	.um-about-subheadline,
	.um-about-cta {
		animation: none !important;
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 768px) {
	:root {
		--pstripe-w: 66px;
		--pstripe-gap: 150px;
	}
	.um-about-hero {
		padding: 62px 16px 54px;
	}
}


/* =========================================================
   PAGE ENTRANCE
   ========================================================= */

@keyframes um-stripe-in {
	from { clip-path: inset(0 0 100% 0); opacity: 0; }
	to   { clip-path: inset(0 0 0 0);    opacity: 1; }
}

/* Nav and content settle in just after the stripes begin, so the page
   builds in a deliberate order rather than everything arriving at once. */

.um-site-nav {
	animation: um-nav-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
}

@keyframes um-nav-in {
	from { opacity: 0; transform: translateY(-10px); }
	to   { opacity: 1; transform: none; }
}

.um-entry-hall,
.um-hallway,
.um-course-page,
.um-chapter-page,
.um-auth-wrap,
.um-about {
	animation: um-page-in 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.28s both;
}

@keyframes um-page-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

/* A thin green line sweeps across under the nav as the page settles —
   a single deliberate accent rather than a general flourish. */
.um-site-nav::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	height: 2px;
	width: 100%;
	background: var(--um-accent);
	transform-origin: left center;
	animation: um-sweep 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

@keyframes um-sweep {
	from { transform: scaleX(0); opacity: 1; }
	70%  { transform: scaleX(1); opacity: 1; }
	to   { transform: scaleX(1); opacity: 0.18; }
}

@media (prefers-reduced-motion: reduce) {
	.um-pstripe,
	.um-site-nav,
	.um-site-nav::after,
	.um-entry-hall,
	.um-hallway,
	.um-course-page,
	.um-chapter-page,
	.um-auth-wrap,
	.um-about {
		animation: none !important;
		clip-path: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}