/**
 * Article engagement layer.
 * Reading-progress bar, sticky scroll-spy TOC, share row, back-to-top,
 * Key Takeaways / Buyer's Verdict / Summary blocks.
 *
 * Loaded on single posts / products / recipes only.
 */

/* ------------------------------------------------------------------ *
 * 1. Reading-progress bar
 * ------------------------------------------------------------------ */
.cor-progress {
	position: fixed; top: 0; left: 0; right: 0;
	height: 3px; z-index: 60;
	background: transparent; pointer-events: none;
}
.cor-progress-bar {
	display: block; height: 100%; width: 0;
	background: linear-gradient(90deg, var(--cor-cta), var(--cor-cream-d));
	box-shadow: 0 0 8px rgba(232, 81, 28, 0.35);
	transition: width .1s linear;
}

/* Heading offset so jump-links clear the sticky header + progress bar. */
.cor-single-body .entry-content h2,
.cor-single-body .entry-content h3 { scroll-margin-top: 88px; }

/* ------------------------------------------------------------------ *
 * 2. Table of contents
 * ------------------------------------------------------------------ */
.cor-toc { font-family: var(--cor-sans); }
/* Specificity kept at 2 classes so it wins over `.cor-single ol/li` (0,1,1). */
.cor-toc .cor-toc-list { list-style: none; margin: 0; padding: 0; }
.cor-toc .cor-toc-list li { margin: 0; }
.cor-toc-list a {
	display: block;
	padding: 6px 12px;
	font-size: .9rem; line-height: 1.4;
	color: var(--cor-muted);
	border-left: 2px solid var(--cor-line);
	transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.cor-toc-list a:hover { color: var(--cor-ink); background: var(--cor-bg-warm); }
.cor-toc-list a.is-active {
	color: var(--cor-cta); font-weight: 600;
	border-left-color: var(--cor-cta);
}
.cor-toc-list .cor-toc-sub a { padding-left: 26px; font-size: .84rem; }

/* Desktop: sticky in the sidebar column. */
.cor-toc--desktop {
	position: sticky; top: 92px;
	margin-bottom: 22px;
	padding: 18px 16px;
	background: var(--cor-paper);
	border: 1px solid var(--cor-line);
	border-radius: var(--cor-radius);
	max-height: calc(100vh - 120px);
	overflow-y: auto;
}
.cor-toc-title {
	margin: 0 0 10px; padding: 0 12px;
	font-family: var(--cor-sans);
	font-size: .72rem; font-weight: 700;
	letter-spacing: .12em; text-transform: uppercase;
	color: var(--cor-muted);
}

/* Mobile: collapsible <details> above the article body. */
.cor-toc--mobile {
	margin: 0 0 24px;
	background: var(--cor-paper);
	border: 1px solid var(--cor-line);
	border-radius: var(--cor-radius);
	overflow: hidden;
}
.cor-toc--mobile > summary {
	display: flex; align-items: center; justify-content: space-between;
	gap: 8px; cursor: pointer; list-style: none;
	padding: 14px 18px;
	font-family: var(--cor-sans);
	font-size: .78rem; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase;
	color: var(--cor-ink);
}
.cor-toc--mobile > summary::-webkit-details-marker { display: none; }
.cor-toc-chevron { transition: transform .2s ease; color: var(--cor-muted); flex: 0 0 auto; }
.cor-toc--mobile[open] .cor-toc-chevron { transform: rotate(180deg); }
.cor-toc--mobile .cor-toc-list { padding: 4px 8px 12px; }

/* Show one shell per breakpoint (matches .cor-single-layout collapse at 980px). */
.cor-toc--mobile { display: block; }
.cor-toc--desktop { display: block; }
@media (min-width: 981px) { .cor-toc--mobile { display: none; } }
@media (max-width: 980px) { .cor-toc--desktop { display: none; } }

/* The sticky TOC is the single sticky element in the article sidebar column;
   drop sticky on the promo sidebar below it so the two never overlap. */
@media (min-width: 981px) {
	.cor-single-sidebar .cor-sidebar { position: static; top: auto; }
}

/* ------------------------------------------------------------------ *
 * 3. Share row
 * ------------------------------------------------------------------ */
.cor-share {
	display: flex; align-items: center; gap: 14px;
	flex-wrap: wrap;
	font-family: var(--cor-sans);
	margin: 0 0 22px;
}
.cor-share--bottom {
	margin: 28px 0 8px;
	padding-top: 20px;
	border-top: 1px solid var(--cor-line);
}
.cor-share-label {
	font-size: .72rem; font-weight: 700;
	letter-spacing: .12em; text-transform: uppercase;
	color: var(--cor-muted);
}
.cor-share-btns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cor-share-btn {
	display: inline-flex; align-items: center; justify-content: center;
	position: relative;
	width: 38px; height: 38px; padding: 0;
	border: 1px solid var(--cor-line);
	border-radius: 999px;
	background: var(--cor-paper);
	color: var(--cor-ink-2);
	cursor: pointer;
	transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.cor-share-btn:hover { transform: translateY(-2px); color: #fff; }
.cor-share-btn--x:hover        { background: #000;     border-color: #000; }
.cor-share-btn--facebook:hover { background: #1877F2; border-color: #1877F2; }
.cor-share-btn--whatsapp:hover { background: #25D366; border-color: #25D366; }
.cor-share-btn--linkedin:hover { background: #0A66C2; border-color: #0A66C2; }
.cor-share-btn--email:hover,
.cor-share-btn--native:hover,
.cor-share-btn--copy:hover     { background: var(--cor-sage); border-color: var(--cor-sage); }
.cor-share-btn.is-copied       { background: var(--cor-sage); border-color: var(--cor-sage); color: #fff; }
.cor-share-copied {
	position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
	white-space: nowrap;
	font-size: .68rem; font-weight: 600;
	color: var(--cor-sage-d);
	background: var(--cor-paper);
	border: 1px solid var(--cor-line);
	border-radius: 6px;
	padding: 2px 8px;
	pointer-events: none;
}
.cor-share-copied:empty { display: none; }

/* ------------------------------------------------------------------ *
 * 4. Back-to-top
 * ------------------------------------------------------------------ */
.cor-to-top {
	position: fixed; left: 20px; bottom: 20px; z-index: 60;
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px;
	border: 1px solid var(--cor-line);
	border-radius: 999px;
	background: var(--cor-paper);
	color: var(--cor-sage-d);
	cursor: pointer;
	box-shadow: var(--cor-shadow);
	transition: transform .2s ease, background .2s ease, color .2s ease, bottom .2s ease;
}
.cor-to-top:hover { background: var(--cor-sage); color: #fff; transform: translateY(-2px); }
.cor-to-top[hidden] { display: none; }
/* Lift above the sticky bottom bars when they're on-screen. */
body:has(.cor-sticky-cta.is-visible) .cor-to-top,
body:has(.cor-sticky-product.is-visible) .cor-to-top { bottom: 84px; }

/* Content-box styles (Key Takeaways / Verdict / Summary) live in blocks.css,
   which loads site-wide so those boxes render on pages as well as articles. */

/* ------------------------------------------------------------------ *
 * 5. Motion / print
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.cor-progress-bar,
	.cor-share-btn,
	.cor-to-top,
	.cor-toc-chevron { transition: none; }
}
@media print {
	.cor-progress, .cor-share, .cor-to-top, .cor-toc { display: none !important; }
}