/* ==========================================================================
   TLE Design System — article reading layer
   The universal blog treatment: applies to every post on the site, whether
   its content carries v1 .tle-scope markup or is plain Gutenberg output.
   Styles document STRUCTURE, so nothing here depends on per-post classes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Reading rhythm
   Long-form needs a larger type size and a measure that does not run wide.
   -------------------------------------------------------------------------- */

.tle-scope .article-body {
	font-size: 1.075rem;
	line-height: 1.75;
	color: var(--color-charcoal);
}

.tle-scope .article-body > p {
	margin-bottom: var(--space-md);
}

/* The opening paragraph carries the reader in — set it slightly larger. */
.tle-scope .article-body > p.tle-lede {
	font-size: 1.2rem;
	line-height: 1.65;
	color: var(--color-ink);
}

/* --------------------------------------------------------------------------
   Section headings
   A hairline above every H2 breaks a long article into visible sections —
   the single biggest fix for "it reads as one flat slab".
   -------------------------------------------------------------------------- */

.tle-scope .article-body h2 {
	position: relative;
	margin: var(--space-2xl) 0 var(--space-md);
	padding-top: var(--space-md);
	font-size: 1.85rem;
	border-top: 1px solid var(--color-border);
}

.tle-scope .article-body h2::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 64px;
	height: 3px;
	background: var(--color-accent);
}

.tle-scope .article-body h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.tle-scope .article-body h2:first-child::before { display: none; }

.tle-scope .article-body h3 {
	margin: var(--space-lg) 0 var(--space-xs);
	font-size: 1.28rem;
	line-height: 1.35;
}

.tle-scope .article-body h4 {
	font-family: var(--font-body);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-accent-dark);
	margin: var(--space-lg) 0 var(--space-xs);
}

/* --------------------------------------------------------------------------
   Lists
   Gold markers instead of browser discs, and room to breathe.
   -------------------------------------------------------------------------- */

.tle-scope .article-body ul,
.tle-scope .article-body ol {
	margin: var(--space-md) 0;
	padding-left: 1.4rem;
	list-style: none;
}

.tle-scope .article-body li {
	position: relative;
	margin-bottom: 0.6rem;
	padding-left: 0.35rem;
}

.tle-scope .article-body ul > li::before {
	content: "";
	position: absolute;
	left: -1rem;
	top: 0.66em;
	width: 6px;
	height: 6px;
	background: var(--color-accent);
	border-radius: 50%;
}

.tle-scope .article-body ol {
	counter-reset: tle-ol;
}

.tle-scope .article-body ol > li {
	counter-increment: tle-ol;
}

.tle-scope .article-body ol > li::before {
	content: counter(tle-ol);
	position: absolute;
	left: -1.4rem;
	top: 0.1em;
	font-family: var(--font-body);
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--color-accent-dark);
	line-height: 1.6;
}

.tle-scope .article-body li > ul,
.tle-scope .article-body li > ol {
	margin: 0.5rem 0 0.25rem;
}

/* --------------------------------------------------------------------------
   Callouts — Quick Answer and friends
   The answer box is the piece AI assistants lift. It should read as a stated
   answer, not as a decorative pull quote.
   -------------------------------------------------------------------------- */

.tle-scope .article-body .tle-callout {
	position: relative;
	margin: var(--space-lg) 0;
	padding: var(--space-md) var(--space-md) var(--space-md) var(--space-lg);
	background: var(--color-cream);
	border: 1px solid var(--color-border);
	border-left: 4px solid var(--color-accent);
}

.tle-scope .article-body .tle-callout__label {
	display: block;
	margin-bottom: 0.5rem;
	font-family: var(--font-body);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-accent-dark);
}

.tle-scope .article-body .tle-callout p {
	margin: 0;
	font-size: 1.08rem;
	line-height: 1.65;
	color: var(--color-ink);
}

.tle-scope .article-body .tle-callout p + p { margin-top: 0.75rem; }

/* The answer box gets the strongest weight on the page. */
.tle-scope .article-body .tle-callout--answer {
	background: var(--color-black);
	border-color: var(--color-black);
	border-left-color: var(--color-accent);
}

.tle-scope .article-body .tle-callout--answer p { color: #f2efe9; }

.tle-scope .article-body .tle-callout--answer strong { color: var(--color-white); }

.tle-scope .article-body .tle-callout--answer a { color: var(--color-accent); }

/* --------------------------------------------------------------------------
   Key Takeaways
   -------------------------------------------------------------------------- */

.tle-scope .article-body .tle-takeaways {
	margin: var(--space-lg) 0;
	padding: var(--space-md) var(--space-lg);
	background: var(--color-accent-bg);
	border: 1px solid rgba(200, 169, 110, 0.45);
}

.tle-scope .article-body .tle-takeaways__title {
	margin: 0 0 var(--space-sm);
	padding: 0;
	border: 0;
	font-family: var(--font-body);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-accent-dark);
}

.tle-scope .article-body .tle-takeaways__title::before { display: none; }

.tle-scope .article-body .tle-takeaways ul {
	margin: 0;
	padding-left: 1.6rem;
}

.tle-scope .article-body .tle-takeaways li {
	margin-bottom: 0.55rem;
	font-size: 1rem;
}

.tle-scope .article-body .tle-takeaways li:last-child { margin-bottom: 0; }

/* Check marks instead of dots — these are conclusions, not bullets. */
.tle-scope .article-body .tle-takeaways ul > li::before {
	content: "✓";
	left: -1.5rem;
	top: 0;
	width: auto;
	height: auto;
	background: none;
	border-radius: 0;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--color-accent-dark);
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

.tle-scope .article-body .tle-table-wrap {
	margin: var(--space-lg) 0;
	overflow-x: auto;
	border: 1px solid var(--color-border);
	-webkit-overflow-scrolling: touch;
}

.tle-scope .article-body .tle-table-wrap table {
	margin: 0;
	min-width: 34rem;
	border: 0;
}

.tle-scope .article-body tbody tr:nth-child(even) td {
	background: var(--color-light);
}

.tle-scope .article-body tbody tr:hover td {
	background: var(--color-accent-bg);
}

.tle-scope .article-body td:first-child {
	font-weight: 600;
	color: var(--color-black);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.tle-scope .article-body .tle-faq {
	margin-top: var(--space-md);
	border-top: 1px solid var(--color-border);
}

.tle-scope .article-body .tle-faq__item {
	padding: var(--space-md) 0;
	border-bottom: 1px solid var(--color-border);
}

.tle-scope .article-body .tle-faq__q {
	margin: 0 0 0.5rem;
	padding: 0;
	border: 0;
	font-family: var(--font-display);
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1.35;
	color: var(--color-black);
}

.tle-scope .article-body .tle-faq__q::before { display: none; }

.tle-scope .article-body .tle-faq__item p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Pull quotes (anything that is not a callout)
   -------------------------------------------------------------------------- */

.tle-scope .article-body blockquote:not(.tle-callout) {
	position: relative;
	margin: var(--space-lg) 0;
	padding: var(--space-md) var(--space-md) var(--space-md) var(--space-xl);
	background: transparent;
	border-left: 3px solid var(--color-accent);
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-style: italic;
	line-height: 1.55;
	color: var(--color-black);
}

.tle-scope .article-body blockquote:not(.tle-callout)::before {
	content: "\201C";
	position: absolute;
	left: 0.6rem;
	top: 0.1em;
	font-family: var(--font-display);
	font-size: 3.5rem;
	line-height: 1;
	color: var(--color-accent);
	opacity: 0.5;
}

.tle-scope .article-body blockquote:not(.tle-callout) p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Table of contents (Easy TOC — present on ~84% of posts)
   -------------------------------------------------------------------------- */

.tle-scope #ez-toc-container {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-left: 4px solid var(--color-accent);
	border-radius: 0;
	padding: var(--space-md) var(--space-lg);
	margin: 0 0 var(--space-lg);
}

.tle-scope #ez-toc-container .ez-toc-title-container {
	margin-bottom: 0.75rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--color-border);
}

.tle-scope #ez-toc-container .ez-toc-title {
	font-family: var(--font-body) !important;
	font-size: 0.68rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-accent-dark) !important;
}

.tle-scope #ez-toc-container ul,
.tle-scope #ez-toc-container ol {
	margin: 0;
	padding-left: 0;
	list-style: none;
	counter-reset: tle-toc;
}

.tle-scope #ez-toc-container li {
	position: relative;
	margin: 0 0 0.4rem;
	padding-left: 1.9rem;
	counter-increment: tle-toc;
}

.tle-scope #ez-toc-container li::before {
	content: counter(tle-toc, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0.15em;
	font-family: var(--font-body);
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--color-accent);
	background: none;
	width: auto;
	height: auto;
	border-radius: 0;
}

/* Nested entries are sub-sections — no second numbering sequence. */
.tle-scope #ez-toc-container li li {
	padding-left: 1rem;
	margin-top: 0.35rem;
}

.tle-scope #ez-toc-container li li::before {
	content: "–";
	color: var(--color-muted);
}

.tle-scope #ez-toc-container a {
	font-family: var(--font-body);
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--color-mid);
	text-decoration: none;
	transition: color var(--transition);
}

.tle-scope #ez-toc-container a:hover {
	color: var(--color-black);
}

/* Easy TOC is configured to start collapsed, so on most posts the box
   rendered as a heading over empty space. Open it by default and retire the
   toggle — a contents list that is always visible is the point of having one.
   No !important, so the plugin's own inline toggling still wins if re-enabled. */
.tle-scope #ez-toc-container ul.eztoc-toggle-hide-by-default { display: block; }

.tle-scope #ez-toc-container .ez-toc-title-toggle { display: none; }

.tle-scope #ez-toc-container nav > ul { margin: 0; }

/* --------------------------------------------------------------------------
   Links inside prose
   -------------------------------------------------------------------------- */

.tle-scope .article-body a:not(.btn):not(.tag-pill) {
	color: var(--color-black);
	text-decoration: underline;
	text-decoration-color: var(--color-accent);
	text-underline-offset: 3px;
	text-decoration-thickness: 2px;
	transition: color var(--transition);
}

.tle-scope .article-body a:not(.btn):not(.tag-pill):hover {
	color: var(--color-accent-dark);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
	.tle-scope .article-body { font-size: 1.02rem; }
	.tle-scope .article-body > p.tle-lede { font-size: 1.1rem; }
	.tle-scope .article-body h2 { font-size: 1.45rem; margin-top: var(--space-xl); }
	.tle-scope .article-body h3 { font-size: 1.15rem; }
	.tle-scope .article-body .tle-callout { padding-left: var(--space-md); }
	.tle-scope .article-body .tle-takeaways { padding: var(--space-md); }
	.tle-scope #ez-toc-container { padding: var(--space-md); }
}