/*
 * WonderTale House — base layer (v0.1)
 * Typography, links, focus, skip link, layout primitives, reduced motion.
 * Depends on tokens.css. Scoped to .wt-site where it could collide with Elementor.
 */

/* ---------- Document ---------- */
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: 88px; /* sticky header + breathing room for anchor targets */
}

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

body.wt-site {
	background-color: var(--wt-ivory);
	color: var(--wt-ink);
	font-family: var(--wt-font-body);
	font-size: var(--wt-fs-body);
	line-height: var(--wt-lh-body);
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* ---------- Headings ---------- */
.wt-site h1, .wt-site h2, .wt-site h3,
.wt-site .wt-display {
	font-family: var(--wt-font-display);
	font-weight: 600;
	color: var(--wt-teal);
	line-height: var(--wt-lh-heading);
	text-wrap: balance;
	margin-block: 0 var(--wt-space-4);
}
.wt-site .wt-display { font-size: var(--wt-fs-display); line-height: var(--wt-lh-display); letter-spacing: -0.02em; font-variation-settings: "opsz" 144; }
.wt-site h1 { font-size: var(--wt-fs-h1); letter-spacing: -0.015em; line-height: 1.08; }
.wt-site h2 { font-size: var(--wt-fs-h2); letter-spacing: -0.01em; }
.wt-site h3 { font-size: var(--wt-fs-h3); line-height: 1.2; }
.wt-site h4, .wt-site h5, .wt-site h6 {
	font-family: var(--wt-font-body);
	font-weight: 800;
	font-size: var(--wt-fs-h4);
	line-height: 1.3;
	color: var(--wt-teal);
	margin-block: 0 var(--wt-space-3);
}

/* Gold italic accent phrase inside a display/h1 headline (large text only: contrast rule 2.3) */
.wt-site .wt-accent {
	font-style: italic;
	color: var(--wt-gold);
	font-weight: 500;
}

.wt-site p { margin-block: 0 var(--wt-space-4); }
.wt-site .wt-lead { font-size: var(--wt-fs-lead); line-height: 1.6; }
.wt-site .wt-small { font-size: var(--wt-fs-small); line-height: 1.5; }
.wt-site .wt-measure { max-width: var(--wt-measure); }

.wt-site .wt-eyebrow {
	display: inline-block;
	font-family: var(--wt-font-body);
	font-size: var(--wt-fs-eyebrow);
	font-weight: 800;
	letter-spacing: var(--wt-tracking-eyebrow);
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--wt-gold-700);
	margin-block-end: var(--wt-space-3);
}

/* ---------- Links ---------- */
.wt-site a {
	color: var(--wt-teal);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color var(--wt-dur-fast) var(--wt-ease-out), text-decoration-color var(--wt-dur-fast);
}
.wt-site a:not(.wt-btn):not(.elementor-button):hover { color: var(--wt-teal-900); text-decoration-thickness: 2px; }

/* ---------- Focus (always visible for keyboard users) ---------- */
.wt-site :focus { outline: none; }
.wt-site :focus-visible {
	outline: var(--wt-focus-ring);
	outline-offset: var(--wt-focus-offset);
	border-radius: 4px;
	box-shadow: var(--wt-glow-gold);
}
.wt-site .wt-on-dark :focus-visible,
.wt-site .wt-on-dark:focus-visible { outline-color: var(--wt-ivory); }

/* ---------- Skip link (parent theme outputs it; we make it visible on focus) ---------- */
.wt-site .skip-link.screen-reader-text:focus,
.wt-site .skip-link.screen-reader-text:focus-visible {
	clip: auto !important;
	clip-path: none;
	width: auto;
	height: auto;
	position: fixed;
	inset-block-start: var(--wt-space-4);
	inset-inline-start: var(--wt-space-4);
	z-index: 100000;
	padding: var(--wt-space-3) var(--wt-space-5);
	background: var(--wt-teal-900);
	color: var(--wt-ivory);
	font-weight: 800;
	font-size: 1rem;
	border-radius: var(--wt-radius-pill);
	text-decoration: none;
	box-shadow: var(--wt-shadow-2);
	transition: none;
}

.wt-site .screen-reader-text:not(:focus):not(:focus-visible) {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* ---------- Layout primitives ---------- */
.wt-container {
	width: 100%;
	max-width: calc(var(--wt-content-max) + 2 * var(--wt-gutter));
	margin-inline: auto;
	padding-inline: var(--wt-gutter);
}
.wt-container--reading { max-width: calc(var(--wt-reading-max) + 2 * var(--wt-gutter)); }
.wt-section { padding-block: var(--wt-section-pad); }
.wt-section--paper2 { background: var(--wt-paper-2); }
.wt-section--night { background: var(--wt-night); color: var(--wt-ivory); }
.wt-site .wt-section--night :is(h1, h2, h3, h4, h5, h6, .wt-display),
.wt-site .wt-on-dark :is(h1, h2, h3, h4, h5, h6, .wt-display) { color: var(--wt-ivory); }
.wt-site .wt-section--night .wt-eyebrow,
.wt-site .wt-on-dark .wt-eyebrow { color: var(--wt-gold); }
.wt-site .wt-section--night a:not(.wt-btn):not(.elementor-button),
.wt-site .wt-on-dark a:not(.wt-btn):not(.elementor-button) { color: var(--wt-gold); }
/* Launch rehearsal (0.8.1): the generic link hover colour above is dark teal, which made links on
   dark backgrounds (header, footer, night sections) disappear on hover. They turn ivory instead. */
.wt-site :is(.wt-header, .wt-footer, .wt-section--night, .wt-on-dark) a:not(.wt-btn):not(.elementor-button):hover { color: var(--wt-ivory); }
.wt-site .wt-on-dark { color: var(--wt-ivory); }

.wt-stack > * + * { margin-block-start: var(--wt-space-4); }
.wt-center { text-align: center; margin-inline: auto; }

.wt-grid {
	display: grid;
	gap: var(--wt-grid-gap);
	grid-template-columns: repeat(var(--wt-cols, 1), minmax(0, 1fr));
}
@media (min-width: 768px) { .wt-grid { --wt-cols: var(--wt-cols-tablet, 2); } }
@media (min-width: 1025px) { .wt-grid { --wt-cols: var(--wt-cols-desktop, 3); } }

/* Media never overflows */
.wt-site img, .wt-site svg, .wt-site video { max-width: 100%; height: auto; }

/* Selection */
.wt-site ::selection { background: var(--wt-peach); color: var(--wt-teal-900); }

/* ---------- Reduced motion: switch off every transition/animation globally ---------- */
@media (prefers-reduced-motion: reduce) {
	.wt-site *,
	.wt-site *::before,
	.wt-site *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}