/*
Theme Name:   CA Stay
Theme URI:    https://ca-stay.com
Description:  Child theme for CA Stay — direct bookings for Cambridge short-term rentals. Built on Oceanica Lite (MotoPress) with the MotoPress Hotel Booking plugin. Custom branding, layout overrides, and helper code live here so they survive parent-theme and plugin updates.
Author:       CA Stay
Author URI:   https://ca-stay.com
Template:     oceanica-lite
Version:      0.8.0
Requires PHP: 8.0
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  ca-stay
Tags:         hotel-booking, rental, cambridge
*/

/* ============================================================================
 * Design tokens
 *
 * Palette: warm cream / stone neutrals + deep forest green accent.
 *          Cambridge collegiate without being stuffy.
 * Type:    Fraunces (display, modern serif with warmth) + Inter (body).
 *          Both Google Fonts, enqueued in functions.php with display=swap.
 *
 * Every visual decision flows from a token. Brand-direction changes are a
 * matter of swapping values here — no rule-by-rule edits below.
 * ========================================================================= */

:root {
	/* --- Colour: cream + burgundy + gold ------------------------------- */
	/* Sampled from the CA Stay logo (Cambridge Accommodation Stay Ltd):
	   deep maroon/burgundy mark with warm-gold hairlines on a soft cream
	   ground. Dark sections use a neutral deep charcoal rather than deep
	   burgundy so the brand colour stays special — only used on primary
	   buttons, eyebrow text, and small accents. Gold is reserved for
	   hairlines / dividers / occasional flourishes; easy to overdo. */
	--ca-color-bg:           #fbf3df;  /* warm cream — matches logo background */
	--ca-color-surface:      #ffffff;
	--ca-color-surface-alt:  #f3e8c8;  /* deeper cream for alt sections */
	--ca-color-surface-dark: #1a1a1a;  /* deep charcoal for inverted sections */

	--ca-color-fg:           #1a1a1a;  /* near-black, warm grey at small sizes */
	--ca-color-fg-muted:     #5a5048;
	--ca-color-fg-subtle:    #8c8275;
	--ca-color-fg-on-dark:   #fbf3df;
	--ca-color-fg-on-dark-muted: #c8bfa9;

	--ca-color-border:        #e6dcc0;
	--ca-color-border-strong: #c9bd9b;

	/* Brand accent — deep burgundy */
	--ca-color-accent:        #7d1f2c;
	--ca-color-accent-strong: #5a1521;
	--ca-color-accent-soft:   #fbe8ea;
	--ca-color-on-accent:     #fbf3df;

	/* Secondary accent — muted gold (use sparingly: hairlines, dividers,
	   small text accents, NEVER as a fill for buttons or large blocks) */
	--ca-color-gold:          #c9a569;
	--ca-color-gold-strong:   #a3863f;
	--ca-color-gold-soft:     #f3e9d2;

	--ca-color-success: #2e7d4f;
	--ca-color-warning: #b06a00;
	--ca-color-danger:  #b3261e;

	/* --- Typography ---------------------------------------------------- */
	/* Fraunces (display) and Inter (body) load via @import in functions.php.
	   Stacks fall back gracefully if Google Fonts is blocked. */
	--ca-font-display:
		'Fraunces', 'Iowan Old Style', 'Apple Garamond', Baskerville,
		Georgia, 'Times New Roman', Times, serif;
	--ca-font-body:
		'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
		'Helvetica Neue', Arial, sans-serif;
	--ca-font-mono:
		ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

	/* Modular type scale, ratio 1.25 (major third), root 1rem = 16px */
	--ca-text-xs:   0.8rem;
	--ca-text-sm:   0.9rem;
	--ca-text-base: 1rem;
	--ca-text-md:   1.125rem;
	--ca-text-lg:   1.25rem;
	--ca-text-xl:   1.563rem;
	--ca-text-2xl:  1.953rem;
	--ca-text-3xl:  2.441rem;
	--ca-text-4xl:  3.052rem;
	--ca-text-5xl:  3.815rem;

	--ca-leading-tight: 1.15;
	--ca-leading-snug:  1.3;
	--ca-leading-base:  1.6;
	--ca-leading-loose: 1.8;

	--ca-tracking-tight:  -0.02em;
	--ca-tracking-snug:   -0.01em;
	--ca-tracking-normal:  0;
	--ca-tracking-wide:    0.04em;
	--ca-tracking-wider:   0.08em;

	/* --- Spacing (4px grid) -------------------------------------------- */
	--ca-space-0:   0;
	--ca-space-1:   0.25rem;   /*  4 */
	--ca-space-2:   0.5rem;    /*  8 */
	--ca-space-3:   0.75rem;   /* 12 */
	--ca-space-4:   1rem;      /* 16 */
	--ca-space-5:   1.5rem;    /* 24 */
	--ca-space-6:   2rem;      /* 32 */
	--ca-space-8:   3rem;      /* 48 */
	--ca-space-10:  4rem;      /* 64 */
	--ca-space-12:  6rem;      /* 96 */
	--ca-space-16:  8rem;      /*128 */

	/* --- Layout -------------------------------------------------------- */
	--ca-container-max:    1240px;
	--ca-container-narrow: 720px;
	--ca-container-wide:   1440px;
	--ca-reading-max:      68ch;

	/* --- Radius / shadow / border -------------------------------------- */
	--ca-radius-sm: 4px;
	--ca-radius-md: 8px;
	--ca-radius-lg: 16px;
	--ca-radius-xl: 24px;
	--ca-radius-pill: 999px;

	--ca-shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.06),  0 1px 3px rgba(26, 26, 26, 0.08);
	--ca-shadow-md: 0 2px 4px rgba(26, 26, 26, 0.08),  0 4px 12px rgba(26, 26, 26, 0.10);
	--ca-shadow-lg: 0 4px 8px rgba(26, 26, 26, 0.08),  0 16px 32px rgba(26, 26, 26, 0.12);
	--ca-shadow-xl: 0 8px 16px rgba(26, 26, 26, 0.10), 0 32px 64px rgba(26, 26, 26, 0.14);

	--ca-border:        1px solid var(--ca-color-border);
	--ca-border-strong: 1px solid var(--ca-color-border-strong);

	--ca-transition-fast: 120ms ease;
	--ca-transition-base: 200ms ease;
	--ca-transition-slow: 400ms ease;
}

/* ============================================================================
 * Foundational rules
 * ========================================================================= */

body {
	font-family: var(--ca-font-body);
	color: var(--ca-color-fg);
	background-color: var(--ca-color-bg);
	line-height: var(--ca-leading-base);
	font-size: var(--ca-text-base);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title,
.site-title {
	font-family: var(--ca-font-display);
	font-weight: 500;
	letter-spacing: var(--ca-tracking-tight);
	line-height: var(--ca-leading-tight);
	color: var(--ca-color-fg);
	margin-block: 0 var(--ca-space-4);
}
h1, .entry-title { font-size: var(--ca-text-4xl); }
h2 { font-size: var(--ca-text-3xl); }
h3 { font-size: var(--ca-text-2xl); }
h4 { font-size: var(--ca-text-xl); }

p { margin-block: 0 var(--ca-space-4); }

a {
	color: var(--ca-color-accent);
	transition: color var(--ca-transition-fast);
}
a:hover, a:focus-visible { color: var(--ca-color-accent-strong); }

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

/* Long-form copy stays readable */
.entry-content > p,
.entry-content > ul,
.entry-content > ol {
	max-width: var(--ca-reading-max);
}

/* Buttons (used across landing CTAs and elsewhere) */
.ca-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ca-space-2);
	padding: var(--ca-space-3) var(--ca-space-5);
	font-family: var(--ca-font-body);
	font-size: var(--ca-text-sm);
	font-weight: 600;
	letter-spacing: var(--ca-tracking-wide);
	text-transform: uppercase;
	text-decoration: none;
	border-radius: var(--ca-radius-pill);
	border: 1px solid var(--ca-color-accent);
	background-color: var(--ca-color-accent);
	color: var(--ca-color-on-accent);
	transition: background-color var(--ca-transition-fast),
		border-color var(--ca-transition-fast),
		transform var(--ca-transition-fast);
	cursor: pointer;
}
.ca-button:hover,
.ca-button:focus-visible {
	background-color: var(--ca-color-accent-strong);
	border-color: var(--ca-color-accent-strong);
	color: var(--ca-color-on-accent);
	transform: translateY(-1px);
}
.ca-button--ghost {
	background-color: transparent;
	color: var(--ca-color-accent);
}
.ca-button--ghost:hover,
.ca-button--ghost:focus-visible {
	background-color: var(--ca-color-accent);
	color: var(--ca-color-on-accent);
}
.ca-button--on-dark {
	border-color: var(--ca-color-fg-on-dark);
	background-color: var(--ca-color-fg-on-dark);
	color: var(--ca-color-surface-dark);
}
.ca-button--on-dark:hover,
.ca-button--on-dark:focus-visible {
	background-color: transparent;
	color: var(--ca-color-fg-on-dark);
	border-color: var(--ca-color-fg-on-dark);
}

/* Section utility — used by the landing template + supporting pages */
.ca-section {
	padding-block: var(--ca-space-12);
}
.ca-section--tight  { padding-block: var(--ca-space-8); }
.ca-section--alt    { background-color: var(--ca-color-surface-alt); }
.ca-section--dark   {
	background-color: var(--ca-color-surface-dark);
	color: var(--ca-color-fg-on-dark);
}
.ca-section--dark h1,
.ca-section--dark h2,
.ca-section--dark h3,
.ca-section--dark h4 { color: var(--ca-color-fg-on-dark); }

.ca-container {
	max-width: var(--ca-container-max);
	margin-inline: auto;
	padding-inline: var(--ca-space-5);
}
.ca-container--narrow { max-width: var(--ca-container-narrow); }
.ca-container--wide   { max-width: var(--ca-container-wide); }

.ca-eyebrow {
	font-family: var(--ca-font-body);
	font-size: var(--ca-text-xs);
	font-weight: 600;
	letter-spacing: var(--ca-tracking-wider);
	text-transform: uppercase;
	color: var(--ca-color-accent);
	margin-block: 0 var(--ca-space-3);
}
.ca-section--dark .ca-eyebrow {
	color: var(--ca-color-fg-on-dark-muted);
}

/* ============================================================================
 * Site header
 * ========================================================================= */

.site-header {
	background-color: var(--ca-color-bg);
	border-bottom: var(--ca-border);
	padding: var(--ca-space-4) 0;
}
.site-header .wrapper {
	max-width: var(--ca-container-max);
	margin-inline: auto;
	padding-inline: var(--ca-space-5);
}
.site-branding { text-align: center; }

.site-title-wrapper .site-title,
.site-title {
	font-family: var(--ca-font-display);
	font-size: var(--ca-text-2xl);
	font-weight: 500;
	letter-spacing: var(--ca-tracking-tight);
	margin: 0;
}
.site-title a {
	color: var(--ca-color-fg);
	text-decoration: none;
}

/* Custom logo (registered via add_theme_support in functions.php). When
   present, the parent renders the_custom_logo() inside .site-logo-wrapper
   and hides .site-title automatically. Cap the size so a 1024px source
   doesn't dominate the header. */
.site-logo-wrapper {
	display: flex;
	justify-content: center;
}
.custom-logo-link {
	display: inline-block;
	line-height: 0;
}
.custom-logo {
	height: auto;
	max-height: 96px;
	width: auto;
}
@media (min-width: 768px) {
	.custom-logo { max-height: 110px; }
}
.wp-custom-logo .site-title-wrapper .site-title { display: none; }
.wp-custom-logo .site-description { display: none; }
.site-description {
	font-size: var(--ca-text-sm);
	color: var(--ca-color-fg-muted);
	margin-top: var(--ca-space-1);
}

/* ----- Primary nav --------------------------------------------------------*/
.main-navigation {
	margin-top: var(--ca-space-4);
	display: flex;
	justify-content: center;
}
.menu-primary-container { width: 100%; max-width: var(--ca-container-max); }
.menu-primary-container > ul,
.menu-primary-container .menu {
	display: flex;
	gap: var(--ca-space-6);
	justify-content: center;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}
.main-navigation .menu-item { margin: 0; }
.main-navigation .menu-item > a {
	display: inline-block;
	padding: var(--ca-space-2) var(--ca-space-1);
	font-family: var(--ca-font-body);
	font-size: var(--ca-text-sm);
	font-weight: 500;
	letter-spacing: var(--ca-tracking-wide);
	text-transform: uppercase;
	color: var(--ca-color-fg-muted);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color var(--ca-transition-fast),
		border-color var(--ca-transition-fast);
}
.main-navigation .menu-item > a:hover,
.main-navigation .menu-item > a:focus-visible,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
	color: var(--ca-color-fg);
	border-bottom-color: var(--ca-color-accent);
}

.menu-toggle-wrapper { display: none; }
@media (max-width: 768px) {
	.menu-toggle-wrapper { display: block; text-align: center; }
	.menu-toggle {
		background: transparent;
		border: var(--ca-border);
		border-radius: var(--ca-radius-md);
		padding: var(--ca-space-2) var(--ca-space-4);
		cursor: pointer;
		font-family: var(--ca-font-body);
	}
	.main-navigation .menu-primary-container { display: none; }
	.main-navigation.toggled .menu-primary-container { display: block; }
	.menu-primary-container > ul,
	.menu-primary-container .menu {
		flex-direction: column;
		gap: var(--ca-space-1);
	}
}

/* ============================================================================
 * Site footer
 * ========================================================================= */

.site-footer {
	background-color: var(--ca-color-surface-dark);
	color: var(--ca-color-fg-on-dark-muted);
	padding: var(--ca-space-10) 0 var(--ca-space-6);
	margin-top: 0; /* sections own their own bottom rhythm */
	font-size: var(--ca-text-sm);
}
.site-footer a { color: var(--ca-color-fg-on-dark); }
.site-footer .wrapper,
.site-footer .site-info {
	max-width: var(--ca-container-max);
	margin-inline: auto;
	padding-inline: var(--ca-space-5);
}
.footer-navigation { margin-bottom: var(--ca-space-5); }
.footer-navigation .menu {
	display: flex;
	gap: var(--ca-space-5);
	justify-content: center;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}
.footer-navigation .menu-item > a {
	color: var(--ca-color-fg-on-dark-muted);
	text-decoration: none;
}
.footer-navigation .menu-item > a:hover,
.footer-navigation .menu-item > a:focus-visible {
	color: var(--ca-color-fg-on-dark);
}
.site-info {
	text-align: center;
	font-size: var(--ca-text-xs);
	color: var(--ca-color-fg-on-dark-muted);
	padding-top: var(--ca-space-5);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ca-footer-info {
	display: flex;
	flex-direction: column;
	gap: var(--ca-space-2);
	align-items: center;
}
.ca-footer-info__contact {
	font-family: var(--ca-font-display);
	font-size: var(--ca-text-md);
	color: var(--ca-color-fg-on-dark);
	margin: 0;
}
.ca-footer-info__contact a {
	color: var(--ca-color-fg-on-dark);
	text-decoration: none;
	transition: color var(--ca-transition-fast);
}
.ca-footer-info__contact a:hover,
.ca-footer-info__contact a:focus-visible {
	color: var(--ca-color-gold);
}
.ca-footer-info__sep {
	color: var(--ca-color-gold);
	margin-inline: var(--ca-space-2);
}
.ca-footer-info__policies {
	font-size: var(--ca-text-sm);
	color: var(--ca-color-fg-on-dark-muted);
	margin: 0;
}
.ca-footer-info__policies a {
	color: var(--ca-color-fg-on-dark-muted);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	padding-bottom: 1px;
	transition: color var(--ca-transition-fast), border-color var(--ca-transition-fast);
}
.ca-footer-info__policies a:hover,
.ca-footer-info__policies a:focus-visible {
	color: var(--ca-color-fg-on-dark);
	border-bottom-color: var(--ca-color-gold);
}
.ca-footer-info__legal {
	font-size: var(--ca-text-xs);
	color: var(--ca-color-fg-on-dark-muted);
	margin: 0;
	letter-spacing: var(--ca-tracking-wide);
}

/* ============================================================================
 * Cancellation policy notice on the checkout page
 *
 * Injected after the booking form via the mphb_sc_checkout_after_form hook
 * (see functions.php). Visually understated — small, neutral, just above the
 * page footer — so it doesn't compete with the Stripe form but is impossible
 * to miss right before/after pressing "Book".
 * ========================================================================= */
.ca-checkout-policy-notice {
	max-width: 38rem;
	margin: var(--ca-space-5) auto 0;
	padding: var(--ca-space-3) var(--ca-space-4);
	background: var(--ca-color-surface);
	border: 1px solid var(--ca-color-border);
	border-radius: var(--ca-radius-md);
	font-size: var(--ca-text-sm);
	line-height: var(--ca-leading-snug);
	color: var(--ca-color-fg-muted);
}
.ca-checkout-policy-notice p {
	margin: 0;
}
.ca-checkout-policy-notice strong {
	color: var(--ca-color-fg);
}
.ca-checkout-policy-notice a {
	color: var(--ca-color-accent);
	text-decoration: underline;
}
.ca-checkout-policy-notice a:hover,
.ca-checkout-policy-notice a:focus-visible {
	color: var(--ca-color-accent-strong);
	text-decoration: none;
}

/* ============================================================================
 * Hide WP defaults that don't belong on a hospitality site
 * ========================================================================= */

/* Empty sidebars from the parent — hide so they don't reserve space */
.widget-area:empty,
#secondary:empty { display: none; }

/* The default WP "skip-link" stays accessible but visually hidden by parent */

/* ============================================================================
 * Landing page
 *
 * Composed by template-landing.php as discrete <section> elements. Sections
 * are full-bleed; their inner .ca-container caps content width.
 * ========================================================================= */

.ca-landing {
	/* Reset the parent's content-area padding so sections can run full-bleed */
	padding: 0;
}
.ca-landing .entry-content { max-width: none; }

/* ----- Hero --------------------------------------------------------------- */

.ca-hero {
	position: relative;
	min-height: clamp(520px, 75vh, 760px);
	background-color: var(--ca-color-surface-dark);
	background-image: linear-gradient(
			180deg,
			rgba(26, 26, 26, 0.30) 0%,
			rgba(26, 26, 26, 0.55) 50%,
			rgba(26, 26, 26, 0.78) 100%
		),
		var(--ca-hero-image, url('assets/img/hero-cambridge-backs.jpg'));
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	color: var(--ca-color-fg-on-dark);
	padding-block: var(--ca-space-12) var(--ca-space-16);
}
.ca-hero__inner {
	max-width: var(--ca-container-max);
	margin-inline: auto;
	padding-inline: var(--ca-space-5);
	width: 100%;
}
.ca-hero__eyebrow {
	font-family: var(--ca-font-body);
	font-size: var(--ca-text-xs);
	font-weight: 600;
	letter-spacing: var(--ca-tracking-wider);
	text-transform: uppercase;
	color: var(--ca-color-fg-on-dark-muted);
	margin-block: 0 var(--ca-space-3);
}
.ca-hero__title {
	font-family: var(--ca-font-display);
	font-size: clamp(var(--ca-text-3xl), 5vw, var(--ca-text-5xl));
	font-weight: 400;
	color: var(--ca-color-fg-on-dark);
	letter-spacing: var(--ca-tracking-tight);
	line-height: var(--ca-leading-tight);
	margin-block: 0 var(--ca-space-4);
	max-width: 18ch;
}
.ca-hero__subtitle {
	font-family: var(--ca-font-body);
	font-size: var(--ca-text-md);
	color: var(--ca-color-fg-on-dark-muted);
	max-width: 48ch;
	margin-block: 0 var(--ca-space-6);
}

/* Search card overlapping the bottom of the hero */
.ca-hero__search {
	position: relative;
	margin-top: var(--ca-space-8);
	margin-bottom: calc(var(--ca-space-12) * -1);
	background-color: var(--ca-color-surface);
	border-radius: var(--ca-radius-lg);
	box-shadow: var(--ca-shadow-xl);
	padding: var(--ca-space-5) var(--ca-space-6);
	color: var(--ca-color-fg);
}
.ca-hero__search-label {
	font-size: var(--ca-text-xs);
	font-weight: 600;
	letter-spacing: var(--ca-tracking-wider);
	text-transform: uppercase;
	color: var(--ca-color-accent);
	margin-block: 0 var(--ca-space-3);
}
@media (min-width: 768px) {
	.ca-hero__search .mphb_sc_search-form {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
		gap: var(--ca-space-4);
		align-items: end;
	}
	.ca-hero__search .mphb_sc_search-form > p { margin: 0; }
	.ca-hero__search .mphb-required-fields-tip { grid-column: 1 / -1; }
}

/* Make sure the section after the hero clears the search-card overlap */
.ca-hero + .ca-section { padding-top: var(--ca-space-16); }

/* ----- Featured stays ----------------------------------------------------- */

.ca-featured__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ca-space-4);
	margin-bottom: var(--ca-space-8);
	flex-wrap: wrap;
}
.ca-featured__title {
	font-size: var(--ca-text-3xl);
	margin: 0;
}

.ca-stay-grid {
	display: grid;
	gap: var(--ca-space-6);
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.ca-stay-card {
	background-color: var(--ca-color-surface);
	border-radius: var(--ca-radius-lg);
	overflow: hidden;
	box-shadow: var(--ca-shadow-sm);
	transition: box-shadow var(--ca-transition-base),
		transform var(--ca-transition-base);
	display: flex;
	flex-direction: column;
}
.ca-stay-card:hover { box-shadow: var(--ca-shadow-lg); transform: translateY(-2px); }
.ca-stay-card a { text-decoration: none; color: inherit; }

.ca-stay-card__image {
	aspect-ratio: 3 / 2;
	background-color: var(--ca-color-surface-alt);
	background-size: cover;
	background-position: center;
}
.ca-stay-card__body {
	padding: var(--ca-space-5);
	display: flex;
	flex-direction: column;
	gap: var(--ca-space-2);
	flex-grow: 1;
}
.ca-stay-card__area {
	font-size: var(--ca-text-xs);
	font-weight: 600;
	letter-spacing: var(--ca-tracking-wider);
	text-transform: uppercase;
	color: var(--ca-color-accent);
}
.ca-stay-card__title {
	font-family: var(--ca-font-display);
	font-size: var(--ca-text-xl);
	font-weight: 500;
	margin: 0;
	color: var(--ca-color-fg);
}
.ca-stay-card__meta {
	font-size: var(--ca-text-sm);
	color: var(--ca-color-fg-muted);
	margin-top: auto;
	padding-top: var(--ca-space-3);
}
.ca-stay-card__price {
	font-family: var(--ca-font-display);
	font-size: var(--ca-text-md);
	color: var(--ca-color-fg);
	font-weight: 500;
}
.ca-stay-card__price-from {
	color: var(--ca-color-fg-muted);
	font-weight: 400;
	font-family: var(--ca-font-body);
	font-size: var(--ca-text-sm);
}

.ca-featured__empty {
	padding: var(--ca-space-8);
	text-align: center;
	color: var(--ca-color-fg-muted);
	background-color: var(--ca-color-surface);
	border-radius: var(--ca-radius-lg);
	border: 1px dashed var(--ca-color-border-strong);
}

/* ----- Why book direct ---------------------------------------------------- */

.ca-why {
	display: grid;
	gap: var(--ca-space-6);
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	margin-top: var(--ca-space-8);
}
.ca-why__item {
	padding: var(--ca-space-5);
}
.ca-why__icon {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: var(--ca-color-accent-soft);
	color: var(--ca-color-accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--ca-text-lg);
	font-family: var(--ca-font-display);
	font-weight: 600;
	margin-bottom: var(--ca-space-4);
}
.ca-why__title {
	font-size: var(--ca-text-lg);
	font-weight: 500;
	margin-block: 0 var(--ca-space-2);
}
.ca-why__copy {
	font-size: var(--ca-text-sm);
	color: var(--ca-color-fg-muted);
	margin: 0;
	line-height: var(--ca-leading-base);
}

/* ----- Cambridge teaser --------------------------------------------------- */

.ca-cambridge {
	display: grid;
	gap: var(--ca-space-8);
	grid-template-columns: 1fr;
	align-items: center;
}
@media (min-width: 900px) {
	.ca-cambridge { grid-template-columns: 1fr 1fr; }
	.ca-cambridge--reverse > .ca-cambridge__media { order: 2; }
}
.ca-cambridge__media {
	aspect-ratio: 4 / 3;
	background-size: cover;
	background-position: center;
	border-radius: var(--ca-radius-lg);
	min-height: 320px;
}
.ca-cambridge__copy h2 { margin-bottom: var(--ca-space-4); }
.ca-cambridge__copy p {
	color: var(--ca-color-fg-muted);
	font-size: var(--ca-text-md);
	max-width: 50ch;
}

/* ----- Final CTA ---------------------------------------------------------- */

.ca-cta {
	text-align: center;
}
.ca-cta__title {
	font-size: clamp(var(--ca-text-2xl), 3vw, var(--ca-text-4xl));
	margin-block: 0 var(--ca-space-4);
	font-weight: 400;
	max-width: 24ch;
	margin-inline: auto;
}
.ca-cta__copy {
	max-width: 48ch;
	margin: 0 auto var(--ca-space-6);
	color: var(--ca-color-fg-on-dark-muted);
	font-size: var(--ca-text-md);
}

/* ============================================================================
 * Stays page — browse-all listing
 * ========================================================================= */

.ca-stays-page__header { padding-block: var(--ca-space-10) var(--ca-space-4); }
.ca-stays-page__header h1 { font-size: clamp(var(--ca-text-3xl), 4vw, var(--ca-text-4xl)); }

.ca-stays-filter {
	background-color: var(--ca-color-surface);
	border: var(--ca-border);
	border-radius: var(--ca-radius-lg);
	box-shadow: var(--ca-shadow-md);
	padding: var(--ca-space-5) var(--ca-space-6);
}
.ca-stays-filter__label {
	font-family: var(--ca-font-body);
	font-size: var(--ca-text-xs);
	font-weight: 600;
	letter-spacing: var(--ca-tracking-wider);
	text-transform: uppercase;
	color: var(--ca-color-accent);
	margin: 0 0 var(--ca-space-3);
}
@media (min-width: 768px) {
	.ca-stays-filter .mphb_sc_search-form {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
		gap: var(--ca-space-4);
		align-items: end;
	}
	.ca-stays-filter .mphb_sc_search-form > p { margin: 0; }
	.ca-stays-filter .mphb-required-fields-tip { grid-column: 1 / -1; }
}

/* ============================================================================
 * Single accommodation page — area block (existing, extended)
 * ========================================================================= */

.ca-stay-area {
	margin: var(--ca-space-4) 0 var(--ca-space-5);
	padding: var(--ca-space-4) var(--ca-space-5);
	background-color: var(--ca-color-surface-alt);
	border-radius: var(--ca-radius-md);
	border: var(--ca-border);
	font-size: var(--ca-text-sm);
	color: var(--ca-color-fg-muted);
	display: flex;
	align-items: baseline;
	gap: var(--ca-space-2);
}
.ca-stay-area__label {
	font-weight: 600;
	color: var(--ca-color-accent);
	letter-spacing: var(--ca-tracking-wider);
	text-transform: uppercase;
	font-size: var(--ca-text-xs);
}
.ca-stay-area__value {
	font-size: var(--ca-text-md);
	color: var(--ca-color-fg);
}

/* ============================================================================
 * Static content pages (About / Cambridge / FAQ / Contact)
 * ========================================================================= */

.page-template-default .entry-header,
.page .entry-header {
	max-width: var(--ca-container-narrow);
	margin: var(--ca-space-10) auto var(--ca-space-6);
	padding-inline: var(--ca-space-5);
	text-align: center;
}
.page-template-default .entry-content,
.page .entry-content {
	max-width: var(--ca-container-narrow);
	margin-inline: auto;
	padding-inline: var(--ca-space-5);
	padding-bottom: var(--ca-space-12);
	font-size: var(--ca-text-md);
	color: var(--ca-color-fg);
}

/* Static-page hero figure (full-width image at the top of a content page). */
.entry-content .ca-page-hero {
	margin: 0 0 var(--ca-space-6);
}
.entry-content .ca-page-hero img,
.entry-content .ca-page-figure img {
	width: 100%;
	height: auto;
	border-radius: var(--ca-radius-lg);
	display: block;
}
.entry-content .ca-page-figure {
	margin: var(--ca-space-6) 0;
}

/* Lead paragraph — first paragraph after a hero, slightly larger and not
   reading-line-clipped so it carries weight. */
.entry-content .ca-page-lede {
	font-size: var(--ca-text-md);
	font-weight: 500;
	color: var(--ca-color-fg);
	max-width: none;
	margin-bottom: var(--ca-space-6);
	line-height: var(--ca-leading-snug);
}

/* "Placeholder content" badge — used in supporting pages while owner copy is
   pending so reviewers understand what's real and what's filler. */
.ca-placeholder-note {
	margin: var(--ca-space-5) 0;
	padding: var(--ca-space-4) var(--ca-space-5);
	background-color: var(--ca-color-accent-soft);
	border-left: 3px solid var(--ca-color-accent);
	border-radius: var(--ca-radius-sm);
	font-size: var(--ca-text-sm);
	color: var(--ca-color-fg-muted);
}
.ca-placeholder-note strong {
	color: var(--ca-color-accent);
	letter-spacing: var(--ca-tracking-wide);
	text-transform: uppercase;
	font-size: var(--ca-text-xs);
	display: block;
	margin-bottom: var(--ca-space-1);
}

/* FAQ details/summary styling */
.entry-content details {
	border-top: var(--ca-border);
	padding-block: var(--ca-space-4);
}
.entry-content details:last-of-type { border-bottom: var(--ca-border); }
.entry-content summary {
	cursor: pointer;
	font-family: var(--ca-font-display);
	font-size: var(--ca-text-lg);
	font-weight: 500;
	color: var(--ca-color-fg);
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--ca-space-4);
}
.entry-content summary::after {
	content: '+';
	font-size: var(--ca-text-2xl);
	color: var(--ca-color-accent);
	transition: transform var(--ca-transition-fast);
	line-height: 1;
}
.entry-content details[open] summary::after { content: '−'; }
.entry-content details > *:not(summary) {
	margin-top: var(--ca-space-3);
	color: var(--ca-color-fg-muted);
}

/* ============================================================================
 * Booking — checkout-page summary card (small "you're booking this" block).
 * ========================================================================= */
.ca-checkout-summary {
	display: flex;
	gap: var(--ca-space-4);
	align-items: stretch;
	max-width: 38rem;
	margin: 0 auto var(--ca-space-5);
	padding: var(--ca-space-3);
	background: var(--ca-color-surface);
	border: var(--ca-border);
	border-radius: var(--ca-radius-md);
	box-shadow: var(--ca-shadow-sm);
}
.ca-checkout-summary__media {
	flex: 0 0 9rem;
	border-radius: var(--ca-radius-sm);
	overflow: hidden;
	background: var(--ca-color-surface-alt);
}
.ca-checkout-summary__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ca-checkout-summary__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--ca-space-2);
}
.ca-checkout-summary__eyebrow {
	font-family: var(--ca-font-body);
	font-size: var(--ca-text-xs);
	text-transform: uppercase;
	letter-spacing: var(--ca-tracking-wider);
	color: var(--ca-color-fg-subtle);
	margin: 0;
}
.ca-checkout-summary__title {
	font-family: var(--ca-font-display);
	font-size: var(--ca-text-lg);
	font-weight: 500;
	margin: 0;
	line-height: var(--ca-leading-snug);
}
.ca-checkout-summary__title a {
	color: var(--ca-color-fg);
	text-decoration: none;
}
.ca-checkout-summary__dates {
	display: flex;
	gap: var(--ca-space-4);
	margin: 0;
	font-size: var(--ca-text-sm);
}
.ca-checkout-summary__dates dt {
	font-size: var(--ca-text-xs);
	color: var(--ca-color-fg-subtle);
	text-transform: uppercase;
	letter-spacing: var(--ca-tracking-wide);
	margin: 0;
}
.ca-checkout-summary__dates dd {
	margin: 0;
	font-weight: 500;
	color: var(--ca-color-fg);
}
@media (max-width: 640px) {
	.ca-checkout-summary { flex-direction: column; }
	.ca-checkout-summary__media { flex: 0 0 auto; aspect-ratio: 16 / 9; }
}

/* ============================================================================
 * Booking confirmation page — compact, Booking.com / Airbnb-style.
 *
 * Whole thing fits ~1 A4 page when printed. Sans-serif throughout so the
 * page reads as a transactional confirmation rather than a brochure. The
 * `body.ca-confirmation-page` rules suppress theme chrome that gets in the
 * way of the printout: auto-rendered page title, the decorative anchor
 * divider, "FAQ / Privacy Policy" footer links, etc.
 * ========================================================================= */

/* Suppress theme decorations on the confirmation page in both screen + print.
   Heavy selector list because Oceanica Lite uses several wrapper classes for
   the page title block; we shotgun all the variants. */
body.ca-confirmation-page .entry-header,
body.ca-confirmation-page .page-header,
body.ca-confirmation-page .entry-title,
body.ca-confirmation-page .page-title,
body.ca-confirmation-page header.entry-header,
body.ca-confirmation-page .wp-block-post-title,
body.ca-confirmation-page h1.entry-title,
body.ca-confirmation-page h1.page-title,
body.ca-confirmation-page .post-title,
body.ca-confirmation-page .mphb-divider,
body.ca-confirmation-page .anchor-divider,
body.ca-confirmation-page .breadcrumb,
body.ca-confirmation-page .breadcrumbs {
	display: none !important;
}
/* Decorative anchor / separator SVGs Oceanica drops between title and content. */
body.ca-confirmation-page main .anchor,
body.ca-confirmation-page main .divider,
body.ca-confirmation-page main img[alt*="anchor" i],
body.ca-confirmation-page main svg[class*="anchor" i],
body.ca-confirmation-page main svg.anchor,
body.ca-confirmation-page .oceanica-anchor,
body.ca-confirmation-page .entry-content > svg:first-child,
body.ca-confirmation-page .entry-content > p:first-child:has(svg),
body.ca-confirmation-page .single-page-title,
body.ca-confirmation-page .single_page_title {
	display: none !important;
}

.ca-bc {
	max-width: 760px;
	margin: 0 auto;
	padding: 0;
	font-family: var(--ca-font-body);
	color: var(--ca-color-fg);
	background: var(--ca-color-surface);
	border: var(--ca-border);
	border-radius: var(--ca-radius-md);
	overflow: hidden;
	box-shadow: var(--ca-shadow-md);
}
/* Force all headings inside the card to use the sans body face — otherwise the
   theme h1/h2/h3 rules (Fraunces display) make this look like a magazine.
   Specificity-heavy because the parent theme's typography rules are
   aggressive (uses .entry-title, h2, etc. with high specificity). */
body .ca-bc h1,
body .ca-bc h2,
body .ca-bc h3,
body .ca-bc h4,
.ca-bc h1.ca-bc__banner-title,
.ca-bc h2.ca-bc__property-title {
	font-family: var(--ca-font-body) !important;
	font-weight: 700 !important;
	letter-spacing: -0.01em !important;
	margin: 0 !important;
	text-transform: none !important;
	color: var(--ca-color-fg) !important;
	line-height: 1.25 !important;
}
.ca-bc p { margin: 0; }
.ca-bc a {
	color: var(--ca-color-accent);
	text-decoration: none;
}
.ca-bc a:hover { text-decoration: underline; }

/* --- Top strip: brand + reference ---------------------------------------- */
.ca-bc__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ca-space-4);
	padding: var(--ca-space-4) var(--ca-space-5);
	border-bottom: var(--ca-border);
	background: var(--ca-color-surface-alt);
}
.ca-bc__brand strong {
	display: block;
	font-size: var(--ca-text-md);
	font-weight: 700;
	color: var(--ca-color-fg);
}
.ca-bc__brand-sub {
	display: block;
	font-size: var(--ca-text-xs);
	color: var(--ca-color-fg-muted);
	margin-top: 2px;
}
.ca-bc__ref { text-align: right; }
.ca-bc__ref-label {
	display: block;
	font-size: var(--ca-text-xs);
	text-transform: uppercase;
	letter-spacing: var(--ca-tracking-wider);
	color: var(--ca-color-fg-subtle);
}
.ca-bc__ref-value {
	display: block;
	font-size: var(--ca-text-md);
	font-weight: 700;
	color: var(--ca-color-accent);
	margin-top: 2px;
	font-feature-settings: 'tnum';
}

/* --- Banner: confirmation tick + title + print button -------------------- */
.ca-bc__banner {
	display: grid;
	grid-template-columns: 48px 1fr auto;
	gap: var(--ca-space-4);
	align-items: center;
	padding: var(--ca-space-5);
	border-bottom: var(--ca-border);
}
.ca-bc__banner-icon {
	width: 48px;
	height: 48px;
	background: var(--ca-color-success);
	color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	font-weight: 700;
}
.ca-bc__banner-title {
	font-size: var(--ca-text-xl);
	font-weight: 700;
	color: var(--ca-color-fg);
	margin: 0;
}
.ca-bc__banner-sub {
	font-size: var(--ca-text-sm);
	color: var(--ca-color-fg-muted);
	margin-top: 4px;
	max-width: 48ch;
}
.ca-bc__print-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	font-family: var(--ca-font-body);
	font-size: var(--ca-text-sm);
	font-weight: 600;
	border-radius: var(--ca-radius-pill);
	border: 1px solid var(--ca-color-fg);
	background: var(--ca-color-fg);
	color: white;
	cursor: pointer;
	transition: background var(--ca-transition-fast);
}
.ca-bc__print-btn:hover { background: var(--ca-color-fg-muted); }

/* --- Property card: photo + meta + dates --------------------------------- */
.ca-bc__property {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: var(--ca-space-4);
	padding: var(--ca-space-5);
	border-bottom: var(--ca-border);
}
.ca-bc__photo {
	grid-row: span 2;
	border-radius: var(--ca-radius-sm);
	overflow: hidden;
	background: var(--ca-color-surface-alt);
	aspect-ratio: 4 / 3;
	display: block;
}
.ca-bc__photo-img,
.ca-bc__photo img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	margin: 0 !important;
	max-width: none !important;
}
.ca-bc__property-meta {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-top: 4px;
}
.ca-bc__property-title {
	font-size: var(--ca-text-lg);
	font-weight: 700;
	line-height: 1.25;
	color: var(--ca-color-fg);
}
.ca-bc__property-title a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
.ca-bc__property-title a:hover { border-bottom-color: var(--ca-color-accent); }
.ca-bc__property-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	font-size: var(--ca-text-sm);
	color: var(--ca-color-fg-muted);
}
.ca-bc__property-facts span:not(:last-child)::after {
	content: '·';
	margin-left: 10px;
	color: var(--ca-color-fg-subtle);
}

.ca-bc__dates {
	grid-column: 2 / 3;
	display: grid;
	grid-template-columns: 1fr 24px 1fr auto;
	gap: var(--ca-space-3);
	align-items: center;
	padding: var(--ca-space-3) 0 0;
	margin: 0;
	border-top: var(--ca-border);
}
.ca-bc__dates > div { margin: 0; }
.ca-bc__dates dt {
	display: block;
	font-size: var(--ca-text-xs);
	text-transform: uppercase;
	letter-spacing: var(--ca-tracking-wider);
	color: var(--ca-color-fg-subtle);
	margin: 0 0 2px;
}
.ca-bc__dates dd {
	display: flex;
	flex-direction: column;
	margin: 0;
}
.ca-bc__dates dd strong {
	font-size: var(--ca-text-md);
	color: var(--ca-color-fg);
	font-weight: 700;
}
.ca-bc__dates dd span {
	font-size: var(--ca-text-xs);
	color: var(--ca-color-fg-muted);
}
.ca-bc__dates-sep {
	color: var(--ca-color-fg-subtle);
	font-size: var(--ca-text-lg);
	text-align: center;
	align-self: end;
	padding-bottom: 4px;
}
.ca-bc__nights {
	font-size: var(--ca-text-xs);
	font-weight: 600;
	color: var(--ca-color-fg);
	background: var(--ca-color-bg);
	border: var(--ca-border);
	border-radius: var(--ca-radius-pill);
	padding: 4px 12px;
	white-space: nowrap;
	align-self: end;
}

/* --- Price strip --------------------------------------------------------- */
.ca-bc__price {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--ca-space-4) var(--ca-space-5);
	background: var(--ca-color-surface-alt);
	border-bottom: var(--ca-border);
}
.ca-bc__price-amount {
	font-size: var(--ca-text-2xl);
	font-weight: 700;
	color: var(--ca-color-accent);
	line-height: 1;
	font-feature-settings: 'tnum';
	margin-top: 4px;
}
.ca-bc__price-meta {
	text-align: right;
	font-size: var(--ca-text-xs);
	color: var(--ca-color-fg-muted);
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.ca-bc__price-meta strong { color: var(--ca-color-fg); }

.ca-bc__eyebrow {
	font-size: var(--ca-text-xs);
	text-transform: uppercase;
	letter-spacing: var(--ca-tracking-wider);
	color: var(--ca-color-fg-subtle);
	font-weight: 600;
	margin: 0 0 6px;
}

/* --- Guest table --------------------------------------------------------- */
.ca-bc__guest {
	padding: var(--ca-space-4) var(--ca-space-5);
	border-bottom: var(--ca-border);
}
.ca-bc__guest-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--ca-text-sm);
}
.ca-bc__guest-table th {
	text-align: left;
	color: var(--ca-color-fg-muted);
	font-weight: 500;
	padding: 4px 0;
	width: 100px;
	font-size: var(--ca-text-xs);
	text-transform: uppercase;
	letter-spacing: var(--ca-tracking-wide);
}
.ca-bc__guest-table td {
	padding: 4px 0;
	color: var(--ca-color-fg);
}

/* --- What's next --------------------------------------------------------- */
.ca-bc__next {
	padding: var(--ca-space-4) var(--ca-space-5);
	border-bottom: var(--ca-border);
}
.ca-bc__next ol {
	padding-left: 1.2em;
	margin: 0;
	font-size: var(--ca-text-sm);
	color: var(--ca-color-fg);
}
.ca-bc__next li { margin-bottom: 6px; }
.ca-bc__next li:last-child { margin-bottom: 0; }

/* --- Bottom strip -------------------------------------------------------- */
.ca-bc__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--ca-space-3);
	padding: var(--ca-space-3) var(--ca-space-5);
	font-size: var(--ca-text-xs);
	color: var(--ca-color-fg-muted);
	background: var(--ca-color-surface-alt);
}

/* --- Mobile -------------------------------------------------------------- */
@media (max-width: 640px) {
	.ca-bc__top,
	.ca-bc__banner,
	.ca-bc__property,
	.ca-bc__price,
	.ca-bc__bottom {
		grid-template-columns: 1fr;
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}
	.ca-bc__ref { text-align: left; }
	.ca-bc__photo { width: 100%; aspect-ratio: 16 / 9; min-height: 0; }
	.ca-bc__dates {
		grid-template-columns: 1fr 1fr;
		grid-column: 1 / -1;
	}
	.ca-bc__dates-sep { display: none; }
	.ca-bc__nights { grid-column: 1 / -1; justify-self: start; }
}

/* ============================================================================
 * Print stylesheet — make the confirmation page a clean printable artefact.
 * Aggressive: hide all theme chrome (site header, footer, page title, nav, the
 * "FAQ Privacy Policy" links). Keep only the .ca-bc card. Pages should fit
 * one A4 sheet.
 * ========================================================================= */
@media print {
	/* Page setup */
	@page { size: A4; margin: 12mm 14mm; }

	body, html {
		background: white !important;
		color: black !important;
		font-size: 10pt;
	}

	/* Hide site chrome aggressively */
	header.site-header,
	.site-header,
	#masthead,
	.site-footer,
	footer.site-footer,
	#colophon,
	.footer-navigation,
	.ca-footer-info,
	.site-navigation,
	.menu-toggle,
	.skip-link,
	#wpadminbar,
	#mphb-loading-overlay,
	body.ca-confirmation-page .entry-header,
	body.ca-confirmation-page .page-header,
	body.ca-confirmation-page .entry-title,
	body.ca-confirmation-page h1.entry-title,
	body.ca-confirmation-page .post-thumbnail,
	body.ca-confirmation-page nav,
	body.ca-confirmation-page .breadcrumb,
	body.ca-confirmation-page .breadcrumbs,
	.no-print {
		display: none !important;
		visibility: hidden !important;
	}

	body.ca-confirmation-page,
	body.ca-confirmation-page #page,
	body.ca-confirmation-page .site-content,
	body.ca-confirmation-page main,
	body.ca-confirmation-page article {
		background: white !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	.ca-bc {
		max-width: 100%;
		margin: 0;
		border: none;
		box-shadow: none;
		border-radius: 0;
	}
	.ca-bc__top,
	.ca-bc__banner,
	.ca-bc__property,
	.ca-bc__price,
	.ca-bc__guest,
	.ca-bc__next,
	.ca-bc__bottom {
		padding: 8pt 0;
		border-color: #ccc;
		background: transparent !important;
	}
	.ca-bc__banner-icon {
		background: black;
		color: white;
		width: 32px;
		height: 32px;
		font-size: 1rem;
	}
	.ca-bc__banner-title { font-size: 14pt; }
	.ca-bc__banner-sub { font-size: 9pt; }
	.ca-bc__price-amount { color: black; font-size: 16pt; }
	.ca-bc__ref-value { color: black; }
	.ca-bc__photo {
		aspect-ratio: auto;
		height: 110px;
		min-height: 0;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
	.ca-bc__property {
		grid-template-columns: 160px 1fr;
		gap: 12pt;
	}
	.ca-bc__dates {
		padding-top: 8pt;
	}
	.ca-bc a {
		color: black;
		text-decoration: none;
	}
	/* Avoid awkward breaks */
	.ca-bc__top,
	.ca-bc__banner,
	.ca-bc__property,
	.ca-bc__price,
	.ca-bc__guest,
	.ca-bc__next,
	.ca-bc__bottom { break-inside: avoid; }
}

/* ============================================================================
 * Booking-confirmation page — bulletproof overrides.
 *
 * Adds `:has(.ca-bc)` selectors so theme-chrome suppression works without
 * relying on a body class (which can fail to be added in some request
 * contexts). Adds !important on layout-critical properties so the parent
 * theme's `.entry-content section` (and similar 2-class rules) can't override
 * our grid layouts. Verbose, but cheap insurance.
 * ========================================================================= */

/* :has() — theme-chrome suppression, no body class required. */
body:has(.ca-bc) .entry-header,
body:has(.ca-bc) .entry-title,
body:has(.ca-bc) .page-title,
body:has(.ca-bc) header.entry-header,
body:has(.ca-bc) h1.entry-title,
body:has(.ca-bc) .wp-block-post-title,
body:has(.ca-bc) .post-thumbnail,
body:has(.ca-bc) .breadcrumb,
body:has(.ca-bc) .breadcrumbs {
	display: none !important;
}

/* Layout property overrides — !important so they survive the theme's
   per-section rules. The repeated `.ca-bc .ca-bc__property` (parent + child)
   trick adds specificity for browsers / cases where :has isn't enough. */
.ca-bc, .ca-bc .ca-bc__property {
	display: revert;
}
.ca-bc .ca-bc__top {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
}
.ca-bc .ca-bc__banner {
	display: grid !important;
	grid-template-columns: 48px 1fr auto !important;
	align-items: center !important;
	gap: var(--ca-space-4) !important;
}
.ca-bc .ca-bc__property {
	display: grid !important;
	grid-template-columns: 200px 1fr !important;
	gap: var(--ca-space-4) !important;
	align-items: start !important;
}
.ca-bc .ca-bc__photo {
	grid-row: span 2 !important;
	border-radius: var(--ca-radius-sm) !important;
	overflow: hidden !important;
	aspect-ratio: 4 / 3 !important;
	background: var(--ca-color-surface-alt) !important;
	display: block !important;
}
.ca-bc .ca-bc__photo .ca-bc__photo-img,
.ca-bc .ca-bc__photo img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}
.ca-bc .ca-bc__dates {
	display: grid !important;
	grid-template-columns: 1fr 24px 1fr auto !important;
	gap: var(--ca-space-3) !important;
	align-items: center !important;
	border-top: var(--ca-border) !important;
	padding-top: var(--ca-space-3) !important;
	margin: 0 !important;
}
.ca-bc .ca-bc__price {
	display: flex !important;
	flex-direction: row !important;
	justify-content: space-between !important;
	align-items: center !important;
}
.ca-bc .ca-bc__banner-icon {
	width: 48px !important;
	height: 48px !important;
	background: var(--ca-color-success) !important;
	color: white !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 1.5rem !important;
	font-weight: 700 !important;
}
.ca-bc .ca-bc__print-btn {
	display: inline-flex !important;
	align-items: center !important;
	padding: 8px 14px !important;
	font-family: var(--ca-font-body) !important;
	font-size: var(--ca-text-sm) !important;
	font-weight: 600 !important;
	border-radius: var(--ca-radius-pill) !important;
	border: 1px solid var(--ca-color-fg) !important;
	background: var(--ca-color-fg) !important;
	color: white !important;
	cursor: pointer !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

/* Mobile: collapse the property grid to stacked. */
@media (max-width: 640px) {
	.ca-bc .ca-bc__property {
		grid-template-columns: 1fr !important;
	}
	.ca-bc .ca-bc__photo {
		grid-row: auto !important;
	}
	.ca-bc .ca-bc__dates {
		grid-template-columns: 1fr 1fr !important;
	}
	.ca-bc .ca-bc__dates-sep { display: none !important; }
}

/* Centre the confirmation card horizontally. The .ca-bc rule already has
   max-width:760px + margin:0 auto so it will centre as long as the wrapping
   theme container (.entry-content) allows it. Make sure the container is
   wide enough on this page. */
body:has(.ca-bc) .entry-content,
body:has(.ca-bc) main,
body:has(.ca-bc) .site-content,
body:has(.ca-bc) #primary {
	max-width: none !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: var(--ca-space-4);
	padding-right: var(--ca-space-4);
}
body:has(.ca-bc) .entry-content { text-align: left !important; }

/* ============================================================================
 * Soft-launch banner — top of every page until full live booking is on.
 * Toggled by the `ca_stay_soft_launch_mode` option in WP.
 * ========================================================================= */
.ca-soft-launch {
	background: linear-gradient(90deg, var(--ca-color-accent) 0%, var(--ca-color-accent-strong) 100%);
	color: var(--ca-color-on-accent);
	font-family: var(--ca-font-body);
	font-size: var(--ca-text-sm);
	line-height: var(--ca-leading-snug);
	border-bottom: 2px solid var(--ca-color-gold);
}
.ca-soft-launch__inner {
	max-width: var(--ca-container-max);
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: var(--ca-space-3);
	padding: var(--ca-space-3) var(--ca-space-4);
}
.ca-soft-launch__badge {
	flex-shrink: 0;
	font-size: var(--ca-text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--ca-tracking-wider);
	padding: 4px 10px;
	background: rgba(255, 255, 255, 0.18);
	border-radius: var(--ca-radius-pill);
	color: var(--ca-color-on-accent);
}
.ca-soft-launch__text {
	margin: 0;
	color: var(--ca-color-on-accent);
}
.ca-soft-launch__text a {
	color: var(--ca-color-gold);
	text-decoration: underline;
	text-underline-offset: 2px;
	font-weight: 500;
}
.ca-soft-launch__text a:hover,
.ca-soft-launch__text a:focus-visible {
	color: var(--ca-color-on-accent);
}
@media (max-width: 640px) {
	.ca-soft-launch__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--ca-space-2);
		padding: var(--ca-space-3);
	}
}
/* Hide in print — guests printing a confirmation don't need to see it. */
@media print {
	.ca-soft-launch { display: none !important; }
}
/* Hide on the booking confirmation page so the polished card isn't pushed
   down by the banner — the guest has already paid (or, in soft-launch,
   submitted a request) by the time they see it. */
body:has(.ca-bc) .ca-soft-launch { display: none !important; }

/* ============================================================================
 * Animations & motion polish (added 14 May 2026)
 *
 * Three things layered on top of existing components:
 *
 *   1. Scroll-reveal — elements with [data-ca-reveal] fade + slide up as
 *      they enter the viewport. JS in assets/js/animations.js sets
 *      `.is-revealed` once the IntersectionObserver fires.
 *   2. Image-zoom on hover for property cards (.ca-stay-card__image).
 *   3. Smoother focus rings + smooth-scroll for anchor jumps.
 *
 * All effects are disabled under prefers-reduced-motion — accessibility
 * trumps polish.
 * ========================================================================= */

/* ---- 1. Scroll-reveal ---------------------------------------------------- */

[data-ca-reveal] {
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: opacity, transform;
}
[data-ca-reveal].is-revealed {
	opacity: 1;
	transform: none;
}
/* Stagger children when [data-ca-reveal-stagger] is set on the parent.
   Each direct child reveals 80ms after the previous. */
[data-ca-reveal-stagger].is-revealed > * {
	animation: ca-fade-up 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
[data-ca-reveal-stagger].is-revealed > *:nth-child(1)  { animation-delay: 0ms;  }
[data-ca-reveal-stagger].is-revealed > *:nth-child(2)  { animation-delay: 80ms; }
[data-ca-reveal-stagger].is-revealed > *:nth-child(3)  { animation-delay: 160ms; }
[data-ca-reveal-stagger].is-revealed > *:nth-child(4)  { animation-delay: 240ms; }
[data-ca-reveal-stagger].is-revealed > *:nth-child(5)  { animation-delay: 320ms; }
[data-ca-reveal-stagger].is-revealed > *:nth-child(6)  { animation-delay: 400ms; }
[data-ca-reveal-stagger].is-revealed > *:nth-child(n+7) { animation-delay: 480ms; }

@keyframes ca-fade-up {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: none; }
}

/* Hero gets a slightly stronger entrance — already visible above the fold,
   so we animate immediately on load rather than waiting for scroll. */
.ca-hero__eyebrow,
.ca-hero__title,
.ca-hero__subtitle,
.ca-hero__search {
	animation: ca-fade-up 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.ca-hero__eyebrow  { animation-delay: 0ms;   }
.ca-hero__title    { animation-delay: 120ms; }
.ca-hero__subtitle { animation-delay: 240ms; }
.ca-hero__search   { animation-delay: 360ms; }

/* ---- 2. Property-card hover zoom ---------------------------------------- */

.ca-stay-card__image {
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
	transform-origin: center;
}
.ca-stay-card:hover .ca-stay-card__image,
.ca-stay-card:focus-within .ca-stay-card__image {
	transform: scale(1.04);
}

/* Booking-card photo on the confirmation page — same gentle lift. */
.ca-bc__photo-img {
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ca-bc__photo:hover .ca-bc__photo-img {
	transform: scale(1.02);
}

/* ---- 3. Focus + scroll polish ------------------------------------------- */

html {
	scroll-behavior: smooth;
}

/* A consistent visible focus ring across interactive elements. The default
   browser outline is brittle and varies. Burgundy at 30% opacity reads as
   on-brand without being loud. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex="0"]:focus-visible {
	outline: 2px solid var(--ca-color-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Link transitions — brand-coloured underline that grows in on hover.
   Applied to body links inside content areas only, not to navigation. */
.ca-section a:not(.ca-stay-card__link):not([class*="button"]):not([class*="btn"]) {
	background-image: linear-gradient(var(--ca-color-accent), var(--ca-color-accent));
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0 1.5px;
	transition: background-size 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.2s;
}
.ca-section a:not(.ca-stay-card__link):not([class*="button"]):not([class*="btn"]):hover,
.ca-section a:not(.ca-stay-card__link):not([class*="button"]):not([class*="btn"]):focus {
	background-size: 100% 1.5px;
}

/* ---- 4. Reduced-motion override ----------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	[data-ca-reveal],
	[data-ca-reveal].is-revealed,
	.ca-hero__eyebrow,
	.ca-hero__title,
	.ca-hero__subtitle,
	.ca-hero__search,
	.ca-stay-card__image,
	.ca-bc__photo-img {
		animation: none !important;
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	html {
		scroll-behavior: auto;
	}
}

/* -----------------------------------------------------------------
   Parent-theme layout fixes (Oceanica Lite)
   -----------------------------------------------------------------
   The parent theme always reserves a 31.3% column for a sidebar that
   we don't use anywhere on this site (no widgets active in any
   sidebar area). Without this override, every page rendered through
   the parent's single.php / page.php — including all property pages
   and the Cambridge / About / Contact pages — shows a narrow white
   "card" with cream empty space on the right where the absent
   sidebar would have been.
   --------------------------------------------------------------- */
.content-area:not(.full-width) {
	float: none;
	width: 100%;
	padding-right: 0;
	margin: 0 auto;
}
/* Belt-and-braces: if a stray empty widget area ever does render,
   make sure it can't push anything around. */
.site-content .widget-area:empty {
	display: none;
}
/* The parent theme caps the post-thumbnail hero at 925px on every
   single page; on a now-full-width content area that looks pinched.
   Let it stretch up to the wrapper edge. */
.site-content > .post-thumbnail {
	max-width: 100% !important;
}

/* -----------------------------------------------------------------
   Per-listing neighbourhood map (CA_Stay_Location_Map)
   -----------------------------------------------------------------
   Rendered inside the single-property template via the MotoPress
   mphb_render_single_room_type_after_content hook. We keep the map
   visually quiet — cream surface, burgundy hairline, generous
   padding — so it reads as part of the listing, not a noisy widget.
   --------------------------------------------------------------- */
.ca-location {
	margin-top: var(--ca-space-12, 3rem);
	padding: var(--ca-space-6, 1.5rem);
	background: var(--ca-color-bg, #fbf3df);
	border: 1px solid rgba(125, 31, 44, 0.18);
	border-radius: 6px;
}
.ca-location__header {
	margin-bottom: var(--ca-space-5, 1.25rem);
}
.ca-location__title {
	margin: 0 0 var(--ca-space-2, 0.5rem) 0;
	font-family: var(--ca-font-display, Georgia, serif);
	font-size: var(--ca-text-2xl, 1.6rem);
	color: var(--ca-color-accent, #7d1f2c);
}
.ca-location__lede {
	margin: 0;
	font-size: var(--ca-text-base, 1rem);
	color: var(--ca-color-fg, #1a1a1a);
	opacity: 0.85;
}
.ca-location__map {
	overflow: hidden;
	border-radius: 4px;
	border: 1px solid rgba(26, 26, 26, 0.12);
	background: #e8e0c8; /* tile-load placeholder colour */
}
.ca-location__map iframe {
	display: block;
	width: 100%;
}

/* -----------------------------------------------------------------
   Cookie notice (class-cookie-notice.php)
   -----------------------------------------------------------------
   One-line banner pinned to the bottom of the viewport on first
   visit. Cream surface, burgundy accent for the dismiss button,
   sized so it never covers more than a slim strip on desktop and
   stacks tidily on mobile. Hidden by default (`hidden` attribute
   on the element); the JS removes `hidden` then transitions in.
   --------------------------------------------------------------- */
.ca-cookie-notice {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ca-space-4, 1rem);
	padding: var(--ca-space-4, 1rem) var(--ca-space-5, 1.25rem);
	background: var(--ca-color-bg, #fbf3df);
	border-top: 2px solid var(--ca-color-accent, #7d1f2c);
	box-shadow: 0 -4px 14px rgba(26, 26, 26, 0.10);
	font-size: var(--ca-text-sm, 0.9rem);
	color: var(--ca-color-fg, #1a1a1a);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 220ms ease, transform 220ms ease;
}
.ca-cookie-notice.is-visible {
	opacity: 1;
	transform: translateY(0);
}
.ca-cookie-notice.is-leaving {
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
}
.ca-cookie-notice__text {
	margin: 0;
	flex: 1 1 320px;
	line-height: 1.45;
}
.ca-cookie-notice__actions {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: var(--ca-space-3, 0.75rem);
	flex-shrink: 0;
}
.ca-cookie-notice__link {
	color: var(--ca-color-accent, #7d1f2c);
	text-decoration: none;
	border-bottom: 1px solid rgba(125, 31, 44, 0.4);
	padding-bottom: 1px;
}
.ca-cookie-notice__link:hover {
	border-bottom-color: var(--ca-color-accent, #7d1f2c);
}
.ca-cookie-notice__dismiss {
	background: var(--ca-color-accent, #7d1f2c);
	color: #fff;
	border: 0;
	padding: 0.5rem 1.1rem;
	font-family: var(--ca-font-body);
	font-weight: 600;
	letter-spacing: 0.02em;
	border-radius: 4px;
	cursor: pointer;
	transition: background 160ms ease;
}
.ca-cookie-notice__dismiss:hover {
	background: #5e1721;
}
.ca-cookie-notice__dismiss:focus-visible {
	outline: 2px solid var(--ca-color-fg, #1a1a1a);
	outline-offset: 2px;
}
/* prefers-reduced-motion: skip the slide, keep the fade. */
@media (prefers-reduced-motion: reduce) {
	.ca-cookie-notice {
		transition: opacity 0ms;
		transform: none;
	}
}

/* -----------------------------------------------------------------
   Search results page (.ca-stay-result)
   -----------------------------------------------------------------
   Cards are produced by our override at
   themes/ca-stay-child/hotel-booking/shortcodes/search-results/
   room-content.php — one <article class="mphb-room-type ca-stay-result">
   per matching flat. The whole left column (image + body) is a single
   anchor to the listing page, so any click on the photo or the body
   navigates there (no lightbox).
   --------------------------------------------------------------- */
.ca-stay-result {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ca-space-4, 1rem);
	margin: 0 0 var(--ca-space-8, 2rem) 0;
	padding: var(--ca-space-5, 1.25rem);
	background: #fff;
	border: 1px solid rgba(26, 26, 26, 0.08);
	border-radius: 6px;
	box-shadow: 0 1px 2px rgba(26, 26, 26, 0.04);
	transition: box-shadow 180ms ease;
}
.ca-stay-result:last-child { margin-bottom: 0; }
.ca-stay-result:hover {
	box-shadow: 0 6px 16px rgba(125, 31, 44, 0.08);
}
.ca-stay-result + .ca-stay-result {
	/* Subtle hairline between rows in addition to the per-card gap. */
	border-top: 1px solid rgba(125, 31, 44, 0.08);
}
@media (min-width: 720px) {
	.ca-stay-result {
		grid-template-columns: 320px 1fr;
		align-items: stretch;
	}
}
.ca-stay-result__link {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ca-space-4, 1rem);
	color: inherit;
	text-decoration: none;
	/* Card spans cols 1+2 on mobile, just col 1 on desktop. */
	grid-column: 1 / -1;
}
@media (min-width: 720px) {
	.ca-stay-result__link {
		grid-template-columns: 320px 1fr;
		grid-column: 1 / -1;
		align-items: start;
	}
}
.ca-stay-result__image {
	width: 100%;
	aspect-ratio: 4 / 3;
	background-size: cover;
	background-position: center;
	border-radius: 4px;
	background-color: var(--ca-color-bg, #fbf3df);
}
.ca-stay-result__body {
	display: flex;
	flex-direction: column;
	gap: var(--ca-space-2, 0.5rem);
}
.ca-stay-result__area {
	font-family: var(--ca-font-body);
	font-size: var(--ca-text-xs, 0.75rem);
	font-weight: 600;
	letter-spacing: var(--ca-tracking-wider, 0.08em);
	text-transform: uppercase;
	color: var(--ca-color-accent, #7d1f2c);
}
.ca-stay-result__title {
	margin: 0;
	font-family: var(--ca-font-display, Georgia, serif);
	font-size: var(--ca-text-2xl, 1.5rem);
	line-height: 1.2;
	color: var(--ca-color-fg, #1a1a1a);
}
.ca-stay-result__meta {
	margin: 0;
	color: var(--ca-color-fg, #1a1a1a);
	opacity: 0.8;
	font-size: var(--ca-text-sm, 0.95rem);
}
.ca-stay-result__price-line {
	margin: var(--ca-space-1, 0.25rem) 0 0 0;
	font-size: var(--ca-text-base, 1rem);
}
.ca-stay-result__price {
	font-weight: 700;
	color: var(--ca-color-accent, #7d1f2c);
	font-size: var(--ca-text-lg, 1.15rem);
}
.ca-stay-result__price-from {
	color: var(--ca-color-fg, #1a1a1a);
	opacity: 0.65;
	font-size: var(--ca-text-sm, 0.9rem);
}
.ca-stay-result__view-cta {
	margin: var(--ca-space-2, 0.5rem) 0 0 0;
	color: var(--ca-color-accent, #7d1f2c);
	font-weight: 600;
	font-size: var(--ca-text-sm, 0.9rem);
}
.ca-stay-result__link:hover .ca-stay-result__title {
	color: var(--ca-color-accent, #7d1f2c);
}
.ca-stay-result__book {
	grid-column: 1 / -1;
	display: flex;
	justify-content: flex-start;
	padding-top: var(--ca-space-3, 0.75rem);
	border-top: 1px dashed rgba(26, 26, 26, 0.12);
}
@media (min-width: 720px) {
	.ca-stay-result__book {
		justify-content: flex-end;
		padding-top: 0;
		border-top: 0;
	}
}
/*
 * MPHB's book-button form ships with its own button styling. Make sure
 * the input/button takes our brand styling rather than the parent
 * theme's default.
 */
.ca-stay-result__book .mphb-book-button-wrapper { margin: 0; }
.ca-stay-result__book input[type="submit"],
.ca-stay-result__book .mphb-book-button-wrapper button {
	background: var(--ca-color-accent, #7d1f2c);
	color: #fff;
	border: 0;
	padding: 0.7rem 1.4rem;
	font-family: var(--ca-font-body);
	font-weight: 600;
	letter-spacing: 0.02em;
	border-radius: 4px;
	cursor: pointer;
	transition: background 160ms ease;
}
.ca-stay-result__book input[type="submit"]:hover,
.ca-stay-result__book .mphb-book-button-wrapper button:hover {
	background: #5e1721;
}