/* ==========================================================================
   RESET
   ==========================================================================

   Generic, project-agnostic.

   Loaded first, by inc/enqueue.php.

   Philosophy: normalise the handful of defaults that are actively unhelpful,
   and leave the rest alone. This is not a "reset everything to zero" sheet —
   those force you to rebuild sensible defaults by hand and make it easy to
   ship a page with no heading hierarchy at all.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Box model
   -------------------------------------------------------------------------- */

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

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

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

body {
	margin: 0;
	min-height: 100vh;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* --------------------------------------------------------------------------
   Typographic defaults
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

/* Headings should not be scaled by the browser's own h1-in-section rules,
   and long unbroken words (URLs, German compounds) should not overflow. */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: inherit;
	font-weight: inherit;
	overflow-wrap: break-word;
}

p,
li,
dd,
figcaption {
	overflow-wrap: break-word;
}

/* Prevent the last line of a heading from sitting alone where supported. */
h1,
h2,
h3,
h4 {
	text-wrap: balance;
}

ul,
ol {
	margin: 0;
	padding: 0;
}

/* Lists that carry a `class` are components, not prose — strip their markers.
   Lists inside prose keep theirs, which is what you want in editor content. */
ul[class],
ol[class] {
	list-style: none;
}

blockquote,
q {
	quotes: none;
}

blockquote::before,
blockquote::after,
q::before,
q::after {
	content: "";
}

address {
	font-style: normal;
}

abbr[title] {
	text-decoration: underline dotted;
	cursor: help;
}

b,
strong {
	font-weight: bolder;
}

code,
kbd,
samp,
pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 1em;
}

small {
	font-size: 80%;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

hr {
	height: 0;
	color: inherit;
	border: 0;
	border-top: 1px solid currentColor;
	margin: 0;
}

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

a {
	color: inherit;
	background-color: transparent;
}

/* Links without an href are placeholders, not links. Make that visible in
   development rather than shipping a dead control. */
a:not([href]):not([class]),
a:not([href]):not([class]):hover {
	color: inherit;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Media

   `display: block` plus `max-width: 100%` is the single most useful line in
   any reset: it kills the mysterious few pixels of descender space under every
   image and stops media overflowing its container.
   -------------------------------------------------------------------------- */

img,
picture,
video,
canvas,
svg,
iframe {
	display: block;
	max-width: 100%;
}

img,
video {
	height: auto;
}

/* An <img> with width and height attributes but a constrained width would be
   squashed without this — required for CLS-safe explicit image dimensions. */
img[width][height] {
	height: auto;
}

svg {
	fill: currentColor;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: inherit;
	margin: 0;
	color: inherit;
}

button,
select {
	text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
	appearance: button;
	background-color: transparent;
	background-image: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	transition: color .3s ease-in;
}

:disabled {
	cursor: default;
}

textarea {
	resize: vertical;
}

::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

:-moz-focusring {
	outline: auto;
}

[type="search"] {
	-webkit-appearance: textfield;
	appearance: textfield;
	outline-offset: -2px;
}

::-webkit-search-decoration {
	-webkit-appearance: none;
}

::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

legend {
	padding: 0;
}

fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

progress {
	vertical-align: baseline;
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

table {
	border-collapse: collapse;
	border-color: inherit;
	text-indent: 0;
}

/* --------------------------------------------------------------------------
   Interactive
   -------------------------------------------------------------------------- */

summary {
	display: list-item;
	cursor: pointer;
}

[hidden] {
	display: none !important;
}

/* Native <dialog>: strip the UA's border and padding, keep the top-layer
   behaviour. Styling lives with the component in main.css. */
dialog {
	padding: 0;
	border: 0;
	max-width: 100%;
	max-height: 100%;
	background: transparent;
	color: inherit;
}

/* --------------------------------------------------------------------------
   Motion

   Anyone who has asked their OS to reduce motion gets near-instant transitions
   everywhere, without every component having to remember to opt in. Components
   that need genuinely different behaviour (the carousel's autoplay, the
   project filter's FLIP reflow) handle it in JS as well.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	html:focus-within {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}