/* Single article reading layer — loaded only on is_singular('post') (inc/article-extras.php).
   Does not touch sg-summary / sg-faq / sg-tip / sg-livechart internals or the TOC. */
body.single-post {
	--sga-ink: #1F1A17;          /* body text, a touch darker than --art-ink */
	--sga-gold: #C9A227;
	--sga-gold-d: #A88418;
	--sga-line: #ECE6DB;
	--sga-muted: #6E655C;
	--sga-bar-from: #A88418;     /* progress bar */
	--sga-bar-to: #C9A227;
}

/* ---- 1) readability ---- */
body.single-post .sg-art { max-width: 720px; margin-inline: auto; }
body.single-post .sg-art__content p,
body.single-post .sg-art__content li {
	font-size: 17px;
	line-height: 1.95;
	color: var(--sga-ink);
}
body.single-post .sg-art__content h2 {
	font-size: 24px;
	margin: 2.1em 0 0.55em;
}
body.single-post .sg-art__content h3 {
	font-size: 19px;
	margin: 1.7em 0 0.45em;
}

/* ---- 2) natural right alignment (justify left gaps on phones) ---- */
body.single-post .sg-art__content p:not([class*="has-text-align"]),
body.single-post .sg-art__content li,
body.single-post .sg-art__content .sg-faq details > :not(summary) {
	text-align: start;
	text-justify: auto;
}

/* ---- 3) chat bubble: the plugin's always-on label is hidden here; sg-article.js shows
        the teaser once (8s in, 6s long, then quiet for 7 days) ---- */
body.single-post .swan-chat__label { display: none !important; }

/* ---- 5) editorial box ---- */
.sg-editorial {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 20px;
	margin: 32px 0 8px;
	padding: 18px 20px;
	border: 1px solid var(--sga-gold);
	border-radius: 12px;
	background: #FFF;
}
.sg-editorial__body { display: flex; align-items: flex-start; gap: 14px; min-width: 0; flex: 1 1 320px; }
.sg-editorial__logo { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: #FFF; border: 1px solid var(--sga-line); object-fit: contain; }
.sg-editorial p { margin: 0; }
.sg-editorial__title { font-weight: 700; font-size: 16px; color: var(--sga-ink); line-height: 1.7; }
.sg-editorial__text { font-size: 14px; color: var(--sga-muted); line-height: 1.9; }
.sg-editorial__date { font-size: 13px; color: var(--sga-muted); margin-top: 4px !important; }

/* ---- 7) reading progress (fills right → left) ---- */
.sg-progress {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 3px;
	pointer-events: none;
	z-index: 2;
}
.sg-progress--fixed { position: fixed; top: 0; bottom: auto; z-index: 99999; }
.sg-progress__fill {
	display: block;
	height: 100%;
	background: linear-gradient(to left, var(--sga-bar-from), var(--sga-bar-to));
	transform: scaleX(0);
	transform-origin: right center;
	will-change: transform;
}

/* ---- tablets & phones ---- */
@media (max-width: 768px) {
	/* 4) side padding max 16px; boxes and tables take the text width */
	body.single-post .sg-art-wrap { padding-inline: 16px; }
	/* custom.css gives every .col-full 1rem !important on phones; the article wrap already pads */
	html body.single-post #content > .col-full { padding-left: 0 !important; padding-right: 0 !important; margin-inline: 0; max-width: none; }
	body.single-post .sg-art__content > *,
	body.single-post .sg-art__content .sg-summary,
	body.single-post .sg-art__content .sg-tip,
	body.single-post .sg-art__content .sg-warning,
	body.single-post .sg-art__content .sg-mistake,
	body.single-post .sg-art__content figure,
	body.single-post .sg-art__content table { max-width: 100%; margin-inline: 0; box-sizing: border-box; }
	body.single-post .sg-art__content .wp-block-table,
	body.single-post .sg-art__content .sg-table { max-width: 100%; overflow-x: auto; }

	body.single-post .sg-art__content p,
	body.single-post .sg-art__content li { font-size: 16px; }
	body.single-post .sg-art__content h2 { font-size: 21px; }
	body.single-post .sg-art__content h3 { font-size: 18px; }

	/* 3) smaller chat button, kept clear of the edge */
	body.single-post .swan-chat { inset-inline-start: 12px; }
	body.single-post .swan-chat__icon { width: 48px; height: 48px; }
	body.single-post .swan-chat__mark { width: 28px; height: 28px; }
	body.single-post .swan-chat__teaser { bottom: 56px; }

	.sg-editorial { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.sg-progress__fill { transition: none; }
}