/* =========================================================================
   page-policy.css, slug-scoped typography for donor-trust read-through pages.

   Keyed on a single body class (.donor-trust-page) added by
   add_page_slug_body_class() in functions.php. Slugs covered:

     - /100-donation-policy/
     - /corporate-sponsorship/
     - /comments-and-feedback/
     - /mission-vision-values/
     - /how-donations-work/
     - /donor-promise/
     - /complaints-handling-policy/
     - /privacy-policy/

   Renamed from page-100-policy.css when the second slug joined this
   stylesheet. The rename also serves as a hard cache-bust, since LiteSpeed
   strips ?ver= query strings from CSS link tags.

   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). These pages are
   donor-trust read-through pages, 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.

   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 scale (H3 22/19, ink #20212B on headings
   instead of navy), we mirror !important here. The body-class scope
   `body.donor-trust-page` has higher specificity than §6's
   `body .entry-content`, so within the !important plane this file wins. */

body.donor-trust-page .entry-content,
body.donor-trust-page .post-content {
	color: #20212B !important;
}

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

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

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

body.donor-trust-page .entry-content h3,
body.donor-trust-page .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.donor-trust-page .policy-tldr {
	margin: 24px 0 32px;
	padding: 20px 24px;
	background: #F0F3F4;
	border-left: 4px solid #009191;
	border-radius: 4px;
}

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

body.donor-trust-page .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.donor-trust-page .entry-content p a,
body.donor-trust-page .post-content p a,
body.donor-trust-page .entry-content li a,
body.donor-trust-page .post-content li a {
	color: #E0034B;
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.donor-trust-page .entry-content p a:hover,
body.donor-trust-page .post-content p a:hover,
body.donor-trust-page .entry-content li a:hover,
body.donor-trust-page .post-content li 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.donor-trust-page .entry-content p em,
body.donor-trust-page .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.donor-trust-page .entry-content p,
	body.donor-trust-page .post-content p,
	body.donor-trust-page .entry-content li,
	body.donor-trust-page .post-content li {
		font-size: 17px !important;
		line-height: 1.6 !important;
	}

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

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

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

	body.donor-trust-page .policy-tldr p {
		font-size: 17px;
	}
}