/**
 * USDSC Post Templates — frontend styles (v1.1).
 *
 * One stylesheet drives every template. Per-template differences arrive as
 * CSS custom properties (--usdsc-pt-accent, --usdsc-pt-max) and modifier
 * classes (.usdsc-pt--magazine, .usdsc-pt--dark, etc.) set by the engine.
 *
 * Content internals use :where() so they carry ZERO specificity — Divi-built
 * post content keeps its own styling while plain editor content gets a
 * polished default look.
 */

.usdsc-pt {
	--usdsc-pt-accent: #2D9CFF;
	--usdsc-pt-accent-ink: #1d6fd0;
	--usdsc-pt-max: 760px;
	--usdsc-pt-ink: #15191f;
	--usdsc-pt-soft: #3d4654;
	--usdsc-pt-muted: #69727f;
	--usdsc-pt-hair: #e7ebf0;
	--usdsc-pt-hair-2: #eef1f5;
	--usdsc-pt-surface: #ffffff;
	--usdsc-pt-tint: #f5f7fa;
	--usdsc-pt-radius: 16px;

	/* Spacing scale */
	--usdsc-pt-s1: 0.5rem;
	--usdsc-pt-s2: 0.85rem;
	--usdsc-pt-s3: 1.35rem;
	--usdsc-pt-s4: 2rem;
	--usdsc-pt-s5: 3rem;
	--usdsc-pt-s6: clamp(3rem, 7vw, 5rem);
	--usdsc-pt-gap: clamp(2rem, 4.5vw, 3.5rem);

	--usdsc-pt-font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;
	--usdsc-pt-font-serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, "Iowan Old Style", Georgia, serif;
	--usdsc-pt-font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;

	color: var(--usdsc-pt-ink);
	font-family: var(--usdsc-pt-font-sans);
	font-size: 18px;
	line-height: 1.72;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.usdsc-pt *,
.usdsc-pt *::before,
.usdsc-pt *::after { box-sizing: border-box; }

.usdsc-pt ::selection { background: color-mix(in srgb, var(--usdsc-pt-accent) 22%, transparent); }

.usdsc-pt a {
	color: var(--usdsc-pt-accent-ink);
	text-decoration: none;
}
.usdsc-pt :focus-visible {
	outline: 2px solid var(--usdsc-pt-accent);
	outline-offset: 3px;
	border-radius: 3px;
}

/* ---------- Article frame & layout families ---------- */

.usdsc-pt__article {
	margin: 0 auto;
	padding: var(--usdsc-pt-s6) 1.5rem 0;
	max-width: var(--usdsc-pt-max);
}

.usdsc-pt__layout { display: block; }

/* Sidebar + docs layouts */
.usdsc-pt--sidebar-left .usdsc-pt__layout,
.usdsc-pt--sidebar-right .usdsc-pt__layout,
.usdsc-pt--docs .usdsc-pt__layout {
	display: grid;
	gap: var(--usdsc-pt-gap);
	align-items: start;
}
.usdsc-pt--sidebar-right .usdsc-pt__layout,
.usdsc-pt--docs .usdsc-pt__layout { grid-template-columns: minmax(0, 1fr) 250px; }
.usdsc-pt--sidebar-left .usdsc-pt__layout { grid-template-columns: 250px minmax(0, 1fr); }
.usdsc-pt--sidebar-left .usdsc-pt__sidebar { order: -1; }

.usdsc-pt__sidebar-inner {
	position: sticky;
	top: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
	font-size: 0.92rem;
	padding-top: 0.35rem;
}

/* Magazine: full-bleed title band, then content + rail */
.usdsc-pt--magazine .usdsc-pt__header {
	position: relative;
	background:
		radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--usdsc-pt-accent) 14%, transparent), transparent 55%),
		color-mix(in srgb, var(--usdsc-pt-accent) 7%, var(--usdsc-pt-surface));
	border-bottom: 1px solid color-mix(in srgb, var(--usdsc-pt-accent) 30%, var(--usdsc-pt-hair));
	padding: var(--usdsc-pt-s6) 1.5rem var(--usdsc-pt-s5);
	margin-bottom: var(--usdsc-pt-gap);
}
.usdsc-pt--magazine .usdsc-pt__header::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -1px; height: 3px;
	background: var(--usdsc-pt-accent);
}
.usdsc-pt--magazine .usdsc-pt__header > * { max-width: var(--usdsc-pt-max); margin-inline: auto; }
.usdsc-pt--magazine .usdsc-pt__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 250px;
	gap: var(--usdsc-pt-gap);
	max-width: var(--usdsc-pt-max);
	margin: 0 auto;
}

/* Boxed: card on a tinted page */
.usdsc-pt--boxed { background: var(--usdsc-pt-tint); padding: clamp(1.5rem, 4vw, 3.5rem) 1rem; }
.usdsc-pt--boxed .usdsc-pt__article {
	background: var(--usdsc-pt-surface);
	border: 1px solid var(--usdsc-pt-hair);
	border-radius: 20px;
	padding: var(--usdsc-pt-s6) clamp(1.5rem, 4vw, 3.75rem) var(--usdsc-pt-s5);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 30px 60px -38px rgba(16, 24, 40, 0.5);
}

/* ---------- Header: eyebrow, title, meta ---------- */

.usdsc-pt__header { margin-bottom: var(--usdsc-pt-s5); }

.usdsc-pt__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--usdsc-pt-accent-ink);
	margin-bottom: var(--usdsc-pt-s3);
}
.usdsc-pt__eyebrow::before {
	content: "";
	width: 22px; height: 2px;
	background: var(--usdsc-pt-accent);
	border-radius: 2px;
}

.usdsc-pt__title {
	margin: 0 0 var(--usdsc-pt-s3);
	font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.35rem);
	line-height: 1.08;
	font-weight: 800;
	letter-spacing: -0.022em;
	text-wrap: balance;
	color: var(--usdsc-pt-ink);
}

.usdsc-pt__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.9rem;
	font-size: 0.95rem;
	color: var(--usdsc-pt-muted);
}
.usdsc-pt__meta-author { display: inline-flex; align-items: center; gap: 0.6rem; }
.usdsc-pt__avatar { border-radius: 50%; width: 38px; height: 38px; }
.usdsc-pt__author-link { color: var(--usdsc-pt-ink); font-weight: 600; }
.usdsc-pt__author-link:hover { color: var(--usdsc-pt-accent-ink); }
.usdsc-pt__date,
.usdsc-pt__readtime { display: inline-flex; align-items: center; gap: 0.9rem; }
.usdsc-pt__date::before,
.usdsc-pt__readtime::before {
	content: "";
	width: 3px; height: 3px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.45;
}

/* ---------- Content typography (zero-specificity via :where) ---------- */

:where(.usdsc-pt__content) { font-size: 1.06rem; color: var(--usdsc-pt-soft); }
:where(.usdsc-pt__content) > * + * { margin-top: 1.5rem; }
:where(.usdsc-pt__content) p { margin: 0; }
:where(.usdsc-pt__content) strong { color: var(--usdsc-pt-ink); font-weight: 650; }

/* Lead paragraph */
:where(.usdsc-pt__content) > p:first-of-type {
	font-size: 1.2rem;
	line-height: 1.6;
	color: var(--usdsc-pt-ink);
}

:where(.usdsc-pt__content) h2 {
	color: var(--usdsc-pt-ink);
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.95rem);
	line-height: 1.22;
	font-weight: 750;
	letter-spacing: -0.014em;
	margin-top: 2.75rem;
	scroll-margin-top: 90px;
}
:where(.usdsc-pt__content) h3 {
	color: var(--usdsc-pt-ink);
	font-size: 1.3rem;
	font-weight: 700;
	margin-top: 2.1rem;
	scroll-margin-top: 90px;
}
:where(.usdsc-pt__content) h4 { color: var(--usdsc-pt-ink); font-size: 1.08rem; font-weight: 700; margin-top: 1.7rem; }
:where(.usdsc-pt__content) a {
	font-weight: 500;
	background-image: linear-gradient(var(--usdsc-pt-accent), var(--usdsc-pt-accent));
	background-size: 100% 1px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	padding-bottom: 1px;
	transition: background-size 0.2s;
}
:where(.usdsc-pt__content) a:hover { background-size: 100% 100%; color: #fff; padding: 0 2px; }
:where(.usdsc-pt__content) img,
:where(.usdsc-pt__content) figure { max-width: 100%; height: auto; border-radius: 12px; }
:where(.usdsc-pt__content) figure { margin-block: 2rem; }
:where(.usdsc-pt__content) figcaption { font-size: 0.86rem; color: var(--usdsc-pt-muted); text-align: center; margin-top: 0.7rem; }
:where(.usdsc-pt__content) ul,
:where(.usdsc-pt__content) ol { padding-left: 1.35rem; }
:where(.usdsc-pt__content) li { padding-left: 0.3rem; }
:where(.usdsc-pt__content) li + li { margin-top: 0.55rem; }
:where(.usdsc-pt__content) li::marker { color: var(--usdsc-pt-accent); }
:where(.usdsc-pt__content) blockquote {
	position: relative;
	margin: 2.4rem 0;
	padding: 0.4rem 0 0.4rem 1.6rem;
	border-left: 3px solid var(--usdsc-pt-accent);
	font-family: var(--usdsc-pt-font-serif);
	font-size: 1.32rem;
	line-height: 1.5;
	font-style: italic;
	color: var(--usdsc-pt-ink);
}
:where(.usdsc-pt__content) blockquote cite { display: block; margin-top: 0.6rem; font-size: 0.9rem; font-style: normal; font-family: var(--usdsc-pt-font-sans); color: var(--usdsc-pt-muted); }
:where(.usdsc-pt__content) pre {
	background: #0d1017;
	color: #e6edf3;
	padding: 1.2rem 1.4rem;
	border-radius: 12px;
	border: 1px solid #1c2230;
	overflow-x: auto;
	font-family: var(--usdsc-pt-font-mono);
	font-size: 0.88rem;
	line-height: 1.6;
}
:where(.usdsc-pt__content) code {
	font-family: var(--usdsc-pt-font-mono);
	font-size: 0.88em;
	background: var(--usdsc-pt-tint);
	border: 1px solid var(--usdsc-pt-hair);
	padding: 0.12em 0.4em;
	border-radius: 6px;
}
:where(.usdsc-pt__content) pre code { background: none; border: none; padding: 0; }
:where(.usdsc-pt__content) table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
:where(.usdsc-pt__content) th,
:where(.usdsc-pt__content) td { border-bottom: 1px solid var(--usdsc-pt-hair); padding: 0.7rem 0.9rem; text-align: left; }
:where(.usdsc-pt__content) thead th { border-bottom: 2px solid var(--usdsc-pt-soft); font-weight: 700; }
:where(.usdsc-pt__content) hr { border: none; border-top: 1px solid var(--usdsc-pt-hair); margin: 2.75rem 0; }

/* ---------- Footer pieces ---------- */

.usdsc-pt__footer { margin-top: var(--usdsc-pt-s5); }

.usdsc-pt__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--usdsc-pt-s4); }
.usdsc-pt__tag {
	font-size: 0.83rem;
	font-weight: 500;
	padding: 0.34rem 0.8rem;
	background: var(--usdsc-pt-tint);
	border: 1px solid var(--usdsc-pt-hair);
	border-radius: 999px;
	color: var(--usdsc-pt-muted);
	transition: all 0.15s;
}
.usdsc-pt__tag:hover { border-color: var(--usdsc-pt-accent); color: var(--usdsc-pt-accent-ink); background: color-mix(in srgb, var(--usdsc-pt-accent) 8%, transparent); }

.usdsc-pt__author-bio {
	display: flex;
	gap: 1.4rem;
	align-items: flex-start;
	margin-top: var(--usdsc-pt-s5);
	padding: 1.75rem;
	background: var(--usdsc-pt-tint);
	border: 1px solid var(--usdsc-pt-hair);
	border-top: 3px solid var(--usdsc-pt-accent);
	border-radius: var(--usdsc-pt-radius);
}
.usdsc-pt__author-bio-avatar { border-radius: 50%; width: 68px; height: 68px; flex: none; }
.usdsc-pt__author-bio-label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--usdsc-pt-muted); font-weight: 700; }
.usdsc-pt__author-bio-name { display: inline-block; font-size: 1.15rem; font-weight: 750; color: var(--usdsc-pt-ink); margin: 0.2rem 0 0.5rem; }
.usdsc-pt__author-bio-text { margin: 0; font-size: 0.96rem; color: var(--usdsc-pt-muted); line-height: 1.6; }

/* Share */
.usdsc-pt__share { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: var(--usdsc-pt-s4) 0; }
.usdsc-pt__share-label { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; color: var(--usdsc-pt-muted); margin-right: 0.3rem; }
.usdsc-pt__share-link {
	font: inherit;
	font-size: 0.86rem;
	font-weight: 600;
	padding: 0.46rem 0.95rem;
	border: 1px solid var(--usdsc-pt-hair);
	border-radius: 9px;
	background: var(--usdsc-pt-surface);
	color: var(--usdsc-pt-ink);
	cursor: pointer;
	transition: all 0.16s;
}
.usdsc-pt__share-link:hover { border-color: var(--usdsc-pt-accent); color: #fff; background: var(--usdsc-pt-accent); transform: translateY(-1px); }
.usdsc-pt__share-copy.is-copied { border-color: var(--usdsc-pt-accent); color: #fff; background: var(--usdsc-pt-accent); }

/* Sidebar TOC */
.usdsc-pt__toc-title { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.13em; font-weight: 700; color: var(--usdsc-pt-muted); margin-bottom: 0.85rem; }
.usdsc-pt__toc-list { display: flex; flex-direction: column; gap: 0.1rem; border-left: 2px solid var(--usdsc-pt-hair); }
.usdsc-pt__toc-list a {
	font-size: 0.89rem;
	color: var(--usdsc-pt-muted);
	line-height: 1.4;
	padding: 0.32rem 0 0.32rem 0.95rem;
	margin-left: -2px;
	border-left: 2px solid transparent;
}
.usdsc-pt__toc-list a:hover { color: var(--usdsc-pt-ink); }
.usdsc-pt__toc-list a.is-active { color: var(--usdsc-pt-accent-ink); border-left-color: var(--usdsc-pt-accent); font-weight: 600; }
.usdsc-pt__toc-list a.is-sub { padding-left: 1.7rem; font-size: 0.83rem; }

/* Reading progress */
.usdsc-pt__progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: transparent; z-index: 9999; pointer-events: none; }
.usdsc-pt__progress-bar { display: block; height: 100%; width: 0; background: var(--usdsc-pt-accent); box-shadow: 0 0 12px color-mix(in srgb, var(--usdsc-pt-accent) 60%, transparent); transition: width 0.08s linear; }

/* Prev / next */
.usdsc-pt__prevnext {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	max-width: var(--usdsc-pt-max);
	margin: var(--usdsc-pt-s5) auto 0;
	padding: 0 1.5rem;
}
.usdsc-pt__prevnext-link {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1.2rem 1.35rem;
	border: 1px solid var(--usdsc-pt-hair);
	border-radius: var(--usdsc-pt-radius);
	background: var(--usdsc-pt-surface);
	transition: border-color 0.16s, transform 0.16s, box-shadow 0.16s;
}
.usdsc-pt__prevnext-link:hover { border-color: var(--usdsc-pt-accent); transform: translateY(-2px); box-shadow: 0 16px 36px -24px color-mix(in srgb, var(--usdsc-pt-accent) 80%, transparent); }
.usdsc-pt__prevnext-next { text-align: right; }
.usdsc-pt__prevnext-dir { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; color: var(--usdsc-pt-accent-ink); }
.usdsc-pt__prevnext-title { font-weight: 650; color: var(--usdsc-pt-ink); line-height: 1.35; }

/* Related */
.usdsc-pt__related { max-width: var(--usdsc-pt-max); margin: var(--usdsc-pt-s6) auto 0; padding: var(--usdsc-pt-s5) 1.5rem 0; border-top: 1px solid var(--usdsc-pt-hair); }
.usdsc-pt__related-title { color: var(--usdsc-pt-ink); font-size: 1.5rem; font-weight: 750; letter-spacing: -0.01em; margin: 0 0 var(--usdsc-pt-s4); }
.usdsc-pt__related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.75rem; }
.usdsc-pt__related-card { display: flex; flex-direction: column; }
.usdsc-pt__related-thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 12px; background: var(--usdsc-pt-tint); }
.usdsc-pt__related-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.usdsc-pt__related-card:hover .usdsc-pt__related-thumb img { transform: scale(1.05); }
.usdsc-pt__related-card-body { padding-top: 1rem; }
.usdsc-pt__related-cat { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: var(--usdsc-pt-accent-ink); margin-bottom: 0.4rem; }
.usdsc-pt__related-card-title { font-weight: 650; color: var(--usdsc-pt-ink); line-height: 1.4; transition: color 0.15s; }
.usdsc-pt__related-card:hover .usdsc-pt__related-card-title { color: var(--usdsc-pt-accent-ink); }

/* Comments wrapper */
.usdsc-pt__comments { max-width: var(--usdsc-pt-max); margin: var(--usdsc-pt-s5) auto 0; padding: 0 1.5rem; }

/* ---------- Typography presets ---------- */

.usdsc-pt--type-serif .usdsc-pt__content,
.usdsc-pt--type-serif :where(.usdsc-pt__content),
.usdsc-pt--type-serif .usdsc-pt__title { font-family: var(--usdsc-pt-font-serif); }
.usdsc-pt--type-serif .usdsc-pt__title { font-weight: 750; letter-spacing: -0.012em; }
.usdsc-pt--type-mixed .usdsc-pt__title { font-family: var(--usdsc-pt-font-serif); font-weight: 750; }
.usdsc-pt--type-mono .usdsc-pt__title,
.usdsc-pt--type-mono :where(.usdsc-pt__content) h2,
.usdsc-pt--type-mono :where(.usdsc-pt__content) h3,
.usdsc-pt--type-mono .usdsc-pt__eyebrow,
.usdsc-pt--type-mono .usdsc-pt__related-title {
	font-family: var(--usdsc-pt-font-mono);
	letter-spacing: -0.02em;
}
.usdsc-pt--type-mono .usdsc-pt__title { font-weight: 700; }

/* Editorial + Spotlight flourishes (targeted by template id) */
.usdsc-pt[data-usdsc-pt-template="editorial"] :where(.usdsc-pt__content) > p:first-of-type::first-letter,
.usdsc-pt[data-usdsc-pt-template="spotlight"] :where(.usdsc-pt__content) > p:first-of-type::first-letter {
	float: left;
	font-family: var(--usdsc-pt-font-serif);
	font-size: 3.6em;
	line-height: 0.78;
	font-weight: 700;
	padding: 0.05em 0.12em 0 0;
	color: var(--usdsc-pt-accent-ink);
}
.usdsc-pt[data-usdsc-pt-template="spotlight"] .usdsc-pt__header { text-align: center; }
.usdsc-pt[data-usdsc-pt-template="spotlight"] .usdsc-pt__eyebrow { justify-content: center; }
.usdsc-pt[data-usdsc-pt-template="spotlight"] .usdsc-pt__title { font-size: clamp(2.4rem, 1.4rem + 4.2vw, 4rem); }
.usdsc-pt[data-usdsc-pt-template="spotlight"] .usdsc-pt__meta { justify-content: center; }

/* ---------- Dark family (USDSC Tech) ---------- */

.usdsc-pt--dark {
	--usdsc-pt-ink: #f3f6fb;
	--usdsc-pt-soft: #c2cbd8;
	--usdsc-pt-muted: #8b97a8;
	--usdsc-pt-hair: #262d39;
	--usdsc-pt-hair-2: #1d232e;
	--usdsc-pt-surface: #161b22;
	--usdsc-pt-tint: #1a212b;
	--usdsc-pt-accent-ink: var(--usdsc-pt-accent);
	background:
		radial-gradient(80% 50% at 50% 0%, color-mix(in srgb, var(--usdsc-pt-accent) 12%, transparent), transparent 70%),
		#0e1116;
}
.usdsc-pt--dark .usdsc-pt__title { color: #fff; text-shadow: 0 0 44px color-mix(in srgb, var(--usdsc-pt-accent) 28%, transparent); }
.usdsc-pt--dark .usdsc-pt__share-link { background: var(--usdsc-pt-surface); }
.usdsc-pt--dark .usdsc-pt__prevnext-link { background: var(--usdsc-pt-surface); }
.usdsc-pt--dark :where(.usdsc-pt__content) code { background: #1a212b; border-color: #262d39; }
.usdsc-pt--dark :where(.usdsc-pt__content) a:hover { color: #06121f; }

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

@media (max-width: 900px) {
	.usdsc-pt--sidebar-left .usdsc-pt__layout,
	.usdsc-pt--sidebar-right .usdsc-pt__layout,
	.usdsc-pt--magazine .usdsc-pt__layout,
	.usdsc-pt--docs .usdsc-pt__layout { grid-template-columns: 1fr; }
	.usdsc-pt__sidebar { order: 2; }
	.usdsc-pt__sidebar-inner { position: static; flex-direction: row; flex-wrap: wrap; gap: 1.5rem 2rem; }
	.usdsc-pt__toc { width: 100%; }
}

@media (max-width: 540px) {
	.usdsc-pt { font-size: 17px; }
	.usdsc-pt__prevnext { grid-template-columns: 1fr; }
	.usdsc-pt__author-bio { flex-direction: column; gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
	.usdsc-pt *,
	.usdsc-pt *::before,
	.usdsc-pt *::after { transition: none !important; animation: none !important; }
}