/**
 * Information pages (template "Informatiepagina") – loaded on that template
 * only.
 *
 * One calm reading column (about 800px) left-aligned with the breadcrumb:
 * title, optional intro, the block editor content and the help block. The
 * highlighted notice and the help block itself live in project.css.
 */

.eno-info {
	width: 100%;
}

.eno-info__column {
	max-width: 50rem;
	padding-block: 1.5rem 4rem;
}

/* Header ------------------------------------------------------------------ */

.eno-info__header {
	margin-bottom: 2.5rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid var(--eno-color-surface-high);
}

.eno-info__title {
	margin: 0;
	font-family: var(--eno-font-heading);
	font-size: var(--eno-text-headline-lg);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.eno-info__intro {
	max-width: 42rem;
	margin: 1rem 0 0;
	color: var(--eno-color-text-muted);
	font-size: var(--eno-text-body-lg);
	line-height: 1.65;
}

/* Text -------------------------------------------------------------------- */

.eno-info-prose {
	color: var(--eno-color-text);
	font-size: 1.0625rem;
	line-height: 1.75;
	overflow-wrap: break-word;
}

.eno-info-prose > :first-child {
	margin-top: 0;
}

.eno-info-prose > :last-child {
	margin-bottom: 0;
}

.eno-info-prose p,
.eno-info-prose ul,
.eno-info-prose ol,
.eno-info-prose figure,
.eno-info-prose table,
.eno-info-prose blockquote,
.eno-info-prose .wp-block-group {
	margin: 0 0 1.25rem;
}

.eno-info-prose h2,
.eno-info-prose h3,
.eno-info-prose h4 {
	scroll-margin-top: 2rem;
	color: var(--eno-color-text);
	font-family: var(--eno-font-heading);
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.eno-info-prose h2 {
	margin: 3rem 0 1rem;
	font-size: clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem);
	font-weight: 800;
	line-height: 1.25;
}

.eno-info-prose h3 {
	margin: 2.25rem 0 0.75rem;
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.35;
}

.eno-info-prose h4 {
	margin: 1.75rem 0 0.5rem;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.4;
}

.eno-info-prose a:not(.wp-block-button__link) {
	color: var(--eno-color-orange-dark);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color 150ms var(--eno-ease);
}

.eno-info-prose a:not(.wp-block-button__link):hover,
.eno-info-prose a:not(.wp-block-button__link):focus-visible {
	color: var(--eno-color-text);
}

.eno-info-prose a:focus-visible {
	outline: 2px solid var(--eno-color-orange);
	outline-offset: 2px;
	border-radius: var(--eno-radius-sm);
}

.eno-info-prose strong {
	font-weight: 700;
}

/* Lists */

.eno-info-prose ul,
.eno-info-prose ol {
	padding-left: 1.25rem;
}

.eno-info-prose li + li,
.eno-info-prose li > ul,
.eno-info-prose li > ol {
	margin-top: 0.5rem;
}

.eno-info-prose li > ul,
.eno-info-prose li > ol {
	margin-bottom: 0;
}

.eno-info-prose li::marker {
	color: var(--eno-color-orange);
}

.eno-info-prose ol > li::marker {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Separator, quote, images */

.eno-info-prose hr,
.eno-info-prose .wp-block-separator {
	width: 100%;
	margin: 3rem 0;
	border: 0;
	border-top: 1px solid var(--eno-color-surface-high);
	opacity: 1;
}

.eno-info-prose blockquote,
.eno-info-prose .wp-block-quote {
	margin-inline: 0;
	padding: 0.25rem 0 0.25rem 1.25rem;
	border-left: 3px solid var(--eno-color-orange);
	color: var(--eno-color-text);
	font-size: var(--eno-text-body-lg);
	font-style: normal;
}

.eno-info-prose blockquote > :last-child {
	margin-bottom: 0;
}

.eno-info-prose blockquote cite {
	display: block;
	margin-top: 0.5rem;
	color: var(--eno-color-text-muted);
	font-size: var(--eno-text-label);
	font-style: normal;
}

/* Wide/full alignments stay within the reading column. */
.eno-info-prose .alignwide,
.eno-info-prose .alignfull {
	width: auto;
	max-width: 100%;
	margin-inline: 0;
}

.eno-info-prose img {
	max-width: 100%;
	height: auto;
	border-radius: var(--eno-radius);
}

.eno-info-prose figure {
	margin-block: 2rem;
}

.eno-info-prose figcaption {
	margin-top: 0.5rem;
	color: var(--eno-color-text-muted);
	font-size: var(--eno-text-label);
	line-height: 1.5;
}

/* Tables scroll sideways on small screens instead of squeezing columns. */
.eno-info-prose .wp-block-table {
	margin: 0 0 1.75rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.eno-info-prose table {
	width: 100%;
	min-width: 30rem;
	margin: 0;
	border-collapse: collapse;
	font-size: 0.9375rem;
	line-height: 1.55;
}

.eno-info-prose th,
.eno-info-prose td {
	padding: 0.75rem;
	border: 0;
	border-bottom: 1px solid var(--eno-color-surface-high);
	text-align: left;
	vertical-align: top;
}

.eno-info-prose thead th {
	border-bottom: 2px solid var(--eno-color-text);
	font-size: var(--eno-text-label);
	font-weight: 700;
}

/* Help block sits a clear step below the text. */
.eno-info .eno-help {
	margin-top: 4rem;
}

@media (min-width: 768px) {
	.eno-info__column {
		padding-block: 2rem 5rem;
	}

	.eno-info__header {
		margin-bottom: 3rem;
		padding-bottom: 2.5rem;
	}
}

@media (min-width: 1024px) {
	.eno-info__column {
		padding-block: 2.5rem 6rem;
	}
}