/* ==========================================================================
   Zavana — Global styles & components
   Implements the WellFest Uganda 2026 ticketing page.

   Values here follow the Figma file exactly (see tokens.css). Type families
   are assigned per the design's actual usage:
     Fraunces     — wordmark, most section headings, highlight/pillar card titles
     Merriweather — pillars heading, Health Checks seal, Card Payment, Gem Zavanna
     Montserrat   — all body copy, kickers, labels, buttons, prices

   Never hardcode a colour or type size — always reference a --zv-* token.

   CONTENTS
     1. Base            6. Partnership band   11. Tickets
     2. Layout helpers  7. Marquee bar        12. Payment
     3. Buttons         8. Highlights         13. Footer
     4. Hero            9. Screening          14. Header
     5. Fact bar       10. Pillars            15. Elementor bridge
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BASE
   -------------------------------------------------------------------------- */

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

body {
	font-family: var(--zv-font-body);
	font-size: var(--zv-text-base);
	line-height: var(--zv-leading-normal);
	color: var(--zv-body);
	background-color: var(--zv-surface-mint);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/*
 * The whole design frame sits on one mint ground — hero, partners, highlights,
 * tickets and payment all share it. Only the screening/pillars bands (blue)
 * and the marquee/footer (plum) break out. There is no white section.
 */
.zv-wellfest { background-color: var(--zv-surface-mint); }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--zv-font-heading);
	color: var(--zv-ink);
	line-height: var(--zv-leading-tight);
	letter-spacing: var(--zv-tracking-tight);
	font-weight: var(--zv-weight-bold);
	margin: 0 0 var(--zv-space-4);
	text-wrap: balance;
}

h1 { font-size: var(--zv-text-4xl); }
h2 { font-size: var(--zv-text-3xl); }
h3 { font-size: var(--zv-text-2xl); }
h4 { font-size: var(--zv-text-xl); }
h5 { font-size: var(--zv-text-lg); }
h6 { font-size: var(--zv-text-base); font-weight: var(--zv-weight-semibold); }

p { margin: 0 0 var(--zv-space-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a {
	color: var(--zv-primary);
	text-underline-offset: 0.15em;
	transition: color var(--zv-duration) var(--zv-ease);
}
a:hover { color: var(--zv-primary-hover); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--zv-primary);
	outline-offset: 2px;
	border-radius: var(--zv-radius-sm);
}

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

::selection { background: var(--zv-primary); color: var(--zv-primary-contrast); }

.zv-sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.zv-skip-link:focus {
	position: fixed;
	top: var(--zv-space-3); left: var(--zv-space-3);
	z-index: var(--zv-z-modal);
	width: auto; height: auto; clip: auto;
	padding: var(--zv-space-3) var(--zv-space-5);
	background: var(--zv-surface);
	color: var(--zv-ink);
	border-radius: var(--zv-radius-md);
	box-shadow: var(--zv-shadow-lg);
}

/* --------------------------------------------------------------------------
   2. LAYOUT HELPERS
   -------------------------------------------------------------------------- */

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

/*
 * `flow-root` establishes a block formatting context, which stops a child's
 * bottom margin collapsing out through the section's edge.
 *
 * Without it, any section whose padding is zeroed (the zv-pb-0 utility) leaks
 * its last child's margin outside itself. On the pillars band that put 32px of
 * page-ground mint between two blue sections — a stripe through the middle of
 * what should read as one continuous block.
 */
.zv-section {
	display: flow-root;
	padding-block: var(--zv-section-y);
}

/*
 * Each widget renders its own .zv-section, so two stacked widgets would gap
 * twice. These let the editor collapse the seam between a heading and the
 * block it introduces.
 */
.zv-pt-0  { padding-top: 0; }
.zv-pb-0  { padding-bottom: 0; }
.zv-pt-sm { padding-top: var(--zv-space-5); }
.zv-pb-sm { padding-bottom: var(--zv-space-5); }
.zv-section--mint    { background-color: var(--zv-surface-mint); }
.zv-section--alt     { background-color: var(--zv-surface-alt); }
.zv-section--primary { background-color: var(--zv-primary); color: rgba(255, 255, 255, 0.9); }
.zv-section--plum    { background-color: var(--zv-plum); color: rgba(255, 255, 255, 0.8); }

/*
 * `:where()`, not `:is()`. Both match the same headings, but :is() takes the
 * specificity of its argument, giving 0,1,1 — which outranks component classes
 * like .zv-pillar__title (0,1,0) and turns the headings of WHITE cards sitting
 * inside a dark band white-on-white. :where() contributes nothing, so this
 * lands at 0,1,0: still enough to beat the base `h1-h6` rule (0,0,1) for a bare
 * heading, but a component class defined later in this file wins, as it should.
 */
.zv-section--primary :where(h1, h2, h3, h4, h5, h6),
.zv-section--plum    :where(h1, h2, h3, h4, h5, h6) { color: #ffffff; }

.zv-grid {
	display: grid;
	gap: var(--zv-space-5);
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.zv-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
.zv-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.zv-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }

.zv-stack > * + * { margin-top: var(--zv-space-4); }
.zv-cluster { display: flex; flex-wrap: wrap; gap: var(--zv-space-3); align-items: center; }

/* Small uppercase kicker above a heading. Montserrat 700 in the design. */
.zv-kicker {
	display: block;
	font-family: var(--zv-font-body);
	font-size: var(--zv-text-xs);
	font-weight: var(--zv-weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--zv-tracking-wide);
	color: var(--zv-accent-ink);
	margin-bottom: var(--zv-space-3);
}

/*
 * Small green text on the blue band: the brand green measures 4.10:1 there,
 * just under AA, so the on-dark variant is used. Large text (.zv-em-green)
 * still takes the brand value — 4.10 clears the 3.0 large-text threshold.
 */
.zv-section--primary .zv-kicker,
.zv-section--plum .zv-kicker,
.zv-screening .zv-kicker,
.zv-pillars .zv-kicker { color: var(--zv-accent-on-dark); }
.zv-kicker--muted  { color: var(--zv-muted); }
.zv-kicker--blue   { color: var(--zv-primary); }
.zv-kicker--yellow { color: var(--zv-yellow); }

.zv-em-green { color: var(--zv-accent-display); }
.zv-em-blue  { color: var(--zv-primary); }

/* On blue/plum the display green would read too dark; keep the brand value. */
.zv-section--primary .zv-em-green,
.zv-section--plum .zv-em-green,
.zv-pillars .zv-em-green,
.zv-screening .zv-em-green { color: var(--zv-accent); }

.zv-lede {
	font-size: var(--zv-text-md);
	line-height: var(--zv-leading-relaxed);
	max-width: 62ch;
}

/* --------------------------------------------------------------------------
   3. BUTTONS — Montserrat 700, ~12.5px, fully rounded.
   -------------------------------------------------------------------------- */

.zv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--zv-space-2);
	padding: var(--zv-space-3) var(--zv-space-6);
	font-family: var(--zv-font-body);
	font-size: var(--zv-text-xs);
	font-weight: var(--zv-weight-bold);
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: var(--zv-tracking-wide);
	text-decoration: none;
	border: 2px solid transparent;
	border-radius: var(--zv-radius-full);
	cursor: pointer;
	transition: background-color var(--zv-duration) var(--zv-ease),
	            border-color var(--zv-duration) var(--zv-ease),
	            color var(--zv-duration) var(--zv-ease),
	            transform var(--zv-duration) var(--zv-ease);
}
.zv-btn:active { transform: translateY(1px); }

.zv-btn--primary { background-color: var(--zv-primary); color: #ffffff; }
.zv-btn--primary:hover { background-color: var(--zv-primary-hover); color: #fff; }

.zv-btn--accent { background-color: var(--zv-accent); color: var(--zv-on-accent); }
.zv-btn--accent:hover { background-color: var(--zv-accent-hover); color: var(--zv-on-accent); }

.zv-btn--yellow { background-color: var(--zv-yellow); color: var(--zv-yellow-contrast); }
.zv-btn--yellow:hover { background-color: #e6bd18; color: var(--zv-yellow-contrast); }

.zv-btn--orange { background-color: var(--zv-orange); color: var(--zv-on-accent); }
.zv-btn--orange:hover { background-color: var(--zv-orange-hover); color: var(--zv-on-accent); }

.zv-btn--ghost {
	background-color: #ffffff;
	border-color: rgba(31, 12, 49, 0.12);
	color: var(--zv-ink);
}
.zv-btn--ghost:hover { border-color: var(--zv-primary); color: var(--zv-primary); }

.zv-btn--outline { background: transparent; border-color: var(--zv-line-strong); color: var(--zv-ink); }
.zv-btn--outline:hover { border-color: var(--zv-primary); color: var(--zv-primary); }

.zv-btn--lg { padding: var(--zv-space-4) var(--zv-space-7); font-size: var(--zv-text-sm); }
.zv-btn--sm { padding: var(--zv-space-2) var(--zv-space-4); font-size: var(--zv-text-xs); }
.zv-btn--block { display: flex; width: 100%; }
.zv-btn--normalcase { text-transform: none; letter-spacing: 0; }

.zv-btn[disabled], .zv-btn--disabled { opacity: 0.5; pointer-events: none; }

/* --------------------------------------------------------------------------
   4. HERO
   -------------------------------------------------------------------------- */

.zv-hero { position: relative; background-color: var(--zv-surface-mint); overflow: hidden; }

.zv-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--zv-space-6);
	align-items: center;
	padding-block: var(--zv-space-6) var(--zv-space-7);
}
@media (min-width: 900px) {
	.zv-hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.84fr);
		gap: var(--zv-space-7);
		align-items: stretch;
		min-height: 620px;
		padding-block: 0;
	}
	.zv-hero__content { align-self: center; padding-block: var(--zv-space-7); }
}

.zv-hero__logo { margin-bottom: var(--zv-space-4); }
/* The exported logo is a large square; the design places it at 68px. */
.zv-hero__logo img { width: 68px; height: auto; }

/* Two stacked 11px Montserrat lines: production credit, then the descriptor. */
.zv-hero__brandline {
	font-size: var(--zv-text-xs);
	font-weight: var(--zv-weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--zv-tracking-wide);
	color: var(--zv-body);
	margin-bottom: var(--zv-space-3);
	line-height: 1.22;
}
.zv-hero__brandline span { display: block; color: var(--zv-primary); }

.zv-hero__wordmark {
	font-family: var(--zv-font-display);
	font-size: var(--zv-text-5xl);
	font-weight: var(--zv-weight-bold);
	line-height: 1.02;
	letter-spacing: var(--zv-tracking-tight);
	color: var(--zv-primary);
	margin: 0 0 var(--zv-space-2);
}
.zv-hero__country {
	font-family: var(--zv-font-body);
	font-size: var(--zv-text-xl);
	font-weight: var(--zv-weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--zv-tracking-wide);
	color: var(--zv-primary);
	margin-bottom: var(--zv-space-4);
}
.zv-hero__theme {
	font-family: var(--zv-font-body);
	font-size: var(--zv-text-xl);
	font-weight: var(--zv-weight-bold);
	color: var(--zv-body);
	margin-bottom: var(--zv-space-2);
}
.zv-hero__meta {
	font-size: var(--zv-text-base);
	color: var(--zv-body);
	margin-bottom: var(--zv-space-6);
}

.zv-hero__media {
	position: relative;
	border-radius: var(--zv-radius-lg);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background-color: var(--zv-surface-sunken);
}
.zv-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/*
 * On desktop the photo bleeds to the viewport's right edge and fills the hero's
 * full height.
 *
 * Pinned absolutely rather than pulled out with a negative margin: percentage
 * margins on a GRID ITEM resolve against the grid *area* (its column), not the
 * grid container, so `calc(50% - 50vw)` computed from the wrong basis and
 * overshot the viewport by ~270px at 1024 — invisible only because .zv-hero
 * clips it. A vw-based width is exact at every viewport.
 */
@media (min-width: 900px) {
	/*
	 * The photo is pinned to the viewport's right edge at 46vw, but this
	 * container is capped at --zv-container and CENTRED — so reserving a flat
	 * 46vw of padding double-counts the container's own right margin and
	 * starves the copy. At 1610px that left 391px of content instead of 590px,
	 * wrapping the countdown onto two rows. Subtract the margin back out.
	 */
	.zv-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		padding-right: calc(
			46vw
			- max(0px, (100vw - var(--zv-container)) / 2)
			+ var(--zv-gutter)
		);
	}
	.zv-hero__media {
		position: absolute;
		inset: 0 0 0 auto;
		width: 46vw;
		margin: 0;
		aspect-ratio: auto;
		height: auto;

		/*
		 * Feathered left edge, as in the design: the photograph dissolves into
		 * the mint rather than meeting it at a hard line. A mask is used rather
		 * than an overlaid gradient so it works over whatever sits behind it,
		 * and so the parallax underneath still moves cleanly.
		 *
		 * Three stops rather than two — a straight ramp reads as a grey haze
		 * over the subject, while an early soft knee keeps the fade in the
		 * empty left margin of the photo.
		 */
		border-radius: 0;
		-webkit-mask-image: linear-gradient(
			to right,
			transparent 0%,
			rgba(0, 0, 0, 0.25) 7%,
			rgba(0, 0, 0, 0.85) 18%,
			#000 28%
		);
		mask-image: linear-gradient(
			to right,
			transparent 0%,
			rgba(0, 0, 0, 0.25) 7%,
			rgba(0, 0, 0, 0.85) 18%,
			#000 28%
		);
	}
	/*
	 * Take the photo out of flow. Left in flow its intrinsic height (the export
	 * is 1034x1039) sets the grid row, which over-tallens the hero and leaves
	 * the vertically-centred copy floating in dead space. Out of flow, the row
	 * is sized by the content column and the photo crops to fill it.
	 */
	.zv-hero__media img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

/* Countdown — Montserrat 700 60px blue, 9.5px green labels. */
.zv-countdown {
	display: flex;
	flex-wrap: wrap;
	gap: var(--zv-space-6);
	margin-bottom: var(--zv-space-6);
}
.zv-countdown__unit { text-align: left; min-width: 64px; }
.zv-countdown__value {
	display: block;
	font-family: var(--zv-font-body);
	font-size: clamp(2.25rem, 1.4rem + 4.2vw, 3.75rem);
	font-weight: var(--zv-weight-bold);
	line-height: 1.22;
	color: var(--zv-primary);
	font-variant-numeric: tabular-nums;
}
/*
 * Below ~560px the four units no longer fit on one flex row and "Seconds"
 * orphans onto a second line. A fixed four-column grid keeps the set intact.
 */
@media (max-width: 560px) {
	.zv-countdown {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: var(--zv-space-2);
	}
	.zv-countdown__unit { min-width: 0; }
}

.zv-countdown__label {
	display: block;
	font-size: 0.594rem;
	font-weight: var(--zv-weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--zv-tracking-wide);
	color: var(--zv-accent-ink);
	line-height: 1.22;
}

/* --------------------------------------------------------------------------
   5. FACT BAR
   -------------------------------------------------------------------------- */

.zv-factbar { background-color: var(--zv-surface-mint); padding-block: var(--zv-space-5); }
.zv-factbar__list {
	display: grid;
	gap: var(--zv-space-2);
	grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}
/*
 * Every chip is the same box.
 *
 * Previously the panel only existed on the alternating dark chips and each one
 * sized to its own content, so a two-line label ("Upper Gardens, Kampala")
 * produced a visibly taller box than its neighbours and the plain chips read as
 * a different component entirely. Now the grid stretches, every chip carries a
 * panel — plum on the alternating ones, a soft wash on the rest — and the text
 * centres inside a shared minimum height. The alternation stays; the geometry
 * no longer wobbles.
 */
.zv-factbar__list { align-items: stretch; }

.zv-fact {
	display: flex;
	align-items: stretch;
	/*
	 * Tight gap on purpose. At five across the panel has ~166px of usable
	 * width, and "Upper Gardens, Kampala" needs just about all of it to stay
	 * on one line — every pixel here comes straight off that budget.
	 */
	gap: var(--zv-space-1);
}
.zv-fact__icon {
	flex: none;
	align-self: center;
	display: grid;
	place-items: center;
	width: 34px; height: 34px;
	border-radius: var(--zv-radius-full);
	background-color: var(--zv-accent);
	color: var(--zv-on-accent);
}
.zv-fact__text {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 58px;
	padding: var(--zv-space-2);
	border-radius: var(--zv-radius-sm);
	background-color: color-mix(in srgb, #ffffff 55%, transparent);
}
.zv-fact--dark .zv-fact__text { background-color: var(--zv-plum); }
.zv-fact__value {
	display: block;
	font-family: var(--zv-font-body);
	font-size: var(--zv-text-base);
	font-weight: var(--zv-weight-bold);
	color: var(--zv-primary);
	line-height: 1.22;
	text-wrap: balance;
}
.zv-fact--dark .zv-fact__value { color: #ffffff; }
.zv-fact__label {
	display: block;
	font-size: var(--zv-text-xs);
	font-weight: var(--zv-weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--zv-tracking-normal);
	color: var(--zv-ink);
	margin-top: 3px;
	line-height: 1.25;
	text-wrap: balance;
}
/*
 * On the plum chips the label is green or yellow, never plum-on-plum.
 * The tone is an explicit modifier rather than a positional :nth-of-type rule,
 * so editors can reorder chips in Elementor without the colours shuffling.
 */
.zv-fact--dark .zv-fact__label { color: var(--zv-accent); }
.zv-fact--label-yellow .zv-fact__label { color: var(--zv-yellow); }

/* --------------------------------------------------------------------------
   6. PARTNERSHIP BAND — Fraunces 46px on the mint ground.
   -------------------------------------------------------------------------- */

.zv-partners { text-align: center; }
.zv-partners__title {
	font-family: var(--zv-font-display);
	font-size: var(--zv-text-3xl);
	color: var(--zv-ink);
	margin-bottom: var(--zv-space-4);
}
.zv-partners__copy {
	max-width: 52ch;
	margin-inline: auto;
	margin-bottom: var(--zv-space-6);
	font-size: var(--zv-text-md);
}

/* --------------------------------------------------------------------------
   7. MARQUEE BAR — plum, Montserrat 700 12px white.
   -------------------------------------------------------------------------- */

.zv-marquee {
	background-color: var(--zv-plum);
	color: #ffffff;
	padding-block: var(--zv-space-3);
	text-align: center;
	font-size: var(--zv-text-sm);
	font-weight: var(--zv-weight-bold);
	letter-spacing: var(--zv-tracking-normal);
}

/* --------------------------------------------------------------------------
   8. HIGHLIGHTS
   Sits on the mint page ground with a dark heading — NOT a dark section.
   -------------------------------------------------------------------------- */

.zv-highlights { background-color: var(--zv-surface-mint); }
.zv-highlights__title {
	font-family: var(--zv-font-display);
	font-size: var(--zv-text-3xl);
	color: var(--zv-ink);
	margin-bottom: var(--zv-space-3);
}
.zv-highlights__lede {
	color: var(--zv-body);
	margin-bottom: var(--zv-space-6);
	font-size: var(--zv-text-sm);
}

.zv-hcard {
	display: flex;
	flex-direction: column;
	gap: var(--zv-space-2);
	padding: var(--zv-space-4) var(--zv-space-5) var(--zv-space-5);
	background-color: var(--zv-surface);
	border-radius: var(--zv-radius-md);
	height: 100%;
}
.zv-hcard__kicker {
	font-family: var(--zv-font-body);
	font-size: var(--zv-text-xs);
	font-weight: var(--zv-weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--zv-tracking-wide);
	color: var(--zv-accent-ink);
	margin: 0;
}
.zv-hcard__title {
	font-family: var(--zv-font-display);
	font-size: var(--zv-text-lg);
	font-weight: var(--zv-weight-bold);
	color: var(--zv-primary);
	margin: 0;
}
.zv-hcard__body { font-size: var(--zv-text-sm); color: var(--zv-body); margin: 0; }

/* --------------------------------------------------------------------------
   9. SCREENING — blue band, Fraunces 42px white heading.
   -------------------------------------------------------------------------- */

.zv-screening { background-color: var(--zv-primary); color: #ffffff; }
.zv-screening__inner {
	display: grid;
	gap: var(--zv-space-7);
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
}
@media (min-width: 900px) {
	.zv-screening__inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); }
}
.zv-screening__flag {
	display: block;
	padding: var(--zv-space-3) var(--zv-space-4);
	background-color: var(--zv-accent);
	color: var(--zv-on-accent);
	border-radius: var(--zv-radius-md) var(--zv-radius-md) 0 0;
	font-size: var(--zv-text-md);
	font-weight: var(--zv-weight-semibold);
	text-align: center;
}
.zv-screening__media {
	position: relative;
	border-radius: 0 0 var(--zv-radius-md) var(--zv-radius-md);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background-color: var(--zv-primary-dark);
}
.zv-screening__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.zv-screening__col { text-align: center; }
.zv-screening__title {
	font-family: var(--zv-font-display);
	font-size: var(--zv-text-3xl);
	color: #ffffff;
}
.zv-screening__body {
	color: #ffffff;
	margin: 0 auto var(--zv-space-5);
	max-width: 46ch;
	font-size: var(--zv-text-md);
}

.zv-taglist {
	display: flex; flex-wrap: wrap;
	gap: var(--zv-space-2);
	list-style: none; margin: 0; padding: 0;
	justify-content: center;
}
.zv-tag {
	display: inline-block;
	padding: var(--zv-space-2) var(--zv-space-4);
	background-color: var(--zv-accent);
	color: var(--zv-on-accent);
	border-radius: var(--zv-radius-full);
	font-size: var(--zv-text-xs);
	font-weight: var(--zv-weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--zv-tracking-wide);
}

/* --------------------------------------------------------------------------
   10. PILLARS — blue band. Heading is Merriweather here, not Fraunces.
   -------------------------------------------------------------------------- */

.zv-pillars { background-color: var(--zv-primary); color: #ffffff; }
.zv-pillars__head {
	display: grid;
	gap: var(--zv-space-6);
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	margin-bottom: var(--zv-space-6);
}
@media (min-width: 900px) {
	.zv-pillars__head { grid-template-columns: minmax(0, 1fr) auto; }
}
.zv-pillars__title {
	font-family: var(--zv-font-serif);
	font-size: var(--zv-text-3xl);
	color: #ffffff;
}
.zv-pillars__body {
	color: #ffffff;
	max-width: 58ch;
	font-size: var(--zv-text-md);
}

/* Yellow seal — Merriweather 900, plum text. */
.zv-seal {
	display: grid;
	place-content: center;
	gap: var(--zv-space-1);
	width: clamp(180px, 20vw, 240px);
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var(--zv-yellow);
	color: var(--zv-yellow-contrast);
	text-align: center;
	padding: var(--zv-space-5);
	transform: rotate(-9deg);
	justify-self: center;
}
.zv-seal__title {
	font-family: var(--zv-font-serif);
	font-size: var(--zv-text-2xl);
	font-weight: var(--zv-weight-black);
	line-height: 1.05;
	text-transform: uppercase;
	margin: 0;
	color: inherit;
}
.zv-seal__sub {
	font-family: var(--zv-font-body);
	font-size: var(--zv-text-xs);
	font-weight: var(--zv-weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--zv-tracking-wide);
	margin: 0;
}

.zv-pillars__grid {
	display: grid;
	gap: var(--zv-space-4);
	grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
}
.zv-pillar {
	padding: var(--zv-space-5);
	background-color: var(--zv-surface);
	border-radius: var(--zv-radius-md);
	height: 100%;
}
.zv-pillar__title {
	font-family: var(--zv-font-display);
	font-size: var(--zv-text-lg);
	font-weight: var(--zv-weight-bold);
	color: var(--zv-primary);
	margin: 0 0 var(--zv-space-2);
}
.zv-pillar__body { font-size: var(--zv-text-sm); color: var(--zv-body); margin: 0; }

.zv-pillars__note {
	margin-top: var(--zv-space-5);
	padding: var(--zv-space-5);
	background-color: var(--zv-surface);
	border-radius: var(--zv-radius-md);
	text-align: center;
}
.zv-pillars__note-title {
	font-family: var(--zv-font-display);
	font-size: var(--zv-text-xl);
	font-weight: var(--zv-weight-bold);
	color: var(--zv-primary);
	margin: 0 0 var(--zv-space-1);
}
.zv-pillars__note-sub { font-size: var(--zv-text-sm); color: var(--zv-body); margin: 0; }

/* --------------------------------------------------------------------------
   11. TICKETS — Fraunces 90px heading on the mint ground.
   -------------------------------------------------------------------------- */

.zv-tickets__title {
	font-family: var(--zv-font-display);
	font-size: var(--zv-text-4xl);
	color: var(--zv-ink);
	margin-bottom: var(--zv-space-3);
}
.zv-tickets__lede {
	font-size: var(--zv-text-md);
	font-weight: var(--zv-weight-bold);
	color: var(--zv-body);
	margin-bottom: var(--zv-space-6);
	max-width: 78ch;
}
.zv-subhead {
	font-family: var(--zv-font-body);
	font-size: var(--zv-text-2xl);
	font-weight: var(--zv-weight-bold);
	color: var(--zv-body);
	margin: var(--zv-space-7) 0 var(--zv-space-4);
}

.zv-ticket {
	display: grid;
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
	border-radius: var(--zv-radius-md);
	overflow: hidden;
	min-height: 205px;
}
/* Order swaps which side each part sits on, so the ratio must swap too. */
.zv-ticket--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); }

/*
 * The photo is taken out of flow so its intrinsic height cannot stretch the
 * grid row — several exports are portrait (896x1200) and would otherwise make
 * the card three times the designed height. Row height now comes from the
 * panel content plus min-height, and the image crops to fill.
 */
.zv-ticket__media { position: relative; background-color: var(--zv-surface-sunken); }
.zv-ticket__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.zv-ticket__panel {
	display: flex;
	flex-direction: column;
	gap: var(--zv-space-2);
	padding: var(--zv-space-5);
}
.zv-ticket--blue  .zv-ticket__panel { background-color: var(--zv-primary); color: #ffffff; }
.zv-ticket--green .zv-ticket__panel { background-color: var(--zv-accent-bright); color: var(--zv-on-accent); }

.zv-ticket--reverse .zv-ticket__media { order: 2; }
.zv-ticket--reverse .zv-ticket__panel { order: 1; }

/* In the design the label and price swap colour roles between the two tones. */
.zv-ticket__label {
	font-family: var(--zv-font-body);
	font-size: var(--zv-text-sm);
	font-weight: var(--zv-weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--zv-tracking-wide);
	margin: 0;
}
.zv-ticket--blue  .zv-ticket__label { color: var(--zv-accent); }
.zv-ticket--green .zv-ticket__label { color: var(--zv-on-accent); }

.zv-ticket__price {
	font-family: var(--zv-font-body);
	font-size: var(--zv-text-2xl);
	font-weight: var(--zv-weight-bold);
	line-height: 1.22;
	margin: 0;
}
.zv-ticket--blue  .zv-ticket__price { color: #ffffff; }
.zv-ticket--green .zv-ticket__price { color: var(--zv-primary); }

/*
 * A bulk-rate list is several figures, not one price — the design sets it
 * noticeably smaller so it stays subordinate to the real ticket prices.
 */
.zv-ticket__price--rates {
	font-size: var(--zv-text-lg);
	line-height: 1.3;
}

.zv-ticket__desc { font-size: var(--zv-text-sm); line-height: 1.45; margin: 0; }

.zv-ticket__cta {
	margin-top: auto;
	align-self: flex-start;
	padding: 0.4rem var(--zv-space-4);
	font-size: var(--zv-text-xs);
	text-transform: none;
	letter-spacing: 0;
	font-weight: var(--zv-weight-regular);
}
.zv-ticket--blue  .zv-ticket__cta { background-color: var(--zv-accent); color: var(--zv-on-accent); }
.zv-ticket--green .zv-ticket__cta { background-color: var(--zv-primary); color: #ffffff; }

@media (max-width: 560px) {
	.zv-ticket { grid-template-columns: minmax(0, 1fr); }
	.zv-ticket--reverse { grid-template-columns: minmax(0, 1fr); }
	.zv-ticket__media { aspect-ratio: 16 / 9; }
	.zv-ticket--reverse .zv-ticket__media { order: 0; }
	.zv-ticket--reverse .zv-ticket__panel { order: 0; }
}

/* Contact block under the VIP / Corporate groups. */
.zv-contact {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--zv-space-5);
	margin-top: var(--zv-space-5);
}
/* Beside a card the contact block stacks: lines, then the button beneath. */
.zv-contact--stack {
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	margin-top: 0;
}
.zv-contact__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--zv-space-2); }
.zv-contact__list li { display: flex; align-items: center; gap: var(--zv-space-2); font-size: var(--zv-text-sm); }
.zv-note { font-size: var(--zv-text-sm); color: var(--zv-body); margin-top: var(--zv-space-4); }

/* --------------------------------------------------------------------------
   12. PAYMENT
   -------------------------------------------------------------------------- */

.zv-payment { background-color: var(--zv-surface-mint); }
.zv-payment__banner {
	position: relative;
	display: block;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto var(--zv-space-6);
	padding: var(--zv-space-4) var(--zv-space-7);
	background-color: var(--zv-orange);
	color: var(--zv-on-accent);
	border-radius: var(--zv-radius-md);
	font-family: var(--zv-font-body);
	font-size: var(--zv-text-lg);
	font-weight: var(--zv-weight-bold);
	text-align: center;
}
.zv-payment__banner::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 22%;
	border: 14px solid transparent;
	border-top-color: var(--zv-orange);
	border-bottom-width: 0;
}
.zv-payment__grid {
	display: grid;
	gap: var(--zv-space-5);
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}
.zv-paypanel {
	padding: var(--zv-space-6);
	border-radius: var(--zv-radius-md);
	background-color: var(--zv-surface-alt);
}
.zv-paypanel--card {
	background-color: var(--zv-surface-mint-soft);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--zv-space-5);
	text-align: center;
}
/* "Card Payment" is Merriweather in the design; FlexiPay is its own wordmark. */
.zv-paypanel__title {
	font-family: var(--zv-font-serif);
	font-size: var(--zv-text-2xl);
	font-weight: var(--zv-weight-bold);
	color: var(--zv-primary);
	margin: 0;
}
.zv-paypanel__ribbon {
	display: block;
	margin: var(--zv-space-4) 0;
	padding: var(--zv-space-2) var(--zv-space-4);
	background-color: var(--zv-orange);
	color: var(--zv-on-accent);
	border-radius: var(--zv-radius-sm);
	font-weight: var(--zv-weight-black);
	font-size: var(--zv-text-md);
}
.zv-steps {
	margin: 0; padding-left: 1.2em;
	display: grid; gap: var(--zv-space-3);
	font-size: var(--zv-text-md);
	color: var(--zv-ink);
}
.zv-steps li::marker { color: var(--zv-orange); font-weight: var(--zv-weight-bold); }
.zv-code {
	display: inline-block;
	padding: var(--zv-space-1) var(--zv-space-3);
	background-color: var(--zv-orange);
	color: var(--zv-on-accent);
	border-radius: var(--zv-radius-sm);
	font-family: var(--zv-font-mono);
	font-weight: var(--zv-weight-bold);
	letter-spacing: 0.1em;
}
.zv-cardlogos { display: flex; gap: var(--zv-space-6); align-items: center; justify-content: center; flex-wrap: wrap; }
/*
 * Target the container's children as well as the class, so an image dropped in
 * without .zv-cardlogo still sizes correctly instead of rendering at its
 * intrinsic 500px and wrapping the row.
 */
.zv-cardlogo,
.zv-cardlogos img { height: 46px; width: auto; object-fit: contain; }

/* FlexiPay ships as a bitmap wordmark, so cap it by width. */
.zv-paypanel__logo { margin: 0 0 var(--zv-space-2); }
.zv-paylogo,
.zv-paypanel__logo img { width: min(190px, 60%); height: auto; }

/* --------------------------------------------------------------------------
   13. FOOTER — plum, yellow headings, off-white body.
   -------------------------------------------------------------------------- */

.zv-footer {
	background-color: var(--zv-plum);
	color: var(--zv-surface-alt);
	padding-block: var(--zv-space-7);
	font-size: var(--zv-text-sm);
}
.zv-footer__inner {
	display: grid;
	gap: var(--zv-space-6);
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	align-items: start;
}
/* "Let's Connect" is Montserrat; "Gem Zavanna" is Merriweather. */
.zv-footer__title {
	font-family: var(--zv-font-body);
	font-size: var(--zv-text-2xl);
	font-weight: var(--zv-weight-bold);
	color: var(--zv-yellow);
	margin: 0 0 var(--zv-space-2);
}
.zv-footer__right .zv-footer__title { font-family: var(--zv-font-serif); font-size: var(--zv-text-xl); }
.zv-footer a { color: var(--zv-surface-alt); }
.zv-footer a:hover { color: var(--zv-accent); }
.zv-footer__right { text-align: left; }
@media (min-width: 720px) { .zv-footer__right { text-align: right; } }

.zv-socials { display: flex; flex-wrap: wrap; gap: var(--zv-space-2); list-style: none; margin: var(--zv-space-4) 0 0; padding: 0; }
.zv-socials a {
	display: grid;
	place-items: center;
	width: 34px; height: 34px;
	border-radius: var(--zv-radius-full);
	background-color: var(--zv-accent);
	color: var(--zv-on-accent);
	transition: background-color var(--zv-duration) var(--zv-ease);
}
.zv-socials a:hover { background-color: var(--zv-accent-hover); color: var(--zv-on-accent); }
.zv-socials svg { width: 16px; height: 16px; fill: currentColor; }

/* --------------------------------------------------------------------------
   14. HEADER
   -------------------------------------------------------------------------- */

.site-header { background-color: var(--zv-surface-mint); border-bottom: 1px solid var(--zv-line); }
body.zv-sticky-header .site-header { position: sticky; top: 0; z-index: var(--zv-z-header); }
body.zv-scrolled .site-header { box-shadow: var(--zv-shadow-md); }

.site-header .site-navigation a {
	font-family: var(--zv-font-body);
	font-size: var(--zv-text-sm);
	font-weight: var(--zv-weight-bold);
	color: var(--zv-ink);
	text-decoration: none;
}
.site-header .site-navigation a:hover,
.site-header .site-navigation .current-menu-item > a { color: var(--zv-primary); }

/* --------------------------------------------------------------------------
   15. ELEMENTOR BRIDGE
   -------------------------------------------------------------------------- */

.elementor-widget-heading .elementor-heading-title { font-family: var(--zv-font-heading); }

.elementor-button {
	font-family: var(--zv-font-body);
	font-weight: var(--zv-weight-bold);
	border-radius: var(--zv-radius-full);
	transition: background-color var(--zv-duration) var(--zv-ease);
}

.e-con-boxed > .e-con-inner,
.elementor-section-boxed > .elementor-container { max-width: var(--zv-container); }

/* ==========================================================================
   16. REFINEMENTS
   Additions beyond the source design. Each is additive — deleting this whole
   block returns the theme to a literal reproduction of the Figma.
   ========================================================================== */

/* --------------------------------------------------------------------------
   16.1 Anchor offset
   The header is sticky, so an in-page jump would otherwise land with the
   target hidden underneath it.
   -------------------------------------------------------------------------- */

:where([id]) { scroll-margin-top: calc(var(--zv-header-height) + var(--zv-space-4)); }

/* --------------------------------------------------------------------------
   16.2 Card depth
   The design's white cards sit flat on the mint. A hairline and a very soft
   shadow separate them from the ground without changing the palette.
   -------------------------------------------------------------------------- */

.zv-hcard,
.zv-pillar {
	border: 1px solid color-mix(in srgb, var(--zv-ink) 7%, transparent);
	box-shadow: var(--zv-shadow-sm);
	transition: box-shadow var(--zv-duration) var(--zv-ease),
	            transform var(--zv-duration) var(--zv-ease);
}

.zv-ticket {
	position: relative;
	transition: box-shadow var(--zv-duration) var(--zv-ease),
	            transform var(--zv-duration) var(--zv-ease);
}

@media (hover: hover) {
	.zv-hcard:hover,
	.zv-pillar:hover { box-shadow: var(--zv-shadow-md); transform: translateY(-2px); }
	.zv-ticket:hover { box-shadow: var(--zv-shadow-lg); transform: translateY(-3px); }
}

/* Never animate position for people who have asked us not to. */
@media (prefers-reduced-motion: reduce) {
	.zv-hcard:hover,
	.zv-pillar:hover,
	.zv-ticket:hover { transform: none; }
}

/* Photos in ticket cards lift very slightly with the card. */
.zv-ticket__media { overflow: hidden; }
.zv-ticket__media img { transition: transform 400ms var(--zv-ease); }
@media (hover: hover) {
	.zv-ticket:hover .zv-ticket__media img { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
	.zv-ticket:hover .zv-ticket__media img { transform: none; }
}

/* --------------------------------------------------------------------------
   16.3 Ticket availability
   A ticketing page needs to say what is scarce and what has gone. The badge
   sits on the photo; the sold-out state desaturates the card and makes the
   CTA genuinely non-interactive, not merely faded.
   -------------------------------------------------------------------------- */

.zv-ticket__badge {
	position: absolute;
	top: var(--zv-space-3);
	left: var(--zv-space-3);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: var(--zv-space-1);
	padding: var(--zv-space-1) var(--zv-space-3);
	border-radius: var(--zv-radius-full);
	background-color: var(--zv-yellow);
	color: var(--zv-yellow-contrast);
	font-family: var(--zv-font-body);
	font-size: var(--zv-text-xs);
	font-weight: var(--zv-weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--zv-tracking-wide);
	box-shadow: var(--zv-shadow-sm);
}
/* Reversed cards put the photo on the right, so the badge follows it. */
.zv-ticket--reverse .zv-ticket__badge { left: auto; right: var(--zv-space-3); }

.zv-ticket__badge--scarce { background-color: var(--zv-orange); color: var(--zv-on-accent); }
.zv-ticket__badge--value  { background-color: var(--zv-accent); color: var(--zv-on-accent); }
.zv-ticket__badge--gone   { background-color: var(--zv-plum); color: #ffffff; }

.zv-ticket--soldout .zv-ticket__media img { filter: grayscale(1); opacity: 0.55; }
.zv-ticket--soldout .zv-ticket__panel { filter: saturate(0.45); }
.zv-ticket--soldout .zv-ticket__cta {
	pointer-events: none;
	opacity: 0.5;
}
@media (hover: hover) {
	.zv-ticket--soldout:hover { transform: none; box-shadow: none; }
	.zv-ticket--soldout:hover .zv-ticket__media img { transform: none; }
}

/* --------------------------------------------------------------------------
   16.4 Section transitions
   A thin rule where mint meets mint keeps long stretches from reading as one
   undifferentiated block, without introducing a new colour.
   -------------------------------------------------------------------------- */

.zv-rule {
	border: 0;
	border-top: 1px solid color-mix(in srgb, var(--zv-ink) 10%, transparent);
	margin: 0;
}

/* ==========================================================================
   17. SITE HEADER & FOOTER
   Theme-side, because Elementor's Theme Builder is Pro-only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   17.1 Header
   Mint ground, so it reads as part of the hero rather than a bar sitting on
   top of it. Sticky, gaining a hairline and shadow only once scrolled.
   -------------------------------------------------------------------------- */

.zv-header {
	position: sticky;
	top: 0;
	z-index: var(--zv-z-header);
	background-color: var(--zv-surface-mint);
	border-bottom: 1px solid transparent;
	transition: box-shadow var(--zv-duration) var(--zv-ease),
	            border-color var(--zv-duration) var(--zv-ease);
}
body.zv-scrolled .zv-header {
	border-bottom-color: color-mix(in srgb, var(--zv-ink) 8%, transparent);
	box-shadow: var(--zv-shadow-sm);
}

.zv-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--zv-space-5);
	min-height: var(--zv-header-height);
	padding-block: var(--zv-space-3);
}

.zv-header__brand { display: inline-flex; align-items: center; flex: none; }
.zv-header__brand img,
.zv-header__logo,
.zv-header .custom-logo { height: 48px; width: auto; }

/* Nav ------------------------------------------------------------------- */

.zv-header__nav {
	display: flex;
	align-items: center;
	gap: var(--zv-space-6);
}

.zv-nav__list {
	display: flex;
	align-items: center;
	gap: var(--zv-space-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.zv-nav__list a {
	position: relative;
	font-family: var(--zv-font-body);
	font-size: var(--zv-text-sm);
	font-weight: var(--zv-weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--zv-tracking-wide);
	color: var(--zv-ink);
	text-decoration: none;
	padding-block: var(--zv-space-2);
}

/* Underline grows from the left rather than fading — cheaper and clearer. */
.zv-nav__list a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	width: 100%;
	background-color: var(--zv-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--zv-duration) var(--zv-ease);
}
.zv-nav__list a:hover { color: var(--zv-primary); }
.zv-nav__list a:hover::after,
.zv-nav__list .current-menu-item > a::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
	.zv-nav__list a::after { transition: none; }
}

.zv-header__actions {
	display: flex;
	align-items: center;
	gap: var(--zv-space-3);
	flex: none;
	order: 3;
}
.zv-header__cta { flex: none; white-space: nowrap; }

/* Toggle ---------------------------------------------------------------- */

.zv-header__toggle {
	display: none;
	flex: none;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--zv-ink) 14%, transparent);
	border-radius: var(--zv-radius-md);
	cursor: pointer;
	color: var(--zv-ink);
}

/* Three bars drawn from one element: the middle is the box, the outer two
   are pseudo-elements. Becomes an X when expanded. */
.zv-header__bars,
.zv-header__bars::before,
.zv-header__bars::after {
	display: block;
	width: 20px;
	height: 2px;
	background-color: currentColor;
	border-radius: 2px;
	transition: transform var(--zv-duration) var(--zv-ease),
	            opacity var(--zv-duration) var(--zv-ease);
}
.zv-header__bars { position: relative; margin: 0 auto; }
.zv-header__bars::before,
.zv-header__bars::after { content: ""; position: absolute; left: 0; }
.zv-header__bars::before { top: -6px; }
.zv-header__bars::after  { top: 6px; }

.zv-header__toggle[aria-expanded="true"] .zv-header__bars { background-color: transparent; }
.zv-header__toggle[aria-expanded="true"] .zv-header__bars::before { transform: translateY(6px) rotate(45deg); }
.zv-header__toggle[aria-expanded="true"] .zv-header__bars::after  { transform: translateY(-6px) rotate(-45deg); }

/* Mobile ---------------------------------------------------------------- */

@media (max-width: 900px) {
	.zv-header__toggle { display: block; }

	/* Tighter CTA so logo + button + toggle still fit at 320px. */
	.zv-header__cta { padding-inline: var(--zv-space-3); }

	.zv-header__nav {
		order: 4;
		flex-basis: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: var(--zv-space-4);
		padding-block: var(--zv-space-4) var(--zv-space-5);

		/*
		 * Collapsed by default, but kept in the accessibility tree only when
		 * open — the toggle sets hidden, so this is purely the visual state.
		 */
		display: none;
	}
	.zv-header__nav.is-open { display: flex; }

	.zv-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}
	.zv-nav__list li + li { border-top: 1px solid color-mix(in srgb, var(--zv-ink) 8%, transparent); }
	.zv-nav__list a { display: block; padding-block: var(--zv-space-4); }
	.zv-nav__list a::after { display: none; }

	.zv-header__inner { flex-wrap: wrap; }
}

/* --------------------------------------------------------------------------
   17.2 Site footer
   A slim legal strip under the page's own "Let's Connect" band.
   -------------------------------------------------------------------------- */

.zv-sitefooter {
	background-color: var(--zv-plum);
	color: color-mix(in srgb, var(--zv-surface-alt) 78%, transparent);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	padding-block: var(--zv-space-4);
}

.zv-sitefooter__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--zv-space-3) var(--zv-space-5);
}

/*
 * The design sets this line at 7px, which is below any reasonable legibility
 * floor. Held at the theme's smallest real size instead.
 */
.zv-sitefooter__legal {
	margin: 0;
	font-size: var(--zv-text-xs);
	line-height: 1.5;
}

.zv-sitefooter__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--zv-space-4);
	list-style: none;
	margin: 0;
	padding: 0;
}
.zv-sitefooter__links a {
	font-size: var(--zv-text-xs);
	color: var(--zv-surface-alt);
	text-decoration: none;
}
.zv-sitefooter__links a:hover { color: var(--zv-accent); text-decoration: underline; }