/* -----------------------------------------------------------------------------
   Whitsunday Escape — Base: reset, document defaults, typography, layout helpers
-------------------------------------------------------------------------------- */

/*
 * Metric-matched stand-in for Inter. Inter arrives from Google Fonts with
 * display=swap, so text first paints in a fallback face; sizing Arial to
 * Inter's metrics keeps line wrapping, and so card heights, the same when the
 * real font swaps in — the reviews quotes were reflowing and shifting the
 * page below them.
 */
@font-face {
	font-family: "Inter Fallback";
	src: local("Arial");
	size-adjust: 107.4%;
	ascent-override: 90.2%;
	descent-override: 22.5%;
	line-gap-override: 0%;
}

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

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

body {
	margin: 0;
	background-color: var(--wse-gray-blue-50);
	color: var(--wse-gray-900);
	font-family: var(--wse-font-sans);
	font-size: var(--wse-text-md-size);
	font-weight: var(--wse-weight-regular);
	line-height: var(--wse-text-md-line);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-weight: var(--wse-weight-medium);
}

p {
	margin: 0;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * These all carry UA margins that quietly break layout — figure and blockquote
 * default to `margin: 1em 40px`, dd to a 40px inline start.
 */
figure,
figcaption,
blockquote,
dl,
dd,
fieldset {
	margin: 0;
}

input,
select,
textarea,
button {
	margin: 0;
}

a {
	color: inherit;
	text-decoration: none;
}

img,
svg {
	display: block;
	max-width: 100%;
}

button {
	font: inherit;
	color: inherit;
	margin: 0;
}

/* Anything that acts as a button, including form submit inputs. */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
[role="button"],
.wse-btn {
	cursor: pointer;
}

button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
[aria-disabled="true"] {
	cursor: not-allowed;
}

/* Visible focus for keyboard users only — never remove the indicator outright. */
:focus-visible {
	outline: none;
}

/* --- Page shell ------------------------------------------------------------ */
/*
 * Everything sits inside a white shell capped at 1920px so the layout does not
 * sprawl on ultrawide displays; the body backdrop shows either side of it.
 */
.wse-page {
	max-width: var(--wse-page-max);
	margin-inline: auto;
	overflow-x: clip;
}

/* --- Screen-reader-only ---------------------------------------------------- */
.wse-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- Typography scale ------------------------------------------------------ */
.wse-display-lg,
.wse-display-md,
.wse-display-sm,
.wse-display-xs {
	font-weight: var(--wse-weight-medium);
}

.wse-display-lg {
	font-size: var(--wse-display-lg-size);
	line-height: var(--wse-display-lg-line);
	letter-spacing: var(--wse-display-tracking);
}

.wse-display-md {
	font-size: var(--wse-display-md-size);
	line-height: var(--wse-display-md-line);
	letter-spacing: var(--wse-display-tracking);
}

.wse-display-sm {
	font-size: var(--wse-display-sm-size);
	line-height: var(--wse-display-sm-line);
}

.wse-display-xs {
	font-size: var(--wse-display-xs-size);
	line-height: var(--wse-display-xs-line);
}

.wse-text-xl {
	font-size: var(--wse-text-xl-size);
	line-height: var(--wse-text-xl-line);
}

.wse-text-lg {
	font-size: var(--wse-text-lg-size);
	line-height: var(--wse-text-lg-line);
}

.wse-text-md {
	font-size: var(--wse-text-md-size);
	line-height: var(--wse-text-md-line);
}

.wse-text-sm {
	font-size: var(--wse-text-sm-size);
	line-height: var(--wse-text-sm-line);
}

/* --- Layout ---------------------------------------------------------------- */
.wse-container {
	width: 100%;
	max-width: var(--wse-container-max);
	margin-inline: auto;
	padding-inline: var(--wse-gutter-mobile);
}

@media (min-width: 768px) {
	.wse-container {
		padding-inline: var(--wse-gutter-desktop);
	}
}

/* Fluid variant: keeps the responsive gutters, drops the max-width so the row
   spans the full viewport. */
.wse-container--fluid {
	max-width: none;
}