/* ============================================================
   InboundBlogging — Single Blog Post
   Loaded only on single 'post' templates.
   ============================================================ */

.ib-container--narrow { max-width: 1080px; }

/* ============================================================
   Screen reader only utility (for accessible labels)
   ============================================================ */
.ib-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================
   01 — Post header (no featured image)
   ============================================================ */
.ib-post-header {
	padding: 64px 0 40px;
	background: var(--ib-bg);
	border-bottom: 1px solid var(--ib-line);
	position: relative;
	overflow: hidden;
}
.ib-post-header::before {
	content: '';
	position: absolute;
	top: -100px;
	left: 50%;
	transform: translateX(-50%);
	width: 800px;
	height: 400px;
	background: radial-gradient(ellipse at center, rgba(105, 164, 219, 0.10) 0%, transparent 60%);
	pointer-events: none;
}
.ib-post-header > .ib-container { position: relative; z-index: 1; }
.ib-post-meta-top { margin-bottom: 16px; }
.ib-post-category {
	display: inline-block;
	padding: 5px 12px;
	background: var(--ib-accent-soft);
	color: var(--ib-accent);
	border-radius: var(--ib-radius-pill);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	transition: background var(--ib-duration) var(--ib-ease);
}
.ib-post-category:hover {
	background: var(--ib-accent);
	color: var(--ib-ink-inverse);
}
.ib-post-title {
	font-size: clamp(32px, 5vw, 52px);
	font-weight: 800;
	letter-spacing: -1.8px;
	line-height: 1.1;
	color: var(--ib-ink);
	margin: 0 0 24px;
	max-width: 820px;
}
.ib-post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	font-size: 14px;
	color: var(--ib-ink-soft);
}
.ib-post-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.ib-post-meta-item svg { opacity: 0.7; }
.ib-post-meta-item a {
	color: var(--ib-ink);
	font-weight: 600;
	text-decoration: none;
}
.ib-post-meta-item a:hover { color: var(--ib-accent); }
.ib-post-meta-sep { opacity: 0.4; }

/* ============================================================
   02 — Body: main + sidebar layout
   ============================================================ */
.ib-post-body {
	padding: 56px 0 80px;
	background: var(--ib-bg);
}
.ib-post-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 64px;
	align-items: start;
}

/* ============================================================
   03 — Main article content
   ============================================================ */
.ib-post-main { min-width: 0; }
.ib-post-content {
	font-size: 18px;
	line-height: 1.75;
	color: var(--ib-ink-soft);
	font-family: var(--ib-font-sans);
}
/* ------------------------------------------------------------------
   Vertical rhythm — ONE consistent system for the whole article.
   Reset every top-level block to no margin, then apply a single uniform
   gap between consecutive blocks (paragraphs, lists, quotes, tables,
   images …). Headings get extra space ABOVE them (to separate sections)
   and a clear, consistent gap to the content BELOW them.
   ------------------------------------------------------------------ */
.ib-post-content { --ib-flow: 30px; }

.ib-post-content > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.ib-post-content > * + * { margin-top: var(--ib-flow) !important; }
.ib-post-content > *:first-child { margin-top: 0 !important; }

/* Headings — clearly distinct from body text (size, weight) */
.ib-post-content h2,
.ib-post-content h3,
.ib-post-content h4,
.ib-post-content h5,
.ib-post-content h6 {
	font-family: var(--ib-font-sans);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.4px;
	scroll-margin-top: 120px;
}
/* Default heading colour — applied ONLY when no colour was chosen in the editor.
   Gutenberg adds `.has-text-color` whenever a copywriter sets a heading colour
   (preset or custom), so excluding it lets that colour show on the front end
   instead of being overridden by the theme default. */
.ib-post-content :is(h2, h3, h4, h5):not(.has-text-color) { color: var(--ib-ink); }
.ib-post-content h6:not(.has-text-color) { color: var(--ib-ink-muted); }

.ib-post-content h2 { font-size: clamp(26px, 3vw, 33px); line-height: 1.2; letter-spacing: -0.8px; }
.ib-post-content h3 { font-size: clamp(21px, 2.2vw, 25px); }
.ib-post-content h4 { font-size: 20px; font-weight: 700; }
.ib-post-content h5 { font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; }
.ib-post-content h6 { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.7px; }

/* Extra space ABOVE headings — clear section breaks */
.ib-post-content > h2 { margin-top: 60px !important; }
.ib-post-content > h3 { margin-top: 48px !important; }
.ib-post-content > h4 { margin-top: 40px !important; }
.ib-post-content > h5,
.ib-post-content > h6 { margin-top: 36px !important; }
.ib-post-content > :is(h2, h3, h4, h5, h6):first-child { margin-top: 0 !important; }

/* Consistent gap BELOW a heading (heading → its first paragraph / list / etc.) */
.ib-post-content > :is(h2, h3, h4, h5, h6) + * { margin-top: 18px !important; }
.ib-post-content a {
	color: var(--ib-accent);
	text-decoration: underline;
	text-decoration-color: rgba(249, 115, 22, 0.4);
	text-underline-offset: 3px;
	transition: text-decoration-color var(--ib-duration) var(--ib-ease);
}
.ib-post-content a:hover { text-decoration-color: var(--ib-accent); }
.ib-post-content strong { color: var(--ib-ink); font-weight: 700; }
/* …but bold/italic nested INSIDE a link or a colour chosen in the editor must
   follow that parent's colour. The rule above targets <strong> directly, so it
   otherwise repaints them ink — which silently killed the link colour on
   <a><strong>Name</strong></a> and made the editor's highlight/text-colour
   picker look like it "does nothing". */
.ib-post-content a strong,
.ib-post-content a b,
.ib-post-content a em,
.ib-post-content mark strong,
.ib-post-content mark b,
.ib-post-content mark em,
.ib-post-content .has-inline-color strong,
.ib-post-content .has-inline-color b,
.ib-post-content .has-inline-color em,
.ib-post-content .has-text-color strong,
.ib-post-content .has-text-color b,
.ib-post-content .has-text-color em {
	color: inherit;
}
/* The editor's highlight tool wraps text in <mark>; don't let the browser's
   default yellow background leak through when only a text colour was picked. */
.ib-post-content mark.has-inline-color { background-color: transparent; }
.ib-post-content ul,
.ib-post-content ol { padding-left: 24px; }
.ib-post-content li { margin-bottom: 8px; }
.ib-post-content blockquote {
	border-left: 4px solid var(--ib-highlight) !important;
	padding: 24px 32px !important;
	color: var(--ib-ink) !important;
	font-size: 24px !important;
	line-height: 1.55 !important;
	font-style: italic;
	font-weight: 500;
	background: var(--ib-bg-soft) !important;
	border-radius: 0 var(--ib-radius) var(--ib-radius) 0 !important;
}
/* Make sure paragraphs INSIDE a blockquote inherit the larger size
   (the generic .ib-post-content p rule would otherwise shrink them) */
.ib-post-content blockquote p {
	font-size: 24px !important;
	line-height: 1.55 !important;
	margin: 0 0 14px !important;
}
.ib-post-content blockquote p:last-child { margin-bottom: 0 !important; }
.ib-post-content blockquote cite {
	display: block;
	margin-top: 12px;
	font-size: 16px !important;
	font-style: normal;
	font-weight: 600;
	color: var(--ib-ink-soft);
}

/* Mobile blockquote tweaks */
@media (max-width: 700px) {
	.ib-post-content blockquote,
	.ib-post-content blockquote p {
		font-size: 20px !important;
	}
	.ib-post-content blockquote { padding: 20px 24px !important; }
}
.ib-post-content img,
.ib-post-content figure img {
	max-width: 100%;
	height: auto;
	border-radius: var(--ib-radius);
	display: block;
}
.ib-post-content figure {
	margin: 0; /* spacing handled by the unified rhythm above */
}
.ib-post-content figcaption {
	margin-top: 8px;
	font-size: 14px;
	color: var(--ib-ink-muted);
	text-align: center;
}
.ib-post-content pre {
	background: var(--ib-ink);
	color: #e2e8f0;
	padding: 20px 24px;
	border-radius: var(--ib-radius);
	overflow-x: auto;
	font-family: var(--ib-font-mono);
	font-size: 14px;
	line-height: 1.6;
}
.ib-post-content code {
	background: var(--ib-bg-soft);
	color: var(--ib-ink);
	padding: 2px 6px;
	border-radius: 4px;
	font-family: var(--ib-font-mono);
	font-size: 0.92em;
}
.ib-post-content pre code { background: transparent; color: inherit; padding: 0; }
.ib-post-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 0; /* spacing handled by the unified rhythm above */
	font-size: 15px;
}
.ib-post-content th,
.ib-post-content td {
	border: 1px solid var(--ib-line);
	padding: 12px 16px;
	text-align: left;
}
.ib-post-content th {
	background: var(--ib-bg-soft);
	font-weight: 700;
	color: var(--ib-ink);
}

/* ============================================================
   04 — Tags
   ============================================================ */
.ib-post-tags {
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--ib-line);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.ib-post-tags-label {
	font-size: 13px;
	font-weight: 700;
	color: var(--ib-ink-soft);
	text-transform: uppercase;
	letter-spacing: 1px;
}
.ib-post-tags-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.ib-post-tags-list a {
	display: inline-block;
	padding: 4px 10px;
	background: var(--ib-bg-soft);
	border: 1px solid var(--ib-line);
	border-radius: var(--ib-radius-pill);
	font-size: 13px;
	color: var(--ib-ink-soft);
	text-decoration: none;
	transition: background var(--ib-duration) var(--ib-ease),
				color var(--ib-duration) var(--ib-ease);
}
.ib-post-tags-list a:hover {
	background: var(--ib-accent);
	color: var(--ib-ink-inverse);
}

/* ============================================================
   05 — Sidebar (sticky)
   ============================================================ */
.ib-post-sidebar { position: relative; }
.ib-post-sidebar-inner {
	position: sticky;
	top: 120px;
	display: grid;
	gap: 24px;
}
.ib-post-widget {
	background: var(--ib-surface);
	border: 1px solid var(--ib-line);
	border-radius: var(--ib-radius-lg);
	padding: 20px 22px;
}
.ib-post-widget-title {
	font-size: 12px;
	font-weight: 700;
	color: var(--ib-ink-soft);
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin: 0 0 14px;
}

/* Search */
.ib-post-search {
	position: relative;
	display: flex;
}
.ib-post-search input {
	flex: 1;
	padding: 10px 40px 10px 14px;
	border: 1px solid var(--ib-line);
	border-radius: var(--ib-radius);
	font-family: var(--ib-font-sans);
	font-size: 14px;
	color: var(--ib-ink);
	background: var(--ib-bg);
	transition: border-color var(--ib-duration) var(--ib-ease),
				box-shadow var(--ib-duration) var(--ib-ease);
	box-sizing: border-box;
	width: 100%;
}
.ib-post-search input:focus {
	outline: none;
	border-color: var(--ib-highlight);
	box-shadow: 0 0 0 3px rgba(105, 164, 219, 0.18);
}
.ib-post-search button {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	color: var(--ib-ink-soft);
	cursor: pointer;
	padding: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color var(--ib-duration) var(--ib-ease);
}
.ib-post-search button:hover { color: var(--ib-accent); }

/* Table of Contents */
.ib-post-toc ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ib-post-toc > ul > li { margin-bottom: 6px; }
.ib-post-toc ul ul {
	margin-top: 4px;
	margin-bottom: 4px;
	padding-left: 14px;
	border-left: 1px solid var(--ib-line);
}
.ib-post-toc ul ul li { margin-bottom: 4px; }
.ib-post-toc a {
	display: block;
	padding: 4px 0;
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--ib-ink-soft);
	text-decoration: none;
	transition: color var(--ib-duration) var(--ib-ease);
}
.ib-post-toc a:hover,
.ib-post-toc a.is-active {
	color: var(--ib-accent);
	font-weight: 600;
}
.ib-post-toc ul ul a { font-size: 13px; opacity: 0.85; }

/* Categories */
.ib-post-cat-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ib-post-cat-list li { margin-bottom: 4px; }
.ib-post-cat-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 7px 12px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ib-ink);
	text-decoration: none;
	transition: background var(--ib-duration) var(--ib-ease),
				color var(--ib-duration) var(--ib-ease);
}
.ib-post-cat-list a:hover {
	background: var(--ib-bg-soft);
	color: var(--ib-accent);
}
.ib-post-cat-list li.is-current > a {
	background: var(--ib-accent-soft);
	color: var(--ib-accent);
}
.ib-post-cat-count {
	font-size: 11px;
	background: var(--ib-bg-soft);
	color: var(--ib-ink-soft);
	padding: 2px 8px;
	border-radius: var(--ib-radius-pill);
	font-weight: 700;
}
.ib-post-cat-list li.is-current .ib-post-cat-count {
	background: var(--ib-accent);
	color: var(--ib-ink-inverse);
}

/* Mascot widget */
.ib-post-widget--mascot {
	padding: 0;
	overflow: hidden;
	border: none;
	background: transparent;
	text-align: center;
}
.ib-post-widget--mascot img {
	max-width: 100%;
	height: auto;
	border-radius: var(--ib-radius-lg);
	display: block;
}
.ib-post-mascot-caption {
	font-size: 13px;
	color: var(--ib-ink-soft);
	margin: 12px 0 0;
	line-height: 1.45;
	font-style: italic;
}

/* ============================================================
   06 — Author bio card
   ============================================================ */
.ib-post-author {
	padding: 0 0 64px;
	background: var(--ib-bg);
}
.ib-post-author-card {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 28px;
	padding: 32px;
	background: var(--ib-bg-soft);
	border: 1px solid var(--ib-line);
	border-radius: var(--ib-radius-lg);
	box-shadow: var(--ib-shadow-sm);
	position: relative;
	overflow: hidden;
}
.ib-post-author-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0;
	width: 6px;
	height: 100%;
	background: linear-gradient(180deg, var(--ib-highlight) 0%, var(--ib-accent) 100%);
}
.ib-post-author-avatar img {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--ib-surface);
	box-shadow: var(--ib-shadow);
}
.ib-post-author-label {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	color: var(--ib-accent);
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin-bottom: 6px;
}
.ib-post-author-name {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.5px;
	margin: 0 0 10px;
}
.ib-post-author-name a {
	color: var(--ib-ink);
	text-decoration: none;
	transition: color var(--ib-duration) var(--ib-ease);
}
.ib-post-author-name a:hover { color: var(--ib-accent); }
.ib-post-author-bio {
	font-size: 15px;
	line-height: 1.65;
	color: var(--ib-ink-soft);
	margin: 0 0 14px;
}
.ib-post-author-links {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}
.ib-post-author-link {
	font-size: 13px;
	font-weight: 700;
	color: var(--ib-accent);
	text-decoration: none;
	transition: gap var(--ib-duration) var(--ib-ease);
}
.ib-post-author-link:hover { color: var(--ib-accent); text-decoration: underline; }

/* ============================================================
   07 — Related Articles
   ============================================================ */
.ib-post-related {
	padding: 80px 0;
	background: var(--ib-bg-soft);
	border-top: 1px solid var(--ib-line);
}
.ib-post-related .ib-section-head {
	text-align: center;
	max-width: 700px;
	margin: 0 auto 48px;
}
.ib-post-related .ib-section-head h2 {
	font-size: clamp(28px, 3.5vw, 40px);
	font-weight: 800;
	letter-spacing: -1.2px;
	line-height: 1.1;
	margin: 12px 0 0;
}
.ib-post-related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.ib-post-related-card {
	background: var(--ib-surface);
	border: 1px solid var(--ib-line);
	border-radius: var(--ib-radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: var(--ib-ink);
	display: block;
	transition: transform 0.3s var(--ib-ease),
				box-shadow 0.3s var(--ib-ease);
}
.ib-post-related-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--ib-shadow-lg);
	color: var(--ib-ink);
}
.ib-post-related-thumb {
	/* Match the ~1.91:1 featured images so the whole image shows (no cropping). */
	aspect-ratio: 1024 / 538;
	background-color: var(--ib-surface);
	background-image: linear-gradient(135deg, var(--ib-brand-soft), var(--ib-accent-soft));
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 48px;
}
.ib-post-related-body { padding: 22px 24px; }
.ib-post-related-meta {
	display: flex;
	gap: 8px;
	font-size: 12px;
	color: var(--ib-ink-muted);
	font-weight: 600;
	margin-bottom: 10px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.ib-post-related-meta .ib-post-related-cat { color: var(--ib-accent); }
.ib-post-related-body h3 {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.3px;
	line-height: 1.3;
	margin: 0 0 10px;
	color: var(--ib-ink);
}
.ib-post-related-body p {
	font-size: 14px;
	color: var(--ib-ink-soft);
	line-height: 1.5;
	margin: 0;
}

/* ============================================================
   08 — Responsive
   ============================================================ */
@media (max-width: 1024px) {
	.ib-post-layout {
		grid-template-columns: 1fr;
		gap: 48px;
	}
	.ib-post-sidebar-inner { position: static; }
	.ib-post-related-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
	.ib-post-header { padding: 48px 0 32px; }
	.ib-post-body { padding: 40px 0 64px; }
	.ib-post-content { font-size: 17px; }
	.ib-post-author-card {
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 24px;
		text-align: center;
	}
	.ib-post-author-avatar img { margin: 0 auto; width: 96px; height: 96px; }
	.ib-post-author-links { justify-content: center; }
	.ib-post-related-grid { grid-template-columns: 1fr; }
	.ib-post-related { padding: 56px 0; }
}

/* ============================================================
   10 — Quick Summary callout (rendered INSIDE post header,
        above the divider line)
   Per-post opt-in via ACF "post_show_summary"
   ============================================================ */
.ib-post-summary {
	display: block;
	position: relative;
	margin: 32px 0 0;
	padding: 20px 24px 22px 28px;
	background: var(--ib-bg-soft, #fdf4ee);
	border-radius: 14px;
	border-left: 4px solid var(--ib-accent, #e85a3c);
}
.ib-post-summary-label {
	display: block;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ib-accent, #e85a3c);
	margin: 0 0 8px;
}
.ib-post-summary-text {
	font-size: 17px;
	line-height: 1.55;
	color: var(--ib-ink, #1d2433);
}
.ib-post-summary-text p { margin: 0 0 8px; }
.ib-post-summary-text p:last-child { margin-bottom: 0; }

/* ============================================================
   11 — Review box (Rating + Pros / Cons)
   Rendered INSIDE post header, above the divider line.
   Per-post opt-in via ACF "post_show_review"
   ============================================================ */
.ib-review {
	margin: 32px 0 0;
}
.ib-review-box {
	background: var(--ib-surface, #ffffff);
	border: 1px solid var(--ib-line, #e6e8ee);
	border-radius: 18px;
	padding: 28px 32px 30px;
	box-shadow: 0 6px 24px rgba(20, 28, 50, 0.05);
}
.ib-review-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin: 0 0 14px;
}
.ib-review-title {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	color: var(--ib-ink, #1d2433);
	letter-spacing: -0.01em;
}

/* Stars — overlay technique: gray base + gold fill clipped by width */
.ib-review-stars {
	position: relative;
	display: inline-block;
	font-size: 26px;
	line-height: 1;
	letter-spacing: 2px;
	font-family: 'Arial', sans-serif;
	user-select: none;
}
.ib-review-stars-empty {
	color: #d6dae4;
}
.ib-review-stars-fill {
	position: absolute;
	inset: 0;
	color: #f5b400;
	overflow: hidden;
	white-space: nowrap;
	pointer-events: none;
}

.ib-review-intro {
	font-size: 16px;
	line-height: 1.6;
	color: var(--ib-ink-soft, #4a5266);
	text-align: center;
	max-width: 640px;
	margin: 0 auto 18px;
}
.ib-review-intro p { margin: 0 0 10px; }
.ib-review-intro p:last-child { margin-bottom: 0; }

/* Pros / Cons teaser — headers visible, lists hidden behind gradient fade.
   Expands on "View More" click via .is-open class added by JS. */
.ib-review-proscons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin: 24px 0 0;
	padding: 24px 0 0;
	border-top: 1px solid var(--ib-line, #e6e8ee);
	position: relative;
	max-height: 90px;            /* shows just the Pros / Cons headers */
	overflow: hidden;
	transition: max-height 0.45s ease;
}
.ib-review-proscons.is-open {
	max-height: 2000px;          /* effectively unlimited; CSS transitions on this */
}
/* Gradient fade overlay covers the cropped list area */
.ib-review-proscons::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 60px;
	background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--ib-surface, #ffffff) 92%);
	pointer-events: none;
	transition: opacity 0.3s ease;
}
.ib-review-proscons.is-open::after {
	opacity: 0;
}

/* View More / View Less toggle */
.ib-review-toggle {
	display: block;
	margin: -14px auto 0;        /* lifts the button into the fade overlay area */
	position: relative;
	z-index: 2;
	background: var(--ib-surface, #ffffff);
	border: 1px solid var(--ib-line, #e6e8ee);
	color: var(--ib-ink, #1d2433);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	padding: 8px 22px;
	border-radius: 999px;
	box-shadow: 0 4px 14px rgba(20, 28, 50, 0.08);
	transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.ib-review-toggle:hover {
	color: var(--ib-accent, #e85a3c);
	border-color: var(--ib-accent, #e85a3c);
	transform: translateY(-1px);
}
.ib-review-toggle .ib-review-toggle-less { display: none; }
.ib-review-toggle[aria-expanded="true"] .ib-review-toggle-more { display: none; }
.ib-review-toggle[aria-expanded="true"] .ib-review-toggle-less { display: inline; }
/* When the list is EXPANDED the -14px lift would overlap the last Pros/Cons
   row (the fade is gone) — give the button a normal gap below the list instead. */
.ib-review-proscons.is-open + .ib-review-toggle {
	margin-top: 18px;
}
.ib-review-col h4 {
	margin: 0 0 12px;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.005em;
}
.ib-review-pros h4 { color: #16a34a; }
.ib-review-cons h4 { color: #dc2626; }
.ib-review-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ib-review-col li {
	position: relative;
	padding: 6px 0 6px 28px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--ib-ink, #1d2433);
}
.ib-review-pros li::before,
.ib-review-cons li::before {
	position: absolute;
	left: 0;
	top: 8px;
	width: 18px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}
.ib-review-pros li::before {
	content: '✓';
	background: #dcfce7;
	color: #16a34a;
}
.ib-review-cons li::before {
	content: '✕';
	background: #fee2e2;
	color: #dc2626;
}

/* Optional affiliate CTA button */
.ib-review-cta {
	display: inline-block;
	margin: 20px auto 0;
	padding: 12px 24px;
	background: var(--ib-accent, #e85a3c);
	color: #fff !important;
	font-size: 15px;
	font-weight: 600;
	border-radius: 999px;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ib-review-box {
	text-align: center;
}
.ib-review-box .ib-review-title { text-align: left; }
.ib-review-cta:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(232, 90, 60, 0.30);
}

/* Affiliate disclosure (always shown under the review box) */
.ib-review-disclosure {
	margin: 14px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ib-ink-soft, #6b7280);
	text-align: center;
}
.ib-review-disclosure a {
	color: var(--ib-link, #2f6cff);
	text-decoration: underline;
}

/* Responsive */
@media (max-width: 700px) {
	.ib-review-box { padding: 22px 20px 24px; }
	.ib-review-title { font-size: 19px; }
	.ib-review-stars { font-size: 22px; }
	.ib-review-proscons {
		grid-template-columns: 1fr;
		gap: 18px;
	}
}

/* ============================================================
   12 — Sidebar Author Card (replaces Search widget on single posts)
   ============================================================ */
.ib-post-widget--author { padding: 0; }
.ib-post-widget-author-card {
	position: relative;
	background: var(--ib-bg-soft, #fdf4ee);
	border-radius: 14px;
	padding: 22px 22px 22px 26px;
	overflow: hidden;
}
.ib-post-widget-author-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0; bottom: 0;
	width: 4px;
	background: linear-gradient(180deg, #5a8bff 0%, var(--ib-accent, #e85a3c) 100%);
}
.ib-post-widget-author-top {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 14px;
}
.ib-post-widget-author-avatar {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	border: 2px solid #fff;
	box-shadow: 0 2px 6px rgba(20, 28, 50, 0.08);
}
.ib-post-widget-author-eyebrow {
	display: block;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ib-accent, #e85a3c);
	margin: 0 0 4px;
}
.ib-post-widget-author-name {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--ib-ink, #1d2433);
}
.ib-post-widget-author-name a {
	color: inherit;
	text-decoration: none;
}
.ib-post-widget-author-name a:hover {
	color: var(--ib-accent, #e85a3c);
}
.ib-post-widget-author-bio {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--ib-ink-soft, #4a5266);
}
.ib-post-widget-author-link {
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	color: var(--ib-accent, #e85a3c);
	text-decoration: none;
}
.ib-post-widget-author-link:hover {
	text-decoration: underline;
}

/* ============================================================
   13 — References module (Gutenberg pattern)
   First 5 items shown by default, rest revealed via "See more"
   button. Markup from the pattern uses .references-module +
   .accordionList + .toggleBtn class hooks.
   ============================================================ */
.references-module .accordionList > li:nth-child(n+6) {
	display: none;
}
.references-module .accordionList.is-expanded > li:nth-child(n+6) {
	display: list-item;
}
.references-module .toggleBtn { cursor: pointer; }
.references-module .toggleBtn a { cursor: pointer; user-select: none; }
.references-module .accordionList > li {
	transition: opacity 0.2s ease;
}