/**
 * Front-end styles for generated long-form articles.
 * Scoped to .nsc-* so it never touches manually written posts.
 */

:root {
	--nsc-accent: #f8c341;
	--nsc-accent-ink: #101010;
	--nsc-ink: #1a1a1a;
	--nsc-muted: #6b7280;
	--nsc-line: rgba(0, 0, 0, 0.1);
	--nsc-surface: rgba(0, 0, 0, 0.04);
}

.dark {
	--nsc-ink: #f5f5f5;
	--nsc-muted: #9ca3af;
	--nsc-line: rgba(255, 255, 255, 0.12);
	--nsc-surface: rgba(255, 255, 255, 0.05);
}

/* ---------------------------------------------------------------- Intro */
.nsc-intro {
	font-size: 1.1em;
	line-height: 1.8;
}

.nsc-intro > :first-child {
	margin-top: 0;
}

/* ------------------------------------------------------------ TOC block */
.nsc-toc {
	margin: 2rem 0;
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--nsc-line);
	border-inline-start: 4px solid var(--nsc-accent);
	border-radius: 14px;
	background: var(--nsc-surface);
	break-inside: avoid;
}

.nsc-toc-title {
	display: block;
	margin-bottom: 0.75rem;
	font-size: 0.8em;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--nsc-muted);
}

.nsc-toc ol {
	margin: 0;
	padding-inline-start: 1.25rem;
}

.nsc-toc li {
	margin: 0.3em 0;
	font-size: 0.98em;
	line-height: 1.6;
}

.nsc-toc a {
	text-decoration: none;
	color: var(--nsc-ink);
}

.nsc-toc a:hover {
	color: #b45309;
	text-decoration: underline;
}

.dark .nsc-toc a:hover {
	color: var(--nsc-accent);
}

/* ---------------------------------------------------------- CTA buttons */
.nsc-cta-btn {
	margin: 1.75rem 0;
	text-align: center;
}

.nsc-cta-btn a {
	display: inline-block;
	padding: 0.95em 2.2em;
	border-radius: 999px;
	background: var(--nsc-accent);
	color: var(--nsc-accent-ink);
	font-weight: 800;
	font-size: 1.02em;
	letter-spacing: 0.01em;
	text-decoration: none;
	box-shadow: 0 10px 30px rgba(248, 195, 65, 0.35);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.nsc-cta-btn a:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 36px rgba(248, 195, 65, 0.45);
}

.nsc-cta-btn-bottom {
	margin-top: 2.5rem;
}

/* ------------------------------------------------------------- Sections */
.nsc-section > :first-child {
	margin-top: 0;
}

.nsc-section ul {
	margin: 1.2em 0;
	padding-inline-start: 1.4em;
	list-style: disc;
}

.nsc-section ul li {
	margin: 0.45em 0;
	line-height: 1.75;
}

.nsc-inline-link {
	margin: 1.2em 0;
	padding-inline-start: 1em;
	border-inline-start: 3px solid var(--nsc-accent);
	font-size: 0.97em;
	color: var(--nsc-muted);
}

.nsc-inline-link a {
	color: inherit;
	font-weight: 600;
}

/* ------------------------------------------------------- Related block */
.nsc-related {
	margin: 2.5rem 0;
	padding: 1.25rem 1.5rem;
	border: 1px dashed var(--nsc-line);
	border-radius: 14px;
}

.nsc-related h2 {
	margin-top: 0;
	font-size: 1.1em;
}

.nsc-related ul {
	margin: 0;
	padding-inline-start: 1.2em;
}

.nsc-related li {
	margin: 0.4em 0;
}

/* ------------------------------------------------------ Comparison table */
.nsc-table-wrap {
	margin: 1.75rem 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.nsc-compare {
	width: 100%;
	min-width: 520px;
	border-collapse: collapse;
	font-size: 0.95em;
	background: var(--nsc-surface);
}

.nsc-compare th,
.nsc-compare td {
	padding: 0.8em 0.9em;
	border: 1px solid var(--nsc-line);
	text-align: start;
	vertical-align: top;
	line-height: 1.6;
}

.nsc-compare thead th {
	background: var(--nsc-accent);
	color: var(--nsc-accent-ink);
	font-weight: 800;
	white-space: nowrap;
}

.nsc-compare tbody tr:nth-child(even) {
	background: rgba(0, 0, 0, 0.02);
}

.dark .nsc-compare tbody tr:nth-child(even) {
	background: rgba(255, 255, 255, 0.03);
}

/* ------------------------------------------------------------------ FAQ */
.nsc-faq {
	margin: 2.5rem 0;
	padding: 1.5rem;
	border: 1px solid var(--nsc-line);
	border-radius: 16px;
	background: var(--nsc-surface);
}

.nsc-faq > h2:first-child {
	margin-top: 0;
	font-size: 1.3em;
}

.nsc-faq dt {
	margin-top: 1.1em;
	font-weight: 800;
	color: var(--nsc-ink);
	line-height: 1.6;
}

.nsc-faq dt:first-of-type {
	margin-top: 0.4em;
}

.nsc-faq dd {
	margin: 0.4em 0 0;
	padding-inline-start: 0;
	color: var(--nsc-muted);
	line-height: 1.75;
}

.nsc-faq dd > :last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------ Services block */
.nsc-services {
	margin: 2.5rem 0;
	padding: 1.5rem;
	border: 1px solid var(--nsc-line);
	border-radius: 16px;
}

.nsc-services h2 {
	margin-top: 0;
	font-size: 1.15em;
}

.nsc-services ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nsc-services li a {
	display: inline-block;
	padding: 0.55em 1.1em;
	border: 1px solid var(--nsc-line);
	border-radius: 999px;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.95em;
	color: var(--nsc-ink);
	transition: background 0.18s ease, border-color 0.18s ease;
}

.nsc-services li a:hover {
	background: rgba(248, 195, 65, 0.18);
	border-color: var(--nsc-accent);
}

/* --------------------------------------------------------- Offer + CTA */
.nsc-offer {
	margin: 1rem 0 0;
	padding: 0.85em 1.1em;
	border: 1px solid var(--nsc-accent);
	border-radius: 12px;
	background: rgba(248, 195, 65, 0.14);
	font-weight: 700;
	text-align: center;
}

.nsc-cta {
	margin-top: 1.25rem;
	color: var(--nsc-muted);
	font-size: 0.98em;
	text-align: center;
}

/* --------------------------------------------------------------- Mobile */
@media (max-width: 640px) {
	.nsc-toc {
		padding: 1rem;
	}

	.nsc-cta-btn a {
		display: block;
		padding: 1em 1.5em;
	}

	.nsc-compare {
		min-width: 460px;
		font-size: 0.88em;
	}
}