/*
Theme Name: Cruise Escapes
Theme URI: https://example.com
Author: Kemp-IT
Author URI: https://kemp-it.com
Description: Minimum-viable WordPress block theme for a travel site backed by the Travel Content Plugin (CPT travel_item + trip_type/destination taxonomies + travel-filter / featured-trips / travel-trips blocks). Copy this folder for each new brand and rename per the root README.md / init.ps1. Excludes the Idea Travel mega-menu, dynamic carousel and multi-page brand templates by design — opt into those by porting individual files from idea-travel\ when a brand needs them.
Requires at least: 6.6
Tested up to: 6.7
Requires PHP: 7.4
Version: 0.8.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cruise-escapes
Tags: full-site-editing, block-patterns, blog, business, travel, custom-colors, custom-logo, editor-style, featured-images, wide-blocks
*/

/* This file holds only the small handful of layout pins / overrides that theme.json can't express. The travel
   plugin's templates use the `.it-travel-*` namespace (loaded from assets/css/travel-content.css when the page
   shows plugin content); the few rules below are theme-level chrome only. Heavy brand styling (mega-menus,
   carousels, photo overlays) is NOT in this scaffold — port from idea-travel\style.css if a brand needs it. */

/* Body resets that theme.json doesn't cover */
body { margin: 0; }

/* Pull <main> flush with the header. Without this, body's default block-gap (24px) renders as a margin
   between the header template-part and main, which produces a visible gap above the hero. */
.wp-site-blocks > main { margin-block-start: 0; }

/* Header bar — pinned in CSS because the Travel Content Plugin's front-end templates render the header via
   block_template_part('header'), where WP doesn't always emit the per-block layout CSS that styles the flex
   row from JSON attrs. Without this, the logo/nav/CTA stack vertically on /travel/… pages. */
.site-header {
	position: relative;
	/* Above the utility bar (z-index 31). The drawer is fixed inside this element, so .site-header's own
	   stacking context must outrank the utility bar — otherwise the aqua bar paints over the open drawer. */
	z-index: 40;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var( --wp--preset--spacing--50 );
	width: 100%;
}
.site-header__actions {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var( --wp--preset--spacing--50 );
}
/* Header navigation — full-time hamburger + slide-in drawer (patterns/header.php + assets/js/site.js).
   Replaces core/navigation: the drawer holds the links (large serif), a branded image top-right, and a
   contact block pinned to the bottom. */
/* The "Menu" trigger is a core/button (so the client can edit the label in the Site Editor) styled as
   plain text + a CSS hamburger icon drawn on ::after — no filled button chrome. The bars use
   currentColor so they track the label colour, including the ocean hover. site.js binds the click +
   ARIA to the rendered <a>. !important is needed to override theme.json's filled-button element style. */
.ce-nav__toggle .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 0.4rem;
	border: 0;
	background-color: transparent !important;
	color: var( --wp--preset--color--heading ) !important;
	font-family: var( --wp--preset--font-family--sans );
	font-size: var( --wp--preset--font-size--medium );
	letter-spacing: 0.02em;
}
.ce-nav__toggle .wp-block-button__link:hover,
.ce-nav__toggle .wp-block-button__link:focus,
.ce-nav__toggle .wp-block-button__link:active {
	background-color: transparent !important;
	color: var( --wp--preset--color--ocean ) !important;
}
.ce-nav__toggle .wp-block-button__link::after {
	content: "";
	display: inline-block;
	width: 26px;
	height: 16px;
	background:
		linear-gradient( currentColor, currentColor ) 0 0 / 100% 2px no-repeat,
		linear-gradient( currentColor, currentColor ) 0 50% / 100% 2px no-repeat,
		linear-gradient( currentColor, currentColor ) 0 100% / 100% 2px no-repeat;
}

/* .ce-drawer is built from core blocks (wp:group, wp:image, wp:navigation, wp:paragraph) so the
   client can edit the menu in the Site Editor without touching raw HTML. wp:group can't carry a
   `hidden` attribute, so the initial hidden state lives entirely in CSS: visibility + pointer-events.
   The visibility transition is delayed by the panel's 350ms slide so the drawer stays interactive
   during the close animation, then snaps to hidden. assets/js/site.js toggles only the .is-open
   class — no `hidden` attribute timer. */
.ce-drawer {
	position: fixed;
	inset: 0;
	z-index: 100;
	visibility: hidden;
	pointer-events: none;
	transition: visibility 0s linear .35s;
}
.ce-drawer.is-open {
	visibility: visible;
	pointer-events: auto;
	transition: visibility 0s linear 0s;
}
.ce-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, .45 );
	opacity: 0;
	transition: opacity .35s ease;
}
.ce-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: min( 460px, 100% );
	box-sizing: border-box;
	padding: var( --wp--preset--spacing--80 ) var( --wp--preset--spacing--70 ) var( --wp--preset--spacing--70 );
	background: var( --wp--preset--color--complimentary );
	box-shadow: -16px 0 48px rgba( 0, 0, 0, .18 );
	transform: translateX( 100% );
	transition: transform .35s ease;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}
.ce-drawer.is-open .ce-drawer__backdrop { opacity: 1; }
.ce-drawer.is-open .ce-drawer__panel { transform: translateX( 0 ); }
html.ce-drawer-open { overflow: hidden; }

/* Site Editor overrides — the drawer is normally a position:fixed overlay (hidden until JS adds
   .is-open). That works on the front-end but in the Site Editor canvas it would either cover the
   whole editor or, more practically, be invisible (visibility:hidden) — which is the bug the
   client hit: the only way to reach the drawer's nav was the Document Overview tree.
   WordPress adds .editor-styles-wrapper to the editor's body, so these rules apply ONLY in the
   editor iframe. We unpin the drawer (position:static), force visibility, drop the backdrop, and
   undo the panel's offscreen translate so the contents render inline and clickable. */
.editor-styles-wrapper .ce-drawer {
	position: static;
	visibility: visible;
	pointer-events: auto;
	transition: none;
}
.editor-styles-wrapper .ce-drawer__backdrop {
	display: none;
}
.editor-styles-wrapper .ce-drawer__panel {
	position: static;
	transform: none;
	width: 100%;
	max-width: 460px;
	height: auto;
	box-shadow: none;
	transition: none;
}

.ce-drawer__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var( --wp--preset--spacing--50 );
	margin-bottom: var( --wp--preset--spacing--70 );
}
.ce-drawer__close {
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var( --wp--preset--color--heading );
	font-size: 2.25rem;
	line-height: 1;
	cursor: pointer;
}
.ce-drawer__close:hover { color: var( --wp--preset--color--ocean ); }
/* Drawer logo. Now rendered as wp:image (figure > img) so the client can swap from the media
   library — class lands on the figure, so size both the figure and the inner img. No white mat,
   shadow or border-radius — the cream drawer bg is the backdrop. */
.ce-drawer__image,
.ce-drawer__image img {
	display: block;
	width: 240px;
	max-width: 70%;
	height: auto;
}
.ce-drawer__image { margin: 0; }	/* figure resets — block editor adds default margin */

/* Drawer nav is now a core/navigation block, so the markup is
   <nav class="wp-block-navigation ce-drawer__nav"><ul class="wp-block-navigation__container">...</ul></nav>
   instead of the old hand-rolled <ul>. Selectors are upgraded to (a) reset core's default
   inline-flex / horizontal layout and (b) restyle the link typography to match the previous
   drawer look. */
.ce-drawer__nav { width: 100%; }
.ce-drawer__nav .wp-block-navigation__container {
	list-style: none;
	margin: 0;
	padding: 0;
	flex-direction: column;
	align-items: flex-start;
	gap: var( --wp--preset--spacing--40 );
}
.ce-drawer__nav .wp-block-navigation-item__content {
	font-family: var( --wp--preset--font-family--serif );
	font-size: clamp( 1.75rem, 1.4rem + 1.4vw, 2.25rem );
	line-height: 1.1;
	color: var( --wp--preset--color--heading );
	text-decoration: none;
	padding: 0;
}
.ce-drawer__nav .wp-block-navigation-item__content:hover,
.ce-drawer__nav .wp-block-navigation-item__content:focus {
	color: var( --wp--preset--color--ocean );
}

.ce-drawer__contact {
	margin-top: auto;
	padding-top: var( --wp--preset--spacing--60 );
}
.ce-drawer__tagline {
	font-family: var( --wp--preset--font-family--serif );
	font-style: italic;
	font-size: 1.25rem;
	color: var( --wp--preset--color--accent );
	margin: 0 0 var( --wp--preset--spacing--30 );
}
.ce-drawer__contact p { margin: 0 0 var( --wp--preset--spacing--20 ); }
.ce-drawer__contact a {
	color: var( --wp--preset--color--heading );
	text-decoration: none;
}
.ce-drawer__contact a:hover {
	color: var( --wp--preset--color--ocean );
	text-decoration: underline;
}
.ce-drawer__phone a { font-size: 1.35rem; }

/* core/site-logo (used in both header and footer). Belt-and-braces transparent background in case a
   theme/plugin upstream slaps a white BG on the figure or img. */
.wp-block-site-logo,
.wp-block-site-logo a,
.wp-block-site-logo img {
	background: transparent !important;
}

/* Utility bar — aqua-blue strip above the main header (patterns/header.php). Contact links inherit
   white from the bar and underline on hover; social icons stay white and lighten on hover. */
.site-utility-bar { z-index: 31; position: relative; }
.site-utility-bar a {
	color: inherit;
	text-decoration: none;
}
.site-utility-bar a:hover { text-decoration: underline; }
.site-utility-bar__contact { letter-spacing: 0.04em; }
.site-utility-bar__social .wp-block-social-link a:hover { opacity: 0.75; }

/* Italic-serif bronze accent (price lines, eyebrow accents) — useful pattern across travel sites. */
.it-accent {
	font-family: var( --wp--preset--font-family--serif );
	font-style: italic;
	color: var( --wp--preset--color--accent );
}

/* Outline buttons on dark photo heroes: white text + white hairline border. */
.wp-block-button.is-style-outline .wp-block-button__link { border-color: currentColor; }

/* Hero text shadow — the cover photo brightness varies (sky, hull, sea spray) so the white headline,
   eyebrow and lede need extra contrast. A tight near-shadow sharpens edges; a wider soft halo darkens
   the surrounding pixels enough that the type stays readable against bright zones of the photo. */
.ce-hero .wp-block-cover__inner-container h1,
.ce-hero .wp-block-cover__inner-container p {
	text-shadow:
		0 1px 2px rgba( 0, 0, 0, 0.55 ),
		0 2px 18px rgba( 0, 0, 0, 0.45 );
}

/* Aqua CTA buttons (header "Inquire Now" + bottom contact-band). theme.json's default button :hover
   swaps to dark grey, which clashes with the welcoming aqua. Keep hover in the ocean family — a
   slightly deeper aqua — so the brighter look holds on interaction. */
.wp-block-button__link.has-ocean-background-color:hover,
.wp-block-button__link.has-ocean-background-color:focus,
.wp-block-button__link.has-ocean-background-color:active {
	background-color: #235e78 !important;
	color: var( --wp--preset--color--base ) !important;
}

/* List style: removes bullets/padding from a core/list — register-block-style in functions.php as
   'core/list' / 'no-bullets'. Used in footer link columns. */
.is-style-no-bullets {
	list-style: none;
	padding-left: 0;
}
.is-style-no-bullets li { padding-left: 0; }

/* Cruise-type cards (patterns/cruise-types.php). Background image is set via CSS class — the
   cover block's save() output is fragile across Gutenberg versions and triggers "attempt to
   recover" prompts that lock up the editor. Image URLs come from CSS custom properties so a
   Customizer override (functions.php → cruise_escapes_card_images_inline_css) can swap them
   without touching the saved post content. Defaults point at the bundled theme images. */
:root {
	--ce-card-ocean:      url( "assets/images/card-ocean.jpg" );
	--ce-card-river:      url( "assets/images/card-river.jpg" );
	--ce-card-expedition: url( "assets/images/card-expedition.jpg" );
}
.cruise-card {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.cruise-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( to top, rgba( 0, 0, 0, 0.55 ) 0%, rgba( 0, 0, 0, 0 ) 60% );
	pointer-events: none;
	z-index: 0;
}
.cruise-card > * { position: relative; z-index: 1; }
.cruise-card--ocean      { background-image: var( --ce-card-ocean ); }
.cruise-card--river      { background-image: var( --ce-card-river ); }
.cruise-card--expedition { background-image: var( --ce-card-expedition ); }

/* -----------------------------------------------------------------------------------------------
   Category page sections (Ocean / River / Expedition)

   The three cruise-* page patterns (patterns/cruise-ocean.php etc.) inline a stack of small
   section patterns from patterns/section-*.php — glance strip, "a day" timeline, destinations
   grid, lines panels, FAQs, featured-trips slot, compare rail. The rules below add the chrome
   theme.json can't express: hairlines between cells, accordion markers, panel highlights. All
   namespaced .ce-* to match .ce-hero / .ce-drawer / .ce-nav__toggle conventions above.
   ----------------------------------------------------------------------------------------------- */

/* At-a-glance facts strip — hairline separators between cells on wider screens, none on mobile
   so the stack reads cleanly when columns wrap. */
.ce-glance__label {
	color: var( --wp--preset--color--accent );
	font-weight: 500;
}
.ce-glance__value {
	color: var( --wp--preset--color--heading );
	font-family: var( --wp--preset--font-family--serif );
	line-height: 1.2;
}
@media ( min-width: 782px ) {
	.ce-glance__grid > .wp-block-column + .wp-block-column {
		border-left: 1px solid rgba( 0, 0, 0, 0.08 );
		padding-left: var( --wp--preset--spacing--60 );
	}
}

/* "A day on board" timeline — narrow rule between moments, accent on the time-of-day label. */
.ce-day__row + .ce-day__row {
	border-top: 1px solid rgba( 0, 0, 0, 0.08 );
	padding-top: var( --wp--preset--spacing--60 );
}
.ce-day__label {
	color: var( --wp--preset--color--accent );
	font-style: italic;
}

/* Destinations grid — minor card polish; the existing wp-block-cover handles the rest. */
.ce-destinations__card h3 {
	line-height: 1.15;
}

/* Lines grid — tighter h4 leading and an underline-accent column gap on wider screens. */
.ce-lines-grid > .wp-block-column h4 {
	color: var( --wp--preset--color--heading );
	line-height: 1.15;
}
@media ( min-width: 782px ) {
	.ce-lines-grid > .wp-block-column + .wp-block-column {
		border-left: 1px solid rgba( 0, 0, 0, 0.06 );
		padding-left: var( --wp--preset--spacing--60 );
	}
}

/* FAQ accordions — drop the native disclosure marker, add a +/− indicator and a thin separator
   between questions so the list reads as one scannable stack. core/details renders the wrapper
   div + a <details><summary> internally; the styles below target the structure WP emits. */
.ce-faqs .wp-block-details {
	border-top: 1px solid rgba( 0, 0, 0, 0.1 );
	padding: var( --wp--preset--spacing--50 ) 0;
}
.ce-faqs .wp-block-details:last-of-type {
	border-bottom: 1px solid rgba( 0, 0, 0, 0.1 );
}
.ce-faqs .wp-block-details > summary {
	cursor: pointer;
	font-family: var( --wp--preset--font-family--serif );
	font-size: 1.25rem;
	color: var( --wp--preset--color--heading );
	list-style: none;
	padding-right: 2rem;
	position: relative;
}
.ce-faqs .wp-block-details > summary::-webkit-details-marker {
	display: none;
}
.ce-faqs .wp-block-details > summary::after {
	content: "+";
	position: absolute;
	right: 0;
	top: -0.125em;
	font-size: 1.5rem;
	line-height: 1;
	color: var( --wp--preset--color--accent );
}
.ce-faqs .wp-block-details[ open ] > summary::after {
	content: "–";
}
.ce-faqs .wp-block-details > summary:hover {
	color: var( --wp--preset--color--ocean );
}
.ce-faqs .wp-block-details p {
	margin-top: var( --wp--preset--spacing--40 );
}

/* Featured-trips slot — small accent rule above so the section signals itself without needing
   its own band background. ::before sits inside .ce-featured-slot's group container. */
.ce-featured-slot::before {
	content: "";
	display: block;
	width: 60px;
	height: 2px;
	background: var( --wp--preset--color--accent );
	margin: 0 auto var( --wp--preset--spacing--60 );
}

/* Compare rail — three panels with the current one highlighted by a top aqua hairline + cream
   background. .ce-compare__current is applied on the relevant column of each cruise-*.php page
   (only one panel per page is highlighted). */
.ce-compare__panel {
	background: var( --wp--preset--color--base );
	border: 1px solid rgba( 0, 0, 0, 0.06 );
}
.ce-compare__panel.ce-compare__current {
	background: var( --wp--preset--color--complimentary );
	border: 1px solid var( --wp--preset--color--complimentary );
	border-top: 3px solid var( --wp--preset--color--ocean );
}
.ce-compare__label {
	color: var( --wp--preset--color--accent );
}
.ce-compare__current .ce-compare__label {
	color: var( --wp--preset--color--ocean );
	font-weight: 500;
}

/* Travel resources mini-cards (patterns/section-travel-resources.php + the Already Booked page).
   CSS-grid of white cards on the cream band — auto-fit columns so the 14-card grid reflows
   cleanly across screen sizes without empty wp:columns slots. Each card has an inline SVG icon,
   h4 title, short body and an arrow link. Icon colour tracks the link colour via currentColor
   so the hover state tints icon + link together. */
.ce-resources__grid {
	display: grid !important;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) ) !important;
	gap: var( --wp--preset--spacing--50 );
	align-items: stretch;
}
/* WordPress's is-layout-flow class applies `margin-block-start: blockGap` to children via
   `> * + *` — so the first child has no top margin, all others do. In CSS grid that means
   the first card sits flush with the row top while cards 2..N are pushed down ~24px. Zero
   the inherited margin on every grid item so they all align at the row top. */
.ce-resources__grid > * {
	margin-top: 0 !important;
	margin-block-start: 0 !important;
}
.ce-resources__grid > .wp-block-column {
	height: 100%;
	padding: 0 !important;
	flex-basis: auto !important;
}
.ce-resource-card {
	display: flex !important;
	flex-direction: column;
	height: 100%;
}
.ce-resource-card {
	height: 100%;
	border: 1px solid rgba( 0, 0, 0, 0.06 );
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ce-resource-card:hover {
	transform: translateY( -2px );
	box-shadow: 0 12px 28px rgba( 0, 0, 0, 0.08 );
	border-color: rgba( 0, 0, 0, 0.1 );
}
.ce-resource-card__icon {
	width: 40px;
	height: 40px;
	color: var( --wp--preset--color--accent );
	/* !important defeats constrained-layout's `margin: auto !important` on saved post_content
	   that was inserted before the cards had `layout: constrained` removed. Without this, the
	   first card's 40px icon block centres horizontally while text below stretches full-width. */
	margin: 0 0 var( --wp--preset--spacing--40 ) !important;
}
.ce-resource-card__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}
.ce-resource-card:hover .ce-resource-card__icon {
	color: var( --wp--preset--color--ocean );
}

/* About page — counsellor cards (patterns/about.php).
   Three-up grid of agent cards on the cream band. Same flow-layout block-gap workaround as
   .ce-resources__grid: WP applies margin-block-start to children 2..N which would push later
   cards down relative to the first; zero it so cards align at the row top. Avatar is a coloured
   circle with centered initials — swap to a wp:image of a real headshot per card by replacing
   the .ce-team-card__avatar block in the pattern. */
.ce-team__grid {
	display: grid !important;
	grid-template-columns: repeat( auto-fit, minmax( 280px, 1fr ) ) !important;
	gap: var( --wp--preset--spacing--60 );
	align-items: stretch;
}
.ce-team__grid > * {
	margin-top: 0 !important;
	margin-block-start: 0 !important;
}
.ce-team-card {
	display: flex !important;
	flex-direction: column;
	height: 100%;
	border: 1px solid rgba( 0, 0, 0, 0.06 );
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ce-team-card:hover {
	transform: translateY( -2px );
	box-shadow: 0 12px 28px rgba( 0, 0, 0, 0.08 );
}
.ce-team-card__avatar {
	width: 128px;
	height: 128px;
	border-radius: 50%;
	overflow: hidden;
	background: var( --wp--preset--color--complimentary );
	/* !important defeats constrained-layout's `margin: auto !important` — keeps the avatar
	   centered horizontally with consistent spacing above the name. */
	margin: 0 auto var( --wp--preset--spacing--40 ) !important;
}
.ce-team-card__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Contact page — sidebar (eyebrow / phone / email / address) + form card
   layout. The wp:group wrapper in patterns/contact.php carries the `.ce-contact`
   class plus the cream `complimentary` background and full-width alignment;
   everything inside the wp:html block is rendered without WP layout interference,
   so we own the layout end-to-end here.

   Stacks above 1115px viewport: sidebar (max 320px) on the left, form card on
   the right. Below 1115px the sidebar drops above the card so the form never
   has to compete with the sidebar for room. The form's INNER row layout
   collapses independently via a container query in secureforms.css. */
.ce-contact__inner {
	max-width: 1200px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax( 0, 320px ) minmax( 0, 1fr );
	gap: var( --wp--preset--spacing--80 );
	align-items: start;
}
@media (max-width: 1115px) {
	.ce-contact__inner {
		grid-template-columns: 1fr;
		gap: var( --wp--preset--spacing--60 );
	}
}

/* Shared eyebrow used in both the sidebar and the form-card intro. */
.ce-contact__eyebrow {
	margin: 0 0 var( --wp--preset--spacing--40 );
	color: var( --wp--preset--color--accent );
	font-size: var( --wp--preset--font-size--x-small );
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-weight: 600;
}

/* Sidebar — info channels (phone / email / mail). */
.ce-contact__info h2 {
	margin: 0 0 var( --wp--preset--spacing--40 );
	color: var( --wp--preset--color--heading );
	font-family: var( --wp--preset--font-family--serif );
	font-size: var( --wp--preset--font-size--x-large );
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.02em;
}
.ce-contact__info > p {
	margin: 0 0 var( --wp--preset--spacing--60 );
	color: var( --wp--preset--color--body );
	font-size: var( --wp--preset--font-size--medium );
}
.ce-contact__channel { margin: 0 0 var( --wp--preset--spacing--50 ); }
.ce-contact__channel-label {
	margin: 0 0 0.3rem;
	color: var( --wp--preset--color--accent );
	font-size: var( --wp--preset--font-size--x-small );
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-weight: 600;
}
.ce-contact__channel-value {
	margin: 0;
	color: var( --wp--preset--color--heading );
	font-size: var( --wp--preset--font-size--medium );
}
.ce-contact__channel-value a { color: inherit; text-decoration: none; }
.ce-contact__channel-value a:hover { color: var( --wp--preset--color--ocean ); }
.ce-contact__channel--phone .ce-contact__channel-value {
	font-family: var( --wp--preset--font-family--serif );
	font-size: clamp( 1.5rem, 1.5rem + 1vw, 2rem );
	color: var( --wp--preset--color--ocean );
}
.ce-contact__channel--mail address { font-style: normal; line-height: 1.55; }

/* Form card — white background, soft shadow, generous padding. */
.ce-contact__card {
	background: var( --wp--preset--color--base );
	border-radius: 8px;
	padding: var( --wp--preset--spacing--80 ) var( --wp--preset--spacing--70 );
	box-shadow: 0 8px 32px rgba( 0, 0, 0, 0.04 );
}
.ce-contact__card .ce-contact__eyebrow { margin-bottom: 0.5rem; }
.ce-contact__card h2 {
	margin: 0 0 var( --wp--preset--spacing--40 );
	color: var( --wp--preset--color--heading );
	font-family: var( --wp--preset--font-family--serif );
	font-size: var( --wp--preset--font-size--x-large );
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.02em;
}
.ce-contact__card > p {
	margin: 0 0 var( --wp--preset--spacing--60 );
	color: var( --wp--preset--color--body );
	font-size: var( --wp--preset--font-size--medium );
}