/* SEASA layout — header, footer, page headers, section rhythm.
   Transparency and blur appear in exactly two places on the site: the sticky
   header, and the `glass` icon button over photography. */

:root {
	/* 80px mark + 2 x 10px padding + the 1px bottom rule. Keep in step with
	   SEASA_HEADER_LOGO in functions.php; anything that offsets itself from the
	   sticky header reads this rather than hard-coding a number. */
	--seasa-header-h: 101px;
}


/* =========================================================================
   Header
   ========================================================================= */

.seasa-header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: rgba(255, 255, 255, .92);
	-webkit-backdrop-filter: var(--blur-glass);
	backdrop-filter: var(--blur-glass);
	border-bottom: 1px solid var(--border-subtle);
}

.seasa-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-block: 10px;
}

.seasa-header__actions {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}


/* ---------- Badge lockup ---------- */

.seasa-lockup {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	text-decoration: none;
	min-height: var(--tap-min);
}

.seasa-logo {
	border-radius: var(--radius-circle);
	flex: 0 0 auto;
}

.seasa-lockup__text {
	display: grid;
	gap: 2px;
	line-height: 1.1;
}

.seasa-lockup__mark {
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: var(--fs-body-sm);
	letter-spacing: -0.01em;
	color: var(--blue-900);
}

.seasa-lockup__name {
	font-family: var(--font-sans);
	font-size: var(--fs-label);
	letter-spacing: .04em;
	color: var(--text-muted);
	white-space: nowrap;
}
/* Thai runs 30–60% longer; let it wrap rather than push the nav off-screen. */
.seasa-lockup__name:lang(th) { white-space: normal; }

/* The full name is too long for a phone header; the mark alone carries it. */
@media (max-width: 599px) {
	.seasa-header .seasa-lockup__name { display: none; }
}

.seasa-lockup--on-brand .seasa-lockup__mark { color: var(--white); }
.seasa-lockup--on-brand .seasa-lockup__name { color: rgba(255, 255, 255, .82); }
.seasa-lockup--on-brand .seasa-lockup__text { white-space: nowrap; }

.seasa-footer .seasa-lockup__mark { font-size: var(--fs-h3); }


/* ---------- Desktop navigation ---------- */

.seasa-nav {
	display: none;
	gap: var(--space-5);
	align-items: center;
}

/* Navigation is UI, not display type: the brand guide puts Prompt on headings,
   buttons and eyebrows, and IBM Plex Sans on body and UI. Prompt semibold at
   15px turned nine items into a heavy band; Plex medium reads calmer and leaves
   the logo lockup as the heaviest thing in the bar. */
.seasa-nav__link {
	padding: 6px 0;
	font-family: var(--font-sans);
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-medium);
	color: var(--text-body);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
	white-space: nowrap;
}

.seasa-nav__link:hover { color: var(--brand-primary); }

.seasa-nav__link.is-current {
	color: var(--brand-primary);
	font-weight: var(--fw-semibold);
	border-bottom-color: var(--brand-accent);
}


/* ---------- Grouped items and their dropdowns ---------- */

/* A parent stands only for its children: it is a disclosure button, and the
   page it is named after is the first link inside the panel. That keeps one
   control with one job, which a split link-plus-arrow never manages. */
.seasa-nav__group { position: relative; display: flex; }

.seasa-nav__toggle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	cursor: pointer;
}

.seasa-nav__chevron {
	width: 16px;
	height: 16px;
	transition: transform var(--dur-base) var(--ease-out);
}
.seasa-nav__toggle[aria-expanded="true"] {
	color: var(--brand-primary);
}
.seasa-nav__toggle[aria-expanded="true"] .seasa-nav__chevron {
	transform: rotate(180deg);
}

.seasa-nav__submenu {
	position: absolute;
	top: calc(100% + 10px);
	left: -12px;
	z-index: 30;
	min-width: 232px;
	display: grid;
	gap: 2px;
	padding: var(--space-2);
	background: var(--surface-card);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	animation: seasaFadeUp var(--dur-base) var(--ease-out);
}
.seasa-nav__submenu[hidden] { display: none; }

/* The 10px gap below the button belongs to neither the button nor the panel, so
   a pointer crossing it leaves the group and the panel closes before it can be
   reached. This invisible bridge spans the gap; because it is part of the panel,
   which is a descendant of the group, the pointer never leaves. */
.seasa-nav__submenu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -12px;
	height: 12px;
}

.seasa-nav__sublink {
	display: flex;
	align-items: center;
	min-height: var(--tap-min);
	padding: 0 var(--space-3);
	border-radius: var(--radius-sm);
	font-family: var(--font-sans);
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-medium);
	color: var(--text-body);
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.seasa-nav__sublink:hover { background: var(--blue-50); color: var(--brand-primary); }
.seasa-nav__sublink.is-current {
	color: var(--brand-primary);
	font-weight: var(--fw-semibold);
	background: var(--blue-50);
}


/* ---------- Search panel ---------- */

.seasa-header__search {
	border-top: 1px solid var(--border-subtle);
	padding-block: var(--space-4);
	background: var(--white);
	animation: seasaFadeUp var(--dur-base) var(--ease-out);
}
.seasa-header__search[hidden] { display: none; }
.seasa-header__search .seasa-search { max-width: 560px; }

/* The search and menu buttons share the open/close glyph swap. */
.seasa-header__actions .seasa-iconbutton__close { display: none; }
.seasa-header__actions .seasa-iconbutton.is-open .seasa-iconbutton__open { display: none; }
.seasa-header__actions .seasa-iconbutton.is-open .seasa-iconbutton__close { display: inline-flex; }


/* ---------- The stacked sheet, below 1180px ---------- */

.seasa-header__sheet {
	border-top: 1px solid var(--border-subtle);
	padding-block: var(--space-2) var(--space-4);
	background: var(--white);
	animation: seasaFadeUp var(--dur-slow) var(--ease-out);
}

.seasa-header__sheet[hidden] { display: none; }

.seasa-header__sheet .seasa-container { display: grid; }

.seasa-sheet__link {
	display: flex;
	align-items: center;
	min-height: var(--tap-min);
	border-bottom: 1px solid var(--border-subtle);
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	font-weight: var(--fw-medium);
	color: var(--text-body);
	text-decoration: none;
}

/* Group heading in the stacked sheet — a label, not a link. */
.seasa-sheet__group {
	display: flex;
	align-items: flex-end;
	min-height: 40px;
	padding-bottom: var(--space-1);
	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(--text-muted);
}

.seasa-sheet__link--child { padding-left: var(--space-4); }

.seasa-sheet__link:hover { color: var(--brand-primary); }
.seasa-sheet__link.is-current { color: var(--brand-primary); font-weight: var(--fw-semibold); }
.seasa-sheet__link:last-child { border-bottom: none; }

.seasa-sheet-open { overflow: hidden; }

@media (min-width: 1180px) {
	.seasa-nav { display: flex; }
	[data-nav-menu-btn] { display: none; }
	.seasa-header__sheet { display: none; }
	.seasa-sheet-open { overflow: visible; }
}


/* =========================================================================
   Footer
   ========================================================================= */

.seasa-footer {
	background: var(--grad-wave);
	color: var(--white);
	border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
	margin-top: var(--space-12);
}

.seasa-footer__inner {
	display: grid;
	gap: var(--space-8);
	padding-block: var(--space-10) var(--space-8);
}

.seasa-footer__columns {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
}

.seasa-footer__column {
	display: grid;
	gap: var(--space-2);
	align-content: start;
	min-width: 150px;
}

.seasa-footer__column-title {
	font-family: var(--font-display);
	font-size: var(--fs-label);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: rgba(255, 255, 255, .72);
}
.seasa-footer__column-title:lang(th) { text-transform: none; letter-spacing: 0; }

.seasa-footer__link {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	color: var(--white);
	font-size: var(--fs-body-sm);
	text-decoration: none;
	text-decoration-color: rgba(255, 255, 255, .4);
	transition: text-decoration-color var(--dur-fast) var(--ease-out);
}

.seasa-footer__link:hover {
	color: var(--white);
	text-decoration: underline;
	text-decoration-color: currentColor;
}

/* Six markers, alphabetical, identical. Never flags, never a medal order. */
.seasa-footer__members {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	padding-top: var(--space-6);
	border-top: 1px solid rgba(255, 255, 255, .22);
}

/* The marker stays 34px by design; the link grows to the 44px tap minimum with
   padding, so nothing moves on the page. */
.seasa-footer__member {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--tap-min);
	min-height: var(--tap-min);
	margin: -5px;
	border-radius: var(--radius-circle);
	text-decoration: none;
	transition: transform var(--dur-base) var(--ease-out);
}

.seasa-footer__member:hover { transform: translateY(-2px); }

.seasa-footer__statement {
	margin: 0;
	max-width: 60ch;
	font-size: var(--fs-caption);
	color: rgba(255, 255, 255, .78);
}

.seasa-footer__legal {
	margin: 0;
	font-size: var(--fs-caption);
	color: rgba(255, 255, 255, .6);
}

.seasa-footer :focus-visible { box-shadow: 0 0 0 3px rgba(255, 255, 255, .7); }


/* =========================================================================
   Page header — eyebrow + h1 + intro on white, 1px bottom rule
   ========================================================================= */

.seasa-page-header-band { background: var(--surface-page); }

.seasa-page-header {
	padding-block: var(--space-10) var(--space-8);
	border-bottom: 1px solid var(--border-subtle);
	display: grid;
	justify-items: start;
	gap: var(--space-3);
	text-align: left;
}

/* WordPress's constrained layout forces auto inline margins onto every child
   with !important, which centres headings inside this grid. */
.seasa-page-header > * {
	margin-inline: 0 !important;
	max-width: none;
}

.seasa-page-header h1,
.seasa-page-header .wp-block-post-title,
.seasa-page-header .wp-block-query-title {
	margin: 0;
}

.seasa-page-header .seasa-eyebrow { margin: 0; }

.seasa-page-header__intro {
	max-width: 56ch;
	font-size: var(--fs-body-lg);
	color: var(--text-body);
	margin: 0;
}


/* =========================================================================
   Section heading row — h2 plus an optional right-aligned muted note
   ========================================================================= */

.seasa-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3);
	margin-bottom: var(--space-6);
}

.seasa-section-head h2 { margin: 0; }
.seasa-section-head__note { font-size: var(--fs-caption); color: var(--text-muted); }