/*
 * Emergence Theme: global foundation.
 * Colours, type and spacing come from theme.json. This file only adds what
 * theme.json cannot: gutters, header behaviour, focus, motion, utilities.
 *
 * Breakpoints (document in docs/DESIGN-SYSTEM.md):
 *   mobile  up to 781px | tablet 782px to 1023px | desktop 1024px and up
 * WordPress switches its own mobile menu and admin bar around 782px and 600px.
 */

/* ---------- Base ---------- */

html {
	scroll-behavior: smooth;
	/* Anchors land below the sticky header (and the admin bar when logged in). */
	scroll-padding-top: calc(4.5rem + var(--wp-admin--admin-bar--height, 0px));
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: clip; /* full-bleed art must never cause sideways scrolling */
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

/* ---------- Flush layout: no block-gap strips between header, sections and footer ---------- */

body .wp-site-blocks > * + *,
body .wp-site-blocks .emergence-main > *,
body .wp-site-blocks .wp-block-post-content > .alignfull,
.editor-styles-wrapper .is-root-container > .alignfull {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ---------- Links ---------- */

:where(.wp-site-blocks) a:where(:not(.wp-element-button):not(.wp-block-navigation-item__content)) {
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.2em;
}

/* ---------- Focus (visible on every background: uses the element's own colour) ---------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 4px;
}

/* ---------- Gutters and default section spacing ----------
 * Written with :where() so they have zero specificity: any padding chosen in
 * the editor (or by a later section design) overrides them. */

:where(.wp-block-post-content > .wp-block-group.alignfull) {
	padding-inline: var(--wp--custom--gutter);
	padding-block: var(--wp--preset--spacing--50);
}

:where(.emergence-padded) {
	padding-inline: var(--wp--custom--gutter);
	padding-block: var(--wp--preset--spacing--50);
}

/* Constrained sections: the inner width is chosen in the block's Layout panel. */
.wp-block-post-content > .wp-block-group.alignfull {
	box-sizing: border-box;
}

/* ---------- Header ---------- */

.emergence-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--white);
	border-bottom: 1px solid rgba(6, 6, 6, 0.12);
}

@media (min-width: 601px) {
	.admin-bar .emergence-header {
		top: var(--wp-admin--admin-bar--height, 32px);
	}
}

.emergence-header-inner {
	box-sizing: border-box;
	min-height: 4.5rem;
	padding-inline: var(--wp--custom--gutter);
	padding-block: 0.75rem;
	gap: 1.5rem;
}

.emergence-header .wp-block-site-logo img {
	display: block;
	width: clamp(8.5rem, 5rem + 10vw, 11.5rem);
	height: auto;
}

/* Navigation: quiet, editorial, uppercase UI labels */
.emergence-nav .wp-block-navigation-item__content {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-decoration: none;
	padding-block: 0.4em;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 2px;
	transition: background-size 0.25s ease;
}

.emergence-nav .wp-block-navigation-item__content:hover,
.emergence-nav .wp-block-navigation-item__content:focus-visible {
	background-size: 100% 2px;
}

/* Register: the one distinguished link (add class "emergence-nav-register" to any nav item) */
.emergence-nav .emergence-nav-register > .wp-block-navigation-item__content {
	background-color: var(--wp--preset--color--primary-green);
	background-image: none;
	color: var(--wp--preset--color--black);
	font-weight: 500;
	padding: 0.75em 1.4em;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.emergence-nav .emergence-nav-register > .wp-block-navigation-item__content:hover,
.emergence-nav .emergence-nav-register > .wp-block-navigation-item__content:focus-visible {
	background-color: var(--wp--preset--color--purple);
	color: var(--wp--preset--color--white);
}

/* Phones and tablets (up to 1023px): use the native overlay menu instead of the inline links.
 * WordPress switches at 600px by default, which wraps the header at tablet width. */
@media (min-width: 600px) and (max-width: 1023px) {
	.wp-block-navigation.emergence-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.wp-block-navigation.emergence-nav .wp-block-navigation__responsive-container-open {
		display: flex;
	}
}

/* Mobile overlay menu: large Poppins Medium, stacked, generous tap targets */
.emergence-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--custom--gutter);
}

.wp-block-navigation.emergence-nav .is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation.emergence-nav .is-menu-open .wp-block-navigation__container {
	gap: 0.25rem;
	align-items: flex-start !important;
	justify-content: flex-start;
}

.wp-block-navigation.emergence-nav .is-menu-open .wp-block-navigation__responsive-dialog {
	width: 100%;
}

.emergence-nav .is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--heading);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.02em;
	text-transform: none;
	padding-block: 0.15em;
}

.emergence-nav .is-menu-open .emergence-nav-register {
	margin-top: 1rem;
}

.emergence-nav .is-menu-open .emergence-nav-register > .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--lead);
	padding: 0.5em 1em;
}

/* ---------- Footer ---------- */

.emergence-footer {
	padding-inline: var(--wp--custom--gutter);
	padding-block: var(--wp--preset--spacing--40);
}

/* ---------- Hero shell (only a minimum height; the real design comes later) ---------- */

/* ---------- Hero (poster composition) ----------
 * Structure (all native blocks, all editable):
 *   .emergence-hero              Group, the section
 *     .emergence-hero__art       Group, artwork slot (add an Image inside to replace the placeholder)
 *     .emergence-hero__title     Heading (h1), the wordmark
 *     .emergence-hero__intro     Group: subtitle, tagline, Buttons (CTA)
 *     .emergence-hero__dates     Group: days, month, place
 * Colours come from variables so the Group styles "Hero: Purple" and
 * "Hero: Bright green" can swap the whole palette in one click.
 * Desktop and tablet: 12-column grid, wordmark spans the width and bleeds off the bottom.
 * Mobile (under 640px): wordmark runs vertically up the left edge, content stacks beside it. */

.emergence-hero {
	--hero-bg: var(--wp--preset--color--primary-green);
	--hero-ink: var(--wp--preset--color--black);
	--hero-word: var(--wp--preset--color--purple);
	--hero-art: var(--wp--preset--color--secondary-green);
	--hero-btn-bg: var(--wp--preset--color--purple);
	--hero-btn-fg: var(--wp--preset--color--white);
	--hero-btn-hover-bg: var(--wp--preset--color--black);
	--hero-btn-hover-fg: var(--wp--preset--color--white);
	--hero-h: calc(100svh - 4.5rem - var(--wp-admin--admin-bar--height, 0px));

	position: relative;
	isolation: isolate;
	overflow: clip;
	container-type: inline-size;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-template-rows: 1fr auto;
	column-gap: clamp(0.75rem, 2vw, 2rem);
	row-gap: clamp(1.5rem, 4vw, 3rem);
	min-height: clamp(30rem, var(--hero-h), 62rem);
	padding-top: clamp(1.75rem, 4vw, 4rem);
	padding-bottom: 0;
	background-color: var(--hero-bg);
	color: var(--hero-ink);
}

.emergence-hero.is-style-emergence-hero-purple {
	--hero-bg: var(--wp--preset--color--purple);
	--hero-ink: var(--wp--preset--color--white);
	--hero-word: var(--wp--preset--color--secondary-green);
	--hero-art: var(--wp--preset--color--primary-green);
	--hero-btn-bg: var(--wp--preset--color--secondary-green);
	--hero-btn-fg: var(--wp--preset--color--black);
	--hero-btn-hover-bg: var(--wp--preset--color--white);
	--hero-btn-hover-fg: var(--wp--preset--color--purple);
}

.emergence-hero.is-style-emergence-hero-bright {
	--hero-bg: var(--wp--preset--color--secondary-green);
	--hero-art: var(--wp--preset--color--primary-green);
}

.emergence-hero > * {
	position: relative;
	z-index: 1;
	margin: 0;
}

/* Artwork slot. Placeholder = abstract contour lines (mask, recoloured by --hero-art).
 * Drop an Image block into the slot and the placeholder disappears. */
.emergence-hero > .emergence-hero__art {
	position: absolute;
	z-index: 0;
	top: -8%;
	right: -10%;
	width: min(68cqw, 110svh);
	aspect-ratio: 1;
	background-color: var(--hero-art);
	-webkit-mask: url("../images/hero-contours-placeholder.svg") center / contain no-repeat;
	mask: url("../images/hero-contours-placeholder.svg") center / contain no-repeat;
	pointer-events: none;
}

.emergence-hero > .emergence-hero__art:has(img, svg, video) {
	background: none;
	-webkit-mask: none;
	mask: none;
	pointer-events: auto;
}

.emergence-hero__art img,
.emergence-hero__art video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.emergence-hero__art .wp-block-image {
	margin: 0;
	height: 100%;
}

/* Wordmark */
.emergence-hero .emergence-hero__title {
	grid-column: 1 / -1;
	grid-row: 2;
	align-self: end;
	margin-bottom: -0.03em;
	margin-left: -0.045em; /* optical: cancels the E's left side bearing */
	font-size: min(calc(100cqw / 5.5), 38svh);
	line-height: 0.92;
	letter-spacing: -0.035em;
	white-space: nowrap;
	color: var(--hero-word);
}

/* Intro: subtitle, tagline, CTA (top left) */
.emergence-hero__intro {
	grid-column: 1 / span 6;
	grid-row: 1;
	align-self: start;
	display: grid;
	gap: clamp(1rem, 1.6vw, 1.5rem);
	justify-items: start;
}

.emergence-hero__subtitle {
	margin: 0;
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 400;
	font-size: clamp(1.375rem, 0.9rem + 1.7cqw, 2.5rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.emergence-hero__tagline {
	margin: 0;
	max-width: 24ch;
	text-wrap: balance;
	font-size: clamp(1.125rem, 1rem + 0.6cqw, 1.5rem);
	line-height: 1.35;
}

.emergence-hero__cta {
	margin: 0.25rem 0 0;
}

.emergence-hero__cta .wp-block-button__link {
	background-color: var(--hero-btn-bg);
	color: var(--hero-btn-fg);
	font-size: clamp(0.9375rem, 0.85rem + 0.3cqw, 1.125rem);
	padding: 1.15em 2.1em;
}

.emergence-hero__cta .wp-block-button__link:hover,
.emergence-hero__cta .wp-block-button__link:focus-visible {
	background-color: var(--hero-btn-hover-bg);
	color: var(--hero-btn-hover-fg);
}

.emergence-hero__cta .wp-block-button__link::after {
	content: "\2192";
	content: "\2192" / "";
	display: inline-block;
	margin-left: 0.7em;
	transition: transform 0.25s ease;
}

.emergence-hero__cta .wp-block-button__link:hover::after,
.emergence-hero__cta .wp-block-button__link:focus-visible::after {
	transform: translateX(0.3em);
}

/* Dates and place as graphic information (bottom right of the upper area) */
.emergence-hero__dates {
	grid-column: 8 / -1;
	grid-row: 1;
	align-self: end;
	display: grid;
	gap: 1rem;
}

.emergence-hero__days {
	margin: 0;
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 500;
	font-size: clamp(3.5rem, min(10.5cqw, 17svh), 9.5rem);
	line-height: 0.9;
	letter-spacing: -0.04em;
}

.emergence-hero__month,
.emergence-hero__place {
	margin: 0;
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.3;
}

.emergence-hero__month {
	padding-top: 0.9rem;
	border-top: 1px solid currentColor;
}

.emergence-hero__place {
	display: flex;
	align-items: center;
	gap: 0.7em;
	margin-top: -0.4rem;
}

/* Small red map-pin dot, brand accent */
.emergence-hero__place::before {
	content: "";
	flex: none;
	width: 0.7em;
	height: 0.7em;
	border-radius: 50%;
	background: var(--wp--preset--color--red);
}

/* Tablet (640 to 1023px): same poster, scaled type, dates sit closer */
@media (min-width: 640px) and (max-width: 1023px) {
	.emergence-hero__intro {
		grid-column: 1 / span 7;
	}

	.emergence-hero__dates {
		grid-column: 8 / -1;
	}

	.emergence-hero__days {
		font-size: clamp(4rem, 14cqw, 7.5rem);
	}

	.emergence-hero__tagline {
		max-width: 24ch;
	}

	.emergence-hero > .emergence-hero__art {
		top: -4%;
		right: -22%;
		width: 92cqw;
	}
}

/* Mobile (under 640px): its own composition.
 * Wordmark runs vertically up the left edge; dates on top, intro at the bottom. */
@media (max-width: 639px) {
	.emergence-hero {
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		column-gap: clamp(1.25rem, 6.5vw, 1.75rem);
		row-gap: 1.5rem;
		min-height: clamp(30rem, var(--hero-h), 46rem);
		padding-top: 1.25rem;
		padding-bottom: 1.25rem;
	}

	.emergence-hero .emergence-hero__title {
		grid-column: 1;
		grid-row: 1 / span 2;
		align-self: stretch;
		writing-mode: vertical-rl;
		rotate: 180deg;
		font-size: calc((clamp(30rem, var(--hero-h), 46rem) - 2.5rem) / 5.5);
		line-height: 0.9;
		margin: 0;
	}

	.emergence-hero__dates {
		grid-column: 2;
		grid-row: 1;
		align-self: start;
		gap: 0.75rem;
	}

	.emergence-hero__days {
		font-size: clamp(3.25rem, 27cqw, 6.5rem);
	}

	.emergence-hero__intro {
		grid-column: 2;
		grid-row: 2;
		align-self: end;
	}

	.emergence-hero__subtitle {
		font-size: 1.5rem;
	}

	.emergence-hero__tagline {
		font-size: 1.0625rem;
		max-width: none;
	}

	.emergence-hero > .emergence-hero__art {
		top: 6%;
		right: -45%;
		width: 130cqw;
	}
}

/* Entry motion: front end only (never in the editor), transform and opacity only */
@media (prefers-reduced-motion: no-preference) {
	.wp-site-blocks .emergence-hero__title {
		animation: em-rise 1s cubic-bezier(0.2, 0.7, 0.1, 1) both;
	}

	.wp-site-blocks .emergence-hero__intro,
	.wp-site-blocks .emergence-hero__dates {
		animation: em-fade 0.9s ease-out 0.3s both;
	}

	.wp-site-blocks .emergence-hero__art {
		animation: em-settle 1.6s ease-out both;
	}
}

@keyframes em-rise {
	from { opacity: 0; transform: translateY(14%); }
	to { opacity: 1; transform: none; }
}

@keyframes em-fade {
	from { opacity: 0; transform: translateY(0.75rem); }
	to { opacity: 1; transform: none; }
}

@keyframes em-settle {
	from { opacity: 0; transform: scale(1.04); }
	to { opacity: 1; transform: none; }
}

/* ---------- Buttons ---------- */

.wp-block-button.is-style-emergence-accent .wp-block-button__link {
	background-color: var(--wp--preset--color--primary-green);
	color: var(--wp--preset--color--black);
}

.wp-block-button.is-style-emergence-accent .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--purple);
	color: var(--wp--preset--color--white);
}

.wp-element-button {
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* ---------- About (editorial) ----------
 * Structure (native blocks): .emergence-about Group > artwork slot Group, h2 title, lead paragraph, body paragraph.
 * White field by default; Group styles "Tone: Purple" and "Tone: Green" swap the palette.
 * Desktop: oversized Poppins title top left; Lora lead and body offset right; artwork bottom left, cropped.
 * Tablet: staggered two-step column. Mobile: stacked, body indented behind a purple rule, artwork behind. */

.emergence-about {
	--about-bg: var(--wp--preset--color--white);
	--about-ink: var(--wp--preset--color--black);
	--about-title: var(--wp--preset--color--purple);
	--about-art: var(--wp--preset--color--primary-green);

	position: relative;
	isolation: isolate;
	overflow: clip;
	container-type: inline-size;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: clamp(0.75rem, 2vw, 2rem);
	row-gap: clamp(1.75rem, 4vw, 4rem);
	padding-block: clamp(3.5rem, 9vw, 9rem);
	background-color: var(--about-bg);
	color: var(--about-ink);
}

.emergence-about.is-style-emergence-tone-purple {
	--about-bg: var(--wp--preset--color--purple);
	--about-ink: var(--wp--preset--color--white);
	--about-title: var(--wp--preset--color--secondary-green);
	--about-art: var(--wp--preset--color--primary-green);
}

.emergence-about.is-style-emergence-tone-green {
	--about-bg: var(--wp--preset--color--primary-green);
	--about-art: var(--wp--preset--color--secondary-green);
}

.emergence-about > * {
	position: relative;
	z-index: 1;
	margin: 0;
}

.emergence-about > .emergence-about__art {
	position: absolute;
	z-index: 0;
	left: -14%;
	bottom: -22%;
	width: min(58cqw, 90svh);
	aspect-ratio: 1;
	background-color: var(--about-art);
	-webkit-mask: url("../images/hero-contours-placeholder.svg") center / contain no-repeat;
	mask: url("../images/hero-contours-placeholder.svg") center / contain no-repeat;
	pointer-events: none;
}

.emergence-about > .emergence-about__art:has(img, svg, video) {
	background: none;
	-webkit-mask: none;
	mask: none;
	pointer-events: auto;
}

.emergence-about__art img,
.emergence-about__art video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.emergence-about__art .wp-block-image {
	margin: 0;
	height: 100%;
}

.emergence-about .emergence-about__title {
	grid-column: 1 / span 10;
	grid-row: 1;
	font-size: clamp(3.25rem, 10.5cqw, 11rem);
	line-height: 0.92;
	letter-spacing: -0.04em;
	text-wrap: balance;
	color: var(--about-title);
}

.emergence-about__lead {
	grid-column: 6 / -1;
	grid-row: 2;
	max-width: 26em;
	padding-top: 1.25rem;
	border-top: 1px solid currentColor;
	font-size: clamp(1.375rem, 0.9rem + 1.6cqw, 2.5rem);
	line-height: 1.25;
	letter-spacing: -0.01em;
	text-wrap: pretty;
}

.emergence-about__body {
	grid-column: 8 / -1;
	grid-row: 3;
	max-width: 34em;
	font-size: clamp(1.0625rem, 1rem + 0.3cqw, 1.25rem);
	line-height: 1.7;
	text-wrap: pretty;
}

/* Tablet: staggered steps */
@media (min-width: 640px) and (max-width: 1023px) {
	.emergence-about .emergence-about__title {
		grid-column: 1 / -1;
		font-size: clamp(3.5rem, 14cqw, 7.5rem);
	}

	.emergence-about__lead {
		grid-column: 3 / -1;
		font-size: clamp(1.5rem, 1rem + 2.4cqw, 2.25rem);
	}

	.emergence-about__body {
		grid-column: 5 / -1;
	}

	.emergence-about > .emergence-about__art {
		left: -34%;
		bottom: -14%;
		width: 64cqw;
	}
}

/* Mobile: stacked; body indented behind a purple rule; artwork sits behind, cropped by the right edge */
@media (max-width: 639px) {
	.emergence-about {
		row-gap: 1.75rem;
		padding-block: 3.5rem 15rem;
	}

	.emergence-about .emergence-about__title {
		grid-column: 1 / -1;
		font-size: clamp(3rem, 19.5cqw, 5rem);
		line-height: 0.95;
	}

	.emergence-about__lead {
		grid-column: 1 / -1;
		padding-top: 1rem;
		font-size: 1.5rem;
		line-height: 1.28;
	}

	.emergence-about__body {
		grid-column: 3 / -1;
		padding-left: 1rem;
		border-left: 3px solid var(--about-title);
		font-size: 1.0625rem;
		line-height: 1.65;
	}

	.emergence-about > .emergence-about__art {
		left: -30%;
		right: auto;
		top: auto;
		bottom: -26cqw;
		width: 105cqw;
		opacity: 0.6;
	}
}

/* Scroll-linked reveal: CSS only, front end only, transform and opacity, no scroll hijacking.
 * Browsers without view timelines simply show the static layout. */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.wp-site-blocks .emergence-about__title,
		.wp-site-blocks .emergence-about__lead,
		.wp-site-blocks .emergence-about__body {
			animation: em-reveal linear both;
			animation-timeline: view();
			animation-range: entry 5% entry 55%;
		}

		.wp-site-blocks .emergence-about__art {
			animation: em-drift linear both;
			animation-timeline: view();
			animation-range: entry 0% exit 100%;
		}
	}
}

@keyframes em-reveal {
	from { opacity: 0; transform: translateY(2rem); }
	to { opacity: 1; transform: none; }
}

@keyframes em-drift {
	from { transform: translateY(7%); }
	to { transform: translateY(-7%); }
}

/* ---------- Responsive utilities (for mobile-specific art direction later) ---------- */

@media (min-width: 782px) {
	.em-only-mobile {
		display: none !important;
	}
}

@media (max-width: 781px) {
	.em-only-desktop {
		display: none !important;
	}
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}