/*
 * Murex Resorts — base layer
 *
 * Token flow (docs/design/*):
 *   theme.json presets (--wp--preset--*, --wp--custom--*)
 *     -> primitive aliases with the names used in the design docs (--color-brand-*, --space-*, ...)
 *       -> semantic layer (--color-surface-*, --color-text-*, --color-border-*, --color-feedback-*)
 *
 * Page/component CSS references ONLY the semantic layer plus the spacing / type / radius / layout
 * scales. It never references a --color-brand-*, --color-neutral-* or --color-state-* primitive.
 * The [data-mode="inverse"] re-aliasing block lives in theme.json (styles.css) next to the
 * global focus ring, so the editor gets it too; this file defines the Default values it overrides.
 */

/* ---------------------------------------------------------------- Fonts (self-hosted) */
@font-face {
	font-family: 'Josefin Sans';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/josefin-sans-variable-latin.woff2') format('woff2');
}

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/roboto-variable-latin.woff2') format('woff2');
}

/* ---------------------------------------------------------------- Tokens */
:root,
[data-mode="default"] {
	/* Primitives: colour (COLORS.md §1) — aliases of the theme.json palette. Never used by page CSS. */
	--color-brand-primary: var(--wp--preset--color--primary);
	--color-brand-primary-dark: var(--wp--preset--color--primary-dark);
	--color-brand-primary-light: var(--wp--preset--color--primary-light);
	--color-brand-accent: var(--wp--preset--color--accent);
	--color-brand-secondary: var(--wp--preset--color--secondary);
	--color-neutral-50: var(--wp--preset--color--neutral-50);
	--color-neutral-100: var(--wp--preset--color--neutral-100);
	--color-neutral-200: var(--wp--preset--color--neutral-200);
	--color-neutral-300: var(--wp--preset--color--neutral-300);
	--color-neutral-400: var(--wp--preset--color--neutral-400);
	--color-neutral-500: var(--wp--preset--color--neutral-500);
	--color-neutral-600: var(--wp--preset--color--neutral-600);
	--color-neutral-700: var(--wp--preset--color--neutral-700);
	--color-neutral-800: var(--wp--preset--color--neutral-800);
	--color-neutral-900: var(--wp--preset--color--neutral-900);
	--color-state-success: var(--wp--preset--color--success);
	--color-state-warning: var(--wp--preset--color--warning);
	--color-state-error: var(--wp--preset--color--error);
	--color-white: var(--wp--preset--color--white);

	/* Semantic layer — Default mode (COLORS.md §2) */
	--color-surface-page: var(--color-white);
	--color-surface-subtle: var(--color-neutral-100);
	--color-surface-accent: var(--color-brand-accent);
	--color-surface-secondary: var(--color-brand-secondary);
	--color-surface-brand: var(--color-brand-primary);
	--color-surface-brand-hover: var(--color-brand-primary-dark);
	--color-surface-on-brand: var(--color-white);
	--color-text-primary: var(--color-neutral-800);
	--color-text-secondary: var(--color-neutral-700);
	--color-text-muted: var(--color-neutral-600);
	--color-text-link: var(--color-brand-primary);
	--color-text-brand: var(--color-brand-primary);
	--color-text-on-accent: var(--color-neutral-800);
	--color-text-on-secondary: var(--color-neutral-800);
	--color-text-on-brand: var(--color-white);
	--color-border-subtle: var(--color-neutral-200);
	--color-border-strong: var(--color-brand-primary);
	--color-border-focus: var(--color-brand-primary);
	--color-feedback-success: var(--color-state-success);
	--color-feedback-warning: var(--color-state-warning);
	--color-feedback-error: var(--color-state-error);
}

:root {
	/* Type (TYPOGRAPHY.md §5) */
	--font-josefin: 'Josefin Sans', sans-serif;
	--font-roboto: 'Roboto', sans-serif;

	--fs-display: var(--wp--preset--font-size--display);
	--fs-h1: var(--wp--preset--font-size--h-1);
	--fs-h2: var(--wp--preset--font-size--h-2);
	--fs-h3: var(--wp--preset--font-size--h-3);
	--fs-h4: var(--wp--preset--font-size--h-4);
	--fs-body-lg: var(--wp--preset--font-size--body-lg);
	--fs-body: var(--wp--preset--font-size--body);
	--fs-body-sm: var(--wp--preset--font-size--body-sm);
	--fs-label: var(--wp--preset--font-size--label);
	--fs-button: var(--wp--preset--font-size--button);
	--fs-eyebrow: var(--wp--preset--font-size--eyebrow);
	--fs-price: var(--wp--preset--font-size--price);

	--lh-display: var(--wp--custom--line-height--display);
	--lh-h1: var(--wp--custom--line-height--h-1);
	--lh-h2: var(--wp--custom--line-height--h-2);
	--lh-h3: var(--wp--custom--line-height--h-3);
	--lh-h4: var(--wp--custom--line-height--h-4);
	--lh-body-lg: var(--wp--custom--line-height--body-lg);
	--lh-body: var(--wp--custom--line-height--body);
	--lh-body-sm: var(--wp--custom--line-height--body-sm);
	--lh-label: var(--wp--custom--line-height--label);
	--lh-button: var(--wp--custom--line-height--button);
	--lh-eyebrow: var(--wp--custom--line-height--eyebrow);
	--lh-price: var(--wp--custom--line-height--price);

	--ls-heading: var(--wp--custom--letter-spacing--heading);
	--ls-label: var(--wp--custom--letter-spacing--label);
	--ls-button: var(--wp--custom--letter-spacing--button);
	--ls-eyebrow: var(--wp--custom--letter-spacing--eyebrow);

	/* Spacing scale (SPACING.md §1) */
	--space-none: var(--wp--preset--spacing--none);
	--space-xs: var(--wp--preset--spacing--xs);
	--space-sm: var(--wp--preset--spacing--sm);
	--space-md: var(--wp--preset--spacing--md);
	--space-base: var(--wp--preset--spacing--base);
	--space-lg: var(--wp--preset--spacing--lg);
	--space-xl: var(--wp--preset--spacing--xl);
	--space-2xl: var(--wp--preset--spacing--2-xl);
	--space-3xl: var(--wp--preset--spacing--3-xl);
	--space-4xl: var(--wp--preset--spacing--4-xl);
	--space-5xl: var(--wp--preset--spacing--5-xl);
	--space-6xl: var(--wp--preset--spacing--6-xl);

	/* Radius scale (SPACING.md §2) */
	--radius-none: var(--wp--custom--radius--none);
	--radius-sm: var(--wp--custom--radius--sm);
	--radius-base: var(--wp--custom--radius--base);
	--radius-lg: var(--wp--custom--radius--lg);
	--radius-xl: var(--wp--custom--radius--xl);
	--radius-full: var(--wp--custom--radius--full);

	/* Layout (GRID-LAYOUT.md §6) */
	--container-max: var(--wp--custom--layout--container-max);
	--content-desktop: var(--wp--custom--layout--content-desktop);
	--content-mobile: var(--wp--custom--layout--content-mobile);
	--page-gutter-desktop: var(--wp--custom--layout--page-gutter-desktop);
	--page-gutter-mobile: var(--wp--custom--layout--page-gutter-mobile);
	--page-gutter-md: var(--wp--custom--layout--page-gutter-md);
	--grid-gutter: var(--wp--custom--layout--grid-gutter);
	--section-rhythm-desktop: var(--wp--custom--layout--section-rhythm-desktop);
	--section-rhythm-mobile: var(--wp--custom--layout--section-rhythm-mobile);
	--body-measure: var(--wp--custom--layout--body-measure);
	--touch-target: var(--wp--custom--layout--touch-target);
	--touch-target-min: var(--wp--custom--layout--touch-target-min);
	--target-gap: var(--wp--custom--layout--target-gap);

	/* Breakpoints (RESPONSIVE.md §1) — documentation tokens; media queries cannot read custom properties */
	--bp-mobile: var(--wp--custom--breakpoint--mobile);
	--bp-sm: var(--wp--custom--breakpoint--sm);
	--bp-md: var(--wp--custom--breakpoint--md);
	--bp-lg: var(--wp--custom--breakpoint--lg);
	--bp-xl: var(--wp--custom--breakpoint--xl);
	--bp-2xl: var(--wp--custom--breakpoint--xxl);

	/* Elevation & scrims (DESIGN-GUIDELINES.md §9) */
	--elevation-0: var(--wp--custom--elevation--0);
	--elevation-1: var(--wp--custom--elevation--1);
	--elevation-2: var(--wp--custom--elevation--2);
	--elevation-3: var(--wp--custom--elevation--3);
	--scrim-bottom: var(--wp--custom--scrim--bottom);
	--scrim-flat: var(--wp--custom--scrim--flat);

	/*
	 * Motion + stacking: not defined in Figma. Small named duration scale defined here (single source);
	 * `--duration-fast` is kept as the legacy alias used by the header and sections. See the Open
	 * Question / decision log in docs/ai/AI-INSTRUCTIONS.md §4-§5.
	 *
	 *  - --hover-delay is the hover-intent pause applied ONLY to a hover entry (never to focus and
	 *    never to a collapse), so sweeping across a row does not fire every card.
	 *  - --ease-out is the single decelerating curve for card motion (fast start, gentle settle).
	 *  - --transition-slow is the deliberate width/shape change; the text stagger uses the faster
	 *    step so the copy is not on screen while the card is still mostly collapsed.
	 */
	--transition-fast: 150ms;
	--transition-base: 250ms;
	--transition-slow: 420ms;
	--hover-delay: 140ms;
	--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
	--duration-fast: var(--transition-fast);
	/*
	 * Beyond the Reef single-track carousel (2026-10-08): the owner specified a 700ms travel on one
	 * strongly front-loaded curve, plus an element-level text sequence — 280ms out, 380ms in, staggered
	 * 0/60/120ms across title, description and CTA. Named here as the single source (the `--ease-reef`
	 * curve is deliberately not `--ease-out`; see the deviation log entry for "single translate3d track").
	 */
	--transition-reef: 700ms;
	--transition-reef-out: 280ms;
	--transition-reef-in: 380ms;
	--reef-stagger: 60ms;
	--ease-reef: cubic-bezier(0.22, 1, 0.36, 1);
	--z-dropdown: 100;
	--z-sticky: 200;
	--z-drawer: 300;

	/* Responsive layout values switch with the breakpoint (RESPONSIVE.md §2) */
	--page-gutter: var(--page-gutter-mobile);
	--section-rhythm: var(--section-rhythm-mobile);
}

@media (min-width: 768px) {
	:root {
		--page-gutter: var(--page-gutter-md);
	}
}

@media (min-width: 1024px) {
	:root {
		--page-gutter: var(--page-gutter-desktop);
		--section-rhythm: var(--section-rhythm-desktop);
	}
}

/* Default-mode surface re-assertion, for a Default card nested inside an Inverse band. */
[data-mode="default"] {
	background-color: var(--color-surface-page);
	color: var(--color-text-primary);
}

/*
 * Inverse mode (COLORS.md §2.1) — re-aliases the semantic layer only.
 * Surfaces flip to primary-dark, text to white, focus ring to white,
 * border/subtle -> neutral/400, border/strong -> neutral/300, text/link -> secondary.
 */
[data-mode="inverse"] {
	--color-surface-page: var(--color-brand-primary-dark);
	--color-text-primary: var(--color-white);
	--color-text-secondary: var(--color-white);
	--color-text-muted: var(--color-neutral-200);
	--color-text-link: var(--color-brand-secondary);
	--color-border-subtle: var(--color-neutral-400);
	--color-border-strong: var(--color-neutral-300);
	--color-border-focus: var(--color-white);
}

/* ---------------------------------------------------------------- Element / reset layer */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font-roboto);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	background-color: var(--color-surface-page);
	color: var(--color-text-primary);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img,
svg,
video {
	display: block;
	max-inline-size: 100%;
	block-size: auto;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

a {
	color: var(--color-text-link);
}

[hidden] {
	display: none !important;
}

/* Body copy never spans the full container on desktop (68ch measure). */
p,
.wp-block-post-content > :where(p, ul, ol, blockquote) {
	max-inline-size: var(--body-measure);
}

/* Josefin Sans is uppercase only; case is applied here, never typed into content (TYPOGRAPHY.md §4). */
h1,
h2,
.t-display,
.t-eyebrow,
.c-button {
	font-family: var(--font-josefin);
	text-transform: uppercase;
}

/* de / fr / nl: Josefin headings switch to sentence case (TYPOGRAPHY.md §4.2). */
html[lang^="de"] :is(h1, h2, .t-display),
html[lang^="fr"] :is(h1, h2, .t-display),
html[lang^="nl"] :is(h1, h2, .t-display) {
	text-transform: none;
}

/* Long unbreakable words (uppercase, tracked Josefin) must wrap inside their column instead of
   widening the document at the 320px no-horizontal-scroll floor (RESPONSIVE.md §1). */
h1,
h2,
.t-display,
.t-h1,
.t-h2 {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Text style helpers (TYPOGRAPHY.md §2) */
.t-display {
	font-size: var(--fs-display);
	font-weight: 700;
	line-height: var(--lh-display);
	letter-spacing: var(--ls-heading);
}

.t-h1 {
	font-size: var(--fs-h1);
	font-weight: 700;
	line-height: var(--lh-h1);
	letter-spacing: var(--ls-heading);
}

.t-h2 {
	font-size: var(--fs-h2);
	font-weight: 700;
	line-height: var(--lh-h2);
	letter-spacing: var(--ls-heading);
}

.t-eyebrow {
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	line-height: var(--lh-eyebrow);
	letter-spacing: var(--ls-eyebrow);
}

.t-label {
	font-family: var(--font-roboto);
	font-size: var(--fs-label);
	font-weight: 500;
	line-height: var(--lh-label);
	letter-spacing: var(--ls-label);
}

.t-body-lg {
	font-size: var(--fs-body-lg);
	line-height: var(--lh-body-lg);
}

.t-body-sm {
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body-sm);
}

.u-text-left {
	text-align: left;
}

.u-text-center {
	text-align: center;
}

/* ---------------------------------------------------------------- Layout helpers */

/* 1280 container: content is capped at --container-max, page gutter sits outside it (GRID-LAYOUT.md §1). */
.l-container {
	box-sizing: content-box;
	max-inline-size: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--page-gutter);
}

/* Grid: 1 col mobile, 6 at md, 12 at lg+, 24px gutter at every size (GRID-LAYOUT.md §3). */
.l-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--grid-gutter);
}

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

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

/* Section rhythm: 64 mobile / 96 lg+. Adjacent subtle sections merge their padding. */
.l-section {
	padding-block: var(--section-rhythm);
}

.l-section--subtle {
	background-color: var(--color-surface-subtle);
}

.l-section--subtle + .l-section--subtle {
	padding-block-start: 0;
}

/* ---------------------------------------------------------------- Utilities */

/* Copy that genuinely differs between desktop and mobile (e.g. the "Explore the ocean" heading).
   The hidden variant is display:none, so it is also removed from the accessibility tree. */
@media (max-width: 1023.98px) {
	.u-hide-below-lg {
		display: none;
	}
}

@media (min-width: 1024px) {
	.u-show-below-lg {
		display: none;
	}
}

.visually-hidden,
.screen-reader-text {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.visually-hidden.is-focusable:focus,
.visually-hidden.is-focusable:focus-visible {
	position: fixed !important;
	inset-block-start: var(--space-sm);
	inset-inline-start: var(--space-sm);
	inline-size: auto;
	block-size: auto;
	margin: 0;
	padding: var(--space-md) var(--space-lg);
	overflow: visible;
	clip-path: none;
	z-index: calc(var(--z-drawer) + 1);
	background-color: var(--color-surface-page);
	color: var(--color-text-link);
	font-weight: 500;
}

/* Focus ring: 2px, border/focus, 2px offset on every focusable element — defined once in theme.json (styles.css). */

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-delay: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		/* Also drop any hover-intent / stagger delay, so reduced motion is truly instant. */
		transition-delay: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------- Core block touch-ups */
/* Default templates give main the section rhythm; full-bleed templates opt out with .is-flush. */
.wp-site-blocks main {
	padding-block: var(--section-rhythm);
}

.wp-site-blocks main.is-flush {
	padding-block: 0;
}

.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: var(--touch-target);
	padding-block: var(--space-md);
	border-width: 2px;
	border-style: solid;
	text-align: center;
	/* Long CTAs ("Discover Passport to Paradise") must wrap at 320px rather than force horizontal scroll. */
	white-space: normal;
}

/*
 * Low-specificity defaults: block style variations (0-1-0) override the border colour and
 * text-decoration. The default hover (background + text) lives in theme.json
 * (styles.blocks."core/button".":hover"), because a rule here would sit after the variation
 * stylesheet and out-rank the variant hovers on the specificity tie.
 */
:where(.wp-element-button),
:where(.wp-block-button__link) {
	border-color: transparent;
	text-decoration: none;
}