/*
 * Millennia Village — Base Styles
 *
 * Reset, typography, layout primitives.
 * Component-specific styles live elsewhere.
 */

/* ─────────────────────────────────────────────────────────────
   FONT FACE — CooperBT (local file, light weight)
   Falls back gracefully to Corben → Georgia if missing.
   ───────────────────────────────────────────────────────────── */
@font-face {
	font-family: "CooperBT";
	src: url("../fonts/CooperBT-Light.ttf") format("truetype");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

/* Self-hosted body + heading-fallback faces (woff2, latin) — no third-party CDN. */
@font-face {
	font-family: "DM Sans";
	src: url("../fonts/DMSans-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "DM Sans";
	src: url("../fonts/DMSans-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "DM Sans";
	src: url("../fonts/DMSans-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Corben";
	src: url("../fonts/Corben-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Corben";
	src: url("../fonts/Corben-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

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

* {
	margin: 0;
	padding: 0;
}

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

/* ────────────────────────────────────────────────────────────────
   PAGE TRANSITIONS — native cross-document View Transitions.
   Progressive enhancement: supporting browsers gently cross-fade
   between page loads; others navigate normally with no change.
   Turned off under reduced-motion.
   ──────────────────────────────────────────────────────────────── */
@view-transition {
	navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 320ms;
	animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}
}

/* ────────────────────────────────────────────────────────────────
   GLOBAL SCROLL OFFSET FOR ANCHOR LINKS
   Any in-page link (href="#section") that targets an element with
   an id triggers a scroll. Without this rule, the targeted section
   would land flush against the top of the viewport — hidden under
   the 80px sticky nav (64px on tablet). scroll-margin-top reserves
   space above each target so the heading lands cleanly below the
   nav. Tightened on small screens to match the reduced nav height.
   ──────────────────────────────────────────────────────────────── */
[id] {
	scroll-margin-top: 96px;
}
@media (max-width: 860px) {
	[id] {
		scroll-margin-top: 80px;
	}
}

body {
	font-family: var(--font-body);
	font-size: var(--size-body);
	line-height: var(--line-body);
	color: var(--body);
	background: var(--white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ─────────────────────────────────────────────────────────────
   TYPOGRAPHY
   ───────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: 300;
	line-height: var(--line-heading);
	color: var(--ink);
}

h1 { font-size: var(--size-h1); }
h2 { font-size: var(--size-h2); }
h3 { font-size: var(--size-h3); }
h4 { font-size: var(--size-h4); }

p {
	font-size: var(--size-body);
	line-height: var(--line-body);
}

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

a:hover,
a:focus-visible {
	text-decoration: underline;
}

/* ─────────────────────────────────────────────────────────────
   IMAGES & MEDIA
   ───────────────────────────────────────────────────────────── */
img,
picture,
video,
svg {
	max-width: 100%;
	height: auto;
	display: block;
}

/* ─────────────────────────────────────────────────────────────
   INTERACTIVE ELEMENTS — buttons always <button>, never <div>
   ───────────────────────────────────────────────────────────── */
button {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	-webkit-appearance: none;
	appearance: none;
}

button,
a {
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

/* ─────────────────────────────────────────────────────────────
   LAYOUT PRIMITIVES
   ───────────────────────────────────────────────────────────── */
.container {
	max-width: var(--max-width);
	margin-inline: auto;
	padding-inline: var(--section-pad-x);
}

@media (max-width: 860px) {
	.container {
		padding-inline: var(--section-pad-x-tablet);
	}
}

@media (max-width: 480px) {
	.container {
		padding-inline: var(--section-pad-x-mobile);
	}
}

/* ─────────────────────────────────────────────────────────────
   ACCESSIBILITY UTILITIES
   ───────────────────────────────────────────────────────────── */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────
   MOTION PREFERENCES
   ───────────────────────────────────────────────────────────── */
@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;
	}
}

/* Strip default underlines globally — buttons, CTAs and footer links
   don't need them. Waze/Maps in footer keep their visual underline via
   border-bottom in components.css. Inline body links (when we add any)
   will use colour shift on hover via a utility class. */
a, a:hover, a:focus {
	text-decoration: none;
}