/*
 * Page-level layouts: page header, contact, story, generic page and 404.
 */

/* -----------------------------------------------------------------------------
 * Page header (generic page template only - the composed templates carry
 * their heading as a block in the content)
 * -------------------------------------------------------------------------- */

.siol-page-header {
	padding-block: clamp(3rem, 6vw, 5.5rem) clamp(2rem, 4vw, 3.5rem);
	background-color: var(--siol-paper);
}

.siol-page-header__title {
	margin-bottom: 0;
	font-size: var(--siol-step-3);
}

/* -----------------------------------------------------------------------------
 * Contact page
 * -------------------------------------------------------------------------- */

.siol-contact {
	padding-block: clamp(3rem, 6vw, 5.5rem) var(--siol-section-y);
	background-color: var(--siol-paper);
}

.siol-contact__inner {
	display: grid;
	gap: clamp(2.5rem, 6vw, 4.5rem);
	align-items: start;
}

@media (min-width: 900px) {
	.siol-contact__inner {
		grid-template-columns: minmax(0, 1.15fr) minmax(16rem, 0.85fr);
	}
}

.siol-contact__main > :last-child {
	margin-bottom: 0;
}

/*
 * Shown in place of the form when no form shortcode/block has been added yet,
 * so the page never looks broken on a fresh install.
 */
.siol-contact__notice {
	margin: 0;
	padding: 1.25rem 1.5rem;
	background-color: var(--siol-green-soft);
	border: 1px dashed var(--siol-rule-strong);
	border-radius: 0.5rem;
	color: var(--siol-text);
	font-size: 0.9375rem;
}

.siol-contact__notice strong {
	display: block;
	margin-bottom: 0.25rem;
}

.siol-contact__aside {
	display: grid;
	gap: 2rem;
}

.siol-detail {
	padding-top: 1.25rem;
	border-top: 1px solid var(--siol-rule);
}

.siol-detail__label {
	margin: 0 0 0.4rem;
	color: var(--siol-muted);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.siol-detail__value {
	margin: 0;
	color: var(--siol-ink);
	font-family: var(--siol-font-display);
	font-size: var(--siol-step-1);
	line-height: 1.4;
}

.siol-detail__value a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--siol-rule-strong);
}

.siol-detail__value a:hover {
	border-bottom-color: var(--siol-green);
}

.siol-detail__list {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.siol-detail__list a {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	color: var(--siol-ink);
	font-size: 0.9375rem;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.siol-detail__list svg {
	width: 1.05rem;
	height: 1.05rem;
	flex: none;
	fill: currentColor;
}

.siol-detail__list a:hover {
	border-bottom-color: var(--siol-rule-strong);
}

/* -----------------------------------------------------------------------------
 * Story page
 * -------------------------------------------------------------------------- */

.siol-story {
	padding-block: clamp(3rem, 6vw, 5.5rem) var(--siol-section-y);
	background-color: var(--siol-paper);
}

.siol-story__body {
	max-width: 42rem;
	font-size: var(--siol-step-1);
	line-height: 1.7;
}

/* Styles the drop cap when the editor's own paragraph option is switched on. */
.siol-prose p.has-drop-cap:not(:focus)::first-letter {
	float: left;
	margin: 0.08em 0.08em 0 0;
	color: var(--siol-ink);
	font-family: var(--siol-font-display);
	font-size: 3.6em;
	font-style: normal;
	font-weight: 400;
	line-height: 0.82;
	text-transform: none;
}

.siol-story__body blockquote {
	margin-inline: calc(var(--siol-gutter) * -0.5);
	padding-left: 1.5rem;
	border-left: 2px solid var(--siol-green);
}

.siol-story__figure {
	margin-block: clamp(2.5rem, 5vw, 4rem);
}

/* -----------------------------------------------------------------------------
 * Generic page, index and 404
 * -------------------------------------------------------------------------- */

.siol-page {
	padding-block: 0 var(--siol-section-y);
	background-color: var(--siol-paper);
}

.siol-page__body {
	max-width: 42rem;
}

.siol-404 {
	padding-block: clamp(4rem, 10vw, 8rem);
	text-align: center;
}

.siol-404 .siol-lede {
	margin-inline: auto;
}

.siol-404 .siol-btn-row {
	justify-content: center;
}

.siol-entry-list {
	display: grid;
	gap: 2.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.siol-entry__title {
	margin-bottom: 0.4rem;
	font-size: var(--siol-step-2);
}

.siol-entry__title a {
	color: inherit;
	text-decoration: none;
}

.siol-entry__title a:hover {
	color: var(--siol-green);
}

.siol-entry__meta {
	margin: 0 0 0.75rem;
	color: var(--siol-muted);
	font-size: var(--siol-step--1);
	letter-spacing: 0.02em;
}

.siol-pagination {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--siol-rule);
}

.siol-pagination .page-numbers {
	padding: 0.35rem 0.7rem;
	text-decoration: none;
}

.siol-pagination .current {
	background-color: var(--siol-green-soft);
	border-radius: 999px;
	color: var(--siol-ink);
}