/**
 * Modern CSS Reset
 *
Version: 3.3
 * Inspired by Jake Lazaroff (https://jakelazaroff.com/words/my-modern-css-reset/)
 * with WordPress-specific adjustments.
 *
 * @package Base_Theme
 * @since   1.0.0
 */

@layer reset {

	/* Use a better box model. */
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	/* Remove default margin and padding from everything. */
	* {
		margin: 0;
		padding: 0;
	}

	/* Enable animating to/from intrinsic sizing keywords (e.g. height: auto). */
	:root {
		interpolate-size: allow-keywords;
	}

	/* Sensible body defaults. */
	body {
		-webkit-text-size-adjust: 100%;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	/* Media elements: block-level, responsive by default. */
	:where(img, picture, video, canvas, svg) {
		display: block;
		max-inline-size: 100%;
	}

	/* Form controls inherit font and colour from parent. */
	:where(input, button, textarea, select) {
		font: inherit;
		letter-spacing: inherit;
		word-spacing: inherit;
		color: currentColor;
	}

	/* Prevent long words from overflowing containers. */
	:where(p, h1, h2, h3, h4, h5, h6) {
		overflow-wrap: break-word;
	}

	/* Remove default list styles. */
	:where(ol, ul) {
		list-style: none;
	}

}

/* -----------------------------------------------
 * Lists (content area only)
 * --------------------------------------------- */
main :where(ul, ol) {
	padding-left: 1.5em;
	list-style: revert;
}

/**
 * Base Theme - Utility classes.
 *
 * Minimal set of reusable helpers. Add project-specific utilities
 * in the child theme.
 *
 * @package Base_Theme
 * @since   1.0.0
 */

/* -----------------------------------------------
 * Screen-reader only (visually hidden)
 * --------------------------------------------- */
.screen-reader-text,
.sr-only {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	word-wrap: normal !important;
}

.screen-reader-text:focus,
.sr-only:focus {
	clip: auto;
	clip-path: none;
	display: block;
	height: auto;
	width: auto;
	position: static;
	overflow: visible;
	background: #fff;
	color: #1d2327;
	padding: 0.75em 1em;
	font-size: 1rem;
	z-index: 100000;
}

/* -----------------------------------------------
 * Skip link
 * --------------------------------------------- */
.skip-link {
	position: absolute;
	top: -100%;
	left: 50%;
	transform: translateX(-50%);
	background: #1d2327;
	color: #fff;
	padding: 0.5em 1em;
	z-index: 100000;
	text-decoration: none;
	border-radius: 0 0 4px 4px;
	transition: top 0.15s ease;
}

.skip-link:focus {
	top: 0;
}

/* -----------------------------------------------
 * Text alignment
 * --------------------------------------------- */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* -----------------------------------------------
 * Reduced motion (accessibility)
 * --------------------------------------------- */
@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;
	}
}

/* -----------------------------------------------
 * Forced colors / high contrast (accessibility)
 * --------------------------------------------- */
@media (forced-colors: active) {
	:focus-visible,
	.skip-link:focus {
		outline-color: CanvasText;
	}
}

:root {
    --text-wrap-headings: balance;
    --text-wrap-body: pretty;
    --leading-heading: clamp(1.1em, calc(1em + 0.25rem), 1.4em);
    --leading-body: clamp(1.3em, calc(1em + 0.5rem), 1.75em);
    --font-headings-family: 'Inter', serif;
    --font-headings-weight: 700;
    --font-body-family: 'Inter', sans-serif;
    --font-body-weight: 400;
    --font-buttons-family: 'Inter', sans-serif;
    --font-buttons-weight: 400;
    --font-h1-size: clamp(1.9438rem, calc(1.271vw + 1.6578rem), 2.9606rem);
    --font-h1-margin-bottom: 0.5lh;
    --font-h2-size: clamp(1.62rem, calc(0.7516vw + 1.4509rem), 2.2213rem);
    --font-h2-margin-bottom: 0.5lh;
    --font-h3-size: clamp(1.35rem, calc(0.3954vw + 1.261rem), 1.6663rem);
    --font-h3-margin-bottom: 0.5lh;
    --font-h4-size: clamp(1.125rem, calc(0.1563vw + 1.0898rem), 1.25rem);
    --font-h4-margin-bottom: 0.5lh;
    --font-h5-size: 0.9375rem;
    --font-h5-margin-bottom: 0.4lh;
    --font-h6-size: clamp(0.7038rem, calc(-0.0969vw + 0.8031rem), 0.7813rem);
    --font-h6-margin-bottom: 0.35lh;
    --font-body-size: clamp(1rem, calc(0.1563vw + 0.9648rem), 1.125rem);
    --font-size-xxl: clamp(1.728rem, calc(1.1709vw + 1.4646rem), 2.6647rem);
    --font-size-xl: clamp(1.44rem, calc(0.6988vw + 1.2828rem), 1.999rem);
    --font-size-l: clamp(1.2rem, calc(0.3745vw + 1.1157rem), 1.4996rem);
    --font-size-m: clamp(1rem, calc(0.1563vw + 0.9648rem), 1.125rem);
    --font-size-s: clamp(0.8333rem, calc(0.0134vw + 0.8303rem), 0.844rem);
    --font-size-xs: clamp(0.6331rem, calc(-0.0766vw + 0.7116rem), 0.6944rem);
    --font-size-xxs: clamp(0.475rem, calc(-0.1296vw + 0.6079rem), 0.5787rem);
}
html {
    font-size: 100%;
}
h1, :where(.h1), h2, :where(.h2), h3, :where(.h3), h4, :where(.h4), h5, :where(.h5), h6, :where(.h6) {
    text-wrap: var(--text-wrap-headings);
}
body {
    text-wrap: var(--text-wrap-body);
}
.entry__header .entry__title, .entry--empty .entry__title, .entry__content :where(h1, .h1, h2, .h2, h3, .h3) {
    max-width: 45ch;
}
.entry__content :where(h4, .h4, h5, .h5, h6, .h6) {
    max-width: 55ch;
}
.entry__content :where(p, li, blockquote), .entry--empty p {
    max-width: 65ch;
}
.entry__content p {
    margin-bottom: 1lh;
}
.entry__content :where(ul, ol) {
    padding-left: 3ch;
}
.entry__content li + li {
    margin-top: 0.5lh;
}
h1, :where(.h1), h2, :where(.h2), h3, :where(.h3), h4, :where(.h4), h5, :where(.h5), h6, :where(.h6) {
    font-family: var(--font-headings-family);
    font-weight: var(--font-headings-weight);
}
body {
    font-family: var(--font-body-family);
    font-weight: var(--font-body-weight);
    font-optical-sizing: auto;
}
button, input[type='submit'], .btn {
    font-family: var(--font-buttons-family);
    font-weight: var(--font-buttons-weight);
}
h1, :where(.h1) {
    font-size: var(--font-h1-size);
    line-height: var(--leading-heading);
    margin-bottom: var(--font-h1-margin-bottom);
}
h2, :where(.h2) {
    font-size: var(--font-h2-size);
    line-height: var(--leading-heading);
    margin-bottom: var(--font-h2-margin-bottom);
}
h3, :where(.h3) {
    font-size: var(--font-h3-size);
    line-height: var(--leading-heading);
    margin-bottom: var(--font-h3-margin-bottom);
}
h4, :where(.h4) {
    font-size: var(--font-h4-size);
    line-height: var(--leading-heading);
    margin-bottom: var(--font-h4-margin-bottom);
}
h5, :where(.h5) {
    font-size: var(--font-h5-size);
    line-height: var(--leading-heading);
    margin-bottom: var(--font-h5-margin-bottom);
}
h6, :where(.h6) {
    font-size: var(--font-h6-size);
    line-height: var(--leading-heading);
    margin-bottom: var(--font-h6-margin-bottom);
}
.text-xxl {
    font-size: var(--font-size-xxl);
    line-height: var(--leading-body);
}
.text-xl {
    font-size: var(--font-size-xl);
    line-height: var(--leading-body);
}
.text-l {
    font-size: var(--font-size-l);
    line-height: var(--leading-body);
}
.text-m {
    font-size: var(--font-size-m);
    line-height: var(--leading-body);
}
.text-s {
    font-size: var(--font-size-s);
    line-height: var(--leading-body);
}
.text-xs {
    font-size: var(--font-size-xs);
    line-height: var(--leading-body);
}
.text-xxs {
    font-size: var(--font-size-xxs);
    line-height: var(--leading-body);
}
body {
    font-size: var(--font-body-size);
    line-height: var(--leading-body);
}
:where(p, li, dd, dt, td, th, blockquote, figcaption, label, legend, address) {
    line-height: var(--leading-body);
}
:root {
    --img-min-height: 275px;
    --img-ratio-fullwidth: 16 / 9;
    --img-ratio-tallcard: 4 / 5;
    --img-ratio-widecard: 7 / 4;
}
:root {
    --box-shadow-s: 0 1px 2px rgba(0, 0, 0, 0.08);
    --box-shadow-m: 0 4px 10px rgba(0, 0, 0, 0.12);
    --box-shadow-l: 0 10px 25px rgba(0, 0, 0, 0.14);
    --box-shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.18);
}
:root {
    --breakpoint-xxl: 1640px;
    --breakpoint-xl: 1440px;
    --breakpoint-l: 1280px;
    --breakpoint-m: 1024px;
    --breakpoint-s: 768px;
    --breakpoint-xs: 480px;
    --breakpoint-xxs: 360px;
}
:root {
    --color-primary: #1d2327;
    --color-secondary: #636b72;
    --color-tertiary: #d1d5db;
}
:focus-visible, .skip-link:focus {
    outline: 2px solid #00a0d2;
    outline-offset: 2px;
}