/*
 * Vellren base: reset, elements, typography, layout, focus.
 * Replaces Hello Elementor's reset.css and theme.css (switched off in inc/setup.php).
 * Semantic tokens only (see tokens.css). Rules: docs/VELLREN-MASTER-PLAN.md Part A.
 */

/* ---------------------------------------------------------------- Reset */
*, *::before, *::after { box-sizing: border-box; }
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	/* Keep focused elements and anchor targets clear of the sticky header (WCAG 2.4.11). */
	scroll-padding-top: calc(var(--v-header-h) + var(--wp-admin--admin-bar--height, 0px) + var(--v-space-4));
}
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}
body {
	margin: 0;
	background: var(--v-surface);
	color: var(--v-text);
	font-family: var(--v-font-body);
	font-size: var(--v-text-body);
	font-weight: var(--v-weight-regular);
	line-height: var(--v-lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
	touch-action: manipulation;
}
img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
	height: auto;
}
button, input, select, textarea {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	margin: 0;
}
p, ul, ol, dl, figure, blockquote { margin: 0; }
hr {
	border: 0;
	border-top: var(--v-hairline) solid var(--v-border);
	margin: var(--v-space-6) 0;
}
[hidden] { display: none !important; }
::selection {
	background: var(--v-selection-bg);
	color: var(--v-selection-text);
}

/* ---------------------------------------------------------------- Typography (§4)
   Cormorant Garamond: headings >= 28px only. Manrope: everything else. Sentence case, no all-caps headings. */
body {
	font-kerning: normal;
	font-optical-sizing: auto;
	text-rendering: optimizeLegibility;
}
h1, h2, h3,
.v-display, .v-h1, .v-h2, .v-h3 {
	font-family: var(--v-font-display);
	font-weight: var(--v-weight-medium);
	color: var(--v-heading);
	text-wrap: balance;
	hyphens: none;
	margin: 0;
}
.v-display {
	font-size: var(--v-text-display);
	line-height: var(--v-lh-display);
	letter-spacing: var(--v-track-display);
}
h1, .v-h1 {
	font-size: var(--v-text-h1);
	line-height: var(--v-lh-h1);
	letter-spacing: var(--v-track-h1);
}
h2, .v-h2 {
	font-size: var(--v-text-h2);
	line-height: var(--v-lh-heading);
	letter-spacing: var(--v-track-h2);
}
h3, .v-h3 {
	font-size: var(--v-text-h3);
	font-weight: var(--v-weight-semibold);
	line-height: var(--v-lh-h3);
}
/* Italic emphasis: one word per headline; room for descenders */
:is(h1, h2, h3, .v-display, .v-h1, .v-h2, .v-h3) em {
	font-style: italic;
	line-height: 1.1;
}
h4, h5, h6, .v-h4 {
	font-family: var(--v-font-body);
	font-size: var(--v-text-h4);
	font-weight: var(--v-weight-bold);
	line-height: var(--v-lh-ui);
	color: var(--v-heading);
	margin: 0;
}
.v-body { font-size: var(--v-text-body); line-height: var(--v-lh-body); }
.v-body-lg { font-size: var(--v-text-body-lg); line-height: var(--v-lh-long); }
.v-ui {
	font-size: var(--v-text-ui);
	font-weight: var(--v-weight-semibold);
	letter-spacing: var(--v-track-ui);
	line-height: var(--v-lh-ui);
}
.v-small { font-size: var(--v-text-small); line-height: var(--v-lh-body); }
.v-label {
	font-size: var(--v-text-label);
	font-weight: var(--v-weight-semibold);
	letter-spacing: var(--v-track-label);
	line-height: var(--v-lh-ui);
	text-transform: uppercase;
	color: var(--v-text-muted);
}
.v-price,
.v-num {
	font-variant-numeric: tabular-nums lining-nums;
}
.v-price {
	font-size: var(--v-text-price);
	font-weight: var(--v-weight-semibold);
	line-height: var(--v-lh-ui);
}
.v-muted { color: var(--v-text-muted); }
p { text-wrap: pretty; }
strong, b { font-weight: var(--v-weight-bold); }
small { font-size: var(--v-text-small); }

/* Long-form text (Journal, policies, product descriptions): measure + rhythm */
.v-prose {
	max-width: var(--v-measure);
	font-size: var(--v-text-body-lg);
	line-height: var(--v-lh-long);
}
.v-prose > * + * { margin-top: var(--v-space-5); }
.v-prose > :is(h2, h3) { margin-top: var(--v-space-9); }
.v-prose > :is(h2, h3) + * { margin-top: var(--v-space-4); }
.v-prose :is(ul, ol) { padding-left: var(--v-space-5); }
.v-prose li + li { margin-top: var(--v-space-2); }
.v-prose blockquote {
	padding-left: var(--v-space-5);
	border-left: var(--v-hairline-strong) solid var(--v-border-strong);
	font-family: var(--v-font-display);
	font-size: var(--v-text-h3);
	line-height: var(--v-lh-h3);
}

/* ---------------------------------------------------------------- Links
   At rest: a visible underline (colour is never the only cue, WCAG 1.4.1).
   On hover: the underline becomes the Stitch, drawing left to right (§6, §7.1). */
a {
	color: var(--v-link);
	text-decoration-line: underline;
	text-decoration-thickness: var(--v-hairline);
	text-underline-offset: 0.2em;
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
	transition: color var(--v-dur-hover) var(--v-ease-out), text-decoration-color var(--v-dur-hover) var(--v-ease-out);
}
a:hover { color: var(--v-link-hover); }
@media (hover: hover) and (pointer: fine) {
	:is(.v-prose, .elementor-widget-text-editor) a,
	.v-link {
		background-image: repeating-linear-gradient(90deg, currentColor 0 var(--v-stitch-dash), transparent var(--v-stitch-dash) calc(var(--v-stitch-dash) + var(--v-stitch-gap)));
		background-repeat: no-repeat;
		background-position: 0 100%;
		background-size: 0% var(--v-stitch-width);
		padding-bottom: 0.15em;
		transition: background-size var(--v-dur-ui) var(--v-ease-out), color var(--v-dur-hover) var(--v-ease-out), text-decoration-color var(--v-dur-hover) var(--v-ease-out);
	}
	.v-link { text-decoration-color: transparent; }
	:is(.v-prose, .elementor-widget-text-editor) a:hover,
	.v-link:hover {
		text-decoration-color: transparent;
		background-size: 100% var(--v-stitch-width);
	}
}
@media (prefers-reduced-motion: reduce) {
	:is(.v-prose, .elementor-widget-text-editor) a, .v-link { transition: none; }
}
/* Links inside Elementor text widgets keep their underline (WCAG 1.4.1). Elementor ships
   `.elementor a { text-decoration: none }`, so this rule is deliberately more specific. */
.elementor .elementor-widget-text-editor a {
	text-decoration-line: underline;
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}

/* Links that are UI (nav, cards, buttons) opt out of the text underline */
.v-link--plain,
a.v-card,
.v-card__link,
nav a {
	text-decoration: none;
}

/* ---------------------------------------------------------------- Focus (WCAG 2.4.7, 2.4.11) */
:focus { outline: none; }
:focus-visible {
	outline: var(--v-hairline-strong) solid var(--v-focus);
	outline-offset: var(--v-hairline-strong);
	box-shadow: 0 0 0 var(--v-hairline-strong) var(--v-focus-offset);
}

/* ---------------------------------------------------------------- Accessibility helpers */
.v-visually-hidden,
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.skip-link.screen-reader-text:focus,
.v-skip-link:focus {
	position: fixed !important;
	top: var(--v-space-4);
	left: var(--v-space-4);
	z-index: var(--v-z-toast);
	width: auto;
	height: auto;
	clip: auto;
	margin: 0;
	padding: var(--v-space-3) var(--v-space-5);
	background: var(--v-surface);
	color: var(--v-text);
	font-weight: var(--v-weight-semibold);
	text-decoration: none;
	box-shadow: var(--v-shadow-overlay);
}

/* ---------------------------------------------------------------- Tables (data tables, size charts)
   Thin rule under the header, generous padding, no zebra stripes, aligned numbers. */
table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--v-text-small);
	font-variant-numeric: tabular-nums lining-nums;
}
th, td {
	padding: var(--v-space-3) var(--v-space-4);
	text-align: left;
	vertical-align: top;
	border-bottom: var(--v-hairline) solid var(--v-border);
}
thead th {
	font-weight: var(--v-weight-semibold);
	color: var(--v-text-muted);
	border-bottom: var(--v-hairline) solid var(--v-border-strong);
}
.v-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ---------------------------------------------------------------- Layout (§5) */
.v-container {
	width: 100%;
	max-width: calc(var(--v-container) + 2 * var(--v-gutter));
	margin-inline: auto;
	padding-inline: var(--v-gutter);
}
.v-section {
	padding-block: var(--v-section-y);
	background: var(--v-surface);
	color: var(--v-text);
}
.v-section--alt { background: var(--v-surface-alt); }
.v-section--tight { padding-block: calc(var(--v-section-y) / 2); }

/* 4 / 8 / 12-column grid */
.v-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--v-gap);
}
@media (min-width: 768px) {
	.v-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.v-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

/* Golden split: 61.8 / 38.2 (1.618 : 1). Single column below 1024px. */
.v-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--v-space-6);
	align-items: center;
}
@media (min-width: 1024px) {
	.v-split { grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); gap: var(--v-gap); }
	.v-split--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); }
}

/* ---------------------------------------------------------------- Golden geometry (§5, v1.10)
   Editorial asymmetry comes from φ, never from arbitrary offsets. Product grids stay uniform. */

/* Golden mosaic: a true golden-rectangle subdivision. A large square (a) sits beside a golden
   rectangle, split into a square (b), a small square (c) and a narrow golden cell (d, text).
   Children in order: a, b, c, d. Gaps are solved for, so the squares stay exact at any width:
   with u = the small square, the width is φ³·u + 4 gaps, so the columns are 1fr : u/φ : u and
   the square cells a and c set the two row heights. Tablet: golden split with a stacked side;
   mobile: two columns. */
.v-golden {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-areas: "a a" "b c" "d d";
	gap: var(--v-gap);
}
.v-golden > * { min-width: 0; min-height: 0; }
.v-golden > :nth-child(1) { grid-area: a; aspect-ratio: 1; }
.v-golden > :nth-child(2) { grid-area: b; aspect-ratio: 1; }
.v-golden > :nth-child(3) { grid-area: c; aspect-ratio: 1; }
.v-golden > :nth-child(4) { grid-area: d; }
@media (min-width: 768px) {
	.v-golden {
		grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr);
		grid-template-areas: "a b" "a c" "d d";
	}
	.v-golden > :nth-child(1) { aspect-ratio: auto; }
}
@media (min-width: 1024px) {
	.v-golden {
		--_u: calc((100% - 4 * var(--v-gap)) / (var(--v-phi) * var(--v-phi) * var(--v-phi)));
		grid-template-columns: minmax(0, 1fr) calc(var(--_u) / var(--v-phi)) var(--_u);
		grid-template-rows: minmax(0, 1fr) auto;
		grid-template-areas: "a b b" "a d c";
	}
	.v-golden--reverse {
		grid-template-columns: var(--_u) calc(var(--_u) / var(--v-phi)) minmax(0, 1fr);
		grid-template-areas: "b b a" "c d a";
	}
	.v-golden > :nth-child(1) { aspect-ratio: 1; }
	.v-golden > :nth-child(2) { aspect-ratio: auto; }
}

/* Offset overlap: the image spans 8 of 12 columns; the copy panel spans 5, overlaps the image
   by one column and drops by 38.2% (1 - 1/φ). Percentage margins on a grid item resolve
   against its own area's width (5 columns), which lands the panel at ~38% of the image height. */
.v-overlap {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}
.v-overlap__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--v-placeholder); }
.v-overlap__panel {
	position: relative;
	z-index: 1;
	display: grid;
	gap: var(--v-space-5);
	align-content: start;
	margin: calc(var(--v-space-9) * -1) 0 0 var(--v-space-6);
	padding: var(--v-space-7) var(--v-space-6);
	background: var(--v-surface);
	color: var(--v-text);
}
@media (min-width: 768px) {
	.v-overlap__media { aspect-ratio: var(--v-phi); }
	.v-overlap__panel { margin-right: var(--v-space-9); }
}
@media (min-width: 1024px) {
	.v-overlap { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--v-gap); }
	.v-overlap__media { grid-area: 1 / 1 / 2 / 9; aspect-ratio: var(--v-phi); }
	.v-overlap__panel {
		grid-area: 1 / 8 / 2 / 13;
		margin: calc(var(--v-phi-minor) * 100%) 0 0;
		padding: var(--v-space-9) var(--v-space-8);
	}
	.v-overlap--reverse .v-overlap__media { grid-area: 1 / 5 / 2 / 13; }
	.v-overlap--reverse .v-overlap__panel { grid-area: 1 / 1 / 2 / 6; }
}

/* Golden stack: a wide φ : 1 image over a copy row split 1 : φ, so the text column starts at
   the golden point of the image width (heading on the minor side, text on the major side). */
.v-golden-stack { display: grid; gap: var(--v-space-7); }
.v-golden-stack__media { aspect-ratio: var(--v-phi); overflow: hidden; background: var(--v-placeholder); }
.v-golden-stack__copy { display: grid; gap: var(--v-space-5); }
@media (min-width: 1024px) {
	.v-golden-stack__copy {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr);
		column-gap: var(--v-gap);
		align-items: start;
	}
}
:is(.v-overlap__media, .v-golden-stack__media) img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.v-stack {
	display: flex;
	flex-direction: column;
	gap: var(--v-stack-gap, var(--v-space-4));
}
.v-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--v-cluster-gap, var(--v-space-3));
}

/* ---------------------------------------------------------------- Default templates (Hello's single, archive, search, 404)
   Plain pages, posts, cart/checkout/account and archives sit in the content container with
   section rhythm. Elementor-built pages use the full-width template and are not affected. */
.site-main {
	width: 100%;
	max-width: calc(var(--v-container) + 2 * var(--v-gutter));
	margin-inline: auto;
	padding: var(--v-space-9) var(--v-gutter) var(--v-section-y);
}
.site-main > .page-header { margin-bottom: var(--v-space-7); }
.site-main > .page-content > :where(p, ul, ol, blockquote) { max-width: var(--v-measure); }
.site-main > .page-content > * + * { margin-top: var(--v-space-5); }

/* ---------------------------------------------------------------- Elementor integration
   Elementor widgets inherit this system (default colour/font schemes are disabled). */
.elementor-widget-heading h1.elementor-heading-title { line-height: var(--v-lh-h1); }
.elementor-widget-heading h2.elementor-heading-title { line-height: var(--v-lh-heading); }
.elementor-widget-heading h3.elementor-heading-title { line-height: var(--v-lh-h3); }
.elementor-widget-heading .elementor-heading-title { color: var(--v-heading); }
/* Boxed containers: our content width and gutters instead of Elementor's 10px padding */
.e-con {
	--container-default-padding-left: var(--v-gutter);
	--container-default-padding-right: var(--v-gutter);
}
.e-con-boxed > .e-con-inner { max-width: var(--v-container); }