/* ==========================================================================
   Solo Dad Survival — shared additions
   ==========================================================================

   The BaySmart starter's own site.css has been replaced, per
   "11-(C) BaySmart Umbraco Starter v3" §5: site.css is the file that takes
   the incoming static design's styles on every clone. starter-chrome.css is
   deliberately NOT touched — it owns the cookie banner, the 404 page and the
   Content Page baseline.

   Solo Dad Survival ships FIVE STANDALONE page stylesheets rather than one
   cascade. Each of index/about/the-rebuild/free-kit/thank-you.css declares its
   own :root, body, .container and .btn, and they genuinely conflict — e.g.
   .footer-logo img is 80px on index but 48px on the-rebuild. Merging them into
   one file would silently change the design, which OQ-05 rules out. So
   _Layout.cshtml links one page stylesheet per Doc Type and this file carries
   only what is shared across all of them.

   Loaded LAST, after the page stylesheet, so the OQ-10 rules below win over
   the design's own single-class selectors (e.g. .guarantee).
   ========================================================================== */

/* --------------------------------------------------------------------------
   OQ-10 — the three inline style="" attributes in the static design, moved
   into CSS so they can't be baked into rich-text content and become
   uneditable.
   -------------------------------------------------------------------------- */

/* free-kit.html:38 — style="color:var(--accent);" on the third headline line.
   Emitted by _HeroHeadline.cshtml when heroLine3Accent is ticked. */
.accent {
	color: var(--accent);
}

/* the-rebuild.html:277 — the price-block guarantee carried
   style="margin-top:20px;text-align:center;max-width:480px;
   margin-left:auto;margin-right:auto;" */
.guarantee--price-block {
	margin-top: 20px;
	text-align: center;
	max-width: 480px;
	margin-left: auto;
	margin-right: auto;
}

/* about.html's story sign-off paragraph carried
   style="margin-top:32px;font-size:17px;color:var(--fg);line-height:1.75;".
   That one lives inside rich-text body copy, so it's resolved by applying this
   class in the editor instead of an inline style — same OQ-10 outcome, and the
   styling stays out of the content. */
.chapter-signoff {
	margin-top: 32px;
	font-size: 17px;
	color: var(--fg)!important;
	line-height: 1.75;
}

/* --------------------------------------------------------------------------
   Chrome that the static design repeated per page, kept here because
   _Layout.cshtml renders one set of chrome for all five Doc Types.
   -------------------------------------------------------------------------- */

/* free-kit is the only page whose <main> is not inside a .container, and its
   footer has no .footer-inner. Both page stylesheets already cover that; this
   only guards the shared skip link. */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 12px 20px;
	background: var(--accent);
	color: var(--bg);
	text-decoration: none;
}

.skip-link:focus {
	left: 0;
}

/* --------------------------------------------------------------------------
   Generic Content Page (Privacy Policy, and any future Terms/Refunds page).

   starter-chrome.css ships a deliberately neutral baseline for this Doc Type,
   and says in its own comment to restyle it once a real page exists. That
   baseline is built for a LIGHT page — #1a1a1a headings, #333 body, #1a56db
   links — and contentPage falls back to index.css, whose body is dark navy.
   The result was dark text on a dark background.

   Restyled here rather than in starter-chrome.css because that file is shared
   with the starter and the other clones built from it, some of which are light
   themed. This file loads last, so these win on identical selectors.

   The baseline also only covers h2/p/a. This page's copy uses h3, ul, li,
   strong and em as well, and index.css's `* { margin: 0; padding: 0 }` reset
   strips list indentation, so bullets sat outside their own text column.
   -------------------------------------------------------------------------- */

.content-page {
	max-width: 760px;
	padding: clamp(56px, 8vw, 88px) var(--pad) clamp(72px, 10vw, 112px);
}

.content-page__title {
	font-family: var(--font-display);
	font-size: clamp(34px, 5vw, 56px);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--fg);
	margin-bottom: 32px;
}

/* --muted is the same body-copy token the rest of the site uses. 5.7:1 on
   --bg, so it clears WCAG AA for normal text. */
.content-page__body {
	font-size: 17px;
	line-height: 1.8;
	color: var(--muted);
}

.content-page__body h2 {
	font-family: var(--font-display);
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: var(--fg);
	margin: 56px 0 16px;
	padding-top: 32px;
	border-top: 1px solid var(--border);
}

.content-page__body h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.content-page__body h3 {
	font-family: var(--font-body);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--fg);
	margin: 32px 0 10px;
}

.content-page__body p {
	margin-bottom: 18px;
}

/* Bold is used to pick out names and defined terms, so lift it clear of the
   muted body colour rather than leaning on weight alone. */
.content-page__body strong {
	color: var(--fg);
	font-weight: 600;
}

.content-page__body ul {
	margin: 0 0 18px;
	padding-left: 1.4em;
}

.content-page__body li {
	margin-bottom: 8px;
}

.content-page__body li::marker {
	color: var(--accent);
}

.content-page__body a {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.content-page__body a:hover {
	color: var(--accent-hover);
}

.content-page__body > *:last-child {
	margin-bottom: 0;
}