/**
 * Base layer: document defaults, accessibility primitives, shared utilities.
 *
 * Colours, type scale and spacing all come from theme.json presets, which in
 * turn read the per-site --eco-rbc-* custom properties. Nothing here hard-codes
 * a brand colour.
 */

/* Document ------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* Honour "reduce motion" globally rather than per-component. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	margin: 0;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

img,
svg,
picture,
video {
	max-width: 100%;
}

img {
	height: auto;
}

/* Accessibility -------------------------------------------------------- */

/**
 * Focus ring. Applied to :focus-visible so pointer users don't see a ring on
 * click, but with a :focus fallback for browsers that lack :focus-visible.
 * The ring rides on the accent colour and carries an offset plus a white
 * shadow, so it stays visible on white, tinted and primary-coloured surfaces.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--custom--focus--color);
	outline-offset: var(--wp--custom--focus--offset);
	border-radius: 2px;
}

@supports not selector(:focus-visible) {
	:where(a, button, input, select, textarea, summary, [tabindex]):focus {
		outline: var(--wp--custom--focus--width) solid var(--wp--custom--focus--color);
		outline-offset: var(--wp--custom--focus--offset);
	}
}

/* On the primary-coloured nav and footer the accent may be too close in hue,
   so switch the ring to the on-primary colour there. */
.eco-rbc-nav :where(a, button):focus-visible,
.eco-rbc-footer :where(a, button):focus-visible {
	outline-color: var(--wp--preset--color--on-primary);
}

/* Visually hidden, still announced. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	word-wrap: normal !important;
}

/* Skip link: off-screen until focused, then pinned to the top-left. */
.skip-link {
	position: absolute;
	top: -100vh;
	left: 0;
	z-index: 1000;
	padding: 0.75rem 1.25rem;
	color: var(--wp--preset--color--on-accent);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	text-decoration: underline;
	background-color: var(--wp--preset--color--accent);
	border-radius: 0 0 4px 0;
}

/**
 * On focus the link has to undo .screen-reader-text as well as move into view —
 * the clip-path alone would keep it invisible.
 */
.skip-link:focus,
.skip-link:focus-visible {
	top: 0;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	outline-offset: -6px;
}

/* Anything the JS lands focus on programmatically shouldn't show a ring. */
[tabindex="-1"]:focus {
	outline: none;
}

/* Shared utilities ----------------------------------------------------- */

/**
 * Logo strips: the header lockup and the "A collaboration of" row.
 * Heights are capped rather than widths so logos of different aspect ratios
 * sit on a common optical baseline.
 */
.eco-rbc-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.eco-rbc-logos__item {
	display: flex;
	align-items: center;
	margin: 0;
}

.eco-rbc-logos__image {
	display: block;
	width: auto;
	object-fit: contain;
}

.eco-rbc-logos--header .eco-rbc-logos__image {
	max-height: var(--wp--custom--header--logo--height);
}

.eco-rbc-logos--partners {
	justify-content: center;
	gap: clamp(1.5rem, 5vw, 4rem);
}

.eco-rbc-logos--partners .eco-rbc-logos__image {
	max-height: 56px;
}

/* QA: the eCampusOntario wordmark, and any long horizontal wordmark wider
   than 4:1 (e.g. McGill | Desautels — flagged in inc/blocks.php), at ~62% of
   the shared logo height, so they sit level with the partner marks instead of
   dwarfing them. */
.eco-rbc-logos--header .eco-rbc-logos__item--ecampus .eco-rbc-logos__image,
.eco-rbc-logos--header .eco-rbc-logos__item--wide .eco-rbc-logos__image {
	max-height: calc(var(--wp--custom--header--logo--height) * 0.62);
}

.eco-rbc-logos--partners .eco-rbc-logos__item--ecampus .eco-rbc-logos__image,
.eco-rbc-logos--partners .eco-rbc-logos__item--wide .eco-rbc-logos__image {
	max-height: 35px;
}

.eco-rbc-logos__link {
	display: block;
	line-height: 0;
}

.eco-rbc-logos__empty {
	margin: 0;
	padding: 0.75rem 1rem;
	color: var(--wp--preset--color--contrast-muted);
	font-size: var(--wp--preset--font-size--small);
	border: 1px dashed var(--wp--preset--color--outline);
	border-radius: 4px;
}

@media (max-width: 599px) {
	.eco-rbc-logos--header .eco-rbc-logos__image {
		max-height: var(--wp--custom--header--logo--height-mobile);
	}

	.eco-rbc-logos--partners .eco-rbc-logos__image {
		max-height: 40px;
	}

	.eco-rbc-logos--partners .eco-rbc-logos__item--ecampus .eco-rbc-logos__image,
	.eco-rbc-logos--partners .eco-rbc-logos__item--wide .eco-rbc-logos__image {
		max-height: 25px;
	}

	.eco-rbc-logos--header .eco-rbc-logos__item--ecampus .eco-rbc-logos__image,
	.eco-rbc-logos--header .eco-rbc-logos__item--wide .eco-rbc-logos__image {
		max-height: calc(var(--wp--custom--header--logo--height-mobile) * 0.62);
	}
}

/* Buttons -------------------------------------------------------------- */

/**
 * theme.json styles the button element; these rules cover the bits it can't
 * express — the inline-flex needed to centre the label in a pill, and a
 * transition that respects the reduced-motion rule above.
 */
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px; /* WCAG 2.5.5 target size. */
	transition: background-color 150ms ease, color 150ms ease;
}

/* A secondary treatment for the header "Log In" button, which sits on white. */
.is-style-eco-rbc-nav-actions .wp-block-button__link {
	min-height: 40px;
	padding-block: 0.5rem;
	padding-inline: 1.5rem;
	font-size: var(--wp--preset--font-size--small);
}

/* Page regions sit flush ------------------------------------------------ */

/**
 * QA 1.5 / 1.18: white bands above and below the nav, and between the last
 * sections and the footer. They came from core's blockGap, which puts
 * margin-block-start on every non-first child of a "flow" container — here
 * the header/main/footer at the top level, the utility bar and nav inside the
 * header, and the full-width sections inside the front page's post content.
 * Each of those regions has its own background and its own padding, so any
 * gap between them shows as a stripe of page background. The `body` prefix
 * outranks core's `:root :where(...)` rule regardless of load order.
 * Plain pages are unaffected: their post content is nested inside a section,
 * not a direct child of <main>, so their paragraph spacing is kept.
 */
body .wp-site-blocks > *,
body .eco-rbc-header > *,
body #eco-rbc-main > *,
body #eco-rbc-main > .wp-block-post-content > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Section rhythm -------------------------------------------------------- */

/**
 * Half of the spacing--80/--60 presets, via calc() rather than picking a
 * different named step, so the fluid clamp() those presets carry keeps
 * scaling with the viewport instead of landing on a flat value.
 */
.eco-rbc-section {
	padding-block: calc(var(--wp--preset--spacing--80) / 2);
}

.eco-rbc-section--tight {
	padding-block: calc(var(--wp--preset--spacing--60) / 2);
}

/**
 * QA round 3: side margins. Every page section, the footnotes and the header
 * rows share one inset so their content lines up with Course Content: 7rem on
 * a wide screen (RBC's value), easing down to 1rem on a phone.
 *
 * Deliberately not done by redefining --wp--preset--spacing--60 to 7rem as
 * the QA note suggests: that preset also sets heading margins, section
 * padding-block and the Success Stories gap, which would all balloon. The
 * sections carry their old inset as an inline style from the block editor,
 * hence !important.
 */
.eco-rbc-section,
.eco-rbc-footnotes,
.eco-rbc-header__barwrap,
.eco-rbc-nav {
	padding-inline: clamp(1rem, 7.8vw, 7rem) !important;
}

/**
 * Mobile's own rhythm, untouched by the desktop/laptop halving above — this
 * was already sized down for a phone screen (see the git history), and the
 * request that prompted the halving above was scoped to laptop and desktop.
 */
@media (max-width: 599px) {
	.eco-rbc-section {
		padding-block: var(--wp--preset--spacing--50);
	}

	.eco-rbc-section--tight {
		padding-block: var(--wp--preset--spacing--40);
	}
}

/**
 * Headings that introduce a section are centred and given a little more room
 * beneath them than the default block gap.
 */
.eco-rbc-section__heading {
	margin-bottom: var(--wp--preset--spacing--60);
	font-weight: 600; /* QA round 3: H2 in LibreFranklin-SemiBold to match RBC (supersedes 1.14). */
	text-align: center;
}

/* Links ---------------------------------------------------------------- */

/* Give underlines enough clearance to stay legible under descenders. */
a {
	text-underline-offset: 0.15em;
}

/* Print ---------------------------------------------------------------- */

@media print {
	.eco-rbc-header,
	.eco-rbc-footer,
	.skip-link {
		display: none;
	}

	.eco-rbc-accordion__panel {
		display: block !important;
	}
}