/* =============================================================
   FON Content Agent — Article Styling  (v1.3.0)
   Applied to generated post content on the front end.

   Selectors are scoped to `.article-page .a-content` (the fon-child
   single.php content wrapper) so they OUTRANK the theme's generic
   `.a-content p/blockquote/ul` rules, which load after this file.
   Bare-class fallbacks keep components styled in any other context.
   ============================================================= */

/* ── Lead paragraph ───────────────────────────────────────── */
.article-page .a-content p.fon-lead,
.fon-lead {
	font-size: 1.15em;
	line-height: 1.7;
	color: var(--ink, #0c1430);
	border-left: 4px solid var(--gold-500, #c9a961);  /* FON gold accent */
	padding: 0.6em 0 0.6em 1.1em;
	margin: 0 0 1.8em;
	font-weight: 400;
	font-family: var(--font-sans, inherit);
}

.fon-lead strong {
	color: var(--navy-900, #0a1530);  /* FON navy */
	font-weight: 700;
}

/* ── Pull quote ───────────────────────────────────────────── */
/* font-size: 1em stops the theme blockquote's 1.4rem compounding
   with the inner p's 1.15em. Background is white so the box reads
   against the ivory page background. */
.article-page .a-content blockquote.fon-pullquote,
.fon-pullquote {
	background: #fff;
	border: none;
	border-left: 5px solid var(--gold-500, #c9a961);
	border-radius: 0 6px 6px 0;
	margin: 2em 0 2em 0;
	padding: 1.4em 1.6em 1.2em 1.6em;
	position: relative;
	font-size: 1em;
	box-shadow: 0 1px 8px rgba(12, 20, 48, 0.05);
}

.fon-pullquote::before {
	content: "\201C";
	font-size: 4em;
	line-height: 1;
	color: var(--gold-500, #c9a961);
	opacity: 0.35;
	position: absolute;
	top: 0.05em;
	left: 0.2em;
	pointer-events: none;
}

.article-page .a-content .fon-pullquote p,
.fon-pullquote p {
	font-family: var(--font-display, Georgia, serif);
	font-size: 1.15em;
	font-style: italic;
	line-height: 1.5;
	color: var(--ink, #0c1430);
	margin: 0 0 0.7em;
	padding-left: 1.2em;
}

.article-page .a-content .fon-pullquote cite,
.fon-pullquote cite {
	display: block;
	font-family: var(--font-sans, inherit);
	font-size: 0.82em;
	font-style: normal;
	font-weight: 600;
	color: var(--muted, #6b7493);
	letter-spacing: 0.02em;
	padding-left: 1.2em;
}

/* ── Callout / stat box ───────────────────────────────────── */
.article-page .a-content .fon-callout,
.fon-callout {
	background: var(--navy-900, #0a1530);
	color: #f0ead8;
	border-radius: var(--radius-lg, 10px);
	padding: 1.2em 1.6em;
	margin: 2em 0;
	font-size: 0.97em;
	line-height: 1.6;
}

.fon-callout strong {
	color: var(--gold-500, #c9a961);
	font-size: 0.78em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	display: block;
	margin-bottom: 0.45em;
}

/* ── Checklist ────────────────────────────────────────────── */
/* Beats the theme's `.a-content ul` padding and `ul li` disc/margin
   rules, which otherwise add stray bullets + double indentation. */
.article-page .a-content ul.fon-checklist,
.fon-checklist {
	list-style: none;
	padding-left: 0;
	margin: 1.4em 0;
}

.article-page .a-content ul.fon-checklist li,
.fon-checklist li {
	list-style: none;
	margin-bottom: 0;
	padding: 0.45em 0 0.45em 2em;
	position: relative;
	border-bottom: 1px solid #ede8dc;
	line-height: 1.55;
}

.fon-checklist li:last-child {
	border-bottom: none;
}

.fon-checklist li::before {
	content: "";
	display: block;
	width: 1em;
	height: 1em;
	background: var(--gold-500, #c9a961);
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414L8.414 15l-4.121-4.121a1 1 0 011.414-1.414L8.414 12.17l6.879-6.877a1 1 0 011.414 0z'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414L8.414 15l-4.121-4.121a1 1 0 011.414-1.414L8.414 12.17l6.879-6.877a1 1 0 011.414 0z'/%3E%3C/svg%3E");
	mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	position: absolute;
	left: 0.2em;
	top: 0.6em;
}

/* ── FAQ block ────────────────────────────────────────────── */
.article-page .a-content .fon-faq,
.fon-faq {
	border-top: 2px solid var(--gold-500, #c9a961);
	margin: 0 0 1.4em;
	padding: 1.1em 0 0;
}

.article-page .a-content .fon-faq h3,
.fon-faq h3 {
	font-family: var(--font-sans, inherit);
	font-size: 1em;
	font-weight: 700;
	color: var(--navy-900, #0a1530);
	margin: 0 0 0.4em;
	line-height: 1.4;
}

.fon-faq h3::before {
	content: "Q: ";
	color: var(--gold-500, #c9a961);
	font-weight: 800;
}

.article-page .a-content .fon-faq p,
.fon-faq p {
	font-size: 0.95em;
	color: #3a3a4a;
	margin: 0 0 0.2em;
	line-height: 1.6;
}

/* ── Body rhythm the theme doesn't cover ──────────────────── */
/* The theme zeroes all margins (`*` reset) and only restores p/h2/
   ul/ol — h3 subheads and image figures otherwise render flush. */
.article-page .a-content h3 {
	margin: 2rem 0 0.8rem;
}

.article-page .a-content figure.wp-block-image,
.article-page .a-content figure.wp-caption {
	margin: 2rem 0;
}

.article-page .a-content figure.wp-block-image img {
	border-radius: var(--radius-lg, 10px);
}

/* ── Image credits (stock attribution) ────────────────────── */
.article-page .a-content .wp-block-image figcaption,
.wp-block-image figcaption,
.fon-img-credit {
	font-family: var(--font-sans, inherit);
	font-size: 0.78rem;
	line-height: 1.5;
	color: var(--muted, #6b7493);
	margin: 0.5rem 0 0;
	text-align: left;
}

.fon-img-credit {
	margin: -1.8rem 0 2.5rem;  /* tucks under the hero's 2.5rem gap */
}

.fon-img-credit a,
.wp-block-image figcaption a {
	color: var(--muted, #6b7493);
	border-bottom: 1px solid var(--line, #e3ddcf);
	text-decoration: none;
}

/* ── Responsive tweaks ────────────────────────────────────── */
@media (max-width: 640px) {
	.article-page .a-content blockquote.fon-pullquote,
	.fon-pullquote {
		padding: 1em 1em 0.9em 1.1em;
	}

	.fon-pullquote::before {
		font-size: 3em;
	}

	.article-page .a-content .fon-callout,
	.fon-callout {
		padding: 1em 1.1em;
	}

	.article-page .a-content p.fon-lead,
	.fon-lead {
		font-size: 1.06em;
	}
}