/* Page header for inner pages: breadcrumb, H1 and intro on a warm band under the white site header. Mobile-first. */

.iw-page-header {
	background: var(--iw-color-surface);
}

.iw-page-header__inner {
	display: grid;
	justify-items: start;
	gap: var(--iw-space-4);
	max-width: var(--iw-container);
	margin: 0 auto;
	padding: var(--iw-space-12) var(--iw-gutter) var(--iw-space-12);
}

.iw-page-header__crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--iw-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--iw-color-ink-soft);
	font-size: var(--iw-text-sm);
}

.iw-page-header__crumbs li + li::before {
	content: "/";
	margin-right: var(--iw-space-2);
}

/* Scoped so Elementor's ".elementor a" rules do not win */
.iw-page-header .iw-page-header__crumbs a {
	color: inherit;
	text-decoration: none;
}

.iw-page-header .iw-page-header__crumbs a:hover {
	color: var(--iw-color-brown);
	text-decoration: underline;
}

.iw-page-header__kicker {
	margin: 0;
	color: var(--iw-color-brown);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.iw-page-header__title {
	max-width: 18ch;
	margin: 0;
	font-size: var(--iw-text-h1);
}

.iw-page-header__intro {
	max-width: 36rem;
	margin: 0;
	color: var(--iw-color-ink-soft);
	font-size: var(--iw-text-lg);
}

@media (min-width: 1024px) {
	.iw-page-header__inner {
		padding-top: var(--iw-space-16);
		padding-bottom: var(--iw-space-12);
	}
}