/**
 * Site chrome.
 *
 * Deliberately small. Layout, spacing, colour and typography come from
 * theme.json and the builder blocks; this file only covers the handful of
 * things neither of those owns.
 */

/* Header / footer parts ------------------------------------------- */

.site-header {
	background-color: var(--wp--preset--color--white);
}

/*
 * Keeps the header above any Section that sets its own stacking context,
 * so a sticky header still wins against an overlay or a z-indexed hero.
 */
.site-header {
	position: relative;
	z-index: 10;
}

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

/*
 * WordPress applies theme.json's content block gap to every top-level block.
 * The header, main and footer already provide their own spacing, and a builder
 * Section owns its margins through --relay-section-mt-*. Do not add the generic
 * gap on top of those authored values.
 */
.wp-site-blocks > :is(main.wp-block-group, footer.wp-block-template-part) {
	margin-block-start: 0;
}

.wp-block-post-content > .wp-block-relay-section.relay-section {
	margin-block-start: var(--relay-section-mt-d, 0px);
}

@media (max-width: 1024px) {
	.wp-block-post-content > .wp-block-relay-section.relay-section {
		margin-block-start: var(
			--relay-section-mt-t,
			var(--relay-section-mt-d, 0px)
		);
	}
}

@media (max-width: 767px) {
	.wp-block-post-content > .wp-block-relay-section.relay-section {
		margin-block-start: var(
			--relay-section-mt-m,
			var(--relay-section-mt-t, var(--relay-section-mt-d, 0px))
		);
	}
}

/* Accessibility ---------------------------------------------------- */

/*
 * Visible keyboard focus. Core's default outline disappears against dark
 * Section backgrounds, so the ring gets a light companion shadow.
 */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.65);
}

.skip-link:focus {
	z-index: 100000;
}

/* Media ------------------------------------------------------------ */

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

/* Long words in a narrow column should wrap, not overflow. */
h1,
h2,
h3,
h4,
h5,
h6,
p {
	overflow-wrap: break-word;
}