/*
 * Base: reset, typography defaults, bare element styles.
 *
 * Depends on tokens.css — every value here is a custom property, never a
 * literal, with the single exception of the media query conditions (custom
 * properties are not allowed in a media condition).
 *
 * Scope: unclassed HTML only. A page of raw markup — the editor output, a
 * plugin's form, an email-rendered post — should already look like SharpQuery
 * after this file. Containers, bands, buttons and site furniture live in
 * chrome.css; section styles live in sections/<layout>.css.
 *
 * No !important anywhere in this theme.
 */

/* ============================================================== RESET == */

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

/* Only the elements that carry a UA margin worth clearing. */
body,
h1, h2, h3, h4, h5, h6,
p,
figure,
blockquote,
dl, dd,
fieldset {
	margin: 0;
}

/*
 * Wrapped in :where() so the reset carries ZERO specificity.
 *
 * `ul[class]` is (0,1,1) — an attribute selector outranks a single class — so
 * without this it beats every `.section__list { padding: … }` in the theme
 * whatever the load order. That silently flattened the padding on thirteen
 * rules across nine files, including the hero trust bullets.
 *
 * A reset should never win an argument with the thing it is resetting.
 */
:where(ul[class]),
:where(ol[class]) {
	margin: 0;
	padding: 0;
	list-style: none;
}

html {
	/* Never set a px font-size here — it breaks the browser's own text
	 * setting, and every rem token below depends on it. */
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
}

/* Anchored section links must not slide under the sticky header. */
:target {
	scroll-margin-top: calc(var(--sq-header-height) + var(--sq-space-4));
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms;
		animation-iteration-count: 1;
		transition-duration: 0.01ms;
	}
}

body {
	background-color: var(--sq-color-concrete);
	color: var(--sq-color-ink);
	font-family: var(--sq-font-body);
	font-size: var(--sq-text-body);
	font-weight: var(--sq-weight-regular);
	line-height: var(--sq-leading-relaxed);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word;
}

::selection {
	background-color: var(--sq-color-ink);
	color: var(--sq-color-paper);
}


/* ========================================================= TYPOGRAPHY == */

/* Condensed, uppercase, tight. The two display levels. */
h1,
h2 {
	font-family: var(--sq-font-display);
	font-weight: var(--sq-weight-bold);
	text-transform: uppercase;
	text-wrap: balance;
}

h1 {
	font-size: var(--sq-text-display);
	line-height: var(--sq-leading-display);
	letter-spacing: var(--sq-tracking-display);
}

h2 {
	font-size: var(--sq-text-h2);
	line-height: var(--sq-leading-tight);
}

/* Barlow from h3 down — these are read, not scanned. */
h3,
h4,
h5,
h6 {
	font-family: var(--sq-font-body);
	font-weight: var(--sq-weight-semibold);
	line-height: var(--sq-leading-snug);
	text-transform: none;
	text-wrap: balance;
}

h3 {
	font-size: var(--sq-text-h3);
}

h4 {
	font-size: var(--sq-text-lead);
}

h5,
h6 {
	font-size: var(--sq-text-body);
	font-weight: var(--sq-weight-bold);
}

p {
	max-width: var(--sq-measure);
	text-wrap: pretty;
}

/* Vertical rhythm comes from the flow, not from margins on every element. */
p + p,
p + ul,
p + ol,
p + blockquote,
p + figure,
ul + p,
ol + p,
blockquote + p,
figure + p {
	margin-top: var(--sq-space-4);
}

h2 + *,
h3 + *,
h4 + * {
	margin-top: var(--sq-space-3);
}

* + h2 {
	margin-top: var(--sq-space-6);
}

* + h3,
* + h4 {
	margin-top: var(--sq-space-5);
}

strong,
b {
	font-weight: var(--sq-weight-bold);
}

small {
	font-size: var(--sq-text-small);
}

/* Grey body text is banned by the design system. This is the one licensed
 * use of support ink, and it never goes lighter. */
figcaption,
.caption {
	color: var(--sq-fg-muted);
	font-size: var(--sq-text-small);
	line-height: var(--sq-leading-normal);
}

abbr[title] {
	text-decoration: underline dotted;
	cursor: help;
}

code,
kbd,
samp,
pre {
	font-family: var(--sq-font-mono);
	font-size: 0.9375em;
}

pre {
	overflow-x: auto;
	padding: var(--sq-space-4);
	border: var(--sq-border-width) solid var(--sq-border);
	background-color: var(--sq-color-surface-raised);
	line-height: var(--sq-leading-normal);
}

blockquote {
	max-width: var(--sq-measure);
	padding-left: var(--sq-space-5);
	border-left: var(--sq-border-width-accent) solid var(--sq-color-blue);
	font-size: var(--sq-text-lead);
	font-weight: var(--sq-weight-medium);
	line-height: 1.45;
}

hr {
	height: 0;
	margin-block: var(--sq-space-6);
	border: 0;
	border-top: var(--sq-border-width) solid var(--sq-border);
}


/* ============================================================== LINKS == */

a {
	color: var(--sq-link);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: from-font;
}

a:hover {
	color: var(--sq-link-hover);
}

/* A link wrapping a block — a card, an image — opts out of the underline. */
a:has(> img),
a:has(> figure) {
	text-decoration: none;
}


/* ============================================================== LISTS == */

ul:not([class]),
ol:not([class]) {
	max-width: var(--sq-measure);
	margin: 0;
	padding-left: 1.25em;
}

ul:not([class]) {
	list-style: disc;
}

ol:not([class]) {
	list-style: decimal;
}

li + li {
	margin-top: var(--sq-space-2);
}

dt {
	font-weight: var(--sq-weight-bold);
}

dd {
	margin-left: 0;
}


/* ============================================================== MEDIA == */

img,
picture,
video,
canvas,
svg,
iframe {
	display: block;
	max-width: 100%;
}

/* Core emits width and height on every image; honouring the intrinsic ratio
 * while preserving responsive scaling is what keeps CLS under 0.1. */
img,
video {
	height: auto;
}

img {
	border-style: none;
	background-color: var(--sq-color-surface-sunken);
}

svg {
	fill: currentColor;
}

figure {
	max-width: 100%;
}

figcaption {
	margin-top: var(--sq-space-3);
}


/* ============================================================= TABLES == */

table {
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	font-variant-numeric: tabular-nums;
}

caption {
	margin-bottom: var(--sq-space-3);
	color: var(--sq-fg-muted);
	font-size: var(--sq-text-small);
	text-align: left;
}

th,
td {
	padding: var(--sq-space-3) var(--sq-space-4);
	border-bottom: var(--sq-border-width-hair) solid var(--sq-rule);
	text-align: left;
	vertical-align: top;
}

thead th {
	border-bottom: var(--sq-border-width) solid var(--sq-border);
	font-size: var(--sq-text-label-sm);
	font-weight: var(--sq-weight-bold);
	letter-spacing: var(--sq-tracking-label-sm);
	text-transform: uppercase;
}

tbody th {
	font-weight: var(--sq-weight-semibold);
}


/* ============================================================== FORMS == */

/* Controls do not inherit type by default. */
button,
input,
optgroup,
select,
textarea {
	margin: 0;
	font-family: inherit;
	font-size: var(--sq-text-body);
	line-height: inherit;
	color: inherit;
}

label {
	display: block;
	font-size: 0.9375rem; /* 15 */
	font-weight: var(--sq-weight-bold);
	letter-spacing: var(--sq-tracking-form);
	text-transform: uppercase;
}

label + input,
label + select,
label + textarea {
	margin-top: var(--sq-space-2);
}

input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']),
select,
textarea {
	width: 100%;
	min-height: var(--sq-control-height);
	padding: 0 var(--sq-input-padding-x);
	border: var(--sq-border-width) solid var(--sq-color-ink);
	border-radius: var(--sq-radius);
	background-color: var(--sq-color-paper);
	color: var(--sq-color-ink);
	appearance: none;
}

textarea {
	min-height: calc(var(--sq-control-height) * 2);
	padding-block: var(--sq-space-3);
	line-height: var(--sq-leading-normal);
	resize: vertical;
}

select {
	padding-right: var(--sq-space-6);
	cursor: pointer;
}

::placeholder {
	color: var(--sq-fg-muted);
	opacity: 1;
}

/* aria-invalid is the hook — the error state should never be styling alone. */
[aria-invalid='true'],
.is-invalid {
	border-color: var(--sq-color-danger);
	background-color: var(--sq-color-danger-surface);
}

input[type='checkbox'],
input[type='radio'] {
	width: 1.25rem;  /* 20 */
	height: 1.25rem;
	accent-color: var(--sq-color-blue);
}

/* Every checkbox and radio needs a 44px target even though the box is 20px. */
input[type='checkbox'] + label,
input[type='radio'] + label,
label:has(> input[type='checkbox']),
label:has(> input[type='radio']) {
	display: flex;
	gap: var(--sq-space-3);
	align-items: flex-start;
	min-height: var(--sq-tap-target);
	font-size: var(--sq-text-body);
	font-weight: var(--sq-weight-regular);
	letter-spacing: var(--sq-tracking-normal);
	text-transform: none;
	cursor: pointer;
}

button,
[type='button'],
[type='submit'],
[type='reset'] {
	min-height: var(--sq-control-height);
	padding: 0 var(--sq-control-padding-x);
	border: var(--sq-border-width) solid var(--sq-color-ink);
	border-radius: var(--sq-radius);
	background-color: var(--sq-color-paper);
	font-weight: var(--sq-weight-bold);
	text-align: center;
	cursor: pointer;
	appearance: none;
}

:disabled {
	border-color: var(--sq-color-disabled-border);
	background-color: var(--sq-color-disabled-surface);
	color: var(--sq-color-disabled-ink);
	cursor: not-allowed;
}

fieldset {
	padding: 0;
	border: 0;
}

legend {
	padding: 0;
	font-size: var(--sq-text-h3);
	font-weight: var(--sq-weight-semibold);
}


/* ========================================================== DISCLOSURE ==
 * The FAQ accordion is native <details>. No JavaScript, no ARIA to keep in
 * sync, and it stays open when the user prints or searches the page.
 */

summary {
	display: flex;
	gap: var(--sq-space-3);
	align-items: center;
	justify-content: space-between;
	min-height: var(--sq-tap-target);
	padding-block: var(--sq-space-3);
	font-size: var(--sq-text-h3);
	font-weight: var(--sq-weight-semibold);
	cursor: pointer;
	list-style: none;
}

summary::-webkit-details-marker {
	display: none;
}

/* A drawn marker rather than the UA triangle, so it matches the hard-edged
 * geometry everywhere else. */
summary::after {
	flex: 0 0 auto;
	width: 0.75rem;
	height: 0.75rem;
	border-right: var(--sq-border-width) solid currentColor;
	border-bottom: var(--sq-border-width) solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform var(--sq-duration) var(--sq-ease);
	content: '';
}

details[open] > summary::after {
	transform: rotate(225deg) translate(-2px, -2px);
}


/* ====================================================== ACCESSIBILITY == */

/* One focus style, everywhere, on every interactive element. Never remove it. */
:focus-visible {
	outline: 3px solid var(--sq-color-blue);
	outline-offset: 2px;
}

.sq-on-dark :focus-visible {
	outline-color: var(--sq-color-paper);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus-within,
.screen-reader-text:focus {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip-path: none;
	white-space: normal;
}

/* Programmatic focus targets — #main, a dialog — should not draw a ring. */
[tabindex='-1']:focus:not(:focus-visible) {
	outline: none;
}

@media print {
	body {
		background: none;
		color: #000;
		font-size: 12pt;
	}

	a::after {
		content: ' (' attr(href) ')';
		font-size: 0.9em;
		word-break: break-all;
	}

	details {
		/* Print the answers, not just the questions. */
		display: block;
	}

	details > *:not(summary) {
		display: block;
	}
}