/**
 * Single blog post — single.php.
 *
 * REUSED, NOTHING REDEFINED: tokens.css (all values, --container-reading
 * in particular — see single.php's own docblock for why 720px already
 * satisfies the long-form reading measure, no new width token needed),
 * .container/.container--reading, .breadcrumb/.page-header (main.css
 * component 12), .card/.card--hover, .badge/.badge--accent, .btn/
 * .btn--primary, .visually-hidden. Article content links need NO new
 * rule at all: the global `a { color: var(--color-accent); }` / `a:hover`
 * rules in main.css's Reset & base section already apply everywhere
 * the_content() renders, satisfying "accent color, not default blue" for
 * free. Related Posts reuses .blog-grid/.blog-card* from
 * blog-archive.css (enqueued here too — see inc/enqueue.php) rather than
 * a second grid definition.
 */

/* =========================================================
   Page header — breadcrumb only on this template (H1 lives in
   .article-header instead). Tighter bottom padding than the standard
   .page-header (main.css) since there's no H1/subcopy filling that space
   here — see single.php's docblock.
   ========================================================= */

.page-header--compact {
	padding-block-end: var(--space-4);
}

.breadcrumb__item--truncate {
	display: inline-block;
	max-width: 220px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: bottom;
}

@media (min-width: 640px) {
	.breadcrumb__item--truncate {
		max-width: 360px;
	}
}

/* =========================================================
   Article header — badge, H1, meta row.
   ========================================================= */

.article-header {
	padding-block-end: var(--space-6);
}

.article-header__badge {
	/* .badge itself isn't given a touch-target floor sitewide (most
	   .badge usages — ribbons, LIVE pill, payment badges — are decorative,
	   not links, so enlarging the shared component would be an unwanted
	   visual change there). This ONE usage is a real <a> to the category
	   archive, so it gets its own min-height instead. */
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	text-decoration: none;
	margin-bottom: var(--space-4);
}

.article-header__title {
	max-width: none;
}

.article-header__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-5);
	margin-top: var(--space-5);
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-border);
}

.article-header__meta-item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
}

/* =========================================================
   Featured image — wide-contained (.container, 1280px), deliberately
   wider than the .container--reading text column that follows. See
   single.php's docblock for why this isn't full-bleed.
   ========================================================= */

.article-featured-image {
	margin-block: var(--space-8);
}

.article-featured-image__img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
}

/* =========================================================
   Article content — long-form typography. h1 never appears here (the
   post title is the page's one H1, in .article-header); content starts
   at h2, matching the "don't skip levels relative to H1" requirement.
   Sizes are scaled down one step from main.css's sitewide h2/h3 defaults
   (tuned for full-width section headings, oversized for a 720px reading
   column).
   ========================================================= */

.article-content {
	font-size: var(--fs-md);
	line-height: var(--lh-base);
	color: var(--color-text-muted);
}

.article-content > * + * {
	margin-top: var(--space-5);
}

.article-content h2 {
	font-size: var(--fs-3xl);
	line-height: var(--lh-3xl);
	margin-top: var(--space-9);
}

.article-content h3 {
	font-size: var(--fs-2xl);
	line-height: var(--lh-2xl);
	margin-top: var(--space-7);
}

.article-content h2 + *,
.article-content h3 + * {
	margin-top: var(--space-4);
}

.article-content p {
	color: var(--color-text-muted);
}

.article-content strong {
	color: var(--color-text);
	font-weight: var(--fw-semibold);
}

.article-content ul,
.article-content ol {
	padding-inline-start: 1.25em;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.article-content li {
	color: var(--color-text-muted);
}

.article-content blockquote {
	margin: 0;
	padding-inline-start: var(--space-5);
	border-inline-start: 3px solid var(--color-accent);
	color: var(--color-text);
	font-style: italic;
	font-size: var(--fs-lg);
	line-height: var(--lh-lg);
}

.article-content img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
}

.article-content figure {
	margin: 0;
}

.article-content figcaption,
.article-content .wp-caption-text {
	margin-top: var(--space-2);
	color: var(--color-text-faint);
	font-size: var(--fs-xs);
	text-align: center;
}

.article-content pre {
	padding: var(--space-4);
	background: var(--color-surface-2);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow-x: auto;
	font-size: var(--fs-sm);
	line-height: var(--lh-md);
}

.article-content code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.article-content :not(pre) > code {
	padding: 0.15em 0.4em;
	background: var(--color-surface-2);
	border-radius: var(--radius-sm);
	font-size: 0.9em;
}

/* =========================================================
   In-article CTA — reuses .card's surface/border/radius, tinted rather
   than the pricing-card's full bold-border-plus-hard-shadow treatment:
   this is a calm in-flow suggestion, not a hero moment. Injected via
   inc/single-post.php's the_content filter — see single.php's docblock.
   ========================================================= */

.article-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);
	text-align: center;
	background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface));
	border-color: color-mix(in srgb, var(--color-accent) 30%, var(--color-border));
}

.article-cta__text {
	margin: 0;
	color: var(--color-text);
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
}

/* =========================================================
   Share links — two plain <a> links, zero JS. See single.php's docblock
   for why WhatsApp + email and nothing heavier.
   ========================================================= */

.article-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
	margin-top: var(--space-8);
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-border);
}

.article-share__label {
	color: var(--color-text-faint);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
}

.article-share__link {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem; /* 44px touch target — icon+text alone falls well short */
	gap: var(--space-2);
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	text-decoration: none;
}

.article-share__link:hover {
	color: var(--color-accent);
}

/* =========================================================
   Author bio — minimal credibility card, not a full author archive.
   ========================================================= */

.article-author {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin-top: var(--space-6);
}

.article-author__avatar {
	flex-shrink: 0;
	border-radius: var(--radius-full);
}

.article-author__name {
	margin: 0;
	color: var(--color-text);
	font-weight: var(--fw-semibold);
}

.article-author__bio {
	margin-top: var(--space-1);
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
}

/* =========================================================
   Related posts — .blog-grid/.blog-card* come from blog-archive.css
   (enqueued on is_single() too, see inc/enqueue.php); only the section
   heading is new here.
   ========================================================= */

.related-posts {
	border-top: 1px solid var(--color-border);
}

.related-posts__heading {
	font-size: var(--fs-2xl);
	line-height: var(--lh-2xl);
	margin-bottom: var(--space-6);
}