/* ==========================================================
   FastBookPrint — Blog post (guide) layout
   Scoped to .fbp-post so nothing leaks into header or footer.
   ========================================================== */

.fbp-post {
	--fbp-orange: #f04000;
	--fbp-orange-dark: #d03800;
	--fbp-ink: #0f0e17;
	--fbp-text: #2f2f2f;
	--fbp-muted: #5f5f5f;
	--fbp-line: #e4e4e4;
	--fbp-bg-alt: #f6f6f6;
	--fbp-head: "Readex Pro", "Inter", system-ui, sans-serif;
	--fbp-body: "Inter", system-ui, -apple-system, sans-serif;

	max-width: none !important;
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--fbp-body);
	color: var(--fbp-text);
	background: #fff;
}
.fbp-post *,
.fbp-post *::before,
.fbp-post *::after { box-sizing: border-box; }
.fbp-post__wrap { max-width: 1140px; margin: 0 auto; padding: 64px 20px 88px; }

/* ---------- Title + featured image ---------- */
.fbp-post__head { max-width: 800px; }
.fbp-post .fbp-post__title {
	margin: 0;
	font-family: var(--fbp-head);
	font-size: 46px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--fbp-ink);
}
.fbp-post__hero {
	margin: 36px 0 0;
	border: 1px solid var(--fbp-line);
	border-radius: 14px;
	overflow: hidden;
	background: var(--fbp-bg-alt);
}
.fbp-post__hero img { display: block; width: 100%; height: auto; }

/* ---------- Two columns ---------- */
.fbp-post__grid {
	display: grid;
	grid-template-columns: minmax(0, 720px) 300px;
	justify-content: space-between;
	gap: 56px;
	margin-top: 48px;
}

/* ---------- Article typography ---------- */
.fbp-post__body { font-size: 16px; line-height: 1.8; }
.fbp-post__body > :first-child { margin-top: 0; }
.fbp-post__body p { margin: 0 0 18px; }
.fbp-post__body h2,
.fbp-post__body h3,
.fbp-post__body h4 {
	font-family: var(--fbp-head);
	color: var(--fbp-ink);
	letter-spacing: -0.01em;
	scroll-margin-top: 24px;
}
.fbp-post__body h2 { margin: 52px 0 14px; font-size: 28px; font-weight: 600; line-height: 1.3; }
.fbp-post__body h3 { margin: 34px 0 10px; font-size: 19px; font-weight: 600; line-height: 1.4; }
.fbp-post__body h4 { margin: 28px 0 8px; font-size: 17px; font-weight: 600; }
.fbp-post__body h2 strong,
.fbp-post__body h3 strong { font-weight: inherit; }
.fbp-post__body strong { color: var(--fbp-ink); font-weight: 600; }
.fbp-post__body a { color: var(--fbp-orange); text-decoration: underline; text-underline-offset: 2px; }
.fbp-post__body a:hover { color: var(--fbp-orange-dark); }
.fbp-post__body ul,
.fbp-post__body ol { margin: 0 0 18px; padding-left: 22px; }
.fbp-post__body li { margin-bottom: 6px; }
.fbp-post__body img { max-width: 100%; height: auto; border-radius: 10px; }
.fbp-post__body blockquote {
	margin: 24px 0;
	padding: 4px 0 4px 18px;
	border-left: 3px solid var(--fbp-orange);
	color: var(--fbp-muted);
}

/* Tables */
.fbp-post__table {
	margin: 20px 0 26px;
	border: 1px solid var(--fbp-line);
	border-radius: 10px;
	overflow-x: auto;
}
.fbp-post__table table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 14px;
	line-height: 1.5;
}
.fbp-post__table th,
.fbp-post__table td {
	padding: 12px 14px;
	border: 0;
	border-bottom: 1px solid var(--fbp-line);
	text-align: left;
	vertical-align: top;
	background: #fff;
}
.fbp-post__table tr:last-child > * { border-bottom: 0; }
.fbp-post__table thead th,
.fbp-post__table thead td,
.fbp-post__table table:not(:has(thead)) tr:first-child > * {
	background: var(--fbp-bg-alt);
	font-weight: 600;
	color: var(--fbp-ink);
}
.fbp-post__table td:first-child { font-weight: 600; color: var(--fbp-ink); }
.fbp-post__table tbody tr:hover > * { background: #fbfbfb; }

/* ---------- Sticky sidebar ---------- */
.fbp-post__aside { position: relative; }
.fbp-post__sticky {
	position: sticky;
	top: 24px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.admin-bar .fbp-post__sticky { top: 56px; }

.fbp-post-toc {
	padding: 20px 20px 16px;
	border: 1px solid var(--fbp-line);
	border-radius: 12px;
	background: #fff;
}
.fbp-post .fbp-post-toc__title { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--fbp-ink); }
.fbp-post-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: fbp-toc; }
.fbp-post-toc li { counter-increment: fbp-toc; margin: 0; }
.fbp-post-toc a {
	display: flex;
	gap: 8px;
	padding: 5px 0;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--fbp-text);
	text-decoration: none;
	transition: color .15s ease;
}
.fbp-post-toc a::before { content: counter(fbp-toc) "."; flex: none; min-width: 16px; color: var(--fbp-muted); }
.fbp-post-toc a:hover,
.fbp-post-toc a.is-active { color: var(--fbp-orange); }
.fbp-post-toc a.is-active::before { color: var(--fbp-orange); }

.fbp-post-cta {
	padding: 22px 20px 20px;
	border: 1px solid var(--fbp-line);
	border-radius: 12px;
	background: var(--fbp-bg-alt);
}
.fbp-post .fbp-post-cta__title { margin: 0; font-family: var(--fbp-head); font-size: 19px; font-weight: 600; line-height: 1.3; color: var(--fbp-ink); }
.fbp-post .fbp-post-cta__text { margin: 8px 0 16px; font-size: 14px; line-height: 1.55; color: var(--fbp-muted); }
.fbp-post-cta ul { margin: 0 0 20px; padding: 0; list-style: none; }
.fbp-post-cta li { position: relative; margin: 0 0 10px; padding-left: 16px; font-size: 14px; line-height: 1.4; }
.fbp-post-cta li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--fbp-orange);
}
.fbp-post .fbp-post-cta__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 13px 18px;
	border-radius: 7px;
	background: var(--fbp-orange);
	color: #fff;
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
	transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.fbp-post .fbp-post-cta__btn:hover {
	background: var(--fbp-orange-dark);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgb(240 64 0 / .28);
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
	.fbp-post__grid { grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; }
	.fbp-post .fbp-post__title { font-size: 38px; }
}
@media (max-width: 900px) {
	.fbp-post__wrap { padding: 44px 16px 64px; }
	.fbp-post .fbp-post__title { font-size: 30px; }
	.fbp-post__hero { margin-top: 24px; border-radius: 10px; }
	.fbp-post__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; margin-top: 32px; }
	.fbp-post__sticky { position: static; }
	.fbp-post-toc { display: none; }
	.fbp-post__body { font-size: 15.5px; line-height: 1.75; }
	.fbp-post__body h2 { margin-top: 40px; font-size: 23px; }
	.fbp-post__body h3 { font-size: 17.5px; }
	.fbp-post__table table { min-width: 560px; }
}