/* ==========================================================================
   Page Content (page.php editor content)

   The reading column for pages whose body comes from the editor rather than
   from flexible_layouts sections - the legal pages and the sitemap. Follows
   the long-form prose treatment already used for articles
   (.post-body__content in css/single-post.css) so a policy page reads like
   the rest of the site rather than like an unstyled document.
   ========================================================================== */

.page-content {
	box-sizing: border-box;
	width: 100%;
	/* The hero above is floated (`section { float: left }` in style.css), so
	   without this the block box starts level with the hero's top edge and
	   only its line boxes are pushed clear. */
	clear: both;
	/* Gap layer above, sitewide gutters at the sides - same tokens the
	   section layouts use (see wriggle_space_above_style()). The generous
	   bottom padding is this page's own, as nothing below it owns that
	   boundary except the footer. */
	padding: var(--space-above, clamp(40px, 28.34px + 2.99vw, 80px))
	         clamp(25px, 3.14px + 5.61vw, 100px)
	         clamp(60px, 42.52px + 4.48vw, 120px);
	color: var(--black);
}

/* Design measure for body copy elsewhere in the theme is 800px
   (.text-block__content); legal copy is denser, so it runs slightly wider
   while staying inside a comfortable line length. */
.page-content__container {
	max-width: 880px;
	margin: 0 auto;
	box-sizing: border-box;
	font-size: 16px;
	/* The same leading as body copy in the text sections. */
	line-height: 1.2;
	color: var(--black);
}

/* ---------- Headings ---------- */

/* The page's own <h1> normally lives in the hero. If editor content still
   carries one, it is sized to sit a step below the hero heading. */
.page-content__container h1 {
	margin: 0 0 20px;
	font-size: clamp(28px, 24.5px + 0.9vw, 40px);
	font-weight: 600;
	line-height: 1.2;
	color: var(--black);
}

.page-content__container h2 {
	margin: 40px 0 16px;
	font-size: clamp(22px, 19px + 0.8vw, 28px);
	font-weight: 600;
	line-height: 1.25;
	color: var(--black);
}

.page-content__container h3 {
	margin: 32px 0 12px;
	font-size: clamp(18px, 16.5px + 0.4vw, 21px);
	font-weight: 600;
	line-height: 1.3;
	color: var(--black);
}

.page-content__container h4,
.page-content__container h5,
.page-content__container h6 {
	margin: 26px 0 10px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--black);
}

/* The first heading should not add a gap on top of the section padding. */
.page-content__container > *:first-child {
	margin-top: 0;
}

/* ---------- Body copy ---------- */

/* `padding` zeroes the global `p { padding: 20px 0 0 }` in style.css. */
.page-content__container p {
	margin: 0 0 20px;
	padding: 0;
	color: var(--black);
}

.page-content__container p:last-child {
	margin-bottom: 0;
}

.page-content__container a {
	color: var(--blue);
	text-decoration: underline;
}

/* The sitemap shortcode renders a link index rather than prose. The Custom
   Sitemap Manager plugin already handles that - it ships structure only and
   drops the prose underline itself - so all this site owes it is the brand
   values, through the plugin's --csm-* tokens. See
   wp-content/plugins/sitemap 2/assets/html-sitemap.css for the full list.
   Keeping them theme-side is what lets the plugin drop onto the next site
   without carrying this site's palette across with it. */
.page-content__container .csm-html-sitemap {
	--csm-rule-color: rgba(4, 32, 42, 0.12);
	--csm-link-color: var(--black);
	--csm-link-hover-color: var(--blue);
	/* The reading column is 880px, so a 260px minimum still yields two
	   columns while keeping the longest page titles on one line. */
	--csm-column-min: 260px;
}

/* The bottom padding on .page-content is sized for long-form prose, where the
   last paragraph ends on a ragged line and needs the room. An index ends on a
   full-width hairline rule instead, so the same value reads as a hole between
   the last row and the footer. Match the padding above the block instead -
   scoped to the sitemap so the legal pages keep the prose measure. */
.page-content:has(.csm-html-sitemap) {
	padding-bottom: clamp(40px, 28.34px + 2.99vw, 80px);
}

.page-content__container a:hover,
.page-content__container a:focus-visible {
	text-decoration: none;
}

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

/* ---------- Lists ---------- */

.page-content__container ul,
.page-content__container ol {
	margin: 0 0 20px;
	padding-left: 22px;
}

/* Overrides the global `ol li, ul li { padding: 10px 0 0 }` in style.css,
   which spaces list items off their top edge and stacks oddly here. */
.page-content__container li {
	padding: 0 0 8px;
}

.page-content__container li:last-child {
	padding-bottom: 0;
}

.page-content__container li > ul,
.page-content__container li > ol {
	margin: 8px 0 0;
}

/* ---------- Blocks ---------- */

/* Matches the pull-quote treatment in css/single-post.css rather than the
   grey default in style.css. */
.page-content__container blockquote {
	margin: 32px 0 !important;
	padding: 24px 28px !important;
	background: color-mix(in srgb, var(--green) 12%, var(--white)) !important;
	border: none !important;
	border-left: 4px solid color-mix(in srgb, var(--green) 55%, var(--black) 15%) !important;
	border-radius: 0 12px 12px 0;
	color: var(--black);
}

.page-content__container blockquote p:last-child {
	margin-bottom: 0;
}

.page-content__container hr {
	margin: 40px 0;
	border: 0;
	border-top: 1px solid rgba(4, 32, 42, 0.12);
}

.page-content__container img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}

/* Wide tables scroll inside the column instead of widening the page. */
.page-content__container .wp-block-table {
	margin: 0 0 24px;
	overflow-x: auto;
}

/* The CookieYes cookie list ([cookie_audit] shortcode) puts each category's
   description straight on top of its table with no gap. Give the table the
   same space a paragraph leaves below itself. */
.page-content__container .cky-table-wrapper {
	margin-top: 20px;
}

.page-content__container table {
	width: 100%;
	border-collapse: collapse;
	background-color: var(--white);
	border: 1px solid rgba(4, 32, 42, 0.12);
	padding: 0;
}

.page-content__container th,
.page-content__container td {
	padding: 12px 14px;
	border: 1px solid rgba(4, 32, 42, 0.12);
	text-align: left;
	vertical-align: top;
}

.page-content__container thead {
	background-color: rgba(4, 32, 42, 0.04);
	border: none;
}