/**
 * The splash screen.
 *
 * Built from the Figma artboard "Splash page escolhida" (node 2080:4874),
 * which is drawn at 1920 × 1080. Every fixed number below is that artboard's
 * number; every clamp() is that number scaled so the same composition survives
 * a phone and a short laptop screen. The vw/vh coefficients are chosen so each
 * value lands exactly on the design figure at 1920 × 1080.
 *
 * Layout in one sentence: a three-row grid whose middle row is the content and
 * whose empty outer rows split the leftover height 1 : 3.44 — the ratio the
 * design uses (117px above the logo, 402px below the last line). That
 * reproduces the artboard's deliberate top-weighting at any viewport height,
 * without a magic offset that breaks when the window is short.
 */

/* ══ Design tokens ═════════════════════════════════════════════════════════ */

:root {
	/* Colour — Figma variables, same names. */
	--hadm-primary: #bfa576;        /* Primary            — headline, hairlines */
	--hadm-ink: #4d4d4d;            /* Color/Neutrals/700 — body copy */
	--hadm-ink-strong: #000;        /* Language label */
	--hadm-surface: #fefbf9;        /* The warm page ground */
	--hadm-surface-alt: #fafafa;    /* Surface/General/main-bg */

	/* Type */
	--hadm-font-display: 'Forum', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--hadm-font-body: 'Sarabun', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

	/*
	 * Headline: 62px at 1920 → 3.229vw. Tracking is -2.88px at 62px, expressed
	 * in em so it tracks the size instead of crushing small renderings.
	 * Line height 80/62.
	 */
	--hadm-size-heading: clamp(1.875rem, 3.229vw, 3.875rem);
	--hadm-tracking-heading: -0.0465em;
	--hadm-leading-heading: 1.29;

	/* Body: 18px at 1920, floored at 15px so it stays readable on a phone. */
	--hadm-size-body: clamp(0.9375rem, 0.938vw, 1.125rem);
	--hadm-leading-body: 1.2;

	/* Language control: fixed 14px — it is UI chrome, not prose. */
	--hadm-size-ui: 0.875rem;

	/*
	 * Spacing. Each is min(width-scaled, height-scaled) so a short-and-wide
	 * window tightens the stack instead of pushing the closing line off-screen.
	 */
	--hadm-gap-brand: min(clamp(1.75rem, 3.438vw, 4.125rem), 6.11vh);  /* 66px  */
	--hadm-gap-heading: clamp(0.75rem, 1.042vw, 1.25rem);              /* 20px  */
	--hadm-gap-block: 0.625rem;                                        /* 10px  */
	--hadm-gap-contact: 0.4375rem;                                     /* 7px   */

	/* Side gutter: 240px at 1920, but the content is capped at 1080px anyway. */
	--hadm-gutter: clamp(1.25rem, 8vw, 15rem);

	/* Content column: 1920 − 240 − 90 − 90, doubled. */
	--hadm-measure: 67.5rem;                                           /* 1080px */

	/* Brand mark: 322.5 × 279 at 1920 → 16.8vw, capped against viewport height. */
	--hadm-logo-width: min(clamp(11.25rem, 16.8vw, 20.1875rem), 30vh);
	--hadm-logo-ratio: 323 / 279;

	/* The photograph, as laid down in the design. */
	--hadm-backdrop-opacity: 0.3;

	/* Language control, top-right. 47px / 240px from the corner at 1920×1080. */
	--hadm-switcher-top: clamp(1.25rem, 4.35vh, 2.9375rem);
	--hadm-switcher-right: clamp(1.25rem, 12.5vw, 15rem);

	/* Empty-row ratio above : below the content block — 117 : 402.2. */
	--hadm-rise-above: 1fr;
	--hadm-rise-below: 3.44fr;

	/*
	 * Breathing room at the top and bottom. Applied as the *minimum* size of
	 * the two empty grid rows rather than as padding on the section: padding
	 * would be subtracted before the 1 : 3.44 split, pushing the whole block
	 * ~24px below where the artboard puts it. As a row minimum it only takes
	 * effect once the viewport is too short for the ratio to hold.
	 */
	--hadm-pad-top: clamp(1.5rem, 4vh, 3.5rem);
	--hadm-pad-bottom: clamp(1.5rem, 4vh, 3.5rem);
}

/* ══ Reset — only what this page actually needs ════════════════════════════ */

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

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

body.hadm {
	margin: 0;
	background-color: var(--hadm-surface-alt);
	color: var(--hadm-ink);
	font-family: var(--hadm-font-body);
	font-size: var(--hadm-size-body);
	font-weight: 300;
	line-height: var(--hadm-leading-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

body.hadm p {
	margin: 0;
}

body.hadm h1 {
	margin: 0;
	font-weight: 400;
}

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

/* Accessible-but-invisible text. The WordPress convention, kept verbatim so it
   behaves the way every screen reader already expects. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ══ The screen ════════════════════════════════════════════════════════════ */

.splash {
	position: relative;
	display: grid;
	grid-template-rows:
		minmax(var(--hadm-pad-top), var(--hadm-rise-above))
		auto
		minmax(var(--hadm-pad-bottom), var(--hadm-rise-below));
	min-height: 100vh;
	min-height: 100svh;
	padding-inline: var(--hadm-gutter);
	isolation: isolate;
}

/*
 * The photograph lives in its own layer so its opacity can be tuned without
 * fading the text above it. Anchored to the bottom edge, as in the design —
 * the frond sweeps in from the lower left and must stay attached there when
 * the aspect ratio changes.
 */
.splash__backdrop {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--hadm-surface);
}

.splash__backdrop::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: var(--splash-backdrop);
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: cover;
	opacity: var(--hadm-backdrop-opacity);
}

.splash__inner {
	grid-row: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: var(--hadm-measure);
	margin-inline: auto;
	text-align: center;
}

/* ── Brand mark ───────────────────────────────────────────────────────────── */

.splash__brand {
	margin-block-end: var(--hadm-gap-brand);
}

.splash__logo {
	width: var(--hadm-logo-width);
	height: auto;
	aspect-ratio: var(--hadm-logo-ratio);
	object-fit: contain;
}

/* ── Headline and intro ───────────────────────────────────────────────────── */

.splash__message {
	display: flex;
	flex-direction: column;
	gap: var(--hadm-gap-heading);
	margin-block-end: var(--hadm-gap-block);
	width: 100%;
}

.splash__heading {
	font-family: var(--hadm-font-display);
	font-size: var(--hadm-size-heading);
	line-height: var(--hadm-leading-heading);
	letter-spacing: var(--hadm-tracking-heading);
	color: var(--hadm-primary);
	/* Keeps the line from breaking one word onto its own row once the headline
	   stops fitting on a single line. */
	text-wrap: balance;
}

/*
 * The two intro sentences are consecutive lines of one paragraph in the design,
 * not separated blocks — so no gap between them, just the shared leading.
 */
.splash__intro > p + p {
	margin-block-start: 0;
}

/* ── Contact ──────────────────────────────────────────────────────────────── */

.splash__contact {
	display: flex;
	flex-direction: column;
	gap: var(--hadm-gap-contact);
	width: 100%;
}

.splash__phone-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	padding-block: 0.3125rem; /* 5px, from the design's phone row. */
}

.splash__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	color: inherit;
	text-decoration: none;
	border-radius: 2px;
	transition: color 160ms ease;
}

.splash__phone:hover,
.splash__phone:focus-visible {
	color: var(--hadm-primary);
}

.splash__phone-note {
	color: inherit;
}

.hadm-icon {
	flex: none;
	display: block;
	color: currentcolor;
}

.hadm-icon--phone {
	width: 1.5rem;  /* 24px */
	height: 1.5rem;
}

/* ══ Language switcher ═════════════════════════════════════════════════════ */

.splash__language {
	position: absolute;
	top: var(--hadm-switcher-top);
	right: var(--hadm-switcher-right);
	z-index: 2;
}

.language-switcher__wrap {
	position: relative;
}

/*
 * One rule for both shapes — the <p> shown with a single language and the
 * <button> shown with several — so they are pixel-identical and swapping
 * between them changes only behaviour, never appearance.
 */
.language-switcher__control {
	display: flex;
	align-items: center;
	height: 2.875rem; /* 46px */
	margin: 0;
	padding-inline: 0.625rem; /* 10px */
	border: 1px solid var(--hadm-primary);
	background-color: transparent;
	color: var(--hadm-ink-strong);
	font-family: var(--hadm-font-body);
	font-size: var(--hadm-size-ui);
	font-weight: 500;
	line-height: 1.714; /* 24/14 */
}

.language-switcher__toggle {
	cursor: pointer;
	transition: background-color 160ms ease;
}

.language-switcher__toggle:hover {
	background-color: rgb(191 165 118 / 8%);
}

.language-switcher__label {
	display: block;
}

/*
 * The source icon points up; the design shows it pointing down when closed.
 * Flipping in CSS rather than in the file means the open state is a plain
 * removal of the transform, which animates cleanly.
 */
.language-switcher__chevron {
	width: 1.25rem; /* 20px */
	height: 1.25rem;
	transform: scaleY(-1);
	transition: transform 200ms ease;
}

.language-switcher__wrap.is-open .language-switcher__chevron {
	transform: scaleY(1);
}

.language-switcher__menu {
	position: absolute;
	top: calc(100% - 1px);
	right: 0;
	z-index: 3;
	min-width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--hadm-primary);
	background-color: var(--hadm-surface);
	box-shadow: 0 8px 24px rgb(77 77 77 / 10%);
}

.language-switcher__menu[hidden] {
	display: none;
}

.language-switcher__link {
	display: block;
	padding: 0.625rem;
	color: var(--hadm-ink-strong);
	font-size: var(--hadm-size-ui);
	font-weight: 500;
	line-height: 1.714;
	text-align: center;
	text-decoration: none;
	transition: background-color 160ms ease, color 160ms ease;
}

.language-switcher__link:hover,
.language-switcher__link:focus-visible {
	background-color: rgb(191 165 118 / 12%);
	color: var(--hadm-primary);
}

.language-switcher__link.is-current {
	color: var(--hadm-primary);
}

/* ══ Focus ═════════════════════════════════════════════════════════════════ */

.splash a:focus-visible,
.splash button:focus-visible {
	outline: 2px solid var(--hadm-primary);
	outline-offset: 3px;
}

/* ══ Responsive adjustments ════════════════════════════════════════════════ */

@media (max-width: 47.9375em) { /* < 768px */
	:root {
		--hadm-switcher-right: 1.25rem;
	}

	/*
	 * Below this width the phone number and its call-cost note stop fitting on
	 * one line. Stacking them keeps both readable instead of letting the note
	 * wrap mid-sentence under the icon.
	 */
	.splash__phone-line {
		flex-direction: column;
		gap: 0.25rem;
	}
}

/*
 * The language control sits above the brand mark on a narrow screen. Reserving
 * space for it stops the two from colliding at the top of the page.
 */
@media (max-width: 30em) { /* < 480px */
	/*
	 * On a phone the language control sits above the brand mark, so the top of
	 * the page needs a fixed reserve rather than a share of the leftover space.
	 *
	 * The artboard's 1 : 3.44 ratio is dropped here deliberately. Keeping it
	 * would mean a `minmax(88px, 1fr)` top row, and when that minimum binds
	 * Chrome does not shrink the bottom `fr` row to compensate — the rows sum
	 * to about half a pixel more than the viewport, which is enough to raise a
	 * scrollbar on a page that visibly fits. A fixed top row and a `1fr`
	 * remainder always sum exactly.
	 */
	.splash {
		grid-template-rows:
			var(--hadm-pad-top)
			auto
			minmax(var(--hadm-pad-bottom), 1fr);
	}

	:root {
		--hadm-pad-top: 5.5rem;
	}
}

/* ══ Motion ════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ══ Print ═════════════════════════════════════════════════════════════════ */

@media print {
	.splash {
		min-height: auto;
		padding: 2rem;
	}

	.splash__backdrop,
	.splash__language {
		display: none;
	}

	.splash__heading {
		color: #000;
	}
}