/* =============================================================================
   FILE: reset.css
   WHAT: A short, MODERN CSS reset. Every browser ships slightly different
         default styling for things like margins on <p>/<h1>, list bullet
         styles, image sizing, and form control fonts. This file "resets"
         those inconsistent defaults to a predictable, blank starting point,
         so the rest of our CSS (base.css, layout.css, etc.) behaves the
         same way in every browser.
   WHY "modern": older resets (like the famous Eric Meyer reset) zero out
         EVERYTHING including line-height and font, which then makes you
         re-declare it all yourself. This reset is intentionally smaller
         and only resets things that commonly cause bugs, leaving sensible
         browser behavior in place where it doesn't hurt.
   LOAD ORDER: loaded second, right after tokens.css (see inc/enqueue.php).
   ============================================================================= */

/* Every element (and ::before/::after pseudo-elements) uses "border-box"
   sizing: an element's declared width/height INCLUDES its padding and
   border. Without this, padding/border get ADDED on top of your declared
   width, which makes building layouts far more confusing than it needs
   to be. This is the single most common "reset" rule in modern CSS. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Remove the default margin browsers put on nearly every element. We
   re-add margin deliberately (and consistently, using our --space-*
   scale) in base.css/components.css instead of relying on each browser's
   own built-in guess at the "right" spacing. */
* {
	margin: 0;
}

/* html/body fill the full height of the browser window. This matters for
   layouts where the footer should stick to the bottom of the screen even
   on short pages (see .site-wrap / .site-footer rules in layout.css). */
html,
body {
	height: 100%;
}

/* Improves text rendering consistency and turns on font "kerning" and
   ligatures where the browser supports it -- small typographic polish. */
body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Images, SVGs, videos, and canvases default to block-level (not inline,
   which leaves a few pixels of mystery gap below them) and never exceed
   the width of their container -- this alone prevents most "image is
   wider than the phone screen" mobile bugs. */
img,
svg,
video,
canvas {
	display: block;
	max-width: 100%;
}

/* Form elements (buttons, inputs, selects, textareas) don't automatically
   inherit the page's font in every browser -- this line forces them to,
   so a <button> looks like it belongs on the same page as the text
   around it, instead of using the browser's generic system dialog font. */
button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

/* Remove the little arrow/triangle browsers put in front of a <details>
   element automatically -- our accordion component (see components.css)
   draws its own custom open/close indicator instead. */
summary {
	list-style: none;
	cursor: pointer;
}
summary::-webkit-details-marker {
	display: none;
}

/* Respect the user's OS-level "reduce motion" accessibility setting.
   If someone has told their operating system they get motion sickness
   from animations, we turn (almost) all CSS transitions/animations down
   to be nearly instant, site-wide, as a baseline safety net -- individual
   components (like scroll-reveal) do their OWN additional check too, but
   this catches anything we might have missed. */
@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;
	}
}