/**
 * Axsia Howmar — base stylesheet.
 *
 * 1. Colour-scheme custom properties (light default, dark by preference or toggle)
 * 2. Document defaults
 * 3. Focus, skip link, target size
 * 4. Typography utilities: lede, mono figures, byline
 * 5. Tables
 * 6. Buttons: secondary style
 * 7. Bands and cards
 * 8. Motion, forced colours
 *
 * Contrast (WCAG 2.2 AA), measured:
 *   light: ink/bg 13.9, muted/bg 6.3, accent/bg 7.5, white/accent 8.0, control border/bg 4.5
 *   dark:  ink/bg 14.6, muted/bg 8.3, accent/bg 10.0, bg/accent 10.0, control border/bg 5.4
 */

/* 1. Colour schemes ------------------------------------------------------ */

:root {
	color-scheme: light dark;

	--ax-bg: #f5f7f4;
	--ax-surface: #ffffff;
	--ax-surface-2: #e6ede8;
	--ax-ink: #0b2b2e;
	--ax-muted: #46605f;
	--ax-border: #d3ddd8;
	--ax-border-strong: #5e7775;
	--ax-accent: #0e5a55;
	--ax-accent-ink: #ffffff;
	--ax-focus: #0e5a55;

	/* Inverse bands: logo teal on light; a raised panel on dark. */
	--ax-inverse-bg: #0f5151;
	--ax-inverse-ink: #ffffff;
	--ax-inverse-accent: #90d7ac;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--ax-bg: #0a1f21;
		--ax-surface: #112c2e;
		--ax-surface-2: #173a3c;
		--ax-ink: #e6efec;
		--ax-muted: #a3bab5;
		--ax-border: #24474a;
		--ax-border-strong: #7a9691;
		--ax-accent: #90d7ac;
		--ax-accent-ink: #0a1f21;
		--ax-focus: #90d7ac;
		--ax-inverse-bg: #0f5151;
		--ax-inverse-ink: #ffffff;
		--ax-inverse-accent: #90d7ac;
	}
}

:root[data-theme="dark"] {
	color-scheme: dark;
	--ax-bg: #0a1f21;
	--ax-surface: #112c2e;
	--ax-surface-2: #173a3c;
	--ax-ink: #e6efec;
	--ax-muted: #a3bab5;
	--ax-border: #24474a;
	--ax-border-strong: #7a9691;
	--ax-accent: #90d7ac;
	--ax-accent-ink: #0a1f21;
	--ax-focus: #90d7ac;
	--ax-inverse-bg: #0f5151;
	--ax-inverse-ink: #ffffff;
	--ax-inverse-accent: #90d7ac;
}

:root[data-theme="light"] {
	color-scheme: light;
}

/* 2. Document defaults --------------------------------------------------- */

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: 5rem; /* Anchored symptom links clear the sticky header. */
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-synthesis: none;
	overflow-wrap: break-word;
}

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

/* 65–75 character measure for running text, wherever it appears. */
:where(.wp-block-post-content, .entry-content) :where(p, li, dd, blockquote) {
	max-width: var(--wp--custom--measure);
}

:where(h1, h2, h3, h4) {
	text-wrap: balance;
}

:where(p, li) {
	text-wrap: pretty;
}

::selection {
	background: var(--ax-ink);
	color: var(--ax-bg);
}

/* 3. Focus, skip link, target size -------------------------------------- */

:focus-visible {
	outline: 3px solid var(--ax-focus);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--sm);
}

/* On the accent itself and on inverse bands the ring must still show. */
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible {
	outline-color: var(--ax-ink);
	outline-offset: 3px;
}

.has-inverse-background-color :focus-visible {
	outline-color: var(--ax-inverse-accent);
}

.skip-link.screen-reader-text:focus {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: 0.75rem 1rem;
	clip: auto;
	clip-path: none;
	background: var(--ax-ink);
	color: var(--ax-bg);
	font-weight: 600;
	text-decoration: underline;
}

/* WCAG 2.2 target size: interactive controls at least 44 x 44 CSS px. */
.wp-element-button,
.wp-block-button__link,
button,
input[type="submit"],
input[type="button"],
select {
	min-height: var(--wp--custom--target-size);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="date"],
select,
textarea {
	min-height: var(--wp--custom--target-size);
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--ax-border-strong);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--ax-surface);
	color: var(--ax-ink);
	font: inherit;
}

label {
	font-weight: 500;
}

/* 4. Typography utilities ------------------------------------------------ */

/* The 40–60 word direct answer that opens every page. */
.is-style-lede,
.ax-lede {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
	color: var(--ax-ink);
	max-width: var(--wp--custom--measure);
}

/* Monospace is reserved for figures, units, SKUs and tag numbers. */
.is-style-mono,
.ax-mono,
data,
code,
kbd,
samp {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.9375em;
	font-variant-numeric: tabular-nums slashed-zero;
	font-feature-settings: "zero" 1;
	letter-spacing: 0;
}

.ax-unit {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.875em;
	color: var(--ax-muted);
	white-space: nowrap;
}

sub,
sup {
	font-size: 0.75em;
	line-height: 0;
}

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

.axsia-byline {
	margin-block: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
	color: var(--ax-muted);
}

.axsia-byline a {
	color: inherit;
}

/* Glossary auto-links: quieter than action links, still underlined. */
a.axsia-glossary-link {
	color: inherit;
	text-decoration: underline dotted;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

a.axsia-glossary-link:hover {
	text-decoration-style: solid;
}

.ax-eyebrow {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ax-muted);
}

/* 5. Tables -------------------------------------------------------------- */

.wp-block-table,
.ax-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.wp-block-table table,
.ax-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}

.wp-block-table caption,
.ax-table caption,
.wp-block-table figcaption {
	padding-block: 0.5rem;
	text-align: left;
	font-weight: 600;
	color: var(--ax-ink);
	caption-side: top;
}

.wp-block-table th,
.wp-block-table td,
.ax-table th,
.ax-table td {
	padding: 0.625rem 0.75rem;
	border: 0;
	border-bottom: 1px solid var(--ax-border);
	text-align: left;
	vertical-align: top;
}

.wp-block-table thead th,
.ax-table thead th {
	border-bottom: 2px solid var(--ax-ink);
	background: var(--ax-bg);
	font-weight: 600;
	white-space: nowrap;
}

.ax-table tbody th {
	font-weight: 500;
}

/* Data style: numeric cells in mono, right-aligned with tabular figures. */
.is-style-data td,
.ax-table td.ax-num {
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums slashed-zero;
}

.ax-table td.ax-num,
.ax-table th.ax-num {
	text-align: right;
	white-space: nowrap;
}

.ax-table--sticky thead th {
	position: sticky;
	top: 0;
	z-index: 1;
}

/* 6. Buttons: secondary (outline) --------------------------------------- */

.wp-block-button.is-style-outline .wp-block-button__link {
	padding: calc(0.8125rem - 2px) calc(1.5rem - 2px);
	border: 2px solid var(--ax-ink);
	background: transparent;
	color: var(--ax-ink);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--ax-ink);
	color: var(--ax-bg);
}

.wp-element-button,
.wp-block-button__link {
	transition: background-color var(--wp--custom--transition), color var(--wp--custom--transition);
}

/* 7. Bands and cards ----------------------------------------------------- */

.has-inverse-background-color {
	color: var(--ax-inverse-ink);
}

.has-inverse-background-color :where(h1, h2, h3, h4, h5, h6) {
	color: var(--ax-inverse-ink);
}

.has-inverse-background-color a:not(.wp-element-button) {
	color: var(--ax-inverse-accent);
}

.ax-card {
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--ax-border);
	border-radius: var(--wp--custom--radius--md);
	background: var(--ax-surface);
}

/* Emphasised figure: the only non-action use of the accent. */
.ax-figure-emphasis {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 500;
	color: var(--ax-accent);
}

.ax-placeholder {
	padding: 0 0.25em;
	outline: 1px dashed var(--ax-border-strong);
	background: var(--ax-surface-2);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.875em;
}

/* 8. Motion and forced colours ------------------------------------------ */

@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;
	}
}

@media (forced-colors: active) {
	:focus-visible {
		outline-color: Highlight;
	}

	.wp-element-button,
	.wp-block-button__link,
	.ax-card {
		border: 1px solid ButtonText;
	}
}