/* ═══════════════════════════════════════════════════════════════════════════
   SHINING AWARDS — brand skin (deep-fork visual layer)
   Loaded AFTER Jannah's stylesheet (see brand.php) so it wins. Everything is
   token-driven (--sa-*, tokens.css), so the whole look tracks the active style
   preset (Spotlight / Bias / Lightstick / Custom). No core template edits —
   this restyles Jannah's real output selectors into the Shining identity.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Base surfaces ─────────────────────────────────────────────────────────
   Jannah drives its ENTIRE dark palette through two custom properties
   (defaults #1f2024 / #27292d). Remapping them turns every dark container —
   page, wrappers, mag-boxes, cards — into the deep Shining near-black at once. */
html.dark-skin,
.dark-skin {
	--tie-dark-skin-bg-main: var(--sa-bg);       /* page background → #0F0B16 */
	--tie-dark-skin-bg: var(--sa-surface-1);     /* boxes/cards → #1A1526 */
}

/* Jannah's OWN brand variables. base.css declares `--brand-color:#0669ff` on
   :root and derives a lot from it — nav active states, link accents, buttons,
   `--main-nav-primary-color`. De-branding never remapped these, so that stock
   blue kept leaking through anywhere our own `--sa-*` rules didn't happen to
   cover (it was the blue capsule + 5px underline on the active nav item).
   Point them at the palette so leftovers inherit the brand instead of Jannah's. */
:root,
html.dark-skin,
.dark-skin {
	--brand-color: var(--sa-violet);
	--dark-brand-color: var(--sa-violet-deep);
	--bright-color: var(--sa-text);
}

html, body {
	background: var(--sa-bg) !important;
	color: var(--sa-text);
	font-family: var(--sa-font-body);
	-webkit-font-smoothing: antialiased;
}

#wrapper, #content, .container, .main-content, .theiaStickySidebar {
	background: transparent;
}

/* Brand-tinted text selection + scrollbar — small "own-identity" flourishes. */
::selection { background: var(--sa-magenta); color: var(--sa-on-accent, #fff); }
::-moz-selection { background: var(--sa-magenta); color: var(--sa-on-accent, #fff); }
* { scrollbar-color: var(--sa-violet) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--sa-bg-2); }
::-webkit-scrollbar-thumb {
	background: var(--sa-gradient);
	border-radius: var(--sa-radius-pill);
	border: 2px solid var(--sa-bg-2);
}

/* ── Typography scale ─────────────────────────────────────────────────────
   Clash Display for headings, tightened + bolder for the K-pop poster feel. */
h1, h2, h3, h4, h5,
.post-title, .widget-title, .page-header h1, .page-title,
.mag-box-title, .block-head, .entry-title {
	font-family: var(--sa-font-display);
	color: var(--sa-text);
	letter-spacing: -.01em;
}
h1, h2, .page-title { font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.entry .post-title, .single .post-title { font-weight: 700; }
p, li, .post-excerpt, .entry { line-height: 1.6; }

a { color: var(--sa-violet-light); transition: color .18s ease; }
a:hover { color: var(--sa-pink); }

/* Gradient-text utility. */
.sa-grad {
	background: var(--sa-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ── Masthead ─────────────────────────────────────────────────────────────
   The header carries the signature gradient so it tracks the active preset.
   !important beats Jannah's header-background option (inline #tie-wrapper
   #theme-header, 2 IDs). Nav / menu / top-bar stay on the dark surface. */
#theme-header { background: var(--sa-gradient) !important; border-color: var(--sa-border); }
.header-main, #main-nav, .main-menu, .top-bar {
	background: var(--sa-bg-2);
	border-color: var(--sa-border);
}
/* Beat Jannah's saved header-background option (inline CSS at #tie-wrapper
   #theme-header #main-nav — 3 IDs — carrying the old violet gradient). Only
   !important overrides an inline-derived rule regardless of specificity, so the
   nav strip tracks our token instead of a stale purple→teal gradient. */
#tie-wrapper #theme-header #main-nav,
#tie-wrapper #main-nav.fixed-nav { background: var(--sa-bg-2) !important; border-color: var(--sa-border); }
#tie-wrapper #theme-header #main-nav .main-menu-wrapper,
#tie-wrapper #main-nav.fixed-nav .main-menu-wrapper { background: transparent !important; }
/* Menu hover / current gets a brand underline instead of Jannah's block bg. */
#main-nav .menu > li > a:hover,
#main-nav .menu > .current-menu-item > a { color: var(--sa-text); }

/* ── Archive / page headers ───────────────────────────────────────────────
   Give Jannah's plain page/term title a Shining treatment: gradient text +
   an accent underline bar. Targets `.page-title` (archive/category/search) and
   mag-box / block titles (homepage builder). */
.page-title,
.entry-header-outer .page-title {
	display: inline-block;
	background: var(--sa-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-size: clamp(1.9rem, 4vw, 3rem);
	margin-bottom: .35em;
}
.entry-header-outer { position: relative; }
.entry-header-outer .page-title::after {
	content: "";
	display: block;
	width: 3.2rem;
	height: 4px;
	margin-top: .5rem;
	border-radius: var(--sa-radius-pill);
	background: var(--sa-gradient);
}

/* ── Breadcrumbs ──────────────────────────────────────────────────────────
   style.css:1448-1451 hardcodes `#breadcrumb, #breadcrumb a:not(:hover)` to
   `#666`. That is a mid-grey chosen for Jannah's white skin; on our dark
   surfaces it lands at roughly 3:1 against the page and reads as disabled text.
   The trail was the last chrome element still painted by a literal hex rather
   than the palette.

   Two tokens rather than one: the ancestors are secondary navigation and should
   recede, while the current page is a label and should sit at body weight. The
   delimiter is quieter than both. Hover lifts to the accent, matching every
   other link in the skin.

   Every selector is prefixed with `#tie-wrapper` — two ids against Jannah's one,
   so we win on SPECIFICITY rather than on source order. That is not belt and
   braces: LiteSpeed combines all enqueued CSS into a single file and does not
   preserve enqueue order, and it demonstrably put skin.css at byte ~9.5k and
   style.css at ~88k in the combined output — our rule came FIRST and lost. "Our
   sheet is enqueued after Jannah's" is not a guarantee on this site (the same
   reason bridge.css leans on !important). Measured, not assumed. */
#tie-wrapper #breadcrumb,
#tie-wrapper #breadcrumb a:not(:hover) {
	color: var(--sa-text-muted);
}
#tie-wrapper #breadcrumb a:hover {
	color: var(--sa-violet);
}
#tie-wrapper #breadcrumb .delimiter {
	color: var(--sa-text-dim);
}
#tie-wrapper #breadcrumb .current,
#tie-wrapper #breadcrumb em:last-of-type {
	color: var(--sa-text);
	font-style: normal;
}

/* Homepage-builder block titles (mag-box) — accent bar + display face. */
.mag-box-title, .block-head > h3, .widget-title {
	position: relative;
	font-family: var(--sa-font-display);
	text-transform: none;
}
.mag-box-title > span, .block-head > h3 > span {
	border-bottom: 3px solid transparent;
	border-image: var(--sa-gradient) 1;
	padding-bottom: .35rem;
}

/* ── Post cards (archive + homepage-builder blocks) ───────────────────────
   Poster-style: rounded, bordered, lift + gradient glow on hover, and a slow
   thumbnail zoom. Works for the horizontal archive item and grid blocks. */
.post-item, .post-listing .post, .mag-box .post, .posts-wrapper .post,
.single-post-box, .widget.timeline-widget .post {
	background: var(--sa-surface-1);
	border: 1px solid var(--sa-border);
	border-radius: var(--sa-radius);
	box-shadow: var(--sa-shadow-card);
	overflow: hidden;
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.post-item:hover, .post-listing .post:hover, .mag-box .post:hover,
.posts-wrapper .post:hover {
	transform: translateY(-4px);
	border-color: var(--sa-border-strong);
	box-shadow: 0 16px 44px rgba(0, 0, 0, .55), var(--sa-glow);
}
/* Thumbnail: clip + zoom on hover, subtle bottom scrim for legibility. */
.post-item .post-thumbnail, .post .post-thumbnail { position: relative; overflow: hidden; }
.post-item .post-thumbnail img, .post .post-thumbnail img {
	transition: transform .5s ease;
	width: 100%;
}
.post-item:hover .post-thumbnail img, .post:hover .post-thumbnail img {
	transform: scale(1.06);
}
.post-item .post-thumbnail::after, .post .post-thumbnail::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, transparent 55%, rgba(15, 11, 22, .45) 100%);
	pointer-events: none;
}
.post-details { padding: 1.1rem 1.25rem 1.25rem; }
.post-item .post-title a, .post .post-title a {
	color: var(--sa-text);
	transition: color .18s ease;
}
.post-item:hover .post-title a, .post:hover .post-title a { color: var(--sa-violet-light); }
.post-excerpt { color: var(--sa-text-muted); }

/* Post meta — muted, compact. */
.post-meta, .post-meta a { color: var(--sa-text-dim); }
.post-meta a:hover { color: var(--sa-pink); }

/* Category badge → unified gradient pill. (Overrides Jannah's per-category
   colour for a consistent brand look; to keep category colours instead, remove
   this block.) */
.post-cat, .post-cat a, span.post-cat {
	display: inline-block;
	background: var(--sa-gradient) !important;
	color: var(--sa-on-accent, #fff) !important;
	font-family: var(--sa-font-display);
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: .2rem .6rem;
	border-radius: var(--sa-radius-pill);
}

/* ── Buttons ──────────────────────────────────────────────────────────────
   Gradient pills with a lift + glow on hover. */
.button, button, input[type="submit"], .more-link, .read-more,
.more-link.button, .pagination a, .tie-btn {
	background: var(--sa-gradient);
	color: var(--sa-on-accent, #fff);
	border: 0;
	border-radius: var(--sa-radius-pill);
	font-family: var(--sa-font-display);
	font-weight: 700;
	letter-spacing: .03em;
	transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.button:hover, button:hover, input[type="submit"]:hover,
.more-link:hover, .read-more:hover, .more-link.button:hover {
	color: var(--sa-on-accent, #fff);
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(0, 0, 0, .4);
	filter: saturate(1.1);
}

/* ── Flat surfaces — no inherited card panel ──────────────────────────────
   Jannah wraps the article, every sidebar widget, the comments block, related
   and read-next in `.container-wrapper`, which assets/css/style.css paints as
   `--tie-dark-skin-bg-main` + a 1px rgba(255,255,255,.1) border.

   Our bridge already maps that fill to `--sa-bg` — the SAME colour as the page
   — so the panel contributed no fill at all, only a faint outline that read as
   an empty placeholder box around the article and each widget. Strip it: brand
   surfaces are our own `.sa-*` components, not the base theme's boxes.

   `!important` is deliberate, and for the same reason bridge.css needs it:
   LiteSpeed combines all enqueued CSS into one file, so "our sheet loads after
   Jannah's" is NOT a guarantee. Verified live — without it, style.css's
   `.dark-skin .container-wrapper` won the tie on equal specificity and the
   fill stayed painted. */
.container-wrapper,
.dark-skin .container-wrapper,
html.dark-skin .container-wrapper {
	background: transparent !important;
	border-width: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	/* 🔴 `opacity: .99` — Jannah's own layer-promotion hack, and the reason a
	   sticky ad went UNDER the comments.

	   The same skin rule that paints the panel also sets `opacity: .99` on every
	   `.container-wrapper`. A sub-1 opacity CREATES A STACKING CONTEXT, so
	   `article#the-post` becomes one — and a `position: fixed` element the ad
	   script parks inside the in-article slot is trapped in it, no matter how
	   large its own z-index. `#comments-box` and `#add-comment-block` are
	   themselves .99 opacity groups LATER in tree order, so they paint on top:
	   the floating video ended up behind the comment form (verified live —
	   setting this one property to 1 is what puts the ad back on top).

	   We paint no panel here, so the hack has nothing left to fix. */
	opacity: 1 !important;
}
/* The same hack, on the elements Jannah applies it to outside .container-wrapper.
   Same reason: never leave a stacking context lying around an ad slot. */
.widget-title,
#footer .widget,
.side-aside .widget { opacity: 1 !important; }

/* ── Footer widgets ───────────────────────────────────────────────────────
   NOTE: this rule used to read `#sidebar .widget, .footer-widget-area .widget`.
   There is no element with id="sidebar" — Jannah renders `<aside class="sidebar">`
   — so the first selector never matched anything and sidebar widgets silently
   fell through to the `.container-wrapper` panel above. Sidebar widgets are
   deliberately flat now, so only the footer keeps a surface. */
.footer-widget-area .widget {
	background: var(--sa-surface-2);
	border: 1px solid var(--sa-border);
	border-radius: var(--sa-radius-sm);
}
#theme-footer, .footer-widget-area { background: var(--sa-bg-2); border-color: var(--sa-border); }
#footer-nav, .footer-bottom { border-color: var(--sa-border); }
/* Footer social icons → gradient on hover. */
.footer-widget-area .social-icons a:hover,
#footer .social-icons a:hover { color: var(--sa-pink); }

/* ── Misc brand touches ───────────────────────────────────────────────────*/
hr { border-color: var(--sa-border); }
blockquote {
	border-left: 4px solid transparent;
	border-image: var(--sa-gradient) 1;
	background: var(--sa-surface-1);
	border-radius: var(--sa-radius-sm);
}
input[type="text"], input[type="search"], input[type="email"], textarea, select {
	background: var(--sa-surface-1);
	border: 1px solid var(--sa-border);
	color: var(--sa-text);
	border-radius: var(--sa-radius-sm);
}
input:focus, textarea:focus, select:focus { border-color: var(--sa-border-strong); }

/* ── Keyboard focus ring (WCAG 2.4.7 / 1.4.11) ────────────────────────────────
   One consistent, high-visibility indicator for every interactive element. A
   two-tone ring: a transparent real `outline` (kept for Windows High-Contrast /
   forced-colors, where box-shadow is ignored) plus a box-shadow ring whose inner
   band is the page-bg colour and outer band the brand focus colour — so it stays
   ≥3:1 against BOTH dark surfaces and the light end of gradient buttons. Scoped to
   :focus-visible so it only shows for keyboard/AT users, never on mouse click. */
a:focus-visible,
button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible,
[tabindex]:focus-visible,
.button:focus-visible, .tie-btn:focus-visible,
.more-link:focus-visible, .read-more:focus-visible,
summary:focus-visible {
	/* A VISIBLE coloured outline is the primary ring: it can't be overridden by an
	   element's own box-shadow (some brand pills set one at high specificity) and it
	   sits in the offset gap over the dark page bg, so it always reads. The two-tone
	   box-shadow is a nicety layered on top where it survives — its inner band is the
	   page-bg colour so pills/inputs keep their shape with no jump. */
	outline: 2px solid var(--sa-focus);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--sa-bg), 0 0 0 4px var(--sa-focus);
}
/* Don't let the ring get clipped where an ancestor hides overflow (cards etc). */
a:focus-visible, button:focus-visible { position: relative; z-index: 1; }

/* Vote love-mark (was the ✦ sparkle, now a heart). Rose by default. */
.sa-sparkle {
	width: 1em; height: 1em;
	display: inline-block;
	vertical-align: -.125em;
	color: var(--sa-heart);
}

/* Eyebrow / label love-mark rendered as a ::before mask, so a fixed rose heart
   in the EXACT shining_heart_svg() shape leads a label whose text stays its own
   colour. Add `sa-heartmark` alongside a label class (e.g. .sa-home-eyebrow). */
.sa-heartmark::before {
	content: "";
	display: inline-block;
	width: .9em; height: .9em;
	margin-right: .45em;
	vertical-align: -.13em;
	background-color: var(--sa-heart);
	-webkit-mask: var(--sa-heart-mask) center / contain no-repeat;
	        mask: var(--sa-heart-mask) center / contain no-repeat;
}

/* ── Share fallback menu (share.js, desktop / no Web Share) ────────────────────
   A small fixed popover of explicit share targets, appended to <body> and
   positioned under the share button. */
/* ============================================================================
   SHARE BUTTONS — three premium, brand-coloured styles (Share studio → style)
   a = Solid Brand Circles (default) · b = Expanding Pills · c = Glass Segmented Bar
   Each network keeps its real brand hue via --c; the copy-link accent tracks the
   active --sa-* palette (Nova/Ember/Cobalt…). One clean "Share this" heading —
   no per-row label.
   ==========================================================================*/

/* per-network brand colour — shared by the inline buttons AND the fallback menu */
.sa-shico-btn--facebook,  .sa-sharemenu__item--facebook  { --c: #1877F2; }
.sa-shico-btn--whatsapp,  .sa-sharemenu__item--whatsapp  { --c: #25D366; }
.sa-shico-btn--telegram,  .sa-sharemenu__item--telegram  { --c: #229ED9; }
.sa-shico-btn--line,      .sa-sharemenu__item--line      { --c: #06C755; }
.sa-shico-btn--reddit,    .sa-sharemenu__item--reddit    { --c: #FF4500; }
.sa-shico-btn--pinterest, .sa-sharemenu__item--pinterest { --c: #E60023; }
.sa-shico-btn--email,     .sa-sharemenu__item--email     { --c: #8A94A6; }
.sa-shico-btn--x,         .sa-sharemenu__item--x         { --c: #E7E9EA; } /* light icon; dark fill handled per style */
.sa-shico-btn--copy,      .sa-sharemenu__item--copy      { --c: var(--sa-violet-light, #FF7AC6); }

.sa-shico { width: 1.15rem; height: 1.15rem; display: block; }
.sa-shico-ic { display: grid; place-items: center; }
.sa-shico-check { display: none; }
.sa-shico-lbl { display: none; }
.sa-shico-btn { position: relative; display: inline-flex; align-items: center; justify-content: center;
	cursor: pointer; text-decoration: none; border: 0; background: transparent; font: inherit; color: inherit;
	transition: transform .22s cubic-bezier(.2,.9,.3,1.3), background .2s ease, color .2s ease, box-shadow .2s ease; }
.sa-shico-btn:focus-visible { outline: 2px solid var(--sa-focus); outline-offset: 2px; }

/* Entry-content leak defence: inside .entry-content, Jannah paints links with its
   post-links accent (e.g. #e74c3c red) + a gradient underline, which bleeds into
   the SVG glyphs via currentColor. Force our own glyph colours (!important beats
   `.single .entry-content a`, and survives LiteSpeed CSS-combine re-ordering) and
   strip the underline. */
.sa-shareinline a.sa-shico-btn, .sa-shareinline button.sa-shico-btn { text-decoration: none !important; }
/* GEOMETRY lock. The share block is injected INTO .entry-content, so any
   `.entry-content a` rule outranks our (0,2,0) button rules and reshapes the
   controls — the Links studio's "Sweep" style did exactly that, flattening the
   round brand circles into padded 4px rectangles while the Copy <button> stayed
   round. single.css now excludes component links, but this lock means no future
   prose-link rule (ours or the base theme's) can deform them again. Each style
   sets its own radius below; these three just strip inherited box metrics. */
.sa-shareinline .sa-shico-btn { padding: 0 !important; margin: 0 !important; }
.sa-shareinline--a .sa-shico-btn { border-radius: 50% !important; }
.sa-shareinline--b .sa-shico-btn { border-radius: 999px !important; }
.sa-shareinline--c .sa-shico-btn { border-radius: 12px !important; }
.sa-shareinline--a .sa-shico-btn { color: #fff !important; }
.sa-shareinline--b .sa-shico-btn { color: var(--c) !important; }
.sa-shareinline--b .sa-shico-btn:hover, .sa-shareinline--b .sa-shico-btn:focus-visible { color: #fff !important; }
.sa-shareinline--c .sa-shico-btn { color: var(--c) !important; }
.sa-shareinline--c a.sa-shico-btn { background-image: none !important; } /* strip the leaked underline (C links are transparent) */

/* row wrapper */
.sa-shareinline { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; margin-top: 1.1rem; }

/* a — Solid Brand Circles (default): filled brand colour, gloss, springy hover */
.sa-shareinline--a .sa-shico-btn { width: 2.6rem; height: 2.6rem; border-radius: 50%; overflow: hidden; color: #fff;
	background: var(--c); box-shadow: 0 5px 15px color-mix(in srgb, var(--c) 38%, transparent); }
.sa-shareinline--a .sa-shico-btn::before { content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(255,255,255,.26), transparent 55%); pointer-events: none; }
.sa-shareinline--a .sa-shico-btn:hover, .sa-shareinline--a .sa-shico-btn:focus-visible {
	transform: translateY(-5px) scale(1.08); box-shadow: 0 14px 28px color-mix(in srgb, var(--c) 58%, transparent); }
.sa-shareinline--a .sa-shico-btn--x { background: #1D1F22; }
.sa-shareinline--a .sa-shico-btn--copy { background: var(--sa-gradient); box-shadow: 0 5px 15px rgba(255,61,174,.4); }

/* b — Expanding Pills: coloured circle that slides open to show the name on hover */
.sa-shareinline--b .sa-shico-btn { height: 2.6rem; border-radius: 999px; overflow: hidden; justify-content: flex-start;
	color: var(--c); background: color-mix(in srgb, var(--c) 13%, var(--sa-surface-1));
	border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); }
.sa-shareinline--b .sa-shico-ic { flex: 0 0 2.6rem; width: 2.6rem; height: 2.6rem; }
.sa-shareinline--b .sa-shico-lbl { display: block; max-width: 0; opacity: 0; white-space: nowrap;
	font-weight: 700; font-size: .85rem; transition: max-width .28s ease, opacity .2s ease, padding .28s ease; }
.sa-shareinline--b .sa-shico-btn:hover, .sa-shareinline--b .sa-shico-btn:focus-visible {
	color: #fff; background: var(--c); box-shadow: 0 10px 22px color-mix(in srgb, var(--c) 44%, transparent); }
.sa-shareinline--b .sa-shico-btn:hover .sa-shico-lbl, .sa-shareinline--b .sa-shico-btn:focus-visible .sa-shico-lbl {
	max-width: 9rem; opacity: 1; padding-right: 1rem; }
.sa-shareinline--b .sa-shico-btn--x:hover, .sa-shareinline--b .sa-shico-btn--x:focus-visible { background: #1D1F22; color: #fff; }
.sa-shareinline--b .sa-shico-btn--copy:hover, .sa-shareinline--b .sa-shico-btn--copy:focus-visible { background: var(--sa-gradient); color: #fff; }

/* c — Glass Segmented Bar: one frosted bar of brand-coloured icons + hairlines */
.sa-shareinline--c { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 5px; border-radius: 16px;
	background: rgba(255,255,255,.045); border: 1px solid var(--sa-border-strong);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 10px 28px rgba(0,0,0,.32); }
.sa-shareinline--c .sa-shico-btn { width: 2.5rem; height: 2.5rem; border-radius: 12px; color: var(--c); }
.sa-shareinline--c .sa-shico-btn:hover, .sa-shareinline--c .sa-shico-btn:focus-visible {
	background: color-mix(in srgb, var(--c) 20%, transparent); transform: translateY(-3px);
	box-shadow: 0 8px 16px color-mix(in srgb, var(--c) 28%, transparent); }
.sa-shareinline--c .sa-shico-btn:not(:last-child)::after { content: ""; position: absolute; right: -1px; top: 9px; bottom: 9px;
	width: 1px; background: rgba(255,255,255,.07); }
.sa-shareinline--c .sa-shico-btn:hover::after, .sa-shareinline--c .sa-shico-btn:hover + .sa-shico-btn::after { opacity: 0; }

/* copy-link confirmation swap (all styles) */
.sa-share-copy.is-copied { color: #fff; }
.sa-shareinline--a .sa-share-copy.is-copied, .sa-shareinline--c .sa-share-copy.is-copied { background: var(--sa-gradient); }
.sa-shareinline--b .sa-share-copy.is-copied { background: var(--sa-gradient); border-color: transparent; }
.sa-share-copy.is-copied .sa-shico-ic > .sa-shico:not(.sa-shico-check) { display: none; }
.sa-share-copy.is-copied .sa-shico-check { display: block; }

/* ── post-page share block (auto-injected into single-post content) ──────── */
.sa-shareblock { clear: both; width: 100%; margin: 2.2rem 0; padding: 1.3rem 1.35rem; border: 1px solid var(--sa-border); border-radius: 16px;
	background: linear-gradient(180deg, var(--sa-surface-1), var(--sa-bg-2));
	display: flex; flex-direction: column; align-items: center; text-align: center; }
.sa-shareblock__head { display: flex; align-items: center; gap: .5em; margin-bottom: .2rem;
	font-weight: 800; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sa-text-muted); }
.sa-shareblock__hb { width: 1em; height: 1em; color: var(--sa-heart); }
.sa-shareblock .sa-shareinline { margin-top: .7rem; }

/* ── delegated fallback menu (opened by card / hero triggers) ────────────────
   One clean, brand-coloured list. Each icon carries its network's hue at rest and
   fills on hover, matching the inline styles. */
.sa-sharemenu {
	position: fixed; z-index: 9999; min-width: 216px; padding: 8px; display: flex; flex-direction: column; gap: 2px;
	background: linear-gradient(180deg, var(--sa-surface-2), var(--sa-surface-1));
	border: 1px solid var(--sa-border-strong); border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.6);
}
.sa-sharemenu[hidden] { display: none; }
.sa-sharemenu__item {
	display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: .5rem .55rem;
	border: 0; background: none; border-radius: 11px; font: inherit; font-weight: 600; color: var(--sa-text);
	cursor: pointer; text-decoration: none; transition: background .16s ease;
}
.sa-sharemenu__ic {
	width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; display: grid; place-items: center;
	background: color-mix(in srgb, var(--c) 15%, transparent); color: var(--c);
	transition: background .16s, color .16s, transform .16s;
}
.sa-sharemenu__ic svg { width: 1.15rem; height: 1.15rem; }
.sa-sharemenu__item:hover { background: color-mix(in srgb, var(--c) 12%, transparent); }
.sa-sharemenu__item:hover .sa-sharemenu__ic { background: var(--c); color: #fff; transform: scale(1.05); }
.sa-sharemenu__item--x .sa-sharemenu__ic { color: var(--sa-text); }
.sa-sharemenu__item--x:hover .sa-sharemenu__ic { background: #1D1F22; color: #fff; }
.sa-sharemenu__item--copy:hover .sa-sharemenu__ic { background: var(--sa-gradient); }
.sa-sharemenu__sep { height: 1px; background: var(--sa-border); margin: 6px 8px; }

@media (prefers-reduced-motion: reduce) {
	.post-item, .post, .post-thumbnail img, .button, .more-link { transition: none; }
}

/* ==========================================================================
   Advertisement slots (Jannah e3lan + shining_ad_*) — dark-skin pass
   The wrappers come from TIELABS_ADVERTISMENT::get_ad(): `.stream-item-<pos>`
   around the slot, `.stream-title` label, `.stream-item-size` CLS box. Our
   own slots (ads.php) reuse `.stream-item` + `.sa-adslot`. Deliberately
   conservative: label + centring + spacing, nothing that could fight an ad
   network's own iframe sizing.
   ========================================================================== */
.stream-item,
[class*="stream-item-"] { text-align: center; }
.stream-item { margin: 26px auto; }
.stream-title {
	display: block;
	margin: 0 0 8px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--sa-text-dim);
	text-decoration: none;
}
a.stream-title:hover { color: var(--sa-text); }
.stream-item-size { margin-inline: auto; max-width: 100%; }
.stream-item img { max-width: 100%; height: auto; }

/* Our grid slots span the full card row (/news/, archive takeover). */
.sa-votes--grid > .sa-adslot { grid-column: 1 / -1; width: 100%; margin: 6px auto; }