/**
 * Stratum — front-end base styles.
 *
 * Deliberately small. Everything that varies per element comes from the
 * generated stylesheet; this file only sets up the stacking context and gives
 * each element type sane defaults so an unstyled element still looks like
 * something.
 */

/* ---------------------------------------------------------------------- */
/* Design tokens                                                           */
/*                                                                          */
/* These are the fallback values. Stratum_Tokens prints the same properties  */
/* in a later `:root` block built from the site's saved tokens, and wins by  */
/* order at equal specificity — exactly how the theme's Customizer CSS beats */
/* its own stylesheet.                                                      */
/*                                                                          */
/* They MUST live on `:root` and not on `.stratum-surface`. A class scores   */
/* (0,1,0) against `:root`'s (0,1,0)… but `.stratum-surface` also *wins on   */
/* proximity*: it is the element the value is inherited onto, so a           */
/* declaration there beats an inherited one from `:root` no matter what the  */
/* cascade says. Declare them on the surface and the saved tokens appear to  */
/* do nothing at all.                                                       */
/*                                                                          */
/* Defaults here are byte-identical to Stratum_Tokens::defaults(), asserted  */
/* by tests/tokens/run.php. `--stratum-color` is kept as an alias so any     */
/* stylesheet or document written before 1.6 still resolves.                 */
/* ---------------------------------------------------------------------- */

:root {
	--stratum-font: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
	--stratum-font-heading: var(--stratum-font);
	--stratum-size: 16px;
	--stratum-line: 1.5;

	--stratum-accent: #1d4ed8;
	--stratum-accent-ink: #ffffff;
	--stratum-ink: #111827;
	--stratum-ink-2: #4b5563;
	--stratum-ink-3: #6b7280;
	--stratum-bg: #ffffff;
	--stratum-bg-2: #f8fafc;
	--stratum-line-color: #e5e7eb;

	--stratum-color: var(--stratum-ink);
	--stratum-link: inherit;
	--stratum-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* ---------------------------------------------------------------------- */
/* The surface                                                             */
/*                                                                          */
/* `.stratum-surface` is applied to BOTH the published canvas and the        */
/* builder's canvas, so the two cannot drift apart. Anything that affects    */
/* how content measures — font, size, line height, spacing — belongs here    */
/* and nowhere else. This is the whole basis of the builder matching the     */
/* browser.                                                                  */
/*                                                                          */
/* It CONSUMES the tokens above; it must not re-declare them.                */
/* ---------------------------------------------------------------------- */

.stratum-surface {
	font-family: var(--stratum-font);
	font-size: var(--stratum-size);
	line-height: var(--stratum-line);
	font-weight: 400;
	font-style: normal;
	font-variant: normal;
	letter-spacing: normal;
	word-spacing: normal;
	text-transform: none;
	text-align: left;
	text-indent: 0;
	color: var(--stratum-color);
	-webkit-font-smoothing: antialiased;
}

.stratum-root {
	position: relative;
	width: 100%;
	margin: 0 auto;
	--stratum-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

.stratum-root > .stratum-canvas {
	position: relative;
	width: 100%;
	margin: 0 auto;
	isolation: isolate;
}

/* ---------------------------------------------------------------------- */
/* Sealing the layout off from the theme                                    */
/*                                                                          */
/* A theme styles the content area with rules like `.entry-content p`,       */
/* specificity (0,2,0). A plain `.stratum-el p` is (0,1,1) and loses, so the */
/* theme's margins and typography leak in, text reflows to a different       */
/* height, and anchored elements shift. The class is repeated below purely   */
/* to reach (0,3,0) and win without resorting to !important.                 */
/*                                                                          */
/* Only DESCENDANTS are reset. The element wrappers themselves carry the     */
/* generated styles and must not be touched here.                            */
/* ---------------------------------------------------------------------- */

/* `:not(.stratum-el)` is load-bearing: a container's children are themselves
   elements carrying generated positioning, and a blanket `margin: 0` here
   silently destroys it — a centre-pinned element relies on a negative margin
   and jumps half its own width. Only content nodes get sealed, at any depth. */
.stratum-root.stratum-root .stratum-el *:not(.stratum-el) {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	background: transparent;
	font: inherit;
	color: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	word-spacing: inherit;
	text-align: inherit;
	text-transform: inherit;
	text-indent: 0;
	list-style: none;
	box-sizing: border-box;
	float: none;
	clear: none;
	max-width: none;
	min-height: 0;
	text-shadow: none;
	box-shadow: none;
	border-radius: 0;
}

/* `font: inherit` above flattens bold and italic, so put the meaning back. */
.stratum-root.stratum-root .stratum-el strong,
.stratum-root.stratum-root .stratum-el b {
	font-weight: 700;
}

.stratum-root.stratum-root .stratum-el em,
.stratum-root.stratum-root .stratum-el i {
	font-style: italic;
}

.stratum-root.stratum-root .stratum-el u {
	text-decoration: underline;
}

.stratum-root.stratum-root .stratum-el s,
.stratum-root.stratum-root .stratum-el del {
	text-decoration: line-through;
}

.stratum-root.stratum-root .stratum-el sup { vertical-align: super; font-size: 0.75em; }
.stratum-root.stratum-root .stratum-el sub { vertical-align: sub; font-size: 0.75em; }

.stratum-root.stratum-root .stratum-el code,
.stratum-root.stratum-root .stratum-el pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
}

.stratum-root.stratum-root .stratum-el svg {
	max-width: none;
}

/* Layers cover the canvas but let clicks through to whatever is beneath. */
.stratum-layer {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.stratum-layer > * {
	pointer-events: auto;
}

.stratum-root.stratum-root,
.stratum-root.stratum-root .stratum-canvas,
.stratum-root.stratum-root .stratum-layer,
.stratum-root.stratum-root .stratum-aside,
.stratum-root.stratum-root .stratum-el {
	box-sizing: border-box;
}

.stratum-el {
	box-sizing: border-box;
	min-width: 0;
	min-height: 0;
}

.stratum-el * {
	box-sizing: border-box;
}

/* Themes love adding margins to headings and paragraphs. Not here. */
.stratum-el h1,
.stratum-el h2,
.stratum-el h3,
.stratum-el h4,
.stratum-el h5,
.stratum-el h6,
.stratum-el p,
.stratum-el ul,
.stratum-el ol,
.stratum-el figure,
.stratum-el figcaption,
.stratum-el blockquote {
	margin: 0;
	padding: 0;
}

.stratum-heading .stratum-h {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	text-transform: inherit;
}

/* Re-applied at (0,3,0) so the seal above does not flatten Stratum's own
   intended inner spacing. */
.stratum-root.stratum-root .stratum-rich > * + * {
	margin-top: 0.75em;
}

.stratum-root.stratum-root .stratum-rich ul,
.stratum-root.stratum-root .stratum-rich ol {
	padding-left: 1.4em;
}

.stratum-root.stratum-root .stratum-rich ul { list-style: disc; }
.stratum-root.stratum-root .stratum-rich ol { list-style: decimal; }
.stratum-root.stratum-root .stratum-rich li { margin: 0 0 0.25em; }

.stratum-root.stratum-root .stratum-rich a,
.stratum-root.stratum-root .stratum-heading a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.stratum-root.stratum-root .stratum-rich blockquote {
	padding-left: 1em;
	border-left: 3px solid currentColor;
	opacity: 0.85;
}

.stratum-image {
	overflow: hidden;
	display: block;
}

.stratum-image > img {
	display: block;
	width: 100%;
	height: 100%;
}

.stratum-image .stratum-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0.5em 0.75em;
	font-size: 0.8125em;
	line-height: 1.4;
}

.stratum-btn {
	appearance: none;
	-webkit-appearance: none;
	background: none;
	border: 0;
	cursor: pointer;
	font: inherit;
	color: inherit;
	text-align: center;
	padding: 0 1em;
	white-space: nowrap;
}

.stratum-btn:focus-visible,
.stratum-cover-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

svg.stratum-icon {
	display: block;
	width: 100%;
	height: 100%;
}

/* The icon element is a box that centres its svg. */
.stratum-el.stratum-icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

.stratum-btn svg.stratum-icon {
	width: 1.15em;
	height: 1.15em;
	flex: none;
}

.stratum-divider {
	display: flex;
	align-items: center;
}

.stratum-rule {
	border-top: 1px solid currentColor;
	width: 100%;
}

.stratum-spacer {
	pointer-events: none;
}

.stratum-video,
.stratum-embed {
	overflow: hidden;
}

.stratum-embed iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.stratum-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(
		45deg,
		rgba(0, 0, 0, 0.04),
		rgba(0, 0, 0, 0.04) 10px,
		rgba(0, 0, 0, 0.07) 10px,
		rgba(0, 0, 0, 0.07) 20px
	);
}

/* ---------------------------------------------------------------------- */
/* Menu, branding and search                                                */
/*                                                                          */
/* SPECIFICITY, because getting it wrong here is silent. The seal above is   */
/* `.stratum-root.stratum-root .stratum-el *:not(.stratum-el)`, which is     */
/* (0,4,0) — :not() carries the weight of its argument — and it resets       */
/* background, border, padding, radius and shadow on every descendant of an  */
/* element. A menu panel, a submenu link, a search field and a search button */
/* are all descendants. So every rule below is written to reach (0,4,0) or   */
/* (0,4,1) and sits after the seal in this file.                            */
/*                                                                          */
/* Variant qualifiers — [data-menu-sub], .is-collapsible — go inside         */
/* :where() so they contribute nothing. That is the same arithmetic the      */
/* theme uses on its body classes and for the same reason: the generated     */
/* per-element CSS is printed after this stylesheet, and it can only         */
/* override these rules without !important if they weigh no more than it     */
/* does. Add a bare attribute selector to one of these and the per-element   */
/* collapse block stops being able to beat it.                               */
/*                                                                          */
/* The --smenu-* / --sbrand-* / --ssearch-* properties are generated per     */
/* element by Stratum_CSS::inner_rules(). They are deliberately outside the  */
/* --stratum-* namespace: those are the site-wide design tokens, they live   */
/* on :root and nowhere else, and a property declared on an element beats    */
/* the same property inherited from one. These are the opposite kind of      */
/* thing — one element's own values, declared on that element on purpose —   */
/* and sharing a prefix would make the two impossible to tell apart.         */
/* ---------------------------------------------------------------------- */

/* The element wrappers themselves. The seal only touches descendants, so
   these do not need the weight. */
.stratum-el.stratum-menu {
	/* A flyout and the collapsed panel both position against the nav. A
	   free-positioned element already gets `position: absolute` from the
	   generated CSS, which is also a containing block; this covers the flow
	   case — a menu inside a stack or a row — where it gets neither. */
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
}

.stratum-el.stratum-branding,
.stratum-el.stratum-search {
	display: flex;
	align-items: center;
}

/* --- Menu ------------------------------------------------------------- */

.stratum-root.stratum-root .stratum-menu .stratum-menu-panel {
	width: 100%;
	min-width: 0;
}

.stratum-root.stratum-root .stratum-menu .stratum-menu-list {
	display: flex;
	flex-direction: var(--smenu-dir, row);
	justify-content: var(--smenu-justify, flex-start);
	align-items: var(--smenu-align, center);
	flex-wrap: wrap;
	gap: var(--smenu-gap, 4px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.stratum-root.stratum-root .stratum-menu .stratum-menu-panel li {
	position: relative;
	margin: 0;
	list-style: none;
}

.stratum-root.stratum-root .stratum-menu .stratum-menu-panel a {
	display: block;
	padding: var(--smenu-item-pad, 8px 12px);
	border-radius: var(--smenu-item-radius, 6px);
	color: var(--smenu-ink, inherit);
	background: transparent;
	text-decoration: none;
	white-space: var(--smenu-wrap, nowrap);
	transition: background-color 0.15s, color 0.15s;
}

/* One rule for hovered, keyboard-focused and current-page, defined once so
   the three cannot drift apart — the same shape as the theme's nav. The
   current-page half is gated on a class the renderer adds only when the
   author asked for it, rather than on a second copy of this rule. */
.stratum-root.stratum-root .stratum-menu .stratum-menu-panel a:hover,
.stratum-root.stratum-root .stratum-menu .stratum-menu-panel a:focus-visible,
.stratum-root.stratum-root .stratum-menu--current .current-menu-item > a,
.stratum-root.stratum-root .stratum-menu--current .current_page_item > a,
.stratum-root.stratum-root .stratum-menu--current .current-menu-ancestor > a,
.stratum-root.stratum-root .stratum-menu--current .current_page_ancestor > a {
	color: var(--smenu-ink-on, inherit);
	background: var(--smenu-bg-on, transparent);
}

.stratum-root.stratum-root .stratum-menu .sub-menu {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Flyout: a floating panel. --smenu-sub-top / --smenu-sub-left carry the
   direction it opens in, so a vertical menu flies out sideways from the first
   level without a second set of rules. */
.stratum-root.stratum-root .stratum-menu:where([data-menu-sub='flyout']) .sub-menu {
	position: absolute;
	top: var(--smenu-sub-top, 100%);
	left: var(--smenu-sub-left, 0);
	z-index: 40;
	min-width: var(--smenu-panel-width, 220px);
	padding: 6px;
	background: var(--smenu-panel-bg, #ffffff);
	border: 1px solid var(--smenu-panel-border, rgba(15, 23, 42, 0.12));
	border-radius: var(--smenu-item-radius, 8px);
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 0.14s, transform 0.14s, visibility 0.14s;
}

/* Deeper levels always go sideways, whichever way the first one went. */
.stratum-root.stratum-root .stratum-menu:where([data-menu-sub='flyout']) .sub-menu .sub-menu {
	top: 0;
	left: 100%;
}

.stratum-root.stratum-root .stratum-menu:where([data-menu-sub='flyout']) li:hover > .sub-menu,
.stratum-root.stratum-root .stratum-menu:where([data-menu-sub='flyout']) li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* Inside a floating panel a link always wraps: a panel is a column, and a
   nowrap row of long labels simply overflows it. */
.stratum-root.stratum-root .stratum-menu .sub-menu a {
	white-space: normal;
}

/* Accordion: expands in place. This is what makes the element work in a
   sidebar, where a panel flying out over the content column is wrong. */
.stratum-root.stratum-root .stratum-menu:where([data-menu-sub='accordion']) .sub-menu {
	padding-left: var(--smenu-indent, 14px);
	margin-top: 2px;
}

/* With no JavaScript the disclosure buttons never arrive, so submenus stay
   open: longer, but navigable. The runtime adds `is-collapsible` once it has
   bound them, and only then is hiding them safe. */
.stratum-root.stratum-root .stratum-menu:where(.is-collapsible[data-menu-sub='accordion']) .sub-menu {
	display: none;
}

.stratum-root.stratum-root .stratum-menu:where(.is-collapsible[data-menu-sub='accordion']) .stratum-menu-item--open > .sub-menu {
	display: flex;
}

/* A parent item's link and its disclosure button share one row. */
.stratum-root.stratum-root .stratum-menu .stratum-menu-row {
	display: flex;
	align-items: center;
	gap: 2px;
}

.stratum-root.stratum-root .stratum-menu .stratum-menu-row > a {
	flex: 1 1 auto;
}

/* The disclosure button the runtime injects into each parent item. */
.stratum-root.stratum-root .stratum-menu .stratum-menu-sub {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 1.9em;
	height: 1.9em;
	padding: 0;
	border: 0;
	border-radius: var(--smenu-item-radius, 6px);
	background: transparent;
	color: var(--smenu-ink, inherit);
	cursor: pointer;
}

.stratum-root.stratum-root .stratum-menu .stratum-menu-sub svg {
	width: 0.9em;
	height: 0.9em;
	transition: transform 0.18s;
}

.stratum-root.stratum-root .stratum-menu .stratum-menu-item--open > .stratum-menu-row .stratum-menu-sub svg {
	transform: rotate(90deg);
}

/* --- The collapse toggle ---------------------------------------------- */

/* Hidden here and shown only inside the per-element media query that
   Stratum_CSS::standalone_rules() generates. A media query cannot read a
   custom property, so the width has to be baked in there — the same
   constraint that keeps the theme's small-screen block in PHP. */
.stratum-root.stratum-root .stratum-menu .stratum-menu-toggle {
	display: none;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid var(--smenu-panel-border, rgba(15, 23, 42, 0.12));
	border-radius: var(--smenu-item-radius, 8px);
	background: transparent;
	cursor: pointer;
}

/* The bars get their own ink rather than currentColor. The theme drew these
   in currentColor once and they disappeared on a dark header, because the ink
   they inherited was the body's. */
.stratum-root.stratum-root .stratum-menu .stratum-menu-bars,
.stratum-root.stratum-root .stratum-menu .stratum-menu-bars::before,
.stratum-root.stratum-root .stratum-menu .stratum-menu-bars::after {
	display: block;
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: var(--smenu-toggle-ink, currentColor);
	transition: transform 0.18s, background-color 0.18s;
}

.stratum-root.stratum-root .stratum-menu .stratum-menu-bars {
	position: relative;
}

.stratum-root.stratum-root .stratum-menu .stratum-menu-bars::before,
.stratum-root.stratum-root .stratum-menu .stratum-menu-bars::after {
	content: '';
	position: absolute;
	left: 0;
}

.stratum-root.stratum-root .stratum-menu .stratum-menu-bars::before { top: -6px; }
.stratum-root.stratum-root .stratum-menu .stratum-menu-bars::after { top: 6px; }

.stratum-root.stratum-root .stratum-menu .stratum-menu-toggle[aria-expanded='true'] .stratum-menu-bars {
	background: transparent;
}

.stratum-root.stratum-root .stratum-menu .stratum-menu-toggle[aria-expanded='true'] .stratum-menu-bars::before {
	transform: translateY(6px) rotate(45deg);
}

.stratum-root.stratum-root .stratum-menu .stratum-menu-toggle[aria-expanded='true'] .stratum-menu-bars::after {
	transform: translateY(-6px) rotate(-45deg);
}

.stratum-root.stratum-root .stratum-menu .stratum-menu-empty {
	padding: 0.4em 0.6em;
	border: 1px dashed currentColor;
	border-radius: 6px;
	font-size: 0.875em;
	opacity: 0.7;
}

/* --- Branding --------------------------------------------------------- */

.stratum-root.stratum-root .stratum-branding .stratum-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	max-width: 100%;
	color: inherit;
	text-decoration: none;
}

.stratum-root.stratum-root .stratum-branding .stratum-brand-logo {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.stratum-root.stratum-root .stratum-branding .stratum-brand-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.stratum-root.stratum-root .stratum-branding .stratum-brand-tagline {
	font-size: var(--sbrand-tag-size, 0.75em);
	color: var(--sbrand-tag-ink, inherit);
	line-height: 1.3;
	opacity: 0.85;
}

/* --- Search ----------------------------------------------------------- */

.stratum-root.stratum-root .stratum-search .stratum-search-form {
	display: flex;
	align-items: stretch;
	gap: 6px;
	width: 100%;
	height: 100%;
}

.stratum-root.stratum-root .stratum-search .stratum-search-field {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0 0.75em;
	font: inherit;
	color: var(--ssearch-ink, inherit);
	background: var(--ssearch-bg, #ffffff);
	border: 1px solid var(--ssearch-border, rgba(15, 23, 42, 0.16));
	border-radius: var(--ssearch-radius, 8px);
	appearance: none;
	-webkit-appearance: none;
}

.stratum-root.stratum-root .stratum-search .stratum-search-btn {
	flex: none;
	padding: 0 1em;
	font: inherit;
	/* Defaults to the site accent token, so the element follows the palette
	   with nobody configuring it. The token block prints on every front-end
	   page, so this resolves even off a builder page. */
	color: var(--ssearch-btn-ink, #ffffff);
	background: var(--ssearch-btn-bg, var(--stratum-accent, #1d4ed8));
	border: 0;
	border-radius: var(--ssearch-radius, 8px);
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

/* --- Shared ----------------------------------------------------------- */

.stratum-root.stratum-root .stratum-menu .stratum-menu-panel a:focus-visible,
.stratum-root.stratum-root .stratum-menu button:focus-visible,
.stratum-root.stratum-root .stratum-branding .stratum-brand:focus-visible,
.stratum-root.stratum-root .stratum-search .stratum-search-field:focus-visible,
.stratum-root.stratum-root .stratum-search .stratum-search-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.stratum-root.stratum-root .stratum-el .stratum-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.stratum-root.stratum-root .stratum-menu .stratum-menu-panel a,
	.stratum-root.stratum-root .stratum-menu .sub-menu,
	.stratum-root.stratum-root .stratum-menu .stratum-menu-bars,
	.stratum-root.stratum-root .stratum-menu .stratum-menu-bars::before,
	.stratum-root.stratum-root .stratum-menu .stratum-menu-bars::after,
	.stratum-root.stratum-root .stratum-menu .stratum-menu-sub svg {
		transition: none;
	}
}

/* A link that covers its whole element without swallowing nested links. */
.stratum-cover-link {
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: inherit;
	text-decoration: none;
}

.stratum-cover-link ~ a,
.stratum-cover-link ~ * a,
.stratum-cover-link ~ button {
	position: relative;
	z-index: 3;
}

/* --------------------------------------------------------------------- */
/* Entrance animations                                                    */
/* --------------------------------------------------------------------- */

[data-anim] {
	opacity: 0;
	transition:
		opacity 0.6s var(--stratum-ease),
		transform 0.6s var(--stratum-ease);
	transition-delay: var(--stratum-delay, 0s);
	will-change: opacity, transform;
}

[data-anim='up'] { transform: translateY(28px); }
[data-anim='down'] { transform: translateY(-28px); }
[data-anim='left'] { transform: translateX(-28px); }
[data-anim='right'] { transform: translateX(28px); }
[data-anim='zoom'] { transform: scale(0.94); }

[data-anim].is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	[data-anim] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* --------------------------------------------------------------------- */
/* The page frame                                                          */
/*                                                                         */
/* Stratum owns the width of its own content column. The theme's job is     */
/* only to give it the room between the header and the footer.              */
/* --------------------------------------------------------------------- */

.stratum-root--contained,
.stratum-root--full {
	display: flex;
	align-items: flex-start;
	gap: var(--stratum-aside-gap, 40px);
	justify-content: center;
}

.stratum-root--contained > .stratum-canvas,
.stratum-root--full > .stratum-canvas {
	flex: 0 1 auto;
	min-width: 0;
	/* The generic rule above gives the canvas `margin: 0 auto` to centre it.
	   Here it is a flex item, and auto margins on a flex item absorb *all* the
	   free space before `justify-content` gets to distribute any — so with room
	   to spare the canvas took half the slack on each side, pinning the aside to
	   the far edge and opening a gap of the page's gap plus half the leftover
	   width. On a wide screen that reads as hundreds of pixels of nothing
	   between the content and the sidebar.

	   Centring is `justify-content: center` on the row, which centres the canvas
	   and the aside together as one group. The auto margins are redundant for a
	   lone canvas and wrong for a canvas with an aside, so they go. */
	margin-inline: 0;
}

.stratum-aside {
	flex: 0 0 var(--stratum-aside-width, 300px);
	max-width: 100%;
	min-width: 0;

	/* The row is `align-items: flex-start` so a tall sidebar can never stretch
	   the canvas — the canvas height is the document height and must stay
	   exactly what was drawn. The aside is the other way round: a sidebar that
	   stops partway down the page reads as broken, so it opts back into
	   stretching on its own.

	   Asymmetric on purpose. flex-start on the row and stretch on this one item
	   means the flex line's height is set by the canvas, and the aside grows to
	   meet it — never the reverse. */
	align-self: stretch;

	/* A column, so the part inside can fill this box by growing rather than by
	   asking for `height: 100%`. A percentage height resolves against the
	   parent's height, which for a stretched flex item is exactly the kind of
	   definite-or-not question browsers have historically disagreed about. */
	display: flex;
	flex-direction: column;
}

/* The part rendered into the aside, and the canvas inside it. Without these the
   aside is full height and the part still paints its drawn height, so the
   column stretches and the sidebar's own background stops partway down —
   which looks identical to the bug from the front of the page.

   Scoped to the host rather than to the part, deliberately: what makes a
   sidebar fill is where it is, not what it is. A `stratum-root--stretch` class
   used to be emitted on every part and every full-width page, and this fix
   pointedly did not use it — filling the height is wrong on a footer and on a
   full-width page. That class, read by nothing, was removed in 1.10.0, and
   tests/run.php now fails the build if the renderer emits another like it. */
.stratum-aside > .stratum-root {
	flex: 1 1 auto;
	min-height: 0;
}

.stratum-aside > .stratum-root > .stratum-canvas {
	align-self: stretch;
}

.stratum-root--aside-left { flex-direction: row; }
.stratum-root--aside-right { flex-direction: row; }

/* Below the tablet breakpoint the sidebar drops under the content, which is
   what the builder shows at those widths too. */
@media (max-width: 1024px) {
	.stratum-root--aside-left,
	.stratum-root--aside-right {
		flex-direction: column;
		align-items: stretch;
	}

	.stratum-aside {
		flex: 1 1 auto;
	}
}

/* --------------------------------------------------------------------- */
/* Escaping a constrained theme                                           */
/* --------------------------------------------------------------------- */

body.stratum-unwrapped .stratum-root {
	/* width must be auto: negative margins only widen a box that has not been
	   given an explicit width, otherwise they just shift it sideways. */
	width: auto;
	max-width: none;
	/* Half the parent minus half the viewport breaks out of a centred container
	   without the horizontal scrollbar that a flat 100vw causes. */
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

body.stratum-unwrapped .stratum-main,
body.stratum-unwrapped .entry-content,
body.stratum-unwrapped .site-main {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}