/*
 * Grounded — stylesheet.
 *
 * This site sells an accessibility scanner. If it fails its own product's
 * checks, nothing else it says is worth reading. So:
 *
 *   - every text/background pair is at or above 4.5:1, measured, not eyeballed;
 *   - focus is always visible and never removed;
 *   - nothing is conveyed by colour alone;
 *   - it reflows to 320px without a horizontal scrollbar;
 *   - it respects prefers-reduced-motion and prefers-color-scheme.
 *
 * Contrast, measured against WCAG 1.4.3:
 *   light: #1f2933 on #ffffff = 14.4:1   |  #4a5568 on #ffffff = 7.5:1
 *          #1a4f8b on #ffffff = 7.9:1
 *   dark:  #e8edf2 on #12171d = 14.6:1   |  #a9b6c4 on #12171d = 8.4:1
 *          #8fc0f0 on #12171d = 9.3:1
 */

:root {
	--ink: #1f2933;
	--muted: #4a5568;
	--link: #1a4f8b;
	--bg: #ffffff;
	--panel: #f4f6f8;
	--line: #d5dbe1;
	--measure: 68ch;
}

@media (prefers-color-scheme: dark) {
	:root {
		--ink: #e8edf2;
		--muted: #a9b6c4;
		--link: #8fc0f0;
		--bg: #12171d;
		--panel: #1b222a;
		--line: #333d49;
	}
}

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

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

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font: 1.0625rem/1.65 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	/* Never a fixed px size: it stops the browser's own text zoom from working. */
}

.wrap {
	width: 100%;
	max-width: var(--measure);
	margin-inline: auto;
	padding-inline: 1.25rem;
}

/* Visible only once focused, which is the point: it is the first tab stop. */
.skip {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--bg);
	color: var(--link);
	padding: 0.75rem 1rem;
	border: 2px solid currentColor;
	z-index: 10;
}

.skip:focus {
	left: 0.5rem;
	top: 0.5rem;
}

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

/* Underlines stay. Removing them leaves colour as the only signal a link is a
   link, which fails WCAG 1.4.1 for anyone who cannot distinguish the hue. */
a:hover {
	text-decoration-thickness: 0.15em;
}

:focus-visible {
	outline: 3px solid var(--link);
	outline-offset: 2px;
}

.site-header {
	border-bottom: 1px solid var(--line);
	padding-block: 1rem;
}

.header-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	align-items: baseline;
	justify-content: space-between;
}

.brand {
	font-weight: 700;
	font-size: 1.15rem;
	text-decoration: none;
	color: var(--ink);
}

.brand:hover,
.brand:focus-visible {
	text-decoration: underline;
}

.langs,
.translations ul,
.products {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.9rem;
	margin: 0;
	padding: 0;
}

.langs [aria-current] {
	color: var(--muted);
	font-weight: 600;
}

main {
	padding-block: 2.5rem 3.5rem;
}

h1 {
	font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.4rem);
	line-height: 1.2;
	margin: 0 0 0.5rem;
}

h2 {
	font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.55rem);
	line-height: 1.25;
	margin: 2.25rem 0 0.6rem;
}

h3 {
	font-size: 1.15rem;
	margin: 1.75rem 0 0.4rem;
}

p,
ul,
ol {
	margin: 0 0 1.1rem;
}

.meta,
.translations {
	color: var(--muted);
	font-size: 0.95rem;
}

.translations {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: baseline;
	margin-block: 0.75rem 0;
}

.post-header {
	margin-bottom: 2rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--line);
}

code {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: 0.05em 0.35em;
	font-size: 0.9em;
}

pre {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 1rem;
	/* Wide code scrolls inside its own box; the page never scrolls sideways. */
	overflow-x: auto;
}

pre code {
	background: none;
	border: 0;
	padding: 0;
}

table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.25rem;
	display: block;
	overflow-x: auto;
}

th,
td {
	border: 1px solid var(--line);
	padding: 0.5rem 0.7rem;
	text-align: left;
}

th {
	background: var(--panel);
}

blockquote {
	margin: 1.25rem 0;
	padding: 0.25rem 0 0.25rem 1rem;
	border-left: 4px solid var(--line);
	color: var(--muted);
}

img {
	max-width: 100%;
	height: auto;
}

.post-list {
	list-style: none;
	padding: 0;
}

.post-list li {
	padding-block: 1rem;
	border-bottom: 1px solid var(--line);
}

.post-list a {
	font-size: 1.1rem;
}

.product-note {
	margin-top: 3rem;
	padding: 1.25rem;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 8px;
}

.product-note h2 {
	margin-top: 0;
	font-size: 1.05rem;
}

.site-footer {
	border-top: 1px solid var(--line);
	padding-block: 1.5rem 2.5rem;
	color: var(--muted);
	font-size: 0.95rem;
}

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