/*
 * Plinth base styles.
 *
 * Cascade layers: reset < base < utilities.
 * Block styles (blocks/{slug}/style.css) are intentionally UNLAYERED so they
 * always win over these layers without specificity fights.
 *
 * Design tokens come from theme.json as --wp--preset--* custom properties —
 * never hardcode colors, font sizes or spacing here.
 */

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/montserrat-latin-variable.woff2") format("woff2");
}

@layer reset, base, utilities;

/* ---------------------------------------------------------------- reset -- */
@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	* {
		margin: 0;
	}

	html {
		-webkit-text-size-adjust: none;
		text-size-adjust: none;
	}

	body {
		min-height: 100svh;
		-webkit-font-smoothing: antialiased;
	}

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

	input,
	button,
	textarea,
	select {
		font: inherit;
		color: inherit;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		overflow-wrap: break-word;
		text-wrap: balance;
	}

	p {
		overflow-wrap: break-word;
	}
}

/* ----------------------------------------------------------------- base -- */
@layer base {
	:focus-visible {
		outline: 2px solid var(--wp--preset--color--primary);
		outline-offset: 2px;
	}

	:where(button, select, .wp-element-button, .wp-block-button__link) {
		border-radius: var(--wp--custom--radius--pill);
	}

	:where(button, .wp-element-button, .wp-block-button__link) {
		border-color: var(--wp--preset--color--gallery-green);
		background: var(--wp--preset--color--gallery-green);
		color: var(--wp--preset--color--base);
	}

	.skip-link:focus {
		position: fixed;
		inset-block-start: var(--wp--preset--spacing--sm);
		inset-inline-start: var(--wp--preset--spacing--sm);
		z-index: 100;
		width: auto;
		height: auto;
		padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
		clip-path: none;
		background: var(--wp--preset--color--contrast);
		color: var(--wp--preset--color--base);
		text-decoration: none;
	}

	/*
	 * Content flow.
	 *
	 * Pages are composed of full-bleed Plinth block <section>s that own their
	 * inner width and gutter. Loose core blocks (the editor whitelist) typed
	 * between them are constrained to the theme.json content size instead.
	 * The .is-root-container variant keeps parity inside the editor canvas.
	 */
	:where(.entry-content, .is-root-container) >
	:where(p, h1, h2, h3, h4, h5, h6, ul, ol, .wp-block-image, blockquote) {
		max-width: var(--wp--style--global--content-size);
		margin-inline: auto;
		padding-inline: var(--wp--preset--spacing--gutter);
	}

	:where(.entry-content) > * + * {
		margin-block-start: var(--wp--preset--spacing--md);
	}

	/* ---- Site chrome (viewport media queries are fine here — this is not
	   block CSS; blocks must use container queries instead). ---- */

	.site-header {
		border-block-end: 1px solid var(--wp--preset--color--surface);
	}

	.site-header__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--md);
		max-width: var(--wp--style--global--wide-size);
		margin-inline: auto;
		padding-block: var(--wp--preset--spacing--sm);
		padding-inline: var(--wp--preset--spacing--gutter);
	}

	.site-header__title {
		font-size: var(--wp--preset--font-size--lg);
		font-weight: 700;
		color: inherit;
		text-decoration: none;
	}

	.site-header__toggle {
		padding: var(--wp--preset--spacing--xxs) var(--wp--preset--spacing--xs);
		border: 1px solid var(--wp--preset--color--gallery-green);
		border-radius: var(--wp--custom--radius--pill);
		background: var(--wp--preset--color--gallery-green);
		color: var(--wp--preset--color--base);
		cursor: pointer;
	}

	.site-nav__list {
		display: flex;
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--md);
		list-style: none;
		padding: 0;

		& a {
			color: inherit;
			text-decoration: none;

			&:hover {
				color: var(--wp--preset--color--primary);
			}
		}
	}

	@media (width < 48rem) {
		.site-nav {
			display: none;
			position: absolute;
			inset-inline: 0;
			z-index: 50;
			padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--gutter);
			background: var(--wp--preset--color--base);
			border-block-end: 1px solid var(--wp--preset--color--surface);
			box-shadow: var(--wp--custom--shadow--md);

			&[data-open] {
				display: block;
			}

			& .site-nav__list {
				flex-direction: column;
				gap: var(--wp--preset--spacing--sm);
			}
		}

		.site-header {
			position: relative;
		}
	}

	@media (width >= 48rem) {
		.site-header__toggle {
			display: none;
		}
	}

	.site-footer {
		margin-block-start: var(--wp--preset--spacing--xl);
		border-block-start: 1px solid var(--wp--preset--color--surface);
	}

	.site-footer__inner {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--md);
		max-width: var(--wp--style--global--wide-size);
		margin-inline: auto;
		padding-block: var(--wp--preset--spacing--lg);
		padding-inline: var(--wp--preset--spacing--gutter);
	}

	.site-footer__list {
		display: flex;
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--md);
		list-style: none;
		padding: 0;
	}

	.site-footer__colophon {
		font-size: var(--wp--preset--font-size--sm);
	}

	/* ---- Archive / post-list templates ---- */

	.archive-main {
		max-width: var(--wp--style--global--content-size);
		margin-inline: auto;
		padding-block: var(--wp--preset--spacing--lg);
		padding-inline: var(--wp--preset--spacing--gutter);
	}

	.archive-header {
		margin-block-end: var(--wp--preset--spacing--lg);
	}

	.post-list {
		display: grid;
		gap: var(--wp--preset--spacing--lg);
	}

	.post-list__title a {
		color: inherit;
		text-decoration: none;

		&:hover {
			color: var(--wp--preset--color--primary);
		}
	}

	.post-list__date {
		font-size: var(--wp--preset--font-size--sm);
	}

	.entry-header {
		max-width: var(--wp--style--global--content-size);
		margin-inline: auto;
		padding-block: var(--wp--preset--spacing--lg) 0;
		padding-inline: var(--wp--preset--spacing--gutter);
	}

	.entry-content {
		padding-block: var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg);
	}

	/* ---- Motion ---- */

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

/* ------------------------------------------------------------ utilities -- */
@layer utilities {
	.screen-reader-text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* Gallery page chrome. Kept unlayered so link colours override the unlayered
   global element styles generated from theme.json. */
body.is-wedding-gallery-page {
	background-color: var(--wp--preset--color--gallery-light);
	color: var(--wp--preset--color--contrast);
	transition: background-color var(--wp--custom--transition--gallery), color var(--wp--custom--transition--reveal);
}

body.is-wedding-gallery-page .entry-content {
	padding-block: 0;
}

body.is-wedding-gallery-page .site-header,
body.is-wedding-gallery-page .site-footer {
	display: none;
}

body.is-wedding-gallery-page .site-nav {
	border-color: transparent;
	background: transparent;
	box-shadow: none;
}

body.is-wedding-gallery-page .site-header__title,
body.is-wedding-gallery-page .site-header__toggle,
body.is-wedding-gallery-page .site-nav a,
body.is-wedding-gallery-page .site-footer a {
	transition: color var(--wp--custom--transition--reveal);
}

body.is-wedding-gallery-access {
	background-color: var(--wp--preset--color--gallery-green);
	color: var(--wp--preset--color--base);
}

body.is-wedding-gallery-access .site-header__toggle {
	border-color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--gallery-green);
}

body.is-wedding-gallery-access .b-wedding-gallery {
	background-color: var(--wp--preset--color--gallery-green);
	color: var(--wp--preset--color--base);
}

body.is-wedding-gallery-access .site-header__title,
body.is-wedding-gallery-access .site-nav a,
body.is-wedding-gallery-access .site-footer a {
	color: var(--wp--preset--color--base);
}

body.is-wedding-gallery-initialising,
body.is-wedding-gallery-initialising .b-wedding-gallery,
body.is-wedding-gallery-initialising .site-header__title,
body.is-wedding-gallery-initialising .site-header__toggle,
body.is-wedding-gallery-initialising .site-nav a,
body.is-wedding-gallery-initialising .site-footer a {
	transition: none;
}