/* SEASA base — element defaults, containers, utilities.
   Derived from the design system's tokens/base.css, adapted to WordPress markup. */

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

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

body {
	margin: 0;
	background: var(--surface-page);
	color: var(--text-body);
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	text-wrap: pretty;
}

h1, h2, h3, h4 {
	font-family: var(--font-display);
	color: var(--text-heading);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-heading);
	line-height: var(--lh-heading);
	margin: 0 0 var(--space-3);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); }

p { margin: 0 0 var(--space-4); }

a {
	color: var(--text-link);
	text-decoration-color: var(--blue-200);
	text-underline-offset: 3px;
	transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--text-link-hover); text-decoration-color: currentColor; }

/* The sky focus ring is the only focus treatment on the site. Never remove it. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: none;
	box-shadow: var(--ring-focus);
	border-radius: var(--radius-xs);
}

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

/* Thai needs more leading than Latin. Never letterspace Thai. */
:lang(th) { line-height: var(--lh-thai); }
:lang(th) { letter-spacing: 0; }

hr, .wp-block-separator {
	border: none;
	border-top: 1px solid var(--border-subtle);
	margin: 0;
	opacity: 1;
}

::selection { background: var(--blue-100); color: var(--blue-900); }


/* ---------- Layout ---------- */

.seasa-container {
	width: 100%;
	max-width: var(--content-max);
	margin-inline: auto;
	padding-inline: var(--gutter-mobile);
}

.seasa-section { padding-block: var(--section-y-mobile); }

.seasa-prose { max-width: var(--measure-prose); }

.seasa-stack { display: grid; gap: var(--space-4); align-content: start; }
.seasa-stack-sm { display: grid; gap: var(--space-2); align-content: start; }
.seasa-stack-lg { display: grid; gap: var(--space-8); align-content: start; }

.seasa-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }


/* ---------- Type utilities ---------- */

/* Accessibility deviation from the design reference, deliberate:
   the reference sets eyebrows in --brand-secondary (#2B8FD0), which is 3.53:1
   on white — below WCAG AA for 12px text. --blue-700 is 5.62:1 and stays inside
   the blue-on-white rule. Revert the colour here if the brand owner prefers. */
.seasa-eyebrow {
	font-family: var(--font-display);
	font-size: var(--fs-label);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--blue-700);
}
/* Uppercase + tracking would break Thai; eyebrows fall back to sentence case. */
.seasa-eyebrow:lang(th) { text-transform: none; letter-spacing: 0; }

.seasa-display-1 {
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: var(--fs-display-1);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-display);
	color: var(--text-heading);
}
.seasa-display-2 {
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: var(--fs-display-2);
	line-height: var(--lh-heading);
	letter-spacing: var(--ls-display);
	color: var(--text-heading);
}

.seasa-lead { font-size: var(--fs-body-lg); color: var(--text-body); }
.seasa-muted { color: var(--text-muted); }
.seasa-note { font-size: var(--fs-caption); color: var(--text-muted); }
.seasa-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.seasa-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* WordPress injects its own skip link on block themes; brand it rather than
   adding a second one. */
.skip-link.screen-reader-text:focus {
	border-radius: var(--radius-pill);
	color: var(--brand-primary);
	font-family: var(--font-display);
	font-weight: var(--fw-semibold);
	box-shadow: var(--shadow-md), var(--ring-focus);
}


/* ---------- Icons ---------- */

.seasa-icon {
	display: inline-flex;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	color: currentColor;
	stroke: currentColor;
	fill: none;
}


/* ---------- Reveals ---------- */

@keyframes seasaRise {
	from { transform: translateY(16px); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}
@keyframes seasaFadeUp {
	from { transform: translateY(10px); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}

/* Applied by assets/js/reveal.js once the element enters the viewport. */
.seasa-reveal { opacity: 0; }
.seasa-reveal.is-revealed {
	animation: seasaFadeUp var(--dur-reveal) var(--ease-out) forwards;
}


/* ---------- Breakpoints ---------- */

@media (min-width: 768px) {
	:root {
		--fs-display-1: 3.5rem; /* 56 */
		--fs-display-2: 2.5rem; /* 40 */
		--fs-h1: 2rem;          /* 32 */
		--fs-h2: 1.5rem;        /* 24 */
		--fs-h3: 1.1875rem;     /* 19 */
	}
	.seasa-container { padding-inline: var(--gutter-tablet); }
	.seasa-section { padding-block: var(--section-y-desktop); }

	/* Keep WordPress's root-padding-aware alignments on the same gutter scale. */
	:root {
		--wp--style--root--padding-left: var(--gutter-tablet);
		--wp--style--root--padding-right: var(--gutter-tablet);
	}
}

@media (min-width: 1200px) {
	.seasa-container { padding-inline: var(--gutter-desktop); }
	:root {
		--wp--style--root--padding-left: var(--gutter-desktop);
		--wp--style--root--padding-right: var(--gutter-desktop);
	}
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
	.seasa-reveal { opacity: 1; }
}