/*
 * SPM layout, matched to the old Drupal site: the logo and page text sit in
 * one 500px column that starts just left of centre, with the menu button off
 * to its right. Below 864px the column fills the screen with 20px margins.
 * Plain CSS so it needs no build step.
 */

:root {
	--spm-column: 500px;
	--spm-column-left: calc(50% - 88px);
}

body {
	background-attachment: fixed;
}

/* Footer at the bottom of the screen on short pages, after the text on long ones. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

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

/* Header: menu button top right, logo at the top of the column. */
header.site-header {
	padding: 0;
}

.site-header > .wp-block-group {
	position: relative;
	padding: 120px 20px 0 !important;
}

.site-header > .wp-block-group > .wp-block-group:first-child {
	position: absolute;
	top: 20px;
	left: calc(50% + 440px);
	margin: 0 !important;
}

.site-header .wp-block-site-logo img {
	width: 277px;
	max-width: 100%;
	height: auto;
}

.site-header .wp-block-spacer {
	height: 85px !important;
}

/* The column itself. */
.site-header > .wp-block-group > .wp-block-group:not(:first-child),
.site-header > .wp-block-group > .wp-block-spacer,
main.wp-block-group > .wp-block-group {
	box-sizing: border-box;
	width: var(--spm-column);
	max-width: var(--spm-column) !important;
	margin-left: var(--spm-column-left) !important;
	margin-right: 0 !important;
	padding-left: 0;
	padding-right: 0;
}

main .wp-block-post-content > * {
	max-width: 100% !important;
}

/* Type as on the old site. */
main h1,
main .h1 {
	font-size: 26px;
	font-weight: 100;
}

main p,
main li {
	line-height: 1.47;
}

/* Footer in the page flow, so it never covers the text. */
footer.site-footer {
	box-sizing: border-box;
	position: static;
	box-shadow: none;
	background: transparent;
	margin-top: 40px;
	padding: 0 20px 20px;
	text-align: center;
}

footer.site-footer a {
	color: inherit;
	text-decoration: none;
}

footer.site-footer a:hover,
footer.site-footer a:focus {
	text-decoration: underline;
}

@media (max-width: 863px) {
	.site-header > .wp-block-group {
		padding-top: 80px !important;
	}

	.site-header > .wp-block-group > .wp-block-group:first-child {
		left: auto;
		right: 20px;
	}

	.site-header > .wp-block-group > .wp-block-group:not(:first-child),
	.site-header > .wp-block-group > .wp-block-spacer,
	main.wp-block-group > .wp-block-group {
		width: auto;
		max-width: none !important;
		margin-left: 0 !important;
	}

	main.wp-block-group > .wp-block-group {
		padding-left: 20px;
		padding-right: 20px;
	}

	.site-header .wp-block-spacer {
		height: 25px !important;
	}
}