/* ==========================================================================
   Single article styles (single.php).
   Enqueued only on is_singular('post'), after main.css + blog.css. Built
   entirely on the theme's existing design tokens so nothing else is touched.
   Related-post cards reuse .blog-card / .blog-grid from blog.css.
   ========================================================================== */

/* Smooth anchor jumps for the TOC (scoped: this file loads only on articles) */
html { scroll-behavior: smooth; }

/* --------------------------------------------------------------------------
   Hero (extends .page-hero — dark navy ground)
   -------------------------------------------------------------------------- */
.single-hero {
	padding-bottom: var(--space-4xl);
}

.single-hero__cat {
	position: relative;
	z-index: 1;
	margin-bottom: var(--space-md);
	text-decoration: none;
	box-shadow: var(--shadow-sm);
	transition: transform var(--transition-fast);
}
.single-hero__cat:hover { transform: translateY(-1px); }

.single-hero__title {
	max-width: 20ch;
	margin-bottom: var(--space-md);
}
@media (min-width: 768px) {
	.single-hero__title { max-width: 24ch; }
}

.single-hero__dek {
	max-width: 62ch;
	margin-bottom: var(--space-lg);
	line-height: var(--leading-normal);
}

.single-hero__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-sm);
	font-size: var(--text-sm);
	color: rgba(232, 236, 241, 0.7);
}

.single-hero__author {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	text-decoration: none;
	color: var(--color-white);
	font-weight: 600;
	transition: color var(--transition-fast);
}
.single-hero__author:hover { color: var(--color-accent-light); }

.single-hero__avatar {
	width: 36px;
	height: 36px;
	border-radius: var(--radius-full);
	object-fit: cover;
	border: 2px solid rgba(255, 255, 255, 0.25);
	flex-shrink: 0;
}

.single-hero__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.single-hero__meta-item svg { color: var(--color-accent); opacity: 0.95; }

.single-hero__sep {
	width: 4px;
	height: 4px;
	border-radius: var(--radius-full);
	background: rgba(232, 236, 241, 0.3);
}

.single-hero__updated {
	font-style: italic;
	color: rgba(232, 236, 241, 0.55);
}

/* --------------------------------------------------------------------------
   Featured image — overlaps the bottom edge of the dark hero
   -------------------------------------------------------------------------- */
.single-featured {
	position: relative;
	z-index: 2;
	margin-top: calc(-1 * var(--space-3xl));
}

.single-featured__frame {
	margin: 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-xl);
	background-color: var(--color-surface-alt);
}

.single-featured__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --------------------------------------------------------------------------
   Two-column layout
   -------------------------------------------------------------------------- */
.single-section {
	padding-top: var(--space-2xl);
}

.single-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 340px);
	gap: clamp(var(--space-xl), 4vw, var(--space-3xl));
	/* Columns stretch to full row height (default) so the sticky sidebar has
	   travel room — do NOT set align-items:start here or sticky stops working. */
}

.single-main { min-width: 0; }
.single-sidebar { align-self: stretch; }

.single-sidebar__sticky {
	position: sticky;
	top: calc(76px + var(--space-lg));
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
}

/* --------------------------------------------------------------------------
   Table of Contents
   -------------------------------------------------------------------------- */
.single-toc {
	background-color: var(--color-surface);
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-lg);
	padding: var(--space-lg);
}

.single-toc__title {
	display: block;
	font-family: var(--font-heading);
	font-size: var(--text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--tracking-widest);
	color: var(--color-text-light);
	margin-bottom: var(--space-sm);
}

.single-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.single-toc__item { margin: 0; }
.single-toc__item--sub { padding-left: var(--space-md); }

.single-toc__link {
	display: block;
	padding: 6px var(--space-sm);
	border-left: 2px solid transparent;
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
	color: var(--color-text-muted);
	text-decoration: none;
	transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}
.single-toc__item--sub .single-toc__link { font-size: var(--text-xs); }

.single-toc__link:hover {
	color: var(--color-primary-dark);
	background-color: var(--color-surface-alt);
}

.single-toc__link.is-active {
	color: var(--color-accent-dark);
	border-left-color: var(--color-accent);
	font-weight: 600;
}

/* Mobile TOC (collapsible) — hidden on desktop */
.single-toc-mobile {
	display: none;
	margin-bottom: var(--space-xl);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.single-toc-mobile__summary {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-md) var(--space-lg);
	cursor: pointer;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--text-sm);
	color: var(--color-primary-dark);
	list-style: none;
}
.single-toc-mobile__summary::-webkit-details-marker { display: none; }
.single-toc-mobile__summary svg { color: var(--color-accent); }
.single-toc-mobile .single-toc {
	border: 0;
	border-top: 1px solid var(--color-border-light);
	border-radius: 0;
	background: transparent;
}
.single-toc-mobile .single-toc__title { display: none; }

/* --------------------------------------------------------------------------
   Article typography
   -------------------------------------------------------------------------- */
.post-article__body {
	font-size: var(--text-lg);
	line-height: var(--leading-relaxed);
	color: var(--color-text);
}

.post-article__body > * + * { margin-top: var(--space-lg); }

.post-article__body h2,
.post-article__body h3 {
	font-family: var(--font-heading);
	color: var(--color-primary-dark);
	line-height: var(--leading-snug);
	scroll-margin-top: calc(76px + var(--space-lg));
}
.post-article__body h2 {
	font-size: var(--text-2xl);
	margin-top: var(--space-2xl);
	padding-top: var(--space-xs);
}
.post-article__body h3 {
	font-size: var(--text-xl);
	margin-top: var(--space-xl);
}
.post-article__body h2:first-child,
.post-article__body h3:first-child { margin-top: 0; }

.post-article__body p { margin-top: var(--space-lg); }

/* Drop cap on the opening paragraph */
.post-article__body > p:first-of-type::first-letter {
	float: left;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 3.4em;
	line-height: 0.82;
	padding: 6px 10px 0 0;
	color: var(--color-accent);
}

/* Prose links only — :where() keeps specificity at 0 so it never touches the
   injected inline-CTA buttons (which live inside .post-article__body). */
.post-article__body :where(p, li, blockquote, td, th, figcaption) a {
	color: var(--color-accent-dark);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
	transition: color var(--transition-fast);
}
.post-article__body :where(p, li, blockquote, td, th, figcaption) a:hover { color: var(--color-accent); }

/* Safety net: any button inside the article body keeps its own styling */
.post-article__body a.btn { text-decoration: none; }

/* Restore list markers inside articles — the theme globally resets
   `ul, ol { list-style: none }`, so editor-authored lists need them back. */
.post-article__body ul,
.post-article__body ol {
	margin-top: var(--space-lg);
	padding-left: 1.5em;
}
.post-article__body ul { list-style: disc; }
.post-article__body ol { list-style: decimal; }
.post-article__body ul ul { list-style: circle; }
.post-article__body ul ul ul { list-style: square; }
.post-article__body ol ol { list-style: lower-alpha; }
.post-article__body ol ol ol { list-style: lower-roman; }
.post-article__body li { margin-top: var(--space-sm); padding-left: 0.25em; }
.post-article__body li > ul,
.post-article__body li > ol { margin-top: var(--space-sm); margin-bottom: var(--space-sm); }
.post-article__body ul li::marker { color: var(--color-accent); }
.post-article__body ol li::marker { color: var(--color-accent-dark); font-weight: 700; }

.post-article__body strong { color: var(--color-primary-dark); font-weight: 700; }

.post-article__body blockquote {
	margin: var(--space-xl) 0;
	padding: var(--space-md) var(--space-xl);
	border-left: 4px solid var(--color-accent);
	background-color: var(--color-surface);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	font-size: var(--text-xl);
	line-height: var(--leading-normal);
	color: var(--color-primary);
	font-style: italic;
}
.post-article__body blockquote p { margin: 0; }

.post-article__body img,
.post-article__body figure { max-width: 100%; height: auto; }
.post-article__body figure { margin: var(--space-xl) 0; }
.post-article__body img { border-radius: var(--radius-md); display: block; }
.post-article__body figcaption {
	margin-top: var(--space-sm);
	font-size: var(--text-sm);
	color: var(--color-text-light);
	text-align: center;
}

.post-article__body hr {
	border: 0;
	height: 1px;
	background-color: var(--color-border);
	margin: var(--space-2xl) 0;
}

/* Tables */
.post-article__body table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--space-xl) 0;
	font-size: var(--text-base);
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-md);
	overflow: hidden;
}
.post-article__body thead { background-color: var(--color-primary); }
.post-article__body thead th {
	color: var(--color-white);
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	text-align: left;
}
.post-article__body th,
.post-article__body td {
	padding: var(--space-sm) var(--space-md);
	border-bottom: 1px solid var(--color-border-light);
	vertical-align: top;
}
.post-article__body tbody tr:nth-child(even) { background-color: var(--color-surface); }
.post-article__body tbody tr:last-child td { border-bottom: 0; }

.post-article__body code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.9em;
	background-color: var(--color-surface-alt);
	padding: 2px 6px;
	border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   Inline CTA band (injected mid-article) — dark ground
   -------------------------------------------------------------------------- */
.single-inline-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-lg);
	margin: var(--space-2xl) 0;
	padding: var(--space-xl);
	border-radius: var(--radius-lg);
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
	box-shadow: var(--shadow-lg);
}
.single-inline-cta__title {
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--color-white);
	margin: 0 0 var(--space-2xs);
	line-height: var(--leading-snug);
}
.single-inline-cta__subtext {
	margin: 0;
	font-size: var(--text-sm);
	color: rgba(232, 236, 241, 0.7);
	max-width: 46ch;
}
.single-inline-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Service interlink card (image + text + two buttons)
   -------------------------------------------------------------------------- */
.single-service {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 0;
	margin: var(--space-2xl) 0;
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background-color: var(--color-white);
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--transition-base);
}
.single-service:hover { box-shadow: var(--shadow-md); }

.single-service__media { position: relative; background-color: var(--color-surface-alt); }
.single-service__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.single-service__body {
	padding: var(--space-xl);
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}
.single-service__eyebrow {
	font-family: var(--font-heading);
	font-size: var(--text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	color: var(--color-accent);
}
.single-service__title {
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	color: var(--color-primary-dark);
	margin: 0;
}
.single-service__text {
	margin: 0;
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
	color: var(--color-text-muted);
}
.single-service__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-top: var(--space-xs);
}

/* --------------------------------------------------------------------------
   Author E-E-A-T box
   -------------------------------------------------------------------------- */
.single-author {
	display: flex;
	gap: var(--space-lg);
	margin: var(--space-2xl) 0;
	padding: var(--space-xl);
	border-radius: var(--radius-lg);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border-light);
}
.single-author__avatar { flex-shrink: 0; }
.single-author__avatar .single-author__img,
.single-author__avatar img {
	width: 88px;
	height: 88px;
	border-radius: var(--radius-full);
	object-fit: cover;
	border: 3px solid var(--color-white);
	box-shadow: var(--shadow-md);
	background-color: var(--color-surface-alt);
}
.single-author__body { min-width: 0; }
.single-author__eyebrow {
	font-family: var(--font-heading);
	font-size: var(--text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	color: var(--color-text-light);
}
.single-author__name {
	font-size: var(--text-xl);
	margin: var(--space-2xs) 0 2px;
}
.single-author__name a {
	color: var(--color-primary-dark);
	text-decoration: none;
	transition: color var(--transition-fast);
}
.single-author__name a:hover { color: var(--color-accent); }
.single-author__role {
	display: block;
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: 700;
	color: var(--color-accent-dark);
	margin-bottom: var(--space-sm);
}
.single-author__bio {
	margin: 0 0 var(--space-sm);
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
	color: var(--color-text-muted);
}
.single-author__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-heading);
	font-size: var(--text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	color: var(--color-accent);
	text-decoration: none;
	transition: gap var(--transition-fast);
}
.single-author__more:hover { gap: 10px; }

/* --------------------------------------------------------------------------
   Ask-a-question form (CF7)
   -------------------------------------------------------------------------- */
.single-question {
	margin-top: var(--space-2xl);
	padding: var(--space-xl);
	border-radius: var(--radius-lg);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border-light);
	scroll-margin-top: calc(76px + var(--space-lg));
}
.single-question__title {
	font-size: var(--text-2xl);
	color: var(--color-primary-dark);
	margin: 0 0 var(--space-2xs);
}
.single-question__text {
	margin: 0 0 var(--space-lg);
	color: var(--color-text-muted);
	font-size: var(--text-base);
}

/* --------------------------------------------------------------------------
   Sidebar conversion card
   -------------------------------------------------------------------------- */
.single-cta-card {
	position: relative;
	background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
	border-radius: var(--radius-lg);
	padding: var(--space-xl);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}
.single-cta-card::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--color-accent), var(--color-accent-dark));
}
.single-cta-card__eyebrow {
	font-family: var(--font-heading);
	font-size: var(--text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	color: var(--color-accent-light);
}
.single-cta-card__title {
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	font-weight: 700;
	color: var(--color-white);
	margin: var(--space-2xs) 0 var(--space-md);
	line-height: var(--leading-snug);
}
.single-cta-card__phone {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--color-white);
	text-decoration: none;
	margin-bottom: var(--space-md);
	transition: color var(--transition-fast);
}
.single-cta-card__phone svg { color: var(--color-accent); }
.single-cta-card__phone:hover { color: var(--color-accent-light); }
.single-cta-card__btn { width: 100%; justify-content: center; }
.single-cta-card__trust {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: var(--space-md);
	font-size: var(--text-xs);
	color: rgba(232, 236, 241, 0.65);
}
.single-cta-card__trust svg { color: var(--color-accent); flex-shrink: 0; }

/* Related articles: reuses .blog-grid / .blog-card from blog.css */
.single-related { background-color: var(--color-surface); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.single-layout { grid-template-columns: 1fr; }
	.single-sidebar__sticky { position: static; }
	.single-sidebar__toc { display: none; }
	.single-toc-mobile { display: block; }
	/* On mobile the sidebar CTA card follows the article — give it breathing room */
	.single-sidebar { margin-top: var(--space-xl); }
}

@media (max-width: 600px) {
	.single-featured { margin-top: calc(-1 * var(--space-2xl)); }
	/* Inline CTA: stack text over full-width buttons (its actions row does not shrink) */
	.single-inline-cta { flex-direction: column; align-items: stretch; }
	.single-inline-cta__actions { width: 100%; flex-direction: column; }
	.single-inline-cta__actions .btn { width: 100%; justify-content: center; }
	/* Service card: media over body, buttons share the row */
	.single-service { grid-template-columns: 1fr; }
	.single-service__media { aspect-ratio: 16 / 9; }
	.single-service__actions .btn { flex: 1 1 auto; justify-content: center; }
	.single-author { flex-direction: column; gap: var(--space-md); }
	.post-article__body { font-size: var(--text-base); }
	.post-article__body > p:first-of-type::first-letter { font-size: 2.8em; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}