/*
Theme Name: Venture Michiana
Theme URI: https://venturemichiana.com
Author: Venture Michiana
Description: Direct booking block theme for Venture Michiana short-term rentals in the Michiana region. Listing data, pricing, and availability are served live from Hostaway via the VM Booking Engine plugin.
Version: 0.7.1
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: venture-michiana
Tags: block-theme, full-site-editing
*/

/* Global tokens live in theme.json; the vm-* component system lives here. */

:root {
	--vm-blue: #347ab6;
	--vm-blue-deep: #275d8c;
	--vm-copper: #ca8549;
	--vm-copper-dark: #a76a33; /* AA on white for text */
	--vm-copper-light: #e8b88a;
	--vm-ink: #1f2933;
	--vm-navy: #0d1f3c;
	--vm-navy-soft: #16294b;
	--vm-cream: #faf9f6;
	--vm-slate: #52606d;
	--vm-mist: #f5f7fa;
	--vm-line: #e4e7eb;
	--vm-white: #ffffff;
	--vm-radius: 16px;
	--vm-radius-sm: 10px;
	--vm-shadow: 0 2px 14px rgba(31, 41, 51, 0.07);
	--vm-shadow-lift: 0 14px 34px rgba(31, 41, 51, 0.16);
	--vm-font-display: "Fraunces", Georgia, serif;
	--vm-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30 Q150 0 300 30 T600 30 T900 30 T1200 30' fill='none' stroke='%23347ab6' stroke-width='2' opacity='.5'/%3E%3Cpath d='M0 42 Q150 14 300 42 T600 42 T900 42 T1200 42' fill='none' stroke='%23ca8549' stroke-width='2' opacity='.45'/%3E%3C/svg%3E");
	--vm-wave-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M0 70 L0 40 Q360 0 720 40 T1440 40 L1440 70 Z' fill='%23ffffff'/%3E%3C/svg%3E");
}

body {
	-webkit-font-smoothing: antialiased;
}

/* =====================  Buttons & focus  ===================== */

.vm-btn {
	display: inline-block;
	padding: 0.8rem 1.6rem;
	border: 0;
	border-radius: 999px;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.vm-btn--copper {
	background: var(--vm-copper);
	color: var(--vm-white);
	box-shadow: 0 4px 14px rgba(202, 133, 73, 0.35);
}

.vm-btn--copper:hover {
	background: var(--vm-copper-dark);
	color: var(--vm-white);
	transform: translateY(-1px);
}

.vm-btn--white {
	background: var(--vm-white);
	color: var(--vm-ink);
}

.vm-btn--white:hover {
	background: var(--vm-mist);
	transform: translateY(-1px);
}

:is(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--vm-blue);
	outline-offset: 2px;
	border-radius: 4px;
}

@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;
	}
}

/* =====================  Shared section furniture  ===================== */

.vm-eyebrow,
.vm-hero__eyebrow {
	display: block;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--vm-copper-dark);
	margin: 0 0 0.6rem;
}

.vm-wave {
	height: 60px;
	background: var(--vm-wave) repeat-x center / 1200px 60px;
}

.vm-notice {
	background: var(--vm-mist);
	border-left: 4px solid var(--vm-blue);
	border-radius: 0 var(--vm-radius-sm) var(--vm-radius-sm) 0;
	padding: 1rem 1.25rem;
	margin: 1rem 0;
}

.vm-notice--maintenance {
	border-left-color: var(--vm-copper);
}

/* =====================  Header  ===================== */

.vm-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(250, 249, 246, 0.88);
	border-bottom: 1px solid var(--vm-line);
	padding: 0 1.5rem;
}

/* Sticky never worked: the template-part wrapper div is exactly header
   height, so the header had no room to travel. Stick the wrapper instead.
   Home is excluded — there the sticky search dock takes over on scroll. */
body:not(.home) .wp-block-template-part:has(> .vm-header) {
	position: sticky;
	top: 0;
	z-index: 50;
}

body:not(.home).admin-bar .wp-block-template-part:has(> .vm-header) {
	top: 32px;
}

@media (max-width: 781px) {
	body:not(.home).admin-bar .wp-block-template-part:has(> .vm-header) {
		top: 46px;
	}
}

/* Blur lives on a pseudo-element: backdrop-filter on .vm-header itself would
   make it the containing block for the mobile nav's position:fixed overlay,
   trapping the menu inside the header bar. */
.vm-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	backdrop-filter: blur(14px) saturate(1.4);
}

/* Scroll-driven condense (Chrome 115+): the bar starts airy and transparent
   over the hero, then tightens, frosts, and gains a shadow within the first
   160px of scroll. Elsewhere the static styles above apply unchanged. */
@supports (animation-timeline: scroll()) {
	.vm-header {
		border-bottom-color: transparent;
		animation: vm-header-condense linear both;
		animation-timeline: scroll();
		animation-range: 0 160px;
	}

	.vm-header__inner {
		animation: vm-header-shrink linear both;
		animation-timeline: scroll();
		animation-range: 0 160px;
	}
}

@keyframes vm-header-condense {
	from {
		background: rgba(250, 249, 246, 0.55);
		box-shadow: 0 10px 30px -18px rgba(13, 31, 60, 0);
		border-bottom-color: transparent;
	}

	to {
		background: rgba(250, 249, 246, 0.93);
		box-shadow: 0 10px 30px -18px rgba(13, 31, 60, 0.38);
		border-bottom-color: var(--vm-line);
	}
}

@keyframes vm-header-shrink {
	from {
		padding-top: 1.15rem;
		padding-bottom: 1.15rem;
	}

	to {
		padding-top: 0.55rem;
		padding-bottom: 0.55rem;
	}
}

.admin-bar .vm-header {
	top: 32px;
}

.vm-header__inner {
	padding: 0.9rem 0;
}

.vm-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
}

.vm-brand__mark {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background:
		var(--vm-wave) center / 280% no-repeat,
		linear-gradient(135deg, var(--vm-blue) 0%, var(--vm-blue-deep) 100%);
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25);
}

.vm-brand__text {
	font-family: var(--vm-font-display);
	font-size: 1.45rem;
	font-weight: 700;
	color: var(--vm-ink);
	line-height: 1;
}

.vm-brand__text em {
	font-style: italic;
	color: var(--vm-blue);
}

.vm-header__nav {
	gap: 1.5rem;
}

.vm-header .wp-block-navigation a {
	font-weight: 500;
	font-size: 0.98rem;
	color: var(--vm-ink);
	position: relative;
	padding: 0.4rem 0;
	transition: color 0.25s ease;
}

.vm-header .wp-block-navigation a:hover {
	color: var(--vm-navy);
}

/* Slide-through underline: enters from the left on hover, exits to the
   right on mouse-out (origin swap), stays put on the current page. */
.vm-header .wp-block-navigation a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--vm-copper), var(--vm-copper-dark));
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 0.32s cubic-bezier(0.65, 0.05, 0.36, 1);
}

.vm-header .wp-block-navigation a:hover::after,
.vm-header .wp-block-navigation a:focus-visible::after,
.vm-header .wp-block-navigation a[aria-current="page"]::after {
	transform: scaleX(1);
	transform-origin: left center;
}

/* CTA: shine sweep across the copper pill on hover. */
.vm-header__cta {
	padding: 0.6rem 1.3rem;
	font-size: 0.95rem;
	position: relative;
	overflow: hidden;
}

.vm-header__cta::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.45) 50%, transparent 60%);
	transform: translateX(-130%);
	transition: transform 0.55s ease;
}

.vm-header__cta:hover::after {
	transform: translateX(130%);
}

/* Hamburger: a real tap target with its own chrome instead of a bare glyph. */
.wp-block-navigation__responsive-container-open {
	padding: 0.5rem;
	border: 1px solid var(--vm-line);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.72);
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.wp-block-navigation__responsive-container-open:hover {
	background: var(--vm-navy);
	border-color: var(--vm-navy);
	color: var(--vm-white);
}

@media (max-width: 781px) {
	.admin-bar .vm-header {
		top: 46px;
	}

	/* Keep booking one tap away on phones — shrink the pill instead of
	   hiding it. */
	.vm-header__cta {
		padding: 0.45rem 0.95rem;
		font-size: 0.85rem;
	}

	.vm-brand__text {
		font-size: 1.15rem;
	}

	.vm-header__nav {
		gap: 0.75rem;
	}
}

/* =====================  Hero  ===================== */

.vm-hero {
	position: relative;
	isolation: isolate;
	background-color: var(--vm-navy);
	background-size: cover;
	background-position: center;
	color: var(--vm-white);
	padding: clamp(4rem, 10vw, 7.5rem) 1.5rem clamp(5rem, 9vw, 7rem);
}

/* Kasa-style immersive variant: full-viewport, crossfading listing photos. */
.vm-hero--immersive {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: min(88vh, 860px);
	padding: clamp(5rem, 8vw, 6.5rem) 1.5rem clamp(5.5rem, 9vw, 7rem);
}

.vm-hero__slides {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
}

/* Opacity-only crossfade: a transform Ken Burns here kept five full-screen
   compositor layers alive and dragged the renderer down. */
.vm-hero__slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 1.4s ease;
}

.vm-hero__slide.is-active {
	opacity: 1;
}

.vm-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(13, 31, 60, 0.82) 0%, rgba(13, 31, 60, 0.38) 48%, rgba(13, 31, 60, 0.62) 100%);
}

.vm-hero__caption {
	position: absolute;
	left: clamp(1rem, 3vw, 2.25rem);
	bottom: clamp(1rem, 3vw, 2rem);
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	color: var(--vm-white);
	text-decoration: none;
	font-size: 0.85rem;
	text-shadow: 0 1px 8px rgba(13, 31, 60, 0.7);
}

.vm-hero__caption:hover .vm-hero__caption-name {
	text-decoration: underline;
}

.vm-hero__caption-pin {
	font-size: 1.3rem;
	line-height: 1;
}

.vm-hero__caption-name {
	display: block;
	font-weight: 700;
}

.vm-hero__caption-city {
	display: block;
	color: rgba(255, 255, 255, 0.8);
}

.vm-hero__controls {
	position: absolute;
	right: clamp(1rem, 3vw, 2.25rem);
	bottom: clamp(1rem, 3vw, 2rem);
	display: flex;
	gap: 0.5rem;
}

.vm-hero__control {
	width: 38px;
	height: 38px;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 50%;
	background: rgba(13, 31, 60, 0.35);
	color: var(--vm-white);
	font-size: 0.85rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.vm-hero__control:hover {
	background: rgba(255, 255, 255, 0.18);
	border-color: var(--vm-white);
}

.vm-hero__inner {
	max-width: 920px;
	margin: 0 auto;
	text-align: center;
}

.vm-hero__eyebrow {
	color: var(--vm-copper-light);
}

.vm-hero__heading {
	color: var(--vm-white);
	font-size: clamp(2.4rem, 5vw, 3.75rem);
	font-weight: 500;
	line-height: 1.12;
	margin: 0 0 1rem;
	text-wrap: balance;
}

.vm-hero__subheading {
	font-size: clamp(1.05rem, 2.5vw, 1.3rem);
	max-width: 620px;
	margin: 0 auto 2.25rem;
	color: rgba(255, 255, 255, 0.92);
}

.vm-hero__hint {
	margin: 1rem 0 0;
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.78);
}

/* Static-hero pages keep the wave; the immersive hero bleeds full to its edge. */
.vm-hero__wave {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 70px;
	background: var(--vm-wave-white) repeat-x bottom / 1440px 70px;
}

.vm-hero--immersive .vm-hero__wave {
	display: none;
}

/* =====================  Search bar  ===================== */

/* Kasa-style card: labels above boxed inputs, soft-rounded white card. */
.vm-search {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	justify-content: center;
	align-items: flex-end;
	background: var(--vm-white);
	border-radius: var(--vm-radius);
	box-shadow: var(--vm-shadow-lift);
	padding: 1.25rem 1.4rem 1.4rem;
	color: var(--vm-ink);
	max-width: 780px;
	margin: 0 auto;
}

.vm-search__field {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35rem;
}

.vm-search__field label {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--vm-navy);
}

.vm-search__field input {
	border: 1px solid var(--vm-line);
	border-radius: 8px;
	padding: 0.55rem 0.75rem;
	font-size: 1rem;
	font-weight: 500;
	min-width: 9rem;
	background: var(--vm-white);
	color: var(--vm-ink);
	transition: border-color 0.15s ease;
}

.vm-search__field input:hover {
	border-color: var(--vm-slate);
}

.vm-search__field input:focus-visible {
	outline-offset: 2px;
}

.vm-search__field input[type="number"] {
	min-width: 4.5rem;
}

.vm-search .vm-btn {
	white-space: nowrap;
	border-radius: 10px;
	padding-top: 0.62rem;
	padding-bottom: 0.62rem;
}

@media (max-width: 700px) {
	.vm-search {
		flex-direction: column;
		align-items: stretch;
		border-radius: var(--vm-radius);
		padding: 1rem;
		gap: 0.75rem;
	}

	.vm-search__field {
		width: 100%;
	}

	.vm-search__field input {
		width: 100%;
	}

	.vm-search .vm-btn {
		width: 100%;
		margin-left: 0;
	}
}

/* Sticky search dock: slides in over the header once the hero form scrolls
   away (see assets/js/hero.js). Desktop only — it would bury small screens. */
.vm-search-dock {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 60;
	background: rgba(255, 255, 255, 0.97);
	border-bottom: 1px solid var(--vm-line);
	box-shadow: var(--vm-shadow);
	padding: 0.55rem 1.5rem;
	transform: translateY(-110%);
	transition: transform 0.28s ease;
}

.vm-search-dock.is-visible {
	transform: translateY(0);
}

.admin-bar .vm-search-dock {
	top: 32px;
}

.vm-search-dock .vm-search {
	box-shadow: none;
	padding: 0;
	border-radius: 0;
	max-width: 900px;
}

.vm-search-dock .vm-search__field input {
	padding: 0.4rem 0.65rem;
	font-size: 0.95rem;
}

@media (max-width: 900px) {
	.vm-search-dock {
		display: none;
	}
}

/* =====================  Listing cards  ===================== */

.vm-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 1.75rem;
	margin: 1.5rem 0;
}

/* Kasa-style flat card: rounded photo, bare text underneath — no box chrome. */
.vm-card {
	background: transparent;
	display: flex;
	flex-direction: column;
}

.vm-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--vm-mist);
	overflow: hidden;
	border-radius: 12px;
	box-shadow: var(--vm-shadow);
	transition: box-shadow 0.2s ease;
}

.vm-card:hover .vm-card__media {
	box-shadow: var(--vm-shadow-lift);
}

.vm-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.vm-card:hover .vm-card__media img {
	transform: scale(1.045);
}

.vm-card__badge {
	position: absolute;
	left: 0.9rem;
	bottom: 0.9rem;
	background: var(--vm-white);
	color: var(--vm-ink);
	border-radius: 999px;
	padding: 0.35rem 0.9rem;
	font-size: 0.85rem;
	box-shadow: var(--vm-shadow);
}

.vm-card__badge strong {
	font-size: 1.05rem;
}

.vm-card__body {
	padding: 0.85rem 0.15rem 0;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

/* Kasa order: bold navy name first, city under it in plain case. */
.vm-card__city {
	order: 2;
	margin: 0;
	font-size: 0.88rem;
	font-weight: 400;
	color: var(--vm-slate);
}

.vm-card__title {
	order: 1;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 1.05rem;
	margin: 0;
	font-weight: 700;
}

.vm-card__title a {
	color: var(--vm-navy);
	text-decoration: none;
}

.vm-card__title a:hover {
	text-decoration: underline;
}

.vm-card__meta {
	order: 3;
	margin: 0;
	font-size: 0.85rem;
	color: var(--vm-slate);
}

.vm-card__cta {
	display: none;
}

/* =====================  Stays map (Kasa-style destination section)  ===================== */

.vm-stays-map {
	background: var(--vm-navy);
	color: rgba(255, 255, 255, 0.85);
	padding: clamp(3.5rem, 8vw, 5.5rem) 1.5rem clamp(3rem, 7vw, 5rem);
	text-align: center;
}

.vm-stays-map__inner {
	max-width: 860px;
	margin: 0 auto;
}

.vm-stays-map h2 {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 500;
	color: var(--vm-white);
	margin: 0;
}

.vm-stays-map__sub {
	margin: 0.6rem 0 2.25rem;
	color: rgba(255, 255, 255, 0.72);
}

.vm-stays-map__figure {
	max-width: 860px;
	margin: 0 auto;
}

.vm-stays-map__figure svg {
	width: 100%;
	height: auto;
	display: block;
	overflow: visible;
}

.vm-stays-map__land {
	fill: #8b97ad;
	stroke: rgba(255, 255, 255, 0.35);
	stroke-width: 1.5;
	stroke-linejoin: round;
}

/* Bordering states: faint dashed outlines fading out via the SVG mask. */
.vm-stays-map__neighbors path {
	fill: none;
	stroke: rgba(255, 255, 255, 0.38);
	stroke-width: 1.5;
	stroke-dasharray: 5 5;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.vm-stays-map__dot {
	fill: var(--vm-navy);
	opacity: 0.55;
}

.vm-stays-map__label {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 20px;
	font-weight: 600;
	fill: var(--vm-navy);
}

/* Labels that sit outside the landmass, on the navy band. */
.vm-stays-map__label--out {
	fill: rgba(255, 255, 255, 0.85);
}

/* No transforms here: transform-box/transition on SVG rects sent Chrome's
   rasterizer into a spin (frozen paints). Hover feedback is fill/stroke only. */
.vm-stays-map__pin rect {
	fill: var(--vm-copper);
	stroke: rgba(255, 255, 255, 0.85);
	stroke-width: 1.5;
	transition: fill 0.15s ease, stroke-width 0.15s ease;
}

.vm-stays-map__pin text {
	font-family: var(--vm-font-display);
	font-size: 25px;
	font-weight: 700;
	fill: var(--vm-white);
	pointer-events: none;
}

.vm-stays-map__pin:hover rect,
.vm-stays-map__pin:focus rect {
	fill: var(--vm-copper-dark);
	stroke-width: 3;
}

.vm-stays-map__cta {
	margin-top: 2.25rem;
}

/* =====================  Listing grid page  ===================== */

.vm-listing-grid__filters {
	margin: 0 0 2.25rem;
}

.vm-listing-grid__filters .vm-search {
	max-width: none;
	justify-content: flex-start;
	border-radius: var(--vm-radius);
	box-shadow: var(--vm-shadow);
	border: 1px solid var(--vm-line);
}

.vm-listing-grid__count {
	font-weight: 600;
}

/* =====================  Property detail  ===================== */

.vm-gallery {
	display: grid;
	gap: 0.6rem;
}

@media (min-width: 782px) {
	.vm-gallery {
		grid-template-columns: 1.6fr 1fr;
	}
}

.vm-gallery__hero {
	margin: 0;
}

.vm-gallery__hero img {
	width: 100%;
	height: 100%;
	border-radius: var(--vm-radius);
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.vm-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.6rem;
}

.vm-gallery__thumbs img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--vm-radius-sm);
}

.vm-gallery__thumbs img:nth-child(n + 5) {
	display: none;
}

@media (max-width: 781px) {
	.vm-gallery__thumbs {
		grid-template-columns: repeat(4, 1fr);
	}

	.vm-gallery__thumbs img:nth-child(n + 5) {
		display: block;
	}
}

/* Gutter so the stay page never touches the viewport edge below 1200px. */
.vm-property-page {
	padding-left: clamp(1rem, 3.5vw, 2rem);
	padding-right: clamp(1rem, 3.5vw, 2rem);
}

.vm-property__header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 0.65rem;
	margin: -0.35rem 0 1.25rem;
	font-size: 1.02rem;
	color: var(--vm-slate);
}

.vm-property__rating {
	display: inline-flex;
	align-items: baseline;
	gap: 0.3rem;
	color: var(--vm-ink);
}

.vm-property__rating-star {
	color: var(--vm-copper);
}

.vm-property__rating a {
	color: var(--vm-slate);
	text-decoration-color: var(--vm-line);
	text-underline-offset: 3px;
}

.vm-property__rating a:hover {
	color: var(--vm-blue);
}

.vm-property__header-sep {
	color: var(--vm-line);
}

.vm-gallery__hero {
	position: relative;
}

.vm-gallery__count {
	position: absolute;
	right: 0.9rem;
	bottom: 0.9rem;
	background: rgba(255, 255, 255, 0.92);
	color: var(--vm-ink);
	font-size: 0.82rem;
	font-weight: 600;
	padding: 0.35rem 0.85rem;
	border-radius: 999px;
	box-shadow: var(--vm-shadow);
}

.vm-perks {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 1.25rem 0 0;
	padding: 0.9rem 1.2rem;
	background: var(--vm-mist);
	border-radius: var(--vm-radius-sm);
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--vm-ink);
}

.vm-perks li {
	position: relative;
	padding-left: 1.35rem;
}

.vm-perks li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--vm-copper-dark);
	font-weight: 700;
}

/* Collapsible long text (description) with a soft fade. */
.vm-collapse {
	position: relative;
	max-height: 17rem;
	overflow: hidden;
}

.vm-collapse::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 5rem;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--vm-white) 90%);
	pointer-events: none;
}

.vm-collapse--open {
	max-height: none;
}

.vm-collapse--open::after {
	display: none;
}

.vm-collapse__toggle {
	margin-top: 0.75rem;
	background: none;
	border: 1.5px solid var(--vm-ink);
	border-radius: 999px;
	padding: 0.5rem 1.2rem;
	font: inherit;
	font-size: 0.92rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.vm-collapse__toggle:hover {
	background: var(--vm-ink);
	color: var(--vm-white);
}

/* Native expander styled as a quiet link-button. */
.vm-details {
	margin-top: 1rem;
}

.vm-details summary {
	cursor: pointer;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--vm-blue);
	width: fit-content;
	padding: 0.25rem 0;
	list-style-position: outside;
}

.vm-details summary:hover {
	color: var(--vm-blue-deep);
}

.vm-details[open] > summary {
	margin-bottom: 0.85rem;
}

.vm-amenities {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 0.35rem 2rem;
	margin: 0;
	padding: 0;
}

.vm-amenities__item {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.55rem 0;
	font-size: 0.97rem;
	border-bottom: 1px solid var(--vm-mist);
}

.vm-amenities__icon {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	color: var(--vm-copper-dark);
}

.vm-amenities__item--extra {
	display: none;
}

.vm-amenities--open .vm-amenities__item--extra {
	display: flex;
}

.vm-review-score {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	background: var(--vm-mist);
	border-radius: var(--vm-radius);
	padding: 1.4rem 1.6rem;
}

.vm-review-score__value {
	font-family: var(--vm-font-display);
	font-size: 3rem;
	font-weight: 700;
	line-height: 1;
	color: var(--vm-ink);
	flex-shrink: 0;
	white-space: nowrap;
}

.vm-review-score__detail p {
	margin: 0.3rem 0 0;
	font-size: 0.95rem;
	color: var(--vm-slate);
}

.vm-stars {
	position: relative;
	display: inline-block;
	font-size: 1.25rem;
	letter-spacing: 0.15em;
	line-height: 1;
	color: var(--vm-line);
}

.vm-stars::before {
	content: "★★★★★";
}

.vm-stars__fill {
	position: absolute;
	inset: 0;
	overflow: hidden;
	white-space: nowrap;
	color: var(--vm-copper);
}

.vm-stars__fill::before {
	content: "★★★★★";
}

.vm-property__section {
	margin: 2.25rem 0;
	padding-top: 1.75rem;
	border-top: 1px solid var(--vm-line);
}

.vm-property__section h2 {
	font-size: 1.55rem;
	margin: 0 0 0.85rem;
}

.vm-property__beds {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.vm-property__beds li {
	background: var(--vm-mist);
	border-radius: 999px;
	padding: 0.4rem 1rem;
	font-size: 0.95rem;
	font-weight: 500;
}

.vm-property__times {
	display: flex;
	gap: 1.5rem;
	font-weight: 600;
}

.vm-property__map {
	height: 340px;
	border-radius: var(--vm-radius);
	background: var(--vm-mist);
}

.vm-property-columns__aside > * {
	position: sticky;
	top: 5.5rem;
	/* The booking widget can be taller than the viewport (two-month calendar
	   + quote). Cap it and scroll internally so the quote and "Book now" CTA
	   stay reachable instead of being clipped below the fold. */
	max-height: calc(100vh - 6.5rem);
	overflow-y: auto;
}

/* =====================  Booking widget  ===================== */

.vm-booking {
	background: var(--vm-white);
	border: 1px solid var(--vm-line);
	border-top: 4px solid var(--vm-copper);
	border-radius: var(--vm-radius);
	box-shadow: var(--vm-shadow-lift);
	padding: 1.6rem;
}

.vm-booking__price {
	margin: 0 0 0.35rem;
	font-size: 1rem;
	color: var(--vm-slate);
}

.vm-booking__price strong {
	font-family: var(--vm-font-display);
	font-size: 2rem;
	color: var(--vm-ink);
}

.vm-booking__savings {
	display: inline-block;
	background: rgba(202, 133, 73, 0.14);
	color: var(--vm-copper-dark);
	border-radius: 999px;
	padding: 0.3rem 0.8rem;
	font-size: 0.85rem;
	font-weight: 600;
	margin: 0 0 1rem;
}

.vm-booking__calendar {
	border-top: 1px solid var(--vm-line);
	margin-top: 1rem;
	padding-top: 1rem;
}

.vm-booking__placeholder {
	color: var(--vm-slate);
	font-size: 0.95rem;
	margin: 0;
}

/* =====================  Why book direct  ===================== */

/* Kasa-style navy band with a gentle arc along the top edge. */
.vm-why-direct {
	background: var(--vm-navy);
	color: rgba(255, 255, 255, 0.85);
	border-radius: 50% 50% 0 0 / 52px 52px 0 0;
	margin-top: 2.5rem;
	padding: clamp(3.5rem, 8vw, 5.5rem) 1.5rem clamp(3rem, 7vw, 5rem);
	text-align: center;
}

.vm-why-direct h2 {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 500;
	color: var(--vm-white);
	margin: 0;
}

.vm-why-direct__items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 2rem;
	margin: 2.5rem auto 0;
	max-width: 1100px;
}

.vm-why-direct__icon {
	font-size: 2.25rem;
	display: block;
}

.vm-why-direct__item h3 {
	font-size: 1.15rem;
	color: var(--vm-white);
	margin: 0.6rem 0 0.3rem;
}

.vm-why-direct__item p {
	margin: 0;
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.72);
}

/* =====================  Reviews  ===================== */

.vm-reviews {
	margin: 0;
	padding: clamp(2.5rem, 6vw, 4rem) 0;
}

.vm-reviews h2 {
	text-align: center;
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	margin: 0 0 2rem;
}

.vm-reviews__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(300px, 1fr);
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 0.25rem 0.25rem 1rem;
}

.vm-reviews__card {
	scroll-snap-align: start;
	background: var(--vm-mist);
	border-radius: var(--vm-radius);
	padding: 1.75rem;
	margin: 0;
}

.vm-reviews__stars {
	color: var(--vm-copper-dark);
	letter-spacing: 0.12em;
	margin-bottom: 0.6rem;
}

.vm-reviews__card blockquote {
	margin: 0 0 0.85rem;
	font-family: var(--vm-font-display);
	font-size: 1.08rem;
	font-style: italic;
	border: 0;
	padding: 0;
	line-height: 1.5;
}

.vm-reviews__card figcaption {
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--vm-slate);
}

/* =====================  Team bio  ===================== */

.vm-team-bio {
	display: flex;
	gap: 1.75rem;
	align-items: flex-start;
	background: var(--vm-white);
	border: 1px solid var(--vm-line);
	border-radius: var(--vm-radius);
	box-shadow: var(--vm-shadow);
	padding: 1.75rem;
	margin: 1.5rem 0;
}

.vm-team-bio__photo {
	width: 128px;
	height: 128px;
	object-fit: cover;
	border-radius: 50%;
	flex-shrink: 0;
	box-shadow: 0 0 0 4px var(--vm-mist);
}

.vm-team-bio__name {
	margin: 0;
	font-size: 1.35rem;
}

.vm-team-bio__role {
	color: var(--vm-blue);
	font-weight: 600;
	margin: 0.15rem 0 0.6rem;
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.vm-team-bio__text {
	margin: 0;
	color: var(--vm-slate);
}

@media (max-width: 600px) {
	.vm-team-bio {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}

/* =====================  Local guide card  ===================== */

.vm-local-guide {
	position: relative;
	display: block;
	border-radius: var(--vm-radius);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--vm-blue);
	text-decoration: none;
	box-shadow: var(--vm-shadow);
}

.vm-local-guide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.vm-local-guide:hover img {
	transform: scale(1.05);
}

.vm-local-guide__title {
	position: absolute;
	inset: auto 0 0 0;
	padding: 2.5rem 1.25rem 1.15rem;
	background: linear-gradient(transparent, rgba(31, 41, 51, 0.88));
	color: var(--vm-white);
	font-family: var(--vm-font-display);
	font-weight: 600;
	font-size: 1.3rem;
}

/* =====================  CTA banner  ===================== */

.vm-cta-banner {
	background: linear-gradient(120deg, var(--vm-copper) 0%, var(--vm-copper-dark) 100%);
	color: var(--vm-white);
	border-radius: var(--vm-radius);
	padding: clamp(2rem, 5vw, 3.25rem);
	margin: 2rem 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
}

.vm-cta-banner__text {
	font-family: var(--vm-font-display);
	font-size: clamp(1.35rem, 3vw, 1.9rem);
	font-weight: 600;
	margin: 0;
}

/* =====================  Footer  ===================== */

.vm-footer {
	background: var(--vm-navy);
	color: rgba(255, 255, 255, 0.82);
	padding: 0 1.5rem 2rem;
	margin-top: 4rem;
}

.vm-footer__wave {
	height: 60px;
	background: var(--vm-wave) repeat-x center / 1200px 60px;
	opacity: 0.6;
	margin-bottom: 2rem;
}

.vm-footer__brand {
	font-family: var(--vm-font-display);
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--vm-white);
	margin: 0 0 0.75rem;
}

.vm-footer__brand em {
	color: var(--vm-copper-light);
}

.vm-footer__tagline,
.vm-footer__note {
	font-size: 0.95rem;
	line-height: 1.65;
}

.vm-footer__heading {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--vm-copper-light);
	margin: 0.4rem 0 0.9rem;
}

.vm-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vm-footer__links li {
	margin: 0 0 0.55rem;
}

.vm-footer a {
	color: var(--vm-white);
	text-decoration: none;
}

.vm-footer a:hover {
	color: var(--vm-copper-light);
}

.vm-footer__legal {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.55);
}

/* =====================  Blog  ===================== */

.vm-blog-grid .wp-block-post-title a {
	text-decoration: none;
	color: var(--vm-ink);
}

.vm-blog-grid .wp-block-post-title a:hover {
	color: var(--vm-blue);
}

.vm-blog-grid .wp-block-post-featured-image img {
	border-radius: var(--vm-radius);
}

/* =====================  Page header band (archives)  ===================== */

.vm-page-header {
	background: var(--vm-mist);
	padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
	margin-bottom: 2.5rem;
	text-align: center;
}

.vm-page-header h1 {
	margin: 0 0 0.4rem;
}

.vm-page-header p {
	margin: 0 auto;
	color: var(--vm-slate);
	max-width: 640px;
}

/* -------------------------------------------------------------------------
 * Phase 3 — booking engine: calendar, live quote, checkout, confirmation.
 * ---------------------------------------------------------------------- */

.vm-cal {
	--vm-cal-band: rgba(13, 31, 60, 0.09);
	margin-top: 1rem;
	max-width: 340px;
}

.vm-cal.is-loading {
	opacity: 0.55;
	pointer-events: none;
}

.vm-cal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

.vm-cal__nav {
	border: 1px solid var(--vm-line);
	background: var(--vm-white);
	border-radius: 50%;
	width: 2.25rem;
	height: 2.25rem;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	color: var(--vm-navy);
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.vm-cal__nav:hover {
	background: var(--vm-navy);
	border-color: var(--vm-navy);
	color: var(--vm-white);
}

.vm-cal__guests select {
	border: 1px solid var(--vm-line);
	border-radius: 999px;
	padding: 0.4rem 0.9rem;
	background: var(--vm-white);
	font: inherit;
	color: var(--vm-navy);
	font-weight: 600;
}

.vm-cal__months {
	display: grid;
	/* minmax(0,1fr) lets the track shrink below the cells' min-content,
	   otherwise the 7-col day grids blow the calendar width out. */
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
}

.vm-cal__label {
	font-family: var(--vm-font-display);
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--vm-navy);
	text-align: center;
	margin: 0 0 0.5rem;
}

.vm-cal__dow,
.vm-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	/* No column gap: the in-range band must read as one continuous strip. */
	gap: 3px 0;
}

.vm-cal__dow span {
	text-align: center;
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--vm-slate);
	padding-bottom: 0.35rem;
}

.vm-cal__day {
	position: relative;
	aspect-ratio: 1 / 1;
	border: 0;
	background: transparent;
	border-radius: 0;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font: inherit;
	color: var(--vm-ink);
	padding: 0;
}

/* One ::before per cell: hover ring, or filled navy circle on endpoints —
   drawn above the range band, below the number/price. */
.vm-cal__day::before {
	content: "";
	position: absolute;
	inset: 2px;
	border-radius: 50%;
	transition: box-shadow 0.15s ease, background 0.15s ease;
}

.vm-cal__num,
.vm-cal__price {
	position: relative;
	z-index: 1;
}

.vm-cal__day:hover:not([disabled]):not(.is-selected)::before {
	box-shadow: inset 0 0 0 1.5px var(--vm-navy);
}

.vm-cal__day.is-blocked,
.vm-cal__day[disabled] {
	background: transparent;
	color: #c2c8d0;
	cursor: not-allowed;
	text-decoration: line-through;
}

/* Nights between the endpoints: a continuous soft band. */
.vm-cal__day.is-in-range {
	background: var(--vm-cal-band);
}

/* Round the band off where it wraps at the row edges (pads count as
   children, so 7n+1/7n always land on the Sunday/Saturday columns). */
.vm-cal__grid .vm-cal__day.is-in-range:nth-child(7n + 1) {
	border-radius: 999px 0 0 999px;
}
.vm-cal__grid .vm-cal__day.is-in-range:nth-child(7n) {
	border-radius: 0 999px 999px 0;
}

/* Check-in / check-out: solid navy circle over a half-width band so the
   strip visually runs into the circle. */
.vm-cal__day.is-selected {
	color: var(--vm-white);
}

.vm-cal__day.is-selected::before {
	background: var(--vm-navy);
	box-shadow: var(--vm-shadow);
}

.vm-cal__day.is-start {
	background: linear-gradient(to right, transparent 50%, var(--vm-cal-band) 50%);
}

.vm-cal__day.is-end {
	background: linear-gradient(to left, transparent 50%, var(--vm-cal-band) 50%);
}

/* Today: a small copper tick under the number. */
.vm-cal__day.is-today:not(.is-selected) .vm-cal__num::after {
	content: "";
	display: block;
	width: 0.9em;
	height: 2px;
	border-radius: 2px;
	margin: 1px auto 0;
	background: var(--vm-copper);
}

.vm-cal__num {
	font-size: 0.85rem;
	font-weight: 600;
}

.vm-cal__price {
	font-size: 0.6rem;
	color: var(--vm-slate);
}

.vm-cal__day.is-selected .vm-cal__price {
	color: rgba(255, 255, 255, 0.85);
}

.vm-cal__pad {
	aspect-ratio: 1 / 1;
}

.vm-cal__error {
	color: #b3261e;
	font-size: 0.85rem;
	margin: 0.5rem 0;
}

/* Search date-range popover (datepicker.js) — reuses the .vm-cal design. */
.vm-datepicker {
	position: fixed;
	z-index: 80; /* Above the sticky header (50) and search dock (60). */
	width: 330px;
	background: var(--vm-white);
	border: 1px solid var(--vm-line);
	border-radius: var(--vm-radius);
	box-shadow: var(--vm-shadow-lift);
	padding: 0.9rem 1rem 0.75rem;
}

.vm-datepicker[hidden] {
	display: none;
}

.vm-datepicker .vm-cal {
	margin-top: 0;
	max-width: none;
}

.vm-datepicker .vm-cal__head {
	margin-bottom: 0.4rem;
}

.vm-datepicker .vm-cal__label {
	margin: 0;
}

.vm-datepicker__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 0.6rem;
	padding-top: 0.6rem;
	border-top: 1px solid var(--vm-line);
}

.vm-datepicker__hint {
	font-size: 0.78rem;
	color: var(--vm-slate);
}

.vm-datepicker__clear {
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--vm-copper-dark);
	cursor: pointer;
	white-space: nowrap;
}

.vm-datepicker__clear:hover {
	text-decoration: underline;
}

/* The converted date fields open a picker rather than accept typing. */
.vm-search input[data-vm-date] {
	cursor: pointer;
	caret-color: transparent;
}

@media (max-width: 520px) {
	.vm-datepicker {
		left: 50% !important;
		transform: translateX(-50%);
		width: min(92vw, 340px);
	}
}

/* Quote breakdown ------------------------------------------------------- */

.vm-quote {
	margin-top: 1.25rem;
	border-top: 1px solid var(--vm-line);
	padding-top: 1rem;
}

.vm-quote__dates {
	font-weight: 600;
	margin: 0 0 0.75rem;
}

.vm-quote__row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.3rem 0;
	color: var(--vm-slate);
}

.vm-quote__row--credit {
	color: #2e7d32;
}

.vm-quote__row--total {
	border-top: 1px solid var(--vm-line);
	margin-top: 0.4rem;
	padding-top: 0.6rem;
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--vm-ink);
}

.vm-quote__savings {
	background: rgba(202, 133, 73, 0.12);
	color: var(--vm-copper-dark);
	border-radius: var(--vm-radius-sm);
	padding: 0.5rem 0.75rem;
	font-size: 0.85rem;
	margin: 0.75rem 0;
}

.vm-quote__book {
	width: 100%;
	margin-top: 0.5rem;
}

.vm-quote__trust {
	font-size: 0.72rem;
	color: var(--vm-slate);
	text-align: center;
	margin: 0.6rem 0 0;
}

.vm-booking__loading,
.vm-checkout__loading {
	color: var(--vm-slate);
	font-style: italic;
}

/* Checkout -------------------------------------------------------------- */

.vm-checkout {
	display: grid;
	gap: 2rem;
}

@media (min-width: 780px) {
	.vm-checkout {
		grid-template-columns: 1fr 1.1fr;
		align-items: start;
	}
}

.vm-checkout__summary {
	background: var(--vm-mist);
	border-radius: var(--vm-radius);
	padding: 1.5rem;
}

.vm-checkout__summary h2,
.vm-checkout__form h2 {
	margin-top: 0;
	font-size: 1.15rem;
}

.vm-checkout__note {
	font-size: 0.8rem;
	color: var(--vm-slate);
	margin: 0.4rem 0 0;
}

.vm-field {
	display: block;
	margin-bottom: 0.9rem;
}

.vm-field span {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 0.3rem;
}

.vm-field input {
	width: 100%;
	border: 1px solid var(--vm-line);
	border-radius: var(--vm-radius-sm);
	padding: 0.6rem 0.7rem;
	font: inherit;
	box-sizing: border-box;
}

.vm-field input:focus-visible {
	outline: 2px solid var(--vm-blue);
	outline-offset: 1px;
}

/* Phone field: country-code select + national-number input on one row. */
.vm-field .vm-field__phone-row {
	display: flex;
	gap: 0.4rem;
	font-size: inherit;
	font-weight: 400;
	margin-bottom: 0;
}

.vm-field__phone-row select {
	flex: 0 0 auto;
	max-width: 9.5rem;
	border: 1px solid var(--vm-line);
	border-radius: var(--vm-radius-sm);
	padding: 0.6rem 0.4rem;
	font: inherit;
	background: var(--vm-white);
}

.vm-field__phone-row select:focus-visible {
	outline: 2px solid var(--vm-blue);
	outline-offset: 1px;
}

.vm-field__phone-row input {
	flex: 1 1 auto;
	min-width: 0;
}

#vm-payment-element {
	margin: 0.5rem 0 1rem;
}

/* Rental Agreement consent — row layout; undo the block label/full-width
   input rules that .vm-field applies to text inputs. */
.vm-field--terms {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	margin: 1rem 0 0.4rem;
	cursor: pointer;
}

.vm-field--terms input[type="checkbox"] {
	width: 1.05rem;
	height: 1.05rem;
	margin: 0.15rem 0 0;
	flex-shrink: 0;
	accent-color: var(--vm-navy);
}

.vm-field--terms span {
	display: inline;
	font-size: 0.85rem;
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
	color: var(--vm-slate);
}

.vm-field--terms a {
	color: var(--vm-navy);
	font-weight: 600;
}

.vm-checkout__error {
	color: #b3261e;
	font-size: 0.9rem;
	margin: 0.5rem 0;
}

.vm-checkout__pay {
	width: 100%;
}

.vm-checkout__pay:disabled {
	opacity: 0.6;
	cursor: progress;
}

/* Confirmation ---------------------------------------------------------- */

.vm-confirmation__code {
	font-size: 1.1rem;
}

.vm-confirmation__rows {
	background: var(--vm-mist);
	border-radius: var(--vm-radius);
	padding: 1.25rem 1.5rem;
	margin: 1.25rem 0;
}

/* -------------------------------------------------------------------------
 * Phase 4 — promo code, flexible-dates suggestions, a11y/perf polish.
 * ---------------------------------------------------------------------- */

.vm-quote__coupon {
	display: flex;
	gap: 0.5rem;
	margin: 0.75rem 0;
}

.vm-quote__coupon input {
	flex: 1;
	border: 1px solid var(--vm-line);
	border-radius: var(--vm-radius-sm);
	padding: 0.5rem 0.6rem;
	font: inherit;
}

.vm-quote__coupon-apply {
	border: 1px solid var(--vm-blue);
	background: var(--vm-white);
	color: var(--vm-blue);
	border-radius: var(--vm-radius-sm);
	padding: 0.5rem 0.9rem;
	font-weight: 600;
	cursor: pointer;
	flex-shrink: 0;
	white-space: nowrap;
}

.vm-quote__coupon-apply:hover {
	background: var(--vm-blue);
	color: var(--vm-white);
}

.vm-cal__suggest {
	display: inline-block;
	margin-left: 0.4rem;
	background: none;
	border: none;
	color: var(--vm-blue);
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
	padding: 0;
}

.vm-suggest {
	margin-top: 1.25rem;
	border-top: 1px solid var(--vm-line);
	padding-top: 1rem;
}

.vm-suggest__title {
	font-size: 0.95rem;
	margin: 0.75rem 0 0.5rem;
}

.vm-suggest__dates,
.vm-suggest__others {
	list-style: none;
	margin: 0 0 0.5rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.vm-suggest__date {
	width: 100%;
	text-align: left;
	border: 1px solid var(--vm-line);
	background: var(--vm-mist);
	border-radius: var(--vm-radius-sm);
	padding: 0.55rem 0.75rem;
	font: inherit;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}

.vm-suggest__date:hover {
	border-color: var(--vm-blue);
}

.vm-suggest__date span,
.vm-suggest__others span {
	color: var(--vm-slate);
}

.vm-suggest__others a {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.55rem 0.75rem;
	border: 1px solid var(--vm-line);
	border-radius: var(--vm-radius-sm);
	text-decoration: none;
	color: var(--vm-ink);
}

.vm-suggest__others a:hover {
	border-color: var(--vm-copper);
}

.vm-suggest__none {
	color: var(--vm-slate);
	font-size: 0.9rem;
}

/* Accessibility + performance ------------------------------------------ */

.vm-cal__day:focus-visible,
.vm-suggest__date:focus-visible,
.vm-quote__coupon-apply:focus-visible,
.vm-cal__nav:focus-visible {
	outline: 2px solid var(--vm-blue);
	outline-offset: 2px;
}

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

/* Local guide on property pages (PRD §5.5) */
.vm-local__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1rem;
}

.vm-local__card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	text-decoration: none;
	color: var(--vm-ink);
}

.vm-local__card img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--vm-radius-sm);
}

.vm-local__card-title {
	font-weight: 600;
	font-size: 0.9rem;
	line-height: 1.3;
}

.vm-local__card:hover .vm-local__card-title {
	color: var(--vm-copper-dark);
}

/* ---- Contact form ---------------------------------------------------- */

.vm-contact-form {
	max-width: 560px;
	display: grid;
	gap: 1rem;
	margin-top: 1.5rem;
}

.vm-contact-form .vm-field textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.65rem 0.8rem;
	border: 1px solid var(--vm-border, #d8dee6);
	border-radius: var(--vm-radius-sm);
	font: inherit;
	min-height: 9rem;
	resize: vertical;
}

.vm-contact-form .vm-field textarea:focus-visible {
	outline: 2px solid var(--vm-copper, #b6733e);
	outline-offset: 1px;
}

.vm-contact-form .vm-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.vm-contact__status {
	margin: 0;
	padding: 0.75rem 1rem;
	border-radius: var(--vm-radius-sm);
	font-size: 0.95rem;
}

.vm-contact__status--ok {
	background: #e8f4ea;
	color: #1d5a2a;
}

.vm-contact__status--error {
	background: #fbeaea;
	color: #8a2323;
}

/* --------------------------------------------------------------------------
 * Local events (inc/events.php — [vm_events] shortcode)
 * ----------------------------------------------------------------------- */

.vm-events {
	display: grid;
	/* Every row stretches to the tallest card so all cards match. */
	grid-auto-rows: 1fr;
	gap: 1.25rem;
	margin: 1.5rem 0;
}

.vm-event {
	display: flex;
	gap: 1.25rem;
	background: var(--vm-white);
	border: 1px solid var(--vm-line);
	border-radius: 18px;
	box-shadow: var(--vm-shadow);
	padding: 1.1rem 1.25rem;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.vm-event:hover {
	transform: translateY(-4px);
	box-shadow: var(--vm-shadow-lift);
	border-color: rgba(202, 133, 73, 0.45);
}

/* Scroll-driven entrance (Chrome 115+): cards rise and fade as they enter
   the viewport. Elsewhere they are simply visible. */
@supports (animation-timeline: view()) {
	.vm-event,
	.vm-dine-card {
		animation: vm-rise-in linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 55%;
	}
}

/* translate/scale (not transform) so the filled animation never fights the
   cards' transform-based hover lift. */
@keyframes vm-rise-in {
	from {
		opacity: 0;
		translate: 0 34px;
		scale: 0.97;
	}

	to {
		opacity: 1;
		translate: 0 0;
		scale: 1;
	}
}

/* Google only serves ~150px event thumbnails — show them at natural size
 * as a square thumb so they stay crisp instead of upscaling to a hero. */
.vm-event__media {
	flex: 0 0 150px;
	align-self: center;
	position: relative;
	border-radius: var(--vm-radius-sm);
	overflow: hidden;
}

.vm-event__media img {
	width: 150px;
	height: 150px;
	object-fit: cover;
	display: block;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.vm-event:hover .vm-event__media img {
	transform: scale(1.07);
}

/* Tear-off-calendar date badge, overlaid on the thumb (or standing alone
   when an event has no image). */
.vm-event__cal {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 3rem;
	padding: 0.3rem 0.45rem 0.35rem;
	border-radius: 10px;
	background: rgba(250, 249, 246, 0.92);
	backdrop-filter: blur(4px);
	box-shadow: 0 4px 12px rgba(13, 31, 60, 0.25);
	line-height: 1.05;
	pointer-events: none;
}

.vm-event__cal--solo {
	position: static;
	align-self: flex-start;
	background: var(--vm-navy);
	box-shadow: var(--vm-shadow);
}

.vm-event__cal-month {
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--vm-copper-dark);
}

.vm-event__cal--solo .vm-event__cal-month {
	color: var(--vm-copper);
}

.vm-event__cal-day {
	font-family: var(--vm-font-display);
	font-size: 1.45rem;
	font-weight: 700;
	color: var(--vm-navy);
}

.vm-event__cal--solo .vm-event__cal-day {
	color: var(--vm-white);
}

.vm-event__body {
	min-width: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.vm-event__date {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--vm-copper-dark);
	margin-bottom: 0.25rem;
}

.vm-event__title {
	font-family: var(--vm-font-display);
	font-size: 1.25rem;
	line-height: 1.25;
	margin: 0 0 0.35rem;
}

.vm-event__title a {
	color: var(--vm-ink);
	text-decoration: none;
}

.vm-event__title a:hover {
	color: var(--vm-copper-dark);
	text-decoration: underline;
}

.vm-event__when,
.vm-event__where {
	margin: 0 0 0.2rem;
	font-size: 0.9rem;
	color: var(--vm-slate);
}

.vm-event__desc {
	margin: 0.5rem 0 0;
	font-size: 0.95rem;
	color: var(--vm-ink);
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

/* margin-top:auto pins the buttons to a shared bottom edge. */
.vm-event__actions {
	margin: 0.75rem 0 0;
	margin-top: auto;
	padding-top: 0.75rem;
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.vm-event__more,
.vm-event__tickets {
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--vm-copper-dark);
	text-decoration: none;
	border: 1px solid var(--vm-copper);
	border-radius: 999px;
	padding: 0.3rem 0.9rem;
	white-space: nowrap;
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.vm-event__tickets {
	background: var(--vm-navy);
	border-color: var(--vm-navy);
	color: var(--vm-white);
}

.vm-event__more:hover,
.vm-event__tickets:hover {
	background: var(--vm-copper);
	border-color: var(--vm-copper);
	color: var(--vm-white);
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(202, 133, 73, 0.35);
}

.vm-events__meta,
.vm-events__empty {
	font-size: 0.85rem;
	color: var(--vm-slate);
	margin: 0.75rem 0 0;
}

/* Compact strip (home page) */

.vm-events--compact {
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	grid-auto-rows: 1fr;
	gap: 1rem;
}

.vm-event-mini {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	background: var(--vm-white);
	border: 1px solid var(--vm-line);
	border-radius: var(--vm-radius-sm);
	padding: 0.6rem;
	text-decoration: none;
	color: var(--vm-ink);
	box-shadow: var(--vm-shadow);
	min-width: 0;
}

a.vm-event-mini {
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

a.vm-event-mini:hover {
	box-shadow: var(--vm-shadow-lift);
	transform: translateY(-3px);
	border-color: rgba(202, 133, 73, 0.45);
}

.vm-event-mini__img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: var(--vm-radius-sm);
	flex-shrink: 0;
}

.vm-event-mini__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.vm-event-mini__date {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--vm-copper-dark);
}

.vm-event-mini__title {
	font-weight: 600;
	font-size: 0.92rem;
	line-height: 1.3;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.vm-event-mini__venue {
	font-size: 0.8rem;
	color: var(--vm-slate);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 640px) {
	.vm-event {
		gap: 0.9rem;
		padding: 0.9rem 1rem;
	}

	/* Keep the thumb small on phones too — never upscale it. */
	.vm-event__media {
		flex-basis: 96px;
	}

	.vm-event__media img {
		width: 96px;
		height: 96px;
	}
}

.vm-events__heading {
	font-family: var(--vm-font-display);
	font-size: 1.6rem;
	margin: 0 0 1rem;
}

.vm-home-events {
	padding: 2.5rem 0 1.5rem;
}

.vm-home-events:not(:has(.vm-events)) {
	display: none;
}

.vm-events__cta {
	margin: 1rem 0 0;
}

.vm-events__cta a {
	font-weight: 600;
	color: var(--vm-copper-dark);
	text-decoration: none;
}

.vm-events__cta a:hover {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
 * Mobile fixes (v0.3.8)
 * ----------------------------------------------------------------------- */

/* Open mobile-nav overlay: full-screen navy panel that blooms open from the
   hamburger corner, links cascading in one after another. Keyframes (not
   transitions) because core toggles the overlay via display:none.
   (Core zeroes padding on the overlay itself, so pad the content wrapper.) */
.wp-block-navigation__responsive-container.is-menu-open {
	background: linear-gradient(165deg, var(--vm-navy) 0%, #142948 55%, #1c355c 100%);
	animation: vm-overlay-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
	overflow: hidden auto; /* watermark never causes an x-scrollbar; long menus can still scroll */
}

@keyframes vm-overlay-in {
	from {
		opacity: 0.4;
		clip-path: circle(1.5rem at calc(100% - 2.6rem) 2.6rem);
	}

	to {
		opacity: 1;
		clip-path: circle(150% at calc(100% - 2.6rem) 2.6rem);
	}
}

/* Faint oversized wordmark as an ambient backdrop. */
.wp-block-navigation__responsive-container.is-menu-open::before {
	content: "Michiana";
	position: absolute;
	right: 0;
	bottom: 2.5rem;
	font-family: var(--vm-font-display);
	font-style: italic;
	font-size: clamp(5rem, 22vw, 9rem);
	line-height: 1;
	color: rgba(255, 255, 255, 0.05);
	pointer-events: none;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: 5.5rem 2.25rem 2rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 1.4rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	opacity: 0;
	animation: vm-link-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(1) { animation-delay: 0.1s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: 0.16s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: 0.22s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: 0.28s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: 0.34s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(6) { animation-delay: 0.4s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(7) { animation-delay: 0.46s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(8) { animation-delay: 0.52s; }

@keyframes vm-link-in {
	from {
		opacity: 0;
		transform: translateY(26px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--vm-font-display);
	font-size: 2rem;
	font-weight: 600;
	color: var(--vm-white);
	transition: color 0.25s ease, padding-left 0.25s ease;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	color: var(--vm-copper);
	padding-left: 0.4rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--vm-copper);
}

/* Inside the navy overlay the close control turns white and twists in. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	color: var(--vm-white);
	animation: vm-close-in 0.45s 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes vm-close-in {
	from {
		opacity: 0;
		transform: rotate(-90deg) scale(0.6);
	}

	to {
		opacity: 1;
		transform: rotate(0) scale(1);
	}
}

.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
	color: var(--vm-ink);
}

/* Side gutter for standard pages (events, journal, about, checkout, 404…).
   Full-bleed templates (home, stays) are alignfull and manage their own;
   the stay page has its own .vm-property-page gutter. */
@media (max-width: 1280px) {
	main.wp-block-group:not(.alignfull):not(.vm-property-page) {
		padding-left: clamp(1.1rem, 4vw, 2rem);
		padding-right: clamp(1.1rem, 4vw, 2rem);
	}
}

@media (max-width: 781px) {
	/* Stacked layout: the booking widget must not stay sticky or scroll
	   internally — let it flow at natural height. */
	.vm-property-columns__aside > * {
		position: static;
		max-height: none;
		overflow-y: visible;
	}

	/* Gallery thumbs: swipeable strip instead of eight 105px crops. */
	.vm-gallery__thumbs {
		display: flex;
		overflow-x: auto;
		gap: 0.6rem;
		padding-bottom: 0.35rem;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
	}

	.vm-gallery__thumbs img {
		flex: 0 0 132px;
		width: 132px;
		height: 99px;
		scroll-snap-align: start;
	}
}

/* The desktop nav is right-justified; inside the overlay core copies that
   justification onto the content wrapper, the list, and each item, pinning
   links to the screen edge. Re-align every level from the left. */
.wp-block-navigation.items-justified-right .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation.items-justified-right .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
.wp-block-navigation.items-justified-right .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
	justify-content: flex-start;
}

/* Card grids and the stays filter bar sit in full-bleed sections; give them
   breathing room from the screen edge on phones. */
@media (max-width: 781px) {
	.vm-cards,
	.vm-listing-grid__filters,
	.vm-home-events {
		padding-left: 1.1rem;
		padding-right: 1.1rem;
	}
}

/* --------------------------------------------------------------------------
 * Nearby restaurants (v0.4.0, redesigned v0.6.0) — /restaurants index cards
 * + single pages. Google Maps place thumbnails are ~1000px (unlike the tiny
 * event thumbs), so the index cards lead with a full-width photo.
 * ----------------------------------------------------------------------- */

/* Cuisine filter chips (populated by inc/restaurants.php, driven by the
   inline vm-dine script in functions.php). */
.vm-dine-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1.5rem 0 0;
}

.vm-dine-filters button {
	appearance: none;
	border: 1px solid var(--vm-line);
	background: var(--vm-white);
	color: var(--vm-ink);
	border-radius: 999px;
	padding: 0.4rem 1rem;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.vm-dine-filters button:hover {
	border-color: var(--vm-navy);
	transform: translateY(-1px);
}

.vm-dine-filters button.is-active {
	background: var(--vm-navy);
	border-color: var(--vm-navy);
	color: var(--vm-white);
}

/* The grids escape the narrow page column: modern card grids want room.
   (Safe transform breakout — the animated hover transforms live on the
   cards, never on these containers.) */
.vm-dine,
.vm-dine-filters,
.vm-dine__meta,
.page .vm-events:not(.vm-events--compact),
.page .vm-events__meta {
	width: min(1120px, 94vw);
	max-width: none; /* out from under the constrained-layout child cap */
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

/* With room to breathe, the events list becomes a two-column grid. */
.vm-events:not(.vm-events--compact) {
	grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
}

@media (max-width: 1024px) {
	.vm-events:not(.vm-events--compact) {
		grid-template-columns: minmax(0, 1fr);
	}
}

.vm-dine {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	grid-auto-rows: 1fr;
	gap: 1.5rem;
	margin: 1.5rem 0;
}

.vm-dine-card {
	display: flex;
	flex-direction: column;
	background: var(--vm-white);
	border: 1px solid var(--vm-line);
	border-radius: 18px;
	box-shadow: var(--vm-shadow);
	overflow: hidden;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.vm-dine-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--vm-shadow-lift);
	border-color: rgba(202, 133, 73, 0.45);
}

.vm-dine-card.is-hidden {
	display: none;
}

/* Filter swap: the grid replays a quick pop when a chip is applied. */
.vm-dine.is-filtering .vm-dine-card {
	animation: vm-card-pop 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes vm-card-pop {
	from {
		opacity: 0;
		translate: 0 14px;
	}

	to {
		opacity: 1;
		translate: 0 0;
	}
}

.vm-dine-card__media {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	position: relative;
}

.vm-dine-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.vm-dine-card:hover .vm-dine-card__media img {
	transform: scale(1.06);
}

/* Open/closed pill floats over the photo. */
.vm-dine-card__media .vm-dine-card__open {
	position: absolute;
	top: 0.7rem;
	left: 0.7rem;
	margin: 0;
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
	background: rgba(250, 249, 246, 0.92);
	backdrop-filter: blur(4px);
	box-shadow: 0 4px 12px rgba(13, 31, 60, 0.22);
	font-size: 0.78rem;
}

.vm-dine-card__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1;
	padding: 1rem 1.15rem 1.15rem;
}

.vm-dine-card__title {
	font-family: var(--vm-font-display);
	font-size: 1.25rem;
	margin: 0 0 0.3rem;
}

.vm-dine-card__title a {
	text-decoration: none;
	color: var(--vm-navy);
	transition: color 0.25s ease;
}

.vm-dine-card__title a:hover {
	color: var(--vm-copper-dark);
}
.vm-dine-card__rating {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0 0 0.2rem;
	font-size: 0.95rem;
}
.vm-dine-card__rating .vm-stars {
	font-size: 1rem;
}
.vm-dine-card__rating span {
	color: var(--vm-slate);
}
.vm-dine-card__facts,
.vm-dine-card__address {
	margin: 0 0 0.2rem;
	font-size: 0.9rem;
	color: var(--vm-slate);
}
.vm-dine-card__actions {
	margin: auto 0 0;
	padding-top: 0.5rem;
	font-size: 0.95rem;
}
.vm-dine-card__actions a {
	color: var(--vm-copper-dark);
	font-weight: 600;
	text-decoration: none;
}
.vm-dine-card__actions a .vm-arrow {
	display: inline-block;
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.vm-dine-card__actions a:hover .vm-arrow {
	transform: translateX(5px);
}
.vm-dine-card__actions a:hover {
	color: var(--vm-copper);
}
.vm-dine__meta,
.vm-dine__empty {
	color: var(--vm-slate);
	font-size: 0.9rem;
}

/* Single restaurant page. */
.vm-restaurant__rating {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: -0.5rem 0 1.5rem;
	color: var(--vm-slate);
}
.vm-restaurant__facts::before {
	content: "·";
	margin-right: 0.5rem;
}
.vm-restaurant__intro {
	display: flex;
	gap: 1.5rem;
	align-items: flex-start;
	margin-bottom: 1.5rem;
}
/* Place photos are ~1000px — show a proper portrait, not a postage stamp. */
.vm-restaurant__thumb {
	flex-shrink: 0;
	width: min(320px, 34vw);
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 18px;
	box-shadow: var(--vm-shadow-lift);
}
.vm-restaurant__summary {
	margin-top: 0;
	font-size: 1.05rem;
}
.vm-restaurant__details {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.4rem;
}
.vm-restaurant__details strong {
	display: inline-block;
	min-width: 5.5rem;
	color: var(--vm-ink);
}
.vm-restaurant__guide {
	margin-top: 1rem;
	padding: 0.75rem 1rem;
	background: var(--vm-mist);
	border-radius: var(--vm-radius-sm);
}
.vm-restaurant__map {
	height: 320px;
	border-radius: var(--vm-radius);
	box-shadow: var(--vm-shadow);
	margin: 1.5rem 0 2rem;
}
.vm-restaurant__stays {
	margin: 2.5rem 0 1.5rem;
}
.vm-restaurant__stays h2 {
	font-family: var(--vm-font-display);
	margin-bottom: 0.25rem;
}
.vm-restaurant__stays > p {
	margin-top: 0;
	color: var(--vm-slate);
}
.vm-restaurant__back {
	margin-top: 2rem;
}
.vm-restaurant__back a {
	color: var(--vm-copper-dark);
	font-weight: 600;
	text-decoration: none;
}

@media (max-width: 781px) {
	.vm-dine {
		grid-template-columns: minmax(0, 1fr);
	}
	.vm-restaurant__intro {
		flex-direction: column;
	}
	.vm-restaurant__thumb {
		width: 100%;
		height: auto;
		aspect-ratio: 3 / 2;
	}
	.vm-restaurant__map {
		height: 240px;
	}
}

/* Restaurant hours + good-to-know (v0.4.1). */
.vm-dine-card__open {
	margin: 0 0 0.2rem;
	font-size: 0.85rem;
	font-weight: 600;
}
.vm-dine-card__open.is-open,
.vm-restaurant__open.is-open {
	color: #1e7d43;
}
.vm-dine-card__open.is-closed,
.vm-restaurant__open.is-closed {
	color: #a04226;
}
.vm-restaurant__open {
	font-weight: 600;
}
.vm-restaurant__open::before {
	content: "·";
	margin-right: 0.5rem;
	color: var(--vm-slate);
	font-weight: 400;
}
.vm-restaurant__hours {
	margin: 0 0 1.5rem;
}
.vm-restaurant__hours h2,
.vm-restaurant__about h2 {
	font-family: var(--vm-font-display);
	margin-bottom: 0.5rem;
}
.vm-restaurant__hours table {
	border-collapse: collapse;
	min-width: 260px;
}
.vm-restaurant__hours th,
.vm-restaurant__hours td {
	text-align: left;
	padding: 0.3rem 1.25rem 0.3rem 0;
	border: 0;
	font-size: 0.95rem;
}
.vm-restaurant__hours th {
	font-weight: 600;
	color: var(--vm-ink);
	width: 7rem;
}
.vm-restaurant__hours td {
	color: var(--vm-slate);
}
.vm-restaurant__hours .vm-is-today th,
.vm-restaurant__hours .vm-is-today td {
	color: var(--vm-copper-dark);
	font-weight: 700;
}
.vm-restaurant__about {
	margin: 0 0 1.5rem;
}
.vm-restaurant__buckets {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 1rem 1.5rem;
}
.vm-restaurant__bucket h3 {
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--vm-slate);
	margin: 0 0 0.4rem;
}
.vm-chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}
.vm-chips li {
	background: var(--vm-mist);
	border: 1px solid var(--vm-line);
	border-radius: 999px;
	padding: 0.2rem 0.7rem;
	font-size: 0.85rem;
	color: var(--vm-ink);
}

/* Uploadable header logo (v0.4.2): the Site Logo block replaces the CSS
 * wave mark once an image is uploaded (Site Editor → Header → Add a site
 * logo); until then the original mark shows. */
.vm-brand-group {
	gap: 0.6rem;
}
.vm-header .wp-block-site-logo img {
	height: 40px;
	width: auto;
	max-width: 160px;
	object-fit: contain;
	display: block;
}
.vm-brand-group:has(.wp-block-site-logo img) .vm-brand__mark {
	display: none;
}

/* Journal cards redesign (v0.4.3) — match the .vm-card / .vm-dine look:
 * photo top, category kicker, title, date, excerpt, pinned Read link,
 * equal heights, hover lift. */
.vm-blog-grid {
	margin-top: 1.75rem;
}
.vm-blog-grid .wp-block-post-template {
	gap: 1.5rem;
}
.vm-blog-grid .wp-block-post {
	display: flex;
}
.vm-post-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--vm-white);
	border: 1px solid var(--vm-line);
	border-radius: var(--vm-radius);
	box-shadow: var(--vm-shadow);
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.vm-post-card:hover {
	box-shadow: var(--vm-shadow-lift);
	transform: translateY(-2px);
}
.vm-post-card__media {
	margin: 0;
}
.vm-post-card__media img {
	display: block;
	width: 100%;
}
.vm-post-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.1rem 1.25rem 1.25rem;
}
.vm-post-card__cats {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	margin: 0 0 0.5rem;
}
.vm-post-card__cats a {
	color: var(--vm-copper-dark);
	font-weight: 700;
	text-decoration: none;
}
.vm-post-card__cats a:hover {
	text-decoration: underline;
}
.vm-post-card__title {
	font-size: 1.3rem;
	line-height: 1.25;
	margin: 0 0 0.4rem;
}
.vm-post-card__title a {
	color: var(--vm-ink);
	text-decoration: none;
}
.vm-post-card__title a:hover {
	color: var(--vm-copper-dark);
}
.vm-post-card__date {
	font-size: 0.85rem;
	color: var(--vm-slate);
	margin: 0 0 0.6rem;
}
.vm-post-card__excerpt {
	display: flex;
	flex-direction: column;
	flex: 1;
	font-size: 0.95rem;
	color: var(--vm-slate);
	margin: 0;
}
.vm-post-card__excerpt p {
	margin: 0;
}
.vm-post-card__excerpt .wp-block-post-excerpt__more-text {
	margin-top: auto;
	padding-top: 0.85rem;
}
.vm-post-card__excerpt .wp-block-post-excerpt__more-link {
	color: var(--vm-copper-dark);
	font-weight: 600;
	text-decoration: none;
}
.vm-post-card__excerpt .wp-block-post-excerpt__more-link:hover {
	text-decoration: underline;
}
.vm-blog-grid .wp-block-query-pagination {
	margin-top: 2.25rem;
}

@media (max-width: 1024px) {
	.vm-blog-grid .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}
@media (max-width: 781px) {
	.vm-blog-grid .wp-block-post-template {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* Uniform card image ratio regardless of source dimensions (v0.4.3). */
.vm-post-card__media img {
	aspect-ratio: 3 / 2;
	height: auto;
	object-fit: cover;
}

/* Single event page (mirrors the single restaurant layout). */
.vm-event-single__intro {
	display: flex;
	gap: 1.5rem;
	align-items: flex-start;
	margin-bottom: 1.5rem;
}
.vm-event-single__media {
	position: relative;
	flex-shrink: 0;
}
.vm-event-single__img {
	width: min(320px, 34vw);
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 18px;
	box-shadow: var(--vm-shadow-lift);
}
.vm-event-single__media .vm-event__cal {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
}
.vm-event-single__desc {
	margin-top: 0;
	font-size: 1.05rem;
}
.vm-event-single__details {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	display: grid;
	gap: 0.4rem;
}
.vm-event-single__details strong {
	display: inline-block;
	min-width: 5.5rem;
	color: var(--vm-ink);
}
.vm-event-single__stays {
	margin: 2.5rem 0 1.5rem;
}
.vm-event-single__stays h2 {
	font-family: var(--vm-font-display);
	margin-bottom: 0.25rem;
}
.vm-event-single__stays > p {
	margin-top: 0;
	color: var(--vm-slate);
}
.vm-event-single__back {
	margin-top: 2rem;
}
.vm-event-single__back a {
	color: var(--vm-copper-dark);
	font-weight: 600;
	text-decoration: none;
}

@media (max-width: 781px) {
	.vm-event-single__intro {
		flex-direction: column;
	}
	.vm-event-single__img {
		width: 100%;
		height: auto;
		aspect-ratio: 3 / 2;
	}
}

/* --------------------------------------------------------------------------
 * Booking-flow polish (v0.7.0): spinner, skeletons, fade-in, pay overlay,
 * confirmation checkmark. Shared by booking.js / checkout.js / confirmation.js.
 * ----------------------------------------------------------------------- */

.vm-spinner {
	display: inline-block;
	width: 1.15em;
	height: 1.15em;
	border: 2.5px solid rgba(13, 31, 60, 0.18);
	border-top-color: var(--vm-copper);
	border-radius: 50%;
	vertical-align: -0.2em;
	animation: vm-spin 0.8s linear infinite;
}

.vm-spinner--lg {
	width: 2.6rem;
	height: 2.6rem;
	border-width: 3.5px;
}

.vm-btn .vm-spinner {
	border-color: rgba(255, 255, 255, 0.35);
	border-top-color: var(--vm-white);
	margin-right: 0.5rem;
}

@keyframes vm-spin {
	to { transform: rotate(360deg); }
}

.vm-fade-up {
	animation: vm-fade-up 0.45s ease both;
}

@keyframes vm-fade-up {
	from {
		opacity: 0;
		translate: 0 14px;
	}
	to {
		opacity: 1;
		translate: 0 0;
	}
}

/* Loading placeholders (checkout while the PaymentIntent opens). */
.vm-skel {
	display: block;
	height: 0.9rem;
	border-radius: 6px;
	background: linear-gradient(90deg, #eceff3 25%, #f7f8fa 45%, #eceff3 65%);
	background-size: 220% 100%;
	animation: vm-shimmer 1.3s ease-in-out infinite;
	margin-bottom: 0.7rem;
}

.vm-skel--title { height: 1.4rem; width: 55%; }
.vm-skel--wide { width: 100%; }
.vm-skel--mid { width: 75%; }
.vm-skel--short { width: 45%; }
.vm-skel--box { height: 9rem; border-radius: var(--vm-radius-sm); }

@keyframes vm-shimmer {
	from { background-position: 120% 0; }
	to { background-position: -120% 0; }
}

.vm-checkout__loading-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	color: var(--vm-slate);
	margin: 0 0 1.5rem;
}

/* Full-screen "securing your reservation" overlay after payment succeeds. */
.vm-pay-overlay {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	place-items: center;
	background: rgba(250, 249, 246, 0.94);
	backdrop-filter: blur(6px);
	animation: vm-overlay-in 0.25s ease both;
}

@keyframes vm-overlay-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

.vm-pay-overlay__card {
	text-align: center;
	padding: 2rem 2.5rem;
}

.vm-pay-overlay__card p {
	font-family: var(--vm-font-display);
	font-size: 1.35rem;
	color: var(--vm-navy);
	margin: 1.25rem 0 0.4rem;
}

.vm-pay-overlay__sub {
	font-family: inherit !important;
	font-size: 0.9rem !important;
	color: var(--vm-slate) !important;
	margin-top: 0 !important;
}

/* Confirmation page: animated draw-on checkmark. */
.vm-confirm-check {
	width: 84px;
	margin: 0.5rem 0 1.25rem;
}

.vm-confirm-check svg {
	width: 100%;
	height: auto;
	overflow: visible;
}

.vm-confirm-check__circle {
	stroke: var(--vm-copper);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-dasharray: 151;
	stroke-dashoffset: 151;
	animation: vm-draw 0.7s ease-out 0.15s forwards;
}

.vm-confirm-check__mark {
	stroke: var(--vm-navy);
	stroke-width: 4;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 36;
	stroke-dashoffset: 36;
	animation: vm-draw 0.4s ease-out 0.75s forwards;
}

@keyframes vm-draw {
	to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.vm-spinner { animation-duration: 1.6s; }
	.vm-fade-up,
	.vm-pay-overlay,
	.vm-skel {
		animation: none;
		opacity: 1;
		translate: none;
	}
	.vm-confirm-check__circle,
	.vm-confirm-check__mark {
		animation: none;
		stroke-dashoffset: 0;
	}
}

/* --------------------------------------------------------------------------
 * About page (v0.7.0)
 * ----------------------------------------------------------------------- */

.vm-about-kicker {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--vm-copper-dark);
	margin-bottom: 0.5rem;
}

.vm-about-lede {
	font-family: var(--vm-font-display);
	font-size: clamp(1.35rem, 2.6vw, 1.9rem);
	line-height: 1.4;
	color: var(--vm-navy);
	max-width: 46ch;
}

.vm-about-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem;
	margin: 2.5rem 0 3rem;
}

.vm-about-stat {
	border-top: 3px solid var(--vm-copper);
	padding-top: 0.8rem;
}

.vm-about-stat strong {
	display: block;
	font-family: var(--vm-font-display);
	font-size: 2.1rem;
	line-height: 1.1;
	color: var(--vm-navy);
}

.vm-about-stat span {
	color: var(--vm-slate);
	font-size: 0.9rem;
}

.vm-about-story {
	align-items: center;
	margin: 1.5rem 0 2rem !important;
}

.vm-about-story h2 {
	font-family: var(--vm-font-display);
	color: var(--vm-navy);
}

.vm-about-story img {
	border-radius: 18px;
	box-shadow: var(--vm-shadow-lift);
}

.vm-about-cta {
	background: var(--vm-navy);
	color: var(--vm-white);
	border-radius: var(--vm-radius);
	padding: 2.75rem 2rem;
	text-align: center;
	margin: 3rem 0 1rem;
}

.vm-about-cta h2 {
	font-family: var(--vm-font-display);
	color: var(--vm-white);
	margin: 0 0 0.5rem;
}

.vm-about-cta p {
	color: rgba(255, 255, 255, 0.82);
	max-width: 52ch;
	margin: 0 auto;
}

.vm-about-cta__actions {
	margin-top: 1.5rem !important;
	display: flex;
	gap: 0.75rem;
	justify-content: center;
	flex-wrap: wrap;
}

@media (max-width: 781px) {
	.vm-about-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem 1rem;
	}
}

/* --------------------------------------------------------------------------
 * Contact page (v0.7.0)
 * ----------------------------------------------------------------------- */

.vm-contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: 1.5rem;
	align-items: start;
	margin-top: 2rem;
}

.vm-contact-card {
	background: var(--vm-mist);
	border-radius: var(--vm-radius);
	padding: 1.25rem 1.4rem;
	margin-bottom: 1rem;
}

.vm-contact-card__icon {
	display: inline-grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 12px;
	background: var(--vm-white);
	box-shadow: var(--vm-shadow);
	font-size: 1.15rem;
	margin-bottom: 0.6rem;
}

.vm-contact-card h3 {
	font-family: var(--vm-font-display);
	font-size: 1.1rem;
	color: var(--vm-navy);
	margin: 0 0 0.3rem;
}

.vm-contact-card p {
	margin: 0;
	color: var(--vm-slate);
	font-size: 0.95rem;
}

.vm-contact-card a {
	color: var(--vm-copper-dark);
	font-weight: 600;
}

.vm-contact-form-card {
	background: var(--vm-white);
	border: 1px solid var(--vm-line);
	border-radius: var(--vm-radius);
	box-shadow: var(--vm-shadow);
	padding: 1.75rem;
}

.vm-contact-form-card h2 {
	font-family: var(--vm-font-display);
	color: var(--vm-navy);
	margin: 0 0 1rem;
	font-size: 1.35rem;
}

.vm-contact-form-card .vm-contact-form {
	margin-top: 0;
	max-width: none;
}

@media (max-width: 900px) {
	.vm-contact-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}