/**
 * Semantic colour tokens and the light/dark contract.
 *
 * The raw brand scales live in tokens.css (--vt-ocean-600 and friends) and never
 * change between schemes. This file maps them onto SEMANTIC roles that do.
 * Templates and blocks must reference the semantic names only — a template that
 * reaches for --vt-ocean-600 directly cannot respond to the scheme.
 *
 * Three-state contract, matching how the toggle behaves:
 *   1. :root                                  → light, the default
 *   2. @media (prefers-color-scheme: dark)    → dark, but ONLY when the visitor
 *      guarded by :root:not([data-theme=...])   has expressed no explicit choice
 *   3. [data-theme="dark"] / ="light"         → an explicit choice always wins,
 *                                               in both directions
 *
 * Guard 2 matters: without :not([data-theme="light"]), a visitor on a dark OS who
 * deliberately chooses light gets dark anyway, and the toggle appears broken.
 */

:root {
	--vt-surface: #ffffff;
	--vt-surface-elevated: #f8fafc;
	--vt-surface-sunken: #f1f5f9;
	--vt-text: #0f172a;
	--vt-text-muted: #475569;
	--vt-text-inverse: #ffffff;
	--vt-border: #e2e8f0;
	--vt-border-strong: #cbd5e1;
	--vt-link: var(--vt-ocean-600);
	--vt-link-hover: var(--vt-ocean-700);
	--vt-accent: var(--vt-coral-500);
	--vt-on-accent: #0f172a;
	--vt-brand-text: var(--vt-ocean-600);
	--vt-text-body-role: #334155;
	--vt-surface-translucent: rgba(255, 255, 255, 0.86);
	--vt-hero-glow: var(--vt-ocean-100);
	--vt-focus: var(--vt-ocean-600);

	/* Reserved ad slot backgrounds. Mediavine injects into these; the colour
	   exists so an unfilled slot does not flash white against a dark page. */
	--vt-ad-slot-bg: #f1f5f9;

	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--vt-surface: #0f172a;
		--vt-surface-elevated: #1e293b;
		--vt-surface-sunken: #020617;
		--vt-text: #f1f5f9;
		--vt-text-muted: #94a3b8;
		--vt-text-inverse: #0f172a;
		--vt-border: #334155;
		--vt-border-strong: #475569;
		--vt-link: #7ba7f5;
		--vt-link-hover: #a8c4f8;
		--vt-accent: #fb923c;
		--vt-on-accent: #0f172a;
		--vt-brand-text: #7dd3fc;
		--vt-text-body-role: #cbd5e1;
		--vt-surface-translucent: rgba(15, 23, 42, 0.84);
		--vt-hero-glow: rgba(2, 132, 199, 0.22);
		--vt-focus: #7ba7f5;
		--vt-ad-slot-bg: #1e293b;

		color-scheme: dark;
	}
}

:root[data-theme="dark"] {
	--vt-surface: #0f172a;
	--vt-surface-elevated: #1e293b;
	--vt-surface-sunken: #020617;
	--vt-text: #f1f5f9;
	--vt-text-muted: #94a3b8;
	--vt-text-inverse: #0f172a;
	--vt-border: #334155;
	--vt-border-strong: #475569;
	--vt-link: #7ba7f5;
	--vt-link-hover: #a8c4f8;
	--vt-accent: #fb923c;
	--vt-on-accent: #0f172a;
	--vt-brand-text: #7dd3fc;
	--vt-text-body-role: #cbd5e1;
	--vt-surface-translucent: rgba(15, 23, 42, 0.84);
	--vt-hero-glow: rgba(2, 132, 199, 0.22);
	--vt-focus: #7ba7f5;
	--vt-ad-slot-bg: #1e293b;

	color-scheme: dark;
}

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

body {
	background-color: var(--vt-surface);
	color: var(--vt-text);
}

a {
	color: var(--vt-link);
}

a:hover,
a:focus {
	color: var(--vt-link-hover);
}

/* Images are art direction on this site, not decoration. Explicit dimensions are
   set per-image in templates; this only prevents overflow. */
img,
video {
	max-width: 100%;
	height: auto;
}

/* Mediavine injects into the sidebar and in-content slots. Reserving height in
   CSS is what keeps injection from causing layout shift — the alternative,
   static placeholder blocks in the templates, is explicitly forbidden because
   mediavine-control-panel must remain the sole owner of the ad wrapper. */
.vt-ad-slot {
	background-color: var(--vt-ad-slot-bg);
	min-height: var(--vt-ad-slot-reserved-height, 0px);
	display: flex;
	align-items: center;
	justify-content: center;
	contain: layout;
	border-radius: 8px;
	margin: 0 auto;
}

/* Respect a visitor who has asked for less motion. */
@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;
	}
}

/* Theme toggle styles live in style.css with WCAG 2.2 touch-target sizing.
   Focus ring inherits from the global :focus-visible rule. */


/* The toggle is meaningless without JavaScript — it has nothing to persist to.
   Hidden rather than shown-and-broken. */
.no-js .vt-theme-toggle {
	display: none;
}

/* ---------------------------------------------------------------------------
   Location roundup — /things-to-do/{location}/
   Image-forward by intent: the card leads with the photograph, because the
   library is the differentiator and a travel roundup is browsed visually.
   --------------------------------------------------------------------------- */

.vt-roundup__intro {
	margin-block-end: var(--wp--preset--spacing--60, 2.5rem);
}

.vt-roundup__description {
	color: var(--vt-text-muted);
	max-width: 60ch;
}

.vt-place-grid {
	gap: var(--wp--preset--spacing--50, 1.75rem);
}

.vt-place-card__image img {
	aspect-ratio: 3 / 2;
	border-radius: var(--wp--custom--radius--md, 0.5rem);
	object-fit: cover;
	width: 100%;
}

/* Reserve the card image box before the image loads. Without an explicit ratio
   the grid reflows as each photograph arrives, and a 24-card roundup then
   produces 24 layout shifts — the single easiest way to fail CLS on this page. */
.vt-place-card__image {
	aspect-ratio: 3 / 2;
	background-color: var(--vt-surface-sunken);
	border-radius: var(--wp--custom--radius--md, 0.5rem);
	overflow: hidden;
}

.vt-place-card__title {
	margin-block: 0.75rem 0.25rem;
}

.vt-place-card__title a {
	text-decoration: none;
}

.vt-place-card__title a:hover,
.vt-place-card__title a:focus-visible {
	text-decoration: underline;
}

.vt-place-card__excerpt {
	color: var(--vt-text-muted);
	margin-block: 0;
}

/* ---------------------------------------------------------------------------
   Place detail — /places/{slug}/
   --------------------------------------------------------------------------- */

.vt-place__image img {
	aspect-ratio: 16 / 9;
	border-radius: var(--wp--custom--radius--lg, 0.75rem);
	object-fit: cover;
	width: 100%;
}

.vt-place__summary {
	color: var(--vt-text-muted);
	max-width: 62ch;
}

/* An empty bound paragraph must not reserve vertical space. The summary and
   description blocks are bound to meta that a sparse place may not have; core
   renders the block regardless, so collapse it rather than leaving a gap. */
.vt-place__summary:empty,
.vt-place__description:empty {
	display: none;
}