/*
Theme Name: Valhalla Stays
Theme URI: https://valhallastaysdahab.com
Author: Valhalla Stays Dahab
Description: Native block (FSE) theme for Valhalla Stays V2. Design tokens live in theme.json; templates and parts are native blocks. Content types are provided by the Valhalla Core plugin. No page builder.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
Version: 0.1.13
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: valhalla-stays
*/

/*
 * Only what theme.json cannot express lives here.
 * Rules: light scheme only (no dark-mode block), 44px minimum tap targets,
 * visible focus, no animation.
 */

:root {
	color-scheme: light;
	/* Visual foundation (0.1.7): shared lines, radii and tints. Palette values only. */
	--vs-line: rgba(20, 38, 28, 0.10);
	--vs-line-strong: rgba(20, 38, 28, 0.18);
	--vs-accent-tint: rgba(67, 131, 186, 0.08);   /* Royal Blue #4383BA at 8% */
	/* Brand colour system (0.1.8): Blue dominant, Green atmosphere, Gold detail. */
	--vs-line-green: rgba(131, 205, 193, 0.55);  /* Light Green #83CDC1 divider */
	--vs-gold: var(--wp--preset--color--gold);
	--vs-radius-sm: 6px;
	--vs-radius-md: 10px;
	--vs-radius-lg: 12px;
}

/* Visible focus for every interactive element. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* 44px minimum tap target for buttons. */
.wp-element-button,
.wp-block-button__link {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Navigation items: 44px tap targets on every viewport. */
.wp-block-navigation .wp-block-navigation-item__content {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/* Honour reduced-motion preferences (no animation is used by default). */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Valhalla Core components ---------- */

/* Card grid (valhalla/cards). Mobile-first: 1 column, then auto-fill. */
.vs-cards__heading {
	margin-block-end: var(--wp--preset--spacing--30);
}

.vs-cards__grid {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: 1fr;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Fixed 1 / 2 / 3 columns (0.1.8): mobile, tablet (600px+), desktop (1024px+). */
@media (min-width: 600px) {
	.vs-cards__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.vs-cards__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.vs-card {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--vs-line);
	border-radius: var(--vs-radius-lg);
	overflow: hidden;
	box-shadow: var(--wp--preset--shadow--card);
}

.vs-card__media {
	margin: 0;
	aspect-ratio: 3 / 2;
	background: var(--wp--preset--color--soft);
}

.vs-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vs-card__media--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

.vs-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	padding: var(--wp--preset--spacing--30);
	flex: 1;
}

.vs-card__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.005em;
}

.vs-card__title a {
	color: inherit;
	text-decoration: none;
}

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

.vs-card__text {
	margin: 0;
	color: var(--wp--preset--color--muted);
}

.vs-card__note {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.vs-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--20);
}

.vs-card__actions a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-inline: 1.125rem;
	border-radius: var(--vs-radius-sm);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.vs-card__actions .vs-card__view {
	border: 1px solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.vs-card__actions .vs-card__view:hover {
	background: var(--vs-accent-tint);
}

.vs-card__actions .vs-card__enquire {
	border: 1px solid var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.vs-card__actions .vs-card__enquire:hover {
	border-color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--ink);
}

/* Facts list (valhalla/stay-details). */
.vs-facts {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
	margin: 0;
}

.vs-facts dt {
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.vs-facts dd {
	margin: 0;
	color: var(--wp--preset--color--muted);
}

.vs-context {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* ---------- Stay detail page (single-vs_stay) ---------- */

/*
 * Key facts under the title: inline, wrapping, mobile-first.
 * Every value carries a leading "·" in a 2em gutter. The list is shifted
 * left by that gutter and the gutter is clipped, so a separator never
 * appears at the start of a line (including after wrapping on mobile).
 */
.vs-facts.vs-facts--summary {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10) 0;
	margin-left: -2em;
	clip-path: inset(0 0 0 2em);
	font-size: var(--wp--preset--font-size--medium);
}

.vs-facts--summary > dt {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.vs-facts--summary > dd {
	color: var(--wp--preset--color--muted);
}

.vs-facts.vs-facts--summary > dd::before {
	content: "·";
	display: inline-block;
	width: 2em;
	text-align: center;
	color: var(--wp--preset--color--muted);
}

.vs-stay__header .wp-block-post-title {
	margin: 0;
}

.vs-stay__layout {
	margin-top: var(--wp--preset--spacing--40);
}

/* Readable measure for the description. */
.vs-stay__content > * {
	max-width: 65ch;
}

.vs-stay__content > p {
	margin-block: 0 var(--wp--preset--spacing--20);
}

/* "Details" list in the stay description: a clean fact list, no bullets. */
.vs-stay__content > h2 {
	font-size: var(--wp--preset--font-size--large);
	margin-top: var(--wp--preset--spacing--40);
}

.vs-stay__content > .wp-block-list {
	list-style: none;
	padding: 0;
	margin: 0;
	border-top: 1px solid var(--vs-line);
}

.vs-stay__content > .wp-block-list > li {
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--vs-line);
}

/* Enquiry card: after the content on mobile, sticky beside it on desktop. */
.vs-stay__enquire .wp-block-heading {
	margin: 0;
}

@media (min-width: 782px) {
	.vs-stay__aside {
		align-self: flex-start;
		position: sticky;
		top: var(--wp--preset--spacing--40);
	}
}

/* ---------- Property group page (single-vs_property_group) ---------- */

/* The group's units follow the description with clear separation. */
.vs-group > .vs-group__units {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* ---------- Brand logo (header + footer) ---------- */

/* Official logo (1200x628, transparent PNG). Width drives size; height follows, so the aspect ratio is kept. */
.vs-logo {
	margin: 0;
	flex-shrink: 0;
	line-height: 0;
}

.vs-logo a {
	display: inline-block;
}

.vs-logo img {
	display: block;
	max-width: 100%;
	height: auto;
}

.vs-header .vs-logo img {
	width: 136px;
}

.vs-footer .vs-logo {
	margin-bottom: var(--wp--preset--spacing--20);
}

.vs-footer .vs-logo img {
	width: 160px;
}

@media (min-width: 600px) {
	.vs-header .vs-logo img {
		width: 160px;
	}
}

@media (min-width: 782px) {
	.vs-header .vs-logo img {
		width: 176px;
	}

	.vs-footer .vs-logo img {
		width: 200px;
	}
}

@media (min-width: 1024px) {
	.vs-header .vs-logo img {
		width: 200px;
	}
}

/* ==========================================================================
   Visual foundation (0.1.7)
   Restrained refinement of type, header, footer, buttons, cards, CTAs and
   spacing. CSS only: no fonts, scripts, images or animation added.
   ========================================================================== */

/* ---------- Typography ---------- */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

:where(h1, h2, h3, h4) {
	text-wrap: balance;
}

:where(p, li) {
	text-wrap: pretty;
}

/* Links: calmer underline. */
a:where(:not(.wp-element-button)) {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

/* Lead paragraphs (muted intro under a title) read slightly larger. */
.wp-block-post-content > p.has-muted-color:first-child,
.vs-home-hero > p {
	font-size: 1.125rem;
	line-height: 1.6;
}

.vs-home-hero > p {
	font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
	color: var(--wp--preset--color--muted);
}

/* Page title on standard pages: clear space before the content. */
main > .wp-block-post-title {
	margin-block-end: var(--wp--preset--spacing--30);
}

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

.wp-element-button,
.wp-block-button__link {
	gap: 0.5rem;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--accent);
}

.wp-block-buttons {
	gap: 0.75rem;
}

/* ---------- Header and navigation ---------- */

.vs-header {
	border-bottom-color: var(--vs-line-green) !important;
}

.vs-header .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	padding-inline: 0.25rem;
}

.vs-header .wp-block-navigation-item__content:hover,
.vs-header .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.45em;
}

.vs-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.vs-header .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--accent);
}

.vs-header-cta .wp-block-button__link {
	padding: 0.625rem 1.25rem;
}

/* Mobile menu overlay: roomy, legible list. */
.vs-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--40) clamp(1rem, 6vw, 2rem);
	background: var(--wp--preset--color--canvas);
}

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

.vs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.25rem;
	font-weight: 500;
	padding-block: 0.5rem;
}

/* Tap-target size only: no display rule, so core still hides the menu toggle from 600px (fixes 0.1.7 desktop hamburger). */
.vs-header .wp-block-navigation__responsive-container-open,
.vs-header .wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: center;
}

/* 600-899px: the larger logo, four menu items and Enquire do not fit on one row,
   so the menu stays collapsed behind the toggle until 900px (core switches at 600px). */
@media (min-width: 600px) and (max-width: 899px) {
	.vs-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.vs-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

@media (max-width: 599px) {
	.vs-header-cta .wp-block-button__link {
		padding: 0.5rem 1rem;
	}
}

/* ---------- Footer ---------- */

.vs-footer {
	border-top: 1px solid var(--vs-line-green);
}

.vs-footer .vs-footer__heading {
	margin-block: 0 var(--wp--preset--spacing--20);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.vs-footer .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.vs-footer .wp-block-navigation-item__content:hover,
.vs-footer .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

.vs-footer p {
	margin-block: 0 var(--wp--preset--spacing--20);
}

.vs-footer .vs-footer__legal {
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--vs-line-green);
}

/* ---------- Cards ---------- */

.vs-cards__heading {
	margin-block-end: var(--wp--preset--spacing--40);
}

.vs-cards__grid {
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}

.vs-card:hover,
.vs-card:focus-within {
	border-color: var(--vs-line-green);
	box-shadow: var(--wp--preset--shadow--card-hover);
}

.vs-card__media {
	overflow: hidden;
}

.vs-card__meta {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--muted);
}

.vs-card__text {
	font-size: 0.9375rem;
	line-height: 1.6;
}

.vs-card--enquiry-only .vs-card__media--empty {
	background: var(--wp--preset--color--soft);
	border-bottom: 1px solid var(--vs-line);
}

/* ---------- Calls to action ---------- */

.vs-cta {
	border-radius: var(--vs-radius-lg) !important;
	padding: var(--wp--preset--spacing--50) clamp(1.25rem, 4vw, 2.5rem) !important;
}

.vs-cta .wp-block-heading {
	margin-block-start: 0;
}

.vs-cta--enquire {
	border: 1px solid var(--vs-line-green);
}

/* CTA content aligns to the panel's left edge instead of a centred 720px column. */
.vs-cta.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	margin-left: 0 !important;
}

/* ---------- Sections and rhythm ---------- */

main.wp-block-group {
	margin-block-end: 0;
}

/* Landing sections (Home): more generous vertical rhythm. */
.wp-block-post-content > .wp-block-group.alignwide:not(.vs-cta) {
	padding-top: var(--wp--preset--spacing--50) !important;
	padding-bottom: var(--wp--preset--spacing--50) !important;
}

.wp-block-post-content > .vs-home-hero.wp-block-group.alignwide {
	padding-top: var(--wp--preset--spacing--70) !important;
	padding-bottom: var(--wp--preset--spacing--60) !important;
}

.wp-block-post-content > * + .vs-cta {
	margin-block-start: var(--wp--preset--spacing--50);
}

.wp-block-post-content h2.wp-block-heading {
	margin-block-start: var(--wp--preset--spacing--50);
}

.wp-block-post-content > .wp-block-group h2.wp-block-heading:first-child,
.vs-cta h2.wp-block-heading {
	margin-block-start: 0;
}

/* ---------- Stay and group pages ---------- */

.vs-stay__header {
	margin-block-end: var(--wp--preset--spacing--30);
}

.vs-stay .wp-block-post-featured-image img,
.vs-group .wp-block-post-featured-image img {
	border-radius: var(--vs-radius-lg);
}

.vs-context a {
	color: var(--wp--preset--color--muted);
}

.vs-context a:hover {
	color: var(--wp--preset--color--accent);
}

/* Stay gallery: even grid of 4:3 tiles (2 columns on mobile, 3 from 600px).
   Replaces core's flex rows, which stretched a leftover photo to full width. */
.vs-stay__gallery.wp-block-gallery.has-nested-images {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem !important;
}

@media (min-width: 600px) {
	.vs-stay__gallery.wp-block-gallery.has-nested-images {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.vs-stay__gallery.wp-block-gallery.has-nested-images figure.wp-block-image {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	aspect-ratio: 4 / 3;
}

.vs-stay__gallery.wp-block-gallery.has-nested-images figure.wp-block-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	border-radius: var(--vs-radius-md);
}

.vs-stay__enquire {
	border: 1px solid var(--vs-line-green);
	border-radius: var(--vs-radius-lg) !important;
	box-shadow: inset 0 3px 0 var(--vs-gold); /* Gold detail: thin top edge */
}

.vs-group .vs-group__intro {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* ---------- Responsive ---------- */

@media (max-width: 781px) {
	.wp-block-post-content > .wp-block-group.alignwide:not(.vs-cta) {
		padding-top: var(--wp--preset--spacing--40) !important;
		padding-bottom: var(--wp--preset--spacing--40) !important;
	}

	.wp-block-post-content > .vs-home-hero.wp-block-group.alignwide {
		padding-top: var(--wp--preset--spacing--50) !important;
		padding-bottom: var(--wp--preset--spacing--40) !important;
	}

	.vs-cta {
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30) !important;
	}

	.vs-footer .wp-block-columns {
		gap: var(--wp--preset--spacing--40);
	}
}

/* ==========================================================================
   Brand colour system and typography test (0.1.8)
   Blue #4383BA dominant · Light Green #83CDC1 atmosphere · Gold #F1C631 detail
   Grey #4F5655 information · Off-white #F3F6F3 canvas.
   ========================================================================== */

/* ---------- Colour application ---------- */

/* H1 and H2 carry the Royal Blue (set in theme.json; echoes the logo wordmark).
   Blue on the off-white canvas is 3.7:1, which passes for large text only,
   so H3 and smaller stay Ink. */

/* Headings on the Light Green owner panel stay Ink (Blue on Green is too low contrast). */
.vs-cta--owner :where(h1, h2, h3) {
	color: var(--wp--preset--color--ink);
}

/* Body links: Ink text with a Royal Blue underline; Blue on hover. */
a:where(:not(.wp-element-button):not(.wp-block-navigation-item__content):not(.vs-card__view):not(.vs-card__enquire)) {
	color: var(--wp--preset--color--ink);
	text-decoration-color: var(--wp--preset--color--accent);
}

a:where(:not(.wp-element-button):not(.wp-block-navigation-item__content):not(.vs-card__view):not(.vs-card__enquire)):hover {
	color: var(--wp--preset--color--accent);
}

/* Card titles are Ink at every heading level (19px is below the large-text size Blue needs); Blue on hover. */
.vs-card__title {
	color: var(--wp--preset--color--ink);
}

/* Card title links keep no underline; Blue on hover. */
.vs-card__title a:hover,
.vs-card__title a:focus-visible {
	color: var(--wp--preset--color--accent);
}

/* Navigation: Ink items; active and hover state marked in Royal Blue. */
.vs-header .wp-block-navigation-item__content:hover,
.vs-header .wp-block-navigation-item__content:focus-visible,
.vs-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.vs-header .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.45em;
}

/* Outline buttons: Blue border, Ink label (Blue label text would be under 4.5:1). */
.wp-block-button.is-style-outline > .wp-block-button__link:not(:hover),
.vs-card__actions .vs-card__view:not(:hover) {
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--accent);
}

.vs-card__actions .vs-card__view:hover {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

/* Two adjacent CTA panels: keep a gap (a host plugin's utility CSS zeroes it). */
.wp-block-post-content > .vs-cta.wp-block-group.has-background + .vs-cta.wp-block-group.has-background,
.wp-block-post-content > .vs-cta.wp-block-group + .vs-cta.wp-block-group {
	margin-top: var(--wp--preset--spacing--40) !important;
}

/* Ink-filled buttons (owner CTA) take an Ink border instead of the default Blue one. */
.wp-block-button__link.has-ink-background-color {
	border-color: var(--wp--preset--color--ink);
}

/* Small H2s in the stay description ("Details", "Photos") are set at H4 size, so they stay Ink. */
.vs-stay__content > h2 {
	color: var(--wp--preset--color--ink);
}

/* Gold: restrained detail only. A short rule above CTA headings. */
.vs-cta > .wp-block-heading:first-child::before {
	content: "";
	display: block;
	width: 2.5rem;
	height: 3px;
	margin-bottom: var(--wp--preset--spacing--20);
	border-radius: 2px;
	background: var(--vs-gold);
}

::selection {
	background: rgba(241, 198, 49, 0.35); /* Gold #F1C631 at 35% */
	color: var(--wp--preset--color--ink);
}

/* ==========================================================================
   Final typography and canvas (0.1.9, Zapfino shipped in 0.1.10)
   Display: Zapfino Forte LT Pro (assets/fonts/ZapfinoForteLTPro.woff2, loaded
   in functions.php; rules scoped to body.vs-has-display-font).
   Information: DM Sans 400/500/600.
   Canvas #FFFDF9 (theme.json "canvas"); cards stay #FFFFFF.
   ========================================================================== */

/* ---------- Information layer: DM Sans ---------- */

/* Navigation, metadata and facts: 500. */
.wp-block-navigation-item__content,
.vs-card__meta,
.vs-facts dd,
.vs-facts--summary > dd,
.vs-context {
	font-weight: 500;
}

/* Buttons: 600, DM Sans (also covers card buttons). */
.wp-element-button,
.wp-block-button__link,
.vs-card__actions a {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
}

/* Small headings, details, labels and footer information: DM Sans 600. */
:where(h3, h4, h5, h6),
.vs-stay__content > h2,
.vs-stay__enquire .wp-block-heading,
.vs-footer .vs-footer__heading,
.vs-facts dt,
main :where(label, legend) {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	letter-spacing: 0;
}

/* Forms use the information font. */
:where(input, select, textarea, button) {
	font-family: var(--wp--preset--font-family--body);
}

/* Mobile menu overlay on the canvas colour (core otherwise paints it white). */
.vs-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--canvas);
}

/* ---------- Display layer: Zapfino Forte LT Pro ----------
   Active only with body.vs-has-display-font (added when the font file exists).
   Default glyphs only: no swash, stylistic-set or alternate features enabled.
   Sizes equalise the hero width tested in review (~400 px desktop, ~280 px at 375 px). */

.vs-has-display-font :is(
	main h1,
	main h2.wp-block-heading:not(.vs-cta *):not(.vs-stay__content > *):not(.vs-stay__enquire *),
	.vs-cards__heading,
	.vs-card__title
) {
	font-family: var(--wp--preset--font-family--brand);
	font-weight: 400;
	font-style: normal;
	font-synthesis: none;
	letter-spacing: 0;
	line-height: 1.3;
	text-wrap: balance;
}

/* Hero H1 and page titles (incl. property and group page titles). */
.vs-has-display-font main h1 {
	font-size: clamp(3rem, 2.25rem + 3.2vw, 4.3rem);
	margin-block: 0.15em 0.1em;
}

/* Major section headings. */
.vs-has-display-font :is(main h2.wp-block-heading:not(.vs-cta *):not(.vs-stay__content > *):not(.vs-stay__enquire *), .vs-cards__heading) {
	font-size: clamp(2.15rem, 1.7rem + 1.8vw, 2.84rem);
}

/* Property names on cards. */
.vs-has-display-font .vs-card__title {
	font-size: clamp(1.75rem, 1.6rem + 0.4vw, 1.9rem);
	line-height: 1.35;
}

/* CTA headings use the information font while the display font is active. */
.vs-has-display-font .vs-cta .wp-block-heading {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* ==========================================================================
   Surfaces (0.1.11): Light Green is a supporting accent only, never a large fill.
   Canvas #FFFDF9 is the primary background; panels are white with a restrained
   Light Green hairline. Gold top rule and Royal Blue buttons are unchanged.
   Stored blocks keep their "soft" / "sage" background slugs; these rules
   override the fill so no content has to change.
   ========================================================================== */

/* Footer: sits on the canvas; the Light Green divider above it stays. */
.vs-footer.has-background {
	background-color: var(--wp--preset--color--canvas) !important;
}

/* CTA panels (enquire and owner): white surface with a restrained border. */
.vs-cta.has-background {
	background-color: var(--wp--preset--color--base) !important;
	border: 1px solid var(--vs-line);
}

/* Stay page enquiry box ("Ready to plan your stay?"): same white surface;
   its border and Gold top edge are unchanged. */
.vs-stay__enquire.has-background {
	background-color: var(--wp--preset--color--base) !important;
}

/* ==========================================================================
   Colour hierarchy (0.1.12)
   Royal Blue #4383BA  = headlines, page titles, property names
   Light Green #83CDC1 = actions (buttons, Enquire, Submit); never a large fill
   Gold #F1C631        = lines and dividers only
   Dark Grey #4F5655   = information (body, descriptions, meta, footer, forms)
   Cream #FFFDF9       = canvas; White = cards and panels
   Button labels on Light Green are Ink #14261C (8.7:1); white on Light Green
   is 1.8:1 and fails. Blue headlines are 4.0:1 on cream, so Blue is kept to
   headline sizes (large text); small labels stay Dark Grey.
   Focus rings stay Royal Blue: Light Green and Gold are under 3:1 on cream.
   theme.json carries the base roles (text, headings, links, buttons).
   ========================================================================== */

/* ---------- Blue: headlines and property names ---------- */

.vs-card__title,
.vs-card__title a,
.vs-stay__content > h2,
.vs-stay__enquire .wp-block-heading,
.vs-cta--owner :where(h1, h2, h3),
main :where(h1, h2, h3, h4) {
	color: var(--wp--preset--color--accent);
}

.vs-card__title a:hover,
.vs-card__title a:focus-visible {
	color: var(--wp--preset--color--ink);
}

/* ---------- Dark Grey: information ---------- */

.vs-cta.has-ink-color,
.vs-cta.has-ink-color p,
.vs-facts dt,
.vs-footer.has-ink-color,
.vs-footer p,
.vs-footer .wp-block-navigation-item__content,
.vs-header .wp-block-navigation-item__content,
main .vs-prf__label {
	color: var(--wp--preset--color--muted) !important;
}

/* Body links: Dark Grey text, Light Green underline (action); Ink on hover. */
a:where(:not(.wp-element-button):not(.wp-block-navigation-item__content):not(.vs-card__view):not(.vs-card__enquire)) {
	color: var(--wp--preset--color--muted);
	text-decoration-color: var(--wp--preset--color--sage);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

a:where(:not(.wp-element-button):not(.wp-block-navigation-item__content):not(.vs-card__view):not(.vs-card__enquire)):hover,
.vs-context a:hover {
	color: var(--wp--preset--color--ink);
	text-decoration-color: var(--wp--preset--color--ink);
}

/* Navigation: Dark Grey items; hover and current page get Ink text and a Gold rule. */
.vs-header .wp-block-navigation-item__content:hover,
.vs-header .wp-block-navigation-item__content:focus-visible,
.vs-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.vs-header .wp-block-navigation-item__content[aria-current="page"],
.vs-footer .wp-block-navigation-item__content:hover,
.vs-footer .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--ink) !important;
	text-decoration: underline;
	text-decoration-color: var(--vs-gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.45em;
}

/* ---------- Light Green: actions ---------- */

/* Primary buttons (header Enquire, CTA Enquire, form Submit, owner CTA). */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link,
.wp-block-button__link.has-ink-background-color,
.vs-card__actions .vs-card__enquire,
main button[type="submit"] {
	background-color: var(--wp--preset--color--sage) !important;
	border: 1px solid var(--wp--preset--color--sage) !important;
	color: var(--wp--preset--color--ink) !important;
}

.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover,
.wp-block-button__link.has-ink-background-color:hover,
.vs-card__actions .vs-card__enquire:hover,
main button[type="submit"]:hover {
	background-color: var(--wp--preset--color--ink) !important;
	border-color: var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--base) !important;
}

/* Secondary buttons (View, View stays, WhatsApp): Light Green outline, Ink label,
   Light Green fill on hover. */
.wp-block-button.is-style-outline > .wp-block-button__link,
.vs-card__actions .vs-card__view {
	background-color: transparent !important;
	border: 1px solid var(--wp--preset--color--sage) !important;
	color: var(--wp--preset--color--ink) !important;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.vs-card__actions .vs-card__view:hover {
	background-color: var(--wp--preset--color--sage) !important;
	border-color: var(--wp--preset--color--sage) !important;
	color: var(--wp--preset--color--ink) !important;
}

/* ---------- Gold: lines and dividers ---------- */

.vs-header {
	border-bottom-color: var(--vs-gold) !important;
}

.vs-footer,
.vs-footer .vs-footer__legal {
	border-top-color: var(--vs-gold);
}

/* Panel and card outlines are neutral; Light Green is not used for lines. */
.vs-stay__enquire {
	border-color: var(--vs-line);
}

.vs-card:hover,
.vs-card:focus-within {
	border-color: var(--vs-line-strong);
}

/* ---------- Canvas: no Light Green fills ---------- */

.vs-card__media,
.vs-card--enquiry-only .vs-card__media--empty {
	background: var(--wp--preset--color--canvas);
}

/* ==========================================================================
   Premium design pass (0.1.13)
   Scope: header logo size, card grid spacing, cards, buttons, enquiry/CTA
   panels and photo corners. CSS only. The display layer is unchanged:
   Zapfino Forte LT Pro stays on H1, page titles, major H2s, card-block
   headings and property names (0.1.9/0.1.10 rules above); DM Sans stays on
   body, navigation, metadata, facts, buttons, forms and supporting UI.
   Colour roles from 0.1.12 are unchanged.
   ========================================================================== */

:root {
	--vs-radius-sm: 8px;   /* buttons (was 6px) */
	--vs-radius-lg: 14px;  /* cards, panels, photos (was 12px) */
	--vs-logo-w: 168px;    /* header logo width; set per breakpoint below */
}

/* ---------- Header logo: larger, balanced ----------
   assets/images/valhalla-stays-logo.png is 1200x628 with transparent padding
   (visible mark 1138x527 at x31-1168, y45-571: 45px empty above, 56px below).
   Negative block margins trim that padding (45/1200 and 56/1200 of the
   width), so the header grows by the visible mark, not by empty space.
   Widths: 168 mobile · 216 at 600-899 (menu collapsed) · 208 at 900-1023
   (full menu and Enquire must fit one row) · 264 at 1024+.
   Was 136 / 160 / 176 / 200. */

.vs-header .vs-logo img {
	width: var(--vs-logo-w);
	margin-block: calc(var(--vs-logo-w) * -0.0375) calc(var(--vs-logo-w) * -0.0467);
}

@media (min-width: 600px) {
	:root {
		--vs-logo-w: 216px;
	}
}

@media (min-width: 900px) {
	:root {
		--vs-logo-w: 208px;
	}
}

@media (min-width: 1024px) {
	:root {
		--vs-logo-w: 264px;
	}
}

/* Logo, menu and Enquire share one vertical centre line. */
.vs-header > .alignwide {
	align-items: center;
}

/* ---------- Card grid: 1 / 2 / 3 columns (0.1.8) with refined gaps ---------- */

.vs-cards__grid {
	gap: var(--wp--preset--spacing--40);
}

@media (min-width: 1024px) {
	.vs-cards__grid {
		gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	}
}

/* ---------- Cards ---------- */

.vs-card {
	border-radius: var(--vs-radius-lg);
}

.vs-card__body {
	gap: 0.75rem;
	padding: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
}

.vs-card__actions {
	gap: 0.625rem;
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--vs-line);
}

.vs-card__actions a {
	flex: 1 1 auto;
}

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

.wp-element-button,
.wp-block-button__link,
.vs-card__actions a,
main button[type="submit"] {
	border-radius: var(--vs-radius-sm) !important;
	letter-spacing: 0.02em;
}

.wp-block-button__link {
	padding: 0.8125rem 1.625rem;
}

@media (min-width: 600px) {
	.vs-header-cta .wp-block-button__link {
		padding: 0.625rem 1.375rem;
	}
}

@media (max-width: 599px) {
	.vs-header-cta .wp-block-button__link {
		padding: 0.5rem 1rem;
	}
}

/* ---------- Enquiry and CTA panels ---------- */

.vs-cta {
	border-radius: var(--vs-radius-lg) !important;
	box-shadow: var(--wp--preset--shadow--card);
}

@media (min-width: 782px) {
	.vs-cta {
		padding: var(--wp--preset--spacing--60) clamp(2rem, 5vw, 4rem) !important;
	}
}

.vs-cta .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* Stay page enquiry box: same panel language; Gold top edge kept. */
.vs-stay__enquire {
	border-radius: var(--vs-radius-lg) !important;
	box-shadow: inset 0 3px 0 var(--vs-gold), var(--wp--preset--shadow--card);
}

/* ---------- Photo corners ---------- */

.vs-stay .wp-block-post-featured-image img,
.vs-group .wp-block-post-featured-image img {
	border-radius: var(--vs-radius-lg);
}

.vs-stay__gallery.wp-block-gallery.has-nested-images figure.wp-block-image img {
	border-radius: var(--vs-radius-md);
}