/* Global element foundation; no page-specific layouts. */
body {
	background: var(--pka-bg);
	color: var(--pka-text);
	font-family: var(--pka-font-family-body);
	font-size: var(--pka-font-size-body);
	font-weight: var(--pka-font-weight-regular);
	line-height: var(--pka-line-height-body);
	overflow-wrap: break-word;
}

.pka-container {
	width: 100%;
	max-width: calc(var(--pka-container-width) + 2 * var(--pka-container-gutter));
	margin-inline: auto;
	padding-inline: var(--pka-container-gutter);
}

h1, h2, h3, h4, h5, h6 {
	clear: both;
	margin-block: var(--pka-space-4) var(--pka-space-2);
	font-family: var(--pka-font-family-heading);
	font-weight: var(--pka-font-weight-heavy);
	line-height: var(--pka-line-height-heading);
	letter-spacing: var(--pka-letter-spacing-heading);
}
h1 { font-size: var(--pka-font-size-h1); }
h2 { font-size: var(--pka-font-size-h2); }
h3 { font-size: var(--pka-font-size-h3); }
h4 { font-size: var(--pka-font-size-h4); }
h5 { font-size: var(--pka-font-size-h5); }
h6 { font-size: var(--pka-font-size-h6); }

p, address, dl, table { margin: 0 0 var(--pka-space-3); }
b, strong, dt { font-weight: var(--pka-font-weight-bold); }
small { font-size: var(--pka-font-size-sm); }
dd { margin: 0 0 var(--pka-space-3) var(--pka-space-3); }
ul, ol {
	margin: 0 0 var(--pka-space-3);
	padding-inline-start: var(--pka-space-3);
}
li > ul, li > ol { margin-block-end: 0; }
blockquote {
	margin: 0 0 var(--pka-space-3);
	padding-inline-start: var(--pka-space-3);
	border-inline-start: 2px solid var(--pka-color-primary);
}
pre, code, kbd, samp, tt, var { font-family: var(--pka-font-family-mono); }
pre {
	background: var(--pka-surface-muted);
	margin: 0 0 var(--pka-space-3);
	padding: var(--pka-space-2);
	max-width: 100%;
	overflow: auto;
}
mark, ins, ::selection {
	background: var(--pka-color-accent);
	color: var(--pka-text);
}
hr {
	border: 0;
	height: 1px;
	background: var(--pka-border);
	margin-block: var(--pka-space-4);
}
img { max-width: 100%; height: auto; vertical-align: middle; }
video, embed, iframe, object { max-width: 100%; }
figure { margin: 0 0 var(--pka-space-3); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: var(--pka-space-1); border-bottom: 1px solid var(--pka-border); text-align: start; }

/* Dark text keeps small links readable; the underline carries brand orange. */
a {
	color: var(--pka-text);
	text-decoration-color: var(--pka-color-primary);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
	transition: text-decoration-color var(--pka-transition-fast);
}
a:hover, a:active { text-decoration-color: var(--pka-color-primary-shade); }
:focus-visible { outline: 2px solid var(--pka-text); outline-offset: 3px; }

button, input, select, optgroup, textarea {
	font: inherit;
	color: var(--pka-text);
	line-height: var(--pka-line-height-control);
}
button, input[type="button"], input[type="reset"], input[type="submit"] {
	background: var(--pka-color-primary);
	color: var(--pka-color-secondary);
	border: 1px solid var(--pka-color-primary);
	border-radius: var(--pka-radius);
	min-height: var(--pka-space-6);
	padding: var(--pka-space-1) var(--pka-space-3);
	font-weight: var(--pka-font-weight-semibold);
	cursor: pointer;
	transition: background-color var(--pka-transition-fast), border-color var(--pka-transition-fast);
}
button:enabled:hover, input[type="button"]:enabled:hover, input[type="reset"]:enabled:hover, input[type="submit"]:enabled:hover {
	background: var(--pka-color-primary-tint);
	border-color: var(--pka-color-primary-shade);
}
input:not([type]), input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], select, textarea {
	background: var(--pka-surface);
	border: 1px solid var(--pka-border);
	border-radius: var(--pka-radius);
	min-height: var(--pka-space-6);
	max-width: 100%;
	padding: var(--pka-space-1) var(--pka-space-2);
}
input, textarea, select { accent-color: var(--pka-color-primary); }
input:focus, textarea:focus, select:focus { border-color: var(--pka-color-primary); }
input::placeholder, textarea::placeholder { color: var(--pka-text-muted); opacity: 1; }
textarea { width: 100%; resize: vertical; }
fieldset { min-width: 0; margin: 0 0 var(--pka-space-3); padding: var(--pka-space-2); border: 1px solid var(--pka-border); }
button:disabled, input:disabled, select:disabled, textarea:disabled { opacity: 0.6; cursor: not-allowed; }