/* ==========================================================================
   Fonts
   Poppins is self-hosted (performance + no third-party request to Google).
   Only the three static weights actually used in the design are loaded.
   Drop the matching WOFF2 files into /assets/fonts/ with these exact names.
   ========================================================================== */

@font-face {
	font-family: 'Poppins';
	src: url('../fonts/poppins-v24-latin-300.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Poppins';
	src: url('../fonts/poppins-v24-latin-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Poppins';
	src: url('../fonts/poppins-v24-latin-900.woff2') format('woff2');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   Custom properties
   ========================================================================== */

:root {
	/* Header color rotation (see 01-hero block) */
	--color-header-1: #D0A9D0;
	--color-header-2: #D0CDB5;
	--color-header-3: #F7BCB3;
	--color-header-4: #9AC7BD;

	--color-text: #113946;
	--color-white: #FFFFFF;
	--color-accent: #EA516D;

	--font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--font-weight-light: 300;
	--font-weight-bold: 700;
	--font-weight-black: 900;

	--transition-base: 0.2s ease;
}

/* ==========================================================================
   Reset
   ========================================================================== */

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

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

body {
	margin: 0;
	font-family: var(--font-family);
	font-weight: var(--font-weight-light);
	font-size: 1.6rem;
	line-height: 1.5;
	color: var(--color-text);
	background-color: var(--color-white);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-weight: var(--font-weight-black);
	line-height: 1.1;
}

p {
	margin: 0;
}

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

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

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

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

strong,
b {
	font-weight: var(--font-weight-bold);
}

/* ==========================================================================
   Components
   ========================================================================== */

/* Spec: weight 700, 25px font-size, 47px line-height, 0 letter-spacing.
   Fluid via vw (25/1920 = 1.3vw) against the 1920px reference frame, capped
   at the exact px value from 1920px up (same ratio as the hero nav link,
   which shares this size). */
.btn {
	position: relative;
	/* z-index:0 (not just position:relative) is required so .btn establishes
	   its own stacking context - otherwise its ::after's z-index:-1 escapes
	   to whatever the nearest ancestor stacking context happens to be
	   (possibly the page root), where it can end up painted behind an
	   unrelated section's background instead of just behind this button's
	   own text. */
	z-index: 0;
	display: inline-block;
	padding: 0 1.3rem;
	background-color: var(--color-accent);
	color: var(--color-white);
	font-weight: var(--font-weight-bold);
	font-size: clamp(1.4rem, 1.3vw, 2.5rem);
	line-height: 1.88;
	letter-spacing: 0;
}

/* Hover: a solid fill (same color, so it reads as one continuous area, not
   a separate box) grows out to 13px left/right and 2px top/bottom beyond
   the button's own edges. Actually animates the inset (0 -> the offset)
   rather than just fading in, so it visibly grows outward. z-index:-1
   keeps it behind the button's own text (and background), which would
   otherwise be covered by it. Applies to every .btn on the site (this
   block's CTA and the one in the following block share the same class). */
.btn::after {
	content: '';
	position: absolute;
	z-index: -1;
	inset: 0;
	background-color: var(--color-accent);
	transition: inset var(--transition-base);
	pointer-events: none;
}

.btn:hover::after {
	inset: -0.2rem -1.3rem;
}

/* ==========================================================================
   Accessibility helpers
   ========================================================================== */

.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;
}

/* transform:translateY(-100%) instead of a fixed negative top: fully clears
   the box regardless of its actual rendered height (a fixed top offset left
   a few px visible at the very top of the viewport). */
.skip-link {
	position: absolute;
	top: 0;
	left: 1rem;
	z-index: 100;
	padding: 1rem 1.6rem;
	background-color: var(--color-white);
	color: var(--color-text);
	font-weight: var(--font-weight-bold);
	transform: translateY(-100%);
	transition: transform var(--transition-base);
}

.skip-link:focus-visible {
	transform: translateY(1rem);
}

:focus-visible {
	outline: 0.2rem solid var(--color-accent);
	outline-offset: 0.2rem;
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}