/* ==========================================================================
   PixelGR Base: base layer
   Reset, typography, layout primitives, accessibility defaults.
   No hard-coded values. Everything resolves from tokens.css.
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

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

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background: var(--pxgr-color-surface);
	color: var(--pxgr-color-ink);
	font-family: var(--pxgr-font-body);
	font-size: var(--pxgr-text-base);
	line-height: var(--pxgr-leading-normal);
	-webkit-font-smoothing: antialiased;
}

/* --- Typography --------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--pxgr-space-3);
	font-family: var(--pxgr-font-display);
	font-weight: var(--pxgr-weight-bold);
	line-height: var(--pxgr-leading-tight);
	letter-spacing: var(--pxgr-tracking-tight);
	color: var(--pxgr-color-ink);
	text-wrap: balance;
}

h1 { font-size: var(--pxgr-text-4xl); }
h2 { font-size: var(--pxgr-text-3xl); }
h3 { font-size: var(--pxgr-text-2xl); }
h4 { font-size: var(--pxgr-text-xl); }
h5 { font-size: var(--pxgr-text-lg); }
h6 { font-size: var(--pxgr-text-base); letter-spacing: var(--pxgr-tracking-wide); text-transform: uppercase; }

@media (max-width: 782px) {
	h1 { font-size: var(--pxgr-text-3xl); }
	h2 { font-size: var(--pxgr-text-2xl); }
	h3 { font-size: var(--pxgr-text-xl); }
}

p, ul, ol, dl, blockquote, table, figure { margin: 0 0 var(--pxgr-space-4); }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

/* Reading measure. Long lines are a comprehension problem, not a taste one. */
.pxgr-entry p,
.pxgr-entry li { max-width: 70ch; }

small { font-size: var(--pxgr-text-sm); }
strong, b { font-weight: var(--pxgr-weight-bold); }
code, pre, kbd { font-family: var(--pxgr-font-mono); font-size: var(--pxgr-text-sm); }

blockquote {
	padding-left: var(--pxgr-space-4);
	border-left: 4px solid var(--pxgr-color-accent);
	color: var(--pxgr-color-ink-muted);
}

/* --- Links -------------------------------------------------------------
   Underlined by default inside content. Color alone is not a sufficient
   distinguishing cue under WCAG 1.4.1.
   ----------------------------------------------------------------------- */

a {
	color: var(--pxgr-color-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color var(--pxgr-transition);
}

a:hover { color: var(--pxgr-color-primary-hover); }

/* Navigation, buttons, and cards opt out of the underline. */
.pxgr-nav a,
.pxgr-btn,
.pxgr-card-title a,
.pxgr-breadcrumbs a,
.pxgr-legal-menu a,
.pxgr-branding a { text-decoration: none; }

.pxgr-nav a:hover,
.pxgr-card-title a:hover,
.pxgr-breadcrumbs a:hover,
.pxgr-legal-menu a:hover { text-decoration: underline; }

/* --- Focus -------------------------------------------------------------
   Never remove this. outline:none is the single most common finding in our
   own audits. If a design needs a different focus look, restyle it here,
   do not delete it.
   ----------------------------------------------------------------------- */

:focus-visible {
	outline: var(--pxgr-focus-width) solid var(--pxgr-color-focus);
	outline-offset: var(--pxgr-focus-offset);
	border-radius: var(--pxgr-radius-sm);
}

/* Fallback for engines without :focus-visible support. */
:focus:not(:focus-visible) { outline: none; }

/* --- Media -------------------------------------------------------------- */

img, svg, video, iframe { max-width: 100%; height: auto; display: block; }
figure img { border-radius: var(--pxgr-radius-md); }

figcaption {
	margin-top: var(--pxgr-space-2);
	font-size: var(--pxgr-text-sm);
	color: var(--pxgr-color-ink-muted);
}

/* --- Tables ------------------------------------------------------------- */

table { width: 100%; border-collapse: collapse; }
th, td {
	padding: var(--pxgr-space-2) var(--pxgr-space-3);
	border-bottom: 1px solid var(--pxgr-color-border);
	text-align: left;
}
th { font-weight: var(--pxgr-weight-bold); }

/* --- Forms -------------------------------------------------------------- */

label {
	display: block;
	margin-bottom: var(--pxgr-space-1);
	font-size: var(--pxgr-text-sm);
	font-weight: var(--pxgr-weight-medium);
}

input, select, textarea {
	width: 100%;
	min-height: var(--pxgr-target-comfortable);
	padding: var(--pxgr-space-2) var(--pxgr-space-3);
	border: 1px solid var(--pxgr-color-border);
	border-radius: var(--pxgr-radius-sm);
	background: var(--pxgr-color-surface);
	color: var(--pxgr-color-ink);
	font-family: inherit;
	font-size: var(--pxgr-text-base); /* below 16px triggers iOS zoom on focus */
}

input[type="checkbox"],
input[type="radio"] {
	width: var(--pxgr-target-min);
	height: var(--pxgr-target-min);
	min-height: 0;
}

textarea { min-height: 160px; resize: vertical; }

/* --- Layout primitives -------------------------------------------------- */

.pxgr-container {
	width: 100%;
	max-width: var(--pxgr-container);
	margin-inline: auto;
	padding-inline: var(--pxgr-gutter);
}

.pxgr-container--narrow { max-width: var(--pxgr-container-narrow); }

.pxgr-main { display: block; }
.pxgr-main:focus { outline: none; }

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

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

@media (min-width: 960px) {
	.pxgr-layout--sidebar { grid-template-columns: minmax(0, 1fr) 320px; }
}

/* --- Screen reader utilities -------------------------------------------- */

.pxgr-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.pxgr-sr-only-focusable:not(:focus):not(:focus-within) {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.pxgr-skip-link {
	position: absolute;
	top: var(--pxgr-space-2);
	left: var(--pxgr-space-2);
	z-index: var(--pxgr-z-skip);
	padding: var(--pxgr-space-2) var(--pxgr-space-4);
	background: var(--pxgr-color-surface);
	color: var(--pxgr-color-primary);
	font-weight: var(--pxgr-weight-bold);
	border: 2px solid var(--pxgr-color-primary);
	border-radius: var(--pxgr-radius-sm);
}

/* --- Section spacing utilities ------------------------------------------
   Raw Section markup uses these instead of one-off inline padding, so
   vertical rhythm stays consistent across a site built by three people.
   ----------------------------------------------------------------------- */

.pxgr-section { padding-block: var(--pxgr-space-8); }
.pxgr-section--tight { padding-block: var(--pxgr-space-6); }
.pxgr-section--loose { padding-block: var(--pxgr-space-9); }
.pxgr-section--alt { background: var(--pxgr-color-surface-alt); }
.pxgr-section--dark { background: var(--pxgr-color-surface-dark); color: var(--pxgr-color-on-dark); }
.pxgr-section--dark h1,
.pxgr-section--dark h2,
.pxgr-section--dark h3,
.pxgr-section--dark h4 { color: var(--pxgr-color-on-dark); }

@media (max-width: 782px) {
	.pxgr-section { padding-block: var(--pxgr-space-6); }
	.pxgr-section--loose { padding-block: var(--pxgr-space-7); }
}