/* ========================================================================================
 * base.css - element resets and global typography (L2 layer, loads after tokens.css).
 * Ported from the design source's BASE block (docs/design-source/homepage-template.html,
 * search "BASE"), plus the scroll-behavior/link-hover rules from its later inline <style>
 * blocks. Selector rules only; no tokens defined here.
 * ======================================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth}
body{
	margin:0;
	background:var(--cd-ground);
	color:var(--cd-ink);
	font-family:var(--cd-font);
	font-size:var(--cd-body);
	line-height:1.65;
	-webkit-font-smoothing:antialiased;
	font-synthesis-weight:none;
}
h1,h2,h3,h4{color:var(--cd-ink-strong);margin:0;text-wrap:balance;font-weight:800}
h1{font-size:var(--cd-display);line-height:1.04;letter-spacing:-.025em}
h2{font-size:var(--cd-h2);line-height:1.14;letter-spacing:-.02em}
h3{font-size:var(--cd-h3);line-height:1.25;letter-spacing:-.015em}
h4{font-size:var(--cd-h4);line-height:1.35;letter-spacing:-.01em;font-weight:700}
p{margin:0}
a{color:var(--cd-ink-brand)}
a:hover{color:var(--cd-ink-strong)}
code,kbd{font-family:var(--cd-mono);font-size:.86em;font-variant-ligatures:none}
:focus-visible{outline:none;box-shadow:var(--cd-ring);border-radius:var(--cd-r-sm)}
hr{border:0;border-top:1px solid var(--cd-line);margin:0}
table{border-collapse:collapse}
img,svg{display:block;max-width:100%}

/* --- on-dark ---------------------------------------------------------------------------
 * Ancestor context for content sitting on a dark ground (.section--deep, .cta-band,
 * header, footer). Each component file adds its own on-dark rule for the parts it owns
 * (buttons in button.css, eyebrow in section-head.css, field labels in forms.css...);
 * this file only covers the generic heading/paragraph/link flip every component inherits.
 * ----------------------------------------------------------------------------------------- */
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:var(--cd-white)}
.on-dark p{color:var(--cd-ink-invert-muted)}
.on-dark a{color:var(--cd-white)}
.on-dark a:hover{color:var(--cd-ink-accent-invert)}

/* --- utility ------------------------------------------------------------------------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* .accent: inline word-level emphasis inside a heading (Task 10; ported from
   .cd-accent-word, docs/design-source/homepage-template.html/patients-template.html,
   search ".cd-accent-word"): "Train with the team the <accent>world</accent> trains
   with." Text color only, no weight/size change, so it reads as one continuous heading. */
.accent{color:var(--cd-ink-highlight)}

/* Breakpoint visibility (768px, the kit's tablet/phone split): the live course pages show
   per-day agenda cards on desktop and one "View Curriculum" summary card on phones. */
@media (max-width:767px){.hide-mobile{display:none !important}}
@media (min-width:768px){.show-mobile-only{display:none !important}}

/* .is-hidden: a generic JS-toggled show/hide state (a form swapped for its own success
   message, a picker sub-panel, ...) so a script never has to reach for inline
   style.display, which the kit's markup rule (no inline style except CSS custom
   properties) does not allow. */
.is-hidden{display:none}

/* Accent words on a deep ground take the Theme Colors accent (orange), as the live course
   pages do; the teal highlight would sink into the deep green. */
.on-dark .accent{color:var(--cd-ink-accent)}

/* --- screen-reader-text: WordPress core's visually-hidden utility ----------------------
 * Core, WooCommerce and plugin markup use it for labels meant for assistive tech only
 * (cart table headers, quantity labels, "Remove item"). WooCommerce's stylesheet used to
 * supply it; with that stylesheet removed (inc/commerce-assets.php) the kit owns it. */
.screen-reader-text{
	border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;margin:-1px;
	overflow:hidden;padding:0;position:absolute !important;word-wrap:normal !important;
}
.screen-reader-text:focus{
	clip:auto !important;clip-path:none;height:auto;width:auto;display:block;z-index:100000;
	top:5px;left:5px;padding:15px 23px 14px;background:var(--cd-white);color:var(--cd-ink-strong);
	font-size:var(--cd-small);font-weight:700;text-decoration:none;box-shadow:var(--cd-shadow-2);
}