/*
 * Amarante — long-form prose.
 *
 * This site is mostly long-form guides and reports, so readability of the
 * article column is the single highest-value styling decision here.
 *
 * Legacy pages embed complete pre-styled HTML/CSS inside a Custom HTML
 * block. Those pages carry their own <style> rules, which win on
 * specificity. Everything below is deliberately low-specificity so it
 * styles unstyled content without fighting content that styles itself.
 */

.prose {
	max-width: var(--measure);
}

.prose--wide,
.entry--full .prose {
	max-width: none;
}

.entry__header {
	margin-bottom: var(--space-l);
}

.entry__title {
	margin-bottom: var(--space-2xs);
}

.entry__hero {
	margin: 0 0 var(--space-l);
}

.entry__hero img {
	width: 100%;
	border-radius: var(--radius-md);
}

.entry__hero-caption {
	margin-top: var(--space-3xs);
	color: var(--muted);
	font-size: var(--text--1);
}

.prose > * + * {
	margin-top: var(--space-m);
}

.prose h2 {
	margin-top: var(--space-xl);
}

.prose h3,
.prose h4 {
	margin-top: var(--space-l);
}

.prose ul,
.prose ol {
	padding-left: 1.35em;
}

.prose li + li {
	margin-top: var(--space-3xs);
}

.prose blockquote {
	margin-inline: 0;
	padding-left: var(--space-m);
	border-left: 3px solid var(--brand);
	color: var(--ink);
	font-size: var(--text-1);
}

.prose img,
.prose figure {
	border-radius: var(--radius-md);
}

.prose figcaption {
	margin-top: var(--space-3xs);
	color: var(--muted);
	font-size: var(--text--1);
	text-align: center;
}

/* Wide/full alignments inside a constrained prose column */
.prose .alignwide {
	width: min(var(--wide-width), 100vw - (var(--gutter) * 2));
	max-width: none;
	margin-inline: calc(50% - min(var(--wide-width), 100vw - (var(--gutter) * 2)) / 2);
}

.prose .alignfull {
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
}

.prose .alignleft {
	float: left;
	margin: 0 var(--space-m) var(--space-s) 0;
	max-width: 50%;
}

.prose .alignright {
	float: right;
	margin: 0 0 var(--space-s) var(--space-m);
	max-width: 50%;
}

.prose .aligncenter {
	margin-inline: auto;
}

/* Tables inside prose must scroll rather than force the page to scroll. */
.prose table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
}

.prose th,
.prose td {
	padding: var(--space-2xs) var(--space-xs);
	border-bottom: 1px solid var(--border);
	text-align: left;
}

.prose thead th {
	background: var(--brand-soft);
	color: var(--ink);
}

.prose tbody tr:last-child td {
	border-bottom: 0;
}

/* Embeds keep a 16:9 box so they do not shift layout. */
.prose iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--radius-md);
}

.entry__tags a {
	display: inline-block;
	margin: 0 var(--space-3xs) var(--space-3xs) 0;
	padding: 0.15rem 0.6rem;
	background: var(--surface-alt);
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	color: var(--body);
	font-size: var(--text--1);
	text-decoration: none;
}

.entry__tags a:hover,
.entry__tags a:focus-visible {
	border-color: var(--brand);
	color: var(--brand);
}

.page-links {
	margin-top: var(--space-l);
}

/* ---------- Converted-content polish ---------- */

/*
 * The Elementor icon-box grids converted to heading + paragraph pairs, so hub
 * pages are long runs of h3 + p. These rules give each pair enough definition
 * to scan as a distinct item without inventing markup that is not there.
 */
.entry--full .prose > h3 {
	display: flex;
	align-items: baseline;
	gap: var(--space-2xs);
}

.entry--full .prose > h3 > a {
	text-decoration: none;
}

.entry--full .prose > h3 > a:hover,
.entry--full .prose > h3 > a:focus-visible {
	text-decoration: underline;
}

/* A quiet rule under each h3-led block on hub pages. */
.entry--full .prose > h3 + p {
	padding-bottom: var(--space-m);
	border-bottom: 1px solid var(--border);
}

.entry--full .prose > h3 + p:last-child {
	border-bottom: 0;
}

/* Legacy raw-HTML pages ship their own <style>; keep ours low-specificity so
   theirs continues to win, but give unstyled tables and images a floor. */
.prose img { border-radius: var(--radius-md); }

.prose > ul li::marker,
.prose > ol li::marker { color: var(--brand); }

/* Long guide pages: give the first paragraph lead treatment. */
.entry--single .prose > p:first-of-type,
.entry--page .prose > p:first-of-type {
	font-size: var(--text-1);
	color: var(--ink);
}