/* Fonts — self-hosted Figtree variable (latin subset). */
@font-face {
	font-family: 'Figtree';
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url('../fonts/figtree/figtree-variable-latin.woff2') format('woff2');
}

@font-face {
	font-family: 'Figtree';
	font-style: italic;
	font-weight: 300 900;
	font-display: swap;
	src: url('../fonts/figtree/figtree-variable-italic-latin.woff2') format('woff2');
}

/* Reset */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

/* Anchored elements land below the sticky header. */
[id] {
	scroll-margin-top: calc(var(--wpus-header-height) + var(--wpus-space-4));
}

body {
	font-family: var(--wpus-font-sans);
	font-size: var(--wpus-text-base);
	font-weight: 400;
	line-height: 1.6;
	color: var(--wpus-text-80);
	background: var(--wpus-white);
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Same protection for the replaced/overflowing elements above misses. These
   render outside .entry-content too — a shortcode table, a code block on a
   Page — where nothing else caps their width. */
table,
pre,
iframe {
	max-width: 100%;
}

/* code.css only ships on single posts, so a <pre> anywhere else has no
   scroll container of its own. */
pre {
	overflow-x: auto;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--wpus-dark);
	font-weight: 700;
	line-height: 1.2;
	overflow-wrap: break-word;
}

h1 {
	font-size: var(--wpus-text-hero);
	line-height: 1.17;
	letter-spacing: -0.02em;
}

h2 {
	font-size: var(--wpus-text-5xl);
	letter-spacing: -0.01em;
}

h3 {
	font-size: var(--wpus-text-3xl);
}

h4 {
	font-size: var(--wpus-text-xl);
	font-weight: 600;
}

p {
	overflow-wrap: break-word;
}

a {
	color: var(--wpus-primary);
	text-decoration: none;
	transition: color var(--wpus-transition-fast);
}

a:hover,
a:focus {
	color: var(--wpus-primary-hover);
	text-decoration: underline;
}

ul,
ol {
	padding-left: 1.25em;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

/* Focus */
:focus-visible {
	outline: 3px solid var(--wpus-primary-80);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Layout primitives */
.container {
	width: 100%;
	max-width: var(--wpus-content);
	margin-inline: auto;
	padding-inline: var(--wpus-space-5);
}

.container--wide {
	max-width: var(--wpus-wide);
}

.container--narrow {
	max-width: 44rem;
	margin-inline: auto;
}

.text-center {
	text-align: center;
}

.section {
	padding-block: var(--wpus-space-16);
}

.section--tight {
	padding-block: var(--wpus-space-12);
}

.section--gray {
	background: var(--wpus-gray-50);
}

.section--dark {
	background: var(--wpus-dark);
}

.section--dark h2,
.section--dark h3 {
	color: var(--wpus-white);
}

.section--dark p {
	color: rgba(255, 255, 255, 0.8);
}

.section__intro {
	max-width: 46rem;
	margin-inline: auto;
	text-align: center;
	margin-bottom: var(--wpus-space-12);
}

.section__intro p {
	margin-top: var(--wpus-space-4);
	font-size: var(--wpus-text-lg);
	color: var(--wpus-text-60);
}

/* Intro used as a standalone slim band (e.g. the features wizard strip). */
.section__intro--band {
	margin-bottom: 0;
	padding-block: var(--wpus-space-8);
}

@media (min-width: 768px) {
	.section {
		padding-block: var(--wpus-space-24);
	}
}

/* Accessibility */
/* The hidden attribute must beat any author display rule (e.g. the
   display:grid drawer sub-lists), otherwise JS toggling .hidden is a no-op. */
[hidden] {
	display: none !important;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: var(--wpus-space-4);
	top: -100px;
	z-index: 200;
	background: var(--wpus-primary);
	color: var(--wpus-white);
	padding: var(--wpus-space-3) var(--wpus-space-5);
	border-radius: var(--wpus-radius-sm);
	transition: top var(--wpus-transition-fast);
}

.skip-link:focus {
	top: var(--wpus-space-4);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ------------------------------------------------------------------ *
 * Entry-content type scale — heading sizes and spacing inside post
 * and page content (.entry-content).
 * ------------------------------------------------------------------ */
.entry-content :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wpus-dark);
	font-weight: 700;
	line-height: 1.2;
	margin-top: var(--wpus-space-8);
	margin-bottom: var(--wpus-space-4);
}

.entry-content :where(h1) {
	font-size: var(--wpus-text-4xl);
}

.entry-content :where(h2) {
	font-size: var(--wpus-text-3xl);
}

.entry-content :where(h3) {
	font-size: var(--wpus-text-2xl);
}

.entry-content :where(h4) {
	font-size: var(--wpus-text-xl);
	font-weight: 600;
}

.entry-content :where(h5, h6) {
	font-size: var(--wpus-text-base);
	font-weight: 600;
}

.entry-content :where(h1, h2, h3, h4, h5, h6):first-child {
	margin-top: 0;
}

/* ------------------------------------------------------------------ *
 * WordPress core content classes — alignments, captions, sticky.
 * ------------------------------------------------------------------ */
.alignleft {
	float: left;
	margin: var(--wpus-space-1) var(--wpus-space-6) var(--wpus-space-4) 0;
}

.alignright {
	float: right;
	margin: var(--wpus-space-1) 0 var(--wpus-space-4) var(--wpus-space-6);
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

.wp-caption {
	max-width: 100%;
}

.wp-caption img {
	margin-inline: auto;
}

.wp-caption-text,
.gallery-caption {
	font-size: var(--wpus-text-sm);
	color: var(--wpus-text-60);
	text-align: center;
	margin-top: var(--wpus-space-2);
}

/* Sticky post — subtle primary ring on the listing card. */
.card.sticky {
	border-color: var(--wpus-primary-light);
	box-shadow: 0 0 0 3px var(--wpus-primary-light);
}