/* =========================================================================
   /100-donation-policy/ — best-practice content typography.
   Loaded conditionally only on this page (see functions.php enqueue block).

   Why this file exists: the parent Charitian theme renders body copy at
   14px in #6A8695 — too small (below the 16-18px content-page best
   practice) and below WCAG AA contrast (3.4:1 on white). This page is a
   donor-trust read-through page, so legibility matters more than
   compactness. We bump body to 19px desktop / 17px mobile in #20212B
   (~14:1 contrast, AAA), and tighten the heading scale to match.

   All selectors are scoped to body.page-100-donation-policy — this body
   class comes from the add_page_slug_body_class() filter in functions.php.

   TODO(v2-tokens): when the v2 cutover ships its full design system, swap
   the hardcoded hex values below for var(--color-navy), var(--color-magenta),
   var(--color-teal), var(--color-bg-light) per BRANDING.md.

   Sources:
     - https://web.dev/articles/font-size — recommends 16-18px minimum
     - Nielsen Norman Group — recommends 18-20px for content pages
     - https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html
   ========================================================================= */

/* NOTE: brand-overrides.css §6 ships a site-wide typography sweep using
   !important. To preserve this page's specific scale (H3 22/19, ink #20212B
   on headings instead of navy), we mirror !important here. The body-class
   scope `body.page-100-donation-policy` has higher specificity than §6's
   `body .entry-content`, so within the !important plane this file wins. */

body.page-100-donation-policy .entry-content,
body.page-100-donation-policy .post-content {
	color: #20212B !important;
}

body.page-100-donation-policy .entry-content p,
body.page-100-donation-policy .post-content p,
body.page-100-donation-policy .entry-content li,
body.page-100-donation-policy .post-content li {
	font-size: 19px !important;
	line-height: 1.6 !important;
	color: #20212B !important;
}

body.page-100-donation-policy .entry-content strong,
body.page-100-donation-policy .post-content strong {
	color: #20212B !important;
	font-weight: 600 !important;
}

body.page-100-donation-policy .entry-content h2,
body.page-100-donation-policy .post-content h2 {
	font-size: 32px !important;
	line-height: 1.25 !important;
	margin-top: 40px;
	margin-bottom: 16px;
	color: #20212B !important;
}

body.page-100-donation-policy .entry-content h3,
body.page-100-donation-policy .post-content h3 {
	font-size: 22px !important;
	line-height: 1.3 !important;
	margin-top: 28px;
	margin-bottom: 8px;
	color: #20212B !important;
}

/* TL;DR aside at top of page — callout styling. */
body.page-100-donation-policy .policy-tldr {
	margin: 24px 0 32px;
	padding: 20px 24px;
	background: #F0F3F4;
	border-left: 4px solid #009191;
	border-radius: 4px;
}

body.page-100-donation-policy .policy-tldr p {
	margin: 0;
	font-size: 19px;
	line-height: 1.6;
	color: #20212B;
}

body.page-100-donation-policy .policy-tldr strong {
	color: #E0034B;
	font-weight: 600;
}

/* Inline links inside body copy — visible underline, not just colour.
   WCAG 1.4.1 (use of colour) — link recognition must not depend on colour alone. */
body.page-100-donation-policy .entry-content p a,
body.page-100-donation-policy .post-content p a {
	color: #E0034B;
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.page-100-donation-policy .entry-content p a:hover,
body.page-100-donation-policy .post-content p a:hover {
	text-decoration-thickness: 2px;
}

/* Hadith mid-paragraph quotations — slightly darker than body so they
   visually register as quoted text, without forcing a blockquote style. */
body.page-100-donation-policy .entry-content p em,
body.page-100-donation-policy .post-content p em {
	color: #2A3A48;
}

/* Mobile — drop sizes a notch so the long lines stay comfortable on a
   narrow viewport. 17px body stays well above the 16px iOS-zoom floor. */
@media (max-width: 768px) {
	body.page-100-donation-policy .entry-content p,
	body.page-100-donation-policy .post-content p,
	body.page-100-donation-policy .entry-content li,
	body.page-100-donation-policy .post-content li {
		font-size: 17px !important;
		line-height: 1.6 !important;
	}

	body.page-100-donation-policy .entry-content h2,
	body.page-100-donation-policy .post-content h2 {
		font-size: 24px !important;
		margin-top: 32px;
	}

	body.page-100-donation-policy .entry-content h3,
	body.page-100-donation-policy .post-content h3 {
		font-size: 19px !important;
		margin-top: 24px;
	}

	body.page-100-donation-policy .policy-tldr {
		margin: 20px 0 28px;
		padding: 16px 20px;
	}

	body.page-100-donation-policy .policy-tldr p {
		font-size: 17px;
	}
}