/*
Theme Name: Country Houses Italy
Theme URI:
Author: Koen Wensing
Description: Block theme for Country Houses Italy (Villa Gabellotti, Puglia and Villa Grimiti, Calabria). Built on the internal starter theme (commit 7cd42af, 16 Sep 2026, plus its working-tree changes of 17 Sep 2026: v1.1.1); booking kit from starter 1.3.0-linux.1 in revision 2; one booking section per villa page in revision 3; the request form fixed to its villa and the reveal animations in revision 3.1; the owners' logo and portraits in revision 3.2; their wide logo in revision 4; English and German (the starter 1.2.0 translation kit) and the go-live fixes in revision 5.
Version: 1.4.0
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 8.0
License: Private
Text Domain: countryhouses-italy
*/

/* ============================================
   DESIGN TOKENS
   Semantic CSS variables map onto the theme.json palette.
   Swap the hex placeholders (or the theme.json palette) per client.
   ============================================ */

:root {
	--color-primary:      var(--wp--preset--color--primary, #2c5f8a);
	--color-primary-dark: var(--wp--preset--color--primary-dark, #1f4763);
	--color-accent:       var(--wp--preset--color--accent, #d98e2b);
	--color-accent-dark:  var(--wp--preset--color--accent-dark, #b87421);
	--color-dark:         var(--wp--preset--color--dark, #1a1d1f);
	--color-grey-900:     var(--wp--preset--color--grey-900, #1c1c1c);
	--color-grey-700:     var(--wp--preset--color--grey-700, #44474a);
	--color-grey-600:     var(--wp--preset--color--grey-600, #6b6e72);
	--color-grey-400:     var(--wp--preset--color--grey-400, #a3a6aa);
	--color-grey-200:     var(--wp--preset--color--grey-200, #dcdee0);
	--color-grey-100:     var(--wp--preset--color--grey-100, #eef0f1);
	--color-light:        var(--wp--preset--color--light, #f4f5f6);
	--color-white:        #ffffff;

	/* Height of the fixed header. SINGLE SOURCE OF TRUTH — .site-header-inner
	   reads it, every full-bleed hero reserves at least this much padding-top,
	   and inner pages offset by it. Change it here only.
	   Asserted by SOPs/tools/header-overlap-audit.cjs. */
	--header-h: 5rem;
}

/* ============================================
   GLOBAL RESETS & FIXES
   ============================================ */

/* ⛔ blockGap — read this before changing theme.json's styles.spacing.blockGap.

   Core emits `:root :where(.is-layout-flow) > * { margin-block-start: <blockGap> }`. That is
   EVERY child of EVERY flow-layout wp:group, not just the gap between template parts. It has now
   caused the same class of bug on two builds:

     1. a visible strip above a fixed-header hero (the original reason this fix existed), and
     2. absolutely-positioned children — scrims, overlays, badges — pushed off their `inset`
        anchor, so a full-bleed hero gradient starts 1.5rem below the top of its own section and
        leaves an unscrimmed band under the header. It looks like a broken gradient, not a margin.
     3. items 2..n of any group you turn into a grid sit lower than item 1, because the injected
        margin lands on every child except the first.

   The authoritative fix is `"blockGap": "0"` in theme.json → styles.spacing (already set).
   These themes set every gap explicitly per component, so an injected global default is only
   ever a bug here. KEEP IT AT 0. The rules below are belt-and-braces for the case where a future
   theme.json reintroduces a non-zero value. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Positioned overlays are not flowed content — they must never carry an injected gap. */
.hero-overlay,
.cta-bg,
.property-hero-overlay,
.lightbox-overlay {
	margin-block-start: 0;
}

/* Border-box everywhere (15 Sep 2026). The demos are Tailwind, whose preflight sets exactly this, so
   it matches the approved design. It also removes two traps: core already puts border-box on
   .wp-block-group and block images (SOP 05 §5m #1, #6), so a content-box theme changed size the moment
   a section became a block; and `width:100%` + padding ran past its container — the Kortmann sticky
   button sat 16px off the right edge on every page. NEW BUILDS ONLY: never retrofit this into a client
   theme that was built and measured on content-box. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Smooth scrolling for anchor links. */
html {
	scroll-behavior: smooth;
}

/* overflow-x: clip on BODY ONLY — never on html.
   - hidden/clip on html breaks position:fixed and hides the scrollbar sitewide.
   - clip on body contains horizontal overflow with neither side effect.
   NOTE: clip only HIDES an overflow — the cut-off text is still lost. SOPs/tools/qa-mobile-layout.cjs
   measures with it switched off.

   overflow-wrap is inherited by all text (15 Sep 2026). It breaks a word only when the word cannot fit
   on a line at all, so nothing that already fits changes; an unbreakable compound ("Vakantiewoningen",
   an e-mail address) can no longer widen the page at 320px or with enlarged system text. The
   .wp-block-html guard further down predates core-block sections and does not reach them. */
body {
	overflow-x: clip;
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Header gotcha #1: the default 4rem padding on post-content pushes the hero
   under the fixed header. Remove it; spacing is handled per-template/per-hero. */
.wp-block-post-content {
	padding-top: 0 !important;
}

/* WordPress injects default margins between wp:html blocks.
   On full-bleed pages this creates visible body-color gaps between sections. */
.wp-block-html {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* wp:group sections (a booking/CTA band, etc.) sit between full-bleed wp:html heroes on
   inner pages (contact/property). The rule above only covers wp:html, so a wp:group section
   keeps a body-colour gap after an image hero. Zero ALL post-content child margins so every
   section butts directly against the next — each section owns its own vertical padding. */
.wp-block-post-content > * {
	margin-top: 0;
	margin-bottom: 0;
}

/* Defensive horizontal-overflow guard for the custom (wp:html) sections.
   Flex/grid items default to min-width:auto and grid `1fr` tracks size to their
   content's min-content, so a long unbreakable word (URL, email, placeholder
   token) can push a track past the viewport on narrow phones (~360px).
   `min-width:0` frees flex/grid items to shrink; `overflow-wrap:anywhere`
   (not `break-word`) reduces the min-content used for track sizing so the long
   word can break instead of forcing horizontal scroll. */
.wp-block-html * {
	min-width: 0;
}

.wp-block-html h1,
.wp-block-html h2,
.wp-block-html h3,
.wp-block-html h4,
.wp-block-html p,
.wp-block-html li,
.wp-block-html a,
.wp-block-html span,
.wp-block-html strong {
	overflow-wrap: anywhere;
}

/* WordPress admin bar offset — push the fixed header below the admin bar. */
.admin-bar .site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

/* Global selection colour. */
::selection {
	background-color: var(--color-accent);
	color: #fff;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

body {
	font-family: var(--wp--preset--font-family--sans, Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
	color: var(--color-grey-700);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--wp--preset--font-family--serif, Lora, Georgia, Cambria, 'Times New Roman', Times, serif);
	color: var(--color-dark);
}

/* A heading wraps between words, not inside them. `hyphens: auto` on phones split words that would have
   fitted on the next line ("verwelko-men", "To-scane"; revision 0, 25 Sep 2026). A word too long for a
   phone line carries a soft hyphen in the content (`bezienswaardig&shy;heden` on Puglia), used on phones
   only, so wider screens keep the demo's line breaks; a word without one still breaks rather than run
   off the screen. */
h1, h2, h3, h4, h5, h6 { hyphens: none; }

@media (max-width: 480px) {
	h1, h2, h3, h4, h5, h6 {
		hyphens: manual;
		overflow-wrap: break-word;
	}
}

/* ============================================
   HEADER

   Mode B (ACTIVE): transparent header that becomes solid on scroll.
   JS toggles `.scrolled` on .site-header past 20px of scroll.
   backdrop-filter lives on a ::before pseudo-element so it never creates a
   containing block that traps the position:fixed mobile nav overlay.
   ============================================ */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	transition: box-shadow 0.3s ease;
}

.site-header::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: transparent;
	border-bottom: 1px solid transparent;
	transition: background-color 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease;
	z-index: -1;
	pointer-events: none;
}

.site-header.scrolled::before {
	background-color: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--color-grey-200);
}

.site-header.scrolled {
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
}

/* ----- Mode A (solid light header) — INACTIVE.
   To use Mode A instead of Mode B: remove the transparent defaults above and
   uncomment this block (give .site-header::before a permanent solid background).
.site-header::before {
	background-color: rgba(244, 245, 246, 0.95);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid transparent;
}
.site-logo-text { color: var(--color-dark); }
.nav-link { color: var(--color-grey-700); }
.nav-mobile-toggle { color: var(--color-grey-700); }
----- end Mode A ----- */

.site-header-inner {
	max-width: 80rem; /* 1280px */
	margin: 0 auto;
	padding: 0 1rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: var(--header-h);
}

.site-logo {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
}

/* Logo = single horizontal line. Explicit colour token, NEVER inherit
   (global link styles override inherit). Light on the transparent header,
   dark once the header is solid. */
.site-logo-text {
	font-family: var(--wp--preset--font-family--serif, Lora, Georgia, Cambria, 'Times New Roman', Times, serif);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1;
	white-space: nowrap;
	color: var(--color-white);
}

.site-header.scrolled .site-logo-text {
	color: var(--color-dark);
}

/* Desktop nav.
   Breakpoint 1024px (Tailwind `lg:`), set by four rules that move together: the two in the media
   block below (show .nav-desktop, hide the toggle), the .header-cta hide rule (max-width: 1023px)
   and the .nav-mobile-panel hide rule. Take the width from the demo; a site that changes it
   changes all four.
   Was 768px until 17 Sep 2026: on an iPad (768px) a logo, three labels and a CTA did not fit, the
   labels wrapped onto three lines across the logo (Stal Vosseveld revision 0.1). Labels never wrap.
   Gate: SOPs/tools/header-overlap-audit.cjs → HEADER_ROW. */
.nav-desktop {
	display: none;
	align-items: center;
	gap: 2rem;
}

.nav-desktop .nav-link {
	white-space: nowrap;
}

@media (min-width: 1024px) {
	.nav-desktop {
		display: flex;
	}
	.site-header .nav-mobile-toggle {
		display: none !important;
	}
}

.nav-link {
	color: var(--color-white);
	font-weight: 600;
	text-decoration: none;
	transition: color 0.2s ease;
}

.nav-link:hover {
	color: var(--color-accent);
}

.site-header.scrolled .nav-link {
	color: var(--color-grey-700);
}

.site-header.scrolled .nav-link:hover {
	color: var(--color-primary);
}

/* Header CTA — never let it break character-by-character; hidden below the desktop nav breakpoint
   (the mobile overlay carries its own CTA instead). Its `display` lives in these two rules only: a
   later unscoped `display` on .header-cta beats the media query at every width. */
.header-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background-color: var(--color-accent);
	color: #fff;
	padding: 0.625rem 1.5rem;
	border-radius: 9999px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: all 0.2s ease;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.header-cta:hover {
	background-color: var(--color-accent-dark);
	color: #fff;
	transform: scale(1.05);
}

@media (max-width: 1023px) {
	.header-cta {
		display: none;
	}
}

/* Mobile menu toggle */
.nav-mobile-toggle {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--color-white);
	font-size: 1.875rem;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	/* Fixed 44px tap target — also keeps the button hittable if the icon font
	   fails to load (it would otherwise collapse to near-zero width). */
	width: 2.75rem;
	height: 2.75rem;
}

/* Render the hamburger as a reliable unicode glyph (☰) in a system font, so the menu
   button works even if the icon font fails to load. Header markup uses <span class="menu-glyph">. */
.nav-mobile-toggle .menu-glyph::before {
	content: '\2630';
	font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.site-header.scrolled .nav-mobile-toggle {
	color: var(--color-grey-700);
}

/* Mobile menu panel */
.nav-mobile-panel {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background-color: #fff;
	border-bottom: 1px solid var(--color-grey-200);
	box-shadow: 0 12px 24px -4px rgba(0, 0, 0, 0.12);
	padding: 1rem 1.25rem 1.25rem;
}

.nav-mobile-panel.open {
	display: block;
}

.nav-mobile-panel nav {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	border-bottom: 1px solid var(--color-grey-100);
	padding-bottom: 0.75rem;
	margin-bottom: 0.75rem;
}

.nav-mobile-panel a {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.65rem 0.875rem;
	color: var(--color-grey-700);
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	border-radius: 0.5rem;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-mobile-panel a:hover {
	background-color: var(--color-grey-100);
	color: var(--color-dark);
}

.nav-mobile-panel a.nav-cta-mobile {
	background-color: var(--color-accent);
	color: #fff;
	justify-content: center;
	border-radius: 0.625rem;
	padding: 0.75rem 1rem;
	font-weight: 700;
}

.nav-mobile-panel a.nav-cta-mobile:hover {
	background-color: var(--color-accent-dark);
	color: #fff;
}

@media (min-width: 1024px) {
	.nav-mobile-panel {
		display: none !important;
	}
}

/* Inner pages (everything except the homepage template) have no full-bleed hero
   behind the header, so force the header into its solid state for readability and
   push the page content down to clear the fixed header. */
body:not(.page-template-page-homepage) {
	padding-top: var(--header-h);
}

body:not(.page-template-page-homepage) .site-header::before {
	background-color: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--color-grey-200);
}

body:not(.page-template-page-homepage) .site-logo-text {
	color: var(--color-dark);
}

body:not(.page-template-page-homepage) .nav-link {
	color: var(--color-grey-700);
}

body:not(.page-template-page-homepage) .nav-link:hover {
	color: var(--color-primary);
}

body:not(.page-template-page-homepage) .nav-mobile-toggle {
	color: var(--color-grey-700);
}

/* ============================================
   FOOTER
   ============================================ */

.site-footer {
	background-color: var(--color-grey-900);
	color: var(--color-grey-400);
	padding: 4rem 0;
	border-top: 8px solid var(--color-accent);
}

.site-footer h3,
.site-footer h4 {
	color: #fff;
}

.site-footer a {
	color: var(--color-grey-400);
	text-decoration: none;
	transition: color 0.2s ease;
}

.site-footer a:hover {
	color: #fff;
}

.footer-inner {
	max-width: 80rem;
	margin: 0 auto;
	padding: 0 1rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
}

@media (min-width: 768px) {
	.footer-inner {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
	}
}

.footer-brand-name {
	font-family: var(--wp--preset--font-family--serif, Lora, Georgia, Cambria, 'Times New Roman', Times, serif);
	font-weight: 700;
	font-size: 1.5rem;
	margin-bottom: 1rem;
}

.footer-section-title {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.875rem;
	margin-bottom: 1.5rem;
}

.footer-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 9999px;
	background-color: var(--color-grey-700);
	color: #fff;
	transition: background-color 0.2s ease;
}

.footer-social-link:hover {
	color: #fff;
	background-color: var(--color-accent);
}

.footer-contact-item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.footer-contact-icon {
	color: var(--color-accent);
	font-size: 1.25rem;
	margin-top: 0.125rem;
	flex-shrink: 0;
}

.footer-links-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-links-list li {
	margin-bottom: 0.5rem;
}

.footer-bottom {
	max-width: 80rem;
	margin: 3rem auto 0;
	padding: 2rem 1rem 0;
	border-top: 1px solid var(--color-grey-700);
	font-size: 0.875rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.5rem;
}

@media (min-width: 768px) {
	.footer-bottom {
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
	}
}

/* ============================================
   HERO / COVER SECTIONS
   ============================================ */

.hero-section {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: var(--header-h); /* clear fixed header */
	background-size: cover;
	background-position: center;
}

.hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(26, 29, 31, 0.45), rgba(26, 29, 31, 0.7));
	z-index: 1;
}

.hero-content {
	position: relative;
	z-index: 2;
	text-align: center;
	padding: 0 1rem;
	max-width: 56rem;
	width: 100%;
	min-width: 0; /* allow the flex item to shrink below its content's intrinsic width */
	margin: 0 auto;
}

/* Never let a long word push past the viewport (placeholder tokens, URLs, etc.) */
.hero-heading,
.hero-subtitle,
.hero-eyebrow {
	overflow-wrap: anywhere;
}

.hero-eyebrow {
	color: var(--color-accent);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: 0.875rem;
	margin-bottom: 1rem;
}

.hero-heading {
	font-family: var(--wp--preset--font-family--serif, Lora, Georgia, Cambria, 'Times New Roman', Times, serif);
	font-weight: 700;
	color: #fff;
	font-size: 3rem;
	line-height: 1.1;
	margin-bottom: 1.5rem;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

@media (min-width: 768px) {
	.hero-heading {
		font-size: 4.5rem;
	}
}

.hero-heading em {
	color: var(--color-grey-200);
	font-style: italic;
}

.hero-subtitle {
	color: var(--color-light);
	font-size: 1.25rem;
	font-weight: 300;
	margin-bottom: 2.5rem;
	max-width: 42rem;
	margin-left: auto;
	margin-right: auto;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

@media (min-width: 768px) {
	.hero-subtitle {
		font-size: 1.5rem;
	}
}

.hero-actions {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	justify-content: center;
	align-items: center;
}

@media (min-width: 640px) {
	.hero-actions {
		flex-direction: row;
	}
}

.btn-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border: 2px solid #fff;
	color: #fff;
	padding: 0.75rem 2rem;
	border-radius: 9999px;
	font-weight: 700;
	font-size: 1.125rem;
	text-decoration: none;
	transition: all 0.2s ease;
}

.btn-ghost:hover {
	background-color: #fff;
	color: var(--color-dark);
}

.btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	background-color: var(--color-accent);
	color: #fff;
	padding: 0.75rem 2rem;
	border-radius: 9999px;
	font-weight: 700;
	font-size: 1.125rem;
	text-decoration: none;
	transition: all 0.2s ease;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

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

/* ============================================
   SECTION PATTERNS
   ============================================ */

.section {
	padding: 5rem 0;
}

@media (min-width: 768px) {
	.section {
		padding: 8rem 0;
	}
}

.section-inner {
	max-width: 80rem;
	margin: 0 auto;
	padding: 0 1rem;
}

.section-eyebrow {
	color: var(--color-accent);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.875rem;
	margin-bottom: 0.5rem;
}

.section-heading {
	font-family: var(--wp--preset--font-family--serif, Lora, Georgia, Cambria, 'Times New Roman', Times, serif);
	font-weight: 700;
	color: var(--color-dark);
	font-size: 2.25rem;
	margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
	.section-heading {
		font-size: 3rem;
	}
}

/* Background variants */
.section-white { background-color: #fff; }
.section-light { background-color: var(--color-light); }
.section-grey  { background-color: var(--color-grey-100); }
.section-dark  { background-color: var(--color-dark); color: var(--color-light); }
.section-dark .section-heading { color: #fff; }

/* Two-column helper (stacks on mobile, splits on ≥1024px) */
.two-col {
	display: grid;
	grid-template-columns: 1fr;
	gap: 4rem;
	align-items: center;
}

@media (min-width: 1024px) {
	.two-col {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

/* ============================================
   UNIT CARD (generic product / room / property card)
   ============================================ */

.unit-card {
	background-color: #fff;
	border-radius: 1.5rem;
	overflow: hidden;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
	border: 1px solid var(--color-grey-200);
	display: flex;
	flex-direction: column;
	margin-bottom: 4rem;
}

@media (min-width: 1024px) {
	.unit-card {
		flex-direction: row;
	}
	.unit-card.reversed {
		flex-direction: row-reverse;
	}
}

.unit-card-image {
	position: relative;
	height: 24rem;
	overflow: hidden;
	background-color: var(--color-grey-100);
}

@media (min-width: 1024px) {
	.unit-card-image {
		width: 50%;
		height: auto;
	}
}

.unit-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s ease;
}

.unit-card:hover .unit-card-image img {
	transform: scale(1.05);
}

.unit-card-badge {
	position: absolute;
	bottom: 1.5rem;
	left: 1.5rem;
	background-color: var(--color-accent);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	padding: 0.25rem 0.75rem;
	border-radius: 9999px;
}

.unit-card.reversed .unit-card-badge {
	left: auto;
	right: 1.5rem;
}

.unit-card-content {
	padding: 2rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

@media (min-width: 1024px) {
	.unit-card-content {
		width: 50%;
		padding: 3rem;
	}
}

.unit-card-title {
	font-family: var(--wp--preset--font-family--serif, Lora, Georgia, Cambria, 'Times New Roman', Times, serif);
	font-weight: 700;
	font-size: 1.875rem;
	color: var(--color-dark);
	margin-bottom: 1rem;
}

.unit-features {
	list-style: none;
	padding: 0;
	margin: 0 0 2rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
}

@media (min-width: 640px) {
	.unit-features {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.unit-features li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--color-grey-700);
}

.unit-features .check-icon {
	color: var(--color-accent);
	font-size: 1.25rem;
	flex-shrink: 0;
}

.unit-card-footer {
	margin-top: auto;
	padding-top: 1.5rem;
	border-top: 1px solid var(--color-grey-200);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem 1rem;
}

/* A TEXT left-hand item (a price line) shares the row with the link like before: both start from a small
   basis, grow into the free space and wrap their own text; the automatic min-width stops either one
   shrinking below its longest word. */
.unit-card-footer > :not(.unit-link) {
	flex: 1 1 6rem;
}

/* A left-hand item WITH IMAGES (a row of thumbnails) never shrinks or grows: a shrunken thumbnail box
   lets its photos overflow and the link is painted over them (Kortmann card footer, 14-09-2026;
   SOP 05 §5m #7). */
.unit-card-footer > :not(.unit-link):has(img),
.unit-card-footer > img {
	flex: 0 0 auto;
	max-width: 100%;
}

/* flex-wrap breaks lines on an item's BASIS. With `auto` (its one-line width) the link drops to a new
   row whenever its text does not fit on one line; 6rem keeps it beside the left item, wrapping its own
   text, and it drops below — still right-aligned — only when even its longest word cannot fit. */
.unit-link {
	color: var(--color-primary);
	font-weight: 700;
	text-decoration: none;
	display: inline-flex;
	flex: 1 1 6rem;
	align-items: center;
	justify-content: flex-end;
	text-align: right;
	gap: 0.25rem;
	transition: color 0.2s ease;
}

.unit-link:hover {
	color: var(--color-accent);
}

/* ============================================
   GALLERY GRID
   ============================================ */

.gallery-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

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

.gallery-grid img,
.gallery-grid .gallery-tile {
	width: 100%;
	height: 14rem;
	object-fit: cover;
	border-radius: 1rem;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Placeholder tile (no image yet) */
.gallery-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-grey-100);
	color: var(--color-grey-400);
	font-weight: 600;
}

/* ============================================
   CONTACT FORM 7 — BASE STYLING
   ============================================ */

.wpcf7 *,
.wpcf7 *::before,
.wpcf7 *::after {
	box-sizing: border-box;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="date"],
.wpcf7 input[type="number"],
.wpcf7 textarea,
.wpcf7 select {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 2px solid var(--color-grey-200);
	border-radius: 0.5rem;
	background-color: #fff;
	color: var(--color-grey-700);
	font-family: inherit;
	font-size: 1rem;
	transition: border-color 0.2s ease;
	outline: none;
}

.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
	border-color: var(--color-accent);
}

.wpcf7 textarea {
	min-height: 8rem;
	resize: vertical;
}

.wpcf7 input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	background-color: var(--color-accent); /* accent submit button */
	color: #fff;
	font-weight: 700;
	padding: 1rem 2.5rem;
	border: none;
	border-radius: 0.75rem;
	font-size: 1.125rem;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
	/* Form controls do not inherit the page font; without this the button renders in the system
	   sans, not the demo's. */
	font-family: inherit;
	/* On one line with 2.5rem side padding a Dutch label ("Aanvraag verzenden", ~328px) is wider than
	   a form card on a 320-360px phone and widened the whole page (Kortmann, 14-09-2026). Capped at its
	   container and allowed to wrap its label; wherever it already fits, nothing changes. */
	max-width: 100%;
	white-space: normal;
}

.wpcf7 input[type="submit"]:hover {
	background-color: var(--color-accent-dark);
	transform: translateY(-2px);
}

/* CF7's spinner (24px + 24px side margins, invisible until sending) sits inline after the button. On a
   phone it no longer fits beside a button capped at its container and wraps onto an empty ~33px line.
   Keep it out of the layout until a request is actually being sent, then show it centred below. */
@media (max-width: 480px) {
	.wpcf7 input[type="submit"] + .wpcf7-spinner {
		display: none;
	}

	.wpcf7 form.submitting input[type="submit"] + .wpcf7-spinner {
		display: block;
		margin: 0.5rem auto 0;
	}
}

.wpcf7 .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	cursor: pointer;
	font-size: 0.875rem;
	color: var(--color-grey-600);
}

.wpcf7 .wpcf7-acceptance input[type="checkbox"] {
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.125rem;
	flex-shrink: 0;
}

/* Form card wrapper */
.form-card {
	max-width: 48rem;
	margin: 0 auto;
	background-color: #fff;
	border-radius: 1.5rem;
	padding: 1.5rem 1.25rem;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
}

@media (min-width: 640px) {
	.form-card {
		padding: 2.5rem;
	}
}

/* Responsive form grid — single col on mobile, two cols on ≥640px */
.form-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 1.5rem;
}

@media (min-width: 640px) {
	.form-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

.wpcf7 {
	min-width: 0;
	width: 100%;
}

/* ============================================
   GLOBAL DESIGN CONSISTENCY
   Border-radius + box-shadow on images, buttons, cards — applied globally.
   ============================================ */

.wp-block-image img {
	border-radius: 1rem;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.wp-block-button__link {
	border-radius: 9999px;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--color-grey-100); }
::-webkit-scrollbar-thumb { background: var(--color-grey-400); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-grey-600); }

/* ============================================
   UTILITY CLASSES
   ============================================ */

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* ============================================================================
   COMMON SECTION COMPONENTS
   Demo-agnostic building blocks. The gemini.html and camping-boerlap templates
   (and most hospitality demos) reuse the same sections: hero, feature cards,
   vertical listing/price cards, a two-image "about" stack, a gallery mosaic, and
   a coloured booking/CTA section with a form card. Use these classes in
   page-content/*.html; recolour only via the --color-* tokens / theme.json.
   ============================================================================ */

/* ----- Section heading accent bar (thin underline under a centred heading) ----- */
.heading-bar {
	width: 6rem;
	height: 3px;
	background-color: var(--color-accent);
	margin: 0 auto 1.5rem;
	border-radius: 2px;
}

/* ----- Hero scroll-down indicator (optional; sits at the bottom of a full hero) ----- */
.hero-scroll {
	position: absolute;
	bottom: 2.5rem;
	left: 50%;
	transform: translateX(-50%);
	color: var(--color-light);
	font-size: 1.875rem;
	opacity: 0.85;
	text-decoration: none;
	z-index: 2;
	animation: starter-bounce 1.6s infinite;
}
.hero-scroll:hover { opacity: 1; color: var(--color-light); }
@keyframes starter-bounce {
	0%, 100% { transform: translate(-50%, 0); }
	50%      { transform: translate(-50%, -10px); }
}

/* ----- Feature / USP cards (icon circle + title + blurb) ----- */
.feature-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}
@media (min-width: 640px)  { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .feature-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.feature-card {
	background-color: var(--color-light);
	border: 1px solid var(--color-grey-200);
	border-radius: 1.5rem;
	padding: 2rem;
	text-align: center;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-card:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); }
.feature-icon {
	width: 4rem; height: 4rem; margin: 0 auto 1.25rem;
	background-color: #fff;
	border-radius: 9999px;
	display: flex; align-items: center; justify-content: center;
	color: var(--color-accent); font-size: 1.5rem;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.06);
}
.feature-card h3 {
	font-weight: 700; font-size: 1.25rem;
	color: var(--color-primary); margin: 0 0 0.5rem;
}
.feature-card p { font-size: 0.9rem; color: var(--color-grey-700); margin: 0; }

/* ----- Vertical listing / price card (image on top, badge, body, features, action) ----- */
.listing-grid {
	display: grid; grid-template-columns: 1fr; gap: 2.5rem;
}
@media (min-width: 768px)  { .listing-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .listing-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.listing-card {
	background-color: #fff;
	border: 1px solid var(--color-grey-200);
	border-radius: 1rem;
	overflow: hidden;
	display: flex; flex-direction: column;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.listing-card:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.12); }
.listing-media { position: relative; height: 16rem; overflow: hidden; }
.listing-media img {
	width: 100%; height: 100%; object-fit: cover;
	border-radius: 0; box-shadow: none; transition: transform 0.5s ease;
}
.listing-card:hover .listing-media img { transform: scale(1.05); }
.listing-badge {
	position: absolute; top: 1rem; right: 1rem;
	background-color: var(--color-light);
	color: var(--color-primary);
	padding: 0.25rem 0.75rem; border-radius: 9999px;
	font-size: 0.875rem; font-weight: 700;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.15);
}
.listing-body { padding: 2rem; display: flex; flex-direction: column; flex-grow: 1; }
.listing-title { font-weight: 700; font-size: 1.5rem; color: var(--color-primary); margin: 0 0 0.5rem; }
.listing-eyebrow {
	font-size: 0.78rem; font-weight: 600; color: var(--color-accent);
	text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1rem;
}
.listing-desc { color: var(--color-grey-700); margin-bottom: 1.5rem; flex-grow: 1; }
.listing-features {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem 1rem; font-size: 0.875rem;
	margin-bottom: 1.5rem; padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--color-grey-200);
}
.listing-features > * { display: flex; align-items: center; gap: 0.5rem; }
.listing-features i { color: var(--color-primary); width: 1.25rem; text-align: center; flex-shrink: 0; }
.listing-btn {
	display: block; width: 100%; text-align: center;
	border: 2px solid var(--color-primary); color: var(--color-primary);
	background: transparent; font-weight: 700; padding: 0.75rem;
	border-radius: 0.5rem; text-decoration: none; cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.listing-btn:hover { background-color: var(--color-primary); color: var(--color-light); }

/* ----- Two-image "about" stack (main image + overlapping inset) ----- */
.media-stack { position: relative; }
.media-stack > img {
	width: 100%; display: block;
	border-radius: 1rem; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
}
.media-stack-inset {
	position: absolute; bottom: -2rem; right: -2rem; width: 60%;
	border: 8px solid var(--color-light);
	border-radius: 1rem; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
	display: none;
}
@media (min-width: 768px) { .media-stack-inset { display: block; } }
.media-stack-inset img { width: 100%; display: block; border-radius: 0.5rem; box-shadow: none; }

/* Highlight / call-out box (coloured left border) */
.callout {
	background-color: var(--color-grey-100);
	padding: 1.5rem; border-radius: 0.5rem;
	border-left: 4px solid var(--color-accent);
	margin: 1.5rem 0;
}
.callout h4 { font-weight: 700; font-size: 1.25rem; color: var(--color-primary); margin: 0 0 0.5rem; }
.callout p { font-size: 0.9rem; margin: 0; }

/* ----- Gallery mosaic (add .span-2 to a tile to make it twice as wide on desktop) ----- */
.gallery-mosaic {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem;
}
@media (min-width: 768px) { .gallery-mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gallery-mosaic figure {
	margin: 0; overflow: hidden; border-radius: 1rem;
	height: 12rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
@media (min-width: 768px) { .gallery-mosaic figure { height: 16rem; } }
.gallery-mosaic img {
	width: 100%; height: 100%; object-fit: cover;
	border-radius: 0; box-shadow: none; transition: transform 0.5s ease;
}
.gallery-mosaic figure:hover img { transform: scale(1.1); }
@media (min-width: 768px) { .gallery-mosaic .span-2 { grid-column: span 2; } }

/* ----- CTA / booking section (coloured bg + faded image + form card) ----- */
.cta-section {
	background-color: var(--color-primary);
	color: var(--color-light);
	position: relative; overflow: hidden;
}
.cta-bg { position: absolute; inset: 0; opacity: 0.1; }
.cta-bg img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; }
.cta-inner { position: relative; z-index: 2; max-width: 56rem; margin: 0 auto; padding: 0 1rem; }
.cta-section .section-heading,
.cta-section h2 { color: var(--color-light); }
.cta-card {
	background-color: var(--color-light);
	color: var(--color-grey-700);
	padding: 2rem; border-radius: 1rem;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
}
@media (min-width: 768px) { .cta-card { padding: 2.5rem; } }

/* CF7 inside a .cta-card: two-column grid + labels + an options box. Pair with
   add_filter('wpcf7_autop_or_not','__return_false') in functions.php (already set). */
.cta-card .cf7-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem 1.5rem; }
@media (min-width: 640px) { .cta-card .cf7-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cta-card .cf7-grid .cf7-full { grid-column: 1 / -1; }
.cta-card label { display: block; font-size: 0.875rem; font-weight: 700; margin-bottom: 0.4rem; color: var(--color-grey-700); }
.cta-card .cf7-options {
	background-color: var(--color-grey-100);
	border: 1px solid var(--color-grey-200);
	border-radius: 0.5rem; padding: 1rem; display: grid; gap: 0.5rem;
}
.cta-card .cf7-options .wpcf7-list-item { display: block; margin: 0; }
.cta-card .cf7-fineprint { font-size: 0.75rem; text-align: center; opacity: 0.7; margin-top: 1rem; }

/* ----- Property / detail page (page-property template) -----
   DEFAULT architecture: one page per property/room/unit (not a single one-pager).
   The homepage cards link to /<slug>; each property page uses this full-bleed image
   hero with the name overlaid at the bottom; the footer deep-links to the same pages. */
body.page-template-page-property { padding-top: 0; } /* hero sits under the floating header */
.property-hero {
	position: relative;
	height: 62vh;
	min-height: 26rem;
	display: flex;
	align-items: flex-end;
	background-size: cover;
	background-position: center;
	/* Content is bottom-aligned, so it grows UPWARD as the h1 wraps. Without a
	   header-sized top padding the eyebrow/subtitle line disappears behind the
	   fixed header on narrow viewports — fine on desktop, broken on a phone.
	   Always reserve --header-h on any full-bleed hero. */
	padding-top: calc(var(--header-h) + 2rem);
	padding-bottom: 3rem;
}
.property-hero-overlay {
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(26,29,31,0.85) 0%, rgba(26,29,31,0.35) 50%, transparent 100%);
	z-index: 1;
}
.property-hero-content {
	position: relative; z-index: 2;
	max-width: 80rem; margin: 0 auto; padding: 0 1rem; width: 100%;
}
.property-hero-content h1 {
	font-weight: 700; font-size: 3rem; color: #fff;
	margin: 0 0 0.5rem; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
@media (min-width: 768px) { .property-hero-content h1 { font-size: 4rem; } }
.property-hero-subtitle {
	color: var(--color-light);
	font-size: 0.95rem; font-weight: 700;
	letter-spacing: 0.08em; text-transform: uppercase; margin: 0;
}
.property-features { list-style: none; padding: 0; margin: 0 0 2rem; }
.property-features li { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.75rem; color: var(--color-grey-700); }
.property-features i, .property-features .check-icon { color: var(--color-accent); flex-shrink: 0; }
/* (section backgrounds: reuse the existing .section-white / .section-light / .section-grey / .section-dark) */

/* ==========================================================================
   COMPONENT LIBRARY v1.1 — additive components shared by BOTH demo families
   ("gemini": Cormorant/Inter, hero+2-col+dark-cards+pairs+CTA-banner+pricing-form;
    "camping": Playfair/Nunito, hero+feature-cards+listing-cards+overlap-about+
    reverse-checklist+gallery+split-booking+privacy-footer).
   All neutral-token based. New client = copy theme, these come along. See THEME-FACTS.md.
   ========================================================================== */

/* --- Listing card: force dark text on the white card, even when the card sits
   inside a .section-dark (fixes the white-on-white feature list). --- */
.listing-card { color: var(--color-grey-700); }
.listing-card .listing-features li { color: var(--color-grey-700); }

/* Dark listing-card variant (an accent "experience" card among white ones). */
.listing-card.is-dark { background-color: var(--color-dark); border-color: transparent; color: rgba(255,255,255,0.82); }
.listing-card.is-dark .listing-title { color: #fff; }
.listing-card.is-dark .listing-eyebrow { color: var(--color-accent); }
.listing-card.is-dark .listing-desc { color: rgba(255,255,255,0.82); }
.listing-card.is-dark .listing-features { border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.82); }
.listing-card.is-dark .listing-features li { color: rgba(255,255,255,0.82); }
.listing-card.is-dark .listing-features i { color: var(--color-accent); }
.listing-card.is-dark .listing-btn { border-color: rgba(255,255,255,0.5); color: #fff; }
.listing-card.is-dark .listing-btn:hover { background-color: #fff; color: var(--color-dark); }

/* --- CTA section: default vertical breathing room (was 0 → cramped banners). --- */
.cta-section { padding-top: 6rem; padding-bottom: 6rem; }

/* --- Image-backed CTA banner: full-bleed photo + dark overlay + centred text.
   Set the photo via inline style="background-image:url(...)"; tint per client by
   overriding --cta-overlay (e.g. a dark-green rgba). --- */
.cta-banner {
	--cta-overlay: rgba(26, 29, 31, 0.78);
	position: relative; overflow: hidden;
	padding: 7rem 1.5rem; text-align: center;
	background-size: cover; background-position: center;
}
.cta-banner::before { content: ''; position: absolute; inset: 0; background: var(--cta-overlay); }
.cta-banner-inner { position: relative; z-index: 2; max-width: 46rem; margin: 0 auto; }
.cta-banner-eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; font-weight: 700; color: var(--color-accent); margin: 0 0 0.75rem; }
.cta-banner h2 { font-family: var(--wp--preset--font-family--serif, Georgia, serif); color: #fff; font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.1; margin: 0 0 1rem; }
.cta-banner p { color: rgba(255,255,255,0.9); margin: 0 auto 2rem; max-width: 34rem; line-height: 1.6; }
.cta-banner-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* --- Button variants for banners / dark sections. --- */
.btn-accent {
	display: inline-flex; align-items: center; gap: 0.5rem;
	background-color: var(--color-accent); color: #fff;
	padding: 0.95rem 2rem; border-radius: 0.5rem; font-weight: 700; text-decoration: none;
	box-shadow: 0 10px 20px rgba(0,0,0,0.18); transition: background-color 0.2s ease;
}
.btn-accent:hover { background-color: var(--color-accent-dark); color: #fff; }
.btn-outline-light {
	display: inline-flex; align-items: center; gap: 0.5rem;
	background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.55); color: #fff;
	padding: 0.95rem 2rem; border-radius: 0.5rem; font-weight: 700; text-decoration: none; transition: background-color 0.2s ease;
}
.btn-outline-light:hover { background: rgba(255,255,255,0.22); color: #fff; }

/* --- Rich feature list (icon + bold serif title + description) for alternating
   "about / experience" 2-col sections (e.g. camping demo's #beleving). --- */
.feature-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.feature-list li { display: flex; align-items: flex-start; gap: 1rem; }
.feature-list i { color: var(--color-primary); font-size: 1.15rem; margin-top: 0.3rem; flex-shrink: 0; }
.feature-list strong { display: block; font-family: var(--wp--preset--font-family--serif, Georgia, serif); font-size: 1.2rem; color: var(--color-dark); margin-bottom: 0.2rem; }
.feature-list span { color: var(--color-grey-700); font-size: 0.95rem; line-height: 1.6; }

/* --- Decorative round badge overlaying a .media-stack image composition. --- */
.media-stack .media-badge {
	position: absolute; z-index: 30; top: 50%; left: 0; transform: translate(-25%, -50%);
	width: 6rem; height: 6rem; border-radius: 9999px;
	background-color: var(--color-accent); color: #fff;
	display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
	box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
.media-stack .media-badge .media-badge-num { font-family: var(--wp--preset--font-family--serif, Georgia, serif); font-size: 1.5rem; font-weight: 700; line-height: 1; }
.media-stack .media-badge .media-badge-label { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em; margin-top: 0.2rem; }

/* --- Booking split: info aside + form inside one rounded card. Sits well inside a
   .cta-section image background. Add .is-dark to .booking-info for a dark aside. --- */
.booking-split { display: grid; gap: 0; border-radius: 1.25rem; overflow: hidden; background-color: var(--color-white); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); }
@media (min-width: 768px) { .booking-split { grid-template-columns: 2fr 3fr; } }
.booking-split > * { min-width: 0; }
.booking-info { background-color: var(--color-light); padding: 2.5rem; display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; }
.booking-info.is-dark { background-color: var(--color-dark); color: rgba(255,255,255,0.85); }
.booking-info.is-dark h2, .booking-info.is-dark h3 { color: #fff; }
.booking-form { padding: 2.5rem; background-color: var(--color-white); color: var(--color-grey-700); }
/* .cta-section sets `color: var(--color-light)`, which cascades into these light/white panes and
   renders the info text + CF7 <label>s near-invisible (white-on-white). Force dark text (the .is-dark
   aside re-whitens itself above), style the form labels, re-enable the two-column field grid, and cap
   the textarea — the .cf7-grid/.cta-card label helpers don't reach a form that lives in .booking-form. */
.booking-info:not(.is-dark) { color: var(--color-grey-700); }
.booking-info:not(.is-dark) h2, .booking-info:not(.is-dark) h3 { color: var(--color-dark); }
.booking-form label { display: block; font-size: 0.875rem; font-weight: 700; margin-bottom: 0.35rem; color: var(--color-grey-700); }
.booking-form .cf7-grid { display: grid; grid-template-columns: 1fr; column-gap: 1.25rem; }
@media (min-width: 640px) { .booking-form .cf7-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.booking-form .cf7-grid .cf7-full { grid-column: 1 / -1; }
.booking-form textarea { min-height: 6rem; }

/* --- Property/detail page: photo grid (1 large + 2 small) to balance the text
   column height. Real photos drop straight into the same 3 slots. --- */
.property-gallery { display: grid; gap: 1rem; }
.property-gallery .pg-main img { width: 100%; height: auto; display: block; border-radius: 1rem; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.12); }
.property-gallery .pg-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
.property-gallery .pg-row img { width: 100%; height: 11rem; object-fit: cover; display: block; border-radius: 0.75rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.08); }

/* --- Footer bottom utility links row (Contact · Privacy · Terms). --- */
.footer-meta { margin-top: 0.6rem; font-size: 0.85rem; }
.footer-meta a { color: rgba(255,255,255,0.7); text-decoration: none; }
.footer-meta a:hover { color: #fff; }

/* --- Reveal-on-scroll: both demo families fade sections in. assets/js/header.js
   toggles .is-visible. Respects reduced-motion; degrades to visible without JS. --- */
.reveal, .fade-in-up { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; will-change: opacity, transform; }
.reveal.is-visible, .fade-in-up.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal, .fade-in-up { opacity: 1; transform: none; transition: none; } }

/* --- Price list (seasonal tariff rows) for a pricing aside, e.g. inside .booking-info. --- */
.price-list { display: flex; flex-direction: column; gap: 0.5rem; margin: 0 0 1rem; }
.price-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: var(--color-grey-100); border-radius: 0.5rem; padding: 0.7rem 1rem; }
.price-row .price-value { font-weight: 700; white-space: nowrap; }
.booking-info.is-dark .price-row { background: rgba(255,255,255,0.08); }

/* --- Sticky mobile CTA (.sticky-cta) — SOP 08 §1.2, REQUIREMENTS B-18 (15 Sep 2026).
   Rendered from functions.php (starter_render_sticky_cta) so a content re-push cannot wipe it; label,
   target and the watched booking section via the starter_sticky_cta_args filter. Phones only; hidden
   while the booking section is on screen (header.js adds .is-hidden). Gate: SOPs/tools/qa-mobile-layout.cjs
   (FIXED_CENTRED). --- */
.sticky-cta { display: none; }

@media (max-width: 768px) {
	/* border-box is global (GLOBAL RESETS). Restated here because this component must stay centred even
	   in a client theme without the global rule: width:100% + the bar's side padding ran the Kortmann
	   button 16px off the right edge on every page. */
	.sticky-cta,
	.sticky-cta-btn { box-sizing: border-box; }

	.sticky-cta {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 40; /* below .site-header (50), so the open mobile menu covers it; the lightbox (9999) sits above */
		display: block;
		padding: 0.625rem 1rem calc(0.625rem + env(safe-area-inset-bottom, 0px));
		background-color: var(--color-light);
		border-top: 1px solid var(--color-grey-200);
		box-shadow: 0 -6px 18px -6px rgba(0, 0, 0, 0.18);
		transition: transform 0.25s ease, opacity 0.25s ease;
	}

	/* Room for the bar at the end of the page: without it the footer's last lines (the copyright, the
	   privacy link) stayed under the bar for good on every phone page. Found by the capture once it
	   counted only what the bars leave visible (24 Sep 2026). Ported from starter 1.2.0. */
	body:has(.sticky-cta) {
		padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
	}

	/* No point offering a shortcut to the section the visitor is already looking at. */
	.sticky-cta.is-hidden {
		transform: translateY(110%);
		opacity: 0;
		pointer-events: none;
	}

	.sticky-cta-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		width: 100%;
		padding: 0.875rem 1rem;
		border-radius: 9999px;
		background-color: var(--color-primary);
		color: #fff;
		font-weight: 700;
		text-decoration: none;
		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.15);
	}

	.sticky-cta-btn:hover,
	.sticky-cta-btn:focus {
		background-color: var(--color-primary-dark);
		color: #fff;
	}

	/* Keep the bar from covering the last line of the footer. */
	.site-footer { padding-bottom: 6rem; }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
	.sticky-cta { transition: none; }
}

/* --- Lightbox: click a gallery / property image to view it enlarged. JS in assets/js/header.js;
   auto-applies to images inside .property-gallery / .gallery-mosaic / .gallery-grid, or any [data-lightbox]. --- */
.property-gallery img, .gallery-mosaic img, .gallery-grid img, [data-lightbox] { cursor: zoom-in; }
.lightbox-overlay { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(0,0,0,0.9); cursor: zoom-out; opacity: 0; transition: opacity 0.25s ease; }
.lightbox-overlay.open { display: flex; opacity: 1; }
.lightbox-overlay img { max-width: 94vw; max-height: 92vh; border-radius: 0.5rem; box-shadow: 0 20px 60px rgba(0,0,0,0.5); cursor: default; }
.lightbox-close { position: absolute; top: 1rem; right: 1.25rem; width: 2.75rem; height: 2.75rem; border: none; border-radius: 9999px; background: rgba(255,255,255,0.15); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; transition: background-color 0.2s ease; }
.lightbox-close:hover { background: rgba(255,255,255,0.3); }

/* ==========================================================================
   CLIENT: COUNTRY HOUSES ITALY (built 2026-09-23)
   Visual contract: countryhouses-italy-reference/html demo/index.html (Tailwind).
   Every component below is prefixed ch- and written for CORE blocks (wp:group, wp:image,
   wp:cover, wp:buttons, wp:list): blockGap is 0, so each rule states its own margins
   (SOP 05 §5m). Fonts are self-hosted (theme.json fontFace); icons are a local Font Awesome
   subset (assets/fonts/fa-solid-900-subset.woff2, 44 glyphs).
   ========================================================================== */

@font-face {
	font-family: "Font Awesome 6 Free";
	font-style: normal;
	font-weight: 900;
	font-display: block;
	src: url("assets/fonts/fa-solid-900-subset.woff2") format("woff2");
}

:root {
	--ch-cream: #f7f4ef;
	--ch-cream-light: #fcfaf6;
	--ch-sand: #efe9df;
	--ch-ink: #1f1c18;
	--ch-ink-80: #4a4743;
	--ch-ink-70: #5e5a55;
	--ch-terra: #b85c3f;       /* decorative: icons, rules, focus */
	--ch-terra-text: #9c4d34;  /* eyebrow and link text on the light backgrounds (AA) */
	--ch-btn: #a9543a;         /* button fill; white text on it passes AA (5.0:1) */
	--ch-btn-hover: #8a432e;
	--ch-olive: #5a6b47;
	--ch-forest: #3d4a2f;
	--ch-forest-card: #4a5a3a;
	--ch-peach: #e8a87c;
	--ch-shadow-card: 0 20px 50px -30px rgba(31, 28, 24, 0.25);
	--ch-gutter: 1.5rem;
}

@media (min-width: 768px) {
	:root { --ch-gutter: 2.5rem; }
}

body {
	background-color: var(--ch-cream);
	color: var(--ch-ink);
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 500;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

/* Anchors (#reserveren, #cultuur ...) land below the fixed header. */
:where(section, div, article)[id] {
	scroll-margin-top: calc(var(--header-h) + 1rem);
}

/* ---- Icons (Font Awesome subset) ---------------------------------------- */
.fa-solid, .fas {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-style: normal;
	font-variant: normal;
	line-height: 1;
	text-rendering: auto;
}
.fa-location-dot::before { content: "\f3c5"; }
.fa-phone::before { content: "\f095"; }
.fa-envelope::before { content: "\f0e0"; }
.fa-calendar-days::before { content: "\f073"; }
.fa-arrow-right::before { content: "\f061"; }

[class*="ch-i-"]::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	line-height: 1;
	color: var(--ch-terra);
	flex-shrink: 0;
}
.ch-i-location::before { content: "\f3c5"; }
.ch-i-house::before { content: "\f015"; }
.ch-i-users::before { content: "\f0c0"; }
.ch-i-pool::before { content: "\f5c5"; }
.ch-i-paw::before { content: "\f1b0"; }
.ch-i-wifi::before { content: "\f1eb"; }
.ch-i-water::before { content: "\f773"; }
.ch-i-fire::before { content: "\f06d"; }
.ch-i-utensils::before { content: "\f2e7"; }
.ch-i-bed::before { content: "\f236"; }
.ch-i-tree::before { content: "\f1bb"; }
.ch-i-envelope::before { content: "\f0e0"; }
.ch-i-phone::before { content: "\f095"; }

/* ---- Header (Mode B: transparent over a hero, solid white on scroll) ---- */
.ch-header .site-header-inner {
	max-width: 100rem;
	padding: 0 var(--ch-gutter);
}

.ch-logo {
	gap: 0;
	flex-shrink: 0;
}

.ch-logo img {
	display: block;
	height: 3.25rem;
	width: auto;
}

@media (min-width: 768px) {
	.ch-logo img { height: 3.75rem; }
}

.ch-logo .ch-logo-white { display: none; }

.ch-header .nav-desktop { gap: 2.25rem; }

/* Header checklist #10: labels never wrap; the band just above the breakpoint gets tighter gaps. */
@media (min-width: 1024px) and (max-width: 1199px) {
	.ch-header .nav-desktop { gap: 1.5rem; }
	.site-header.ch-header .header-cta { padding: 0.55rem 1rem; }
}

.site-header.ch-header .nav-link {
	color: var(--ch-ink);
	font-size: 0.875rem;
	font-weight: 500;
}

.site-header.ch-header .nav-link:hover { color: var(--ch-terra-text); }

.site-header.ch-header .header-cta {
	background-color: var(--ch-ink);
	color: var(--ch-cream-light);
	border: 1px solid var(--ch-ink);
	padding: 0.625rem 1.25rem;
	font-size: 0.875rem;
	font-weight: 600;
	box-shadow: none;
	margin-left: 0.25rem;
}

.site-header.ch-header .header-cta:hover {
	background-color: var(--ch-btn);
	border-color: var(--ch-btn);
	color: #fff;
	transform: none;
}

.site-header.ch-header .nav-mobile-toggle { color: var(--ch-ink); }

.site-header.ch-header.scrolled {
	box-shadow: 0 1px 0 rgba(31, 28, 24, 0.08), 0 10px 30px rgba(31, 28, 24, 0.04);
}

.site-header.ch-header.scrolled::before { border-bottom-color: transparent; }

/* A page that opens with a photo hero keeps the header transparent until the visitor scrolls
   (the demo's behaviour, now on every page with a hero, not only the homepage). */
body:has(.ch-hero) {
	padding-top: 0;
}

body:has(.ch-hero) .site-header:not(.scrolled)::before {
	background-color: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-bottom-color: transparent;
}

body:has(.ch-hero) .site-header.ch-header:not(.scrolled) .nav-link { color: var(--ch-cream); }
body:has(.ch-hero) .site-header.ch-header:not(.scrolled) .nav-link:hover { color: var(--ch-peach); }
body:has(.ch-hero) .site-header.ch-header:not(.scrolled) .nav-mobile-toggle { color: var(--ch-cream); }

body:has(.ch-hero) .site-header.ch-header:not(.scrolled) .header-cta {
	background-color: rgba(247, 244, 239, 0.12);
	border-color: rgba(247, 244, 239, 0.5);
	color: var(--ch-cream);
}

body:has(.ch-hero) .site-header.ch-header:not(.scrolled) .header-cta:hover {
	background-color: var(--ch-btn);
	border-color: var(--ch-btn);
	color: #fff;
}

body:has(.ch-hero) .site-header:not(.scrolled) .ch-logo .ch-logo-colour { display: none; }
body:has(.ch-hero) .site-header:not(.scrolled) .ch-logo .ch-logo-white { display: block; }

/* Mobile overlay: white panel, dark pill CTA (demo). */
.ch-header .nav-mobile-panel a { color: var(--ch-ink); font-weight: 500; }

.ch-header .nav-mobile-panel a.nav-cta-mobile {
	background-color: var(--ch-ink);
	color: var(--ch-cream-light);
	border-radius: 9999px;
	font-weight: 600;
}

.ch-header .nav-mobile-panel a.nav-cta-mobile:hover {
	background-color: var(--ch-btn);
	color: #fff;
}

/* ---- Layout -------------------------------------------------------------- */
.ch-container {
	width: 100%;
	max-width: 100rem;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--ch-gutter);
	padding-right: var(--ch-gutter);
}

.ch-container-narrow { max-width: 72rem; }

.ch-section {
	padding-top: 5rem;
	padding-bottom: 5rem;
}

@media (min-width: 768px) {
	.ch-section {
		padding-top: 7rem;
		padding-bottom: 7rem;
	}
}

.ch-bg-cream { background-color: var(--ch-cream); }
.ch-bg-creamlight { background-color: var(--ch-cream-light); }
.ch-bg-sand { background-color: var(--ch-sand); }
.ch-bg-forest { background-color: var(--ch-forest); color: var(--ch-cream); }

/* The villas section keeps the standard section padding. The demo leaves its top padding out (pb only),
   which glued the "Onze villa's" eyebrow to the colour change under the cream story section: a
   deliberate deviation from the demo (revision 0, 25 Sep 2026, Koen's call). */

.ch-section-head {
	max-width: 48rem;
	margin: 0 0 3rem;
}

.ch-section-head-wide { max-width: 56rem; }

@media (min-width: 768px) {
	.ch-section-head { margin-bottom: 4rem; }
}

.ch-eyebrow {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--ch-terra-text);
	margin: 0 0 1.25rem;
}

.ch-h2 {
	font-size: 1.875rem;
	line-height: 1.12;
	color: var(--ch-ink);
	margin: 0;
}

@media (min-width: 768px) {
	.ch-h2 { font-size: 2.25rem; }
}

@media (min-width: 1024px) {
	.ch-h2 { font-size: 3rem; }
}

.ch-h3 {
	font-size: 1.75rem;
	line-height: 1.15;
	color: var(--ch-ink);
	margin: 0 0 1rem;
}

@media (min-width: 768px) {
	.ch-h3 { font-size: 2.25rem; }
}

.ch-lead {
	font-size: 1.125rem;
	line-height: 1.7;
	color: var(--ch-ink-80);
	margin: 1.25rem 0 0;
}

.ch-small {
	font-size: 0.875rem;
	line-height: 1.7;
	color: var(--ch-ink-70);
	margin: 0;
}

.ch-bg-forest .ch-eyebrow { color: var(--ch-peach); }
.ch-bg-forest .ch-h2,
.ch-bg-forest .ch-h3 { color: var(--ch-cream); }
.ch-bg-forest .ch-lead { color: rgba(247, 244, 239, 0.85); }

/* Photo blocks: the starter rounds and shadows every .wp-block-image img globally; the card
   photos below sit inside rounded cards, so they reset it (05 §5m #4: re-emitted at higher
   specificity than core's .wp-block-image img). */
.ch-villa-img,
.ch-place-img,
.ch-exp-img,
.ch-intro-img,
.ch-pair-img,
.ch-other-img {
	margin: 0;
}

/* ---- Buttons (core wp:button with a ch-btn class) ----------------------- */
.wp-block-buttons.ch-hero-actions,
.wp-block-buttons.ch-card-actions,
.wp-block-buttons.ch-intro-actions,
.wp-block-buttons.ch-avail-actions,
.wp-block-buttons.ch-cta-actions,
.wp-block-buttons.ch-other-actions,
.wp-block-buttons.ch-404-actions {
	gap: 0.75rem;
}

.ch-btn .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.95rem 1.75rem;
	border-radius: 9999px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

@media (min-width: 768px) {
	.ch-btn .wp-block-button__link { font-size: 1rem; }
}

.ch-btn-primary .wp-block-button__link {
	background-color: var(--ch-btn);
	border-color: var(--ch-btn);
	color: #fff;
	box-shadow: 0 10px 15px -3px rgba(31, 28, 24, 0.3);
}

.ch-btn-primary .wp-block-button__link:hover,
.ch-btn-primary .wp-block-button__link:focus-visible {
	background-color: var(--ch-btn-hover);
	border-color: var(--ch-btn-hover);
	color: #fff;
}

.ch-btn-glass .wp-block-button__link {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.4);
	color: var(--ch-cream);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.ch-btn-glass .wp-block-button__link:hover,
.ch-btn-glass .wp-block-button__link:focus-visible {
	background-color: rgba(255, 255, 255, 0.2);
	color: var(--ch-cream);
}

.ch-btn-outline .wp-block-button__link {
	background-color: transparent;
	border-color: rgba(31, 28, 24, 0.25);
	color: var(--ch-ink);
}

.ch-btn-outline .wp-block-button__link:hover,
.ch-btn-outline .wp-block-button__link:focus-visible {
	background-color: var(--ch-ink);
	border-color: var(--ch-ink);
	color: var(--ch-cream-light);
}

.ch-btn-light .wp-block-button__link {
	background-color: var(--ch-cream);
	border-color: var(--ch-cream);
	color: var(--ch-ink);
}

.ch-btn-light .wp-block-button__link:hover,
.ch-btn-light .wp-block-button__link:focus-visible {
	background-color: #fff;
	border-color: #fff;
	color: var(--ch-ink);
}

.ch-btn-arrow .wp-block-button__link::after {
	content: "\f061";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 0.75rem;
}

/* ---- Hero (wp:cover) ----------------------------------------------------- */
/* The dark fill is what shows while the photo loads or if it fails: the light hero text stays
   legible either way (and the contrast gates, which cannot see an <img>, measure against it). */
.ch-hero.wp-block-cover {
	padding: 0;
	color: var(--ch-cream);
	background-color: var(--ch-ink);
}

/* The cover's own overlay span (dimRatio 0 in the editor) carries the demo's gradient. */
.wp-block-cover.ch-hero > .wp-block-cover__background.has-background-dim.has-background-dim-0 {
	opacity: 1;
	background:
		linear-gradient(180deg, rgba(31, 28, 24, 0.55) 0%, rgba(31, 28, 24, 0.25) 35%, rgba(31, 28, 24, 0.72) 100%),
		linear-gradient(90deg, rgba(31, 28, 24, 0.35) 0%, rgba(31, 28, 24, 0.05) 50%, rgba(31, 28, 24, 0.35) 100%);
}

.wp-block-cover.ch-hero-page > .wp-block-cover__background.has-background-dim.has-background-dim-0 {
	background: linear-gradient(180deg, rgba(31, 28, 24, 0.6) 0%, rgba(31, 28, 24, 0.12) 38%, rgba(31, 28, 24, 0.72) 100%);
}

.ch-hero-home.wp-block-cover {
	min-height: 100vh !important;
	min-height: 100svh !important;
	align-items: center;
	justify-content: center;
	padding: calc(var(--header-h) + 2rem) var(--ch-gutter) 6rem;
}

/* Static inner container: the facts bar is positioned against the cover itself. */
.ch-hero-home .wp-block-cover__inner-container {
	position: static;
	width: 100%;
}

.ch-hero-content {
	position: relative;
	z-index: 2;
	max-width: 56rem;
	margin: 0 auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.ch-hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--ch-cream);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	margin: 0 0 1.5rem;
}

@media (min-width: 768px) {
	.ch-hero-eyebrow { font-size: 0.875rem; }
}

.ch-hero .ch-hero-title {
	color: var(--ch-cream);
	font-size: 2.5rem;
	line-height: 1.08;
	max-width: 48rem;
	margin: 0;
}

@media (min-width: 640px) { .ch-hero .ch-hero-title { font-size: 3rem; } }
@media (min-width: 768px) { .ch-hero .ch-hero-title { font-size: 3.75rem; } }
@media (min-width: 1024px) { .ch-hero .ch-hero-title { font-size: 4.25rem; } }

.ch-hero-lead {
	color: rgba(247, 244, 239, 0.9);
	font-size: 1.125rem;
	font-weight: 300;
	line-height: 1.6;
	max-width: 42rem;
	margin: 1.5rem 0 0;
}

@media (min-width: 768px) {
	.ch-hero-lead { font-size: 1.25rem; }
}

.wp-block-buttons.ch-hero-actions {
	margin-top: 2.25rem;
	justify-content: center;
}

.ch-hero-facts { display: none; }

@media (min-width: 768px) {
	.ch-hero-facts {
		position: absolute;
		z-index: 2;
		left: 0;
		right: 0;
		bottom: 2rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 2rem;
		max-width: 100rem;
		margin: 0 auto;
		padding: 0 2.5rem;
	}

	.ch-hero-facts .ch-fact {
		color: var(--ch-cream);
		font-size: 0.875rem;
		font-weight: 500;
		letter-spacing: 0.02em;
		gap: 0.75rem;
	}
}

@media (max-width: 480px) {
	/* 1rem less above the content: on a 360×640 phone the last hero button otherwise touches the sticky
	   bar (revision 0, 25 Sep 2026). */
	.ch-hero-home.wp-block-cover { padding-top: calc(var(--header-h) + 1rem); }

	.ch-hero .ch-hero-title { font-size: clamp(2.625rem, 11vw, 3.5rem); }

	.wp-block-buttons.ch-hero-actions {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.ch-hero-actions .ch-btn,
	.ch-hero-actions .ch-btn .wp-block-button__link { width: 100%; }
}

/* Phones: the sticky bar (up to 768px) is the booking button, so the homepage hero drops its own
   "Bekijk beschikbaarheid". On a small phone the two identical buttons sat stacked on the first screen
   (revision 0, 25 Sep 2026). "Ontdek de villa's" stays. Hiding the bar instead would leave the first
   screen without the bar that qa-journeys taps. The villa pages keep theirs: it sits in the intro,
   away from the bar. */
@media (max-width: 768px) {
	.ch-hero-home .ch-hero-actions .ch-btn-primary { display: none; }
}

/* Page heroes: villa, region, contact and privacy pages. Content sits at the bottom-left and
   clears the fixed header (00 gotcha 17: --header-h, never a literal). */
.ch-hero-page.wp-block-cover {
	align-items: flex-end;
	justify-content: flex-start;
	padding: calc(var(--header-h) + 2.5rem) 0 3.5rem;
}

.ch-hero-page .wp-block-cover__inner-container {
	max-width: 100rem;
	margin: 0 auto;
	padding: 0 var(--ch-gutter);
}

.ch-hero-page-content { max-width: 50rem; }

.ch-hero .ch-hero-title-page {
	font-size: 2.5rem;
	margin: 0;
}

@media (min-width: 768px) { .ch-hero .ch-hero-title-page { font-size: 3.5rem; } }
@media (min-width: 1024px) { .ch-hero .ch-hero-title-page { font-size: 4rem; } }

.ch-hero-page .ch-hero-lead { margin-top: 1rem; }

/* Compact on phones (CLAUDE.md -> Heroes): the height follows the text, no tall empty photo. */
@media (max-width: 767px) {
	.ch-hero-page.wp-block-cover {
		min-height: 0 !important;
		padding-top: calc(var(--header-h) + 4rem);
		padding-bottom: 2.5rem;
	}

	.ch-hero .ch-hero-title-page { font-size: 2.25rem; }
}

/* Villa switch (Eric's Stitch design: switch between the two villas at the top). */
/* Its own row above the eyebrow, as wide as its two buttons. */
.wp-block-buttons.ch-villa-switch {
	display: flex;
	width: fit-content;
	flex-wrap: nowrap;
	gap: 0.25rem;
	padding: 0.25rem;
	margin: 0 0 1.5rem;
	border-radius: 9999px;
	background-color: rgba(247, 244, 239, 0.14);
	border: 1px solid rgba(247, 244, 239, 0.3);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.ch-switch-btn .wp-block-button__link {
	display: inline-block;
	padding: 0.55rem 1.1rem;
	border-radius: 9999px;
	background-color: transparent;
	color: var(--ch-cream);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.ch-switch-btn .wp-block-button__link:hover { background-color: rgba(247, 244, 239, 0.18); color: #fff; }

.ch-switch-btn.ch-is-current .wp-block-button__link {
	background-color: var(--ch-cream);
	color: var(--ch-ink);
}

@media (max-width: 479px) {
	.wp-block-buttons.ch-villa-switch {
		display: flex;
		width: 100%;
	}

	.ch-villa-switch .ch-switch-btn {
		flex: 1 1 0;
		min-width: 0;
	}

	.ch-switch-btn .wp-block-button__link {
		display: block;
		padding: 0.55rem 0.5rem;
		font-size: 0.8125rem;
		text-align: center;
		white-space: normal;
	}
}

/* ---- Facts, locations, badges ------------------------------------------- */
.ch-fact {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: 0.875rem;
	color: var(--ch-ink-70);
}

.ch-facts-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	margin-top: 1.5rem;
}

@media (min-width: 640px) {
	.ch-facts-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.ch-facts-row-intro { margin-top: 2rem; }

@media (min-width: 640px) and (max-width: 1279px) {
	.ch-intro-text .ch-facts-row-intro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ch-location {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	color: var(--ch-olive);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.ch-location::before { color: inherit; }

.ch-badge {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 2;
	margin: 0;
	padding: 0.375rem 1rem;
	border-radius: 9999px;
	background-color: rgba(255, 255, 255, 0.95);
	color: var(--ch-terra-text);
	font-size: 0.875rem;
	font-weight: 700;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.ch-dist {
	position: absolute;
	left: 1rem;
	bottom: 1rem;
	z-index: 2;
	margin: 0;
	padding: 0.375rem 0.75rem;
	border-radius: 9999px;
	background-color: rgba(255, 255, 255, 0.95);
	color: var(--ch-ink);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.ch-more { margin: 2.5rem 0 0; }
.ch-intro-text .ch-more,
.ch-intro-text .ch-address + .ch-more { margin-top: 1rem; }

/* Inline, not flex: a label that wraps on a phone keeps its arrow right after the last word. */
.ch-more a {
	color: var(--ch-ink);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgba(184, 92, 63, 0.5);
	text-underline-offset: 0.3em;
}

.ch-more a::after {
	content: "\f061";
	display: inline-block;
	margin-left: 0.5rem;
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 0.75rem;
	color: var(--ch-terra);
	text-decoration: none;
}

.ch-more a:hover { color: var(--ch-terra-text); }
.ch-bg-forest .ch-more a { color: var(--ch-cream); text-decoration-color: rgba(232, 168, 124, 0.6); }
.ch-bg-forest .ch-more a::after { color: var(--ch-peach); }

.ch-address {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin: 1.5rem 0 0;
	font-weight: 600;
	color: var(--ch-ink);
}

.ch-address::before { margin-top: 0.2rem; }

/* ---- Story ---------------------------------------------------------------- */
.ch-story-grid {
	display: grid;
	gap: 2.5rem;
}

@media (min-width: 768px) {
	.ch-story-grid {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: 4rem;
		align-items: start;
	}

	.ch-story-body { padding-top: 0.75rem; }
}

.ch-h2-story { line-height: 1.15; }

@media (min-width: 1024px) {
	.ch-h2-story { font-size: 2.75rem; }
}

.ch-story-body .ch-lead:first-child { margin-top: 0; }

/* ---- Villa cards ---------------------------------------------------------- */
.ch-villa-grid {
	display: grid;
	gap: 1.5rem;
}

@media (min-width: 768px) {
	.ch-villa-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2.5rem;
	}
}

.ch-villa-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 1.5rem;
	background-color: #fff;
	border: 1px solid rgba(31, 28, 24, 0.05);
	box-shadow: var(--ch-shadow-card);
}

.ch-villa-media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.ch-villa-media .ch-villa-img { height: 100%; }

.ch-villa-card .ch-villa-img img,
.ch-villa-card .ch-villa-img.wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	box-shadow: none;
	transition: transform 0.7s ease-out;
}

.ch-villa-card:hover .ch-villa-img img { transform: scale(1.04); }

.ch-villa-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 1.75rem;
}

@media (min-width: 768px) {
	.ch-villa-body { padding: 2.5rem; }
}

.ch-villa-title {
	font-size: 1.5rem;
	line-height: 1.2;
	margin: 0.75rem 0 1rem;
}

@media (min-width: 768px) {
	.ch-villa-title { font-size: 1.875rem; }
}

.ch-villa-title a { color: var(--ch-ink); text-decoration: none; }
.ch-villa-title a:hover { color: var(--ch-terra-text); }

.ch-villa-text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--ch-ink-80);
}

@media (min-width: 768px) {
	.ch-villa-text { font-size: 1rem; }
}

.ch-villa-layout {
	margin-top: 1.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(31, 28, 24, 0.1);
}

.ch-mini-title {
	margin: 0 0 0.75rem;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ch-ink);
}

.wp-block-buttons.ch-card-actions {
	margin-top: auto;
	padding-top: 1.75rem;
}

/* ---- Place cards (Puglia, Calabrië) ------------------------------------- */
.ch-place-grid {
	display: grid;
	gap: 1.5rem;
}

@media (min-width: 640px) {
	.ch-place-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.ch-place-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 2rem;
	}
}

.ch-place-card {
	overflow: hidden;
	border-radius: 1.5rem;
	background-color: #fff;
	border: 1px solid rgba(31, 28, 24, 0.05);
	box-shadow: 0 15px 40px -30px rgba(31, 28, 24, 0.3);
}

.ch-place-media {
	position: relative;
	aspect-ratio: 5 / 4;
	overflow: hidden;
}

.ch-place-media .ch-place-img { height: 100%; }

.ch-place-card .ch-place-img img,
.ch-place-card .ch-place-img.wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	box-shadow: none;
}

.ch-place-body { padding: 1.5rem; }

@media (min-width: 768px) {
	.ch-place-body { padding: 1.75rem; }
}

.ch-place-title {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
	line-height: 1.25;
	color: var(--ch-ink);
}

.ch-place-text {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.65;
	color: var(--ch-ink-70);
}

.ch-bg-forest .ch-place-card {
	background-color: var(--ch-forest-card);
	border-color: rgba(255, 255, 255, 0.05);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.ch-bg-forest .ch-place-title { color: var(--ch-cream); }
.ch-bg-forest .ch-place-text { color: rgba(247, 244, 239, 0.8); }

.ch-bg-forest .ch-dist {
	background-color: rgba(61, 74, 47, 0.9);
	color: var(--ch-cream);
}

/* Phones: a place card becomes a compact row (photo left, text right). Stacked full-width cards
   made the homepage over 16,000px long at 375px; six of them filled four screens on their own. */
@media (max-width: 639px) {
	.ch-place-grid { gap: 1rem; }

	.ch-place-card {
		display: grid;
		grid-template-columns: 7.5rem minmax(0, 1fr);
		border-radius: 1.25rem;
	}

	.ch-place-media {
		aspect-ratio: auto;
		height: 100%;
		min-height: 9rem;
	}

	.ch-place-body { padding: 1rem 1.125rem; }

	.ch-place-title {
		margin-bottom: 0.375rem;
		font-size: 1.0625rem;
	}

	.ch-place-text {
		font-size: 0.8125rem;
		line-height: 1.55;
	}

	.ch-dist {
		left: 0.5rem;
		right: 0.5rem;
		bottom: 0.5rem;
		padding: 0.25rem 0.5rem;
		font-size: 0.625rem;
		text-align: center;
	}
}

.ch-split-head {
	display: grid;
	gap: 2rem;
	margin-bottom: 3rem;
}

@media (min-width: 1024px) {
	.ch-split-head {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 4rem;
		align-items: start;
		margin-bottom: 4rem;
	}

	.ch-split-head > .ch-lead { margin-top: 0.75rem; }
}

/* ---- Facilities (compact on phones: Eric's point about his own design) --- */
.ch-facility-grid {
	display: grid;
	gap: 1rem;
}

@media (min-width: 640px) {
	.ch-facility-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem;
	}
}

@media (min-width: 1024px) {
	.ch-facility-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 2rem;
	}
}

.ch-facility-card {
	padding: 1.25rem;
	border-radius: 1rem;
	background-color: #fff;
	border: 1px solid rgba(31, 28, 24, 0.05);
	box-shadow: 0 10px 30px -25px rgba(31, 28, 24, 0.25);
}

.ch-facility-title {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 0.75rem;
	font-size: 1rem;
	color: var(--ch-ink);
}

.ch-facility-title::before {
	width: 2.25rem;
	height: 2.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 0.75rem;
	background-color: rgba(184, 92, 63, 0.1);
	font-size: 1rem;
}

.ch-facility-list.wp-block-list {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 2;
	column-gap: 1rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--ch-ink-70);
}

.ch-facility-list li {
	break-inside: avoid;
	padding: 0.2rem 0;
}

@media (min-width: 640px) {
	.ch-facility-card { padding: 1.75rem; }

	.ch-facility-title {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.25rem;
		font-size: 1.125rem;
	}

	.ch-facility-title::before {
		width: 2.75rem;
		height: 2.75rem;
		font-size: 1.125rem;
	}

	.ch-facility-list.wp-block-list {
		columns: 1;
		font-size: 0.875rem;
	}

	.ch-facility-list li { padding: 0.25rem 0; }
}

/* ---- Experience cards ---------------------------------------------------- */
.ch-exp-grid {
	display: grid;
	gap: 1.5rem;
}

@media (min-width: 768px) {
	.ch-exp-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 2rem;
	}
}

.ch-exp-card {
	overflow: hidden;
	border-radius: 1.5rem;
	background-color: #fff;
	border: 1px solid rgba(31, 28, 24, 0.05);
	box-shadow: 0 15px 40px -30px rgba(31, 28, 24, 0.25);
}

.ch-exp-card .ch-exp-img img,
.ch-exp-card .ch-exp-img.wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 5 / 4;
	height: auto;
	object-fit: cover;
	border-radius: 0;
	box-shadow: none;
}

@media (max-width: 767px) {
	.ch-exp-card .ch-exp-img img,
	.ch-exp-card .ch-exp-img.wp-block-image img { aspect-ratio: 16 / 9; }
}

.ch-exp-body { padding: 1.75rem; }

@media (min-width: 768px) {
	.ch-exp-body { padding: 2rem; }
}

.ch-exp-title {
	margin: 0 0 0.75rem;
	font-size: 1.25rem;
}

.ch-exp-title a { color: var(--ch-ink); text-decoration: none; }
.ch-exp-title a:hover { color: var(--ch-terra-text); }

.ch-exp-text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--ch-ink-70);
}

/* ---- Owners -------------------------------------------------------------- */
.ch-owner-grid {
	display: grid;
	gap: 1.5rem;
}

@media (min-width: 768px) {
	.ch-owner-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2.5rem;
	}
}

.ch-owner-card {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
	padding: 2rem;
	border-radius: 1.5rem;
	background-color: #fff;
	border: 1px solid rgba(31, 28, 24, 0.05);
	box-shadow: 0 15px 40px -30px rgba(31, 28, 24, 0.25);
}

@media (min-width: 768px) {
	.ch-owner-card { padding: 2.5rem; }
}

.ch-owner-initial {
	flex: 0 0 3.5rem;
	width: 3.5rem;
	height: 3.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	border-radius: 1rem;
	background-color: var(--ch-btn);
	color: #fff;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.25rem;
	font-weight: 600;
}

.ch-owner-initial-olive { background-color: var(--ch-olive); }

.ch-owner-body { min-width: 0; }

.ch-owner-name {
	margin: 0 0 0.5rem;
	font-size: 1.5rem;
}

.ch-owner-role {
	margin: 0 0 1rem;
	color: var(--ch-terra-text);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.ch-owner-text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--ch-ink-80);
}

.ch-owner-mail {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 1.25rem 0 0;
	font-size: 0.875rem;
	font-weight: 500;
}

.ch-owner-mail a { color: var(--ch-ink); text-decoration: none; }

/* Small phones: the initial sits above the text, so the owner's e-mail address gets the card's full
   width instead of breaking in the middle of the domain. */
@media (max-width: 479px) {
	.ch-owner-card {
		flex-direction: column;
		gap: 1rem;
		padding: 1.5rem;
	}
}

/* An e-mail address is one unbreakable word; in a flex row it would push past a phone's edge. The
   content marks a break point after the "@" (<wbr>), which wins over a break anywhere. */
.ch-owner-mail a,
.ch-contact-line a,
.ch-footer-contact a {
	min-width: 0;
	overflow-wrap: anywhere;
}
.ch-owner-mail a:hover { color: var(--ch-terra-text); }

/* ---- Availability (homepage: photo band + white panel; villa pages: panel) ---- */
.ch-avail.wp-block-cover {
	display: block;
	min-height: 0;
	padding: 5rem var(--ch-gutter);
	background-color: var(--ch-ink);
}

/* Phones: every pixel of width goes to the calendar. */
@media (max-width: 639px) {
	.ch-avail.wp-block-cover {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

@media (min-width: 768px) {
	.ch-avail.wp-block-cover { padding: 7rem 2.5rem; }
}

.wp-block-cover.ch-avail > .wp-block-cover__background.has-background-dim.has-background-dim-0 {
	opacity: 1;
	background: linear-gradient(180deg, rgba(31, 28, 24, 0.85) 0%, rgba(31, 28, 24, 0.78) 100%);
}

.ch-avail .wp-block-cover__inner-container {
	max-width: 94rem;
	margin: 0 auto;
	color: var(--ch-ink);
}

.ch-avail-head {
	max-width: 42rem;
	margin: 0 auto 2.5rem;
	text-align: center;
}

@media (min-width: 768px) {
	.ch-avail-head { margin-bottom: 3rem; }
}

.ch-avail-head .ch-eyebrow { color: var(--ch-peach); }
.ch-avail-head .ch-h2 { color: var(--ch-cream); }
.ch-avail-head .ch-lead { color: rgba(247, 244, 239, 0.85); }

@media (min-width: 1024px) {
	.ch-avail-head .ch-h2 { font-size: 2.75rem; }
}

.ch-avail-panel {
	max-width: 82rem;
	margin: 0 auto;
	padding: 1.25rem;
	border-radius: 1.5rem;
	background-color: var(--ch-cream-light);
	border: 1px solid rgba(31, 28, 24, 0.1);
	box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.55);
	color: var(--ch-ink);
	text-align: left;
}

@media (min-width: 768px) {
	.ch-avail-panel { padding: 2.5rem; }
}

.ch-avail-panel-page {
	max-width: none;
	background-color: #fff;
	box-shadow: var(--ch-shadow-card);
	border-color: rgba(31, 28, 24, 0.06);
}

.ch-villa-tabs {
	display: inline-flex;
	gap: 0.25rem;
	margin: 0 0 1.75rem;
	padding: 0.25rem;
	border-radius: 9999px;
	background-color: var(--ch-sand);
	max-width: 100%;
}

.ch-villa-tabs button {
	appearance: none;
	border: 0;
	margin: 0;
	padding: 0.7rem 1.25rem;
	border-radius: 9999px;
	background: transparent;
	color: var(--ch-ink-70);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
}

.ch-villa-tabs button[aria-selected="true"] {
	background-color: #fff;
	color: var(--ch-ink);
	box-shadow: 0 2px 8px rgba(31, 28, 24, 0.12);
}

.ch-villa-tabs button:focus-visible {
	outline: 2px solid var(--ch-terra);
	outline-offset: 2px;
}

/* Phones: the two tabs share the full width; with enlarged text a label wraps inside its own
   button instead of pushing the row past the screen edge. */
@media (max-width: 639px) {
	.ch-villa-tabs {
		display: flex;
		width: 100%;
	}

	.ch-villa-tabs button {
		flex: 1 1 0;
		min-width: 0;
		padding: 0.65rem 0.5rem;
		font-size: 0.875rem;
		white-space: normal;
	}
}

.ch-avail-villa[hidden] { display: none !important; }

.ch-avail-grid {
	display: grid;
	gap: 2rem;
}

@media (min-width: 1024px) {
	.ch-avail-grid {
		grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
		gap: 3rem;
		align-items: start;
	}
}

.ch-avail-title {
	margin: 0 0 0.5rem;
	font-size: 1.5rem;
}

.ch-avail-info .ch-location { margin-bottom: 0.25rem; }
.ch-avail-info .ch-small { margin-top: 1rem; }
.wp-block-buttons.ch-avail-actions { margin-top: 1.5rem; }

.ch-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.8125rem;
	color: var(--ch-ink-70);
}

.ch-legend li {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.ch-legend li::before {
	content: "";
	width: 1rem;
	height: 1rem;
	border-radius: 0.25rem;
}

.ch-legend-free::before { background-color: #eef2e7; border: 1px solid #c3cfb3; }
.ch-legend-busy::before { background-color: #ecd5ca; border: 1px solid #d4a893; }

.ch-price-note {
	margin: 1.25rem 0 0;
	padding: 1rem 1.25rem;
	border: 1px dashed rgba(31, 28, 24, 0.25);
	border-radius: 0.75rem;
	background-color: #fff;
	font-size: 0.9375rem;
	color: var(--ch-ink);
}

.ch-contact-line {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	margin: 0.75rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.ch-contact-line::before { margin-top: 0.2rem; width: 1rem; text-align: center; }
.ch-contact-line a { color: var(--ch-ink); text-decoration: none; }
.ch-contact-line a:hover { color: var(--ch-terra-text); }

/* MotoPress availability calendar, themed through its own CSS variables. */
.ch-cal .mphb-calendar {
	--mphb-available-date-bg: #eef2e7;
	--mphb-available-date-color: #1f1c18;
	--mphb-booked-date-bg: #ecd5ca;
	--mphb-booked-date-color: #7d3b27;
	--mphb-not-available-date-bg: #ecd5ca;
	--mphb-not-available-date-color: #7d3b27;
	--mphb-unselectable-date-color: #7d3b27;
	--mphb-out-of-season-date-bg: #efebe5;
	--mphb-out-of-season-date-color: #8a847c;
	font-family: var(--wp--preset--font-family--sans);
}

.ch-cal .mphb-calendar .datepick {
	width: 100% !important;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--ch-ink);
	font-size: 1rem;
}

.ch-cal .mphb-calendar .datepick-nav {
	float: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	margin: 0 0 0.75rem;
	background: transparent;
	color: var(--ch-ink);
	font-size: 0.875rem;
	font-weight: 600;
}

.ch-cal .mphb-calendar .datepick-nav a {
	float: none;
	width: auto;
	padding: 0.5rem 0.9rem;
	border: 1px solid rgba(31, 28, 24, 0.15);
	border-radius: 9999px;
	background-color: #fff;
	color: var(--ch-ink);
}

.ch-cal .mphb-calendar .datepick-nav a:hover {
	border-color: var(--ch-ink);
	background-color: #fff;
}

.ch-cal .mphb-calendar .datepick-nav a.datepick-disabled { opacity: 0.35; }

.ch-cal .mphb-calendar .datepick-month-row {
	display: flex;
	gap: 1.5rem;
}

@media (max-width: 639px) {
	.ch-cal .mphb-calendar .datepick-month-row {
		flex-direction: column;
		gap: 1.25rem;
	}
}

.ch-cal .mphb-calendar .datepick-month {
	float: none;
	flex: 1 1 0;
	width: auto !important;
	min-width: 0;
	border: 0;
}

.ch-cal .mphb-calendar .datepick-month-header,
.ch-cal .mphb-calendar .datepick-month-header select {
	background: transparent;
	color: var(--ch-ink);
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.125rem;
	font-weight: 500;
	text-transform: capitalize;
}

.ch-cal .mphb-calendar .datepick-month-header { padding: 0.25rem 0 0.75rem; }

.ch-cal .mphb-calendar .datepick-month table {
	width: 100%;
	table-layout: fixed; /* seven equal day columns; the auto layout sized them by their letters (MA, WO wider) */
	border-collapse: separate;
	border-spacing: 3px;
}

.ch-cal .mphb-calendar .datepick-month thead { border: 0; }

.ch-cal .mphb-calendar .datepick-month th,
.ch-cal .mphb-calendar .datepick-month th a,
.ch-cal .mphb-calendar .datepick-month th span {
	border: 0;
	background: transparent;
	color: var(--ch-ink-70);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
}

.ch-cal .mphb-calendar .datepick-month th { padding: 0.25rem 0 0.5rem; }

.ch-cal .mphb-calendar .datepick-month td {
	border: 0;
	background: transparent;
}

.ch-cal .mphb-calendar .datepick-month td > span,
.ch-cal .mphb-calendar .datepick-month td > a {
	display: block;
	width: 100%;
	padding: 0.45rem 0;
	border-radius: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
}

.ch-cal .mphb-calendar .datepick-month td .datepick-other-month {
	visibility: hidden;
	background: transparent;
}

.ch-cal .mphb-calendar td .mphb-booked-date,
.ch-cal .mphb-calendar td .mphb-mark-as-unavailable { text-decoration: line-through; }

.ch-cal .mphb-calendar td .mphb-past-date {
	opacity: 0.35;
	background: transparent;
	text-decoration: none;
}

.ch-cal .mphb-calendar .datepick-month td .datepick-today {
	box-shadow: inset 0 0 0 2px var(--ch-terra);
}

.ch-cal .mphb-calendar .datepick-ctrl { display: none; }

/* ---- Intro (villa pages), locations, other-villa band -------------------- */
.ch-intro-grid {
	display: grid;
	gap: 2.5rem;
	align-items: center;
}

@media (min-width: 1024px) {
	.ch-intro-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 4rem;
	}

	.ch-intro-grid-reverse > .ch-intro-img { order: -1; }
}

.ch-intro-text .ch-lead + .ch-lead { margin-top: 1rem; }

.ch-intro-img img,
.ch-intro-img.wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: cover;
	border-radius: 1.5rem;
	box-shadow: var(--ch-shadow-card);
}

.wp-block-buttons.ch-intro-actions { margin-top: 2rem; }

.ch-section-head .ch-lead + .ch-lead { margin-top: 1rem; }

/* Gallery (core wp:gallery; core ships its rules with :not(#individual-image), so these match
   that specificity). */
.ch-gallery.wp-block-gallery.has-nested-images {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	margin: 0;
}

@media (min-width: 768px) {
	.ch-gallery.wp-block-gallery.has-nested-images { gap: 1rem; }
}

@media (min-width: 1024px) {
	.ch-gallery.wp-block-gallery.has-nested-images:has(> figure:nth-child(5)) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.ch-gallery.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
	width: auto;
	margin: 0;
}

.ch-gallery.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0.75rem;
	box-shadow: none;
}

/* Amenities: two columns on phones (compact), up to four on desktop. */
.ch-amenities.wp-block-list {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 2;
	column-gap: 1.25rem;
}

@media (min-width: 768px) {
	.ch-amenities.wp-block-list { columns: 3; column-gap: 2rem; }
}

@media (min-width: 1024px) {
	.ch-amenities.wp-block-list { columns: 4; }
}

.ch-amenities li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	break-inside: avoid;
	padding: 0.4rem 0;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--ch-ink-80);
}

.ch-amenities li::before {
	content: "\f00c";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 0.75rem;
	margin-top: 0.3rem;
	color: var(--ch-olive);
	flex-shrink: 0;
}

.ch-other-grid {
	display: grid;
	gap: 2rem;
	align-items: center;
}

@media (min-width: 1024px) {
	.ch-other-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 4rem;
	}
}

.ch-other-img img,
.ch-other-img.wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	height: auto;
	object-fit: cover;
	border-radius: 1.25rem;
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5);
}

.wp-block-buttons.ch-other-actions { margin-top: 2rem; }

/* ---- Region pages -------------------------------------------------------- */
.ch-place-row {
	display: grid;
	gap: 1.75rem;
	align-items: center;
	padding: 3rem 0;
	border-top: 1px solid rgba(31, 28, 24, 0.1);
}

@media (min-width: 1024px) {
	.ch-place-row {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: 4rem;
		padding: 4rem 0;
	}

	/* Every second row mirrors (layout only; the rows are the section's children 2..n). */
	.ch-place-row:nth-child(odd) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
	.ch-place-row:nth-child(odd) > .ch-place-row-text { order: 2; }
}

.ch-place-row-text .ch-eyebrow { margin-bottom: 0.75rem; }

.ch-place-row-text p:not(.ch-eyebrow) {
	margin: 0 0 1rem;
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--ch-ink-80);
}

.ch-place-row-text p:last-child { margin-bottom: 0; }
.ch-place-row-text a { color: var(--ch-terra-text); }

.ch-place-row-media {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
}

@media (min-width: 768px) {
	.ch-place-row-media { gap: 1rem; }
}

.ch-place-row-media-single { grid-template-columns: 1fr; }

.ch-pair-img img,
.ch-pair-img.wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 1rem;
	box-shadow: none;
}

.ch-place-row-media-single .ch-pair-img img { aspect-ratio: 16 / 9; }

.ch-exp-block {
	padding: 2.5rem 0;
	border-top: 1px solid rgba(31, 28, 24, 0.12);
}

.ch-exp-block-title {
	margin: 0;
	font-size: 1.5rem;
}

@media (min-width: 768px) {
	.ch-exp-block-title { font-size: 1.875rem; }
}

.ch-exp-block p {
	margin: 0 0 1rem;
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--ch-ink-80);
}

.ch-exp-block p:last-child { margin-bottom: 0; }

.ch-cta-band-inner { text-align: center; }
.ch-cta-band .ch-lead { margin-left: auto; margin-right: auto; max-width: 40rem; }

.wp-block-buttons.ch-cta-actions {
	justify-content: center;
	margin-top: 2rem;
}

/* ---- Contact ------------------------------------------------------------- */
.ch-contact-grid {
	display: grid;
	gap: 2rem;
}

@media (min-width: 1024px) {
	.ch-contact-grid {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		gap: 2.5rem;
		align-items: start;
	}
}

.ch-contact-card {
	padding: 2rem;
	border-radius: 1.5rem;
	background-color: var(--ch-forest);
	color: rgba(247, 244, 239, 0.85);
}

@media (min-width: 768px) {
	.ch-contact-card { padding: 2.5rem; }
}

.ch-contact-card .ch-eyebrow { color: var(--ch-peach); }

.ch-contact-title {
	margin: 0 0 1.5rem;
	font-size: 1.5rem;
	line-height: 1.25;
	color: var(--ch-ink);
}

.ch-contact-card .ch-contact-title { color: var(--ch-cream); }
.ch-contact-card .ch-contact-line { color: rgba(247, 244, 239, 0.9); }
.ch-contact-card .ch-contact-line::before { color: var(--ch-peach); }
.ch-contact-card .ch-contact-line a { color: var(--ch-cream); }
.ch-contact-card .ch-contact-line a:hover { color: var(--ch-peach); }

.ch-contact-note {
	margin: 1.75rem 0 0;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(247, 244, 239, 0.15);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.ch-contact-note a { color: var(--ch-cream); text-underline-offset: 0.2em; }

.ch-form-card {
	padding: 1.5rem;
	border-radius: 1.5rem;
	background-color: #fff;
	border: 1px solid rgba(31, 28, 24, 0.06);
	box-shadow: var(--ch-shadow-card);
}

@media (min-width: 768px) {
	.ch-form-card { padding: 2.5rem; }
}

/* Contact Form 7, styled like the demo's form controls. */
.ch-form-grid {
	display: grid;
	gap: 1.25rem;
}

@media (min-width: 640px) {
	.ch-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ch-form-grid .ch-field { margin: 0; min-width: 0; }
.ch-form-grid .ch-field-full { grid-column: 1 / -1; }

.ch-form-grid .ch-field > label {
	display: block;
	margin: 0 0 0.5rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--ch-ink);
}

.wpcf7 .ch-field input[type="text"],
.wpcf7 .ch-field input[type="email"],
.wpcf7 .ch-field input[type="tel"],
.wpcf7 .ch-field select,
.wpcf7 .ch-field textarea {
	width: 100%;
	height: 52px;
	padding: 0 1rem;
	border: 1px solid rgba(31, 28, 24, 0.22);
	border-radius: 12px;
	background-color: #fff;
	color: var(--ch-ink);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wpcf7 .ch-field textarea {
	height: auto;
	min-height: 9rem;
	padding: 0.875rem 1rem;
	resize: vertical;
}

.wpcf7 .ch-field select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.5rem;
	background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231F1C18' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 12px 8px;
}

.wpcf7 .ch-field input::placeholder,
.wpcf7 .ch-field textarea::placeholder { color: rgba(31, 28, 24, 0.5); }

.wpcf7 .ch-field input:focus,
.wpcf7 .ch-field select:focus,
.wpcf7 .ch-field textarea:focus {
	outline: none;
	border-color: var(--ch-terra);
	box-shadow: 0 0 0 3px rgba(184, 92, 63, 0.18);
}

.ch-consent .wpcf7-list-item { margin: 0; }

.ch-consent label {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--ch-ink-80);
	cursor: pointer;
}

.ch-consent input[type="checkbox"] {
	width: 1.125rem;
	height: 1.125rem;
	margin: 0.15rem 0 0;
	accent-color: var(--ch-btn);
	flex-shrink: 0;
}

.ch-consent a { color: var(--ch-terra-text); }

.ch-form-actions {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(31, 28, 24, 0.1);
}

.wpcf7 .ch-form-actions input[type="submit"] {
	width: 100%;
	padding: 1rem 1.75rem;
	border-radius: 1rem;
	background-color: var(--ch-btn);
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	box-shadow: none;
}

.wpcf7 .ch-form-actions input[type="submit"]:hover {
	background-color: var(--ch-btn-hover);
	transform: none;
}

.ch-form-note {
	margin: 1rem 0 0;
	font-size: 0.8125rem;
	color: var(--ch-ink-70);
	text-align: center;
}

.wpcf7 .ch-field .wpcf7-not-valid-tip,
.wpcf7 .ch-consent .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.375rem;
	color: #a3321b;
	font-size: 0.8125rem;
	font-weight: 500;
}

.wpcf7 form .wpcf7-response-output {
	margin: 1.25rem 0 0;
	padding: 0.875rem 1rem;
	border-radius: 0.75rem;
	font-size: 0.9rem;
}

/* ---- Privacy (prose) and 404 --------------------------------------------- */
.ch-prose { max-width: 48rem; }

.ch-prose h2 {
	margin: 2.5rem 0 0.75rem;
	font-size: 1.5rem;
	color: var(--ch-ink);
}

.ch-prose p,
.ch-prose li {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--ch-ink-80);
}

.ch-prose p { margin: 0 0 1rem; }
.ch-prose .ch-small { font-size: 0.875rem; }
.ch-prose ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.ch-prose li + li { margin-top: 0.5rem; }
.ch-prose a { color: var(--ch-terra-text); }

.ch-404 {
	padding: 4rem 0 6rem;
	text-align: center;
}

.ch-404-code {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(5rem, 18vw, 9rem);
	line-height: 1;
	color: rgba(31, 28, 24, 0.14);
}

.ch-404 .ch-h2 { margin-top: 0.5rem; }
.ch-404 .ch-lead { margin-left: auto; margin-right: auto; max-width: 36rem; }

.ch-404-search {
	max-width: 28rem;
	margin: 2rem auto 0;
}

.ch-404-search .wp-block-search__input {
	border: 1px solid rgba(31, 28, 24, 0.22);
	border-radius: 9999px;
	padding: 0.75rem 1.25rem;
	background-color: #fff;
}

.ch-404-search .wp-block-search__button {
	border-radius: 9999px;
	background-color: var(--ch-ink);
	color: var(--ch-cream-light);
	padding: 0.75rem 1.25rem;
	border: 0;
	margin-left: 0.5rem;
}

.wp-block-buttons.ch-404-actions {
	justify-content: center;
	margin-top: 2rem;
}

/* ---- Footer -------------------------------------------------------------- */
.site-footer.ch-footer {
	padding: 4rem var(--ch-gutter) 2.5rem;
	border-top: 0;
	background-color: var(--ch-ink);
	color: rgba(247, 244, 239, 0.7);
}

@media (min-width: 768px) {
	.site-footer.ch-footer { padding: 5rem 2.5rem 2.5rem; }
}

.ch-footer-grid {
	display: grid;
	gap: 2.5rem;
	max-width: 100rem;
	margin: 0 auto;
	padding-bottom: 3.5rem;
	border-bottom: 1px solid rgba(247, 244, 239, 0.15);
}

@media (min-width: 768px) {
	.ch-footer-grid {
		grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr);
		gap: 3rem;
	}
}

.site-footer.ch-footer .ch-footer-name {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.5rem;
	letter-spacing: -0.01em;
	color: var(--ch-cream);
	text-decoration: none;
}

.ch-footer-brand p {
	max-width: 28rem;
	margin: 1.25rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: rgba(247, 244, 239, 0.7);
}

.site-footer.ch-footer .ch-footer-title {
	margin: 0 0 1.25rem;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ch-cream);
}

.ch-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ch-footer-villas li + li { margin-top: 1rem; }

.site-footer.ch-footer .ch-footer-villas a {
	font-size: 0.9375rem;
	color: rgba(247, 244, 239, 0.85);
	text-decoration: none;
}

.ch-footer-villas span {
	display: block;
	font-size: 0.875rem;
	color: rgba(247, 244, 239, 0.6);
}

.ch-footer-contact li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-size: 0.9375rem;
	color: rgba(247, 244, 239, 0.8);
}

.ch-footer-contact li + li { margin-top: 0.75rem; }

.ch-footer-contact i {
	width: 1rem;
	margin-top: 0.25rem;
	color: var(--ch-peach);
	text-align: center;
}

.site-footer.ch-footer .ch-footer-contact a {
	color: rgba(247, 244, 239, 0.85);
	text-decoration: none;
}

.site-footer.ch-footer a:hover { color: var(--ch-peach); }

.site-footer.ch-footer .ch-footer-cta {
	display: inline-flex;
	margin-top: 1.5rem;
	padding: 0.75rem 1.25rem;
	border-radius: 9999px;
	background-color: var(--ch-btn);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

.site-footer.ch-footer .ch-footer-cta:hover {
	background-color: var(--ch-btn-hover);
	color: #fff;
}

.ch-footer-bottom {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-width: 100rem;
	margin: 0 auto;
	padding-top: 2rem;
	font-size: 0.875rem;
	color: rgba(247, 244, 239, 0.6);
}

@media (min-width: 768px) {
	.ch-footer-bottom {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
}

.ch-footer-bottom p { margin: 0; }

.ch-footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
}

.site-footer.ch-footer .ch-footer-links a {
	color: rgba(247, 244, 239, 0.75);
	text-decoration: none;
}


/* An open mobile menu over a photo hero: the bar turns solid so logo and close button stay legible. */
body:has(.ch-hero) .site-header:not(.scrolled):has(.nav-mobile-panel.open)::before {
	background-color: rgba(255, 255, 255, 0.98);
	border-bottom-color: var(--color-grey-200);
}

body:has(.ch-hero) .site-header:not(.scrolled):has(.nav-mobile-panel.open) .ch-logo .ch-logo-colour { display: block; }
body:has(.ch-hero) .site-header:not(.scrolled):has(.nav-mobile-panel.open) .ch-logo .ch-logo-white { display: none; }
body:has(.ch-hero) .site-header.ch-header:not(.scrolled):has(.nav-mobile-panel.open) .nav-mobile-toggle { color: var(--ch-ink); }

/* ---- Search results (templates/search.html) ------------------------------ */
.ch-search {
	padding: 4rem 0 6rem;
}

.ch-search .wp-block-query-title { margin: 0; }
.ch-search .ch-search-form { margin: 1.5rem 0 2.5rem; max-width: 36rem; }

.ch-search-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ch-search-list > li {
	padding: 1.5rem 0;
	border-top: 1px solid rgba(31, 28, 24, 0.12);
}

.ch-search-title {
	margin: 0 0 0.5rem;
	font-size: 1.375rem;
}

.ch-search-title a { color: var(--ch-ink); text-decoration: none; }
.ch-search-title a:hover { color: var(--ch-terra-text); }

.ch-search-excerpt p {
	margin: 0;
	color: var(--ch-ink-80);
	line-height: 1.65;
}

.ch-search .wp-block-query-no-results .ch-404-actions { justify-content: flex-start; }

/* The open mobile menu never runs past the bottom of the screen: it scrolls inside itself.
   On a phone held landscape (a short screen) the links sit in three columns, so the whole menu and its
   "Reserveren" button fit without scrolling (qa-nav-mobile at 780x300, 24 Sep 2026). */
.ch-header .nav-mobile-panel {
	max-height: calc(100vh - var(--header-h));
	max-height: calc(100dvh - var(--header-h));
	overflow-y: auto;
	overscroll-behavior: contain;
}

@media (max-width: 1023px) and (max-height: 500px) {
	.ch-header .nav-mobile-panel nav {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0.25rem 0.5rem;
	}
}

/* =================================================================================================
   REVISION 1 (29 Sep 2026): Eric and Wil's feedback of 29 Sep 2026.
   revisions\revision 1\FEEDBACK.md in the reference folder has every item and its source line.
   ================================================================================================= */

:root {
	/* Footer: Eric asked for a lighter colour, "(donker)blauw zoals 3c80aa". #3c80aa itself gives white
	   text 4.3:1 and cream 3.9:1, under the 4.5:1 body text needs; #306688 is the same hue a step darker
	   and carries cream text at 85% opacity at 4.6:1 (100%: 5.7:1). */
	--ch-footer: #306688;
}

/* Headings are Manrope since revision 1 (theme.json, slug "serif"). At the 500 that suited Lora the
   sans headings looked thin next to Poppins. */
h1, h2, h3, h4, h5, h6 {
	font-weight: 600;
	letter-spacing: -0.015em;
}

/* Header: "Puglia ontdekken" and "Calabrië ontdekken" are longer than the old labels; the band just above
   the nav breakpoint gets a tighter gap so the row still fits at 1024px (Header checklist #10). */
@media (min-width: 1024px) and (max-width: 1199px) {
	.ch-header .nav-desktop { gap: 1.25rem; }
}

/* The open mobile menu hides the page's sticky booking bar (starter 1.3.0; header.js sets html.nav-open). */
html.nav-open .sticky-cta { display: none; }

/* ---- Footer: blue, with Instagram ------------------------------------------ */
.site-footer.ch-footer {
	background-color: var(--ch-footer);
	color: rgba(247, 244, 239, 0.9);
}

.ch-footer-grid { border-bottom-color: rgba(247, 244, 239, 0.25); }
.ch-footer-brand p { color: rgba(247, 244, 239, 0.9); }
.site-footer.ch-footer .ch-footer-villas a { color: #fff; }
.ch-footer-villas span { color: rgba(247, 244, 239, 0.85); }
.ch-footer-contact li { color: rgba(247, 244, 239, 0.9); }
.site-footer.ch-footer .ch-footer-contact a { color: #fff; }
.ch-footer-bottom { color: rgba(247, 244, 239, 0.85); }
.site-footer.ch-footer .ch-footer-links a { color: rgba(247, 244, 239, 0.9); }

/* Peach on the blue footer is below 4.5:1, so link hovers turn white and underlined instead. */
.site-footer.ch-footer a:hover {
	color: #fff;
	text-decoration: underline;
}

.site-footer.ch-footer .ch-footer-cta:hover { text-decoration: none; }

.ch-footer .ch-footer-social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 1.5rem 0 0; /* .ch-footer ul resets every footer list to margin 0 */
	padding: 0;
	list-style: none;
}

.site-footer.ch-footer .ch-footer-social a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.45rem 0.95rem 0.45rem 0.75rem;
	border: 1px solid rgba(247, 244, 239, 0.5);
	border-radius: 9999px;
	color: #fff;
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
}

.site-footer.ch-footer .ch-footer-social a:hover {
	background-color: rgba(255, 255, 255, 0.12);
	text-decoration: none;
}

.ch-footer-social svg { flex-shrink: 0; }

/* ---- Availability: prices, closed periods, one month on phones --------------- */

/* Eric: "In mobiele versie vind ik 2 maanden bij beschikbaarheid iets teveel". The plugin still draws two
   months and its arrows step one month at a time, so on phones the second month is simply not shown. */
@media (max-width: 767px) {
	.ch-cal .mphb-calendar .datepick-month-row .datepick-month + .datepick-month { display: none; }
}

/* Closed periods and dates past the price list have no rate: the plugin marks them out of season.
   Grey with dark grey text (5.8:1), set apart from the pink "Bezet" of a blocked stay. */
.ch-cal .mphb-calendar {
	--mphb-out-of-season-date-bg: #efebe5;
	--mphb-out-of-season-date-color: #5e5a55;
}

.ch-legend-closed::before { background-color: #efebe5; border: 1px solid #d6cfc4; }

/* The per-night price under the day number (mphb_room_type_calendar_show_prices, revision 1). */
.ch-cal .mphb-calendar .datepick-month td span .mphb-date-cell__price,
.ch-cal .mphb-calendar .datepick-month td a .mphb-date-cell__price {
	display: block;
	margin: 0.1rem 0 0;
	font-size: 0.625rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.ch-cal .mphb-calendar .datepick-month td > span,
.ch-cal .mphb-calendar .datepick-month td > a { padding: 0.4rem 0 0.35rem; }

/* The price line was a dashed placeholder box; it now carries the real "vanaf" price. */
.ch-price-note {
	border: 1px solid rgba(31, 28, 24, 0.1);
	background-color: #fff;
}

.wp-block-table.ch-price-table {
	margin: 1.25rem 0 0;
	overflow-x: visible;
}

.wp-block-table.ch-price-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
	line-height: 1.4;
}

.wp-block-table.ch-price-table thead { border-bottom: 0; }

.wp-block-table.ch-price-table th,
.wp-block-table.ch-price-table td {
	padding: 0.5rem 0.25rem;
	border: 0;
	border-bottom: 1px solid rgba(31, 28, 24, 0.1);
	text-align: left;
	vertical-align: top;
}

.wp-block-table.ch-price-table thead th {
	border-bottom: 1px solid rgba(31, 28, 24, 0.25);
	color: var(--ch-ink-70);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.wp-block-table.ch-price-table th:first-child { width: 50%; }

.wp-block-table.ch-price-table th:not(:first-child),
.wp-block-table.ch-price-table td:not(:first-child) {
	text-align: right;
	white-space: nowrap;
}

/* Small phones: the column heads may wrap, so "PER NACHT" no longer runs past the table's edge at 360px. */
@media (max-width: 479px) {
	.wp-block-table.ch-price-table table { font-size: 0.8125rem; }
	.wp-block-table.ch-price-table thead th { letter-spacing: 0.03em; }
	.wp-block-table.ch-price-table thead th:not(:first-child) { white-space: normal; }
	.wp-block-table.ch-price-table th:first-child { width: 46%; }
}

.ch-price-terms.wp-block-list {
	margin: 1rem 0 0;
	padding: 0 0 0 1.1rem;
	color: var(--ch-ink-80);
	font-size: 0.875rem;
	line-height: 1.55;
}

.ch-price-terms li + li { margin-top: 0.35rem; }

/* ---- Carousels ---------------------------------------------------------------
   Villa pages: the intro photo became a photo carousel (Eric: the "Indeling" photos looked messy; one
   photo at a time, swipe). Puglia: the Belevingen cards (Eric: like the carousel on his current site).
   Both are core blocks (a Gallery, a Group of cards), so the owner edits them in the editor. Swiping is
   CSS scroll-snap; assets/js/site.js adds the arrows and dots, hides them when nothing scrolls, and makes
   the strip reachable by keyboard. Without JavaScript the strip still scrolls. */
.ch-carousel-wrap {
	position: relative;
	min-width: 0;
}

.wp-block-gallery.has-nested-images.ch-carousel,
.wp-block-group.ch-carousel {
	position: relative; /* the items' offsetLeft is measured from the strip (site.js) */
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.ch-carousel::-webkit-scrollbar { display: none; }

.wp-block-gallery.has-nested-images.ch-carousel-photos {
	gap: 0;
	margin: 0;
	border-radius: 1.5rem;
	box-shadow: var(--ch-shadow-card);
}

.wp-block-gallery.has-nested-images.ch-carousel-photos figure.wp-block-image:not(#individual-image) {
	flex: 0 0 100%;
	width: 100%;
	margin: 0;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.wp-block-gallery.has-nested-images.is-cropped.ch-carousel-photos figure.wp-block-image:not(#individual-image) img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0;
	box-shadow: none;
}

.wp-block-group.ch-carousel-cards {
	gap: 1.25rem;
	align-items: stretch;
	margin: 0 -0.25rem;
	padding: 0.25rem 0.25rem 1.5rem;
	scroll-padding-inline: 0.25rem;
}

.ch-carousel-cards > .ch-exp-card {
	flex: 0 0 86%;
	min-width: 0;
	scroll-snap-align: start;
}

@media (min-width: 640px) {
	.ch-carousel-cards > .ch-exp-card { flex-basis: calc((100% - 1.25rem) / 2); }
}

@media (min-width: 1024px) {
	.wp-block-group.ch-carousel-cards { gap: 1.5rem; }
	.ch-carousel-cards > .ch-exp-card { flex-basis: calc((100% - 3rem) / 3); }
}

.ch-carousel-cards .ch-exp-card .ch-exp-img img,
.ch-carousel-cards .ch-exp-card .ch-exp-img.wp-block-image img { aspect-ratio: 3 / 2; }

.ch-carousel:focus-visible {
	outline: 2px solid var(--ch-terra);
	outline-offset: 4px;
}

.ch-carousel-ui {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 0.75rem;
}

.ch-carousel-ui[hidden] { display: none; }

.ch-carousel-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid rgba(31, 28, 24, 0.15);
	border-radius: 9999px;
	background-color: #fff;
	color: var(--ch-ink);
	box-shadow: 0 6px 16px -8px rgba(31, 28, 24, 0.45);
	cursor: pointer;
}

.ch-carousel-btn svg {
	width: 1.125rem;
	height: 1.125rem;
}

.ch-carousel-btn:hover:not([aria-disabled="true"]) { border-color: var(--ch-ink); }

.ch-carousel-btn[aria-disabled="true"] {
	opacity: 0.4;
	cursor: default;
}

.ch-carousel-dots {
	display: flex;
	align-items: center;
}

.ch-carousel-dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.ch-carousel-dot::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 9999px;
	background-color: rgba(31, 28, 24, 0.3);
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.ch-carousel-dot[aria-current="true"]::before {
	background-color: var(--ch-ink);
	transform: scale(1.3);
}

.ch-carousel-btn:focus-visible,
.ch-carousel-dot:focus-visible {
	outline: 2px solid var(--ch-terra);
	outline-offset: 2px;
}

/* Photo carousel: the arrows sit on the photo, the dots on a dark pill at its bottom edge. */
.ch-carousel-wrap-photos .ch-carousel-ui {
	position: absolute;
	inset: 0;
	display: block;
	margin: 0;
	pointer-events: none;
}

.ch-carousel-wrap-photos .ch-carousel-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: auto;
}

.ch-carousel-wrap-photos .ch-carousel-prev { left: 0.75rem; }
.ch-carousel-wrap-photos .ch-carousel-next { right: 0.75rem; }

.ch-carousel-wrap-photos .ch-carousel-dots {
	position: absolute;
	left: 50%;
	bottom: 0.75rem;
	padding: 0 0.25rem;
	border-radius: 9999px;
	background-color: rgba(31, 28, 24, 0.45);
	transform: translateX(-50%);
	pointer-events: auto;
}

.ch-carousel-wrap-photos .ch-carousel-dot::before { background-color: rgba(255, 255, 255, 0.65); }
.ch-carousel-wrap-photos .ch-carousel-dot[aria-current="true"]::before { background-color: #fff; }

@media (prefers-reduced-motion: reduce) {
	.ch-carousel-dot::before { transition: none; }
}

/* "Meer over …" in a Belevingen card: a core Details block with the owners' full text. */
.wp-block-details.ch-exp-more { margin-top: 1rem; }

.wp-block-details.ch-exp-more > summary {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--ch-terra-text);
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.wp-block-details.ch-exp-more > summary::-webkit-details-marker { display: none; }

.wp-block-details.ch-exp-more > summary::after {
	content: "";
	width: 0.45rem;
	height: 0.45rem;
	margin-top: -0.2rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}

.wp-block-details.ch-exp-more[open] > summary::after {
	margin-top: 0.2rem;
	transform: rotate(-135deg);
}

.wp-block-details.ch-exp-more > summary:focus-visible {
	outline: 2px solid var(--ch-terra);
	outline-offset: 3px;
	border-radius: 0.25rem;
}

.wp-block-details.ch-exp-more p {
	margin: 0.75rem 0 0;
	color: var(--ch-ink-70);
	font-size: 0.9375rem;
	line-height: 1.65;
}

/* ---- Location map (villa pages) ----------------------------------------------
   Eric: the location on a map instead of a photo and a Google Maps link, with the card on the map as on his
   printscreen. A static map image (OpenStreetMap, credited on the map), not an embedded Google map: an embed
   sets cookies and would need a cookie banner (08 §2.2). A core Cover block: the map is its background image
   (with its alt text), the card and the credit are its content, so the editor shows the card on the map as
   the site does. The route link opens Google Maps only on a click. */
.wp-block-cover.ch-map {
	min-height: 0;
	aspect-ratio: 4 / 3;
	padding: 0;
	border-radius: 1.5rem;
	box-shadow: var(--ch-shadow-card);
}

.wp-block-cover.ch-map > .wp-block-cover__inner-container {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	padding: 1rem;
	color: var(--ch-ink);
}

.ch-map .ch-map-credit {
	position: absolute;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 0.2rem 0.55rem;
	border-top-left-radius: 0.5rem;
	background-color: rgba(255, 255, 255, 0.88);
	color: var(--ch-ink);
	font-size: 0.6875rem;
	line-height: 1.4;
}

.ch-map .ch-map-credit a { color: inherit; }

.wp-block-group.ch-map-card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 0.85rem;
	align-items: center;
	width: max-content;
	max-width: 100%;
	margin: 0;
	padding: 0.8rem 1.1rem 0.8rem 0.8rem;
	border-radius: 1rem;
	background-color: #fff;
	box-shadow: 0 14px 34px -14px rgba(31, 28, 24, 0.5);
}

.ch-map-card::before {
	content: "\f015";
	grid-row: 1 / span 4;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 9999px;
	background-color: var(--ch-btn);
	color: #fff;
	font-family: "Font Awesome 6 Free";
	font-size: 1rem;
	font-weight: 900;
}

.ch-map-card p {
	grid-column: 2;
	margin: 0;
}

.ch-map-label {
	color: var(--ch-ink-70);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ch-map-name {
	color: var(--ch-ink);
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.25;
}

.ch-map-place {
	color: var(--ch-ink-70);
	font-size: 0.8125rem;
}

.ch-map-card .ch-map-route {
	margin-top: 0.3rem;
	font-size: 0.8125rem;
	font-weight: 600;
}

.ch-map-route a { color: var(--ch-terra-text); }

/* Phones: a square map, and the card small in its lower-left corner, so the map stays readable. */
@media (max-width: 639px) {
	.wp-block-cover.ch-map { aspect-ratio: 1 / 1; }

	.wp-block-cover.ch-map > .wp-block-cover__inner-container {
		align-items: flex-end;
		justify-content: flex-start;
		padding: 0.75rem 0.75rem 2rem;
	}

	.wp-block-group.ch-map-card {
		padding: 0.6rem 0.85rem 0.6rem 0.6rem;
		column-gap: 0.65rem;
	}

	.ch-map-card::before {
		width: 2rem;
		height: 2rem;
		font-size: 0.8125rem;
	}

	.ch-map-label { font-size: 0.625rem; }
	.ch-map-name { font-size: 1rem; }
	.ch-map-place,
	.ch-map-card .ch-map-route { font-size: 0.75rem; }
}

/* The contact page's single column on phones and tablets (revision 1, 29 Sep 2026). An `auto` column grew to
   the longest unbreakable word, so with enlarged text (130%) both cards ran 14px past the screen edge, where
   the body's overflow clip cut them off. Now the column is the container's width and a long word wraps. */
@media (max-width: 1023px) {
	.ch-contact-grid { grid-template-columns: minmax(0, 1fr); }
}

/* The consent checkbox shows where the keyboard is (revision 1): Safari drew no focus ring on it. */
.wpcf7 input[type="checkbox"]:focus-visible,
.wpcf7 input[type="radio"]:focus-visible {
	outline: 2px solid var(--ch-terra);
	outline-offset: 2px;
}

/* An e-mail address breaks after its "@", not inside "countryhouses-italy.com" (revision 1). The domain
   (wrapped by ch_mail_domain_wrap() in functions.php) moves to the next line whole, and still wraps inside
   itself when enlarged text makes it wider than the line. An atomic inline takes no underline from its
   link, so it draws its own. */
.ch-mail-domain {
	display: inline-block;
	max-width: 100%;
	text-decoration: inherit;
}

/* A phone number in running text stays on one line (revision 1): the privacy page broke "+31 493" | "690 910".
   The contact card's flex lines keep their own wrapping. */
.wp-block-post-content p:not(.ch-contact-line) a[href^="tel:"] { white-space: nowrap; }

/* =================================================================================================
   REVISION 1.1 (1 Oct 2026): Codex's review of revision 1.
   revisions
evision 1\correction-plan-2026-09-30.md in the reference folder has every item.
   ================================================================================================= */

/* Nights without a price (site.js, ch_calendar_closures() in functions.php). Eric's two winter closures keep
   the grey "Gesloten"; any other night without a price reads "Nog geen prijzen": white with a dashed outline.
   Set through MotoPress's own out-of-season colours on the cell, so a half-day cell paints its unpriced half
   the same way. Dark grey on white is 6.9:1. */
.ch-cal .mphb-calendar .datepick-month td .ch-no-rates-date {
	--mphb-out-of-season-date-bg: #ffffff;
	--mphb-out-of-season-date-color: #5e5a55;
}

.ch-cal .mphb-calendar .datepick-month td .ch-no-rates-date.mphb-out-of-season-date {
	outline: 1px dashed #a39b90;
	outline-offset: -2px;
}

.ch-legend-norates::before { background-color: #ffffff; border: 1px dashed #a39b90; }

/* The line under the legend that says what "Nog geen prijzen" means: a legend alone leaves a phone visitor,
   who has no hover title, guessing. */
.ch-legend-note {
	margin: 0.5rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--ch-ink-70);
}

/* =================================================================================================
   REVISION 2 (8 Oct 2026): Eric and Wil's mails of 5 and 6 Oct 2026.
   revisions/revision 2/FEEDBACK.md in the reference folder has every item and its source line.
   ================================================================================================= */

/* ---- Item 1: smaller text and headings ---------------------------------------
   Eric: the 18px paragraph text felt large next to the photos and headings ("Is 15px niet beter of een kortere
   alinea-afstand?") and the headings may be a little smaller. Body text 16px with less space between paragraphs
   (both of his options, at the size the inputs already use for readability on phones); headings one step down. */
.ch-lead {
	font-size: 1rem;
	line-height: 1.65;
	margin-top: 1rem;
}

.ch-place-row-text p:not(.ch-eyebrow),
.ch-exp-block p,
.ch-prose p,
.ch-prose li {
	font-size: 1rem;
	line-height: 1.7;
}

.ch-place-row-text p:not(.ch-eyebrow),
.ch-exp-block p,
.ch-prose p { margin-bottom: 0.85rem; }

.ch-hero-lead { font-size: 1rem; }

@media (min-width: 768px) {
	.ch-hero-lead { font-size: 1.125rem; }
}

.ch-h2 { font-size: 1.75rem; }

@media (min-width: 768px) {
	.ch-h2 { font-size: 2rem; }
}

@media (min-width: 1024px) {
	.ch-h2 { font-size: 2.625rem; }
	.ch-h2-story,
	.ch-avail-head .ch-h2 { font-size: 2.5rem; }
}

.ch-h3 { font-size: 1.5rem; }

@media (min-width: 768px) {
	.ch-h3 { font-size: 1.875rem; }
}

.ch-hero .ch-hero-title { font-size: 2.25rem; }

@media (min-width: 640px) { .ch-hero .ch-hero-title { font-size: 2.75rem; } }
@media (min-width: 768px) { .ch-hero .ch-hero-title { font-size: 3.25rem; } }
@media (min-width: 1024px) { .ch-hero .ch-hero-title { font-size: 3.75rem; } }

@media (max-width: 480px) {
	.ch-hero .ch-hero-title { font-size: clamp(2.375rem, 9.5vw, 3rem); }
}

.ch-hero .ch-hero-title-page { font-size: 2.25rem; }

@media (min-width: 768px) { .ch-hero .ch-hero-title-page { font-size: 3rem; } }
@media (min-width: 1024px) { .ch-hero .ch-hero-title-page { font-size: 3.5rem; } }

@media (max-width: 767px) {
	.ch-hero .ch-hero-title-page { font-size: 2rem; }
}

/* ---- Item 12: one calendar month on every screen width -------------------------
   The calendars draw one month (monthstoshow="1" in the pages). The calendar column no longer needs most of the
   panel: two equal columns from tablet width, so the month is not stretched across a wide screen. */
@media (min-width: 768px) {
	.ch-avail-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 2.5rem;
		align-items: start;
	}
}

@media (min-width: 1024px) {
	.ch-avail-grid {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		gap: 3rem;
	}
}

.ch-cal { max-width: 36rem; }

/* Once the per-night prices are in the cells, the month's last row ran over the panel's bottom padding (desktop)
   and up against the legend's heading (phone): the visual read of 8 Oct 2026. Room under the calendar keeps the
   rows inside the panel; the plugin's equal cell heights stay as they are. */
.ch-cal { padding-bottom: 1.5rem; }

/* A long facility name ("Koel-vriescombinatie") pushed the page 14px sideways at 360px with 130% text
   (qa-journeys, qa-mobile-layout at 360px@130%, 8 Oct 2026). The word has a soft hyphen in the pages now; this
   keeps a word the owners type later inside its column too. */
.ch-amenities li { min-width: 0; overflow-wrap: anywhere; }

.ch-avail-info .ch-avail-pricehint { margin-top: 1rem; }

/* ---- Items 6 and 11: the price calculator and its request form (villa pages) -----
   The calendar panel, then the form card (#aanvraag) with the calculator, and the conditions next to it. The form
   is CF7's, from the starter's booking preset (.cf7-grid, .cf7-full, .cf7-consent, .cf7-fineprint), styled like the
   contact form. assets/js/site.js moves the calculator box (.ch-calc) into the form under the dates and guests. */
.ch-request {
	display: grid;
	gap: 1.5rem;
	margin-top: 1.5rem;
}

@media (min-width: 1024px) {
	.ch-request {
		grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
		gap: 3rem;
		align-items: start;
		margin-top: 2.5rem;
	}
}

.ch-request-title {
	margin: 0 0 0.5rem;
	font-size: 1.5rem;
}

.ch-request-card .ch-request-intro { margin: 0 0 1.5rem; }

.ch-request-aside { padding: 0 0.25rem; }

@media (min-width: 1024px) {
	.ch-request-aside { padding-top: 2.5rem; }
}

.ch-request-aside .ch-price-terms.wp-block-list { margin-top: 0.75rem; }
.ch-request-aside .ch-price-terms-more.wp-block-list { margin-top: 0.35rem; }
.ch-request-aside .ch-small { margin-top: 1rem; }
.ch-request-aside .ch-request-ask { margin-top: 1.5rem; font-weight: 600; color: var(--ch-ink); }

.ch-request-card .cf7-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
}

@media (min-width: 640px) {
	.ch-request-card .cf7-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ch-request-card .cf7-grid > p,
.ch-request-card .cf7-grid > .ch-calc { margin: 0; min-width: 0; }

.ch-request-card .cf7-grid .cf7-full,
.ch-request-card .cf7-grid > .ch-calc { grid-column: 1 / -1; }

.ch-request-card .cf7-grid label > span:first-child {
	display: block;
	margin: 0 0 0.5rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--ch-ink);
}

.ch-request-card .wpcf7 input[type="text"],
.ch-request-card .wpcf7 input[type="email"],
.ch-request-card .wpcf7 input[type="tel"],
.ch-request-card .wpcf7 input[type="date"],
.ch-request-card .wpcf7 select,
.ch-request-card .wpcf7 textarea {
	width: 100%;
	height: 52px;
	padding: 0 1rem;
	border: 1px solid rgba(31, 28, 24, 0.22);
	border-radius: 12px;
	background-color: #fff;
	color: var(--ch-ink);
	font-family: inherit;
	font-size: 16px; /* 16px: iOS zooms into a smaller field */
	line-height: 1.4;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ch-request-card .wpcf7 textarea {
	height: auto;
	min-height: 6.5rem;
	padding: 0.875rem 1rem;
	resize: vertical;
}

.ch-request-card .wpcf7 select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.5rem;
	background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231F1C18' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 12px 8px;
}

.ch-request-card .wpcf7 input[type="text"]:focus,
.ch-request-card .wpcf7 input[type="email"]:focus,
.ch-request-card .wpcf7 input[type="tel"]:focus,
.ch-request-card .wpcf7 input[type="date"]:focus,
.ch-request-card .wpcf7 select:focus,
.ch-request-card .wpcf7 textarea:focus {
	outline: none;
	border-color: var(--ch-terra);
	box-shadow: 0 0 0 3px rgba(184, 92, 63, 0.18);
}

/* The send button and the consent box show where the keyboard is (qa-keyboard, 8 Oct 2026: the button looked the
   same focused and unfocused). */
.ch-request-card .wpcf7 input[type="submit"]:focus-visible {
	outline: 3px solid var(--ch-ink);
	outline-offset: 3px;
}

.ch-request-card .wpcf7 input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--ch-terra);
	outline-offset: 2px;
}

.ch-request-card .cf7-consent .wpcf7-list-item { margin: 0; }

.ch-request-card .cf7-consent label {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--ch-ink-80);
	cursor: pointer;
}

.ch-request-card .cf7-consent input[type="checkbox"] {
	width: 1.125rem;
	height: 1.125rem;
	margin: 0.15rem 0 0;
	accent-color: var(--ch-btn);
	flex-shrink: 0;
}

.ch-request-card .cf7-consent a { color: var(--ch-terra-text); }

.ch-request-card .wpcf7 input[type="submit"] {
	width: 100%;
	margin-top: 1.5rem;
	padding: 1rem 1.75rem;
	border-radius: 1rem;
	background-color: var(--ch-btn);
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	box-shadow: none;
}

.ch-request-card .wpcf7 input[type="submit"]:hover {
	background-color: var(--ch-btn-hover);
	transform: none;
}

.ch-request-card .cf7-fineprint {
	margin: 1rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--ch-ink-70);
	text-align: center;
}

.ch-request-card .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.375rem;
	color: #a3321b;
	font-size: 0.8125rem;
	font-weight: 500;
}

/* The capacity notice (inc/booking-form.php): it warns, the request still goes. */
.ch-request-card .starter-capacity-row { margin: 0; }
.ch-request-card .starter-capacity-row:has(.starter-capacity-note[hidden]) { display: none; }

.ch-request-card .starter-capacity-note {
	display: block;
	padding: 0.75rem 1rem;
	border-radius: 0.75rem;
	background-color: #fbf1e3;
	border: 1px solid #ecd2ae;
	color: #6a4317;
	font-size: 0.875rem;
	line-height: 1.5;
}

.ch-request-card .starter-capacity-note[hidden] { display: none; }

/* The calculator's readout. */
.ch-calc {
	padding: 1rem 1.25rem 1.1rem;
	border-radius: 1rem;
	background-color: var(--ch-cream);
	border: 1px solid rgba(31, 28, 24, 0.08);
	color: var(--ch-ink);
}

.ch-request-card > .ch-calc { margin: 0 0 1.5rem; } /* where it waits until site.js moves it (or without JS) */

.ch-calc-title {
	margin: 0 0 0.5rem;
	color: var(--ch-terra-text);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.ch-calc[aria-busy="true"] .ch-calc-body { opacity: 0.55; }

.ch-calc-body > :first-child { margin-top: 0; }

.ch-calc-period { margin: 0 0 0.75rem; line-height: 1.45; }
.ch-calc-period strong { display: block; font-family: var(--wp--preset--font-family--serif); font-size: 1.0625rem; }
.ch-calc-period span { display: block; font-size: 0.875rem; color: var(--ch-ink-80); }

.ch-calc-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
	line-height: 1.4;
}

.ch-calc-table th,
.ch-calc-table td {
	padding: 0.45rem 0;
	border-bottom: 1px solid rgba(31, 28, 24, 0.1);
	text-align: left;
	vertical-align: top;
	font-weight: 400;
}

.ch-calc-table td {
	padding-left: 1rem;
	text-align: right;
	white-space: nowrap;
}

.ch-calc-table tfoot th,
.ch-calc-table tfoot td {
	border-bottom: 0;
	padding-top: 0.6rem;
	font-size: 1.0625rem;
	font-weight: 700;
}

.ch-calc-dates {
	display: block;
	color: var(--ch-ink-70);
	font-size: 0.8125rem;
}

.ch-calc-note,
.ch-calc-hint {
	margin: 0.75rem 0 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--ch-ink-80);
}

.ch-calc-warn {
	margin: 0.5rem 0 0;
	color: #a3321b;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.45;
}

.ch-calc-gaps {
	margin: 0;
	padding: 0 0 0 1.1rem;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.ch-calc-gaps li + li { margin-top: 0.25rem; }

/* ---- Item 4: the map shows a pin on the villa's own point ------------------------
   The card leaves the middle of the map, where the pin is: top left from tablet width (phones keep it in the lower
   left corner, revision 1). The map's focal point stays in the middle, so every crop keeps the pin. */
@media (min-width: 640px) {
	.wp-block-cover.ch-map > .wp-block-cover__inner-container {
		align-items: flex-start;
		justify-content: flex-start;
		padding: 1rem;
	}
}

/* ---- Item 2: photos enlarge when tapped -------------------------------------------
   WordPress's own image lightbox (theme.json → settings.blocks.core/image.lightbox, starter 1.3.0): a tap or click
   on a photo, or Enter on its "Vergroten" button, opens it full screen; the cross, Escape or a tap closes it. The
   carousels keep their swipe: a tap is not a swipe. */
.wp-lightbox-container img { cursor: zoom-in; }

/* =================================================================================================
   REVISION 3 (15 Oct 2026): Eric's mail of 14 Oct 2026.
   revisions/revision 3/FEEDBACK.md in the reference folder has every item and its source line.
   ================================================================================================= */

/* ---- Item 3: forest green and the footer blue ------------------------------------
   Eric "twijfelt", so each colour is one line here: delete a line and the earlier value comes back (forest #3d4a2f and
   its card #4a5a3a in the client :root above; footer #306688 in the REVISION 1 :root). theme.json's palette entry
   "forest" carries the same green for the editor. Measured on 15 Oct 2026: white on #2e74a1 is 5.1:1, so the footer's
   text, which was cream at 85-90% (3.8-4.1:1 on the new blue), is white now; the peach eyebrow on the new green is
   3.9:1, so on the green bands it is a lighter peach (4.9:1). */
:root {
	--ch-forest: #415927;      /* was #3d4a2f */
	--ch-forest-card: #4a6230; /* the cards on the green band, a step lighter (was #4a5a3a); cream at 80% on it 4.7:1 */
	--ch-footer: #2e74a1;      /* was #306688 */
	--ch-peach-on-forest: #f2c4a2;
	--ch-select: #276690;      /* the dates chosen in a villa page's calendar (white on it 6.2:1) */
}

.site-footer.ch-footer,
.ch-footer-brand p,
.ch-footer-villas span,
.ch-footer-contact li,
.ch-footer-bottom,
.site-footer.ch-footer .ch-footer-links a { color: #fff; }

.ch-bg-forest .ch-eyebrow,
.ch-contact-card .ch-eyebrow { color: var(--ch-peach-on-forest); }

.ch-bg-forest .ch-dist { background-color: rgba(65, 89, 39, 0.9); }

/* ---- Item 2: a lighter hero on the homepage and the contact page -------------------
   Eric: the dark glow over the photo "ziet er alleen een beetje somber uit". The photo now shows without the dark wash;
   the text keeps its contrast from a soft shadow that lies only behind the text block and a text shadow, and the
   transparent header keeps a band at the top (the contact photo's sky is white there). The other heroes are unchanged. */
.wp-block-cover.ch-hero-light > .wp-block-cover__background.has-background-dim.has-background-dim-0 {
	background: linear-gradient(180deg, rgba(31, 28, 24, 0.5) 0, rgba(31, 28, 24, 0.4) var(--header-h, 88px), rgba(31, 28, 24, 0) calc(var(--header-h, 88px) + 8rem));
}

.wp-block-cover.ch-hero-home.ch-hero-light > .wp-block-cover__background.has-background-dim.has-background-dim-0 {
	background:
		linear-gradient(180deg, rgba(31, 28, 24, 0.38) 0, rgba(31, 28, 24, 0.22) var(--header-h, 88px), rgba(31, 28, 24, 0) calc(var(--header-h, 88px) + 7rem)),
		linear-gradient(0deg, rgba(31, 28, 24, 0.45) 0, rgba(31, 28, 24, 0) 9rem);
}

/* The contact page: its photo is mostly white sky, where a soft shadow shows as a grey patch. There the photo shows its
   lower part (the field and the trees) from tablet width, and a shade rises from the corner where the text sits; on a
   phone, where the text fills most of the photo, the shade rises from the bottom. A focal point the owners set on the
   photo in the editor still wins (it is an inline style). */
.wp-block-cover.ch-hero-page.ch-hero-light > .wp-block-cover__background.has-background-dim.has-background-dim-0 {
	background:
		linear-gradient(180deg, rgba(31, 28, 24, 0.5) 0, rgba(31, 28, 24, 0.4) var(--header-h, 88px), rgba(31, 28, 24, 0) calc(var(--header-h, 88px) + 6rem)),
		linear-gradient(to top right, rgba(31, 28, 24, 0.62) 0%, rgba(31, 28, 24, 0.32) 45%, rgba(31, 28, 24, 0) 75%);
}

@media (min-width: 768px) {
	.ch-hero-page.ch-hero-light .wp-block-cover__image-background { object-position: 50% 80%; }
}

@media (max-width: 767px) {
	.wp-block-cover.ch-hero-page.ch-hero-light > .wp-block-cover__background.has-background-dim.has-background-dim-0 {
		background:
			linear-gradient(180deg, rgba(31, 28, 24, 0.5) 0, rgba(31, 28, 24, 0.35) var(--header-h, 88px), rgba(31, 28, 24, 0.1) calc(var(--header-h, 88px) + 4rem)),
			linear-gradient(0deg, rgba(31, 28, 24, 0.6) 0%, rgba(31, 28, 24, 0.42) 50%, rgba(31, 28, 24, 0) 80%);
	}
}

/* The homepage: its text is centred over a blue sky and trees; a soft shade lies behind the text block only. */
.ch-hero-light .ch-hero-content {
	position: relative;
	isolation: isolate;
}

.ch-hero-light .ch-hero-content::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -3rem -4rem;
	background: radial-gradient(closest-side, rgba(31, 28, 24, 0.55) 0%, rgba(31, 28, 24, 0.45) 55%, rgba(31, 28, 24, 0.2) 80%, rgba(31, 28, 24, 0) 100%);
	pointer-events: none;
}

.ch-hero-light .ch-hero-eyebrow,
.ch-hero-light .ch-hero-title,
.ch-hero-light .ch-hero-lead,
.ch-hero-light .ch-fact {
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 18px rgba(0, 0, 0, 0.35);
}

/* ---- Item 8: clearer colours for free and booked nights --------------------------
   "De kleur 'bezet' en 'vrij' mogen in een helderdere kleur terracotta en groen." Free is a clear green, booked a warm
   terracotta, with dark text on both (12:1 and 5.6:1) and one step apart in lightness, so the two also differ without
   colour; a booked night keeps its line through the day number. Closed (grey) and "Nog geen prijzen" (white, dashed)
   stay as they were. MotoPress paints its half-day cells (a stay that starts or ends that day) from the same colours. */
.ch-cal .mphb-calendar {
	--mphb-available-date-bg: #bfe09b;
	--mphb-available-date-color: #1f1c18;
	--mphb-booked-date-bg: #e39a7b;
	--mphb-booked-date-color: #5a2010;
	--mphb-not-available-date-bg: #e39a7b;
	--mphb-not-available-date-color: #5a2010;
	--mphb-unselectable-date-color: #5a2010;
}

/* The line through a booked or blocked night. Revision 1's rule for it (.ch-cal .mphb-calendar td .mphb-booked-date)
   always lost to the cell's base rule (td > span, text-decoration: none), so the line never showed: found in this
   round's capture of 1-15 Sep 2027 at Villa Gabellotti. A half-day cell keeps its number plain. */
.ch-cal .mphb-calendar .datepick-month td .mphb-booked-date:not(.mphb-date-check-in):not(.mphb-date-check-out),
.ch-cal .mphb-calendar .datepick-month td .mphb-mark-as-unavailable {
	text-decoration: line-through;
	text-decoration-thickness: 2px;
}

/* The empty price line under a booked day would carry the line as a stray dash; an inline-block is not decorated. */
.ch-cal .mphb-calendar .datepick-month td .mphb-booked-date .mphb-date-cell__price,
.ch-cal .mphb-calendar .datepick-month td .mphb-mark-as-unavailable .mphb-date-cell__price {
	display: inline-block;
	width: 100%;
}

.ch-legend-free::before { background-color: #bfe09b; border: 1px solid #86b45a; }

.ch-legend-busy::before {
	background: linear-gradient(transparent calc(50% - 1px), #5a2010 calc(50% - 1px), #5a2010 calc(50% + 1px), transparent calc(50% + 1px)), #e39a7b;
	border: 1px solid #c4714f;
}

.ch-legend-half::before {
	background: linear-gradient(to bottom right, #bfe09b 50%, #e39a7b 50%);
	border: 1px solid #b8ab9b;
}

.ch-legend-selected::before { background-color: var(--ch-select); border: 1px solid var(--ch-select); }

/* ---- Item 7: one booking section per villa page ----------------------------------
   Eric's sketch (inbox/revision-3-mockup): the calendar and the request form side by side in one section. From 1024px
   the calendar card is on the left with the conditions under it, the form on the right; below that one column in the
   page's order: calendar, form, conditions. Inside the calendar card the legend sits next to the month on a tablet and
   under it in the half-width column. */
.ch-book {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
}

.ch-book > .ch-book-cal { max-width: none; margin: 0; }

.ch-book-cal-grid { display: grid; gap: 1.5rem; }
.ch-book-cal-info .ch-legend { margin-top: 0; }
.ch-book-cal-info .ch-avail-pricehint { margin-top: 0.75rem; }
.ch-book-cal .ch-cal { max-width: none; } /* keeps revision 2's room under the month: its last row draws below the box */
.ch-book-cal .ch-avail-title { margin-bottom: 1rem; }

@media (min-width: 640px) and (max-width: 1023px) {
	.ch-book-cal-grid {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
		align-items: start;
		gap: 2rem;
	}
}

.ch-book-terms { padding: 0 0.25rem; }

@media (min-width: 1024px) {
	.ch-book {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		grid-template-areas: "cal form" "terms form";
		gap: 2rem 2.5rem;
		align-items: start;
	}

	.ch-book > .ch-book-cal { grid-area: cal; }
	.ch-book > .ch-book-form { grid-area: form; }
	.ch-book > .ch-book-terms { grid-area: terms; padding-top: 0; }
}

@media (min-width: 1280px) {
	.ch-book { gap: 2rem 3rem; }
}

.ch-book-terms .ch-book-terms-text { margin-top: 1rem; color: var(--ch-ink-80); }

/* The chosen dates (assets/js/site.js): arrival and departure filled, the nights between outlined, in a blue that is
   neither the green of a free night nor the terracotta of a booked one. A pointer on the days that take a click. */
.ch-cal .mphb-calendar.ch-cal-pickable .datepick-month td .mphb-date-cell:not(.mphb-past-date):not(.mphb-extra-date) { cursor: pointer; }

.ch-cal .mphb-calendar.ch-cal-pickable .datepick-month td .ch-sel-start,
.ch-cal .mphb-calendar.ch-cal-pickable .datepick-month td .ch-sel-end {
	background: var(--ch-select);
	color: #fff;
	text-decoration: none;
}

.ch-cal .mphb-calendar.ch-cal-pickable .datepick-month td .ch-sel-start .mphb-date-cell__price,
.ch-cal .mphb-calendar.ch-cal-pickable .datepick-month td .ch-sel-end .mphb-date-cell__price { color: inherit; }

.ch-cal .mphb-calendar.ch-cal-pickable .datepick-month td .ch-sel-in { box-shadow: inset 0 0 0 2px var(--ch-select); }

.ch-cal-status {
	margin: 1rem 0 0;
	padding: 0.7rem 0.95rem;
	border-radius: 0.75rem;
	background-color: #eaf2f8;
	color: var(--ch-ink);
	font-size: 0.875rem;
	line-height: 1.5;
}

.ch-book-cal-info .ch-cal-status { margin: 0 0 1rem; }
.ch-cal-status a { color: var(--ch-terra-text); font-weight: 600; white-space: nowrap; }
.ch-cal-status[hidden] { display: none; }

/* ---- Items 13-16: the request form's fields ----------------------------------------
   Opmerkingen is a small field now (item 15: "kleiner of volledig achterwege laten"); the consent names the rental terms
   and the privacy statement (item 16). */
.ch-request-card .wpcf7 textarea[name="opmerkingen"] { min-height: 4.25rem; }

/* ---- Item 6: a sent form cannot be missed ------------------------------------------
   assets/js/site.js hides the fields of a sent form and shows this panel in their place, with CF7's own success
   message inside it; the panel is scrolled into view and focused. Both forms (request and contact). */
.wpcf7 form .ch-sent { display: none; }

.wpcf7 form.ch-form-sent > :not(.ch-sent) { display: none !important; }

.wpcf7 form.ch-form-sent .ch-sent {
	display: block;
	padding: 2rem 1.5rem 1.75rem;
	border: 2px solid var(--ch-forest);
	border-radius: 1.25rem;
	background-color: #eef5e8;
	color: var(--ch-ink);
	text-align: center;
	scroll-margin-top: calc(var(--header-h) + 1rem);
}

.wpcf7 form .ch-sent:focus { outline: none; }
.wpcf7 form .ch-sent:focus-visible { outline: 3px solid var(--ch-ink); outline-offset: 3px; }

.ch-sent-title {
	margin: 0 0 0.75rem;
	color: var(--ch-ink);
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.25;
}

.ch-sent-title::before {
	content: "";
	display: block;
	width: 3rem;
	height: 3rem;
	margin: 0 auto 1rem;
	border-radius: 50%;
	background: var(--ch-forest) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 1.6rem no-repeat;
}

.wpcf7 form.ch-form-sent .ch-sent .wpcf7-response-output {
	display: block;
	margin: 0 auto;
	padding: 0;
	max-width: 32rem;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--ch-ink);
	font-size: 1rem;
	line-height: 1.6;
}

.ch-sent-again {
	appearance: none;
	margin: 1.5rem 0 0;
	padding: 0.7rem 1.25rem;
	border: 1px solid rgba(31, 28, 24, 0.3);
	border-radius: 9999px;
	background-color: #fff;
	color: var(--ch-ink);
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
}

.ch-sent-again:hover { border-color: var(--ch-ink); }
.ch-sent-again:focus-visible { outline: 3px solid var(--ch-ink); outline-offset: 3px; }

/* =================================================================================================
   REVISION 3.1 (16 Oct 2026): revisions/revision 3.1/FEEDBACK.md (reference folder). F1, the request form fixed to its
   villa (Codex's review of the revision-3 release, finding 1); A1, Wil's reveal animations (included at no charge,
   Koen 16 Oct 2026).
   ================================================================================================= */

/* ---- F1: on a villa page the form's villa is text, not a choice (functions.php → ch_villa_form_tag()) -----
   A quiet, filled-in look, unlike the white fields a guest fills in; the link to the other villa's booking section
   (page text, .ch-request-other) under the form. */
.ch-request-card .ch-form-villa-name {
	display: flex;
	align-items: center;
	min-height: 52px;
	padding: 0.75rem 1rem;
	border-radius: 12px;
	background-color: var(--ch-cream);
	color: var(--ch-ink);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
}

.ch-request-card .ch-request-other {
	margin: 1.25rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid rgba(31, 28, 24, 0.1);
	text-align: center;
}

.ch-request-card .ch-request-other a {
	color: var(--ch-terra-text);
	font-weight: 600;
}

/* ---- A1: the reveal animations (assets/js/reveal.js) -----
   reveal.js adds .reveal only in the browser, only to elements still below the screen, and only when motion is allowed:
   the starter's rule above ("Reveal-on-scroll", opacity 0) is the start state, its .is-visible the end. Here the movement
   is FEEDBACK's: a short fade with a small upward movement, about 0.5 s, no bounce. Opacity and transform only, so the
   layout never shifts. With reduced motion the starter's rule shows everything at once; a printed page shows it too. */
@media (prefers-reduced-motion: no-preference) {
	.reveal {
		transform: translateY(1rem);
		transition: opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
	}
}

@media print {
	.reveal { opacity: 1 !important; transform: none !important; }
}

/* =================================================================================================
   REVISION 3.2 (16 Oct 2026): revisions/revision 3.2/FEEDBACK.md (reference folder). C1-b, the owners' new logo in the
   header; C1-a, their portraits in "Ontmoet de eigenaren" (home).
   ================================================================================================= */

/* ---- C1-b: the logo (logo-new.png, 350x334; assets/images/logo-countryhouses-italy-*.png) -----
   Nearly square, where the old logo was wide, so a little more height than its 3.25rem / 3.75rem: 3.5rem on phones,
   4rem from 768px, inside the 5rem header (--header-h). The files are 64 px (1x) and 192 px high (2x and 3x screens),
   so the logo is never shown larger than its own pixels. White over a photo hero, colour once scrolled or with the
   menu open: the rules of the header block and REVISION 3 stay as they are. */
.ch-logo img { height: 3.5rem; }

@media (min-width: 768px) {
	.ch-logo img { height: 4rem; }
}

/* ---- C1-a: a portrait (core Image block, .ch-owner-photo) where the card had its initial -----
   The photos are 250x250 and already round on white; on the white card they need no crop, frame or filter. 6rem,
   from 768px 7rem (112 px: sharp on a 2x screen). On small phones the card stacks (the block above), photo first. */
.ch-owner-card .ch-owner-photo {
	flex: 0 0 6rem;
	width: 6rem;
	margin: 0;
}

.ch-owner-card .ch-owner-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: 0;
	box-shadow: none;
}

@media (min-width: 768px) {
	.ch-owner-card .ch-owner-photo {
		flex-basis: 7rem;
		width: 7rem;
	}
}

/* =================================================================================================
   REVISION 4 (20 Oct 2026): revisions/revision 4/FEEDBACK.md (reference folder). P13, the owners' renewed WIDE logo
   (logo-new2.png, 455x160: three mosaic cypresses beside "Countryhouses italy.com") in the header.
   ================================================================================================= */

/* ---- P13: the wide logo (assets/images/logo-countryhouses-italy-breed-*.png; 191x64 and 417x140) -----
   Wide, so lower than revision 3.2's nearly square logo (whose heights above stay as the fallback): 3.25rem on phones,
   3.75rem from 768px, 4rem from 1200px; 3rem in the 1024-1199px band, where the desktop row is tightest (Header
   checklist #10: logo, five labels and the button on one row). At most 64 css px high, so the 140 px file is sharp on a
   2x screen and the logo is never shown larger than its own pixels. White over a photo hero, colour once scrolled or
   with the menu open: the rules of the header block, REVISION 3 and 3.2 stay as they are. */
.ch-logo img { height: 3.25rem; }

@media (min-width: 768px) {
	.ch-logo img { height: 3.75rem; }
}

@media (min-width: 1024px) and (max-width: 1199px) {
	.ch-logo img { height: 3rem; }
}

@media (min-width: 1200px) {
	.ch-logo img { height: 4rem; }
}

/* ---- P1, P3: the villa photo carousels now hold 15 (Grimiti) and 13 (Gabellotti) photos -----
   One dot per photo at 1.5rem each made the dots' pill wider than the photo on phones (qa-mobile-layout, 20 Oct 2026:
   sideways scroll at 320 and 360px and with 115% and 130% text). The dots are narrower in a photo carousel (1rem; the
   arrows do the same job with full-size buttons) and wrap to a second row before they would leave the photo. The
   arrows sit at mid-height, the dots at the bottom edge, so the dots may use the photo's width. */
.ch-carousel-wrap-photos .ch-carousel-dots {
	flex-wrap: wrap;
	justify-content: center;
	width: max-content;
	max-width: calc(100% - 1.5rem);
}

.ch-carousel-wrap-photos .ch-carousel-dot { width: 1rem; }

/* =================================================================================================
   REVISION 5 (26 Oct 2026): the go-live run (revisions/revision 5/FEEDBACK.md, reference folder). G-01, the language
   switcher (starter 1.2.0's inc/lang-switcher.php fills the header's two placeholders); G-03, the calculator's loading
   and failure states; G-04, the price breakdown inside its card on small screens; the 404's and the search page's
   buttons, which are keyed static HTML now (no core Buttons block on those pages to bring its own CSS).
   ================================================================================================= */

/* ---- G-01: the header row. The switcher and the menu button sit together at the right edge; on a wide screen the
   desktop nav comes before them. Header checklist #11: the codes are in the bar from 360px at every width (no rule
   here depends on the 1024px nav breakpoint) and are the menu's first row. */
.ch-header .site-header-inner { gap: 0.75rem; }
.ch-header .nav-desktop { margin-left: auto; }

.ch-header .header-actions {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	flex-shrink: 0;
}

.ch-header .site-lang {
	display: inline-flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.ch-header .site-lang:empty { display: none; }

.ch-header .site-lang__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	min-height: 2.75rem;
	padding: 0 0.3rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	color: var(--ch-ink);
	border-radius: 0.375rem;
}

.ch-header .site-lang__item.is-current {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

.ch-header .site-lang__item:hover,
.ch-header .site-lang__item:focus-visible { color: var(--ch-terra-text); }

/* Over a photo hero (header not yet scrolled) the codes are light like the nav labels, on a soft dark ground so they
   stay legible over the light heroes too; once scrolled, or with the menu open, they are dark on the white bar. */
body:has(.ch-hero) .site-header.ch-header:not(.scrolled) .site-lang--bar {
	background-color: rgba(31, 28, 24, 0.38);
	border-radius: 9999px;
	padding: 0 0.25rem;
}

body:has(.ch-hero) .site-header.ch-header:not(.scrolled) .site-lang--bar .site-lang__item { color: #fff; }
body:has(.ch-hero) .site-header.ch-header:not(.scrolled) .site-lang--bar .site-lang__item:hover,
body:has(.ch-hero) .site-header.ch-header:not(.scrolled) .site-lang--bar .site-lang__item:focus-visible { color: var(--ch-peach); }

body:has(.ch-hero) .site-header.ch-header:not(.scrolled):has(.nav-mobile-panel.open) .site-lang--bar {
	background-color: transparent;
}

body:has(.ch-hero) .site-header.ch-header:not(.scrolled):has(.nav-mobile-panel.open) .site-lang--bar .site-lang__item { color: var(--ch-ink); }

/* In the open menu: the first row, horizontal. The panel's own rules (`.nav-mobile-panel nav`, `.nav-mobile-panel a`,
   the three-column grid on a landscape phone) style the page links; these win for the switcher (3appletrees, 23 Sep
   2026: a panel rule turned the codes into a column). */
.ch-header .nav-mobile-panel nav.site-lang--menu {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 0 0 0.5rem;
	padding: 0 0 0.5rem;
	border-bottom: 1px solid var(--color-grey-100);
}

.ch-header .nav-mobile-panel a.site-lang__item {
	display: inline-flex;
	min-width: 3rem;
	min-height: 2.75rem;
	padding: 0 0.75rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--ch-ink);
	background: none;
	border-radius: 0.5rem;
}

.ch-header .nav-mobile-panel a.site-lang__item.is-current {
	background-color: var(--color-grey-100);
	text-decoration: none;
}

/* The menu's booking button stays in view: pinned to the bottom of the panel while the links scroll under it (starter
   1.2.0). With the language row on top, a phone held landscape (780 x 300) no longer fits the whole menu, and the button
   ended under the screen (qa-nav-mobile, 26 Oct 2026). The shadow paints the panel's white around it. */
.ch-header .nav-mobile-panel a.nav-cta-mobile {
	position: sticky;
	bottom: 0;
	z-index: 1;
	box-shadow: 0 0 0 0.75rem #fff, 0 1.25rem 0 0.75rem #fff;
}

/* Below 360px the bar has no room for logo, codes and menu button: the menu's row is the one copy there. */
@media (max-width: 359px) {
	.ch-header .header-actions .site-lang--bar { display: none; }
}

/* On a phone the bar holds the logo (155px wide at 3.25rem), the three codes and the menu button: the codes are compact
   there (28 x 44px targets, above WCAG 2.5.8's 24px). The logo keeps its size from REVISION 4 whenever the row has room;
   only when it has none (enlarged system text, a narrow phone) does it shrink to fit, instead of pushing the menu button
   off the screen. */
@media (max-width: 767px) {
	.ch-header .site-header-inner { gap: 0.5rem; }
	.ch-header .site-lang--bar .site-lang__item { min-width: 1.75rem; padding: 0 0.15rem; font-size: 0.75rem; }
}

/* The logo's box: its full width at REVISION 4's height for each band (the file is 191 x 64), able to shrink, the image
   filling it at the file's own ratio (a stable box before the image has loaded). */
body.has-lang-switcher .ch-header .ch-logo { flex: 0 1 calc(3.25rem * 191 / 64); min-width: 0; }
body.has-lang-switcher .ch-header .ch-logo img { width: 100%; height: auto; aspect-ratio: 191 / 64; }

@media (min-width: 768px) {
	body.has-lang-switcher .ch-header .ch-logo { flex-basis: calc(3.75rem * 191 / 64); }
}

@media (min-width: 1024px) and (max-width: 1199px) {
	body.has-lang-switcher .ch-header .ch-logo { flex-basis: calc(3rem * 191 / 64); }
}

@media (min-width: 1200px) {
	body.has-lang-switcher .ch-header .ch-logo { flex-basis: calc(4rem * 191 / 64); }
}

/* In the tight band above the nav breakpoint the row also holds the three codes: a little less space between the
   labels (Header checklist #10: labels never wrap; header-overlap-audit → HEADER_ROW). */
@media (min-width: 1024px) and (max-width: 1199px) {
	.ch-header .nav-desktop { gap: 1rem; }
	.ch-header .site-lang__item { min-width: 1.75rem; padding: 0 0.2rem; }
}

/* ---- The 404's and the search page's buttons (keyed static HTML since revision 5): the row and the link basics that
   core's Buttons block brought with it. */
.ch-404-actions.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.ch-404-actions .wp-block-button__link {
	box-sizing: border-box;
	cursor: pointer;
	text-align: center;
	word-break: break-word;
}

/* ---- G-03: the calculator says it is working, and when it failed it says so with a button to try again. */
.ch-calc[data-state="loading"] .ch-calc-loading { color: var(--ch-ink-80); font-style: italic; }
.ch-calc[aria-busy="true"] .ch-calc-body { opacity: 1; } /* the old readout is gone at once; nothing to fade */

.ch-calc-failed .ch-calc-warn { margin-top: 0; }

.ch-calc-retry {
	margin-top: 0.75rem;
	padding: 0.55rem 1.1rem;
	border: 1px solid var(--ch-ink);
	border-radius: 9999px;
	background-color: transparent;
	color: var(--ch-ink);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
}

.ch-calc-retry:hover,
.ch-calc-retry:focus-visible {
	background-color: var(--ch-ink);
	color: var(--ch-cream-light);
}

/* ---- G-04: the price breakdown stays inside its card (Codex's finding F2 of 21 Oct 2026: a filled table ran out of the
   card on a phone and with enlarged text). Each row is a line that wraps: the label takes the room it needs and wraps
   its own words, the amount stays whole and right-aligned, on the same line when there is room and on the next line
   when there is not. Nothing is cut off and nothing scrolls. The rows keep their table roles (functions.php →
   ch_quote_html(): role="table" … role="cell"), so a screen reader still reads a table. */
.ch-calc { min-width: 0; overflow-wrap: break-word; }

.ch-calc-table,
.ch-calc-table tbody,
.ch-calc-table tfoot { display: block; width: 100%; }

.ch-calc-table tr {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 1rem;
	padding: 0.45rem 0;
	border-bottom: 1px solid rgba(31, 28, 24, 0.1);
}

.ch-calc-table tfoot tr { border-bottom: 0; padding-top: 0.6rem; }

.ch-calc-table th,
.ch-calc-table td {
	display: block;
	padding: 0;
	border-bottom: 0;
}

.ch-calc-table th {
	flex: 1 1 9rem;
	min-width: 0;
	overflow-wrap: break-word;
	hyphens: auto;
}

.ch-calc-table td {
	flex: 0 0 auto;
	margin-left: auto;
	padding-left: 0;
	text-align: right;
	white-space: nowrap;
}

.ch-calc-table tfoot th,
.ch-calc-table tfoot td { padding-top: 0; }

.ch-calc-gaps li { overflow-wrap: break-word; }

/* On a phone the readout gives its text a little more of the card's width. */
@media (max-width: 479px) {
	.ch-calc { padding: 0.9rem 1rem 1rem; }
}

/* ---- G-02: the footer credit (CLAUDE.md → Launch-only → Footer credit), the last change of go-live prep. It sits at
   the end of the bottom line and wraps as one piece; the link is underlined because it stands in white text. */
.ch-footer-credit { white-space: nowrap; }

.site-footer.ch-footer .ch-footer-credit a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}