/**
 * Vendo Kit — primitives.
 *
 * The vocabulary every section is assembled from: containers, tones, type,
 * buttons, cards, grids. A block stylesheet should only ever describe what is
 * unique about that section; if two blocks need the same thing, it belongs
 * here instead.
 *
 * Every value is a token. There are no hex codes, no px font sizes and no
 * magic numbers below this line — if you need one, add it to the Design
 * System rather than typing it here.
 */

/* -------------------------------------------------------------------------
 * Scope reset
 * ---------------------------------------------------------------------- */

.vk-scope {
	box-sizing: border-box;
	color: var(--vk-color-body);
	font-family: var(--vk-font-body);
	font-size: var(--vk-text-md);
	font-weight: var(--vk-weight-body);
	line-height: var(--vk-lh-body);
	letter-spacing: var(--vk-ls-body);
	-webkit-font-smoothing: antialiased;
}

.vk-scope *,
.vk-scope *::before,
.vk-scope *::after {
	box-sizing: inherit;
}

.vk-scope img,
.vk-scope svg,
.vk-scope video {
	max-width: 100%;
	height: auto;
	display: block;
}

/* -------------------------------------------------------------------------
 * Sections, containers and tone
 *
 * Tone is the only thing a section knows about colour. Set the tone and the
 * heading, body, border and button colours all follow — which is why no block
 * stylesheet declares a background.
 * ---------------------------------------------------------------------- */

.vk-section {
	padding-block: var(--vk-section-y);
	background: var(--vk-section-bg, var(--vk-color-bg));
	color: var(--vk-section-fg, var(--vk-color-body));
	position: relative;
}

.vk-section.vk-tone-light {
	--vk-section-bg: var(--vk-color-bg);
	--vk-card-bg: var(--vk-color-surface);
	--vk-card-border: var(--vk-color-border);
}

/* On a surface band the cards invert, so they still lift off the background. */
.vk-section.vk-tone-surface {
	--vk-section-bg: var(--vk-color-surface);
	--vk-card-bg: var(--vk-color-bg);
	--vk-card-border: var(--vk-color-border);
}

.vk-section.vk-tone-dark {
	--vk-section-bg: var(--vk-color-dark);
	--vk-section-fg: var(--vk-color-on-dark);
	--vk-heading-color: var(--vk-color-on-dark);
	--vk-muted-color: var(--vk-color-on-dark-muted);
	--vk-card-bg: color-mix(in srgb, var(--vk-color-on-dark) 6%, transparent);
	--vk-card-border: color-mix(in srgb, var(--vk-color-on-dark) 14%, transparent);
}

.vk-section.vk-tone-brand {
	--vk-section-bg: var(--vk-color-brand);
	--vk-section-fg: var(--vk-color-on-brand);
	--vk-heading-color: var(--vk-color-on-brand);
	--vk-muted-color: color-mix(in srgb, var(--vk-color-on-brand) 72%, transparent);
	--vk-card-bg: color-mix(in srgb, var(--vk-color-on-brand) 6%, transparent);
	--vk-card-border: color-mix(in srgb, var(--vk-color-on-brand) 16%, transparent);
}

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

.vk-container--narrow { max-width: var(--vk-container-narrow); }
.vk-container--wide   { max-width: var(--vk-container-wide); }
.vk-container--full   { max-width: none; }

/* -------------------------------------------------------------------------
 * Type
 * ---------------------------------------------------------------------- */

.vk-scope h1, .vk-scope h2, .vk-scope h3,
.vk-scope h4, .vk-scope h5, .vk-scope h6 {
	margin: 0 0 var(--vk-space-sm);
	color: var(--vk-heading-color, var(--vk-color-ink));
	font-family: var(--vk-font-heading);
	font-weight: var(--vk-weight-heading);
	line-height: var(--vk-lh-heading);
	letter-spacing: var(--vk-ls-heading);
	text-wrap: balance;
}

.vk-scope h1 { font-size: var(--vk-h1); }
.vk-scope h2 { font-size: var(--vk-h2); }
.vk-scope h3 { font-size: var(--vk-h3); }
.vk-scope h4 { font-size: var(--vk-h4); }
.vk-scope h5 { font-size: var(--vk-h5); }
.vk-scope h6 { font-size: var(--vk-h6); }

.vk-scope p { margin: 0 0 var(--vk-space-sm); }
.vk-scope p:last-child { margin-bottom: 0; }
.vk-scope strong { font-weight: var(--vk-weight-strong); }

.vk-scope a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--vk-duration) var(--vk-ease);
}

/* The line above a heading. Small, spaced, brand-coloured — the single most
   repeated element across our designs, so it gets a primitive. */
.vk-eyebrow {
	display: inline-block;
	margin-bottom: var(--vk-space-2xs);
	color: var(--vk-eyebrow-color, var(--vk-color-accent));
	font-size: var(--vk-text-sm);
	font-weight: var(--vk-weight-strong);
	letter-spacing: .08em;
	text-transform: uppercase;
}

.vk-tone-dark .vk-eyebrow,
.vk-tone-brand .vk-eyebrow { --vk-eyebrow-color: var(--vk-color-brand); }
.vk-tone-brand .vk-eyebrow { --vk-eyebrow-color: var(--vk-color-on-brand); }

.vk-lede {
	font-size: var(--vk-text-lg);
	color: var(--vk-muted-color, var(--vk-color-body));
}

.vk-muted { color: var(--vk-muted-color, var(--vk-color-muted)); }

/* Editor-authored rich text: paragraphs, lists, links. The last child
 * loses its margin so a prose block sits flush in whatever contains it. */
.vk-prose > :last-child { margin-bottom: 0; }

/* =========================================================================
 * Forms — behaviour, not design
 *
 * A Vendo site's forms are bespoke: the theme writes the markup and the
 * styling. What lives here is only what the submission system needs to
 * work — the honeypot has to be off-screen, the message element has to be
 * able to show a state, and the GHL iframe has to have a height. Field
 * layout, labels and inputs belong to the design, so they are not here.
 * ====================================================================== */

/* Off-screen rather than display:none — some bots skip hidden fields. */
.vk-honeypot {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* site.js writes into this element and sets is-success / is-error on it.
 * Deliberately only colour: the theme decides whether it is a box. */
.vk-form-message:empty { display: none; }
.vk-form-message.is-success { color: var(--vk-color-success); }
.vk-form-message.is-error   { color: var(--vk-color-error); }

.vk-ghl-embed {
	width: 100%;
	min-height: 32rem;
	border: 0;
}

/* A section's heading group: eyebrow, heading, lede — centred or left. */
.vk-section-head {
	max-width: 46rem;
	margin-bottom: var(--vk-space-lg);
}

.vk-section-head--center {
	margin-inline: auto;
	text-align: center;
}

/* -------------------------------------------------------------------------
 * Buttons
 * ---------------------------------------------------------------------- */

.vk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--vk-space-3xs);
	padding: var(--vk-space-xs) var(--vk-space-md);
	border: var(--vk-border-width) solid transparent;
	border-radius: var(--vk-radius-button);
	font-family: var(--vk-font-heading);
	font-size: var(--vk-text-md);
	font-weight: var(--vk-weight-strong);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--vk-duration) var(--vk-ease),
	            border-color var(--vk-duration) var(--vk-ease),
	            color var(--vk-duration) var(--vk-ease),
	            transform var(--vk-duration) var(--vk-ease);
}

.vk-btn:hover { transform: translateY(-1px); }
.vk-btn:active { transform: none; }

.vk-btn:focus-visible {
	outline: 2px solid var(--vk-color-accent);
	outline-offset: 3px;
}

.vk-btn--primary {
	background: var(--vk-color-button-bg);
	color: var(--vk-color-button-text);
}
.vk-btn--primary:hover { background: var(--vk-color-button-hover); }

.vk-btn--secondary {
	background: transparent;
	border-color: currentColor;
	color: var(--vk-section-fg, var(--vk-color-ink));
}
.vk-btn--secondary:hover {
	background: var(--vk-color-button-bg);
	border-color: var(--vk-color-button-bg);
	color: var(--vk-color-button-text);
}

.vk-btn--ghost {
	background: var(--vk-card-bg, var(--vk-color-surface));
	color: var(--vk-section-fg, var(--vk-color-ink));
}

.vk-btn--link {
	padding: 0;
	background: none;
	color: var(--vk-color-accent);
	text-decoration: underline;
}

.vk-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vk-space-xs);
	margin-top: var(--vk-space-sm);
}

.vk-btn-row--center { justify-content: center; }

/* -------------------------------------------------------------------------
 * Cards and grids
 * ---------------------------------------------------------------------- */

.vk-card {
	padding: var(--vk-space-md);
	background: var(--vk-card-bg, var(--vk-color-surface));
	border: var(--vk-border-width) solid var(--vk-card-border, var(--vk-color-border));
	border-radius: var(--vk-radius-md);
}

.vk-card--raised {
	background: var(--vk-card-bg, var(--vk-color-bg));
	box-shadow: var(--vk-shadow-md);
}

/* One grid, told how many columns to aim for. Columns collapse on their own
   via auto-fit, so a section never needs its own breakpoints. */
.vk-grid {
	display: grid;
	gap: var(--vk-space-md);
	grid-template-columns: repeat(auto-fit, minmax(min(var(--vk-grid-min, 17rem), 100%), 1fr));
}

.vk-grid--2 { --vk-grid-min: 24rem; }
.vk-grid--3 { --vk-grid-min: 17rem; }
.vk-grid--4 { --vk-grid-min: 13rem; }

/* A two-column split that stacks below the tablet breakpoint. */
.vk-split {
	display: grid;
	gap: var(--vk-space-xl);
	align-items: center;
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.vk-split { grid-template-columns: 1fr 1fr; }
	.vk-split--wide-left  { grid-template-columns: 1.25fr 1fr; }
	.vk-split--wide-right { grid-template-columns: 1fr 1.25fr; }
	.vk-split--reverse > :first-child { order: 2; }
}

/* -------------------------------------------------------------------------
 * Icons, stars, pills
 * ---------------------------------------------------------------------- */

.vk-icon {
	width: 1.25em;
	height: 1.25em;
	flex: none;
}

.vk-icon-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin-bottom: var(--vk-space-xs);
	background: var(--vk-color-brand-soft);
	border-radius: var(--vk-radius-md);
	color: var(--vk-color-accent);
}

.vk-tone-dark .vk-icon-badge,
.vk-tone-brand .vk-icon-badge {
	background: var(--vk-card-bg);
	color: inherit;
}

.vk-stars {
	display: inline-flex;
	gap: .1em;
	color: var(--vk-color-star);
}

.vk-star { width: 1em; height: 1em; }

.vk-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--vk-space-3xs);
	padding: var(--vk-space-3xs) var(--vk-space-xs);
	background: var(--vk-card-bg, var(--vk-color-surface));
	border: var(--vk-border-width) solid var(--vk-card-border, var(--vk-color-border));
	border-radius: var(--vk-radius-button);
	font-size: var(--vk-text-sm);
	font-weight: var(--vk-weight-strong);
}

.vk-pill-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vk-space-2xs);
}

/* -------------------------------------------------------------------------
 * Media
 * ---------------------------------------------------------------------- */

.vk-media {
	border-radius: var(--vk-radius-md);
	overflow: hidden;
}

.vk-media img { width: 100%; object-fit: cover; }

.vk-ratio {
	position: relative;
	aspect-ratio: var(--vk-ratio, 16 / 9);
	overflow: hidden;
	border-radius: var(--vk-radius-md);
}

.vk-ratio > * {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vk-ratio--square   { --vk-ratio: 1; }
.vk-ratio--portrait { --vk-ratio: 3 / 4; }

/* -------------------------------------------------------------------------
 * Accessibility
 * ---------------------------------------------------------------------- */

.vk-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.vk-skip-link {
	position: absolute;
	left: var(--vk-space-sm);
	top: calc(var(--vk-space-sm) * -10);
	z-index: 999;
	padding: var(--vk-space-2xs) var(--vk-space-sm);
	background: var(--vk-color-bg);
	color: var(--vk-color-ink);
	border-radius: var(--vk-radius-sm);
	transition: top var(--vk-duration) var(--vk-ease);
}

.vk-skip-link:focus { top: var(--vk-space-sm); }

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