/* ==========================================================================
   NIOS Single Post (single.php)
   Figma: NIOS-website 257:209 (mobile 424), 257:129 (tablet 768),
   257:2 (desktop-wide 1920), handoff 257:319. Mobile First.
   Depends on assets/css/blog.css (enqueued as a dependency): reuses
   .nios-blog-archive-free tokens are re-declared locally below so this file
   works standalone, plus .blog-btn / .blog-meta / .blog-grid / .blog-card
   / .blog-media are reused directly from that stylesheet for shared
   components (buttons, related-post cards) — see the Figma handoff's own
   instruction not to rebuild the Article Card.
   Only ≥1600px ("Desktop Wide", the same tier the homepage Hero already
   reserves for its own sidebar-like content) switches the TOC from an
   in-flow block to a sticky two-column layout — the 768/1920 Figma frames
   are the two ends of that range; 1024/1280/1440 (required QA sizes) get
   the tablet-style single-column composition, capped for readability.
   ========================================================================== */

.post-single {
	/* blog.css's --blog-* tokens (used by the .blog-btn / .blog-card /
	   .blog-media / .blog-grid classes this page reuses for buttons and
	   related-post cards) are scoped to `.blog-archive`, the archive
	   page's own wrapper — undefined here otherwise, which silently
	   breaks every reused component (e.g. a "dark" button rendering with
	   a transparent background, since `background: var(--blog-dark)`
	   falls back to the property's initial value when the variable isn't
	   defined at all, found live via computed-style inspection during QA).
	   Redeclared here with the exact same values rather than editing the
	   shared blog.css scope (lower risk, no shared-file concurrency
	   conflict) or writing new post-scoped duplicates of those classes. */
	--blog-bg: #fffdfc;
	--blog-hero: #f7f2eb;
	--blog-card: #ffffff;
	--blog-border: #e5ddd3;
	--blog-text: #171717;
	--blog-muted: #666159;
	--blog-gold: #cfa66b;
	--blog-dark: #121211;
	--blog-media: #f6f1e9;
	--blog-accent: #ad6c22;
	--blog-success: #5a883c;
	--blog-error: #b3261e;

	--post-bg: #fffdfc;
	--post-hero: #f7f2eb;
	--post-media: #f6f1e9;
	--post-quote-bg: #faf6f1;
	--post-border: #e5ddd3;
	--post-text: #171717;
	--post-muted: #666159;
	--post-gold: #cfa66b;
	--post-dark: #121211;
	--post-reviewed-bg: #eaf1e6;
	--post-reviewed-text: #4d6147;
	background: var(--post-bg);
	overflow-x: clip;
	padding-bottom: 56px;
}

/* ---- Hero ---- */
.post-hero { background: var(--post-hero); padding: 20px 0 28px; }
.post-hero__breadcrumb { font: 400 10px/15px var(--nios-font); color: var(--post-muted); margin: 0 0 14px; }
.post-hero__breadcrumb a { color: inherit; text-decoration: none; }
.post-hero__breadcrumb a:hover { text-decoration: underline; }
.post-hero__breadcrumb span[aria-hidden] { margin-inline: 6px; }
.post-hero__cat { display: block; font: 600 10px/15px var(--nios-font); color: var(--post-gold); text-decoration: none; margin: 0 0 10px; }
.post-hero__cat:hover { text-decoration: underline; }
.post-hero__title { font: 700 31px/39px var(--nios-font); color: var(--post-text); margin: 0 0 14px; overflow-wrap: anywhere; }
.post-hero__lead { font: 400 13px/20px var(--nios-font); color: var(--post-muted); margin: 0 0 22px; max-width: 640px; }

.post-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	background: #fff;
	border: 1px solid var(--post-border);
	border-radius: 14px;
	padding: 14px 16px;
	margin-bottom: 20px;
}
.post-meta__avatar-img, .post-author__avatar-img { border-radius: 50%; display: block; object-fit: cover; }
.post-author__avatar-fallback, .post-meta__body .post-author__avatar-fallback {
	display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--post-media); flex: none;
}
.post-meta__body { flex: 1 1 auto; min-width: 0; }
.post-meta__author { font: 600 12px/17px var(--nios-font); color: var(--post-text); margin: 0 0 4px; }
.post-meta__line { display: flex; flex-wrap: wrap; gap: 4px; font: 400 9px/14px var(--nios-font); color: var(--post-muted); margin: 0; }
.post-meta__sep { opacity: .8; }
.post-meta__reviewed {
	flex: none;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--post-reviewed-bg); color: var(--post-reviewed-text);
	font: 600 11px/16px var(--nios-font); padding: 8px 14px; border-radius: 20px; white-space: nowrap;
}

.post-hero__media { display: block; aspect-ratio: 392 / 260; border-radius: 16px; margin: 0; }

/* ---- Layout: TOC + body + author ---- */
.post-layout { display: flex; flex-direction: column; gap: 32px; padding-top: 28px; }
.post-layout__toc, .post-layout__main, .post-layout__author { min-width: 0; }

/* ---- Table of Contents (accordion on mobile, open block tablet/desktop) ---- */
.post-toc { background: #fff; border: 1px solid var(--post-border); border-radius: 16px; padding: 17px 19px; }
.post-toc__toggle {
	display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
	background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: start;
	font: 700 17px/22px var(--nios-font); color: var(--post-text);
}
.post-toc__chevron { font-size: 14px; transition: transform .15s ease; }
.post-toc[data-collapsed] .post-toc__chevron { transform: rotate(-90deg); }
.post-toc__list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.post-toc[data-collapsed] .post-toc__list,
.post-toc[data-collapsed] .post-toc__share { display: none; }
.post-toc__item a { font: 400 11px/16px var(--nios-font); color: var(--post-text); text-decoration: none; display: block; }
.post-toc__item--h3 a { padding-inline-start: 14px; color: var(--post-muted); }
.post-toc__item a:hover { color: var(--post-gold); }
.post-toc__item a:focus-visible { outline: 2px solid var(--post-gold); outline-offset: 2px; border-radius: 2px; }
.post-toc__item a[aria-current="true"] { color: var(--post-gold); font-weight: 600; }
.post-toc__share { border-top: 1px solid var(--post-border); margin-top: 16px; padding-top: 14px; }
.post-toc__share-label { font: 600 11px/16px var(--nios-font); color: var(--post-muted); margin: 0 0 10px; }
.post-toc__share-buttons { display: flex; gap: 10px; }
.post-toc__share-btn {
	display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
	border-radius: 8px; border: 1px solid var(--post-border); background: #fff; color: var(--post-text);
	font: 400 15px/1 var(--nios-font); text-decoration: none; cursor: pointer;
}
.post-toc__share-btn:hover { border-color: var(--post-gold); }
.post-toc__share-btn:focus-visible { outline: 2px solid var(--post-gold); outline-offset: 2px; }
.post-toc__share-status { min-height: 16px; margin: 8px 0 0; font: 400 11px/16px var(--nios-font); color: var(--post-muted); }

/* ---- Article body typography ---- */
.post-body { font: 400 15px/25px var(--nios-font); color: var(--post-text); }
.post-body > :first-child { margin-top: 0; }
.post-body p { margin: 0 0 20px; }
.post-body :is(h2, h3) { font-weight: 700; color: var(--post-text); scroll-margin-top: 96px; }
.post-body h2 { font-size: 25px; line-height: 32px; margin: 40px 0 16px; }
.post-body h3 { font-size: 19px; line-height: 26px; margin: 32px 0 14px; }
.post-body > :is(h2, h3):first-child { margin-top: 0; }
.post-body a { color: var(--post-gold); text-decoration: underline; text-underline-offset: 2px; }
.post-body a:hover { color: var(--post-dark); }
.post-body ul, .post-body ol { margin: 0 0 20px; padding-inline-start: 22px; }
.post-body li { margin-bottom: 8px; }
.post-body img { border-radius: 16px; height: auto; }
.post-body figure { margin: 24px 0; }
.post-body figcaption { font: 400 11px/16px var(--nios-font); color: var(--post-muted); margin-top: 10px; }
.post-body table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 14px; }
.post-body table :is(th, td) { border: 1px solid var(--post-border); padding: 10px 12px; text-align: start; }

.post-body blockquote {
	position: relative;
	background: var(--post-quote-bg);
	border-radius: 16px;
	margin: 32px 0;
	padding: 22px 20px;
	font: 600 15px/23px var(--nios-font);
	color: var(--post-text);
}
.post-body blockquote p { margin: 0; }
.post-body blockquote p::before { content: '\201C'; }
.post-body blockquote p::after { content: '\201D'; }

.post-body ul.nios-checklist {
	list-style: none;
	margin: 24px 0;
	padding: 20px 18px;
	background: #fff;
	border: 1px solid var(--post-border);
	border-radius: 16px;
	font-size: 13px;
	line-height: 20px;
}
.post-body ul.nios-checklist li { position: relative; padding-inline-start: 22px; margin-bottom: 12px; }
.post-body ul.nios-checklist li:last-child { margin-bottom: 0; }
.post-body ul.nios-checklist li::before { content: '\2713'; position: absolute; inset-inline-start: 0; color: var(--post-gold); font-weight: 700; }

/* ---- Product CTA ---- */
.post-cta { background: var(--post-hero); border-radius: 18px; padding: 32px 18px; margin: 40px 0; }
.post-cta__eyebrow { font: 600 11px/16px var(--nios-font); color: var(--post-gold); margin: 0 0 10px; }
.post-cta__heading { font: 700 22px/29px var(--nios-font); color: var(--post-text); margin: 0 0 12px; }
.post-cta__text { font: 400 12px/18px var(--nios-font); color: var(--post-muted); margin: 0 0 22px; }
.post-cta__actions { display: flex; flex-direction: column; gap: 10px; }
.post-cta__primary, .post-cta__secondary { width: 100%; height: 48px; }

/* ---- FAQ ---- */
.post-faq { background: var(--post-hero); border-radius: 18px; padding: 24px 18px; margin: 0 0 40px; }
.post-faq__heading { font: 700 24px/30px var(--nios-font); color: var(--post-text); margin: 0 0 8px; }
.post-faq__item { border-top: 1px solid var(--post-border); }
.post-faq__item:last-child { padding-bottom: 4px; }
.post-faq__question-wrap { margin: 0; }
.post-faq__question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: transparent; border: 0; padding: 16px 0; font: 600 14px/22px var(--nios-font); color: var(--post-text); text-align: start; cursor: pointer; }
.post-faq__question:focus-visible { outline: 2px solid var(--post-gold); outline-offset: 2px; }
.post-faq__icon { font-size: 18px; line-height: 1; flex-shrink: 0; transition: transform .15s ease; }
.post-faq__question[aria-expanded="true"] .post-faq__icon { transform: rotate(45deg); }
.post-faq__answer { padding: 0 0 16px; }
.post-faq__answer p { margin: 0; font: 400 13px/22px var(--nios-font); color: var(--post-muted); }

/* ---- Author box ---- */
.post-author { background: #fff; border: 1px solid var(--post-border); border-radius: 16px; padding: 24px 18px; text-align: center; }
.post-author__avatar-img, .post-author__avatar-fallback { margin: 0 auto 14px; }
.post-author__name { font: 700 16px/21px var(--nios-font); color: var(--post-text); margin: 0 0 10px; }
.post-author__bio { font: 400 12px/19px var(--nios-font); color: var(--post-muted); margin: 0 0 18px; }
.post-author__link { width: 100%; height: 40px; }

/* ---- Related posts (reuses .blog-grid / .blog-card from blog.css) ---- */
.post-related { padding-top: 40px; }
.post-related__heading { font: 700 24px/30px var(--nios-font); color: var(--post-text); margin: 0 0 18px; }

/* ==========================================================================
   Tablet (768+) — Figma 257:129: TOC as an open block above the body,
   single reading column, comfortable width
   ========================================================================== */
@media (min-width: 768px) {
	.post-single { padding-bottom: 60px; }
	.post-hero { padding: 24px 0 40px; }
	.post-hero__breadcrumb { font-size: 11px; line-height: 16px; margin-bottom: 18px; }
	.post-hero__cat { font-size: 11px; margin-bottom: 12px; }
	.post-hero__title { font-size: 38px; line-height: 46px; margin-bottom: 16px; }
	.post-hero__lead { font-size: 16px; line-height: 24px; margin-bottom: 26px; }
	.post-meta { padding: 16px 20px; }
	.post-meta__author { font-size: 13px; }
	.post-meta__line { font-size: 10px; line-height: 15px; }
	.post-hero__media { aspect-ratio: 704 / 430; }

	.post-layout { max-width: 704px; margin-inline: auto; gap: 40px; padding-top: 36px; }
	.post-toc { padding: 21px 25px; }
	.post-toc__toggle { cursor: default; }
	.post-toc__chevron { display: none; }
	.post-toc__list { gap: 16px; }
	.post-toc__item a { font-size: 13px; line-height: 20px; }

	.post-body { font-size: 16px; line-height: 27px; }
	.post-body h2 { font-size: 27px; line-height: 34px; margin: 48px 0 18px; }
	.post-body h3 { font-size: 21px; line-height: 28px; margin: 36px 0 16px; }
	.post-body blockquote { padding: 30px 32px; font-size: 19px; line-height: 30px; }

	.post-cta { padding: 42px 32px; }
	.post-cta__heading { font-size: 24px; line-height: 31px; }
	.post-cta__text { font-size: 13px; line-height: 20px; }
	.post-cta__actions { flex-direction: row-reverse; }
	.post-cta__primary, .post-cta__secondary { width: auto; flex: 1 1 0; }

	.post-faq { padding: 24px 32px; }
	.post-faq__heading { font-size: 26px; line-height: 32px; }

	.post-author { text-align: start; padding: 24px; }
	.post-author__avatar-img, .post-author__avatar-fallback { margin: 0 0 14px; }
	.post-author__link { width: auto; padding-inline: 24px; }

	.post-related { max-width: none; }
	.post-related__heading { font-size: 26px; line-height: 34px; }
}

/* ==========================================================================
   Desktop Wide (1600+) — Figma 257:2: sticky TOC sidebar, optimized
   reading column, author box aligned to the bottom of the same sidebar
   column (see the "three flat siblings" note in single.php)
   ========================================================================== */
@media (min-width: 1600px) {
	.post-hero { padding: 30px 0 54px; }
	.post-hero__breadcrumb { font-size: 12px; line-height: 18px; margin-bottom: 20px; }
	.post-hero__cat { font-size: 12px; margin-bottom: 14px; }
	.post-hero__title { font-size: 50px; line-height: 60px; max-width: 1240px; margin-bottom: 20px; }
	.post-hero__lead { font-size: 18px; line-height: 28px; max-width: 1100px; margin-bottom: 34px; }
	.post-meta { max-width: 900px; padding: 14px 24px; }
	.post-hero__media { aspect-ratio: 1400 / 620; }

	/* Figma places the TOC/author column at the physical LEFT of the page
	   (the same fixed x-position as the featured image's own left edge),
	   with the reading column to its right — the conventional Hebrew RTL
	   sidebar placement, not a Figma-authored-LTR artifact this time (compare
	   the gift-finder fix elsewhere in this theme, which was the opposite
	   case). CSS Grid's own logical column order would otherwise put column
	   1 at the RTL inline-start (the physical right) — direction:ltr on the
	   grid forces physical left-to-right column order, then direction:rtl on
	   each item restores correct Hebrew text flow inside them. */
	.post-layout:not(.post-layout--no-toc) {
		display: grid;
		direction: ltr;
		grid-template-columns: 310px 1fr;
		column-gap: 80px;
		align-items: start;
		max-width: none;
		margin-inline: 0;
		padding-top: 44px;
	}
	.post-layout--no-toc { max-width: 1010px; margin-inline: auto; padding-top: 44px; }
	.post-layout:not(.post-layout--no-toc) .post-layout__toc {
		direction: rtl;
		grid-column: 1;
		grid-row: 1;
		position: sticky;
		top: 116px;
	}
	.post-layout:not(.post-layout--no-toc) .post-layout__main { direction: rtl; grid-column: 2; grid-row: 1; max-width: 1010px; }
	.post-layout:not(.post-layout--no-toc) .post-layout__author {
		direction: rtl;
		grid-column: 1;
		grid-row: 1;
		align-self: end;
	}

	.post-toc { padding: 23px; }
	.post-toc__list { gap: 20px; }

	.post-body { font-size: 17px; line-height: 29px; }
	.post-body h2 { font-size: 30px; line-height: 38px; margin: 56px 0 20px; }
	.post-body h3 { font-size: 22px; line-height: 30px; margin: 40px 0 16px; }
	.post-body blockquote { padding-inline-end: 60px; }
	.post-body blockquote::before {
		content: ''; position: absolute; inset-inline-end: 24px; top: 24px; bottom: 24px; width: 4px;
		background: var(--post-gold); border-radius: 2px;
	}

	.post-cta { padding: 40px 44px; }
	.post-cta__heading { font-size: 26px; line-height: 34px; }
	.post-cta__text { font-size: 14px; line-height: 21px; max-width: 700px; }
	.post-cta__actions { justify-content: flex-end; }
	.post-cta__primary, .post-cta__secondary { flex: 0 0 auto; width: auto; padding-inline: 28px; }

	.post-faq { padding: 26px 36px; }
	.post-faq__heading { font-size: 28px; line-height: 36px; }

	.post-author { padding: 27px 24px; text-align: center; }
	.post-author__avatar-img, .post-author__avatar-fallback { margin: 0 auto 14px; }
	.post-author__link { width: 100%; }

	.post-related { padding-top: 56px; }
	.post-related__heading { font-size: 30px; line-height: 38px; }
	.post-related__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
	.post-toc__chevron, .post-faq__icon { transition: none; }
}