/**
 * din-reading.css — reading experience for single posts.
 * Reading time, scroll progress, table of contents, Listen button.
 * Loaded only on single posts.
 */

:root {
	--din-read-maroon: #9A0E1A;
	--din-read-maroon-dark: #7d0b15;
	--din-read-gold: #FFB800;
}

/* ---------- reading time ---------- */
.din-readtime { white-space: nowrap; opacity: .85; }

/* ---------- scroll progress bar ---------- */
.din-progress {
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 4px;
	background: rgba(154, 14, 26, .12);
	z-index: 9999;
	pointer-events: none;
}
.din-progress__fill {
	display: block; height: 100%; width: 0;
	background: linear-gradient(90deg, var(--din-read-maroon), var(--din-read-gold));
	transition: width .08s linear;
}
.din-progress__pct {
	position: fixed;
	top: 14px; right: 14px;
	z-index: 9999;
	background: var(--din-read-maroon);
	color: #fff;
	font: 600 12px/1 'Manrope', system-ui, sans-serif;
	padding: 6px 10px;
	border-radius: 999px;
	box-shadow: 0 4px 14px rgba(0,0,0,.18);
	opacity: 0; transform: translateY(-6px);
	transition: opacity .2s ease, transform .2s ease;
}
.din-progress__pct.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Listen button ---------- */
.din-listen {
	display: inline-flex; align-items: center; gap: 10px;
	margin: 0 0 28px;
	padding: 11px 20px;
	border: 1.5px solid var(--din-read-maroon);
	border-radius: 999px;
	background: #fff;
	color: var(--din-read-maroon);
	font: 600 15px/1 'Jost', system-ui, sans-serif;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.din-listen:hover { background: var(--din-read-maroon); color: #fff; }
.din-listen__icon { font-size: 13px; }
.din-listen.is-playing {
	background: var(--din-read-maroon); color: #fff;
	box-shadow: 0 0 0 4px rgba(255,184,0,.35);
}

/* ---------- table of contents (mobile-first: collapsible card) ---------- */
.din-toc {
	margin: 0 0 30px;
	border: 1px solid rgba(154,14,26,.18);
	border-radius: 14px;
	background: #faf6f2;
	overflow: hidden;
}
.din-toc__toggle {
	display: flex; align-items: center; gap: 10px;
	width: 100%;
	padding: 14px 18px;
	background: none; border: 0; cursor: pointer;
	font: 600 15px/1.2 'Jost', system-ui, sans-serif;
	color: var(--din-read-maroon);
	text-align: left;
}
.din-toc__title { flex: 1; }
.din-toc__pct { font: 500 12px/1 'Manrope', sans-serif; color: #8a7f77; }
.din-toc__chev { transition: transform .2s ease; }
.din-toc.is-open .din-toc__chev { transform: rotate(180deg); }
.din-toc__list {
	list-style: none; margin: 0; padding: 0 8px 12px;
	max-height: 0; overflow: hidden;
	transition: max-height .28s ease;
}
.din-toc.is-open .din-toc__list { max-height: 60vh; overflow: auto; }
.din-toc__item { margin: 0; }
.din-toc__item a {
	display: block;
	padding: 7px 12px;
	border-left: 2px solid transparent;
	color: #4a4038; text-decoration: none;
	font: 400 14px/1.4 'Manrope', system-ui, sans-serif;
	border-radius: 0 6px 6px 0;
	transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.din-toc__item--h3 a { padding-left: 26px; font-size: 13.5px; opacity: .9; }
.din-toc__item a:hover { background: rgba(154,14,26,.06); color: var(--din-read-maroon); }
.din-toc__item.is-active a {
	color: var(--din-read-maroon); font-weight: 600;
	border-left-color: var(--din-read-maroon);
	background: rgba(154,14,26,.07);
}

/* ---------- desktop: lift the TOC into the right margin, always expanded ---------- */
@media (min-width: 1280px) {
	.din-toc {
		position: fixed;
		top: 120px;
		right: max(20px, calc((100vw - 1180px) / 2 - 280px));
		width: 250px;
		max-height: calc(100vh - 150px);   /* never taller than the viewport */
		display: flex; flex-direction: column;
		background: #fff;
		box-shadow: 0 10px 40px rgba(0,0,0,.10);
		/* hidden until the reader scrolls past the hero, so it never sits over the banner */
		opacity: 0; visibility: hidden; transform: translateY(-6px);
		transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
	}
	.din-toc.din-visible { opacity: 1; visibility: visible; transform: none; }
	.din-toc__toggle { cursor: pointer; }          /* clickable: collapse/expand on desktop */
	.din-toc__chev { display: inline-block; }
	/* expanded: the list scrolls inside the panel (no cutoff); collapsed: header only */
	.din-toc.is-open .din-toc__list { max-height: none; overflow-y: auto; padding-bottom: 14px; flex: 1 1 auto; }
	.din-toc:not(.is-open) .din-toc__list { max-height: 0; overflow: hidden; padding-bottom: 0; }
}

/* ---------- responsive, styled content tables ---------- */
/* JS wraps each .entry-content table in .din-table-wrap so wide tables scroll
   horizontally inside their own box instead of being clipped by the page's
   overflow-x:hidden. */
.din-table-wrap {
	overflow-x: auto;
	margin: 0 0 28px;
	border: 1px solid rgba(154,14,26,.14);
	border-radius: 12px;
}
.din-table-wrap > table { margin: 0 !important; }
.entry-content table {
	border-collapse: collapse;
	width: 100%;
	min-width: 460px;                 /* keeps columns legible; wrapper scrolls when narrower */
	background: #fff;
	font: 400 15px/1.5 'Manrope', system-ui, sans-serif;
}
.entry-content th,
.entry-content td {
	padding: 11px 15px;
	border-bottom: 1px solid rgba(0,0,0,.08);
	text-align: left;
	vertical-align: top;
}
.entry-content thead th {
	background: var(--din-read-maroon);
	color: #fff;
	font-weight: 600;
	border-bottom: 0;
}
.entry-content tbody tr:nth-child(even) { background: #faf6f2; }
.entry-content tbody tr:last-child td { border-bottom: 0; }
/* scroll hint on small screens */
.din-table-wrap::-webkit-scrollbar { height: 8px; }
.din-table-wrap::-webkit-scrollbar-thumb { background: rgba(154,14,26,.35); border-radius: 8px; }
@media (max-width: 600px) {
	.entry-content table { font-size: 14px; }
	.entry-content th, .entry-content td { padding: 9px 12px; }
}

/* respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
	.din-progress__fill, .din-toc__list, .din-toc__chev, .din-listen, .din-progress__pct { transition: none; }
}