/* ==========================================================================
   PixelGR Base: component layer
   Site chrome plus the starter section components. This file grows as the
   section library grows. Every interactive element meets the target size
   token, and no rule here removes a focus outline.
   ========================================================================== */

/* --- Buttons ------------------------------------------------------------ */

.pxgr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--pxgr-space-2);
	min-height: var(--pxgr-target-comfortable);
	padding: var(--pxgr-space-2) var(--pxgr-space-4);
	border: 2px solid transparent;
	border-radius: var(--pxgr-radius-sm);
	font-family: var(--pxgr-font-display);
	font-size: var(--pxgr-text-base);
	font-weight: var(--pxgr-weight-bold);
	line-height: var(--pxgr-leading-snug);
	text-align: center;
	cursor: pointer;
	transition: background-color var(--pxgr-transition), border-color var(--pxgr-transition), color var(--pxgr-transition);
}

.pxgr-btn--primary {
	background: var(--pxgr-color-primary);
	border-color: var(--pxgr-color-primary);
	color: var(--pxgr-color-surface);
}

.pxgr-btn--primary:hover {
	background: var(--pxgr-color-primary-hover);
	border-color: var(--pxgr-color-primary-hover);
	color: var(--pxgr-color-surface);
}

.pxgr-btn--secondary {
	background: transparent;
	border-color: var(--pxgr-color-primary);
	color: var(--pxgr-color-primary);
}

.pxgr-btn--secondary:hover {
	background: var(--pxgr-color-primary);
	color: var(--pxgr-color-surface);
}

.pxgr-section--dark .pxgr-btn--secondary {
	border-color: var(--pxgr-color-on-dark);
	color: var(--pxgr-color-on-dark);
}

/* --- Header ------------------------------------------------------------- */

.pxgr-header {
	position: relative;
	z-index: var(--pxgr-z-header);
	background: var(--pxgr-color-surface);
	border-bottom: 1px solid var(--pxgr-color-border);
}

.pxgr-header-inner {
	display: flex;
	align-items: center;
	gap: var(--pxgr-space-4);
	min-height: var(--pxgr-header-height);
}

.pxgr-branding { margin-right: auto; }
.pxgr-branding img { max-height: 60px; width: auto; }

.pxgr-site-title {
	margin: 0;
	font-size: var(--pxgr-text-xl);
	letter-spacing: var(--pxgr-tracking-tight);
}

.pxgr-site-title a { color: var(--pxgr-color-ink); }

/* Sticky state is applied by theme.js, never by CSS position:sticky alone,
   because the class also drives the shadow and the body offset. */
.pxgr-header.is-stuck {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	box-shadow: var(--pxgr-shadow-md);
}

body.pxgr-has-stuck-header { padding-top: var(--pxgr-header-height); }

/* --- Primary navigation -------------------------------------------------- */

.pxgr-menu,
.pxgr-submenu,
.pxgr-legal-menu {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pxgr-menu { gap: var(--pxgr-space-1); align-items: center; }

.pxgr-menu-item { position: relative; display: flex; align-items: center; }

.pxgr-menu-link {
	display: inline-flex;
	align-items: center;
	min-height: var(--pxgr-target-comfortable);
	padding: var(--pxgr-space-2) var(--pxgr-space-3);
	color: var(--pxgr-color-ink);
	font-weight: var(--pxgr-weight-medium);
}

.pxgr-menu-link[aria-current="page"] {
	color: var(--pxgr-color-primary);
	box-shadow: inset 0 -3px 0 var(--pxgr-color-accent);
}

.pxgr-submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--pxgr-target-min);
	height: var(--pxgr-target-min);
	padding: 0;
	margin-left: calc(var(--pxgr-space-1) * -1);
	background: none;
	border: 0;
	cursor: pointer;
	color: inherit;
}

.pxgr-submenu-icon {
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform var(--pxgr-transition);
}

.pxgr-submenu-toggle[aria-expanded="true"] .pxgr-submenu-icon {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.pxgr-submenu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: var(--pxgr-z-nav);
	display: none;
	flex-direction: column;
	min-width: 240px;
	padding: var(--pxgr-space-2) 0;
	background: var(--pxgr-color-surface);
	border: 1px solid var(--pxgr-color-border);
	border-radius: var(--pxgr-radius-md);
	box-shadow: var(--pxgr-shadow-lg);
}

.pxgr-menu-item--parent.is-open > .pxgr-submenu { display: flex; }
.pxgr-submenu .pxgr-menu-item { width: 100%; }
.pxgr-submenu .pxgr-menu-link { width: 100%; }

/* --- Mobile navigation ---------------------------------------------------- */

.pxgr-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: var(--pxgr-target-comfortable);
	height: var(--pxgr-target-comfortable);
	padding: 0;
	background: none;
	border: 1px solid var(--pxgr-color-border);
	border-radius: var(--pxgr-radius-sm);
	cursor: pointer;
	color: var(--pxgr-color-ink);
}

.pxgr-nav-toggle-bars,
.pxgr-nav-toggle-bars::before,
.pxgr-nav-toggle-bars::after {
	display: block;
	width: 20px;
	height: 2px;
	background: currentColor;
	transition: transform var(--pxgr-transition), opacity var(--pxgr-transition);
}

.pxgr-nav-toggle-bars { position: relative; }
.pxgr-nav-toggle-bars::before,
.pxgr-nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.pxgr-nav-toggle-bars::before { top: -6px; }
.pxgr-nav-toggle-bars::after { top: 6px; }

.pxgr-nav-toggle[aria-expanded="true"] .pxgr-nav-toggle-bars { background: transparent; }
.pxgr-nav-toggle[aria-expanded="true"] .pxgr-nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.pxgr-nav-toggle[aria-expanded="true"] .pxgr-nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 960px) {
	.pxgr-nav-toggle { display: inline-flex; order: 3; }
	.pxgr-header-cta { order: 2; }

	.pxgr-nav {
		display: none;
		order: 4;
		width: 100%;
		padding-bottom: var(--pxgr-space-4);
	}

	.pxgr-nav.is-open { display: block; }
	.pxgr-header-inner { flex-wrap: wrap; padding-block: var(--pxgr-space-2); }
	.pxgr-menu { flex-direction: column; align-items: stretch; gap: 0; }
	.pxgr-menu-item { flex-wrap: wrap; border-bottom: 1px solid var(--pxgr-color-border); }
	.pxgr-menu-link { flex: 1; }

	.pxgr-submenu-toggle {
		width: var(--pxgr-target-comfortable);
		height: var(--pxgr-target-comfortable);
		margin-left: 0;
	}

	.pxgr-submenu {
		position: static;
		width: 100%;
		border: 0;
		box-shadow: none;
		padding-left: var(--pxgr-space-4);
	}
}

/* --- Breadcrumbs ---------------------------------------------------------- */

.pxgr-breadcrumbs { margin-bottom: var(--pxgr-space-3); font-size: var(--pxgr-text-sm); }

.pxgr-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pxgr-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
	color: var(--pxgr-color-ink-muted);
}

.pxgr-breadcrumbs li { display: flex; gap: var(--pxgr-space-2); align-items: center; }

.pxgr-breadcrumbs li + li::before {
	content: "/";
	color: var(--pxgr-color-border);
}

/* --- Page header band ------------------------------------------------------ */

.pxgr-page-header {
	padding-block: var(--pxgr-space-6);
	background: var(--pxgr-color-surface-alt);
	border-bottom: 1px solid var(--pxgr-color-border);
}

.pxgr-page-title { margin: 0; }

/* --- Entry and cards -------------------------------------------------------- */

.pxgr-entry { padding-block: var(--pxgr-space-7); }
.pxgr-layout-primary .pxgr-entry { padding-block: 0; }

.pxgr-card {
	display: flex;
	flex-direction: column;
	margin-bottom: var(--pxgr-space-5);
	background: var(--pxgr-color-surface);
	border: 1px solid var(--pxgr-color-border);
	border-radius: var(--pxgr-radius-md);
	overflow: hidden;
}

.pxgr-card-media img { width: 100%; }
.pxgr-card-body { padding: var(--pxgr-space-4); }
.pxgr-card-title { margin-bottom: var(--pxgr-space-1); font-size: var(--pxgr-text-xl); }
.pxgr-card-title a { color: var(--pxgr-color-ink); }

.pxgr-card-meta {
	margin-bottom: var(--pxgr-space-3);
	font-size: var(--pxgr-text-sm);
	color: var(--pxgr-color-ink-muted);
}

/* --- Widgets ---------------------------------------------------------------- */

.pxgr-widget { margin-bottom: var(--pxgr-space-5); }
.pxgr-widget:last-child { margin-bottom: 0; }
.pxgr-widget-title { font-size: var(--pxgr-text-lg); }
.pxgr-widget ul { list-style: none; margin: 0; padding: 0; }
.pxgr-widget li { padding-block: var(--pxgr-space-1); }
.pxgr-widget a { display: inline-block; min-height: var(--pxgr-target-min); }

/* --- Footer ------------------------------------------------------------------ */

.pxgr-footer {
	background: var(--pxgr-color-surface-dark);
	color: var(--pxgr-color-on-dark);
}

.pxgr-footer a { color: var(--pxgr-color-on-dark); }
.pxgr-footer .pxgr-widget-title { color: var(--pxgr-color-on-dark); }

.pxgr-footer-widgets {
	display: grid;
	gap: var(--pxgr-space-6);
	padding-block: var(--pxgr-space-7);
	grid-template-columns: 1fr;
}

@media (min-width: 720px) {
	.pxgr-footer-widgets[data-columns="2"],
	.pxgr-footer-widgets[data-columns="4"] { grid-template-columns: repeat(2, 1fr); }
	.pxgr-footer-widgets[data-columns="3"] { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 960px) {
	.pxgr-footer-widgets[data-columns="4"] { grid-template-columns: repeat(4, 1fr); }
}

.pxgr-footer-bar { border-top: 1px solid rgba(255, 255, 255, 0.14); }

.pxgr-footer-bar-inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pxgr-space-3);
	align-items: center;
	justify-content: space-between;
	padding-block: var(--pxgr-space-4);
	font-size: var(--pxgr-text-sm);
}

.pxgr-copyright { margin: 0; }

.pxgr-legal-menu { flex-wrap: wrap; gap: var(--pxgr-space-4); list-style: none; margin: 0; padding: 0; }
.pxgr-legal-menu a { display: inline-flex; align-items: center; min-height: var(--pxgr-target-min); }

/* --- Pagination and search --------------------------------------------------- */

.pagination { margin-top: var(--pxgr-space-6); }

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--pxgr-target-comfortable);
	min-height: var(--pxgr-target-comfortable);
	padding-inline: var(--pxgr-space-2);
	border: 1px solid var(--pxgr-color-border);
	border-radius: var(--pxgr-radius-sm);
	text-decoration: none;
}

.pagination .page-numbers.current {
	background: var(--pxgr-color-primary);
	border-color: var(--pxgr-color-primary);
	color: var(--pxgr-color-surface);
}

.pxgr-search-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pxgr-space-2);
	align-items: flex-end;
	margin-bottom: var(--pxgr-space-5);
}

.pxgr-search-label { width: 100%; margin-bottom: 0; }
.pxgr-search-field { flex: 1; min-width: 200px; }
.pxgr-search-submit { flex: 0 0 auto; }

/* --- Section starters ----------------------------------------------------------
   The beginning of the section library. Raw Section markup composes these
   rather than shipping one-off inline CSS per page.
   ------------------------------------------------------------------------------ */

.pxgr-stack { display: grid; gap: var(--pxgr-space-4); }
.pxgr-stack--tight { gap: var(--pxgr-space-2); }
.pxgr-cluster { display: flex; flex-wrap: wrap; gap: var(--pxgr-space-3); align-items: center; }
.pxgr-center { text-align: center; }
.pxgr-center .pxgr-cluster { justify-content: center; }

.pxgr-eyebrow {
	margin-bottom: var(--pxgr-space-2);
	font-size: var(--pxgr-text-sm);
	font-weight: var(--pxgr-weight-bold);
	letter-spacing: var(--pxgr-tracking-wide);
	text-transform: uppercase;
	color: var(--pxgr-color-accent);
}

.pxgr-lede { font-size: var(--pxgr-text-lg); color: var(--pxgr-color-ink-muted); max-width: 60ch; }
.pxgr-center .pxgr-lede { margin-inline: auto; }

.pxgr-grid { display: grid; gap: var(--pxgr-space-5); grid-template-columns: 1fr; }

@media (min-width: 720px) {
	.pxgr-grid--2 { grid-template-columns: repeat(2, 1fr); }
	.pxgr-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
	.pxgr-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.pxgr-grid--4 { grid-template-columns: repeat(4, 1fr); }
	.pxgr-split { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--pxgr-space-7); align-items: center; }
}

.pxgr-panel {
	padding: var(--pxgr-space-5);
	background: var(--pxgr-color-surface);
	border: 1px solid var(--pxgr-color-border);
	border-radius: var(--pxgr-radius-lg);
}

.pxgr-section--dark .pxgr-panel {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.16);
}