/**
 * Element reset and base typography.
 *
 * Loaded after tokens.css and colors.css, before home.css. Everything the layout
 * assumes about default element behaviour is set here and nowhere else: border-box
 * sizing, zeroed margins, unstyled lists and links, block-level media.
 *
 * Still scoped to .edible-theme — which functions.php now puts on every page — so the
 * reset never reaches the admin bar or anything a plugin prints outside the document
 * body.
 *
 * @package Edible
 */

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

.edible-theme {
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	background-color: var(--color-white);
	color: var(--color-black);
	font-family: var(--font-sans);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Headings and flow elements inherit everything. The section classes in home.css and
   content.css are what give them size, weight and rhythm — never the tag. */
.edible-theme h1,
.edible-theme h2,
.edible-theme h3,
.edible-theme h4,
.edible-theme h5,
.edible-theme h6,
.edible-theme p,
.edible-theme ul,
.edible-theme ol,
.edible-theme figure,
.edible-theme blockquote {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-weight: inherit;
	font-size: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: none;
	color: inherit;
}

.edible-theme ul,
.edible-theme ol {
	list-style: none;
}

.edible-theme a {
	color: inherit;
	text-decoration: none;
	border: 0;
	transition: opacity 0.2s ease;
}

.edible-theme img,
.edible-theme video,
.edible-theme svg {
	max-width: 100%;
	height: auto;
	display: block;
	border: 0;
}

.edible-theme button,
.edible-theme input,
.edible-theme select,
.edible-theme textarea {
	font: inherit;
	color: inherit;
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
}

/* Visible focus everywhere. The burger, slider, expanders and filter bar are all
   keyboard-operable and none of them are native controls. */
.edible-theme a:focus-visible,
.edible-theme button:focus-visible,
.edible-theme input:focus-visible,
.edible-theme select:focus-visible,
.edible-theme [tabindex]:focus-visible {
	outline: 2px solid currentcolor;
	outline-offset: 3px;
}