/**
 * SEO Ultra Pro — Post Features
 * Meta bar, share buttons, fact chip/box, author cards (1-5),
 * related posts, TOC (1-4), breadcrumbs, last-verified line.
 * Colors are driven by core Customizer CSS variables when present.
 */

:root {
	--sup-pf-primary: var(--sup-primary, #1a7f37);
	--sup-pf-primary-dark: var(--sup-primary-dark, #145c28);
	--sup-pf-text: var(--sup-text, #1f2328);
	--sup-pf-muted: var(--sup-muted, #656d76);
	--sup-pf-border: var(--sup-border, #d8dee4);
	--sup-pf-surface: var(--sup-surface, #f6f8fa);
	--sup-pf-radius: var(--sup-radius, 10px);
}

/* ------------------------------------------------------------------ */
/* Breadcrumbs                                                         */
/* ------------------------------------------------------------------ */
.sup-breadcrumbs { margin: 0 0 1rem; font-size: .875rem; }
.sup-breadcrumbs__list {
	display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .35rem;
	list-style: none; margin: 0; padding: 0;
}
.sup-breadcrumbs__item { display: inline-flex; align-items: center; gap: .35rem; margin: 0; }
.sup-breadcrumbs__link { color: var(--sup-pf-primary); text-decoration: none; }
.sup-breadcrumbs__link:hover { text-decoration: underline; }
.sup-breadcrumbs__current { color: var(--sup-pf-muted); }
.sup-breadcrumbs__sep { color: var(--sup-pf-muted); }

/* ------------------------------------------------------------------ */
/* Meta bar                                                            */
/* ------------------------------------------------------------------ */
.sup-meta-bar {
	display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem;
	padding: .7rem 0; margin: 0 0 1rem;
	border-top: 1px solid var(--sup-pf-border);
	border-bottom: 1px solid var(--sup-pf-border);
	font-size: .9rem; color: var(--sup-pf-text);
}
.sup-meta__item { display: inline-flex; align-items: center; gap: .4rem; }
.sup-meta__avatar { border-radius: 50%; width: 48px; height: 48px; object-fit: cover; }
.sup-meta__label { color: var(--sup-pf-muted); }
.sup-meta__author { font-weight: 600; color: var(--sup-pf-text); text-decoration: none; }
.sup-meta__author:hover { color: var(--sup-pf-primary); }
.sup-meta__item--category a { color: var(--sup-pf-primary); text-decoration: none; font-weight: 600; }
.sup-meta__item--category a:hover { text-decoration: underline; }
.sup-meta__item .sup-icon { color: var(--sup-pf-muted); flex: none; }

/* Fact checked chip */
.sup-fact-chip {
	display: inline-flex; align-items: center; gap: .35rem;
	background: #e6f4ea; color: var(--sup-pf-primary-dark);
	border: 1px solid #b7dfc2; border-radius: 999px;
	padding: .18rem .65rem .18rem .45rem; font-size: .82rem; line-height: 1.5;
}
.sup-fact-chip .sup-icon { color: var(--sup-pf-primary); width: 15px; height: 15px; }

/* Last verified line */
.sup-last-verified {
	display: inline-flex; align-items: center; gap: .4rem;
	color: var(--sup-pf-muted); font-size: .88rem; margin: .5rem 0;
}
.sup-last-verified .sup-icon { color: var(--sup-pf-primary); width: 16px; height: 16px; }

/* ------------------------------------------------------------------ */
/* Share buttons                                                       */
/* ------------------------------------------------------------------ */
.sup-share { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0 0 1.1rem; }
.sup-share__label { font-weight: 600; font-size: .9rem; margin-right: .15rem; }
.sup-share__btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 50%;
	border: 0; cursor: pointer; color: #fff; background: #57606a;
	transition: transform .15s ease, opacity .15s ease; text-decoration: none;
}
.sup-share__btn:hover { transform: translateY(-2px); opacity: .92; color: #fff; }
.sup-share__btn .sup-icon { width: 18px; height: 18px; }
.sup-share__btn--whatsapp { background: #25d366; }
.sup-share__btn--facebook { background: #1877f2; }
.sup-share__btn--x { background: #000; }
.sup-share__btn--telegram { background: #229ed9; }
.sup-share__btn--linkedin { background: #0a66c2; }
.sup-share__btn--copy, .sup-share__btn--native { background: var(--sup-pf-primary); }

/* ------------------------------------------------------------------ */
/* Fact check box                                                      */
/* ------------------------------------------------------------------ */
.sup-fact-box {
	display: flex; gap: 1rem;
	background: #f0faf2;
	border: 1px solid #b7dfc2;
	border-left: 5px solid var(--sup-pf-primary);
	border-radius: var(--sup-pf-radius);
	padding: 1.1rem 1.25rem; margin: 2rem 0;
}
.sup-fact-box__icon { flex: none; color: var(--sup-pf-primary); }
.sup-fact-box__icon .sup-icon { width: 34px; height: 34px; }
.sup-fact-box__title { font-weight: 700; font-size: 1.05rem; margin: 0 0 .3rem; color: var(--sup-pf-primary-dark); }
.sup-fact-box__text { margin: 0 0 .5rem; }
.sup-fact-box__meta { margin: 0 0 .4rem; color: var(--sup-pf-muted); font-size: .9rem; }
.sup-fact-box__sources-title { font-weight: 600; margin: .4rem 0 .2rem; }
.sup-fact-box__sources { margin: 0; padding-left: 1.2rem; }
.sup-fact-box__sources a { color: var(--sup-pf-primary); word-break: break-all; }

/* ------------------------------------------------------------------ */
/* Table of contents — 4 styles                                        */
/* ------------------------------------------------------------------ */
.sup-toc { margin: 1.5rem 0; }
.sup-toc__title { font-weight: 700; margin: 0 0 .55rem; font-size: 1.02rem; }
.sup-toc__list { margin: 0; padding-left: 1.25rem; }
.sup-toc__item { margin: .28rem 0; }
.sup-toc__item--h3 { margin-left: 1.1rem; list-style-type: circle; font-size: .95em; }
.sup-toc__link { color: var(--sup-pf-primary); text-decoration: none; }
.sup-toc__link:hover { text-decoration: underline; }

/* Style 1: classic boxed */
.sup-toc--1 {
	background: var(--sup-pf-surface);
	border: 1px solid var(--sup-pf-border);
	border-radius: var(--sup-pf-radius);
	padding: 1rem 1.2rem;
}
/* Style 2: minimal / borderless */
.sup-toc--2 { border-left: 3px solid var(--sup-pf-primary); padding: .25rem 0 .25rem 1rem; }
.sup-toc--2 .sup-toc__list { list-style: none; padding-left: 0; }
.sup-toc--2 .sup-toc__item--h3 { margin-left: 1.1rem; list-style: none; }
/* Style 3: numbered cards */
.sup-toc--3 {
	background: #fff; border: 1px solid var(--sup-pf-border);
	border-top: 4px solid var(--sup-pf-primary);
	border-radius: var(--sup-pf-radius); padding: 1rem 1.2rem;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .05);
}
.sup-toc--3 .sup-toc__list { list-style: decimal; font-weight: 500; }
/* Style 4: dark panel (sidebar friendly) */
.sup-toc--4 {
	background: #16181d; color: #e8eaed;
	border-radius: var(--sup-pf-radius); padding: 1rem 1.2rem;
}
.sup-toc--4 .sup-toc__title { color: #fff; }
.sup-toc--4 .sup-toc__link { color: #8fd0a0; }
.sup-toc--4 .sup-toc__link:hover { color: #b5e3c2; }

.sup-toc-placement { clear: both; }
.sup-toc-placement--sidebar-pos .sup-toc { margin-top: 0; }

/* ------------------------------------------------------------------ */
/* Author cards — 5 styles                                             */
/* ------------------------------------------------------------------ */
.sup-author-card {
	display: flex; gap: 1.1rem; align-items: flex-start;
	margin: 2rem 0; padding: 1.25rem;
	background: #fff; border: 1px solid var(--sup-pf-border);
	border-radius: var(--sup-pf-radius);
}
.sup-author-card__avatar { border-radius: 50%; width: 96px; height: 96px; object-fit: cover; }
.sup-author-card__media { flex: none; }
.sup-author-card__body { min-width: 0; }
.sup-author-card__label {
	text-transform: uppercase; letter-spacing: .06em; font-size: .72rem;
	font-weight: 700; color: var(--sup-pf-muted); margin: 0 0 .15rem;
}
.sup-author-card__name { font-size: 1.15rem; font-weight: 700; margin: 0; }
.sup-author-card__name a { color: var(--sup-pf-text); text-decoration: none; }
.sup-author-card__name a:hover { color: var(--sup-pf-primary); }
.sup-author-card__role { color: var(--sup-pf-primary); font-weight: 600; font-size: .9rem; margin: .1rem 0 .45rem; }
.sup-author-card__bio { margin: 0 0 .6rem; color: var(--sup-pf-text); }
.sup-author-card__socials { display: flex; gap: .45rem; list-style: none; margin: 0; padding: 0; }
.sup-author-card__socials a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; border-radius: 50%;
	background: var(--sup-pf-surface); color: var(--sup-pf-text);
	border: 1px solid var(--sup-pf-border);
}
.sup-author-card__socials a:hover { background: var(--sup-pf-primary); color: #fff; }
.sup-author-card__socials .sup-icon { width: 15px; height: 15px; }

/* 1 = classic (base styles above) */

/* 2 = Design 1 (reference layout: horizontal card — 96px avatar on
   the left, left-aligned body; centered column only below 720px) */
.sup-author-card--2 {
	flex-direction: row; align-items: flex-start; text-align: left;
	background: var(--sup-surface, #fff);
	border: 1px solid var(--sup-border, #d8dee4);
	border-radius: 18px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, .07);
	padding: 36px 28px;
}
.sup-author-card--2 .sup-author-card__avatar {
	width: 96px; height: 96px;
	border: 3px solid var(--sup-accent, #f59e0b);
	box-shadow: 0 8px 18px rgba(31, 51, 4, .25);
}
.sup-author-card--2 .sup-author-card__label {
	font-size: .78rem; letter-spacing: .22em;
	color: var(--sup-pf-primary-dark);
}
.sup-author-card--2 .sup-author-card__name { font-size: 1.5rem; font-weight: 800; }
.sup-author-card--2 .sup-author-card__bio {
	max-width: 560px; margin-inline: 0; line-height: 1.65;
}
.sup-author-card--2 .sup-author-card__socials { justify-content: flex-start; }
/* Round LinkedIn badge beside the style-2 author name */
.sup-author-card__li { display: inline-flex; vertical-align: middle; margin-left: 6px; line-height: 0; }
.sup-author-card__li svg { display: block; border-radius: 50%; }
@media (max-width: 719px) {
	.sup-author-card--2 { flex-direction: column; align-items: center; text-align: center; }
	.sup-author-card--2 .sup-author-card__bio { margin-inline: auto; }
	.sup-author-card--2 .sup-author-card__socials { justify-content: center; }
}

/* 3 = gradient */
.sup-author-card--3 {
	background: linear-gradient(135deg, var(--sup-pf-primary) 0%, var(--sup-pf-primary-dark) 100%);
	border: 0; color: #fff;
}
.sup-author-card--3 .sup-author-card__label { color: rgba(255, 255, 255, .75); }
.sup-author-card--3 .sup-author-card__name a, .sup-author-card--3 .sup-author-card__bio { color: #fff; }
.sup-author-card--3 .sup-author-card__role { color: #ffe08a; }
.sup-author-card--3 .sup-author-card__avatar { border: 3px solid rgba(255, 255, 255, .65); }
.sup-author-card--3 .sup-author-card__socials a { background: rgba(255, 255, 255, .16); border-color: transparent; color: #fff; }
.sup-author-card--3 .sup-author-card__socials a:hover { background: rgba(255, 255, 255, .32); }

/* 4 = minimal */
.sup-author-card--4 { background: transparent; border: 0; border-top: 2px solid var(--sup-pf-border); border-radius: 0; padding: 1.25rem 0 0; }
.sup-author-card--4 .sup-author-card__avatar { width: 64px; height: 64px; }
.sup-author-card--4 .sup-author-card__socials a { border: 0; background: transparent; width: auto; height: auto; color: var(--sup-pf-muted); }
.sup-author-card--4 .sup-author-card__socials a:hover { background: transparent; color: var(--sup-pf-primary); }

/* 5 = split */
.sup-author-card--5 { padding: 0; overflow: hidden; }
.sup-author-card--5 .sup-author-card__media {
	align-self: stretch; display: flex; align-items: center; justify-content: center;
	background: var(--sup-pf-surface); padding: 1.25rem; border-right: 1px solid var(--sup-pf-border);
}
.sup-author-card--5 .sup-author-card__body { padding: 1.25rem 1.25rem 1.25rem 0; align-self: center; }

/* ------------------------------------------------------------------ */
/* Related posts                                                       */
/* ------------------------------------------------------------------ */
.sup-related { margin: 2.5rem 0; }
.sup-related__title { font-size: 1.4rem; margin: 0 0 1rem; }
.sup-related__grid {
	display: grid; gap: 1.1rem;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.sup-related__card {
	border: 1px solid var(--sup-pf-border); border-radius: var(--sup-pf-radius);
	overflow: hidden; background: #fff; display: flex; flex-direction: column;
}
.sup-related__thumb { display: block; line-height: 0; }
.sup-related__img { width: 100%; height: auto; object-fit: cover; }
.sup-related__grid--thumb-small .sup-related__img { max-height: 110px; }
.sup-related__grid--thumb-large .sup-related__img { max-height: 190px; }
.sup-related__body { padding: .85rem 1rem 1rem; }
.sup-related__heading { font-size: 1rem; line-height: 1.4; margin: 0 0 .35rem; }
.sup-related__heading a { color: var(--sup-pf-text); text-decoration: none; }
.sup-related__heading a:hover { color: var(--sup-pf-primary); }
.sup-related__meta { color: var(--sup-pf-muted); font-size: .82rem; margin: 0 0 .35rem; }
.sup-related__excerpt { font-size: .9rem; margin: 0; color: var(--sup-pf-text); }

/* Related — sidebar compact list */
.sup-related-sidebar__title { font-weight: 700; margin: 0 0 .6rem; }
.sup-related-sidebar__list { list-style: none; margin: 0; padding: 0; }
.sup-related-sidebar__item { display: flex; gap: .65rem; margin: 0 0 .75rem; align-items: flex-start; }
.sup-related-sidebar__thumb { flex: none; line-height: 0; }
.sup-related-sidebar__img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; }
.sup-related-sidebar__link { color: var(--sup-pf-text); text-decoration: none; font-weight: 600; font-size: .92rem; line-height: 1.35; display: block; }
.sup-related-sidebar__link:hover { color: var(--sup-pf-primary); }
.sup-related-sidebar__date { color: var(--sup-pf-muted); font-size: .78rem; }

/* ------------------------------------------------------------------ */
/* Single layout helpers + post cards (author archive fallback)        */
/* ------------------------------------------------------------------ */
.sup-article__featured { margin: 0 0 1.4rem; }
.sup-article__featured-img { width: 100%; height: auto; border-radius: var(--sup-pf-radius); }
.sup-article__caption { color: var(--sup-pf-muted); font-size: .85rem; text-align: center; margin-top: .4rem; }
.sup-article__tags { font-size: .9rem; }
.sup-article__tags a { color: var(--sup-pf-primary); }

.sup-posts-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.sup-card { border: 1px solid var(--sup-pf-border); border-radius: var(--sup-pf-radius); overflow: hidden; background: #fff; }
.sup-card__thumb { display: block; line-height: 0; }
.sup-card__img { width: 100%; height: auto; }
.sup-card__body { padding: .9rem 1rem 1rem; }
.sup-card__title { font-size: 1.05rem; margin: 0 0 .35rem; }
.sup-card__title a { color: var(--sup-pf-text); text-decoration: none; }
.sup-card__title a:hover { color: var(--sup-pf-primary); }
.sup-card__meta { color: var(--sup-pf-muted); font-size: .82rem; margin: 0 0 .4rem; }
.sup-card__excerpt { font-size: .92rem; }
.sup-card__excerpt p { margin: 0; }

/* ------------------------------------------------------------------ */
/* Responsive + dark mode                                              */
/* ------------------------------------------------------------------ */
@media (max-width: 640px) {
	.sup-author-card, .sup-fact-box { flex-direction: column; }
	.sup-author-card--5 .sup-author-card__media { border-right: 0; border-bottom: 1px solid var(--sup-pf-border); width: 100%; }
	.sup-author-card--5 .sup-author-card__body { padding: 1.25rem; }
	.sup-author-card--2 { align-items: center; }
	.sup-meta-bar { gap: .4rem .8rem; }
	.sup-related__grid, .sup-posts-grid { grid-template-columns: 1fr; }
}

@media (prefers-color-scheme: dark) {
	.sup-related__card, .sup-card, .sup-author-card { background: transparent; }
	.sup-fact-chip { background: rgba(26, 127, 55, .18); }
}

/* ============================================================
   Featured image hover — copied line-for-line (same values) from
   the reference site ti-84calculator.com/assets/style.css:
   .featured img base + :hover lift, post-thumb zoom on card hover.
   ============================================================ */
.featured img { width: 100%; height: auto; display: block; border-radius: 16px; background: #f8f9fa; box-shadow: 0 4px 6px rgba(0,0,0,.07); transition: transform .4s ease, box-shadow .4s ease; }
.featured img:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,.13); }
.sup-related__img { transition: transform .4s ease; }
.sup-related__card:hover .sup-related__img { transform: scale(1.04); }
.sup-related-sidebar__img { transition: transform .4s ease; }
.sup-related-sidebar__item:hover .sup-related-sidebar__img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
	.featured img, .sup-related__img, .sup-related-sidebar__img { transition: none; }
	.featured img:hover { transform: none; }
}

/* Add as Preferred Source on Google — pill button with Google G logo */
.sup-preferred-google { display: inline-flex; align-items: center; gap: 9px; background: #fff; color: #1f1f1f; border: 1px solid #dadce0; border-radius: 999px; padding: 8px 16px 8px 12px; font-size: .9rem; font-weight: 600; line-height: 1.25; text-decoration: none; box-shadow: 0 1px 2px rgba(60,64,67,.15); transition: transform .25s ease, box-shadow .25s ease; margin-top: 10px; }
.sup-preferred-google:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(30,50,5,.18); text-decoration: none; color: #1f1f1f; }
.sup-preferred-google__g { flex: none; display: block; }
[data-theme="dark"] .sup-preferred-google { background: #1f2421; color: #e8eaed; border-color: #3c4043; }

/* ------------------------------------------------------------------ */
/* Category pill (above the single-post title)                         */
/* ------------------------------------------------------------------ */
.sup-cat-pill {
	display: inline-block;
	background: var(--sup-accent, #f59e0b); color: #111;
	border: none; border-radius: 999px;
	padding: 6px 15px;
	font-size: .8rem; font-weight: 800; letter-spacing: .04em;
	text-transform: uppercase; line-height: 1.2;
	margin: 0 0 14px; text-decoration: none;
	box-shadow: none;
	transition: filter .2s ease;
}
.sup-cat-pill:hover { background: var(--sup-accent, #f59e0b); color: #111; text-decoration: none; filter: brightness(.94); }

/* Tight pill → title gap inside the single-post header */
.sup-article__header .sup-cat-pill { margin: 0 0 10px; }
.sup-article__header .sup-article__title { margin-top: 0; }

/* Title / meta alignment (Customizer: sup_post_title_align / _meta_align) */
.sup-title-center { text-align: center; }
.sup-title-center .sup-article__title { text-align: center; }
.sup-meta-center .sup-meta2,
.sup-post-meta-center .sup-meta2 { justify-content: center; }
.sup-meta-center .sup-meta2__item--preferred,
.sup-post-meta-center .sup-meta2__item--preferred { margin-left: 0; }

/* ------------------------------------------------------------------ */
/* Meta bar v2 — reference layout (avatar · Written by · Reviewed by  */
/* · dates · Min Read · Preferred Source pill, thin divider under)    */
/* ------------------------------------------------------------------ */
.sup-meta2 {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: 12px 22px;
	padding: 14px 0 16px; margin: 0 0 1.25rem;
	border-bottom: 1px solid var(--sup-pf-border);
	font-size: .95rem; color: var(--sup-pf-text);
	text-align: left;
}
.sup-meta2__item { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.sup-meta2__avatar {
	width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: none;
	box-shadow: 0 0 0 2px var(--sup-pf-primary);
}
.sup-meta2__who { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.sup-meta2__label { color: var(--sup-pf-muted); }
.sup-meta2__name { font-weight: 600; color: var(--sup-pf-text); text-decoration: none; }
a.sup-meta2__name:hover { color: var(--sup-pf-primary); }
.sup-meta2__badge {
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	width: 38px; height: 38px; border-radius: 50%;
	background: #e6f4ea; color: var(--sup-pf-primary);
	box-shadow: 0 0 0 2px var(--sup-pf-primary);
}
.sup-meta2__badge .sup-icon { width: 20px; height: 20px; }
.sup-meta2__item--reading { color: var(--sup-pf-text); white-space: nowrap; }
.sup-meta2__item--reading .sup-icon { color: var(--sup-pf-muted); flex: none; }
.sup-meta2__item--date time, .sup-meta2__item--updated time { font-weight: 500; }
.sup-meta2__item--category a { color: var(--sup-pf-primary); text-decoration: none; font-weight: 600; }
.sup-meta2__item--category a:hover { text-decoration: underline; }
.sup-meta2__item--preferred { margin-left: auto; }

/* Preferred Source pill inside the meta row (smaller, no top margin) */
.sup-preferred-google--meta { margin-top: 0; padding: 6px 14px 6px 10px; font-size: .85rem; white-space: nowrap; }
.sup-preferred-google--meta .sup-preferred-google__g { width: 16px; height: 16px; }

/* Theme widgets in sidebars — reuse component styles, tighten spacing */
.widget .sup-author-card { margin: 0; }
.widget .sup-related-sidebar__title { display: none; } /* the widget title is used instead */
.widget .sup-toc { margin: 0; }

@media (max-width: 640px) {
	.sup-meta2 { gap: 10px 16px; padding: 12px 0 14px; }
	.sup-meta2__item--preferred { margin-left: 0; }
	.sup-cat-pill { margin-bottom: 10px; }
}

/* ------------------------------------------------------------------ */
/* Sidebar cards — sticky TOC + related stack on single posts.         */
/* Header = gradient icon chip + bold title; TOC items are numbered    */
/* with small gradient chips; related rows are thumb-left. Chips use   */
/* the theme colors, so every color scheme re-skins them.              */
/* ------------------------------------------------------------------ */
.sup-side-sticky { position: sticky; top: 96px; }
.sup-side-card {
	background: var(--sup-surface, #fff);
	border: 1px solid var(--sup-border, #e8e8e8);
	border-radius: 18px;
	box-shadow: 0 6px 18px rgba(16, 24, 8, .06);
	padding: 20px 20px 10px;
	margin-bottom: 22px;
}
.sup-side-card__title,
.sup-side-card--related .sup-related-sidebar__title {
	display: flex; align-items: center; gap: 11px;
	font-size: 1.12rem; font-weight: 800;
	color: var(--sup-pf-text);
	border: none; padding: 0; margin: 0 0 6px;
}
.sup-side-card__title::before,
.sup-side-card--related .sup-related-sidebar__title::before {
	content: ""; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px;
	background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='2.4'%20stroke-linecap='round'%3E%3Cpath%20d='M9.5%206h10M9.5%2012h10M9.5%2018h10'/%3E%3Ccircle%20cx='4.8'%20cy='6'%20r='1.4'%20fill='white'%20stroke='none'/%3E%3Ccircle%20cx='4.8'%20cy='12'%20r='1.4'%20fill='white'%20stroke='none'/%3E%3Ccircle%20cx='4.8'%20cy='18'%20r='1.4'%20fill='white'%20stroke='none'/%3E%3C/svg%3E") center / 18px no-repeat, linear-gradient(135deg, var(--sup-accent, #f59e0b), var(--sup-primary, #166534));
}
.sup-side-card--related .sup-related-sidebar__title::before {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='white'%3E%3Crect%20x='4'%20y='4'%20width='7'%20height='7'%20rx='1.6'/%3E%3Crect%20x='13'%20y='4'%20width='7'%20height='7'%20rx='1.6'/%3E%3Crect%20x='4'%20y='13'%20width='7'%20height='7'%20rx='1.6'/%3E%3Crect%20x='13'%20y='13'%20width='7'%20height='7'%20rx='1.6'/%3E%3C/svg%3E"), linear-gradient(135deg, var(--sup-accent, #f59e0b), var(--sup-primary, #166534));
	background-size: 18px, cover;
	background-position: center, center;
	background-repeat: no-repeat;
}
.sup-side-card .sup-toc {
	margin: 0; background: none; border: none;
	box-shadow: none; padding: 0; border-radius: 0;
}
.sup-side-card--toc .sup-toc__title { display: none; } /* the card title replaces it */

/* Numbered TOC items inside the card */
.sup-side-card--toc .sup-toc__list {
	counter-reset: sup-toc;
	list-style: none; margin: 0; padding: 0;
}
.sup-side-card--toc .sup-toc__item {
	display: flex; align-items: flex-start; gap: 12px;
	margin: 0; padding: 11px 0;
	border-bottom: 1px solid var(--sup-border, #f0f0e8);
	list-style: none;
}
.sup-side-card--toc .sup-toc__item:last-child { border-bottom: none; }
.sup-side-card--toc .sup-toc__item::before {
	counter-increment: sup-toc;
	content: counter(sup-toc, decimal-leading-zero);
	flex: 0 0 30px; height: 30px; border-radius: 9px;
	background: linear-gradient(135deg, var(--sup-accent, #f59e0b), var(--sup-primary, #166534));
	color: #16240a; font-weight: 800; font-size: .78rem; line-height: 1;
	display: flex; align-items: center; justify-content: center;
}
.sup-side-card--toc .sup-toc__link {
	color: var(--sup-pf-text); font-weight: 550;
	text-decoration: none; background: none; padding: 0;
	align-self: center;
}
.sup-side-card--toc .sup-toc__link:hover {
	color: var(--sup-pf-primary-dark); text-decoration: none; transform: none;
}
.sup-side-card--toc .sup-toc__item--h3 { padding-left: 42px; }
.sup-side-card--toc .sup-toc__item--h3::before { visibility: hidden; }

/* Related rows inside the card — thumbnail left, bold title */
.sup-side-card--related .sup-related-sidebar__list { margin: 0; padding: 0; }
.sup-side-card--related .sup-related-sidebar__item {
	display: flex; gap: 12px; align-items: flex-start;
	margin: 0; padding: 11px 0;
	border-bottom: 1px solid var(--sup-border, #f0f0e8);
}
.sup-side-card--related .sup-related-sidebar__item:last-child { border-bottom: none; }
.sup-side-card--related .sup-related-sidebar__thumb { flex: 0 0 84px; line-height: 0; }
.sup-side-card--related .sup-related-sidebar__img {
	width: 84px; height: 64px; object-fit: cover;
	border-radius: 10px; border: 1px solid var(--sup-border, #eee);
}
.sup-side-card--related .sup-related-sidebar__link {
	font-weight: 700; font-size: .95rem; line-height: 1.35;
	color: var(--sup-pf-text);
}
.sup-side-card--related .sup-related-sidebar__link:hover { color: var(--sup-pf-primary); }

/* Sidebar card title icon chip (emoji on a gradient tile) + the
   optional tool card that follows the TOC card */
.sup-side-ico {
	width: 34px; height: 34px; border-radius: 9px; flex: none;
	background: linear-gradient(135deg, var(--sup-accent, #f59e0b), var(--sup-primary, #166534));
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 17px; line-height: 1;
}
.sup-side-card__title:has(.sup-side-ico)::before { display: none; }
.sup-side-tool { padding-bottom: 20px; }
.sup-side-tool p {
	margin: 0 0 14px; font-size: .95rem; line-height: 1.55;
	color: var(--sup-pf-text);
}
.sup-side-tool__btn {
	display: block; text-align: center;
	background: linear-gradient(135deg, var(--sup-accent, #f59e0b), var(--sup-primary, #166534));
	color: #16240a; font-weight: 800;
	padding: 11px; border-radius: 999px;
	text-decoration: none;
}
.sup-side-tool__btn:hover { color: #16240a; text-decoration: none; filter: brightness(.95); }

/* ------------------------------------------------------------------ */
/* Article list markers — Customizer option (body.sup-list-*):         */
/* square (Design 1) / round dots / numbered chips. Lists sit deeper   */
/* in the text column; markers live in the list gutter.                */
/* ------------------------------------------------------------------ */
body:is(.sup-list-square, .sup-list-dots, .sup-list-numbers) .sup-article__content ul:not(.sup-author-card__socials):not(.sup-fact-box__sources):not(.sup-facts__list) {
	list-style: none;
	padding-left: 2.3em;
}
body:is(.sup-list-square, .sup-list-dots, .sup-list-numbers) .sup-article__content ul:not(.sup-author-card__socials):not(.sup-fact-box__sources):not(.sup-facts__list) > li {
	position: relative;
	padding-left: 0;
	margin: .45em 0;
}
body.sup-list-square .sup-article__content ul:not(.sup-author-card__socials):not(.sup-fact-box__sources):not(.sup-facts__list) > li::before {
	content: "";
	position: absolute; left: -1.8em; top: .28em;
	width: 1em; height: 1em;
	border-radius: 4px;
	border: 2px solid var(--sup-accent, #f59e0b);
	background: radial-gradient(circle at center, var(--sup-primary, #166534) 0 3px, transparent 3.5px), var(--sup-pf-surface);
}
body.sup-list-dots .sup-article__content ul:not(.sup-author-card__socials):not(.sup-fact-box__sources):not(.sup-facts__list) > li::before {
	content: "";
	position: absolute; left: -1.55em; top: .6em;
	width: .5em; height: .5em;
	border: none; border-radius: 50%;
	background: var(--sup-primary, #166534);
}
body.sup-list-numbers .sup-article__content ul:not(.sup-author-card__socials):not(.sup-fact-box__sources):not(.sup-facts__list) {
	counter-reset: sup-li;
}
body.sup-list-numbers .sup-article__content ul:not(.sup-author-card__socials):not(.sup-fact-box__sources):not(.sup-facts__list) > li::before {
	counter-increment: sup-li;
	content: counter(sup-li);
	position: absolute; left: -2.05em; top: .15em;
	width: 1.5em; height: 1.5em;
	border: none; border-radius: 7px;
	background: linear-gradient(135deg, var(--sup-accent, #f59e0b), var(--sup-primary, #166534));
	color: #16240a; font-weight: 800; font-size: .75em; line-height: 1;
	display: flex; align-items: center; justify-content: center;
}

/* ------------------------------------------------------------------ */
/* Premium content images — smooth edges, soft depth                   */
/* ------------------------------------------------------------------ */
.sup-article__content .wp-block-image img,
.sup-article__content figure img,
.sup-article__content p > img {
	border-radius: 12px;
	box-shadow: 0 6px 18px rgba(16, 24, 8, .08);
	border: 1px solid var(--sup-pf-border);
}

/* ------------------------------------------------------------------ */
/* Related posts — carousel for the cards beyond the first three       */
/* ------------------------------------------------------------------ */
.sup-related-carousel { position: relative; margin-top: 18px; }
.sup-related-track {
	display: flex; gap: 18px; overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 4px 2px 10px;
	scrollbar-width: none;
}
.sup-related-track::-webkit-scrollbar { display: none; }
.sup-related-track .sup-related__card--slide {
	flex: 0 0 300px; max-width: 85vw; scroll-snap-align: start;
}
.sup-related-track .sup-related__img { max-height: 150px; width: 100%; }
.sup-rel-nav {
	position: absolute; top: 38%; z-index: 2;
	width: 42px; height: 42px; padding: 0;
	border: none; border-radius: 50%;
	background: var(--sup-primary, #166534); color: #fff;
	font-size: 1.4rem; line-height: 1; cursor: pointer;
	box-shadow: var(--sup-shadow, 0 8px 28px rgba(17, 24, 39, .10));
	display: flex; align-items: center; justify-content: center;
	transition: opacity .15s ease, transform .15s ease;
}
.sup-rel-nav:hover { opacity: .92; transform: scale(1.05); }
.sup-rel-prev { left: -14px; }
.sup-rel-next { right: -14px; }
@media (max-width: 720px) {
	.sup-rel-prev { left: 4px; }
	.sup-rel-next { right: 4px; }
}

/* ------------------------------------------------------------------ */
/* MOBILE (v2.1) — single-post components on small screens.            */
/* Everything sits inside max-width queries; desktop is untouched.     */
/* ------------------------------------------------------------------ */
@media (max-width: 720px) {
	/* Title scales with the viewport, never overflows */
	.sup-article__title { font-size: clamp(1.7rem, 6vw, 2.2rem); line-height: 1.15; }

	/* Meta bar: author groups sit two per row, the Preferred pill
	   takes its own row, right-aligned (DOM order is unchanged) */
	.sup-meta2 { gap: 10px 14px; }
	.sup-meta2__item--written, .sup-meta2__item--reviewed { flex: 1 1 45%; }
	.sup-meta2__item--preferred { flex: 1 1 100%; margin-left: 0; display: flex; justify-content: flex-end; }

	/* Share row: full-size touch targets */
	.sup-share { gap: 8px; }
	.sup-share__btn { width: 44px; height: 44px; }

	/* Fact box breathes less */
	.sup-fact-box { padding: 16px; }

	/* Sidebar stack: no sticky offset on mobile (the TOC card is
	   first in DOM order, so it leads the stack) */
	.sup-side-sticky { position: static; }

	/* Tables scroll sideways instead of breaking the layout */
	.sup-article__content table, .sup-entry-content table {
		display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
	}
	.wp-block-table { overflow-x: auto; }

	/* Author card: tighter padding, smaller avatar */
	.sup-author-card { padding: 26px 18px; }
	.sup-author-card__avatar { width: 80px; height: 80px; }

	/* Prev / next post navigation stacks full-width */
	.post-navigation .nav-links { display: flex; flex-direction: column; gap: 12px; }
	.post-navigation .nav-previous, .post-navigation .nav-next { width: 100%; }

	/* Related: one card per row, roomier carousel slides */
	.sup-related__grid { grid-template-columns: 1fr; }
	.sup-related-track .sup-related__card--slide { flex-basis: 82vw; }

	/* Body copy stays comfortably readable */
	.sup-article__content { font-size: 16.5px; }
}

@media (max-width: 560px) {
	/* Lists: slightly shallower indent on small phones */
	body:is(.sup-list-square, .sup-list-dots, .sup-list-numbers) .sup-article__content ul:not(.sup-author-card__socials):not(.sup-fact-box__sources):not(.sup-facts__list) {
		padding-left: 1.9em;
	}
	.sup-side-card { padding: 16px 16px 8px; }
}