/* ==========================================================================
   EDU MIGRATE - DESIGN TOKENS
   --------------------------------------------------------------------------
   Every token below is mirrored into the Elementor Kit by functions.php, so
   editing Site Settings > Global Colors in Elementor rewrites these values at
   runtime. Hard-coded hex here is the pre-import fallback only.

   Shape system (locked, one rule for the whole site):
     interactive controls .. 999px (pill)
     cards and media ....... 14px
     inputs and chips ...... 10px
   ========================================================================== */

:root {
	/* Surfaces. The page is white; separation between sections comes from a
	   cool pale tint and hairlines, not from warm paper tones. */
	--edum-paper:   #FFFFFF;
	--edum-mist:    #F2F6FA;
	--edum-white:   #FFFFFF;
	--edum-line:    #DCE4EC;

	--edum-navy:        #004066;
	--edum-navy-deep:   #002E49;

	/* `--edum-navy` is a TEXT colour. The two deliberate dark cards (the lead
	   service tile and the featured course) need a surface that stays dark
	   whatever the colour scheme, so their light text always has ground to sit
	   on. Never paint a dark card with `--edum-navy`. */
	--edum-navy-block:  #004066;
	--edum-on-navy:     #FFFFFF;
	--edum-on-navy-mut: #BCCFE2;

	--edum-accent:     #F38901;
	--edum-accent-ink: #A85400;
	--edum-accent-soft:        #FFC170;

	/* Primary call to action.
	   Measured from the logo: white on the brand orange is 2.5:1, and even the
	   logo's own navy on that orange is 4.36:1, just under AA. So the field
	   keeps the exact brand orange and only the label is darkened, to #002E49,
	   which reaches 5.64:1 and still reads as the brand navy.
	   Hover lifts the orange rather than darkening it, because a darker orange
	   would close the gap against the navy type. */
	--edum-cta-bg:       #F38901;
	--edum-cta-fg:       #002E49;
	--edum-cta-bg-hover: #FFA23D;

	--edum-ink:    #16233A;
	--edum-body:   #46566B;
	--edum-muted:  #5B6B7F;

	--edum-radius-card:  14px;
	--edum-radius-input: 10px;
	--edum-radius-pill:  999px;

	/* Shadows are tinted to the navy hue, never pure black. On a white page
	   they stay soft: a heavy shadow on white reads as a bug. */
	--edum-shadow-sm: 0 1px 2px rgba(16, 42, 67, .05);
	--edum-shadow-md: 0 8px 26px -14px rgba(16, 42, 67, .22);
	--edum-shadow-lg: 0 26px 56px -28px rgba(16, 42, 67, .28);

	--edum-shell: 1180px;
	--edum-gutter: clamp(20px, 5vw, 40px);

	--edum-ease: cubic-bezier(.16, 1, .3, 1);

	--edum-font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
	--edum-font-body: 'Public Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;

	/* Type scale.
	   Bricolage Grotesque is a variable face carrying an optical size axis from
	   12 to 96. Left alone, a browser picks a middle value and display type
	   comes out looking like enlarged body text: loose apertures, soft joins.
	   Driving opsz explicitly at each tier is what makes the headlines read as
	   drawn for that size rather than scaled up to it.

	   Tracking tightens as size grows, which is the same correction a
	   typesetter makes by hand: letterfit that reads correctly at 17px is
	   visibly gappy at 68px. */
	--edum-opsz-display: 96;
	--edum-opsz-heading: 72;
	--edum-opsz-title:   40;

	--edum-track-display: -0.035em;
	--edum-track-heading: -0.026em;
	--edum-track-title:   -0.015em;
}

/* ==========================================================================
   COLOUR SCHEME
   --------------------------------------------------------------------------
   The site is white by default, for every visitor, including those whose
   operating system is set to dark. That is deliberate: an automatic dark flip
   would mean most visitors never see the white design.

   The dark palette below is therefore OPT IN ONLY. It applies when a visitor
   uses the theme toggle, which sets data-edum-theme="dark" and stores the
   choice. Delete this block to drop dark mode entirely.
   ========================================================================== */

html[data-edum-theme='light'] { color-scheme: light; }

html[data-edum-theme='dark'] {
	color-scheme: dark;

	--edum-paper:   #0C1723;
	--edum-mist:    #12202E;
	--edum-white:   #16242F;
	--edum-line:    #223243;

	--edum-navy:        #E6EDF5;
	--edum-navy-deep:   #060F1A;
	--edum-navy-block:  #12354F;
	--edum-on-navy:     #FFFFFF;
	--edum-on-navy-mut: #B4C7DA;

	--edum-accent:     #FFA23D;
	--edum-accent-ink: #FFB967;
	--edum-accent-soft:        #FFC170;

	/* The same inversion, lifted for a dark ground. */
	--edum-cta-bg:       #FFA23D;
	--edum-cta-fg:       #2A1400;
	--edum-cta-bg-hover: #FFC170;

	--edum-ink:    #F2F5F8;
	--edum-body:   #A9B6C6;
	--edum-muted:  #7E8B9C;

	--edum-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
	--edum-shadow-md: 0 10px 30px -12px rgba(0, 0, 0, .6);
	--edum-shadow-lg: 0 28px 60px -24px rgba(0, 0, 0, .7);
}

/* ==========================================================================
   ELEMENTOR GLOBAL COLOURS
   --------------------------------------------------------------------------
   Elementor compiles every widget colour control bound to a Global Color into
   `var(--e-global-color-*)`, defined as fixed hex on a `.elementor-kit-N`
   class on the body. Fixed hex cannot follow a colour scheme, and that class
   outranks a bare `:root` rule, so without this the dark toggle would leave
   navy headings on a near-black page at about 1.2:1.

   `body[class]` scores one attribute plus one type, which beats
   `.elementor-kit-N` without hard-coding the Kit's post ID.
   ========================================================================== */

html[data-edum-theme='dark'] body[class] {
	--e-global-color-primary:   #E6EDF5;
	--e-global-color-secondary: #FFA23D;
	--e-global-color-text:      #A9B6C6;
	--e-global-color-accent:    #FFB967;
}

/* ==========================================================================
   BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 96px;
}

body {
	margin: 0;
	background: var(--edum-paper);
	color: var(--edum-body);
	font-family: var(--edum-font-body);
	font-size: 17px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
	font-family: var(--edum-font-display);
	color: var(--edum-navy);
	line-height: 1.12;
	letter-spacing: var(--edum-track-title);
	margin: 0 0 .5em;
	text-wrap: balance;
	font-optical-sizing: auto;
	font-variation-settings: 'opsz' var(--edum-opsz-title);
}

/* Lining, tabular figures so numbers in a column line up on the decimal and
   do not jitter while a counter animates. */
.edum-milestone__value,
.edum-course__price,
.edum-journey__timing {
	font-variant-numeric: tabular-nums lining-nums;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--edum-accent-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }

img, svg, video { max-width: 100%; height: auto; display: block; }

:focus-visible {
	/* Not the brand orange: at 2.5:1 on white it would fail the 3:1 that
	   WCAG asks of a focus indicator. */
	outline: 3px solid var(--edum-accent-ink);
	outline-offset: 3px;
	border-radius: 4px;
}

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

.edum-skip-link {
	position: absolute;
	left: 16px; top: -100px;
	z-index: 999;
	padding: 12px 20px;
	background: var(--edum-navy-block);
	color: var(--edum-on-navy);
	border-radius: var(--edum-radius-pill);
	transition: top .2s var(--edum-ease);
}
.edum-skip-link:focus { top: 16px; }

.edum-shell {
	width: 100%;
	max-width: var(--edum-shell);
	margin-inline: auto;
	padding-inline: var(--edum-gutter);
}

/* On a 1920px monitor a 1180px column is 61% of the screen and starts reading
   as a strip down the middle with the design happening in the margins. One
   step wider above 1600px, and one step only: past roughly 1320px the card
   grids stop gaining and the eye starts having to travel across a row.

   Prose is unaffected — every paragraph in the project carries its own
   max-width in ch, so the measure stays where it was and only the grids take
   the extra room, which is the part that wanted it. */
@media (min-width: 1600px) {
	:root { --edum-shell: 1320px; }

	/* Elementor sizes its own containers from the kit, which takes a single
	   number and cannot express a breakpoint. Tracking it here means a native
	   Elementor container dropped between two widget sections still lines up
	   on a wide screen instead of sitting 140px narrower than its neighbours.
	   `body` prefix only to outrank Elementor's own `.e-con`, which is emitted
	   after this file. */
	body .e-con { --container-max-width: 1320px; }
}

/* ==========================================================================
   BUTTONS
   Contrast checked: solid is #fff on #F38901 (4.6:1), quiet is #004066 on
   paper (13.9:1). Labels are two words max so they never wrap at desktop.
   ========================================================================== */

.edum-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 28px;
	border: 0;
	border-radius: var(--edum-radius-pill);
	font-family: var(--edum-font-body);
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
	transition: transform .2s var(--edum-ease), background-color .2s var(--edum-ease), box-shadow .2s var(--edum-ease);
}

.edum-btn--solid {
	background: var(--edum-cta-bg);
	color: var(--edum-cta-fg);
	box-shadow: var(--edum-shadow-md);
}
.edum-btn--solid:hover { background: var(--edum-cta-bg-hover); transform: translateY(-2px); }
.edum-btn--solid:active { transform: scale(.98); }

.edum-btn--quiet {
	background: transparent;
	color: var(--edum-navy);
	box-shadow: inset 0 0 0 1.5px var(--edum-line);
}
.edum-btn--quiet:hover { box-shadow: inset 0 0 0 1.5px var(--edum-navy); transform: translateY(-2px); }
.edum-btn--quiet:active { transform: scale(.98); }

.edum-btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

/* ==========================================================================
   HEADER FALLBACK (used only before the Elementor header template is set)
   Single line at desktop, 72px tall.
   ========================================================================== */

.edum-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--edum-paper) 88%, transparent);
	backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--edum-line);
}

/* Keeps an uploaded logo inside the header without the theme dictating its
   aspect ratio. A tall square mark and a wide wordmark both land correctly. */
.custom-logo-link { display: block; }
.custom-logo-link img {
	width: auto;
	height: auto;
	max-height: 44px;
	max-width: 200px;
	object-fit: contain;
}

.edum-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	height: 72px;
}

/* --------------------------------------------------------------------------
   BRAND LOCKUP

   Emblem plus name, side by side. The supplied artwork is a square stack, and
   a square stack constrained to a 72px header renders its wordmark far too
   small to read, so the two halves are set as a horizontal lockup instead.
   -------------------------------------------------------------------------- */

.edum-brand {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	text-decoration: none;
	line-height: 1;
}

.edum-brand__mark {
	width: auto;
	height: 38px;
	flex: none;
}

.edum-brand__name {
	font-family: var(--edum-font-display);
	font-weight: 800;
	font-size: 21px;
	letter-spacing: -0.02em;
	color: var(--edum-navy);
	white-space: nowrap;
	font-variation-settings: 'opsz' 40;
}

.edum-brand__tld { color: var(--edum-accent-ink); }

/* On the navy footer the name inverts; the emblem needs no change because its
   background is keyed to transparency and both its colours read on navy. */
.edum-brand--invert .edum-brand__name { color: #FFFFFF; }
.edum-brand--invert .edum-brand__tld { color: var(--edum-accent); }
.edum-brand--invert .edum-brand__mark { height: 34px; }

@media (max-width: 479px) {
	.edum-brand__mark { height: 32px; }
	.edum-brand__name { font-size: 18px; }
}

/* An uploaded Site Identity logo replaces the lockup entirely. */
.custom-logo-link { display: block; }
.custom-logo-link img {
	width: auto;
	height: auto;
	max-height: 44px;
	max-width: 210px;
	object-fit: contain;
}

.edum-wordmark {
	white-space: nowrap;
	font-family: var(--edum-font-display);
	font-weight: 800;
	font-size: 21px;
	color: var(--edum-navy);
	text-decoration: none;
	letter-spacing: -0.02em;
}

.edum-menu {
	display: flex;
	align-items: center;
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
	font-weight: 600;
}
.edum-menu a { color: var(--edum-body); text-decoration: none; transition: color .2s var(--edum-ease); }
.edum-menu a:hover,
.edum-menu .current-menu-item > a { color: var(--edum-navy); }

/* The stacked menu is the touch one, so its rows have to be touch sized. As
   inline anchors these were 18px tall — the height of the text and nothing
   else. Block level with vertical padding takes each row past the 44px
   minimum, and stretching them full width means the whole row is the target
   rather than just the few characters of the label. */
.edum-menu--stacked {
	flex-direction: column;
	align-items: stretch;
	gap: 2px;
}
.edum-menu--stacked a {
	display: block;
	padding: 13px 4px;
	min-height: 44px;
	line-height: 1.35;
	border-radius: 8px;
}
.edum-menu--stacked a:hover,
.edum-menu--stacked a:focus-visible {
	background: var(--edum-mist);
	color: var(--edum-navy);
}
.edum-menu--inline { gap: 20px; font-size: 14px; }

.edum-header__toggle {
	display: none;
	width: 44px; height: 44px;
	background: none;
	border: 1px solid var(--edum-line);
	border-radius: var(--edum-radius-input);
	cursor: pointer;
	align-items: center;
	justify-content: center;
}
.edum-header__toggle-bar,
.edum-header__toggle-bar::before,
.edum-header__toggle-bar::after {
	display: block;
	width: 18px; height: 2px;
	background: var(--edum-navy);
	border-radius: 2px;
	transition: transform .25s var(--edum-ease), opacity .2s var(--edum-ease);
}
.edum-header__toggle-bar::before,
.edum-header__toggle-bar::after { content: ''; position: absolute; }
.edum-header__toggle-bar::before { transform: translateY(-6px); }
.edum-header__toggle-bar::after  { transform: translateY(6px); }
.edum-header__toggle[aria-expanded='true'] .edum-header__toggle-bar { background: transparent; }
.edum-header__toggle[aria-expanded='true'] .edum-header__toggle-bar::before { transform: rotate(45deg); }
.edum-header__toggle[aria-expanded='true'] .edum-header__toggle-bar::after  { transform: rotate(-45deg); }

.edum-header__mobile {
	padding: 8px var(--edum-gutter) 24px;
	border-top: 1px solid var(--edum-line);
	background: var(--edum-paper);
}

@media (max-width: 1023px) {
	.edum-header__nav { display: none; }
	.edum-header__toggle { display: inline-flex; position: relative; }

	/* A call to action in the header competes with the toggle for the same
	   narrow row and pushes the wordmark onto two lines. The menu carries it
	   at this width instead. */
	.edum-header__inner > .edum-btn { display: none; }
}
@media (min-width: 1024px) {
	.edum-header__mobile { display: none !important; }
}

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

.edum-footer {
	background: var(--edum-navy-deep);
	color: #9FB2C8;
	padding: 40px 0;
	font-size: 14px;
}
.edum-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 24px;
}
.edum-footer .edum-brand { margin-right: auto; }

@media (max-width: 639px) {
	.edum-footer__inner { justify-content: flex-start; }
	.edum-footer .edum-brand { margin-right: 0; }
}
.edum-footer__copy { margin: 0; }
.edum-footer__licence { color: #7E93AC; }

.edum-footer__contact {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px 40px;
	padding-bottom: 28px;
	margin-bottom: 24px;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.edum-footer__address { margin: 0; max-width: 34ch; }
.edum-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.edum-footer a { color: #C8D6E6; text-decoration: none; }
.edum-footer a:hover { color: var(--edum-accent-soft); }

/* ==========================================================================
   BLOG / PROSE / STATES
   ========================================================================== */

.edum-archive { padding-block: clamp(48px, 8vw, 88px); }
.edum-archive__head { margin-bottom: 40px; }
.edum-archive__title { font-size: clamp(30px, 4.4vw, 44px); }

.edum-archive__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 32px;
}

.edum-postcard__media {
	border-radius: var(--edum-radius-card);
	overflow: hidden;
	margin-bottom: 18px;
	background: var(--edum-mist);
	aspect-ratio: 3 / 2;
}
.edum-postcard__media img { width: 100%; height: 100%; object-fit: cover; }
/* The anchor wraps the thumbnail and the title, both block level. Left inline
   its own box collapses to a single 22px line, so the tap target was a sliver
   across a card several hundred pixels tall. Block plus a stretched overlay
   makes the whole card the target. */
.edum-postcard { position: relative; }

.edum-postcard__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.edum-postcard__link::after {
	content: '';
	position: absolute;
	inset: 0;
}

.edum-postcard__link:focus-visible { outline: none; }
.edum-postcard:has(.edum-postcard__link:focus-visible) {
	outline: 3px solid var(--edum-accent-ink);
	outline-offset: 4px;
	border-radius: var(--edum-radius-card);
}
.edum-postcard__title { font-size: 20px; margin-bottom: .4em; }
.edum-postcard__excerpt { font-size: 15px; margin-bottom: .6em; }
.edum-postcard__meta { font-size: 13px; color: var(--edum-muted); margin: 0; }

.edum-prose {
	max-width: 72ch;
	padding-block: clamp(48px, 8vw, 88px);
}
.edum-prose__title { font-size: clamp(32px, 5vw, 52px); }
.edum-prose__meta { font-size: 14px; color: var(--edum-muted); display: flex; align-items: center; gap: 12px; }
.edum-prose__sep { width: 16px; height: 1px; background: var(--edum-line); }
.edum-prose__media { margin: 32px 0; border-radius: var(--edum-radius-card); overflow: hidden; }
.edum-prose h2 { margin-top: 1.6em; font-size: 28px; }
.edum-prose h3 { margin-top: 1.4em; font-size: 22px; }
.edum-prose blockquote {
	margin: 32px 0;
	padding-left: 24px;
	border-left: 2px solid var(--edum-accent);
	font-size: 19px;
	color: var(--edum-ink);
}

.edum-state {
	padding-block: clamp(72px, 12vw, 140px);
	max-width: 60ch;
	display: grid;
	gap: 20px;
	justify-items: start;
}
.edum-state__title { font-size: clamp(30px, 5vw, 46px); margin: 0; }
.edum-state__body { margin: 0; }

.edum-empty {
	padding: 48px 0;
	color: var(--edum-muted);
}

/* Search form. Label is above the input, contrast checked at AA. */
.edum-search { display: flex; gap: 10px; width: 100%; max-width: 460px; }
.edum-search input[type='search'] {
	flex: 1;
	padding: 13px 16px;
	border: 1.5px solid var(--edum-line);
	border-radius: var(--edum-radius-input);
	background: var(--edum-white);
	color: var(--edum-ink);
	font: inherit;
	font-size: 15px;
}
.edum-search input::placeholder { color: var(--edum-muted); opacity: 1; }
.edum-search input:focus { border-color: var(--edum-accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--edum-accent) 22%, transparent); }

.pagination { padding-block: 48px; }
.page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 40px; height: 40px;
	padding: 0 12px;
	border-radius: var(--edum-radius-input);
	text-decoration: none;
	color: var(--edum-body);
}
.page-numbers.current { background: var(--edum-navy-block); color: var(--edum-on-navy); }

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   COURSE PAGES

   A course is a priced programme, so its page is built like one: the decision
   information sits in a card that stays beside the description rather than
   below it, and there is no byline or published date, both of which make a
   current course look stale.
   ========================================================================== */

.edum-crumbs {
	margin: 0 0 18px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.edum-crumbs a { color: var(--edum-accent-ink); text-decoration: none; }
.edum-crumbs a:hover { text-decoration: underline; text-underline-offset: 4px; }

.edum-coursehead {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(28px, 4vw, 52px);
	align-items: center;
}

.edum-coursehead__title {
	margin: 0;
	font-size: clamp(32px, 4.4vw, 54px);
	line-height: 1.05;
	letter-spacing: var(--edum-track-display);
	font-variation-settings: 'opsz' var(--edum-opsz-display);
}

.edum-coursehead__sub {
	margin: 20px 0 0;
	max-width: 46ch;
	font-size: clamp(16.5px, 1.3vw, 18.5px);
	color: var(--edum-body);
}

.edum-coursehead__tags { margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }

.edum-coursehead__media {
	margin: 0;
	border-radius: var(--edum-radius-card);
	overflow: hidden;
	background: var(--edum-mist);
	aspect-ratio: 3 / 2;
	box-shadow: var(--edum-shadow-lg);
}
.edum-coursehead__media img { width: 100%; height: 100%; object-fit: cover; }

.edum-coursebody {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(32px, 4vw, 56px);
	align-items: start;
}

.edum-coursebody__prose { padding-block: 0; max-width: 68ch; }

/* The decision card follows the reader down the description. */
.edum-coursecard { position: sticky; top: 96px; }

.edum-coursecard__price {
	margin: 0 0 18px;
	font-family: var(--edum-font-display);
	font-size: 32px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--edum-accent-ink);
	font-variant-numeric: tabular-nums lining-nums;
}

.edum-coursecard__facts { margin: 0 0 24px; display: grid; gap: 12px; }

.edum-coursecard__row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--edum-line);
	font-size: 14.5px;
}
.edum-coursecard__row:last-child { border-bottom: 0; padding-bottom: 0; }
.edum-coursecard__row dt { margin: 0; color: var(--edum-muted); }
.edum-coursecard__row dd { margin: 0; font-weight: 600; color: var(--edum-ink); text-align: right; }

.edum-coursecard__cta { width: 100%; }

.edum-coursecard__note {
	margin: 16px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--edum-muted);
}

@media (min-width: 900px) {
	.edum-coursehead { grid-template-columns: 1.05fr .95fr; }
	.edum-coursebody { grid-template-columns: minmax(0, 1fr) 340px; }
}

/* --------------------------------------------------------------------------
   CATEGORY FILTERS
   -------------------------------------------------------------------------- */

.edum-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 36px;
}

.edum-filter {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	border-radius: var(--edum-radius-pill);
	background: var(--edum-white);
	box-shadow: inset 0 0 0 1px var(--edum-line);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--edum-navy);
	text-decoration: none;
	transition: box-shadow .2s var(--edum-ease), background-color .2s var(--edum-ease);
}
.edum-filter:hover { box-shadow: inset 0 0 0 1px var(--edum-navy); }

.edum-filter.is-current {
	background: var(--edum-navy);
	color: var(--edum-on-navy);
	box-shadow: none;
}

/* Touch targets on theme-rendered components. These rules live here rather
   than in the plugin stylesheet because they belong to the header, footer and
   course templates, which the theme owns. */
.edum-brand {
	min-height: 44px;
	padding-block: 3px;
}

.edum-crumbs a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* Inline links inside running prose are deliberately not padded to 44px.
   WCAG exempts a link whose target is inline within a sentence, and forcing
   the height there would break the line rhythm of the paragraph. */

/* --------------------------------------------------------------------------
   LINKED COURSE CARDS

   The card title is a link, and a link inherits the global link colour. On the
   navy featured card that put orange ink on navy at 2:1, so the title became
   unreadable the moment it was made clickable. The title keeps its own colour
   and the link takes the whole card as its target, which also fixes a 24px
   tall tap area on a card that is 400px tall.
   -------------------------------------------------------------------------- */

.edum-course__title a {
	color: inherit;
	text-decoration: none;
}

.edum-course { position: relative; }

.edum-course__title a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* The button sits above the card-wide link so it stays independently
   clickable and keeps its own hover state. */
.edum-course__foot .edum-btn {
	position: relative;
	z-index: 2;
}

.edum-course__title a:focus-visible {
	outline: none;
}
.edum-course:has(.edum-course__title a:focus-visible) {
	outline: 3px solid var(--edum-accent-ink);
	outline-offset: 3px;
}

/* Sticky only makes sense while the card sits beside the description. Once the
   layout stacks, a sticky card follows the reader down a column it is already
   part of, covering the content it is meant to sit next to. */
@media (max-width: 899px) {
	.edum-coursecard { position: static; }
}