/*
 * Long-form prose. The flow page.php renders for the legal pages (VOP, ochrana
 * osobných údajov, cookies) and for anything else an editor writes in the block
 * editor.
 *
 * The prototype has no article page, so there is no §-reference to quote: this
 * applies the design's existing type roles (DESIGN-SYSTEM.md §2.2) to running
 * text -- Barlow italic uppercase headings, Poppins body at 16/1.6 in
 * rgba(255,255,255,0.6), red links, red list markers, hairline rules.
 *
 * Selectors are descendant, not child, so text nested inside the editor's group
 * and column blocks keeps its rhythm.
 *
 * The draft banner .sp-legal-placeholder has its own file. Nothing here touches
 * it beyond leaving its margins alone.
 */

.sp-prose {
	max-width: var(--sp-container-text);
	color: var(--sp-text-60);
	font-family: var(--sp-font-body);
	font-size: var(--sp-fs-md);
	line-height: var(--sp-lh-body);
	text-wrap: pretty;
}

/* ------------------------------------------------------------- headings */

.sp-prose h2,
.sp-prose h3,
.sp-prose h4,
.sp-prose h5,
.sp-prose h6 {
	margin: var(--sp-heading-gap) 0 var(--sp-4);
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 800;
	line-height: var(--sp-lh-tight);
	text-transform: uppercase;
	color: var(--sp-text);
	text-wrap: balance;
}

.sp-prose h2 {
	font-size: var(--sp-fs-h2-sub);
}

.sp-prose h3 {
	font-size: var(--sp-fs-2xl);
}

.sp-prose h4 {
	font-size: var(--sp-fs-xl);
}

.sp-prose h5 {
	font-size: var(--sp-fs-lg);
}

.sp-prose h6 {
	font-size: var(--sp-fs-md);
	letter-spacing: var(--sp-ls-pill);
}

/* A heading never opens a gap it does not need. */
.sp-prose > *:first-child,
.sp-prose h2:first-child,
.sp-prose h3:first-child,
.sp-prose h4:first-child {
	margin-top: 0;
}

/* ----------------------------------------------------------- paragraphs */

/*
 * :not() keeps the draft banner out of this rule. .sp-legal-placeholder is a
 * <p> too, and it owns its own colour, size and spacing -- overriding those
 * here would quietly defuse the loudest warning on the site.
 *
 * Bold text is deliberately absent: base.css already sets it to weight 600 in
 * full white, and it does so at a specificity the banner beats.
 */
.sp-prose p:not(.sp-legal-placeholder) {
	margin: 0 0 var(--sp-5);
	font-size: var(--sp-fs-md);
	line-height: var(--sp-lh-body);
	color: var(--sp-text-60);
}

.sp-prose p:not(.sp-legal-placeholder):last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------- lists */

.sp-prose ul,
.sp-prose ol {
	margin: 0 0 var(--sp-5);
	padding-left: var(--sp-9);
	color: var(--sp-text-60);
}

.sp-prose li {
	margin: 0;
	padding-left: var(--sp-1);
}

.sp-prose li + li {
	margin-top: var(--sp-2);
}

/* The brand marker: numbers and bullets carry the red, the text does not. */
.sp-prose li::marker {
	color: var(--sp-red);
}

.sp-prose ol > li::marker {
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 800;
}

.sp-prose li > ul,
.sp-prose li > ol {
	margin-top: var(--sp-2);
	margin-bottom: 0;
}

/* --------------------------------------------------------------- links */

.sp-prose a {
	color: var(--sp-red);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color var(--sp-dur-fast) var(--sp-ease);
}

.sp-prose a:hover,
.sp-prose a:focus {
	color: var(--sp-text);
}

/* ---------------------------------------------------- quotes and rules */

.sp-prose blockquote {
	margin: var(--sp-9) 0;
	padding-left: var(--sp-6);
	border-left: var(--sp-border-accent);
	color: var(--sp-text-78);
	font-family: var(--sp-font-display);
	font-style: italic;
}

.sp-prose blockquote p:last-child {
	margin-bottom: 0;
}

.sp-prose hr,
.sp-prose .wp-block-separator {
	height: 1px;
	margin: var(--sp-11) 0;
	border: 0;
	background: var(--sp-line-card);
}

/* -------------------------------------------------------------- tables */

.sp-prose table {
	width: 100%;
	margin: 0 0 var(--sp-5);
	border-collapse: collapse;
	font-size: var(--sp-fs-base);
	color: var(--sp-text-60);
}

.sp-prose th,
.sp-prose td {
	padding: var(--sp-3) var(--sp-4);
	border-bottom: 1px solid var(--sp-line-card);
	text-align: left;
	vertical-align: top;
}

.sp-prose th {
	color: var(--sp-text);
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 800;
	text-transform: uppercase;
}

/* Wide tables scroll inside their own box instead of the page. */
.sp-prose .wp-block-table {
	overflow-x: auto;
}

/* --------------------------------------------------------------- media */

.sp-prose img,
.sp-prose figure {
	margin-block: var(--sp-9);
}

.sp-prose figcaption {
	margin-top: var(--sp-2);
	font-size: var(--sp-fs-micro);
	letter-spacing: var(--sp-ls-label);
	text-transform: uppercase;
	color: var(--sp-text-45);
}

.sp-prose code,
.sp-prose kbd {
	font-family: var(--sp-font-mono);
	font-size: var(--sp-fs-sm);
	color: var(--sp-text);
}

.sp-prose pre {
	margin: 0 0 var(--sp-5);
	padding: var(--sp-5);
	overflow-x: auto;
	background: var(--sp-bg-deep);
	border: var(--sp-border);
	font-family: var(--sp-font-mono);
	font-size: var(--sp-fs-sm);
	color: var(--sp-text-60);
}