/* Keep the footer pinned to the bottom on short pages (About, Contact). */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* Centered page template: content sits in the middle of the viewport. */
.lola-centered {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Small uppercase labels: post category, "Related posts", archive titles. */
.lola-label {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* Script titles need extra room so swashes aren't clipped. */
.has-display-font-family {
	line-height: 1.3;
	overflow: visible;
}

/* Body copy on single posts is set in Futura PT Light. */
.lola-light {
	font-weight: 300;
}

/* "Older posts" stays on the right even when there's no "Newer posts" link. */
.wp-block-query-pagination-next {
	margin-inline-start: auto;
}

/* Footer links separated by pipes. */
.lola-footer-nav .wp-block-navigation-item + .wp-block-navigation-item::before {
	content: "|";
	margin-inline: 0.5em;
}

/* Hide the related posts section when there's nothing related. */
.lola-related:not(:has(.wp-block-post)) {
	display: none;
}

/* Header search: a plain icon that expands into a field. */
.lola-header-search .wp-block-search__button {
	align-items: center;
	background: transparent;
	border: 0;
	color: inherit;
	display: flex;
	justify-content: center;
	line-height: 1;
	padding: 0.25rem;
}

.lola-header-search .wp-block-search__button svg {
	display: block;
	height: 1.5rem;
	width: 1.5rem;
}

.lola-header-search .wp-block-search__input {
	border: 0;
	border-bottom: 1px solid currentColor;
	border-radius: 0;
	font-size: var(--wp--preset--font-size--small);
}

/* The logo never wraps or shrinks. */
.wp-block-site-title {
	flex-shrink: 0;
	white-space: nowrap;
}

/* On phones there's no room beside the logo, so the open search field
   covers the header row instead. */
@media (max-width: 600px) {
	header .wp-block-group.alignwide {
		position: relative;
	}

	/* Extends past the row so the logo's swashes are covered too. */
	.lola-header-search:not(.wp-block-search__searchfield-hidden) {
		align-items: center;
		background: var(--wp--preset--color--base);
		bottom: -1.5rem;
		display: flex;
		left: -1rem;
		padding-left: 1rem;
		position: absolute;
		right: 0;
		top: -1.5rem;
		z-index: 10;
	}

	.lola-header-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__inside-wrapper {
		max-width: none;
		width: 100%;
	}

	/* Stacked image + text: text lines up with the image edge. */
	.wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content {
		padding-inline: 0;
	}
}

/* Text pages (Privacy Policy): subheadings sit at body size, tight to their text. */
.lola-text-page .wp-block-post-content :is(h2, h3, h4) {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	line-height: inherit;
	margin-block-start: 2em;
	margin-block-end: 0;
}

.lola-text-page .wp-block-post-content :is(h2, h3, h4) + * {
	margin-block-start: 0;
}

/* Hover: no underlines. Text links fade to gray (theme.json); images, the logo
   and icons fade to half opacity. Same easing throughout. */
:root {
	--lola-ease: cubic-bezier(0.11, 0.48, 0.57, 0.91);
}

a,
.wp-block-search__button {
	transition: color 0.25s var(--lola-ease), opacity 0.25s var(--lola-ease);
}

.wp-block-post-featured-image a:hover,
.wp-block-image a:hover,
.wp-block-media-text__media a:hover,
.wp-block-site-title a:hover,
.wp-block-social-links .wp-social-link a:hover,
.lola-header-search .wp-block-search__button:hover {
	opacity: 0.5;
}

/* Core's navigation sets its own link colour, so restate the gray hover. */
.wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--hover);
}

/* Replace core's icon zoom with the fade above. */
.wp-block-social-links .wp-social-link:hover {
	transform: none;
}

/* Mobile menu: full-screen, centered, larger type, matching the page margins. */
body .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: center;
	padding-top: 18vh;
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	align-items: center;
	font-size: var(--wp--preset--font-size--large);
	gap: var(--wp--preset--spacing--40);
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
	align-items: center;
}

/* Archived posts: body text and images are centered. A block with its own
   alignment set in the editor keeps it. */
.lola-text-center {
	text-align: center;
}