/*
 * Curiosity4U text pages (About, Contact, Privacy Policy): title band and a
 * reading column, in the M2/M4 editorial system. Scoped to .c4u-page;
 * shared tokens and components come from c4u-site.css and c4u-catalog.css.
 */

.c4u-page {
	padding-bottom: var(--section-space);
}

.c4u-page__head {
	padding-block: clamp(40px, 6vw, 80px) clamp(32px, 4vw, 48px);
}

.c4u-page__title {
	max-width: 16ch;
	font-size: var(--fs-6);
	font-weight: 500;
	line-height: 1.02;
	letter-spacing: -0.015em;
}

/* ---------- Reading column ---------- */

.c4u-page .c4u-prose {
	max-width: var(--c4u-reading-width);
	padding-top: var(--c4u-space-8);
	border-top: 1px solid var(--c4u-border);
}

.c4u-page .c4u-prose > * {
	margin-block: 0;
}

.c4u-page .c4u-prose > * + * {
	margin-top: var(--c4u-space-4);
}

.c4u-page .c4u-prose p,
.c4u-page .c4u-prose li {
	max-width: 65ch;
	font-size: var(--fs-2);
	line-height: 1.65;
}

.c4u-page .c4u-prose .c4u-lede {
	font-family: var(--font-display);
	font-size: var(--fs-3);
	font-weight: 500;
	line-height: 1.45;
}

.c4u-page .c4u-prose .c4u-updated {
	font-size: var(--fs-1);
	font-weight: 500;
	color: var(--c4u-muted);
}

.c4u-page .c4u-prose h2 {
	margin-top: var(--c4u-space-12);
	font-size: var(--fs-4);
	font-weight: 600;
	line-height: 1.15;
}

.c4u-page .c4u-prose h2 + * {
	margin-top: var(--c4u-space-3);
}

.c4u-page .c4u-prose ul {
	padding-left: 1.25em;
	list-style: disc outside;
}

.c4u-page .c4u-prose li {
	display: list-item;
}

.c4u-page .c4u-prose li + li {
	margin-top: var(--c4u-space-2);
}

.c4u-page .c4u-prose li::marker {
	color: var(--c4u-terracotta);
}

.c4u-page .c4u-prose a:not(.wp-block-button__link) {
	color: var(--c4u-aegean);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: rgba(35, 85, 107, 0.4);
	text-underline-offset: 0.2em;
}

.c4u-page .c4u-prose a:not(.wp-block-button__link):hover {
	text-decoration-color: currentColor;
}

/* Contact: the e-mail link as the page's one primary action. */
.c4u-page .c4u-prose .wp-block-buttons {
	margin-top: var(--c4u-space-8);
}

.c4u-page .c4u-prose .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0.75rem 1.5rem;
	border-radius: var(--c4u-radius);
	background: var(--c4u-aegean);
	color: var(--c4u-white);
	font-family: var(--font-text);
	font-size: var(--fs-2);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.2s;
}

.c4u-page .c4u-prose .wp-block-button__link:hover,
.c4u-page .c4u-prose .wp-block-button__link:focus {
	background: var(--aegean-deep);
	color: var(--c4u-white);
}

.c4u-page .c4u-prose :focus-visible {
	outline: 3px solid var(--c4u-aegean);
	outline-offset: 3px;
	border-radius: 2px;
}
