/*
 * 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.
 */

@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;
	}

	.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);
	}

	/* Keep outside list markers inside the page gutter at narrow widths. */
	:where(.entry-content, .is-root-container) > :where(ul, ol) {
		padding-inline-start: calc(
			var(--wp--preset--spacing--gutter) + var(--wp--preset--spacing--sm)
		);
	}

	: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 {
		--site-header-surface: var(--wp--preset--color--base);
		--site-header-border: var(--wp--preset--color--surface);
		--site-header-blur: 0px;

		position: relative;
		border-block-end: 1px solid var(--site-header-border);
		background: var(--site-header-surface);
		color: var(--wp--preset--color--contrast);
		backdrop-filter: blur(var(--site-header-blur));
		transition:
			background var(--wp--custom--transition--base),
			border-color var(--wp--custom--transition--base),
			color var(--wp--custom--transition--base),
			backdrop-filter var(--wp--custom--transition--base);
	}

	.site-header__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		align-items: center;
		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 {
		justify-self: start;
		font-size: var(--wp--preset--font-size--lg);
		font-weight: 700;
		color: var(--wp--preset--color--contrast) !important;
		text-decoration: none;
	}

	.site-header__logo {
		display: inline-flex;
		justify-self: start;
		flex: 0 0 auto;
		color: var(--wp--preset--color--contrast);
	}

	.site-header__logo-mark {
		--site-logo-height: calc(var(--wp--preset--spacing--md) * 1.25);

		display: block;
		width: calc(var(--site-logo-height) * 3.41);
		height: var(--site-logo-height);
		background: var(--wp--preset--color--contrast);
		-webkit-mask: var(--site-logo-image) center / contain no-repeat;
		mask: var(--site-logo-image) center / contain no-repeat;
		transition:
			width var(--wp--custom--transition--base),
			height var(--wp--custom--transition--base),
			background var(--wp--custom--transition--base);
	}

	.site-header__toggle {
		grid-column: 3;
		justify-self: end;
		padding: var(--wp--preset--spacing--xxs) var(--wp--preset--spacing--xs);
		border: 0;
		background: transparent;
		color: inherit;
		cursor: pointer;

		&:focus-visible {
			outline: 0;
			color: var(--wp--preset--color--primary);
		}
	}

	.site-header__toggle-icon {
		position: relative;
		display: block;
		width: var(--wp--preset--spacing--md);
		height: var(--wp--preset--spacing--sm);

		&::before,
		&::after,
		& span {
			position: absolute;
			inset-inline: 0;
			height: 2px;
			border-radius: var(--wp--custom--radius--sm);
			background: currentcolor;
			transition:
				inset-block-start var(--wp--custom--transition--fast),
				inset-block-end var(--wp--custom--transition--fast),
				opacity var(--wp--custom--transition--fast),
				transform var(--wp--custom--transition--fast);
		}

		&::before,
		&::after {
			content: "";
		}

		&::before {
			inset-block-start: 0;
		}

		& span {
			inset-block-start: 50%;
			transform: translateY(-50%);
		}

		&::after {
			inset-block-end: 0;
		}
	}

	.site-header__toggle[aria-expanded="true"] .site-header__toggle-icon {
		&::before {
			inset-block-start: 50%;
			transform: translateY(-50%) rotate(45deg);
		}

		& span {
			opacity: 0;
		}

		&::after {
			inset-block-end: 50%;
			transform: translateY(50%) rotate(-45deg);
		}
	}

	.site-header__navigation {
		display: contents;
	}

	.site-nav {
		grid-column: 2;
		justify-self: center;
	}

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

		& a {
			/* theme.json link styles are unlayered, so these chrome colors must win explicitly. */
			color: var(--wp--preset--color--contrast) !important;
			text-decoration: none;

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

	}

	.site-header__cta-nav {
		grid-column: 3;
		justify-self: end;
	}

	.site-header__cta-list {
		display: flex;
		align-items: center;
		list-style: none;
		padding: 0;

		& a {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: var(--wp--preset--spacing--xxs);
			padding-block:
				calc(var(--wp--preset--spacing--xxs) + 0.125em)
				calc(var(--wp--preset--spacing--xxs) - 0.125em);
			padding-inline: var(--wp--preset--spacing--sm);
			border-radius: var(--wp--custom--radius--md);
			background: var(--wp--preset--color--primary);
			color: var(--wp--preset--color--base) !important;
			font-weight: 700;
			text-decoration: none;
			transition:
				background var(--wp--custom--transition--fast),
				color var(--wp--custom--transition--fast);

			&:hover {
				background: var(--wp--preset--color--accent);
				color: var(--wp--preset--color--contrast) !important;
			}

			&:focus-visible {
				outline-color: var(--wp--preset--color--accent);
			}

			&::before {
				content: "";
				flex: 0 0 auto;
				width: var(--wp--preset--spacing--sm);
				height: var(--wp--preset--spacing--sm);
				background: currentcolor;
				-webkit-mask: url("../images/apple.svg") center / contain no-repeat;
				mask: url("../images/apple.svg") center / contain no-repeat;
				translate: 0 -0.125em;
			}
		}
	}

	.site-header--hero {
		--site-header-surface: transparent;
		--site-header-border: transparent;

		position: fixed;
		inset-block-start: 0;
		inset-inline: 0;
		z-index: 50;
		color: var(--wp--preset--color--base);

		&:not(.site-header--compact) .site-header__logo-mark {
			--site-logo-height: var(--wp--preset--spacing--lg);
		}

		& .site-header__title,
		& .site-nav__list a {
			color: var(--wp--preset--color--base) !important;
		}

		& .site-nav__list a:hover {
			color: var(--wp--preset--color--surface) !important;
		}

		& .site-header__logo-mark {
			background: var(--wp--preset--color--base);
		}

		& .site-header__cta-list a {
			background: var(--wp--preset--color--base);
			color: var(--wp--preset--color--contrast) !important;
		}
	}

	body.admin-bar .site-header--hero {
		inset-block-start: var(--plinth-admin-bar-height, 0px);
	}

	.site-header--hero.site-header--on-light {
		--site-header-surface: color-mix(in srgb, var(--wp--preset--color--base) 92%, transparent);
		--site-header-border: var(--wp--preset--color--surface);
		--site-header-blur: var(--wp--preset--spacing--xs);

		color: var(--wp--preset--color--contrast);

		& .site-header__title,
		& .site-nav__list a {
			color: var(--wp--preset--color--contrast) !important;
		}

		& .site-nav__list a:hover {
			color: var(--wp--preset--color--primary) !important;
		}

		& .site-header__logo-mark {
			background: var(--wp--preset--color--contrast);
		}

		& .site-header__cta-list a {
			background: var(--wp--preset--color--primary);
			color: var(--wp--preset--color--base) !important;
		}
	}

	@media (width < 48rem) {
		.site-header--hero:not(.site-header--compact) .site-header__logo-mark {
			--site-logo-height: calc(var(--wp--preset--spacing--md) * 1.5);
		}

		.site-header__inner {
			display: flex;
			justify-content: space-between;
		}

		.site-header__navigation {
			display: block;
			position: absolute;
			inset-block-start: 100%;
			inset-inline: 0;
			z-index: 50;
			padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--gutter);
			visibility: hidden;
			opacity: 0;
			pointer-events: none;
			background: var(--site-header-surface);
			border-block-end: 1px solid var(--site-header-border);
			backdrop-filter: blur(var(--site-header-blur));
			box-shadow: var(--wp--custom--shadow--md);
			transition:
				visibility var(--wp--custom--transition--base),
				opacity var(--wp--custom--transition--base),
				background var(--wp--custom--transition--base),
				border-color var(--wp--custom--transition--base),
				backdrop-filter var(--wp--custom--transition--base);

			&[data-open] {
				visibility: visible;
				opacity: 1;
				pointer-events: auto;
			}

			& .site-nav__list,
			& .site-header__cta-list {
				flex-direction: column;
				gap: var(--wp--preset--spacing--sm);
				text-align: center;
			}

			& .site-header__cta-nav {
				margin-block-start: var(--wp--preset--spacing--md);
			}
		}

		.site-header:has(.site-header__navigation[data-open]) {
			border-block-end-color: transparent;
		}

		.site-header--hero:not(.site-header--on-light) .site-header__toggle:focus-visible {
			color: var(--wp--preset--color--accent);
		}

		.site-header--hero:not(.site-header--on-light):has(.site-header__navigation[data-open]) {
			--site-header-surface: color-mix(in srgb, var(--wp--preset--color--contrast) 92%, transparent);
			--site-header-border: color-mix(in srgb, var(--wp--preset--color--base) 20%, transparent);
			--site-header-blur: var(--wp--preset--spacing--xs);
		}
	}

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

	.site-footer {
		background: var(--wp--preset--color--contrast);
		color: var(--wp--preset--color--base);
	}

	.site-footer__inner {
		max-width: var(--wp--style--global--wide-size);
		margin-inline: auto;
		padding-inline: var(--wp--preset--spacing--gutter);
	}

	.site-footer__top {
		display: grid;
		align-items: center;
		gap: var(--wp--preset--spacing--lg);
		padding-block: var(--wp--preset--spacing--lg);
	}

	.site-footer__brand {
		display: grid;
		justify-items: start;
		gap: var(--wp--preset--spacing--xs);
		max-inline-size: calc(var(--wp--style--global--content-size) / 2);
	}

	.site-footer__logo {
		display: inline-flex;
		color: var(--wp--preset--color--base) !important;
		transition: color var(--wp--custom--transition--fast);

		&:hover {
			color: var(--wp--preset--color--accent) !important;
		}

		&:focus-visible {
			outline-color: var(--wp--preset--color--accent);
		}
	}

	.site-footer__logo-mark {
		--site-footer-logo-height: calc(var(--wp--preset--spacing--md) * 1.25);

		display: block;
		width: calc(var(--site-footer-logo-height) * 3.41);
		height: var(--site-footer-logo-height);
		background: currentcolor;
		-webkit-mask: var(--site-footer-logo-image) center / contain no-repeat;
		mask: var(--site-footer-logo-image) center / contain no-repeat;
	}

	.site-footer__title {
		color: var(--wp--preset--color--base) !important;
		font-size: var(--wp--preset--font-size--lg);
		font-weight: 700;
		text-decoration: none;
		transition: color var(--wp--custom--transition--fast);

		&:hover {
			color: var(--wp--preset--color--accent) !important;
		}

		&:focus-visible {
			outline-color: var(--wp--preset--color--accent);
		}
	}

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

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

		& a {
			color: var(--wp--preset--color--base) !important;
			text-decoration: none;
			transition: color var(--wp--custom--transition--fast);

			&:hover {
				color: var(--wp--preset--color--accent) !important;
			}

			&:focus-visible {
				outline-color: var(--wp--preset--color--accent);
			}
		}
	}

	.site-footer__bottom {
		padding-block: var(--wp--preset--spacing--md);
		border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 20%, transparent);
	}

	@media (width >= 48rem) {
		.site-footer__top {
			grid-template-columns: minmax(0, 1fr) auto;
		}

		.site-footer__nav {
			justify-self: end;
		}

		.site-footer__list {
			justify-content: flex-end;
		}
	}

	/* ---- 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);
	}

	.has-sky-hero .entry-content {
		padding-block-start: 0;
	}

	/* ---- 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;
		}

		[data-scroll-motion] {
			animation: none !important;
			color: var(--motion-static-color, inherit) !important;
			opacity: 1 !important;
			transform: none !important;
		}
	}
}

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