/*
 * Redesign 2026 — content pages.
 *
 * Styles the existing post content rather than replacing it: the markup here is
 * whatever Gutenberg already produced (h2/h3, paragraphs, lists, figures,
 * tables), so the copy -- and therefore every translation attached to it --
 * stays untouched.
 */

.ssr-page {
	max-width: var(--ss-max-content);
	margin: 0 auto;
	padding: clamp(40px, 6vw, 80px) var(--ss-pad-x) 0;
}

.ssr-page__head { margin-bottom: clamp(24px, 4vw, 40px); }
.ssr-page__head h1 {
	font-family: var(--ss-font-ui);
	font-size: clamp(34px, 4.4vw, 56px);
	font-weight: 800;
	line-height: var(--ss-lh-h1);
	letter-spacing: -.03em;
	color: var(--ss-ink);
	margin: 0;
	text-wrap: balance;
}

/* ---------- Prose ---------- */

/* Naxos styles bare tags -- `p { font-size:15px; font-family:Roboto }` and the
   same for headings. Inheritance from a container loses to a direct rule on the
   element no matter how specific the container's selector is, so the type has to
   be restated on the elements themselves rather than once on .ssr-prose. */
.ssr-prose {
	color: var(--ss-body);
}
.ssr-prose > * { max-width: 82ch; }
.ssr-prose p,
.ssr-prose li,
.ssr-prose td,
.ssr-prose th,
.ssr-prose dd,
.ssr-prose dt {
	font-family: var(--ss-font-ui);
	font-size: 17px;
	line-height: var(--ss-lh-base);
	color: var(--ss-body);
}
.ssr-prose p { margin: 0 0 1.15em; text-wrap: pretty; }

.ssr-prose h2 {
	font-family: var(--ss-font-ui);
	font-size: clamp(24px, 2.6vw, 32px);
	font-weight: 700;
	line-height: var(--ss-lh-h2);
	letter-spacing: -.025em;
	color: var(--ss-ink);
	margin: 2em 0 .7em;
	text-wrap: balance;
}
.ssr-prose h3 {
	font-family: var(--ss-font-ui);
	font-size: clamp(19px, 2.2vw, 24px);
	font-weight: 600;
	line-height: var(--ss-lh-h3);
	color: var(--ss-ink);
	margin: 1.8em 0 .6em;
}
.ssr-prose h2:first-child, .ssr-prose h3:first-child { margin-top: 0; }
.ssr-prose h2 strong, .ssr-prose h3 strong { font-weight: inherit; }

.ssr-prose a { color: var(--ss-accent-deep); text-decoration: underline; text-underline-offset: 2px; }
.ssr-prose a:hover { color: var(--ss-accent-darkest); }

.ssr-prose ul, .ssr-prose ol { margin: 0 0 1.15em; padding-inline-start: 1.4em; }
.ssr-prose li { margin-bottom: .5em; }
.ssr-prose li::marker { color: var(--ss-accent); }

.ssr-prose strong { color: var(--ss-ink); font-weight: 600; }

.ssr-prose blockquote {
	margin: 1.5em 0;
	padding: 20px 24px;
	background: var(--ss-wash);
	border-radius: var(--ss-r-tile);
	/* inline-start, not left: mirrors on the Arabic and Urdu versions */
	border-inline-start: 3px solid var(--ss-accent);
}
.ssr-prose blockquote p:last-child { margin-bottom: 0; }

/* Images sit on a wash panel like the handoff's screenshot gallery, and are
   capped so a 300px screenshot does not stretch across the column. */
.ssr-prose figure { margin: 1.6em 0; }
.ssr-prose figure img, .ssr-prose img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--ss-r-btn);
}
.ssr-prose .wp-block-image.aligncenter { margin-inline: auto; text-align: center; }
.ssr-prose figcaption {
	margin-top: 10px;
	font-size: 14px;
	color: var(--ss-muted-2);
}

.ssr-prose .wp-block-columns { display: flex; flex-wrap: wrap; gap: var(--ss-gap-card); }
.ssr-prose .wp-block-column { flex: 1 1 240px; min-width: 0; }

/* Tables scroll inside their own box instead of widening the page. */
.ssr-prose .wp-block-table { overflow-x: auto; margin: 1.5em 0; }
.ssr-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}
.ssr-prose th, .ssr-prose td {
	border: 1px solid var(--ss-hairline);
	padding: 10px 14px;
	text-align: start;
}
.ssr-prose th { background: var(--ss-wash); color: var(--ss-ink); font-weight: 600; }

/* Native accordions, styled the way the FAQ mock draws them. */
.ssr-prose details {
	border-top: 1px solid var(--ss-hairline);
	padding: 4px 0;
}
.ssr-prose details summary {
	cursor: pointer;
	list-style: none;
	padding: 18px 0;
	font-weight: 600;
	color: var(--ss-ink);
}
.ssr-prose details summary::-webkit-details-marker { display: none; }

/* ---------- Profit Calculator page ---------- */

.ssr-calcpage {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: clamp(20px, 3vw, 32px);
	align-items: start;
	margin-top: clamp(24px, 4vw, 40px);
}
.ssr-calcpage .ssr-reqs { margin-top: 0; }

/* The calculator is the Calculated Fields Form plugin's own markup. It is not
   restyled field by field -- only given the page's card so it sits in the
   layout instead of floating on the background. */
.ssr-calc-embed {
	background: var(--ss-surface);
	border: 1px solid var(--ss-hairline);
	border-radius: var(--ss-r-lg);
	padding: clamp(20px, 3vw, 28px);
	overflow-x: auto;
}
.ssr-calc-embed .cff-form-container,
.ssr-calc-embed form { max-width: 100%; }

.ssr-calcpage__cta { margin: clamp(28px, 4vw, 40px) 0 0; }

/* The Calculated Fields Form plugin was styled for the dark Naxos section it
   used to sit in: the form carries a brown gradient and paints its labels and
   title white. On the redesign's light card the gradient reads as a slab and
   the copy disappears, so both are reset here. !important because the plugin
   injects its own <style> block into the form itself. */
.ssr-calc-embed .cff-form {
	background-image: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
}
.ssr-calc-embed .fform,
.ssr-calc-embed label,
.ssr-calc-embed .cff-form-title,
.ssr-calc-embed .fields,
.ssr-calc-embed .dfield,
.ssr-calc-embed .uh { color: var(--ss-body) !important; }
.ssr-calc-embed .cff-form-title { color: var(--ss-ink) !important; }
.ssr-calc-embed input,
.ssr-calc-embed select {
	background: var(--ss-surface) !important;
	color: var(--ss-ink) !important;
	border: 1px solid var(--ss-input-border) !important;
	border-radius: var(--ss-r-input) !important;
}