/*
 * Design tokens + universal reset.
 * Loaded on every page (see inc/enqueue.php). Every other CSS file in
 * this theme depends on the custom properties defined here — component
 * and page-specific rules go in their own files, not here.
 */

:root {
	--navy: #213555;
	--navy-deep: #16233b;
	--gold: #D6A43A;
	--gold-soft: #EBCF86;
	--cream: #F7F1E3;
	--cream-2: #FBF7EC;
	--ink: #26344b;
	--slate: #5c6a80;
	--line: #ece2ca;
	--red: #E0492F;
	--wa: #25D366;
	--white: #fff;
	--shadow-sm: 0 10px 26px -18px rgba(22, 35, 59, .4);
	--shadow-md: 0 20px 44px -30px rgba(22, 35, 59, .45);
	--shadow-lg: 0 34px 70px -30px rgba(22, 35, 59, .55);
	--heading: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--maxw: 1280px;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
}

/*
 * No overflow-x:hidden here: setting overflow-x on html/body forces the
 * browser to resolve overflow-y to 'auto' too, which makes body its own
 * scroll container and breaks position:sticky on .top-sticky (the header
 * would scroll away instead of sticking). The marquee in the notice bar
 * already clips itself via .notice { overflow: hidden }, so this was
 * redundant — max-width keeps the safety net without the side effect.
 */
html,
body {
	max-width: 100%;
}

body {
	font-family: var(--body);
	color: var(--ink);
	background: #fff;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
	font-family: var(--heading);
}

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

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

button {
	font-family: inherit;
}

.wrap {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 24px;
}

section {
	padding: 88px 0;
}

h2 {
	font: 700 clamp(28px, 3.6vw, 42px)/1.12 var(--heading);
	color: var(--navy);
	letter-spacing: -.02em;
	margin: 0 0 14px;
}

.eyebrow {
	font: 700 13px/1 var(--body);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 12px;
	display: block;
}

.sec-lead {
	font: 400 17px/1.6 var(--body);
	color: var(--slate);
	max-width: 640px;
}

.center { text-align: center; }
.center .sec-lead { margin-left: auto; margin-right: auto; }

/* ===== buttons — used across every page, not just header/footer ===== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font: 700 15.5px/1 var(--body);
	padding: 15px 26px;
	border-radius: 12px;
	cursor: pointer;
	border: 1.5px solid transparent;
	transition: transform .28s cubic-bezier(.16, 1, .3, 1), box-shadow .28s cubic-bezier(.16, 1, .3, 1), background .2s;
	white-space: nowrap;
}
.btn svg { flex-shrink: 0; }
.btn-gold { background: var(--gold); color: var(--navy-deep); box-shadow: 0 16px 32px -16px rgba(214, 164, 58, .85); }
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 22px 38px -16px rgba(214, 164, 58, .95); }
.btn-outline { background: #fff; color: var(--navy); border-color: var(--line); }
.btn-outline:hover { transform: translateY(-2px); border-color: var(--gold); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { transform: translateY(-2px); }
.btn-wa { background: var(--wa); color: #fff; box-shadow: 0 12px 24px -12px rgba(37, 211, 102, .7); }
.btn-wa:hover { transform: translateY(-2px); box-shadow: 0 18px 30px -12px rgba(37, 211, 102, .85); }
.btn-ghost-dark { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .28); }
.btn-ghost-dark:hover { background: rgba(255, 255, 255, .18); }

.lift { transition: transform .32s cubic-bezier(.16, 1, .3, 1), box-shadow .32s cubic-bezier(.16, 1, .3, 1), border-color .28s, color .2s; }
.card-hover:hover { transform: translateY(-6px); box-shadow: 0 30px 56px -30px rgba(22, 35, 59, .5); }
.link-arrow { font: 700 15px var(--body); color: var(--navy); display: inline-flex; align-items: center; gap: 7px; }
.link-arrow:hover { color: var(--gold); }

/* ===== scroll reveal — behavior in assets/js/base.js ===== */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .75s cubic-bezier(.16, 1, .3, 1), transform .75s cubic-bezier(.16, 1, .3, 1); }
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 640px) {
	section {
		padding: 56px 0;
	}

	.wrap {
		padding: 0 18px;
	}
}