/*
 * Base tokens + reboot subset.
 * The custom-property names mirror /reference/styles.css :root verbatim so that
 * component CSS ported from the reference works unchanged. The same values are
 * exposed as theme.json presets for the editor UI.
 */
:root {
	--brand-primary: #e44e13;
	--black: #000;
	--brand-secondary: #2a3f4b;
	--brand-tertiary: #8c9095;
	--brand-background: #e8eaed;
	--brand-border: #d6d6d6;
	--white: #fff;
	--radius: 6px;
}

body {
	font-variation-settings: "opsz" 32;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin: 0;
}

main {
	overflow: hidden;
}

/*
 * Reboot subset (Bootstrap is dropped; these are the reboot rules the
 * reference layout depends on).
 */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/*
 * Reboot margins need to outrank WP's layout-gap rules
 * (`.wp-container-x > * { margin-block: 0 }`, specificity 0-1-0) — hence the
 * wrapper-class prefixes (frontend .wp-site-blocks, editor canvas
 * .editor-styles-wrapper), each 0-1-1.
 */
.wp-site-blocks h1, .wp-site-blocks h2, .wp-site-blocks h3,
.wp-site-blocks h4, .wp-site-blocks h5, .wp-site-blocks h6,
.editor-styles-wrapper h1, .editor-styles-wrapper h2, .editor-styles-wrapper h3,
.editor-styles-wrapper h4, .editor-styles-wrapper h5, .editor-styles-wrapper h6 {
	margin-top: 0;
	margin-bottom: 0.5rem;
}

.wp-site-blocks p,
.editor-styles-wrapper p {
	margin-top: 0;
	margin-bottom: 1rem;
}

.wp-site-blocks ul, .wp-site-blocks ol,
.editor-styles-wrapper ul, .editor-styles-wrapper ol {
	margin-top: 0;
	margin-bottom: 1rem;
}

li {
	color: #41505f;
	line-height: 1.75rem;
}

img, svg, video {
	vertical-align: middle;
}

img {
	max-width: 100%;
	height: auto;
}

img.fullsize {
	margin-bottom: 1rem;
	width: 100%;
	border-radius: var(--radius);
}

/* core/image puts the class on the <figure>, not the <img> */
.wp-site-blocks figure.fullsize,
.editor-styles-wrapper figure.fullsize {
	margin: 0 0 1rem;
	width: 100%;
}

.fullsize img {
	width: 100%;
	border-radius: var(--radius);
}

/*
 * Bootstrap-style stepped container. WP's constrained layout uses a single
 * contentSize cap, but the reference container steps per breakpoint — needed
 * for pixel parity at mid viewports. Applied via className "seal-container".
 */
.seal-container {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}

@media (max-width: 575px) {
	.seal-container {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

@media (min-width: 576px) {
	.seal-container { max-width: 540px; }
}

@media (min-width: 768px) {
	.seal-container { max-width: 720px; }
}

@media (min-width: 992px) {
	.seal-container { max-width: 960px; }
}

@media (min-width: 1200px) {
	.seal-container { max-width: 1140px; }
}

@media (min-width: 1400px) {
	.seal-container { max-width: 1320px; }
}

/* .container.content hairline frame */
.seal-container.is-style-content-frame,
.is-style-content-frame {
	border-left: 1px solid rgba(0, 0, 0, 0.1);
	border-right: 1px solid rgba(0, 0, 0, 0.1);
}

/* Skip link */
.skip-link {
	position: absolute;
	left: 0.75rem;
	top: 0.75rem;
	transform: translateY(-200%);
	background: #fff;
	color: var(--brand-secondary);
	padding: 0.5rem 0.75rem;
	border-radius: var(--radius);
	border: 1px solid rgba(0, 0, 0, 0.12);
	z-index: 1000;
}

.skip-link:focus {
	transform: translateY(0);
}

/* Screen-reader-only helper (Bootstrap .visually-hidden equivalent) */
.visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}