/*
 * ============================================================================
 *  Knowadays — Design overrides
 * ============================================================================
 *  This is where design changes live. Plain CSS only — no SCSS, no build.
 *  It loads AFTER the parent theme's styles, so your rules win.
 *
 *  RULES OF THUMB
 *  - Style existing elements by their existing class names (inspect the page).
 *  - Keep selectors tight. Avoid bare tag selectors (a, p, div, button) that
 *    could leak into checkout / account / course pages.
 *  - Use !important only when a parent rule genuinely can't be beaten otherwise.
 *  - Never style checkout, account, or course/LMS internals here — that's the
 *    parent theme's job (payments, tracking, course logic). See CLAUDE.md.
 *
 *  HOW TO ADD A CHANGE
 *  1) Add a clearly-labelled block under the matching section below.
 *  2) Note what/where in the commit message.
 *  3) Preview on staging, then it goes to a pull request for review.
 * ============================================================================
 */

/* ---------------------------------------------------------------------------
 * 1. Design tokens (optional) — define brand values once, reuse below.
 *    These are placeholders; replace with real brand values when confirmed.
 * ------------------------------------------------------------------------- */
:root {
	/* --kd-color-primary: #0e7c6b; */
	/* --kd-radius-lg: 12px; */
	/* --kd-space-section: 4rem; */
}

/* ---------------------------------------------------------------------------
 * 2. Typography
 * ------------------------------------------------------------------------- */
/* e.g. adjust a heading's size/weight on marketing pages */

/* ---------------------------------------------------------------------------
 * 3. Colours & backgrounds
 * ------------------------------------------------------------------------- */

/* Header background — brand yellow.
 * The theme normally colours the header from the page's theme class
 * (.ui-theme-color--dark-green .l-header etc.), so !important is needed to win.
 * Text is set to the brand dark green, which is how the theme's own yellow
 * theme pairs them — otherwise pale-green nav text would vanish on yellow.
 * Course pages are excluded: their header is deliberately transparent over the
 * hero and only fills in on scroll. */
body:not(.single-courses) .l-header {
	background-color: #f4f677 !important;
	color: #204d51;
}

/* Landing-page headers start transparent over the hero and only gain a
 * background once condensed — keep that. */
body:not(.single-courses) .l-header--lp:not(.is-condensed) {
	background-color: transparent !important;
}

/* ---------------------------------------------------------------------------
 * 4. Spacing & layout (marketing / content pages)
 * ------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
 * 5. Buttons & links (presentation only — never change behaviour)
 * ------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
 * 6. Responsive tweaks
 * ------------------------------------------------------------------------- */