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

/* ── Lead paragraph ───────────────────────────────────────── */
.entry-content .fon-lead,
.post-content .fon-lead,
.fon-lead {
	font-size: 1.15em;
	line-height: 1.7;
	color: #1a1a2e;
	border-left: 4px solid #c8a951;  /* FON gold accent */
	padding: 0.6em 0 0.6em 1.1em;
	margin: 0 0 1.8em;
	font-weight: 400;
}

.fon-lead strong {
	color: #0d1b3e;  /* FON navy */
	font-weight: 700;
}

/* ── Pull quote ───────────────────────────────────────────── */
.entry-content .fon-pullquote,
.post-content .fon-pullquote,
.fon-pullquote {
	background: #f4f0e8;
	border: none;
	border-left: 5px solid #c8a951;
	border-radius: 0 6px 6px 0;
	margin: 2em 0 2em 0;
	padding: 1.4em 1.6em 1.2em 1.6em;
	position: relative;
}

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

.fon-pullquote p {
	font-size: 1.12em;
	font-style: italic;
	line-height: 1.65;
	color: #1a1a2e;
	margin: 0 0 0.7em;
	padding-left: 1.2em;
}

.fon-pullquote cite {
	display: block;
	font-size: 0.82em;
	font-style: normal;
	font-weight: 600;
	color: #5a4e32;
	letter-spacing: 0.02em;
	padding-left: 1.2em;
}

/* ── Callout / stat box ───────────────────────────────────── */
.entry-content .fon-callout,
.post-content .fon-callout,
.fon-callout {
	background: #0d1b3e;
	color: #f0ead8;
	border-radius: 6px;
	padding: 1.2em 1.6em;
	margin: 2em 0;
	font-size: 0.97em;
	line-height: 1.6;
}

.fon-callout strong {
	color: #c8a951;
	font-size: 0.78em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	display: block;
	margin-bottom: 0.45em;
}

/* ── Checklist ────────────────────────────────────────────── */
.entry-content .fon-checklist,
.post-content .fon-checklist,
.fon-checklist {
	list-style: none;
	padding-left: 0;
	margin: 1.4em 0;
}

.fon-checklist li {
	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: #c8a951;
	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 ────────────────────────────────────────────── */
.entry-content .fon-faq,
.post-content .fon-faq,
.fon-faq {
	border-top: 2px solid #c8a951;
	margin: 0 0 1.4em;
	padding: 1.1em 0 0;
}

.fon-faq h3 {
	font-size: 1em;
	font-weight: 700;
	color: #0d1b3e;
	margin: 0 0 0.4em;
	line-height: 1.4;
}

.fon-faq h3::before {
	content: "Q: ";
	color: #c8a951;
	font-weight: 800;
}

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

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

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

	.fon-callout {
		padding: 1em 1.1em;
	}

	.fon-lead {
		font-size: 1.06em;
	}
}