/* ---------------------------------------------------------------------------
 * GENERATED FILE — DO NOT EDIT HERE.
 *
 * Source: design/base.css
 * Sync:   python tools/sync-theme-css.py
 *
 * Edits made in this copy are lost on the next sync and are invisible to the
 * prototypes in design/prototypes/, which read the source directly.
 * ------------------------------------------------------------------------ */

/**
 * Mervia Group — base layer
 * Reset, element defaults, layout primitives, prose, utilities.
 *
 * Load order is fixed and matters: tokens.css → base.css → components.css
 * Nothing here knows about a specific component. If a rule needs a component
 * name to make sense, it belongs in components.css.
 *
 * Class prefixes (docs/01-decisions.md D-07):
 *   .co-*  layout primitives (container, section, grid, prose)
 *   .u-*   single-purpose utilities
 *   .c-*   components (components.css)
 */

/* ==========================================================================
   1. RESET
   ========================================================================== */

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

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
	tab-size: 4;
	/* Sticky header must not cover an anchored heading. */
	scroll-padding-top: calc(var(--co-header-height) + var(--co-space-5));
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	min-height: 100vh;
	background-color: var(--co-color-canvas);
	color: var(--co-color-text);
	font-family: var(--co-font-sans);
	font-size: var(--co-text-base);
	font-weight: var(--co-weight-regular);
	line-height: var(--co-leading-normal);
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	/* Numerals must align in spec tables and calculator output. */
	font-variant-numeric: tabular-nums lining-nums;
}

/* Prose gets proportional numerals back — tabular figures look wrong in a sentence. */
p,
li,
blockquote,
figcaption {
	font-variant-numeric: normal;
}

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

img,
video {
	height: auto;
}

svg {
	fill: currentColor;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
}

button {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

textarea {
	resize: vertical;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

/* German and Dutch compounds overflow narrow columns without this.
   Applied by language so English keeps clean unhyphenated ragging. */
:lang(de),
:lang(nl) {
	hyphens: auto;
	-webkit-hyphens: auto;
	hyphenate-limit-chars: 8 4 4;
}

ul[role="list"],
ol[role="list"] {
	list-style: none;
	padding: 0;
}

/* ==========================================================================
   2. ELEMENT DEFAULTS
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: var(--co-weight-semibold);
	line-height: var(--co-leading-snug);
	color: var(--co-color-text);
	text-wrap: balance; /* stops one-word last lines in headings */
}

h1 {
	font-size: var(--co-text-3xl);
	font-weight: var(--co-weight-bold);
	line-height: var(--co-leading-tight);
	letter-spacing: var(--co-tracking-tight);
}

h2 {
	font-size: var(--co-text-2xl);
	line-height: var(--co-leading-tight);
	letter-spacing: var(--co-tracking-tight);
}

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

h4 {
	font-size: var(--co-text-lg);
}

h5 {
	font-size: var(--co-text-md);
}

/* h6 is used only as a small caps label above a data block, never as a heading. */
h6 {
	font-size: var(--co-text-xs);
	text-transform: uppercase;
	letter-spacing: var(--co-tracking-wide);
	color: var(--co-color-text-muted);
}

a {
	color: var(--co-color-text-link);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color var(--co-transition-base);
}

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

strong,
b {
	font-weight: var(--co-weight-semibold);
}

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

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

code {
	background: var(--co-color-surface-sunken);
	border-radius: var(--co-radius-sm);
	padding: 0.12em 0.36em;
}

pre {
	overflow-x: auto;
	padding: var(--co-space-4);
	background: var(--co-color-surface-sunken);
	border-radius: var(--co-radius-md);
}

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

hr {
	border: 0;
	border-top: var(--co-border-width) solid var(--co-color-rule);
	margin-block: var(--co-space-7);
}

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

::selection {
	background: var(--co-ember-200);
	color: var(--co-slate-900);
}

/* ==========================================================================
   3. FOCUS
   ==========================================================================
   Keyboard focus is always visible and always the same shape. Mouse users
   never see it (:focus-visible), so there is no reason to weaken it.
   ---------------------------------------------------------------------- */

:focus-visible {
	outline: var(--co-border-width-thick) solid var(--co-color-focus);
	outline-offset: 2px;
	border-radius: var(--co-radius-sm);
}

:focus:not(:focus-visible) {
	outline: none;
}

/* ==========================================================================
   4. LAYOUT PRIMITIVES
   ========================================================================== */

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

.co-container--wide {
	max-width: var(--co-container-wide);
}

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

.co-container--flush {
	padding-inline: 0;
}

/* Vertical rhythm. Every full-width band on the site is a .co-section. */
.co-section {
	padding-block: var(--co-space-section);
}

.co-section--tight {
	padding-block: var(--co-space-section-tight);
}

.co-section--flush-top {
	padding-block-start: 0;
}

.co-section--flush-bottom {
	padding-block-end: 0;
}

.co-section--sunken {
	background: var(--co-color-surface-sunken);
}

.co-section--inverse {
	background: var(--co-color-surface-inverse);
	color: var(--co-color-text-inverse);
}

.co-section--inverse h1,
.co-section--inverse h2,
.co-section--inverse h3,
.co-section--inverse h4 {
	color: inherit;
}

.co-section--accent {
	background: var(--co-color-surface-accent);
}

/* Section header block: eyebrow + title + intro, used ~40 times across the site. */
.co-section__head {
	max-width: var(--co-measure);
	margin-bottom: var(--co-space-7);
}

.co-section__head--center {
	margin-inline: auto;
	text-align: center;
}

.co-section__eyebrow {
	display: block;
	font-size: var(--co-text-xs);
	font-weight: var(--co-weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--co-tracking-wide);
	color: var(--co-color-action);
	margin-bottom: var(--co-space-3);
}

.co-section--inverse .co-section__eyebrow {
	color: var(--co-ember-200);
}

.co-section__intro {
	font-size: var(--co-text-md);
	color: var(--co-color-text-muted);
	margin-top: var(--co-space-4);
}

.co-section--inverse .co-section__intro {
	color: var(--co-color-text-inverse-muted);
}

/* Stack: owl selector. Default vertical rhythm for flow content. */
.co-stack > * + * {
	margin-block-start: var(--co-space-stack);
}

.co-stack--sm {
	--co-space-stack: var(--co-space-2);
}

.co-stack--lg {
	--co-space-stack: var(--co-space-5);
}

.co-stack--xl {
	--co-space-stack: var(--co-space-7);
}

/* Cluster: horizontal group that wraps (button rows, badge rows, meta lines). */
.co-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--co-space-3);
}

.co-cluster--between {
	justify-content: space-between;
}

.co-cluster--center {
	justify-content: center;
}

.co-cluster--sm {
	gap: var(--co-space-2);
}

.co-cluster--lg {
	gap: var(--co-space-5);
}

/* ==========================================================================
   5. GRID
   ==========================================================================
   Auto-fit for card decks (never leaves a single orphan on a wide screen),
   explicit counts where the design demands a fixed rhythm (mega-menu, footer).
   ---------------------------------------------------------------------- */

.co-grid {
	display: grid;
	gap: var(--co-grid-gap);
}

.co-grid--auto {
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.co-grid--auto-sm {
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}

.co-grid--auto-lg {
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

.co-grid--2 {
	grid-template-columns: 1fr;
}

.co-grid--3,
.co-grid--4 {
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.co-grid--2,
	.co-grid--3,
	.co-grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.co-grid--3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.co-grid--4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Content + sidebar. Sidebar carries the short RFQ form on product pages. */
.co-grid--sidebar {
	grid-template-columns: 1fr;
	gap: var(--co-space-8);
}

@media (min-width: 1024px) {
	.co-grid--sidebar {
		grid-template-columns: minmax(0, 1fr) 340px;
		align-items: start;
	}

	.co-grid--sidebar-left {
		grid-template-columns: 280px minmax(0, 1fr);
	}
}

/* Media + text split, used by every "how it works" band. */
.co-grid--split {
	grid-template-columns: 1fr;
	gap: var(--co-space-7);
	align-items: center;
}

@media (min-width: 900px) {
	.co-grid--split {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--co-space-9);
	}
}

/* Product head: gallery beside specifications. Centring two columns of very
   different heights leaves the shorter one floating in the middle of the page. */
.co-grid--split-top {
	align-items: start;
}

/* ==========================================================================
   6. PROSE
   ==========================================================================
   Wraps every block of editor output: WordPress the_content(), guides,
   legal pages, product descriptions. The only place where bare <p> and <ul>
   get spacing — everywhere else spacing is a layout primitive's job.
   ---------------------------------------------------------------------- */

.co-prose {
	max-width: var(--co-measure);
}

.co-prose > * + * {
	margin-block-start: var(--co-space-5);
}

.co-prose > h2 {
	margin-block-start: var(--co-space-9);
	margin-block-end: var(--co-space-4);
	padding-block-end: var(--co-space-3);
	border-bottom: var(--co-border-width) solid var(--co-color-rule);
}

.co-prose > h3 {
	margin-block-start: var(--co-space-7);
	margin-block-end: var(--co-space-3);
}

.co-prose > h4 {
	margin-block-start: var(--co-space-6);
	margin-block-end: var(--co-space-2);
}

.co-prose > h2:first-child,
.co-prose > h3:first-child {
	margin-block-start: 0;
}

.co-prose > p {
	line-height: var(--co-leading-relaxed);
}

.co-prose > ul,
.co-prose > ol {
	padding-inline-start: var(--co-space-5);
}

.co-prose li + li {
	margin-block-start: var(--co-space-2);
}

.co-prose li::marker {
	color: var(--co-color-text-subtle);
}

.co-prose > blockquote {
	border-inline-start: var(--co-border-accent-width) solid var(--co-color-action);
	padding-inline-start: var(--co-space-5);
	font-size: var(--co-text-md);
	color: var(--co-color-text-muted);
}

.co-prose > figure > img {
	border-radius: var(--co-radius-md);
}

.co-prose figcaption {
	margin-block-start: var(--co-space-2);
	font-size: var(--co-text-sm);
	color: var(--co-color-text-muted);
}

.co-prose a {
	text-decoration: underline;
}

.co-prose > table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--co-text-sm);
}

.co-prose > table th,
.co-prose > table td {
	text-align: start;
	padding: var(--co-table-row-padding);
	border-bottom: var(--co-border-width) solid var(--co-color-border);
	vertical-align: top;
}

.co-prose > table th {
	font-weight: var(--co-weight-semibold);
	background: var(--co-color-surface-sunken);
}

/* Long-form editorial variant: guides and compliance articles use the serif. */
.co-prose--editorial > p,
.co-prose--editorial > ul,
.co-prose--editorial > ol,
.co-prose--editorial > blockquote {
	font-family: var(--co-font-serif);
	font-size: var(--co-text-md);
	line-height: var(--co-leading-relaxed);
}

/* Wide variant: product descriptions inside a card, no measure constraint. */
.co-prose--full {
	max-width: none;
}

/* ==========================================================================
   7. WORDPRESS CORE CLASSES
   ==========================================================================
   Required for editor output and accessibility even in a hand-built theme.
   ---------------------------------------------------------------------- */

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

.screen-reader-text:focus,
.u-visually-hidden:focus {
	position: fixed !important;
	top: var(--co-space-3);
	inset-inline-start: var(--co-space-3);
	z-index: var(--co-z-skiplink);
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	padding: var(--co-space-3) var(--co-space-5);
	background: var(--co-color-surface-inverse);
	color: var(--co-color-text-inverse);
	border-radius: var(--co-radius-md);
	box-shadow: var(--co-shadow-lg);
	font-weight: var(--co-weight-semibold);
	text-decoration: none;
}

.alignleft {
	float: left;
	margin: 0 var(--co-space-5) var(--co-space-4) 0;
}

.alignright {
	float: right;
	margin: 0 0 var(--co-space-4) var(--co-space-5);
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

.alignwide {
	max-width: min(var(--co-container), 100%);
	margin-inline: auto;
}

.alignfull {
	max-width: none;
	width: 100%;
}

.wp-caption {
	max-width: 100%;
}

.wp-caption-text {
	font-size: var(--co-text-sm);
	color: var(--co-color-text-muted);
	margin-block-start: var(--co-space-2);
}

.co-prose .wp-block-image,
.co-prose .wp-block-embed {
	margin-block: var(--co-space-6);
}

/* ==========================================================================
   8. UTILITIES
   ==========================================================================
   Deliberately short list. A utility earns its place only if it is needed in
   three or more unrelated places; otherwise it becomes a component rule.
   ---------------------------------------------------------------------- */

/* Text */
.u-text-muted { color: var(--co-color-text-muted); }
.u-text-subtle { color: var(--co-color-text-subtle); }
.u-text-accent { color: var(--co-color-action); }
.u-text-inverse { color: var(--co-color-text-inverse); }
.u-text-center { text-align: center; }
.u-text-start { text-align: start; }
.u-text-end { text-align: end; }
.u-text-balance { text-wrap: balance; }
.u-text-pretty { text-wrap: pretty; }
.u-text-nowrap { white-space: nowrap; }
.u-uppercase {
	text-transform: uppercase;
	letter-spacing: var(--co-tracking-wide);
}

.u-text-xs { font-size: var(--co-text-xs); }
.u-text-sm { font-size: var(--co-text-sm); }
.u-text-md { font-size: var(--co-text-md); }
.u-text-lg { font-size: var(--co-text-lg); }
.u-mono { font-family: var(--co-font-mono); }
.u-serif { font-family: var(--co-font-serif); }
.u-weight-medium { font-weight: var(--co-weight-medium); }
.u-weight-semibold { font-weight: var(--co-weight-semibold); }
.u-weight-bold { font-weight: var(--co-weight-bold); }

/* Measure */
.u-measure { max-width: var(--co-measure); }
.u-measure-short { max-width: var(--co-measure-short); }

/* Spacing escape hatches — only these six exist on purpose. */
.u-mt-0 { margin-block-start: 0; }
.u-mb-0 { margin-block-end: 0; }
.u-mt-4 { margin-block-start: var(--co-space-5); }
.u-mb-4 { margin-block-end: var(--co-space-5); }
.u-mt-7 { margin-block-start: var(--co-space-7); }
.u-mb-7 { margin-block-end: var(--co-space-7); }

/* Surface */
.u-surface {
	background: var(--co-color-surface);
	border: var(--co-border-width) solid var(--co-color-border);
	border-radius: var(--co-radius-md);
}

.u-sunken { background: var(--co-color-surface-sunken); }
.u-pad { padding: var(--co-card-padding); }
.u-rule-top { border-top: var(--co-border-width) solid var(--co-color-rule); }
.u-rule-bottom { border-bottom: var(--co-border-width) solid var(--co-color-rule); }

/* Display */
.u-block { display: block; }
.u-flex { display: flex; }
.u-grid { display: grid; }
.u-hidden { display: none !important; }
.u-full-width { width: 100%; }

@media (max-width: 767px) {
	.u-hide-mobile { display: none !important; }
}

@media (min-width: 768px) and (max-width: 1023px) {
	.u-hide-tablet { display: none !important; }
}

@media (min-width: 1024px) {
	.u-hide-desktop { display: none !important; }
}

@media print {
	.u-hide-print { display: none !important; }
}

/* Media */
.u-aspect-4-3 { aspect-ratio: 4 / 3; }
.u-aspect-16-9 { aspect-ratio: 16 / 9; }
.u-aspect-square { aspect-ratio: 1; }

.u-cover {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.u-contain {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Horizontal scroll container for wide spec tables on phones. */
.u-scroll-x {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}

/* Sticky sidebar for product spec navigation and the short RFQ form. */
.u-sticky {
	position: sticky;
	top: calc(var(--co-header-height) + var(--co-space-5));
}

@media (max-width: 1023px) {
	.u-sticky { position: static; }
}