/* ==========================================================================
   BASE — reset, typography, layout helpers, eyebrow, buttons, links,
   reveal animations. Values come from tokens.css.
   ========================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--lhdk-color-background);
	color: var(--lhdk-color-text);
	font-family: var(--lhdk-font-body);
	font-size: var(--lhdk-font-size-body);
	font-weight: var(--lhdk-font-weight-normal);
	line-height: var(--lhdk-line-height-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: color var(--lhdk-duration) ease; }
a:hover { color: var(--lhdk-color-accent); }
button { font: inherit; color: inherit; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--lhdk-color-accent); outline-offset: 3px; }
[hidden] { display: none !important; }

.site-wrap { overflow-x: clip; }
html { scroll-padding-top: calc(var(--lhdk-header-height) + 12px); }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
	font-family: var(--lhdk-font-heading);
	font-weight: var(--lhdk-font-weight-heading);
	line-height: var(--lhdk-line-height-heading);
	margin: 0 0 var(--lhdk-space-sm);
	text-wrap: balance;
}
h1 { font-size: var(--lhdk-font-size-h1); }
h2 { font-size: var(--lhdk-font-size-h2); }
h3 { font-size: var(--lhdk-font-size-h3); }
p { margin: 0 0 var(--lhdk-space-sm); }

/* ---------- Layout helpers ---------- */
.container {
	width: 100%;
	max-width: var(--lhdk-container-width);
	margin-inline: auto;
	padding-inline: var(--lhdk-gutter);
}
.section { padding-block: var(--lhdk-space-section); }

/* ---------- Eyebrow (small caps line above headings) ---------- */
.eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 var(--lhdk-space-sm);
	font-size: var(--lhdk-font-size-eyebrow);
	letter-spacing: var(--lhdk-letter-spacing-eyebrow);
	text-transform: uppercase;
	color: var(--lhdk-color-muted);
}
.eyebrow::after {
	content: "";
	width: 44px;
	height: 1px;
	background: var(--lhdk-color-accent);
	opacity: 0.6;
}
.eyebrow.is-light, .is-light .eyebrow { color: var(--lhdk-color-accent-soft); }

/* ---------- Section header ---------- */
.section-header { max-width: 640px; margin-bottom: var(--lhdk-space-lg); }
.section-title { margin-bottom: var(--lhdk-space-sm); }
.section-description { color: var(--lhdk-color-muted); font-weight: var(--lhdk-font-weight-light); font-size: var(--lhdk-font-size-lead); max-width: 56ch; }
.section-header .link-arrow { margin-top: var(--lhdk-space-xs); }
.section-header.is-light .section-title { color: var(--lhdk-color-on-dark); }
.section-header.is-light .section-description { color: var(--lhdk-color-on-dark-soft); }
.section-header.is-centered { margin-inline: auto; text-align: center; }
.section-header.is-centered .eyebrow { justify-content: center; }

/* Title + text on the left, link on the right (home sections). */
@media (min-width: 900px) {
	.section-header.is-row {
		max-width: none;
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: var(--lhdk-space-xl);
		align-items: end;
	}
	.section-header.is-row > :not(.link-arrow) { grid-column: 1; max-width: 680px; }
	.section-header.is-row .link-arrow { grid-column: 2; grid-row: 1 / span 3; align-self: end; margin-bottom: var(--lhdk-space-sm); }
}

/* ---------- Buttons (markup: components/ui/button.php) ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: var(--lhdk-button-padding);
	border: 1px solid transparent;
	border-radius: var(--lhdk-button-radius);
	font-size: var(--lhdk-button-font-size);
	font-weight: var(--lhdk-font-weight-normal);
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: transform var(--lhdk-duration) var(--lhdk-ease), box-shadow var(--lhdk-duration) ease, background-color var(--lhdk-duration) ease, color var(--lhdk-duration) ease, border-color var(--lhdk-duration) ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-icon { width: 16px; height: 8px; flex: none; transition: transform var(--lhdk-duration) var(--lhdk-ease); }
.btn:hover .btn-icon { transform: translateX(4px); }

.btn-primary { background: var(--lhdk-color-primary); color: var(--lhdk-color-ink); }
.btn-primary:hover { background: var(--lhdk-color-primary-hover); color: var(--lhdk-color-ink); box-shadow: 0 14px 28px rgba(227, 200, 156, 0.35); }

.btn-dark { background: var(--lhdk-color-ink); color: var(--lhdk-color-on-dark); }
.btn-dark:hover { color: var(--lhdk-color-on-dark); box-shadow: var(--lhdk-shadow-md); }

.btn-outline { border-color: currentColor; color: var(--lhdk-color-text); }
.btn-outline:hover { background: var(--lhdk-color-text); color: var(--lhdk-color-background); }

.btn-light { border-color: var(--lhdk-color-border-dark); color: var(--lhdk-color-on-dark); }
.btn-light:hover { background: var(--lhdk-color-on-dark); color: var(--lhdk-color-ink); }

.btn-link { padding: 0 0 6px; border-radius: 0; border-bottom: 1px solid var(--lhdk-color-border); }

.btn-small { padding: 0.75rem 1.25rem; font-size: 0.8125rem; gap: 10px; }

/* ---------- Text link with arrow ---------- */
.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--lhdk-color-border);
	font-size: var(--lhdk-font-size-small);
	letter-spacing: 0.03em;
}
.link-arrow .icon { width: 16px; height: 8px; transition: transform var(--lhdk-duration) var(--lhdk-ease); }
.link-arrow:hover .icon { transform: translateX(5px); }
.link-arrow:hover { border-color: var(--lhdk-color-accent); }
.is-light .link-arrow { color: var(--lhdk-color-on-dark); border-color: var(--lhdk-color-border-dark); }

/* ---------- Icons ---------- */
.icon { width: 26px; height: 26px; color: var(--lhdk-color-icon); flex: none; }
.icon-arrow { width: 16px; height: 8px; color: inherit; }
.icon-pin { width: 11px; height: 14px; }
.icon-badge {
	display: inline-grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin-bottom: var(--lhdk-space-md);
	border: 1px solid var(--lhdk-color-border);
	border-radius: 50%;
}

/* ---------- Accessibility ---------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.skip-link:focus {
	clip: auto; width: auto; height: auto;
	top: 8px; left: 8px; z-index: 1000;
	padding: 12px 18px;
	background: var(--lhdk-color-surface);
	color: var(--lhdk-color-text);
}

/* ---------- Scroll reveal (JS adds .in-view) ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--lhdk-ease), transform 0.7s var(--lhdk-ease); }
.js .reveal.in-view { opacity: 1; transform: none; }
.js .reveal-stagger > * { opacity: 0; transform: translateY(22px); transition: opacity 0.6s var(--lhdk-ease), transform 0.6s var(--lhdk-ease); }
.js .reveal-stagger.in-view > * { opacity: 1; transform: none; }
.reveal-stagger.in-view > :nth-child(2) { transition-delay: 0.08s; }
.reveal-stagger.in-view > :nth-child(3) { transition-delay: 0.16s; }
.reveal-stagger.in-view > :nth-child(4) { transition-delay: 0.24s; }
.reveal-stagger.in-view > :nth-child(5) { transition-delay: 0.32s; }
.reveal-stagger.in-view > :nth-child(n+6) { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
	.js .reveal, .js .reveal-stagger > * { opacity: 1; transform: none; }
}