/**
 * article.css — the reading-surface refinement (Phase 2 §3 addendum,
 * approved decisions #3–#4). Loads only on is_singular('post') — see
 * inc/enqueue.php. Nothing in this file is card chrome; the article
 * body is flat, high-contrast, and typography-led.
 */

.fn-article {
	background: var(--fn-surface);
	border: 1px solid var(--fn-border);
	border-radius: var(--fn-radius-lg);
	padding: var(--fn-space-6) var(--fn-space-4);
}

@media (min-width: 768px) {
	.fn-article {
		padding: var(--fn-space-8) var(--fn-space-7);
	}
}

.fn-article__header {
	margin-bottom: var(--fn-space-5);
}

.fn-article__cat {
	margin: 0 0 var(--fn-space-3);
}

.fn-article__cat a {
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--fn-accent-ink);
	text-decoration: none;
}

.fn-article__title {
	font-size: var(--fn-fs-h1);
	font-weight: 800;
	letter-spacing: -0.01em;
	margin-bottom: var(--fn-space-3);
}

.fn-article__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fn-space-2) var(--fn-space-3);
	align-items: center;
	font-size: var(--fn-fs-small);
	color: var(--fn-ink-3);
}

.fn-article__meta a {
	color: var(--fn-ink-2);
	text-decoration: none;
	font-weight: 600;
}

.fn-article__meta a:hover {
	color: var(--fn-accent-ink);
}

/* Hide author byline on articles (author name not shown) */
.fn-article__author,
.fn-article__author + .fn-article__dot {
	display: none;
}

/* ---------- related-tool-links.php (Phase 7) — "About: X" /
   "Comparing: X vs Y", rendered in the article header ---------- */

.fn-article__tool-links {
	margin: var(--fn-space-3) 0 0;
	font-size: var(--fn-fs-small);
	color: var(--fn-ink-2);
}

.fn-article__tool-links a {
	color: var(--fn-accent-ink);
	text-decoration: none;
	font-weight: 600;
}

.fn-article__tool-links a:hover {
	color: var(--fn-accent-hover);
}

.fn-article__thumbnail {
	margin: 0 0 var(--fn-space-6);
	border-radius: var(--fn-radius-md);
	overflow: hidden;
}

.fn-article__thumbnail img {
	width: 100%;
}

/* ---------- the reading surface itself ---------- */

.fn-article__content {
	font-size: 16px;
	line-height: 1.75;
	color: var(--fn-ink);
}

.fn-article__content > * + * {
	margin-top: 1.25em;
}

.fn-article__content p {
	margin: 0;
}

.fn-article__content h2 {
	font-size: var(--fn-fs-h2);
	font-weight: 700;
	margin-top: 2.5em;
	margin-bottom: 0;
}

.fn-article__content h2:first-child {
	margin-top: 0;
}

.fn-article__content h3 {
	font-size: var(--fn-fs-h3);
	font-weight: 700;
	margin-top: 1.75em;
	margin-bottom: 0;
}

.fn-article__content h4 {
	font-size: var(--fn-fs-h4);
	font-weight: 700;
	margin-top: 1.5em;
	margin-bottom: 0;
}

.fn-article__content ul,
.fn-article__content ol {
	padding-left: 1.4em;
}

.fn-article__content li + li {
	margin-top: 0.4em;
}

.fn-article__content blockquote {
	margin: 0;
	padding-left: var(--fn-space-4);
	border-left: 3px solid var(--fn-accent-soft);
	color: var(--fn-ink-2);
	font-style: italic;
}

/* Refinement — link visibility (§3 addendum): inline prose links carry a
   permanent underline in addition to color, since color alone is not
   enough contrast-of-cue once surrounded by high-contrast body copy. */
.fn-article__content a {
	color: var(--fn-accent-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.fn-article__content a:hover {
	color: var(--fn-accent-hover);
}

.fn-article__content figcaption {
	font-size: var(--fn-fs-small);
	color: var(--fn-ink-3);
	margin-top: var(--fn-space-2);
	text-align: center;
}

.fn-article__content table {
	font-size: var(--fn-fs-small);
}

.fn-article__content th,
.fn-article__content td {
	padding: var(--fn-space-3);
	border-bottom: 1px solid var(--fn-border);
	text-align: left;
}

.fn-article__content thead th {
	background: var(--fn-surface-2);
	font-weight: 700;
}

.fn-article__content code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
	background: var(--fn-surface-2);
	padding: 0.15em 0.4em;
	border-radius: 4px;
}

.fn-article__pages {
	font-size: var(--fn-fs-small);
	color: var(--fn-ink-2);
}

.fn-article__pages a {
	color: var(--fn-accent-ink);
}

/* =========================================================================
   Phase 8 — Article Layout (Table of Contents, Sidebar, Author Box,
   Copy/Share, and reading-experience refinements).
   ========================================================================= */

/* ---------- two-column article layout ---------- */

.fn-article-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--fn-space-6);
}

.fn-article-layout__main {
	min-width: 0;
}

.fn-article-layout__sidebar {
	display: none;
}

@media (min-width: 1024px) {
	.fn-article-layout {
		grid-template-columns: var(--fn-container-article) minmax(260px, 300px);
		gap: var(--fn-space-7);
		align-items: start;
		justify-content: center;
	}

	.fn-article-layout__sidebar {
		display: block;
	}
}

.fn-article-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--fn-space-5);
}

@media (min-width: 1024px) {
	.fn-article-sidebar {
		position: sticky;
		top: calc(72px + var(--fn-space-5));
		max-height: calc(100vh - 72px - var(--fn-space-6));
		overflow-y: auto;
	}
}

/* ---------- Table of Contents ---------- */

.fn-toc__label,
.fn-toc__summary {
	margin: 0 0 var(--fn-space-3);
	font-size: var(--fn-fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--fn-ink-3);
}

.fn-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--fn-space-2);
}

.fn-toc__item a {
	display: block;
	font-size: var(--fn-fs-small);
	color: var(--fn-ink-2);
	text-decoration: none;
	line-height: 1.4;
}

.fn-toc__item a:hover {
	color: var(--fn-accent-ink);
}

.fn-toc__item--h3 {
	padding-left: var(--fn-space-4);
}

/* Desktop TOC (inside the sidebar): hidden below the sidebar breakpoint. */
.fn-toc--desktop {
	display: none;
}

@media (min-width: 1024px) {
	.fn-toc--desktop {
		display: block;
	}
}

/* Mobile TOC: a native <details> disclosure, rendered inline right after
   Quick Answer. Hidden once the desktop sidebar takes over — an element
   with display:none is removed from the accessibility tree, so the two
   variants are never both perceivable at once (the same technique this
   theme already uses for its own header vs. mobile-menu navigation). */
.fn-toc--mobile {
	display: block;
	margin: var(--fn-space-5) 0 0;
	padding: var(--fn-space-4);
	background: var(--fn-surface-2);
	border: 1px solid var(--fn-border);
	border-radius: var(--fn-radius-md);
}

.fn-toc--mobile .fn-toc__summary {
	margin: 0;
	cursor: pointer;
}

.fn-toc--mobile[open] .fn-toc__summary {
	margin-bottom: var(--fn-space-3);
}

.fn-toc--mobile .fn-toc__list {
	margin-top: var(--fn-space-1);
}

@media (min-width: 1024px) {
	.fn-toc--mobile {
		display: none;
	}
}

/* Sticky-header offset for anchor jumps — zero JavaScript, matching the
   header's own min-height at each breakpoint (see layout.css) plus a
   little breathing room. */
.fn-article__content h2,
.fn-article__content h3 {
	scroll-margin-top: calc(56px + var(--fn-space-4));
}

@media (min-width: 768px) {
	.fn-article__content h2,
	.fn-article__content h3 {
		scroll-margin-top: calc(72px + var(--fn-space-4));
	}
}

/* ---------- Article Info card (inside the sidebar) ---------- */

.fn-article-info__label {
	margin: 0 0 var(--fn-space-3);
	font-size: var(--fn-fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--fn-ink-3);
}

.fn-article-info__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--fn-space-2);
	font-size: var(--fn-fs-small);
	color: var(--fn-ink-2);
}

.fn-article-info__list a {
	color: var(--fn-accent-ink);
	text-decoration: none;
}

.fn-article-info__list a:hover {
	color: var(--fn-accent-hover);
}

/* ---------- Author Box ---------- */

.fn-author-box {
	display: flex;
	gap: var(--fn-space-4);
	align-items: flex-start;
	margin: var(--fn-space-6) 0 0;
	padding: var(--fn-space-5);
	background: var(--fn-surface-2);
	border: 1px solid var(--fn-border);
	border-radius: var(--fn-radius-md);
}

.fn-author-box__avatar {
	border-radius: 50%;
	flex-shrink: 0;
}

.fn-author-box__label {
	margin: 0 0 var(--fn-space-1);
	font-size: var(--fn-fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--fn-ink-3);
}

.fn-author-box__name {
	margin: 0 0 var(--fn-space-2);
	font-size: var(--fn-fs-body-lg);
	font-weight: 700;
}

.fn-author-box__name a {
	color: var(--fn-ink);
	text-decoration: none;
}

.fn-author-box__name a:hover {
	color: var(--fn-accent-ink);
}

.fn-author-box__bio {
	margin: 0 0 var(--fn-space-2);
	font-size: var(--fn-fs-small);
	color: var(--fn-ink-2);
}

.fn-author-box__link {
	font-size: var(--fn-fs-small);
	font-weight: 600;
	color: var(--fn-accent-ink);
	text-decoration: none;
}

.fn-author-box__link:hover {
	color: var(--fn-accent-hover);
}

@media (max-width: 480px) {
	.fn-author-box {
		flex-direction: column;
	}
}

/* ---------- Copy / Share ---------- */

.fn-article-share {
	display: flex;
	align-items: center;
	gap: var(--fn-space-3);
	margin: var(--fn-space-6) 0 0;
}

/* ---------- Code blocks (native Gutenberg Code / Preformatted) ---------- */

.fn-article__content pre {
	margin: 0;
	background: var(--fn-surface-2);
	border: 1px solid var(--fn-border);
	border-radius: var(--fn-radius-md);
	padding: var(--fn-space-4);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.875em;
	line-height: 1.6;
	overflow-x: auto;
	white-space: pre;
}

.fn-article__content pre code {
	background: none;
	padding: 0;
	border-radius: 0;
	font-size: inherit;
}

.fn-code-block {
	position: relative;
}

.fn-code-block__copy {
	position: absolute;
	top: var(--fn-space-2);
	right: var(--fn-space-2);
	font-size: var(--fn-fs-micro);
	font-weight: 600;
	padding: 4px 10px;
	border-radius: var(--fn-radius-sm);
	border: 1px solid var(--fn-border);
	background: var(--fn-surface);
	color: var(--fn-ink-2);
	cursor: pointer;
}

.fn-code-block__copy:hover {
	border-color: var(--fn-border-strong);
	color: var(--fn-ink);
}

/* ---------- tables — native Table block + faqsnow/comparison ----------
   Reuses the same overflow-x:auto technique as the existing (previously
   unused) .fn-scroll-x utility (see layout.css) so wide tables scroll
   inside their own boundary instead of breaking the page's horizontal
   layout, without collapsing every table into unreadable stacked cards. */

.fn-article__content .wp-block-table {
	overflow-x: auto;
}

/* ---------- alignwide / alignfull ----------
   .fn-article is a bordered, padded card (not a full-bleed page layout),
   so "wide"/"full" here means bleeding to the card's own edges rather
   than the viewport edges — a deliberate, lower-risk reading of
   theme.json's layout.wideSize support that fits this boxed design. */

.fn-article__content .alignwide,
.fn-article__content .alignfull {
	max-width: none;
	width: calc(100% + (var(--fn-space-4) * 2));
	margin-left: calc(var(--fn-space-4) * -1);
	margin-right: calc(var(--fn-space-4) * -1);
}

@media (min-width: 768px) {
	.fn-article__content .alignwide,
	.fn-article__content .alignfull {
		width: calc(100% + (var(--fn-space-7) * 2));
		margin-left: calc(var(--fn-space-7) * -1);
		margin-right: calc(var(--fn-space-7) * -1);
	}
}

/* ---------- lists ---------- */

.fn-article__content li {
	line-height: 1.7;
}

.fn-article__content ul ul,
.fn-article__content ul ol,
.fn-article__content ol ul,
.fn-article__content ol ol {
	margin-top: 0.4em;
}

/* ---------- images / figures / captions / screenshots ---------- */

.fn-article__content figure {
	margin: 0;
}

.fn-article__content img {
	border-radius: var(--fn-radius-md);
	border: 1px solid var(--fn-border);
}


/* Hide author box below article content (author name not shown) */
.fn-author-box {
	display: none;
}