/**
 * Static page shell + the `.pdl-prose` typography block.
 *
 * Tailwind's preflight strips headings, lists, tables and emphasis back to
 * plain text, which is fine for hand-written widget markup but leaves editor
 * (WYSIWYG) content unreadable. `.pdl-prose` puts a normal document scale back,
 * scoped so it can never leak into the widgets.
 *
 * `.pdl-prose` is self-contained — drop it on any wrapper holding editor HTML,
 * including an Elementor Text Editor widget's "CSS Classes" field. (The older
 * `.pdl-rich` in output.css does the same job for the widgets' inline WYSIWYG
 * fields, minus the heading scale; keep using that where it already is.)
 *
 * Colours come from custom properties, so a light content band is one class:
 * put `pdl-prose--light` on the block, or `pdl-static--light` on the page.
 * Brand variables (--color-*) come from :root in output.css, so changing the
 * palette here never needs a Tailwind rebuild.
 */

/* ---- Page shell -------------------------------------------------------- */
.pdl-static {
	padding: 7.5rem 1.875rem 5rem; /* top value clears the fixed header */
	color: #fff;
}
.pdl-static--light {
	background: #fff;
}
.pdl-static__inner {
	max-width: 52rem; /* ~75 characters — a comfortable measure for long copy */
	margin: 0 auto;
}
.pdl-static__header {
	margin-bottom: 2.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.pdl-static--light .pdl-static__header {
	border-bottom-color: rgba(0, 0, 0, 0.12);
}
.pdl-static__title {
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 500;
	line-height: 1.05;
	margin: 0;
}
.pdl-static--light .pdl-static__title {
	color: var(--color-slate, #202a2f);
}
.pdl-static__meta {
	margin: 0.75rem 0 0;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.7);
}
.pdl-static--light .pdl-static__meta {
	color: var(--color-gray, #707070);
}

/* ---- Prose: tokens ----------------------------------------------------- */
.pdl-prose {
	--pdl-prose-ink: #fff;
	--pdl-prose-heading: #fff;
	--pdl-prose-muted: rgba(255, 255, 255, 0.72);
	--pdl-prose-link: var(--color-lime-green, #00e18d);
	--pdl-prose-rule: rgba(255, 255, 255, 0.18);
	--pdl-prose-panel: rgba(255, 255, 255, 0.06);

	color: var(--pdl-prose-ink);
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.7;
	overflow-wrap: break-word;
}

.pdl-prose--light,
.pdl-static--light .pdl-prose {
	--pdl-prose-ink: var(--color-slate, #202a2f);
	--pdl-prose-heading: var(--color-slate, #202a2f);
	--pdl-prose-muted: var(--color-gray, #707070);
	--pdl-prose-link: var(--color-cyan, #14657a);
	--pdl-prose-rule: rgba(0, 0, 0, 0.12);
	--pdl-prose-panel: rgba(0, 0, 0, 0.04);
}

/* ---- Prose: block rhythm ----------------------------------------------- */
.pdl-prose > * + * {
	margin-top: 1.25em;
}
.pdl-prose > :first-child {
	margin-top: 0;
}
.pdl-prose > :last-child {
	margin-bottom: 0;
}

/* ---- Prose: headings --------------------------------------------------- */
.pdl-prose h1,
.pdl-prose h2,
.pdl-prose h3,
.pdl-prose h4,
.pdl-prose h5,
.pdl-prose h6 {
	color: var(--pdl-prose-heading);
	font-weight: 500;
	line-height: 1.2;
	text-wrap: balance;
	scroll-margin-top: 7rem; /* in-page anchors clear the fixed header */
}

/* Headings need more air above than the flow rule gives them, and the
   `> * + *` selector only reaches top-level children, so set both margins. */
.pdl-prose h1 {
	font-size: clamp(1.875rem, 4vw, 2.5rem);
	margin: 1.6em 0 0.5em;
	letter-spacing: -0.02em;
}
.pdl-prose h2 {
	font-size: clamp(1.5rem, 3vw, 1.875rem);
	margin: 2em 0 0.6em;
	letter-spacing: -0.015em;
}
.pdl-prose h3 {
	font-size: clamp(1.25rem, 2.2vw, 1.5rem);
	margin: 1.8em 0 0.6em;
}
.pdl-prose h4 {
	font-size: 1.125rem;
	margin: 1.6em 0 0.5em;
}
.pdl-prose h5 {
	font-size: 1rem;
	margin: 1.5em 0 0.5em;
}
.pdl-prose h6 {
	font-size: 0.8125rem;
	margin: 1.5em 0 0.5em;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--pdl-prose-muted);
}
.pdl-prose > h1:first-child,
.pdl-prose > h2:first-child,
.pdl-prose > h3:first-child,
.pdl-prose > h4:first-child,
.pdl-prose > h5:first-child,
.pdl-prose > h6:first-child {
	margin-top: 0;
}

/* A heading immediately after another heading is a deck, not a new section. */
.pdl-prose h1 + h2,
.pdl-prose h2 + h3,
.pdl-prose h3 + h4 {
	margin-top: 0.75em;
}

/* ---- Prose: text ------------------------------------------------------- */
.pdl-prose p {
	margin: 0 0 1.25em;
}
.pdl-prose strong,
.pdl-prose b {
	font-weight: 600;
}
.pdl-prose em,
.pdl-prose i {
	font-style: italic;
}
.pdl-prose small {
	font-size: 0.875em;
	color: var(--pdl-prose-muted);
}
.pdl-prose sup,
.pdl-prose sub {
	font-size: 0.75em;
	line-height: 0;
	position: relative;
}
.pdl-prose sup {
	top: -0.5em;
}
.pdl-prose sub {
	bottom: -0.25em;
}
.pdl-prose abbr[title] {
	text-decoration: underline dotted;
	cursor: help;
}
.pdl-prose mark {
	background: var(--color-light-cyan, #daeefb);
	color: var(--color-slate, #202a2f);
	padding: 0 0.2em;
}

/* ---- Prose: links ------------------------------------------------------ */
.pdl-prose a {
	color: var(--pdl-prose-link);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
.pdl-prose a:hover,
.pdl-prose a:focus-visible {
	text-decoration-thickness: 2px;
}

/* ---- Prose: lists ------------------------------------------------------ */
.pdl-prose ul,
.pdl-prose ol {
	margin: 0 0 1.25em;
	padding-left: 1.5em;
}
.pdl-prose ul {
	list-style: disc;
}
.pdl-prose ol {
	list-style: decimal;
}
.pdl-prose ul ul {
	list-style: circle;
}
.pdl-prose ul ul ul {
	list-style: square;
}
.pdl-prose ol ol {
	list-style: lower-alpha;
}
.pdl-prose ol ol ol {
	list-style: lower-roman;
}
.pdl-prose li {
	margin: 0.4em 0;
	padding-left: 0.25em;
}
.pdl-prose li::marker {
	color: var(--pdl-prose-link);
}
.pdl-prose li > ul,
.pdl-prose li > ol {
	margin: 0.4em 0 0.4em;
}
.pdl-prose dl {
	margin: 0 0 1.25em;
}
.pdl-prose dt {
	font-weight: 600;
	margin-top: 1em;
}
.pdl-prose dd {
	margin: 0.25em 0 0 1.5em;
	color: var(--pdl-prose-muted);
}

/* ---- Prose: quotes, rules, figures ------------------------------------- */
.pdl-prose blockquote {
	margin: 1.75em 0;
	padding: 0.25em 0 0.25em 1.25em;
	border-left: 2px solid var(--pdl-prose-link);
	color: var(--pdl-prose-muted);
	font-style: italic;
}
.pdl-prose blockquote p:last-child {
	margin-bottom: 0;
}
.pdl-prose hr {
	border: 0;
	border-top: 1px solid var(--pdl-prose-rule);
	margin: 2.5em 0;
}
.pdl-prose img,
.pdl-prose video,
.pdl-prose iframe {
	max-width: 100%;
	height: auto;
	border-radius: 10px;
}
.pdl-prose figure {
	margin: 1.75em 0;
}
.pdl-prose figcaption {
	margin-top: 0.6em;
	font-size: 0.875rem;
	color: var(--pdl-prose-muted);
}

/* ---- Prose: code ------------------------------------------------------- */
.pdl-prose code,
.pdl-prose kbd,
.pdl-prose samp {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.875em;
	background: var(--pdl-prose-panel);
	border-radius: 4px;
	padding: 0.15em 0.4em;
}
.pdl-prose pre {
	margin: 1.5em 0;
	padding: 1.25rem;
	background: var(--pdl-prose-panel);
	border-radius: 10px;
	overflow-x: auto;
}
.pdl-prose pre code {
	background: none;
	padding: 0;
	font-size: 0.875rem;
}

/* ---- Prose: tables ----------------------------------------------------- */
/* Wide tables scroll inside the block rather than widening the page. */
.pdl-prose table {
	width: 100%;
	margin: 1.75em 0;
	border-collapse: collapse;
	font-size: 0.9375rem;
	display: block;
	overflow-x: auto;
}
.pdl-prose th,
.pdl-prose td {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--pdl-prose-rule);
	text-align: left;
	vertical-align: top;
}
.pdl-prose th {
	font-weight: 600;
	white-space: nowrap;
}
.pdl-prose thead th {
	border-bottom-width: 2px;
}
.pdl-prose caption {
	caption-side: bottom;
	margin-top: 0.75em;
	font-size: 0.875rem;
	color: var(--pdl-prose-muted);
	text-align: left;
}

/* ---- Small screens ----------------------------------------------------- */
@media (max-width: 767.98px) {
	.pdl-static {
		padding: 6rem 1.25rem 3.5rem;
	}
	.pdl-static__header {
		margin-bottom: 2rem;
	}
}

/* ---- Print ------------------------------------------------------------- */
/* Terms and privacy pages get printed and filed, so make that copy legible. */
@media print {
	.pdl-static {
		padding: 0;
		background: #fff;
	}
	.pdl-static__title,
	.pdl-static__meta,
	.pdl-prose {
		color: #000;
	}
	.pdl-prose {
		--pdl-prose-ink: #000;
		--pdl-prose-heading: #000;
		--pdl-prose-muted: #444;
		--pdl-prose-link: #000;
		--pdl-prose-rule: #999;
		--pdl-prose-panel: #f2f2f2;
	}
	.pdl-prose h1,
	.pdl-prose h2,
	.pdl-prose h3 {
		break-after: avoid;
	}
	.pdl-prose a::after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
		word-break: break-all;
	}
	.pdl-prose a[href^="#"]::after,
	.pdl-prose a[href^="mailto:"]::after {
		content: "";
	}
}