/*
 * Long-form content page (policies, terms, FAQ).
 * Markup: page.php  |  Loaded when WordPress picks page.php
 */

.content-page {
	--content-pad-top: clamp(2rem, 1.036vw + 1.756rem, 3rem);
	--content-pad-bottom: clamp(3rem, 3.077vw + 2.3077rem, 6rem);
	--content-title-size: clamp(1.75rem, 0.777vw + 1.568rem, 2.5rem);

	margin: 0;
	padding: var(--content-pad-top) 0 var(--content-pad-bottom);
	background: var(--sl-white);
	font-family: var(--theme-font);
}

.content-page-body {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	max-width: 58.125rem;
	margin-inline: auto;
}

.content-page-body--wide {
	max-width: none;
}

.content-page-title {
	margin: 0;
	color: var(--sl-grey-900);
	font-size: var(--content-title-size);
	font-weight: 600;
	line-height: 1.1;
}

.content-page-text {
	color: #333;
	font-size: 1rem;
	font-weight: 400;
	/* The design sets this text on a 22px line (16px x 1.375), not the 22.4px
	   that 1.4 gives - over a long document the difference adds up. */
	line-height: 1.375;
	overflow-wrap: anywhere;
}

.content-page-text > * {
	margin: 0;
}

.content-page-text p,
.content-page-text li {
	font: inherit;
	color: inherit;
}

.content-page-text p + p {
	margin-top: 1.375em;
}

/* A paragraph that opens with a numbered heading starts a new block: 24px,
   the gap between the text blocks of the design. */
.content-page-text p:has(> strong:first-child),
.content-page-text p:has(> br:first-child + strong) {
	margin-top: 1.5rem;
}

.content-page-text h2,
.content-page-text h3,
.content-page-text h4 {
	margin: 1.5rem 0 0.75rem;
	color: var(--sl-grey-900);
	font-weight: 600;
	line-height: 1.3;
}

.content-page-text h2 {
	font-size: 1.5rem;
}

.content-page-text h3 {
	font-size: 1.25rem;
}

.content-page-text h4 {
	font-size: 1rem;
}

.content-page-text strong,
.content-page-text b {
	font-weight: 600;
}

.content-page-text ul,
.content-page-text ol {
	padding-left: 1.5rem;
}

.content-page-text ul ul,
.content-page-text ol ol {
	padding-left: 1.5rem;
}

.content-page-text a {
	color: inherit;
	text-decoration: underline;
}

.content-page-text a:hover,
.content-page-text a:focus-visible {
	color: var(--sl-accent);
}

.content-page-text img,
.content-page-text iframe,
.content-page-text table {
	max-width: 100%;
}

.content-page-text .wp-block-table,
.content-page-text table {
	overflow-x: auto;
}