/*
Theme Name: West Coast Safaris
Theme URI: https://westcoastsafaris.co.za
Author: Mark Norman
Author URI: https://marknorman.co.za
Description: Block theme for West Coast Safaris and the West Coast Private Game Reserve. Hand-written, self-hosted fonts, no page builder, no slider, no form plugin, no SEO plugin; the theme carries its own enquiry and newsletter forms, structured data, meta tags and hardening.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
Version: 0.2.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wcs
Tags: block-theme, custom-colors, editor-style, full-site-editing
*/

/* -------------------------------------------------------------------------
   Tokens that are not theme.json presets, and the dark theme: the same
   palette slugs, redefined. Everything downstream uses the preset
   variables, so sections that set a background colour flip too.
   ---------------------------------------------------------------------- */

:root {
	--wcs-header-bg: #fbfaf6;
	--wcs-header-ink: #1c231b;
	--wcs-header-hover: #34683d;
	--wcs-header-rule: #e3e4d9;
	--wcs-on-dark: rgba(255, 255, 255, 0.86);
	--wcs-band-line: rgba(255, 255, 255, 0.12);
	--wcs-shadow: 18, 28, 18;
	--wcs-radius: 10px;
}

@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
		--wp--preset--color--paper: #111a13;
		--wp--preset--color--surface: #182319;
		--wp--preset--color--sand: #1d2a1f;
		--wp--preset--color--tint: #1f2d22;
		--wp--preset--color--rule: #2d3d30;
		--wp--preset--color--ink: #eef1e8;
		--wp--preset--color--muted: #a6b0a2;
		--wp--preset--color--green: #4f8f5c;
		--wp--preset--color--green-deep: #34683d;
		--wp--preset--color--green-ink: #8fc49a;
		--wp--preset--color--olive: #c2bf5a;
		--wp--preset--color--orange: #e0802a;
		--wp--preset--color--band: #16261a;
		--wp--preset--color--dark: #0b110c;
		--wcs-header-bg: #111a13;
		--wcs-header-ink: #eef1e8;
		--wcs-header-hover: #c2bf5a;
		--wcs-header-rule: #2d3d30;
		--wcs-shadow: 0, 0, 0;
	}
}

/* -------------------------------------------------------------------------
   Base
   ---------------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
	scroll-padding-top: 96px;
	-webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

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

:where(h1, h2) em {
	font-style: normal;
	color: var(--wp--preset--color--olive);
}

:focus-visible {
	outline: 3px solid var(--wp--preset--color--orange);
	outline-offset: 3px;
}

/* Header, main and footer meet edge to edge: no block gap of page background between them. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* The theme's photos carry width and height attributes (so the browser reserves
   their space before they load); without this the height attribute would win
   over the CSS aspect ratios below. Core does the same for image blocks only. */
.wp-site-blocks img {
	max-width: 100%;
	height: auto;
}

/* Sections are full-width bands; flow layout would put a block gap of page background between them. */
main > .alignfull,
main > .wp-block-group > .alignfull {
	margin-block-start: 0;
}

.wcs-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.7em;
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--green-ink);
}

.wcs-eyebrow::before {
	content: "";
	flex: none;
	width: 2rem;
	height: 2px;
	background: var(--wp--preset--color--orange);
}

.wcs-eyebrow a {
	color: inherit;
	text-decoration: none;
}

.wcs-eyebrow + .wp-block-heading,
.wcs-eyebrow + .wp-block-post-title {
	margin-block-start: 0.5em;
}

.wcs-lede {
	max-width: 34em;
	font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
}

.wcs-lede-sm {
	max-width: 36em;
	color: var(--wp--preset--color--muted);
}

.wcs-also {
	margin-block-start: 1.2rem;
	font-size: 0.93rem;
	color: var(--wp--preset--color--muted);
}

/* Buttons: orange by default (theme.json); outline is the ghost button. */

/* Every button, in content or in a form, is at least 48px tall with its label
   centred, so buttons side by side or stacked line up with each other and
   with the form fields. */
.wp-block-button__link,
.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 48px;
	text-align: center;
}

.wp-block-button__link,
.wp-element-button {
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 22px -10px rgba(204, 106, 15, 0.7);
}

/* Core's outline style sets a smaller padding; use the solid button's (theme.json) so the two match in height. */
.wp-block-button.is-style-outline > .wp-block-button__link,
a.wp-element-button.is-outline {
	padding: 0.95em 1.5em;
	background: transparent;
	color: var(--wp--preset--color--green-ink);
	border: 0;
	box-shadow: inset 0 0 0 1.5px currentColor;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
a.wp-element-button.is-outline:hover {
	color: var(--wp--preset--color--orange);
	box-shadow: inset 0 0 0 1.5px currentColor, 0 10px 22px -12px rgba(var(--wcs-shadow), 0.4);
}

/* Grids built from Group blocks: core's flow layout gives every child after
   the first a block-gap top margin, which pushes cells 2+ down. */
.wcs-facts__grid.wcs-facts__grid > *,
.wcs-footer__grid.wcs-footer__grid > * {
	margin-block: 0;
}

/* Lists the theme prints as plain HTML inside wp:html blocks. */
.wcs-cards,
.wcs-trio,
.wcs-gallery,
.wcs-units,
.wcs-tags,
.wcs-flowers__strip,
.wcs-unit__facts,
.wcs-days {
	margin: 0;
	padding: 0;
	list-style: none;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------------------------------------------
   Header
   ---------------------------------------------------------------------- */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}

/* A solid ground, no backdrop blur: a backdrop-filter anywhere in the header
   (even on a pseudo-element) makes the navigation block's fixed mobile
   overlay render translucent and under the bar in current WordPress. */
.wcs-header {
	position: relative;
	color: var(--wcs-header-ink);
	background: var(--wcs-header-bg);
	border-bottom: 1.5px solid var(--wcs-header-rule);
}

.wp-block-group.wcs-header__bar {
	min-height: 84px;
	gap: 2rem;
}

.wcs-brand.wcs-brand {
	margin: 0 auto 0 0;
}

.wcs-brand img {
	display: block;
	width: auto;
	height: 42px;
	background: transparent;
}

/* The logo is black line art; invert it on the dark header. */
@media (prefers-color-scheme: dark) {
	.wcs-brand img {
		filter: invert(1);
	}
}

.wp-block-navigation.wcs-nav {
	gap: 1.6rem;
}

.wcs-nav .wp-block-navigation-item__content,
.wcs-tel a {
	color: var(--wcs-header-ink);
}

.wcs-nav .wp-block-navigation-item__content:hover,
.wcs-tel a:hover {
	color: var(--wcs-header-hover);
}

/* Submenu panel. */
.wcs-nav .wp-block-navigation__submenu-container {
	min-width: 240px;
	padding: 0.5rem 0;
	color: var(--wcs-header-ink);
	background: var(--wcs-header-bg);
	border: 1px solid var(--wcs-header-rule);
	border-radius: var(--wcs-radius);
	box-shadow: 0 20px 40px -20px rgba(var(--wcs-shadow), 0.4);
}

.wcs-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.55rem 1.1rem;
}

.wcs-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: var(--wcs-header-hover);
	background: var(--wp--preset--color--tint);
}

.wp-block-group.wcs-header__actions {
	gap: 1.4rem;
}

.wcs-tel {
	margin: 0;
	white-space: nowrap;
}

.wcs-tel a {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-size: 0.86rem;
	font-weight: 600;
	text-decoration: none;
}

.wcs-tel a::before {
	content: "";
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: #2db36b;
	box-shadow: 0 0 0 3px color-mix(in srgb, #2db36b 25%, transparent);
}

/* Collapse the menu to the overlay button below 1100px: six links, the
   number and a button do not fit in between. */
@media (max-width: 1100px) {
	.wcs-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.wcs-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}

	.wcs-tel {
		display: none;
	}
}

@media (max-width: 700px) {
	.wp-block-group.wcs-header__bar {
		min-height: 70px;
		gap: 1rem;
	}

	.wcs-brand img {
		height: 34px;
	}
}

/* The "Call" link exists for the mobile menu, where the header hides the number. */
.wcs-nav .wcs-nav__call {
	display: none;
}

/* Mobile menu: continues the header, so it uses the header's ground and ink. */
.wcs-nav.wcs-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 0;
	color: var(--wcs-header-ink);
	background: var(--wcs-header-bg);
}

.wcs-nav.wcs-nav .is-menu-open .wp-block-navigation__responsive-close {
	max-width: none;
}

.wcs-nav.wcs-nav .is-menu-open .wp-block-navigation__responsive-dialog {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

.wcs-nav.wcs-nav .is-menu-open .wp-block-navigation__responsive-container-content {
	padding: 5.5rem clamp(1.25rem, 6vw, 2.5rem) 2.5rem;
	align-items: stretch;
}

.wcs-nav.wcs-nav .is-menu-open .wp-block-navigation__container {
	align-items: stretch;
	gap: 0;
	width: 100%;
	border-top: 1px solid var(--wcs-header-rule);
}

.wcs-nav.wcs-nav .is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid var(--wcs-header-rule);
}

.wcs-nav.wcs-nav .is-menu-open .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	width: 100%;
	padding: 0.95rem 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.45rem;
	font-weight: 800;
	color: var(--wcs-header-ink);
}

.wcs-nav.wcs-nav .is-menu-open .wp-block-navigation-item__content:hover,
.wcs-nav.wcs-nav .is-menu-open .wp-block-navigation-item__content:focus-visible {
	color: var(--wcs-header-hover);
}

/* The Experiences submenu is open and indented in the overlay. */
.wcs-nav.wcs-nav .is-menu-open .wp-block-navigation__submenu-container {
	width: 100%;
	padding: 0 0 0.6rem 1.1rem;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.wcs-nav.wcs-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	border: 0;
}

.wcs-nav.wcs-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.45rem 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.05rem;
	font-weight: 600;
}

.wcs-nav.wcs-nav .is-menu-open .wp-block-navigation__submenu-icon {
	display: none;
}

/* The call link closes the list as an orange button. */
.wcs-nav.wcs-nav .is-menu-open .wcs-nav__call {
	display: block;
	margin-top: 2rem;
	border-bottom: 0;
}

.wcs-nav.wcs-nav .is-menu-open .wcs-nav__call .wp-block-navigation-item__content {
	justify-content: center;
	padding: 1rem 1.2rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--orange);
	border-radius: 6px;
}

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

.wcs-nav.wcs-nav .is-menu-open .wp-block-navigation__responsive-container-close {
	top: 1.2rem;
	right: clamp(1.25rem, 6vw, 2.5rem);
	padding: 0.4rem;
	border: 1.5px solid var(--wcs-header-rule);
	border-radius: 8px;
}

.wcs-nav.wcs-nav .is-menu-open .wp-block-navigation__responsive-container-close svg {
	width: 26px;
	height: 26px;
}

/* The header button never wraps; on small phones it gets tighter instead. */
.wcs-header__cta .wp-block-button__link {
	white-space: nowrap;
}

@media (max-width: 420px) {
	.wcs-header__cta .wp-block-button__link {
		min-height: 42px;
		padding: 0.6em 0.85em;
		font-size: 0.8rem;
	}
}

@media (max-width: 360px) {
	.wcs-header__cta .wp-block-button__link {
		padding-inline: 0.7em;
		letter-spacing: 0;
	}

	.wcs-brand img {
		height: 30px;
	}
}

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

.wcs-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(72px, 9vw, 130px) 130px;
	background: #16261a;
	color: var(--wp--preset--color--white);
}

.wcs-hero .wcs-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	max-width: none;
	margin: 0;
}

.wcs-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 45%;
}

.wcs-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(95deg, rgba(14, 24, 16, 0.92) 0%, rgba(20, 38, 24, 0.72) 40%, rgba(20, 38, 24, 0.12) 75%, rgba(20, 38, 24, 0) 100%);
}

@media (max-width: 700px) {
	.wcs-hero {
		padding-block-end: 110px;
	}

	.wcs-hero::before {
		background: linear-gradient(180deg, rgba(14, 24, 16, 0.88) 0%, rgba(20, 38, 24, 0.7) 100%);
	}
}

.wcs-hero__inner {
	position: relative;
	z-index: 2;
}

.wcs-hero .wcs-eyebrow {
	color: var(--wp--preset--color--olive);
}

.wcs-hero h1 {
	max-width: 11em;
	margin-block-start: 0.4em;
	font-weight: 900;
}

.wcs-hero .wcs-lede {
	max-width: 30em;
	margin-block-start: 1.3em;
	color: var(--wcs-on-dark);
}

.wcs-hero .wcs-hero__cta {
	margin-block-start: 2.2rem;
}

.wcs-hero .is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--white);
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55);
}

.wcs-hero .is-style-outline > .wp-block-button__link:hover {
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--white);
}

@media (prefers-reduced-motion: no-preference) {
	.wcs-hero__bg img {
		animation: wcs-settle 14s ease-out both;
	}

	.wcs-hero__inner > * {
		animation: wcs-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}

	.wcs-hero__inner > :nth-child(2) {
		animation-delay: 0.08s;
	}

	.wcs-hero__inner > :nth-child(3) {
		animation-delay: 0.16s;
	}

	.wcs-hero__inner > :nth-child(4) {
		animation-delay: 0.24s;
	}
}

@keyframes wcs-settle {
	from {
		transform: scale(1.06);
	}

	to {
		transform: scale(1);
	}
}

@keyframes wcs-rise {
	from {
		opacity: 0;
		transform: translateY(14px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* -------------------------------------------------------------------------
   Facts card, overlapping the bottom of the hero
   ---------------------------------------------------------------------- */

.wcs-facts.wcs-facts {
	position: relative;
	z-index: 3;
	margin-block-start: -84px;
}

.wcs-facts__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--wcs-radius);
	box-shadow: 0 30px 60px -34px rgba(var(--wcs-shadow), 0.45);
}

.wcs-facts__grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wcs-fact {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1.5rem 1.4rem;
	border-right: 1px solid var(--wp--preset--color--rule);
}

.wcs-fact:last-child {
	border-right: 0;
}

.wcs-fact > * {
	margin: 0;
}

.wcs-fact__v {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.2rem);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--green-ink);
	font-variant-numeric: tabular-nums;
}

.wcs-fact__v small {
	margin-left: 0.15em;
	font-size: 0.5em;
	font-weight: 700;
	letter-spacing: 0;
}

.wcs-fact__k {
	font-size: 0.88rem;
	line-height: 1.45;
	color: var(--wp--preset--color--muted);
}

@media (max-width: 900px) {
	.wcs-facts__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wcs-fact:nth-child(2) {
		border-right: 0;
	}

	.wcs-fact:nth-child(-n + 2) {
		border-bottom: 1px solid var(--wp--preset--color--rule);
	}

	/* Three facts: the third spans the second row. */
	.wcs-facts__grid--3 .wcs-fact:nth-child(3) {
		grid-column: 1 / -1;
	}
}

@media (max-width: 460px) {
	.wcs-facts__grid {
		grid-template-columns: 1fr;
	}

	.wcs-fact {
		border-right: 0;
		border-bottom: 1px solid var(--wp--preset--color--rule);
	}

	.wcs-fact:last-child {
		border-bottom: 0;
	}
}

/* -------------------------------------------------------------------------
   Sections, page heads, section heads
   ---------------------------------------------------------------------- */

.wcs-section {
	padding-block: clamp(56px, 7.5vw, 104px);
}

.wcs-phead {
	padding-block: clamp(48px, 6vw, 88px) 0;
}

.wcs-phead--tight {
	padding-block-end: 0;
}

.wcs-phead h1 {
	max-width: 14em;
}

.wcs-phead .wcs-lede {
	margin-block-start: 1.2rem;
}

.wcs-phead .wcs-phead__sub {
	margin-block-start: 0.8rem;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	color: var(--wp--preset--color--green-ink);
}

/* The "Book your safari" heading above the three booking buttons on the homepage. */
.wcs-drives__book.wcs-drives__book {
	margin-block: 0.4rem 0.8rem;
	font-size: 1.1rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--green-ink);
}

.wcs-xcards .wcs-xcards__intro {
	margin-block: 0.6rem 0;
}

.wp-block-columns.wcs-sec-head {
	gap: 2rem;
	margin-block-end: clamp(28px, 4vw, 52px);
}

.wcs-sec-head .wcs-lede-sm {
	margin: 0;
}

/* Split sections: text beside a photo. */

.wp-block-columns.wcs-split {
	gap: clamp(28px, 5vw, 72px);
}

.wcs-split h2 {
	font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem);
}

.wcs-split__pic {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: 14px;
}

.wcs-split__pic img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3.1;
	object-fit: cover;
}

.wcs-split__pic figcaption {
	position: absolute;
	left: 14px;
	bottom: 14px;
	margin: 0;
	padding: 0.5em 0.85em;
	font-size: 0.76rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--surface);
	border-radius: 6px;
}

/* Two photos: a big one with a small one overlapping its corner. */
.wcs-split__pic--stack {
	overflow: visible;
	padding-block-end: 18%;
}

.wcs-split__pic--stack img:first-child {
	border-radius: 14px;
}

.wcs-split__pic--stack img:last-child {
	position: absolute;
	right: -4%;
	bottom: 0;
	width: 46%;
	aspect-ratio: 4 / 3;
	border: 5px solid var(--wp--preset--color--paper);
	border-radius: 12px;
	box-shadow: 0 24px 40px -24px rgba(var(--wcs-shadow), 0.5);
}

@media (max-width: 781px) {
	.wcs-split--reverse {
		flex-direction: column-reverse !important;
	}

	.wcs-split__pic--stack img:last-child {
		right: 0;
	}
}

/* Definition lists used for facts, rates and contact details. */

.wcs-facts-strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1rem 1.5rem;
	margin: 1.8rem 0 0;
	padding: 1.2rem 0 0;
	border-top: 1px solid var(--wp--preset--color--rule);
}

.wcs-facts-strip > div {
	margin: 0;
}

.wcs-facts-strip dt,
.wcs-details dt,
.wcs-rates dt,
.wcs-footer__grid .wcs-footer__label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.wcs-facts-strip dd {
	margin: 0.2rem 0 0;
	font-weight: 600;
}

.wcs-facts-strip--dark {
	border-color: var(--wcs-band-line);
}

.wcs-facts-strip--dark dt {
	color: rgba(255, 255, 255, 0.6);
}

.wcs-rates {
	display: grid;
	gap: 0;
	margin: 0;
}

.wcs-rates > div {
	/* The label keeps at least 8em; a long value ("Allowed if you book a
	   private vehicle") wraps on the right instead of squeezing the label. */
	display: grid;
	grid-template-columns: minmax(8em, 1fr) minmax(0, auto);
	align-items: baseline;
	gap: 1rem;
	padding: 0.6rem 0;
	border-top: 1px solid var(--wp--preset--color--rule);
}

.wcs-rates > div:last-child {
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.wcs-rates dt {
	font-size: 0.86rem;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--wp--preset--color--ink);
}

.wcs-rates dd {
	margin: 0;
	font-weight: 700;
	text-align: right;
	color: var(--wp--preset--color--green-ink);
}

.wcs-rates--inline {
	margin: 1.6rem 0 1.8rem;
}

.wcs-details {
	display: grid;
	gap: 1.1rem;
	margin: 1.8rem 0 0;
}

.wcs-details > div {
	display: grid;
	grid-template-columns: 8.5rem minmax(0, 1fr);
	gap: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--rule);
}

.wcs-details dt {
	padding-top: 0.25em;
}

.wcs-details dd {
	margin: 0;
}

.wcs-details a {
	font-weight: 600;
}

.wcs-details--stack > div {
	grid-template-columns: 1fr;
	gap: 0.3rem;
}

.wcs-details--stack dt {
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--ink);
}

@media (max-width: 420px) {
	.wcs-details > div {
		grid-template-columns: 1fr;
		gap: 0.3rem;
	}
}

/* -------------------------------------------------------------------------
   In our nature: three photos with text
   ---------------------------------------------------------------------- */

.wcs-nature {
	background: var(--wp--preset--color--tint);
	border-top: 1.5px solid var(--wp--preset--color--rule);
	border-bottom: 1.5px solid var(--wp--preset--color--rule);
}

.wcs-trio {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 2.5vw, 32px);
}

.wcs-trio__pic {
	margin: 0 0 1rem;
	overflow: hidden;
	border-radius: 12px;
}

.wcs-trio__pic img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.wcs-trio li:hover .wcs-trio__pic img {
	transform: scale(1.03);
}

.wcs-trio h3 {
	margin: 0 0 0.4rem;
	font-size: 1.25rem;
}

.wcs-trio p {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
}

.wcs-nature .wp-block-buttons {
	margin-block-start: 2.4rem;
}

@media (max-width: 700px) {
	.wcs-trio {
		grid-template-columns: 1fr;
	}

	.wcs-trio__pic img {
		aspect-ratio: 16 / 9;
	}
}

/* -------------------------------------------------------------------------
   Come stay with us
   ---------------------------------------------------------------------- */

.wcs-stay__lead.wcs-stay__lead {
	margin-block-start: 1.2em;
	font-size: 1.2rem;
	color: var(--wp--preset--color--green-ink);
}

/* -------------------------------------------------------------------------
   Experience cards
   ---------------------------------------------------------------------- */

.wcs-xcards .wp-block-heading {
	margin-block-end: clamp(24px, 3vw, 40px);
}

.wcs-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: clamp(14px, 2vw, 24px);
}

.wcs-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--wcs-radius);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.wcs-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 26px 40px -26px rgba(var(--wcs-shadow), 0.5);
}

.wcs-card__pic {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--wp--preset--color--tint);
}

.wcs-card__pic img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.wcs-card:hover .wcs-card__pic img {
	transform: scale(1.04);
}

.wcs-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.4rem;
	padding: 1.1rem 1.2rem 1.25rem;
}

.wcs-card__body > * {
	margin: 0;
}

.wcs-card__kicker {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.wcs-card__title {
	font-size: 1.25rem;
}

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

.wcs-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.wcs-card {
	position: relative;
}

.wcs-card__text {
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}

.wcs-card__price {
	margin-top: 0.4rem;
	font-weight: 700;
	color: var(--wp--preset--color--green-ink);
}

.wcs-card__links {
	display: flex;
	gap: 1.2rem;
	margin-top: auto;
	padding-top: 0.8rem;
	font-size: 0.9rem;
	font-weight: 700;
}

/* The Book link must sit above the card-wide title link. */
.wcs-card__links a {
	position: relative;
	z-index: 1;
}

.wcs-card__links a:last-child {
	color: var(--wp--preset--color--orange);
}

/* -------------------------------------------------------------------------
   Whales & Safari package: dark green band
   ---------------------------------------------------------------------- */

.wcs-package {
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--band);
	border-top: 1.5px solid var(--wcs-band-line);
	border-bottom: 1.5px solid var(--wcs-band-line);
}

.wcs-package .wcs-eyebrow {
	color: var(--wp--preset--color--olive);
}

.wcs-package .wcs-lede-sm,
.wcs-package p {
	color: rgba(255, 255, 255, 0.84);
}

.wcs-package a:not(.wp-block-button__link) {
	color: var(--wp--preset--color--white);
}

.wp-block-columns.wcs-package__cols {
	gap: clamp(28px, 5vw, 72px);
}

.wcs-package .is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--white);
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55);
}

.wcs-package .wp-block-buttons {
	margin-block-start: 1.8rem;
}

.wcs-days {
	display: grid;
	gap: 0;
	counter-reset: day;
}

.wcs-days li {
	position: relative;
	padding: 1rem 0 1rem 0;
	font-size: 0.97rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.84);
	border-top: 1px solid var(--wcs-band-line);
}

.wcs-days li:last-child {
	border-bottom: 1px solid var(--wcs-band-line);
}

.wcs-days strong {
	display: block;
	margin-bottom: 0.2rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--olive);
}

.wcs-package__fine {
	margin: 1.4rem 0 0;
	font-size: 0.86rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.66);
}

.wcs-package__fine strong {
	color: rgba(255, 255, 255, 0.9);
}

/* -------------------------------------------------------------------------
   Gallery and the lightbox
   ---------------------------------------------------------------------- */

.wcs-gallery-section .wp-block-heading {
	margin-block-end: clamp(24px, 3vw, 40px);
}

.wcs-gallery {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(8px, 1.2vw, 14px);
}

.wcs-gallery__item {
	display: block;
	overflow: hidden;
	aspect-ratio: 1;
	background: var(--wp--preset--color--tint);
	border-radius: 8px;
}

.wcs-gallery li:nth-child(1) .wcs-gallery__item,
.wcs-gallery li:nth-child(6) .wcs-gallery__item {
	aspect-ratio: auto;
	height: 100%;
}

.wcs-gallery li:nth-child(1),
.wcs-gallery li:nth-child(6) {
	grid-row: span 2;
}

.wcs-gallery__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.wcs-gallery__item:hover img {
	transform: scale(1.04);
}

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

@media (max-width: 640px) {
	.wcs-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wcs-gallery li:nth-child(1),
	.wcs-gallery li:nth-child(6) {
		grid-row: auto;
	}

	.wcs-gallery li:nth-child(1) .wcs-gallery__item,
	.wcs-gallery li:nth-child(6) .wcs-gallery__item {
		aspect-ratio: 1;
		height: auto;
	}
}

html.wcs-lightbox-open {
	overflow: hidden;
}

.wcs-lightbox {
	position: fixed;
	inset: 0;
	width: 100vw;
	max-width: none;
	height: 100dvh;
	max-height: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	color: var(--wp--preset--color--white);
	background: rgba(10, 16, 11, 0.97);
	border: 0;
}

.wcs-lightbox[open] {
	display: flex;
	flex-direction: column;
}

.wcs-lightbox::backdrop {
	background: rgba(10, 16, 11, 0.9);
}

.wcs-lightbox__bar {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 14px clamp(16px, 3vw, 28px);
}

.wcs-lightbox__bar p {
	margin: 0;
}

.wcs-lightbox__caption {
	margin-right: auto !important;
	font-size: 0.95rem;
}

.wcs-lightbox__count {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.7);
	font-variant-numeric: tabular-nums;
}

.wcs-lightbox__close,
.wcs-lightbox__nav {
	display: grid;
	place-items: center;
	color: var(--wp--preset--color--white);
	background: rgba(255, 255, 255, 0.1);
	border: 1.5px solid rgba(255, 255, 255, 0.25);
	border-radius: 10px;
	cursor: pointer;
}

.wcs-lightbox__close {
	width: 44px;
	height: 44px;
}

.wcs-lightbox__close:hover,
.wcs-lightbox__nav:hover {
	background: rgba(255, 255, 255, 0.2);
}

.wcs-lightbox__stage {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	min-height: 0;
	padding: 0 clamp(12px, 7vw, 96px) clamp(16px, 3vw, 32px);
}

.wcs-lightbox__stage img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 8px;
}

.wcs-lightbox__nav {
	position: absolute;
	top: 50%;
	width: 48px;
	height: 48px;
	font-size: 1.2rem;
	transform: translateY(-50%);
}

.wcs-lightbox__nav.is-prev {
	left: clamp(8px, 2vw, 24px);
}

.wcs-lightbox__nav.is-next {
	right: clamp(8px, 2vw, 24px);
}

@media (max-width: 640px) {
	.wcs-lightbox__nav {
		display: none;
	}

	.wcs-lightbox__stage {
		padding-inline: 8px;
	}
}

/* -------------------------------------------------------------------------
   How to find us: sand ground
   ---------------------------------------------------------------------- */

.wcs-findus {
	background: var(--wp--preset--color--sand);
	border-top: 1.5px solid var(--wp--preset--color--rule);
}

.wp-block-columns.wcs-findus__cols {
	gap: clamp(28px, 5vw, 72px);
}

.wcs-findus__how h3 {
	margin-block: 0 0.3rem;
	font-size: 1.1rem;
}

.wcs-findus__how h3 + p {
	margin-block: 0 1.4rem;
	color: var(--wp--preset--color--muted);
}

/* -------------------------------------------------------------------------
   Get in touch band
   ---------------------------------------------------------------------- */

.wcs-cta {
	padding-block: clamp(48px, 6vw, 80px);
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--green-deep);
}

.wcs-cta h2 {
	max-width: 16em;
	font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem);
}

.wcs-cta p {
	max-width: 32em;
	color: rgba(255, 255, 255, 0.84);
}

.wcs-cta p a {
	color: var(--wp--preset--color--white);
}

.wp-block-buttons.wcs-cta__buttons {
	justify-content: flex-end;
}

.wcs-cta .is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--white);
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55);
}

@media (max-width: 781px) {
	.wp-block-buttons.wcs-cta__buttons {
		justify-content: flex-start;
	}
}

/* -------------------------------------------------------------------------
   Experience pages: head, booking card, long copy, tip
   ---------------------------------------------------------------------- */

.wcs-xhead {
	padding-block: clamp(40px, 5vw, 72px) clamp(40px, 5vw, 64px);
	background: var(--wp--preset--color--sand);
	border-bottom: 1.5px solid var(--wp--preset--color--rule);
}

.wp-block-columns.wcs-xhead__cols {
	gap: clamp(28px, 5vw, 72px);
}

.wcs-xhead h1 {
	max-width: 12em;
	font-size: clamp(2.2rem, 1.2rem + 3.6vw, 4.2rem);
}

.wcs-xhead .wcs-lede {
	margin-block-start: 1.1rem;
}

.wcs-xhead .wcs-xhead__cta {
	margin-block-start: 1.8rem;
}

.wcs-xhead__pic {
	margin: 0;
	overflow: hidden;
	border-radius: 16px;
	box-shadow: 0 30px 60px -34px rgba(var(--wcs-shadow), 0.5);
}

.wcs-xhead__pic img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

@media (max-width: 781px) {
	.wcs-xhead__pic img {
		aspect-ratio: 16 / 10;
	}
}

.wp-block-columns.wcs-xbody__cols {
	gap: clamp(28px, 5vw, 72px);
}

.wcs-bookcard {
	position: sticky;
	top: 108px;
	padding: 1.4rem 1.5rem 1.5rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--wcs-radius);
	box-shadow: 0 24px 50px -36px rgba(var(--wcs-shadow), 0.4);
}

.wcs-bookcard__price {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--wp--preset--color--green-ink);
}

.wcs-bookcard .wcs-rates {
	margin-block-end: 1.2rem;
}

.wcs-bookcard__label {
	margin: 0 0 0.6rem;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.wcs-bookcard__links {
	display: grid;
	gap: 0.6rem;
}

.wcs-bookcard__links .wp-element-button {
	display: block;
	text-align: center;
	text-decoration: none;
}

.wcs-bookcard__help {
	margin: 1rem 0 0;
	font-size: 0.86rem;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}

.wcs-jump {
	display: grid;
	gap: 0.2rem;
	margin-top: 1.4rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--wp--preset--color--rule);
}

.wcs-jump a {
	padding: 0.3rem 0;
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
}

.wcs-jump a::before {
	content: "→ ";
	color: var(--wp--preset--color--orange);
}

@media (max-width: 781px) {
	.wcs-bookcard {
		position: static;
	}

	.wcs-jump {
		display: none;
	}
}

/* Long copy: the experience page's editor content. Each big heading starts a
   section with a rule above it, and sits clear of the sticky header when
   reached from the "on this page" links. */

.wcs-prose > h2 {
	scroll-margin-top: 110px;
}

.wcs-prose > h2:not(:first-child) {
	margin-block-start: 2.6rem;
	padding-block-start: 2rem;
	border-top: 1px solid var(--wp--preset--color--rule);
}

.wcs-prose > :first-child {
	margin-block-start: 0;
}

.wcs-prose__part {
	padding-block: 0.5rem 1.5rem;
}

.wcs-prose__part + .wcs-prose__part {
	margin-block-start: 1rem;
	padding-block-start: 2rem;
	border-top: 1px solid var(--wp--preset--color--rule);
}

.wcs-prose h2 {
	font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
}

.wcs-prose h3 {
	margin-block-start: 1.8rem;
	font-size: 1.15rem;
}

.wcs-prose p,
.wcs-prose li {
	max-width: 42em;
}

.wcs-prose li {
	margin-block-end: 0.5rem;
}

.wcs-prose li strong {
	color: var(--wp--preset--color--green-ink);
}

.wcs-prose--narrow > * {
	max-width: 760px;
}

.wcs-prose--narrow h2 {
	margin-block-start: 1.6rem;
}

/* Tip callout. */

.wcs-tip {
	padding-block: 0 clamp(40px, 5vw, 64px);
}

.wcs-tip__inner {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.3rem 2rem;
	align-items: baseline;
	padding: 1.3rem 1.6rem;
	background: var(--wp--preset--color--tint);
	border-left: 4px solid var(--wp--preset--color--olive);
	border-radius: 0 var(--wcs-radius) var(--wcs-radius) 0;
}

.wcs-tip__inner .wcs-eyebrow {
	grid-column: 1 / -1;
}

.wcs-tip__inner p {
	margin: 0;
}

.wcs-tip__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 800;
}

@media (max-width: 600px) {
	.wcs-tip__inner {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
   The reserve page
   ---------------------------------------------------------------------- */

.wcs-rsection--tint {
	background: var(--wp--preset--color--tint);
	border-top: 1.5px solid var(--wp--preset--color--rule);
	border-bottom: 1.5px solid var(--wp--preset--color--rule);
}

.wcs-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block-start: 1.4rem;
}

.wcs-tags li {
	padding: 0.45em 0.9em;
	font-size: 0.88rem;
	font-weight: 600;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 6px;
}

.wcs-flowers__strip {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: clamp(8px, 1.2vw, 14px);
}

.wcs-flowers__strip figure {
	margin: 0;
}

.wcs-flowers__strip img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 8px;
}

.wcs-flowers__strip figcaption {
	margin-top: 0.4rem;
	font-size: 0.78rem;
	color: var(--wp--preset--color--muted);
}

/* The ninth flower sits alone on a row of five; four across keeps the rows even. */
@media (max-width: 1000px) {
	.wcs-flowers__strip {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.wcs-flowers__strip {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* -------------------------------------------------------------------------
   Accommodation
   ---------------------------------------------------------------------- */

.wcs-staylist {
	padding-block-start: clamp(32px, 4vw, 56px);
}

.wcs-units {
	display: grid;
	gap: clamp(20px, 3vw, 36px);
}

.wcs-unit {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--wcs-radius);
}

.wcs-unit:nth-child(even) {
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
}

.wcs-unit:nth-child(even) .wcs-unit__pic {
	order: 2;
}

.wcs-unit__pic {
	margin: 0;
	background: var(--wp--preset--color--tint);
}

.wcs-unit__pic img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 280px;
	object-fit: cover;
}

.wcs-unit__body {
	padding: clamp(20px, 3vw, 36px);
}

.wcs-unit__body > * {
	margin: 0;
}

.wcs-unit__operator {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.wcs-unit__name {
	margin-block: 0.4rem 0.8rem;
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}

.wcs-unit__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.4rem;
	margin-block-end: 1rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--wp--preset--color--green-ink);
}

.wcs-unit__facts li::before {
	content: "·";
	margin-right: 0.5rem;
	color: var(--wp--preset--color--orange);
}

.wcs-unit__body p {
	color: var(--wp--preset--color--muted);
}

.wcs-unit__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-block-start: 1.4rem !important;
}

.wcs-unit__links .wp-element-button {
	text-decoration: none;
}

@media (max-width: 781px) {
	.wcs-unit,
	.wcs-unit:nth-child(even) {
		grid-template-columns: 1fr;
	}

	.wcs-unit:nth-child(even) .wcs-unit__pic {
		order: 0;
	}

	.wcs-unit__pic img {
		aspect-ratio: 16 / 10;
		min-height: 0;
	}
}

/* -------------------------------------------------------------------------
   Contact page
   ---------------------------------------------------------------------- */

.wcs-contact {
	padding-block-start: clamp(32px, 4vw, 56px);
}

.wp-block-columns.wcs-contact__cols {
	gap: clamp(28px, 5vw, 72px);
}

.wcs-contact h2 {
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
}

.wcs-contact__others.wcs-contact__others {
	margin-block-start: 2.4rem;
}

/* -------------------------------------------------------------------------
   Forms
   ---------------------------------------------------------------------- */

.wcs-form-wrap,
.wcs-subscribe {
	/* The forms lay themselves out by their own width, not the screen's: two
	   fields side by side only where the form is wide enough for both. */
	container: wcs-form / inline-size;
}

.wcs-form-wrap {
	padding: clamp(18px, 3vw, 34px);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 14px;
}

.wcs-form {
	display: grid;
	gap: 0.95rem;
}

.wcs-form label {
	display: grid;
	gap: 0.35rem;
	font-size: 0.88rem;
	font-weight: 600;
}

.wcs-form__optional {
	font-weight: 400;
	color: var(--wp--preset--color--muted);
}

.wcs-form input,
.wcs-form textarea {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	min-height: 48px;
	padding: 0.7em 0.85em;
	font: inherit;
	/* 16px: anything smaller makes iOS zoom the page when the field is tapped. */
	font-size: 1rem;
	font-weight: 400;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--paper);
	border: 1.5px solid var(--wp--preset--color--rule);
	border-radius: 8px;
}

.wcs-form input:focus,
.wcs-form textarea:focus {
	outline: 3px solid color-mix(in srgb, var(--wp--preset--color--green) 35%, transparent);
	outline-offset: 0;
	border-color: var(--wp--preset--color--green);
}

.wcs-form textarea {
	min-height: 130px;
	resize: vertical;
}

.wcs-form__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.95rem;
}

/* Name and email side by side once the form is 340px wide: tablets, desktops
   and the largest phones (about 428px and up). Everything else is full width. */
@container wcs-form (min-width: 340px) {
	.wcs-form__row {
		grid-template-columns: 1fr 1fr;
	}
}

.wcs-form__trap {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.wcs-form__submit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}

.wcs-form button,
.wcs-form .wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	cursor: pointer;
}

/* On a narrow form the send button runs the full width, like the fields. */
@container wcs-form (max-width: 479px) {
	.wcs-form__submit .wp-element-button {
		width: 100%;
	}
}

.wcs-form button[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.wcs-form__aside {
	font-size: 0.82rem;
	color: var(--wp--preset--color--muted);
}

.wcs-form__privacy {
	margin: 0;
	font-size: 0.78rem;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}

.wcs-form__status {
	margin: 0 0 1rem;
	padding: 0.9rem 1.1rem;
	font-size: 0.95rem;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--paper);
	border: 1.5px solid var(--wp--preset--color--rule);
	border-radius: 8px;
}

.wcs-form__status.is-sent {
	border-color: #2db36b;
	background: color-mix(in srgb, #2db36b 12%, var(--wp--preset--color--surface));
}

.wcs-form__status.is-error {
	border-color: #c8412b;
}

/* The footer sign-up: stacked on a narrow column; name and email side by side
   from 380px (the footer column on the largest phones, like the contact form);
   fields and button on one line from 560px. */
.wcs-form--inline {
	grid-template-columns: 1fr;
	align-items: end;
	gap: 0.6rem;
}

.wcs-form--inline .wp-element-button {
	width: 100%;
}

@container wcs-form (min-width: 380px) {
	.wcs-form--inline {
		grid-template-columns: 1fr 1fr;
	}

	.wcs-form--inline .wp-element-button {
		grid-column: 1 / -1;
	}
}

@container wcs-form (min-width: 560px) {
	.wcs-form--inline {
		grid-template-columns: 1fr 1fr auto;
	}

	.wcs-form--inline .wp-element-button {
		grid-column: auto;
		width: auto;
	}
}

.wcs-form--inline label {
	font-size: 0.78rem;
	color: #b9c2b6;
}

.wcs-form--inline input {
	color: var(--wp--preset--color--white);
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.18);
}

.wcs-form--inline input:focus {
	border-color: var(--wp--preset--color--olive);
	outline-color: color-mix(in srgb, var(--wp--preset--color--olive) 35%, transparent);
}


.wcs-footer .wcs-form__status {
	color: var(--wp--preset--color--white);
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.18);
}


/* -------------------------------------------------------------------------
   Footer (always dark)
   ---------------------------------------------------------------------- */

.wcs-footer {
	padding-block: clamp(40px, 5vw, 64px) 1.6rem;
	color: #b9c2b6;
	background: var(--wp--preset--color--dark);
}

.wcs-footer__grid {
	display: grid;
	grid-template-columns: 1.2fr 0.9fr 1.3fr;
	gap: clamp(2rem, 4vw, 4rem);
}

.wcs-footer__grid p {
	margin: 0;
	font-size: 0.93rem;
	color: #d5dbd2;
}

.wcs-footer__grid p + p {
	margin-top: 0.6rem;
}

.wcs-footer__brand p {
	max-width: 24em;
	margin-top: 1rem;
}

.wcs-footer__logo.wcs-footer__logo {
	margin: 0;
}

.wcs-footer__logo img {
	display: block;
	width: auto;
	height: 44px;
	background: transparent;
}

.wcs-footer__social a {
	margin-right: 1rem;
	font-weight: 600;
}

.wcs-footer__grid .wcs-footer__label {
	margin-bottom: 0.7rem;
	color: #8a968a;
}

.wcs-footer__grid p + .wcs-footer__label,
.wcs-footer__grid .wcs-subscribe + .wcs-footer__label {
	margin-top: 1.8rem;
}

.wcs-footer__label + p {
	margin-top: 0;
}

.wcs-footer a {
	color: #d5dbd2;
	text-decoration: none;
}

.wcs-footer a:hover {
	color: var(--wp--preset--color--olive);
}

.wcs-footer__partners {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.2rem;
	margin-top: 0.2rem !important;
}

.wcs-footer__partners img {
	display: block;
	width: auto;
	height: 44px;
	padding: 0.3rem 0.5rem;
	background: #ffffff;
	border-radius: 6px;
}

.wp-block-group.wcs-footer__legal {
	gap: 1rem;
	margin-block-start: 2.4rem;
	padding-top: 1.1rem;
	border-top: 1px solid #263026;
}

.wcs-footer__legal p {
	margin: 0;
	font-size: 0.8rem;
	color: #8a968a;
}

.wcs-footer__legal a {
	color: #b9c2b6;
}

@media (max-width: 900px) {
	.wcs-footer__grid {
		grid-template-columns: 1fr 1fr;
	}

	.wcs-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 600px) {
	.wcs-footer__grid {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
   Blog: the list and a post
   ---------------------------------------------------------------------- */

.wcs-posts {
	padding-block-start: clamp(32px, 4vw, 56px);
}

.wp-block-post-template.wcs-posts__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: clamp(16px, 2.5vw, 28px);
}

.wcs-posts__grid > li {
	margin: 0;
}

.wcs-post-card {
	height: 100%;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--wcs-radius);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.wcs-post-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 26px 40px -26px rgba(var(--wcs-shadow), 0.5);
}

.wcs-post-card > * {
	margin-block: 0;
}

.wcs-post-card__pic {
	background: var(--wp--preset--color--tint);
}

.wcs-post-card__pic img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wcs-post-card__date {
	padding: 1rem 1.2rem 0;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.wcs-post-card__title {
	padding: 0.35rem 1.2rem 0;
	font-size: 1.2rem;
}

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

.wcs-post-card__title a:hover {
	color: var(--wp--preset--color--green-ink);
}

.wcs-post-card__excerpt {
	padding: 0.5rem 1.2rem 1.3rem;
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
}

.wcs-post-card__excerpt p {
	margin: 0;
}

.wcs-post-card__excerpt .wp-block-post-excerpt__more-link {
	display: inline-block;
	margin-top: 0.5rem;
	font-weight: 700;
	text-decoration: none;
}

.wp-block-query-pagination.wcs-pagination {
	margin-block-start: clamp(28px, 4vw, 48px);
	padding-top: 1.2rem;
	font-weight: 600;
	border-top: 1px solid var(--wp--preset--color--rule);
}

.wcs-pagination a {
	text-decoration: none;
}

.wcs-article {
	padding-block: clamp(48px, 6vw, 88px) clamp(56px, 7.5vw, 104px);
}

.wcs-article__head {
	margin-block-end: clamp(28px, 4vw, 48px);
}

.wcs-article__head h1 {
	font-size: clamp(2rem, 1.2rem + 3vw, 3.6rem);
}

.wcs-article__date {
	margin-block-start: 1rem;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.wcs-article__pic.wcs-article__pic {
	margin-block-end: clamp(28px, 4vw, 48px);
	overflow: hidden;
	border-radius: 14px;
}

.wcs-article__body {
	font-size: 1.08rem;
	line-height: 1.7;
}

.wcs-article__body h2,
.wcs-article__body h3 {
	margin-block-start: 1.8em;
}

.wcs-article__body img {
	height: auto;
	border-radius: 10px;
}

.wp-block-group.wcs-article__nav {
	margin-block-start: clamp(32px, 4vw, 56px);
	padding-top: 1.2rem;
	font-size: 0.95rem;
	font-weight: 600;
	border-top: 1px solid var(--wp--preset--color--rule);
}

.wcs-article__nav a {
	text-decoration: none;
}

/* -------------------------------------------------------------------------
   Columns: core stacks them below 782px; keep the stacked gaps sane.
   ---------------------------------------------------------------------- */

@media (max-width: 781px) {
	.wp-block-columns.wcs-sec-head {
		gap: 0.75rem;
	}
}

/* -------------------------------------------------------------------------
   Alignment and touch, all sizes
   ---------------------------------------------------------------------- */

/*
 * Text narrower than the content column (ledes, section intros) starts at the
 * column's left edge, under its heading. The constrained layout would centre
 * it in the column, which leaves it indented from the heading above.
 */
main .is-layout-constrained > :is(.wcs-lede, .wcs-lede-sm, .wcs-also, h1):not(.alignwide):not(.alignfull) {
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
	margin-right: auto !important;
}

/*
 * Three or more buttons side by side become a grid of equal columns, so when
 * they wrap (on a tablet, or in a narrow column) the button on the second row
 * lines up under the ones above instead of trailing at its own width.
 */
.wp-block-buttons.is-layout-flex:has(> .wp-block-button:nth-child(3)) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
}

.wp-block-buttons.is-layout-flex:has(> .wp-block-button:nth-child(3)) > .wp-block-button {
	width: auto;
	margin: 0;
}

.wp-block-buttons.is-layout-flex:has(> .wp-block-button:nth-child(3)) .wp-block-button__link {
	display: flex;
	width: 100%;
}

/* Text links that act as buttons get a 44px touch height without changing how they look. */
.wcs-card__links a,
.wcs-footer__social a,
.wcs-jump a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.wcs-card__links {
	padding-top: 0.3rem;
}

/* The menu button is a 24px icon; give it a 44px touch area around it. */
.wcs-nav .wp-block-navigation__responsive-container-open {
	padding: 10px;
	margin: -10px;
}

/* -------------------------------------------------------------------------
   Phones: one column of full-width buttons
   ---------------------------------------------------------------------- */

@media (max-width: 599px) {
	/* Every group of buttons stacks, each button the full width, so a group of
	   two or three lines up instead of wrapping into uneven rows. The header's
	   single "Book an experience" button keeps its size. */
	.wp-block-buttons:not(.wcs-header__cta) {
		flex-direction: column;
		align-items: stretch;
	}

	.wp-block-buttons:not(.wcs-header__cta) > .wp-block-button {
		width: 100%;
		margin: 0;
	}

	.wp-block-buttons:not(.wcs-header__cta) .wp-block-button__link {
		display: flex;
		width: 100%;
	}

	.wcs-unit__links {
		flex-direction: column;
		align-items: stretch;
	}

	.wcs-unit__links .wp-element-button {
		text-align: center;
	}

	/* Footer contact links: more room between lines, for fingers. */
	.wcs-footer__links {
		line-height: 2.4;
	}

	.wcs-footer__social a {
		margin-right: 1.4rem;
	}
}

/* -------------------------------------------------------------------------
   Editor
   ---------------------------------------------------------------------- */

.editor-styles-wrapper .wcs-form__trap {
	display: none;
}