/**
 * Site Shell.
 *
 * Components use --pp-shell-* aliases only. Semantic --pilanto-* variables
 * appear in this alias block. SiteDesign projects them. Missing values fall
 * back to a more general role and then to a theme literal.
 */

.pp-shell {
	--pp-shell-canvas-surface: var(--pilanto-surface-default, #ffffff);
	--pp-shell-canvas-text: var(--pilanto-text-primary, #1a1a1a);
	--pp-shell-header-surface: var(--pilanto-surface-header, var(--pilanto-surface-default, #ffffff));
	--pp-shell-header-text: var(--pilanto-text-header, var(--pilanto-text-primary, #1a1a1a));
	--pp-shell-nav-link: var(--pilanto-link-header, var(--pp-shell-header-text, #1a1a1a));
	--pp-shell-nav-link-hover: var(--pilanto-link-header-hover, var(--pilanto-action-primary, #2563eb));
	--pp-shell-nav-link-current: var(--pilanto-link-header-current, var(--pp-shell-nav-link-hover, #2563eb));
	--pp-shell-nav-mobile-surface: var(--pilanto-surface-navigation, var(--pp-shell-header-surface, #ffffff));
	--pp-shell-nav-mobile-text: var(--pilanto-text-navigation, var(--pp-shell-header-text, #1a1a1a));
	--pp-shell-footer-surface: var(--pilanto-surface-footer, var(--pilanto-surface-alternate, #f5f5f5));
	--pp-shell-footer-text: var(--pilanto-text-footer, var(--pilanto-text-on-alternate, var(--pilanto-text-primary, #1a1a1a)));
	--pp-shell-footer-muted: var(--pilanto-text-footer-muted, var(--pilanto-text-secondary, var(--pp-shell-footer-text, #1a1a1a)));
	--pp-shell-footer-link: var(--pilanto-link-footer, var(--pp-shell-footer-text, #1a1a1a));
	--pp-shell-footer-link-hover: var(--pilanto-link-footer-hover, var(--pilanto-action-primary, #2563eb));
	--pp-shell-link: var(--pilanto-link, var(--pilanto-action-primary, #2563eb));
	--pp-shell-link-hover: var(--pilanto-link-hover, var(--pilanto-action-primary-hover, #1d4ed8));
	--pp-shell-action-surface: var(--pilanto-action-primary, #2563eb);
	--pp-shell-action-text: var(--pilanto-text-on-action, #ffffff);
	--pp-shell-action-hover: var(--pilanto-action-primary-hover, var(--pp-shell-action-surface, #2563eb));
	--pp-shell-border: var(--pilanto-border-default, color-mix(in srgb, var(--pp-shell-canvas-text, #1a1a1a) 22%, transparent));
	--pp-shell-focus: var(--pilanto-focus, var(--pilanto-action-primary, #1a1a1a));
	--pp-shell-radius-control: var(--pilanto-radius-control, 0.25rem);
	--pp-shell-font-body: var(--pilanto-font-body, system-ui, sans-serif);
	--pp-shell-font-heading: var(--pilanto-font-heading, var(--pp-shell-font-body, system-ui, sans-serif));
	--pp-shell-font-size-body: var(--pilanto-font-size-body, 1rem);
	--pp-shell-line-height-body: var(--pilanto-line-height-body, 1.5);
	--pp-shell-font-weight-body: var(--pilanto-font-weight-body, 400);
	--pp-shell-font-weight-heading: var(--pilanto-font-weight-heading, 600);
	--pp-shell-line-height-heading: var(--pilanto-line-height-heading, 1.2);
	--pp-shell-font-size-small: var(--pilanto-font-size-small, 0.875rem);
	--pp-shell-font-size-heading-1: var(--pilanto-font-size-heading-1, 2.25rem);
	--pp-shell-font-size-heading-2: var(--pilanto-font-size-heading-2, 1.75rem);
	--pp-shell-font-size-heading-3: var(--pilanto-font-size-heading-3, 1.375rem);
	--pp-shell-font-size-heading-4: var(--pilanto-font-size-heading-4, 1.125rem);
	--pp-shell-space-xs: var(--pilanto-space-xs, 0.5rem);
	--pp-shell-space-sm: var(--pilanto-space-sm, 0.75rem);
	--pp-shell-space-md: var(--pilanto-space-md, 1rem);
	--pp-shell-space-lg: var(--pilanto-space-lg, 1.5rem);
	--pp-shell-space-xl: var(--pilanto-space-xl, 2.5rem);
	--pp-shell-space-2xl: var(--pilanto-space-2xl, 4rem);
	--pp-shell-content-width: var(--pilanto-width-standard, 75rem);
	--pp-shell-wide-width: var(--pilanto-width-wide, 90rem);
	--pp-shell-reading-width: var(--pilanto-width-reading, 40rem);
	--pp-shell-gutter: var(--pp-shell-space-md);
	--wp--style--global--content-size: var(--pp-shell-content-width);
	--wp--style--global--wide-size: var(--pp-shell-wide-width);
	margin: 0;
	background: var(--pp-shell-canvas-surface);
	color: var(--pp-shell-canvas-text);
	font-family: var(--pp-shell-font-body);
	font-size: var(--pp-shell-font-size-body);
	font-weight: var(--pp-shell-font-weight-body);
	line-height: var(--pp-shell-line-height-body);
	overflow-wrap: anywhere;
	overflow-x: clip;
}

@media (min-width: 48rem) {
	.pp-shell {
		--pp-shell-gutter: var(--pp-shell-space-lg);
	}
}

.pp-shell :focus-visible {
	outline: 2px solid var(--pp-shell-focus);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.pp-shell-nav__panel {
		transition: none;
	}
}

.pp-shell-skip-link {
	position: absolute;
	inset-inline-start: var(--pp-shell-gutter);
	top: var(--pp-shell-space-sm);
	padding: var(--pp-shell-space-sm);
	background: var(--pp-shell-canvas-surface);
	color: var(--pp-shell-canvas-text);
	transform: translateY(-200%);
}

.pp-shell-skip-link:focus {
	transform: none;
	z-index: 5;
}

.pp-shell-header {
	background: var(--pp-shell-header-surface);
	color: var(--pp-shell-header-text);
	border-bottom: 1px solid var(--pp-shell-border);
}

.pp-shell-header__bar {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pp-shell-space-sm);
	width: min(100%, calc(var(--pp-shell-content-width) + (2 * var(--pp-shell-gutter))));
	margin-inline: auto;
	padding: var(--pp-shell-space-sm) var(--pp-shell-gutter);
}

.pp-shell-header__identity {
	min-width: 0;
}

.pp-shell-header__title {
	color: inherit;
	font-weight: var(--pp-shell-font-weight-heading);
	text-decoration: none;
}

.pp-shell-header__identity img {
	display: block;
	max-width: 12rem;
	height: auto;
}

@media (max-width: 47.999rem) {
	.pp-shell-header__bar {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
	}

	.pp-shell-header__identity {
		grid-column: 1;
		grid-row: 1;
	}

	.pp-shell-nav {
		display: contents;
	}

	.pp-shell-nav__toggle {
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
	}

	.pp-shell-nav__panel {
		grid-column: 1 / -1;
		grid-row: 2;
	}
}

.pp-shell-nav {
	display: contents;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--pp-shell-space-sm);
}

.pp-shell-nav__toggle {
	display: none;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: var(--pp-shell-space-xs) var(--pp-shell-space-sm);
	border: 1px solid var(--pp-shell-border);
	border-radius: var(--pp-shell-radius-control);
	background: transparent;
	color: inherit;
	font: inherit;
}

.pp-shell-js .pp-shell-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.pp-shell-nav__panel {
	flex: 1 1 100%;
	background: var(--pp-shell-nav-mobile-surface);
	color: var(--pp-shell-nav-mobile-text);
}

.pp-shell-js .pp-shell-nav--collapsed .pp-shell-nav__panel {
	display: none;
}

.pp-shell-nav__list,
.pp-shell-footer__list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pp-shell-nav__list a,
.pp-shell-footer__list a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding-inline: var(--pp-shell-space-sm);
	text-decoration: none;
}

.pp-shell-nav__list a {
	color: var(--pp-shell-nav-link);
}

.pp-shell-footer__list a {
	color: var(--pp-shell-footer-link);
}

.pp-shell-nav__list a:hover,
.pp-shell-nav__list .current-menu-item > a,
.pp-shell-nav__list .current-menu-ancestor > a {
	color: var(--pp-shell-nav-link-hover);
}

.pp-shell-nav__list .current-menu-item > a,
.pp-shell-nav__list [aria-current="page"] {
	color: var(--pp-shell-nav-link-current);
}

@media (min-width: 48rem) {
	.pp-shell-js .pp-shell-nav__toggle {
		display: none;
	}

	.pp-shell-nav {
		display: flex;
		flex: 0 1 auto;
		margin-inline-start: auto;
	}

	.pp-shell-nav__panel {
		flex: 0 1 auto;
		background: transparent;
		color: inherit;
	}

	.pp-shell-nav__list {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-end;
	}
}

.pp-shell-columns {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	width: 100%;
	padding-inline: var(--pp-shell-gutter);
}

.pp-shell-main {
	grid-column: 1 / -1;
	min-width: 0;
	padding-block: var(--pp-shell-space-lg);
}

.pp-shell-main h1,
.pp-shell-main h2,
.pp-shell-main h3,
.pp-shell-main h4 {
	font-family: var(--pp-shell-font-heading);
	font-weight: var(--pp-shell-font-weight-heading);
	line-height: var(--pp-shell-line-height-heading);
}

.pp-shell-main h1 {
	font-size: var(--pp-shell-font-size-heading-1);
}

.pp-shell-main h2 {
	font-size: var(--pp-shell-font-size-heading-2);
}

.pp-shell-main h3 {
	font-size: var(--pp-shell-font-size-heading-3);
}

.pp-shell-main h4 {
	font-size: var(--pp-shell-font-size-heading-4);
}

.pp-shell-entry {
	margin-block-end: var(--pp-shell-space-lg);
}

.pp-shell-main > .pp-shell-archive-title,
.pp-shell-main > .navigation,
.pp-shell-main > .search-form,
.pp-shell-main > p {
	width: min(100%, var(--pp-shell-content-width));
	margin-inline: auto;
}

.pp-shell-main > .pp-shell-entry:not(:has(.entry-content)) {
	width: min(100%, var(--pp-shell-content-width));
	margin-inline: auto;
}

.pp-shell-entry > .pp-shell-entry__title {
	width: min(100%, var(--pp-shell-content-width));
	margin-inline: auto;
}

:where(.pp-shell-entry__title) a {
	color: var(--pp-shell-link);
}

:where(.pp-shell-entry__title) a:where(:hover) {
	color: var(--pp-shell-link-hover);
}

.pp-shell-entry > .pp-shell-featured {
	max-width: min(100%, var(--pp-shell-content-width));
	margin-inline: auto;
}

.pp-shell-featured,
.pp-shell-main img,
.pp-shell-main video {
	max-width: 100%;
	height: auto;
}

.pp-shell-main iframe {
	max-width: 100%;
}

.pp-shell-featured {
	display: block;
}

.entry-content.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: var(--pp-shell-content-width);
	margin-inline: auto;
}

.entry-content > .alignwide {
	max-width: var(--pp-shell-wide-width);
	margin-inline: auto;
}

.entry-content > .alignfull {
	width: calc(100% + (2 * var(--pp-shell-gutter)));
	max-width: none;
	margin-inline: calc(-1 * var(--pp-shell-gutter));
}

:where(.entry-content) a {
	color: var(--pp-shell-link);
	text-decoration: underline;
}

:where(.entry-content) a:where(:hover) {
	color: var(--pp-shell-link-hover);
}

.pp-shell-footer {
	background: var(--pp-shell-footer-surface);
	color: var(--pp-shell-footer-text);
	border-top: 1px solid var(--pp-shell-border);
}

.pp-shell-footer__inner {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--pp-shell-space-sm);
	width: min(100%, calc(var(--pp-shell-content-width) + (2 * var(--pp-shell-gutter))));
	margin-inline: auto;
	padding: var(--pp-shell-space-lg) var(--pp-shell-gutter);
}

.pp-shell-footer a {
	color: var(--pp-shell-footer-link);
}

.pp-shell-footer a:hover {
	color: var(--pp-shell-footer-link-hover);
}

.pp-shell-footer__legal {
	margin: 0;
	color: var(--pp-shell-footer-muted);
	font-size: var(--pp-shell-font-size-small);
}

.pp-shell-footer__identity {
	margin: 0;
}