/* ========================================================================
   SwiftPress — Core Stylesheet
   Global chrome, cards, article and prose. Loaded on every page.
   Front page, government orders and the quiz engine ship separately and
   are enqueued only where they are used.
   Mobile-first: base rules are mobile, min-width queries add up from there.
   ======================================================================== */

/* === RESET & BASE ====================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    line-height: var(--sp-leading-normal);
    /* `clip` contains wide injected ad markup the same way `hidden` did, but
       without creating a scroll container — which is what used to break
       position:sticky containment on the header and sidebar. */
    overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    font-family: var(--sp-font-display);
    font-size: var(--sp-fs-base);
    line-height: var(--sp-leading-normal);
    color: var(--sp-text);
    background: var(--sp-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
    min-height: 100vh;
}

/* --- Typography roles ---------------------------------------------------
   Reading face (Tiro Bangla) carries headings, prose and card titles.
   UI face (system sans) carries chrome: nav, buttons, meta, badges, times.
   Tiro Bangla ships a single 400 master, so anything bold in it is
   synthesized — keeping small UI text on the system stack is where that
   matters most, and it costs no extra bytes.
   ---------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
p, li, blockquote,
.sp-card__title,
.sp-card__excerpt,
.sp-hero-card__title,
.sp-article__title,
.sp-article__subtitle,
.sp-article__content,
.sp-author-bio__name,
.sp-author-bio__desc,
.sp-prose {
    font-family: var(--sp-font-display);
}

.sp-bengali body,
.sp-bengali h1, .sp-bengali h2, .sp-bengali h3,
.sp-bengali h4, .sp-bengali h5, .sp-bengali h6,
.sp-bengali p, .sp-bengali li,
.sp-bengali blockquote,
.sp-bengali .sp-prose,
.sp-bengali .sp-card__title,
.sp-bengali .sp-card__excerpt,
.sp-bengali .sp-article__title,
.sp-bengali .sp-article__subtitle,
.sp-bengali .sp-article__content {
    font-family: var(--sp-font-bengali);
}

/* Chrome runs on the UI face. */
.sp-nav__item a,
.sp-scroll-nav__list li a,
.sp-mobile-nav__list a,
.sp-follow-bar,
.sp-widget__title,
.sp-sb-widget__title,
.sp-breadcrumbs,
.sp-badge,
.sp-tag,
.sp-article__meta,
.sp-card__meta,
.sp-share-bottom,
.sp-pagination,
.sp-footer,
button,
input,
select,
textarea,
time {
    font-family: var(--sp-font-sans);
}

/* Headings — one scale, tight tracking, generous leading for Bengali. */
h1, h2, h3, h4, h5, h6 {
    line-height: var(--sp-leading-tight);
    letter-spacing: var(--sp-tracking-tight);
    font-weight: 700;
    color: var(--sp-text);
    text-wrap: wrap;
    text-wrap: pretty;
}

h1 {
    font-size: var(--sp-fs-3xl);
    /* Chrome's `pretty` optimises the whole block, so a two-line page title
       gets split into two balanced halves and the first line stops well short
       of the container. Page titles fill the line instead. */
    text-wrap: wrap;
    text-wrap-style: auto;
}
h2 { font-size: var(--sp-fs-2xl); }
h3 { font-size: var(--sp-fs-xl); }
h4 { font-size: var(--sp-fs-lg); }
h5 { font-size: var(--sp-fs-base); }
h6 { font-size: var(--sp-fs-md); }

.sp-bengali h1,
.sp-bengali h2,
.sp-bengali h3,
.sp-bengali h4,
.sp-bengali h5,
.sp-bengali h6 {
    /* Bengali conjuncts stack vertically; tight Latin leading clips them. */
    line-height: var(--sp-leading-snug);
    letter-spacing: 0;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* --- Optimiser-inserted <picture> wrappers -------------------------------
   LiteSpeed's AVIF/WebP rewriting turns

       <img class="sp-mega-hero__img">
   into
       <picture class="sp-mega-hero__img"><source …><img></picture>

   moving the theme's class onto a wrapper. <picture> is an inline box and
   is not a replaced element, so `object-fit` and `height:100%` silently stop
   working, and the real <img> falls back to `height:auto`. Every image the
   theme sizes by class was therefore letterboxing inside its container and
   showing the card background through the gap — a grey band down the side of
   the hero cards and along the bottom of the lead story.

   Scoped to wrappers carrying a theme class so that images inside article
   prose keep their intrinsic size and are never upscaled or cropped. Costs
   nothing when the optimiser is off: the selector simply matches nothing. */
picture[class*="sp-"] {
    display: block;
}

picture[class*="sp-"] > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

a {
    color: var(--sp-primary);
    text-decoration: none;
    transition: color var(--sp-transition);
}

a:hover {
    color: var(--sp-primary-hover);
}

/* Layout lists carry no markers. `.sp-prose` re-establishes real markers
   further down, so article body lists still render as lists.
   Note: `list-style:none` also drops list semantics in Safari/VoiceOver —
   the templates carry role="list" where the list semantics matter. */
ul, ol {
    list-style: none;
}

::selection {
    background: var(--sp-primary);
    color: var(--sp-text-inverse);
}

/* === UTILITIES === */
.sp-container {
    width: 100%;
    max-width: var(--sp-max-width);
    margin: 0 auto;
    padding: 0 var(--sp-gutter);
}

/* Mobile article gutter. This was `padding: 0 1px`, which ran Bengali body
   text edge-to-edge on the site's primary reading surface. */

.sp-highlight {
    color: var(--sp-primary);
    font-weight: 600;
}

/* === LAYOUT === */
.sp-main {
    min-height: 60vh;
    padding-top: 1.5rem;
    padding-bottom: 3rem;
}

.sp-layout {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .sp-layout {
        flex-direction: row;
        gap: 2.5rem;
    }
    .sp-content {
        flex: 1;
        min-width: 0;
        width: 100%;
    }
}

/* === UTILITIES === */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

/* Without this the skip link is focusable but invisible forever. */
.screen-reader-text:focus,
.screen-reader-text:focus-visible {
    background: var(--sp-surface);
    border-radius: var(--sp-radius);
    box-shadow: var(--sp-shadow-lg), var(--sp-focus-ring);
    clip: auto !important;
    clip-path: none;
    color: var(--sp-primary);
    display: block;
    font: 700 var(--sp-fs-md)/1 var(--sp-font-sans);
    height: auto;
    left: var(--sp-space-4);
    line-height: normal;
    padding: var(--sp-space-3) var(--sp-space-5);
    text-decoration: none;
    top: var(--sp-space-4);
    width: auto;
    z-index: var(--sp-z-modal);
}

/* Single, token-driven focus ring for every interactive element. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--sp-focus-color);
    outline-offset: 2px;
    border-radius: var(--sp-radius-sm);
}

/* === HEADER (extended) === */
.sp-header {
    background: var(--sp-surface);
    border-bottom: 1px solid var(--sp-border);
    position: sticky;
    top: 0;
    z-index: var(--sp-z-header);
    box-shadow: var(--sp-shadow-sm);
    height: var(--sp-header-height);
    transition: transform 0.3s ease;
}

/*
 * The 3px brand slab became a 2px gradient edge: the same brand signal with
 * far less visual weight, and it reads as an edge rather than a band. It sits
 * at bottom:-1px so it covers the 1px border rather than stacking on it.
 */
.sp-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--sp-fx-gradient);
    pointer-events: none;
}

.sp-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: var(--sp-max-width);
    margin: 0 auto;
    padding: 0 1rem;
}

.sp-header__brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.sp-header__logo img {
    height: 40px;
    width: auto;
}

.sp-header__name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--sp-text);
    line-height: 1.2;
}

.sp-header__name:hover {
    color: var(--sp-primary);
}

/*
 * Brand lockup — the inline SVG mark plus the wordmark, rendered by
 * swiftpress_logo() whenever no Custom Logo is set. The glyph inherits
 * `color` for its keypad dots, so the wrapper must set it.
 */
.sp-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--sp-text);
}

.sp-brand__glyph {
    display: block;
    flex: none;
}

.sp-brand__type {
    display: grid;
    gap: 2px;
}

.sp-brand__name {
    font-family: var(--sp-font-sans);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1;
    color: var(--sp-text);
    transition: color var(--sp-transition);
}

.sp-brand__sub {
    font-family: var(--sp-font-sans);
    font-size: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--sp-text-muted);
}

.sp-brand__name,
.sp-brand__sub {
    white-space: nowrap;
}

/*
 * Below 1024px .sp-header__brand is absolutely centred between the two icon
 * pairs, which leaves roughly 150px of clear space on a 360px screen. The
 * tagline alone is about that wide, so it only appears once the brand is back
 * in normal flow at the desktop breakpoint. The footer lockup always shows it.
 */
.sp-header .sp-brand__sub {
    display: none;
}

@media (min-width: 1024px) {
    .sp-header .sp-brand__sub {
        display: block;
    }
}

.sp-brand:hover .sp-brand__name {
    color: var(--sp-primary);
}

.sp-footer .sp-brand__name {
    color: var(--sp-footer-heading);
}

.sp-footer .sp-brand__sub {
    color: var(--sp-footer-muted);
}

.sp-header__tagline {
    font-size: 0.7rem;
    color: var(--sp-text-muted);
    display: none;
}

@media (min-width: 768px) {
    .sp-header__tagline {
        display: block;
    }
}

.sp-header__actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Nav */
.sp-nav {
    display: none;
}

@media (min-width: 1024px) {
    .sp-nav {
        display: flex;
        align-items: center;
        flex: 1;
        justify-content: center;
    }
    .sp-menu-toggle {
        display: none !important;
    }
}

.sp-nav__list {
    display: flex;
    gap: 0;
}

.sp-nav__item a {
    display: block;
    padding: 0.5rem 0.85rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--sp-text-secondary);
    transition: color var(--sp-transition);
    white-space: nowrap;
    position: relative;
}

.sp-nav__item a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--sp-fx-gradient);
    transition: color var(--sp-transition-slow), background-color var(--sp-transition-slow), border-color var(--sp-transition-slow), box-shadow var(--sp-transition-slow), transform var(--sp-transition-slow), opacity var(--sp-transition-slow);
    transform: translateX(-50%);
}

.sp-nav__item a:hover::after,
.sp-nav__item.current-menu-item a::after {
    width: 80%;
}

.sp-nav__item a:hover,
.sp-nav__item.current-menu-item a {
    color: var(--sp-primary);
}

/* Icon Buttons */
.sp-btn-icon {
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 0.5rem;
    min-width: 44px;
    min-height: 44px;
    border-radius: var(--sp-radius-md);
    color: var(--sp-text-secondary);
    transition: color var(--sp-transition), background-color var(--sp-transition), border-color var(--sp-transition), box-shadow var(--sp-transition), transform var(--sp-transition), opacity var(--sp-transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp-btn-icon:hover {
    background: var(--sp-surface-hover);
    border-color: var(--sp-border);
    color: var(--sp-text);
}

.sp-btn-icon svg {
    width: 22px;
    height: 22px;
}

/* Buttons */
.sp-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--sp-radius);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: color var(--sp-transition), background-color var(--sp-transition), border-color var(--sp-transition), box-shadow var(--sp-transition), transform var(--sp-transition), opacity var(--sp-transition);
    text-decoration: none;
}

.sp-btn--primary {
    background: var(--sp-fx-gradient);
    color: #fff;
    box-shadow: 0 4px 14px -6px rgba(var(--sp-fx-a2-rgb), 0.7);
}

.sp-btn--primary:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -8px rgba(var(--sp-fx-a2-rgb), 0.8);
}

/* === MOBILE NAV === */
.sp-mobile-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--sp-surface);
    z-index: var(--sp-z-overlay);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    padding: 5rem 1.5rem 2rem;
    overflow-y: auto;
}

.sp-mobile-nav.is-active {
    transform: translateX(0);
}

.sp-mobile-nav__list {
    padding: 0;
}

.sp-mobile-nav__list li {
    border-bottom: 1px solid var(--sp-border);
}

.sp-mobile-nav__list a {
    display: block;
    padding: 0.875rem 0;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--sp-text);
    transition: color var(--sp-transition);
}

.sp-mobile-nav__list a:hover {
    color: var(--sp-primary);
}

.sp-mobile-nav__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.sp-mobile-lang ul {
    display: flex;
    gap: 1rem;
}

.sp-mobile-lang a {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.875rem;
}

.sp-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: calc(var(--sp-z-overlay) - 1);
    opacity: 0;
    visibility: hidden;
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
    backdrop-filter: blur(4px);
}

.sp-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

/* === SEARCH OVERLAY === */
.sp-search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--sp-surface);
    z-index: calc(var(--sp-z-overlay) + 1);
    padding: 1rem;
    box-shadow: var(--sp-shadow-lg);
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 0.3s ease, visibility 0s 0.3s;
}

.sp-search-overlay.is-active {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.3s ease, visibility 0s 0s;
}

.sp-search-overlay__inner {
    display: flex;
    gap: 0.5rem;
    max-width: var(--sp-max-width);
    margin: 0 auto;
    align-items: center;
}

.sp-search-form {
    display: flex;
    flex: 1;
    gap: 0;
    background: var(--sp-bg);
    border-radius: var(--sp-radius-lg);
    overflow: hidden;
    border: 2px solid var(--sp-border);
    transition: border-color var(--sp-transition);
}

.sp-search-form:focus-within {
    border-color: var(--sp-primary);
}

.sp-search-form__input {
    flex: 1;
    padding: 0.75rem 1rem;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 1rem;
    color: var(--sp-text);
    outline: none;
}

.sp-search-form__input::placeholder {
    color: var(--sp-text-muted);
}

.sp-search-form__btn {
    padding: 0.75rem 1rem;
    background: var(--sp-primary);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background var(--sp-transition);
}

.sp-search-form__btn:hover {
    background: var(--sp-primary-hover);
}

/* Language Switcher */

.sp-lang-switch ul {
    display: flex;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.sp-lang-switch a {
    display: block;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--sp-text-muted);
    border: 1px solid var(--sp-border);
    border-radius: 4px;
    transition: color var(--sp-transition), background-color var(--sp-transition), border-color var(--sp-transition), box-shadow var(--sp-transition), transform var(--sp-transition), opacity var(--sp-transition);
}

.sp-lang-switch a:hover {
    color: var(--sp-primary);
    border-color: var(--sp-primary);
}

/* === HERO / FEATURED CARD === */
.sp-hero-card {
    margin-bottom: 2rem;
    border-radius: var(--sp-radius-lg);
    overflow: hidden;
    background: var(--sp-surface);
    box-shadow: var(--sp-shadow-md);
    transition: transform var(--sp-transition-slow), box-shadow var(--sp-transition-slow);
}

.sp-hero-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--sp-shadow-lg);
}

.sp-hero-card__link {
    display: block;
    position: relative;
    color: inherit;
}

.sp-hero-card__image {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.sp-hero-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.sp-hero-card:hover .sp-hero-card__img {
    transform: scale(1.03);
}

.sp-hero-card__img--placeholder {
    background: linear-gradient(135deg, var(--sp-primary), var(--sp-primary-hover));
}

.sp-hero-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.1) 40%, transparent 70%);
}

.sp-hero-card__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    color: #fff;
}

@media (min-width: 768px) {
    .sp-hero-card__content {
        padding: 2rem 2.5rem;
    }
}

.sp-hero-card__badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--sp-primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 4px;
    margin-bottom: 0.75rem;
}

.sp-hero-card__title {
    font-size: 1.25rem;
    font-weight: 700;
    font-family: var(--sp-font-display);
    line-height: 1.3;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (min-width: 768px) {
    .sp-hero-card__title {
        font-size: 1.75rem;
    }
}

/* === POST CARD === */
.sp-grid {
    display: grid;
    gap: var(--sp-gap);
    grid-template-columns: 1fr;
}

@media (min-width: 600px) {
    .sp-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .sp-grid--2 { grid-template-columns: repeat(2, 1fr); }
    .sp-grid--3 { grid-template-columns: repeat(3, 1fr); }
    .sp-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.sp-card {
    background: var(--sp-surface);
    border-radius: var(--sp-radius-lg);
    overflow: hidden;
    box-shadow: var(--sp-shadow);
    transition: transform var(--sp-transition-slow), box-shadow var(--sp-transition-slow);
}

.sp-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sp-shadow-md);
}

.sp-card__link {
    display: block;
    color: inherit;
    height: 100%;
}

.sp-card__thumbnail {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--sp-bg);
}

.sp-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.sp-card:hover .sp-card__img {
    transform: scale(1.05);
}

.sp-card__img--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sp-bg);
}

.sp-card__badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.2rem 0.6rem;
    background: var(--sp-primary);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 4px;
    z-index: 1;
}

.sp-card__body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sp-card__title {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--sp-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color var(--sp-transition);
}

.sp-card:hover .sp-card__title {
    color: var(--sp-primary);
}

.sp-card__excerpt {
    font-size: 0.8rem;
    color: var(--sp-text-secondary);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sp-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--sp-text-muted);
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid var(--sp-border);
}

.sp-card__date {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.sp-card__date svg {
    flex-shrink: 0;
}

/* === SECTION TITLES === */

/* === ARCHIVE HEADER === */
.sp-archive-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--sp-border);
}

.sp-archive-header__title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
}

.sp-archive-header__desc {
    font-size: 0.9rem;
    color: var(--sp-text-secondary);
    margin-top: 0.5rem;
    max-width: 600px;
}

/* === ARCHIVE AUTHOR INFO === */
.sp-archive-author {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.sp-archive-author__avatar {
    flex-shrink: 0;
}

.sp-archive-author__img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--sp-border);
}

.sp-archive-author__info {
    flex: 1;
}

.sp-archive-author__info .sp-archive-header__title {
    margin-bottom: 0.25rem;
}

/* === BREADCRUMBS === */
.sp-breadcrumbs {
    margin-bottom: 1rem;
    padding: 0.75rem 0;
    overflow: hidden;
}

.sp-breadcrumbs__list {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.8rem;
    color: var(--sp-text-muted);
    line-height: 1.6;
}

.sp-breadcrumbs__item {
    display: inline;
}

.sp-breadcrumbs__item [aria-current="page"] {
    display: inline;
    color: var(--sp-text);
    font-weight: 500;
}

.sp-breadcrumbs__item a {
    color: var(--sp-text-secondary);
    white-space: nowrap;
    text-decoration: none;
}

.sp-breadcrumbs__item a:hover {
    color: var(--sp-primary);
}

.sp-breadcrumbs__sep {
    display: inline-flex;
    align-items: center;
    color: var(--sp-text-muted);
    margin: 0 0.2rem;
    vertical-align: middle;
}

/* === SINGLE ARTICLE === */
.sp-article {
    background: var(--sp-surface);
    border-radius: var(--sp-radius-md);
    padding: 1rem;
    box-shadow: var(--sp-shadow);
}

@media (min-width: 768px) {
    .sp-article {
        border-radius: var(--sp-radius-lg);
        padding: 2rem 2.5rem;
    }
}

.sp-article__cats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.sp-article__cat-badge {
    display: inline-block;
    padding: 0.2rem 0.75rem;
    background: var(--sp-primary-light);
    color: var(--sp-primary-dark);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 4px;
    transition: color var(--sp-transition), background-color var(--sp-transition), border-color var(--sp-transition), box-shadow var(--sp-transition), transform var(--sp-transition), opacity var(--sp-transition);
}

.sp-article__cat-badge:hover {
    background: var(--sp-primary);
    color: #fff;
}

.sp-article__title {
    font-size: 1.625rem;
    font-weight: 800;
    font-family: var(--sp-font-display);
    line-height: 1.2;
    color: var(--sp-text);
    margin-bottom: 0.75rem;
    /* Greedy wrapping: the title should run to the edge of the card before it
       breaks, not sit as two short balanced lines. See the h1 rule above. */
    text-wrap: wrap;
    text-wrap-style: auto;
}

@media (min-width: 768px) {
    .sp-article__title {
        font-size: 2.125rem;
    }
}

.sp-article__subtitle {
    font-size: 1rem;
    color: var(--sp-text-secondary);
    line-height: 1.6;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: var(--sp-bg);
    border-left: 3px solid var(--sp-primary);
    border-radius: 0 var(--sp-radius) var(--sp-radius) 0;
    font-style: italic;
}

.sp-article__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    margin-bottom: 1.5rem;
    border-top: 1px solid var(--sp-border);
    border-bottom: 1px solid var(--sp-border);
}

.sp-article__author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sp-article__avatar {
    border-radius: 50%;
    width: 36px;
    height: 36px;
}

.sp-article__author-name {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--sp-text);
}

.sp-article__date-reading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.5rem;
    row-gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--sp-text-muted);
}

.sp-article__meta-item {
    display: inline-flex;
    align-items: center;
    /* This is a flex container, so the whitespace text node between a label
       and its <time> child is collapsed away — "Last updated:3 September"
       rather than "Last updated: 3 September". The gap restores that space
       for every label/value pair in the meta line. */
    gap: 0.3em;
    white-space: nowrap;
}

.sp-article__meta-item:not(:last-child)::after {
    content: "·";
    margin-left: 0.5rem;
    color: var(--sp-text-muted);
}

@media (max-width: 480px) {
    .sp-article__date-reading {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.15rem;
    }
    .sp-article__meta-item:not(:last-child)::after {
        display: none;
    }
}

/* Share Buttons */
.sp-share {
    display: flex;
    gap: 0.4rem;
}

/* Featured Image — single source of truth is the block further down. */
.sp-article__featured-image figcaption {
    font-size: 0.75rem;
    color: var(--sp-text-muted);
    padding: 0.5rem 0;
    text-align: center;
    font-style: italic;
}

/* Tags */

.sp-article__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sp-tag {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    background: var(--sp-bg);
    color: var(--sp-text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 2rem;
    border: 1px solid var(--sp-border);
    transition: color var(--sp-transition), background-color var(--sp-transition), border-color var(--sp-transition), box-shadow var(--sp-transition), transform var(--sp-transition), opacity var(--sp-transition);
}

.sp-tag:hover {
    border-color: var(--sp-primary);
    color: var(--sp-primary);
    background: var(--sp-primary-light);
}

/* === PROSE (Article Content Typography) ================================
   The reading surface. Bengali needs more leading than Latin because
   conjuncts and matras stack above and below the baseline, so the body
   runs at --sp-leading-relaxed rather than a typical 1.6.
   ====================================================================== */
.sp-prose {
    font-size: var(--sp-fs-lg);
    line-height: var(--sp-leading-relaxed);
    color: var(--sp-text);
    /* Line length is governed by --sp-content-width on the column, not by a
       max-width here: capping .sp-prose at a ch measure inside the 800px
       column would leave the text visibly off-centre. */
    overflow-wrap: break-word;
}

/* Headings inside the article body get clear space above and tight space
   below, so each one binds visually to the text it introduces. */
.sp-prose h2 {
    font-size: var(--sp-fs-2xl);
    font-weight: 700;
    margin: var(--sp-space-8) 0 var(--sp-space-3);
    line-height: var(--sp-leading-snug);
    letter-spacing: var(--sp-tracking-tight);
    color: var(--sp-text);
    scroll-margin-top: calc(var(--sp-header-height) + var(--sp-space-4));
}

.sp-prose h3 {
    font-size: var(--sp-fs-xl);
    font-weight: 700;
    margin: var(--sp-space-7) 0 var(--sp-space-2);
    line-height: var(--sp-leading-snug);
    scroll-margin-top: calc(var(--sp-header-height) + var(--sp-space-4));
}

.sp-prose h4 {
    font-size: var(--sp-fs-lg);
    font-weight: 700;
    margin: var(--sp-space-6) 0 var(--sp-space-2);
    scroll-margin-top: calc(var(--sp-header-height) + var(--sp-space-4));
}

.sp-prose h2:first-child,
.sp-prose h3:first-child,
.sp-prose h4:first-child {
    margin-top: 0;
}

.sp-prose p {
    margin-bottom: var(--sp-space-5);
}

.sp-prose > p:last-child {
    margin-bottom: 0;
}

/* Links in body copy are underlined — colour alone is not enough to mark
   a link, and this is the one place readers scan for sources. */
.sp-prose a {
    color: var(--sp-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    text-decoration-color: rgba(var(--sp-primary-rgb), 0.4);
    transition: text-decoration-color var(--sp-transition), color var(--sp-transition);
}

.sp-prose a:hover {
    color: var(--sp-primary-hover);
    text-decoration-color: currentColor;
}

.sp-prose img,
.sp-prose figure {
    margin: var(--sp-space-6) 0;
    border-radius: var(--sp-radius-md);
}

.sp-prose figure img {
    margin: 0;
}

.sp-prose figcaption {
    font-family: var(--sp-font-sans);
    font-size: var(--sp-fs-sm);
    color: var(--sp-text-muted);
    text-align: center;
    padding-top: var(--sp-space-2);
}

.sp-prose hr {
    border: 0;
    border-top: 1px solid var(--sp-border);
    margin: var(--sp-space-8) 0;
}

.sp-prose ul, .sp-prose ol {
    margin-bottom: var(--sp-space-5);
    padding-left: var(--sp-space-6);
}

.sp-prose ul { list-style: disc; }
.sp-prose ol { list-style: decimal; }

.sp-prose li {
    margin-bottom: 0.35rem;
}

.sp-prose blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--sp-primary);
    background: var(--sp-bg);
    border-radius: 0 var(--sp-radius) var(--sp-radius) 0;
    font-style: italic;
    color: var(--sp-text-secondary);
}

.sp-prose pre {
    background: var(--sp-bg);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    padding: 1rem;
    overflow-x: auto;
    font-family: var(--sp-font-mono);
    font-size: 0.85rem;
    margin-bottom: 1.25rem;
}

.sp-prose code {
    font-family: var(--sp-font-mono);
    font-size: 0.85em;
    background: var(--sp-bg);
    padding: 0.15rem 0.35rem;
    border-radius: 3px;
}

.sp-prose pre code {
    background: none;
    padding: 0;
}

.sp-prose img {
    border-radius: var(--sp-radius);
    margin: 1.5rem 0;
}

.sp-prose table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
}

.sp-prose th,
.sp-prose td {
    padding: 0.75rem;
    border: 1px solid var(--sp-border);
    text-align: left;
}

.sp-prose th {
    background: var(--sp-bg);
    font-weight: 600;
}

.sp-prose a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* === AI HIGHLIGHTS BOX === */
.sp-highlights {
    background: linear-gradient(135deg, var(--sp-primary-light) 0%, var(--sp-surface) 100%);
    border: 1px solid rgba(var(--sp-primary-rgb), 0.2);
    border-radius: var(--sp-radius-lg);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
}

.sp-highlights::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--sp-primary), #FF6B6B, var(--sp-primary));
    background-size: 200% 100%;
    /* Was `infinite`, which repainted forever even off-screen. Runs twice
       on reveal, then settles. */
    animation: sp-shimmer 3s ease-in-out 2;
}

@keyframes sp-shimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.sp-highlights__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.sp-highlights__title-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sp-highlights__icon {
    color: var(--sp-primary);
    display: flex;
}

.sp-highlights__title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--sp-text);
    margin: 0;
}

.sp-highlights__toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    color: var(--sp-text-muted);
    transition: transform var(--sp-transition);
}

.sp-highlights__toggle[aria-expanded="false"] {
    transform: rotate(180deg);
}

.sp-highlights__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sp-highlights__list.is-collapsed {
    display: none;
}

.sp-highlights__item {
    position: relative;
    padding-left: 1.25rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--sp-text-secondary);
}

.sp-highlights__item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 6px;
    height: 6px;
    background: var(--sp-primary);
    border-radius: 50%;
}

/* === WIDGETS (classes emitted by register_sidebar) ===================== */
.sp-widget {
    background: var(--sp-surface);
    border-radius: var(--sp-radius-lg);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--sp-shadow-sm);
}

.sp-widget__title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--sp-text);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--sp-primary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.sp-widget ul {
    list-style: none;
    padding: 0;
}

.sp-widget li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--sp-border);
    font-size: 0.875rem;
}

.sp-widget li:last-child {
    border-bottom: none;
}

.sp-widget a {
    color: var(--sp-text-secondary);
    transition: color var(--sp-transition);
}

.sp-widget a:hover {
    color: var(--sp-primary);
}

/* === ADS === */
.sp-ad {
    text-align: center;
    overflow: hidden;
    margin: var(--sp-space-4) 0;
    display: block;
    /* Reserved per format below. A blanket 100px left ~150px of shift on
       mobile in-article units, which is where most of the CLS came from. */
    min-height: var(--sp-ad-h-banner);
    width: 100%;
    contain: layout style;
}

.sp-ad--in-article,
.sp-ad--after-post,
.sp-ad--between_posts,
.sp-ad--grid-full {
    min-height: var(--sp-ad-h-inline);
}

.sp-ad--sidebar {
    min-height: var(--sp-ad-h-sidebar);
}

@media (min-width: 768px) {
    .sp-ad--in-article,
    .sp-ad--after-post,
    .sp-ad--between_posts,
    .sp-ad--grid-full {
        min-height: var(--sp-ad-h-sidebar);
    }
}

.sp-ad__label {
    display: block;
    font-size: 0.6rem;
    text-transform: uppercase;
    color: var(--sp-text-muted);
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
}

.sp-ad--center {
    min-height: 100px;
    contain: layout style;
}

.sp-ad--sidebar {
    margin-bottom: 1.25rem;
    min-height: 250px;
}

.sp-ad--in-article {
    margin: 1.5rem -0.5rem;
    padding: 1rem 0;
    border-top: 1px solid var(--sp-border);
    border-bottom: 1px solid var(--sp-border);
    min-height: 280px;
    contain: layout style;
}

.sp-ad--grid-full {
    grid-column: 1 / -1;
    padding: 1rem 0;
    min-height: 280px;
    contain: layout style;
}

.sp-ad--after-post {
    margin-top: 2rem;
    padding: 1rem;
    background: var(--sp-bg);
    border-radius: var(--sp-radius);
    min-height: 280px;
    contain: layout style;
}

.sp-ad--full-width {
    padding: 1rem;
    background: var(--sp-bg);
    contain: layout style;
}

/* AdSense container — prevent CLS from late-loading ads */
.sp-ad ins.adsbygoogle {
    min-height: inherit;
}

/* === PAGINATION === */
.sp-pagination {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--sp-border);
}

.sp-pagination .nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.sp-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 0.5rem;
    background: var(--sp-surface);
    color: var(--sp-text-secondary);
    border-radius: var(--sp-radius);
    font-size: 0.875rem;
    font-weight: 500;
    transition: color var(--sp-transition), background-color var(--sp-transition), border-color var(--sp-transition), box-shadow var(--sp-transition), transform var(--sp-transition), opacity var(--sp-transition);
    border: 1px solid var(--sp-border);
}

.sp-pagination .page-numbers:hover {
    border-color: var(--sp-primary);
    color: var(--sp-primary);
}

.sp-pagination .page-numbers.current {
    background: var(--sp-primary);
    color: #fff;
    border-color: var(--sp-primary);
}

.sp-pagination .prev,
.sp-pagination .next {
    gap: 0.25rem;
    font-weight: 600;
}

.sp-pagination .prev svg,
.sp-pagination .next svg {
    flex-shrink: 0;
}

/* === RELATED POSTS === */
.sp-related {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--sp-border);
}

/* === COMMENTS === */
.sp-comments {
    margin-top: 2.5rem;
    background: var(--sp-surface);
    border-radius: var(--sp-radius-lg);
    padding: 1.5rem;
    box-shadow: var(--sp-shadow-sm);
}

@media (min-width: 768px) {
    .sp-comments {
        padding: 2rem;
    }
}

.sp-comments__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--sp-primary);
}

.sp-comments__list {
    list-style: none;
    padding: 0;
}

.sp-comment {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--sp-border);
}

.sp-comment:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.sp-comment__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.sp-comment__avatar img {
    border-radius: 50%;
}

.sp-comment__author {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--sp-text);
}

.sp-comment__author a {
    color: var(--sp-text);
}

.sp-comment__date {
    font-size: 0.75rem;
    color: var(--sp-text-muted);
}

.sp-comment__content {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--sp-text-secondary);
}

.sp-comment__content p {
    margin-bottom: 0.5rem;
}

.sp-comment__footer {
    margin-top: 0.5rem;
    display: flex;
    gap: 1rem;
}

.sp-comment__reply a,
.sp-comment__edit a {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sp-comment__moderation {
    font-size: 0.8rem;
    font-style: italic;
    color: var(--sp-warning);
    margin-bottom: 0.5rem;
}

.sp-comments__closed {
    font-style: italic;
    color: var(--sp-text-muted);
}

/* Comment Form */
.sp-comment-form .comment-form-comment,
.sp-comment-form .sp-comment-form__field {
    margin-bottom: 1rem;
}

.sp-comment-form textarea,
.sp-comment-form input[type="text"],
.sp-comment-form input[type="email"],
.sp-comment-form input[type="url"] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--sp-border);
    border-radius: var(--sp-radius);
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--sp-text);
    background: var(--sp-bg);
    transition: border-color var(--sp-transition);
    resize: vertical;
}

.sp-comment-form textarea:focus,
.sp-comment-form input:focus {
    outline: none;
    border-color: var(--sp-primary);
}

.sp-comment-form .form-submit input {
    background: var(--sp-primary);
    color: #fff;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: var(--sp-radius);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--sp-transition);
}

.sp-comment-form .form-submit input:hover {
    background: var(--sp-primary-hover);
}

.sp-comment-form .reply-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

/* Nested comments */
.sp-comments__list .children {
    list-style: none;
    padding-left: 1.5rem;
    margin-top: 1rem;
    border-left: 2px solid var(--sp-border);
}

@media (min-width: 768px) {
    .sp-comments__list .children {
        padding-left: 2.5rem;
    }
}

.sp-comments__nav {
    display: flex;
    justify-content: space-between;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--sp-border);
}

/* === FOOTER === */
.sp-footer {
    background: var(--sp-footer-bg);
    color: var(--sp-footer-text);
    margin-top: 3rem;
    position: relative;
}

/* Gradient hairline along the top edge, mirroring the header's. */
.sp-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--sp-fx-gradient);
    pointer-events: none;
}

.sp-footer__top {
    padding: 3rem 0 2rem;
}

.sp-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 600px) {
    .sp-footer__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .sp-footer__grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }
}

.sp-footer__logo img {
    height: 36px;
    width: auto;
    margin-bottom: 1rem;
}

.sp-footer__brand {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--sp-footer-heading);
    margin-bottom: 0.75rem;
}

.sp-footer__about {
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--sp-footer-muted);
    margin-bottom: 1.25rem;
}

.sp-footer .sp-widget__title {
    color: var(--sp-footer-heading);
    border-bottom-color: var(--sp-primary);
}

.sp-footer .sp-widget {
    background: transparent;
    padding: 0;
    box-shadow: none;
}

.sp-footer .sp-widget a {
    color: var(--sp-footer-muted);
}

.sp-footer .sp-widget a:hover {
    color: var(--sp-footer-heading);
}

.sp-footer .sp-widget li {
    border-bottom-color: var(--sp-footer-fill);
}

.sp-footer__links {
    list-style: none;
    padding: 0;
}

.sp-footer__links li {
    padding: 0.4rem 0;
}

.sp-footer__links a {
    color: var(--sp-footer-muted);
    font-size: 0.85rem;
    transition: color var(--sp-transition);
}

.sp-footer__links a:hover {
    color: var(--sp-footer-heading);
}

/* Social */
.sp-social {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.sp-social__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--sp-footer-fill);
    color: var(--sp-footer-text);
    transition: color var(--sp-transition), background-color var(--sp-transition), border-color var(--sp-transition), box-shadow var(--sp-transition), transform var(--sp-transition), opacity var(--sp-transition);
}

.sp-social__link:hover {
    background: var(--sp-primary);
    color: var(--sp-footer-heading);
    transform: translateY(-2px);
}

.sp-social__link svg,
.sp-social__link img {
    width: 18px;
    height: 18px;
}

/* Footer Follow Us — 2-column labeled grid */
.sp-social--grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem 0.75rem;
}

.sp-social__link--labeled {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: auto;
    height: auto;
    border-radius: var(--sp-radius);
    padding: 0.45rem 0.6rem;
    background: var(--sp-footer-fill-2);
    color: var(--sp-footer-muted);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    transition: color var(--sp-transition), background-color var(--sp-transition), border-color var(--sp-transition), box-shadow var(--sp-transition), transform var(--sp-transition), opacity var(--sp-transition);
}

.sp-social__link--labeled:hover {
    background: var(--sp-primary);
    color: var(--sp-footer-heading);
    transform: translateY(-1px);
}

.sp-social__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sp-social__icon svg,
.sp-social__icon img {
    width: 16px;
    height: 16px;
}

.sp-social__name {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Footer about static text */
.sp-footer__about--static {
    font-size: 0.82rem;
    line-height: 1.75;
    color: var(--sp-footer-muted);
    margin-bottom: 0;
}

/* Footer Bottom */
.sp-footer__bottom {
    padding: 1.25rem 0;
    border-top: 1px solid var(--sp-footer-fill);
}

.sp-footer__bottom-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--sp-footer-muted);
}

@media (min-width: 768px) {
    .sp-footer__bottom-inner {
        flex-direction: row;
        justify-content: space-between;
    }
}

/* === BACK TO TOP === */
.sp-back-to-top {
    position: fixed;
    bottom: 2rem;
    /* Use right with an explicit inset so it never drifts outside the viewport
       even when AdSense short-circuits the layout width on mobile */
    right: 1rem;
    left: auto;
    width: 42px;
    height: 42px;
    background: var(--sp-primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--sp-shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity var(--sp-transition-slow), visibility var(--sp-transition-slow),
                transform var(--sp-transition-slow);
    /* Keep the button in its own stacking context away from overflow issues */
    z-index: 9999;
    /* Prevent the button itself from ever causing horizontal scroll */
    max-width: 42px;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .sp-back-to-top {
        right: 2rem;
    }
}

.sp-back-to-top:hover {
    background: var(--sp-primary-hover);
    color: #fff;
    transform: translateY(-2px);
}

.sp-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* === 404 === */
.sp-404 {
    text-align: center;
    padding: 4rem 1rem;
    max-width: 500px;
    margin: 0 auto;
}

.sp-404__icon {
    margin-bottom: 1.5rem;
    opacity: 0.3;
}

.sp-404__title {
    font-size: 5rem;
    font-weight: 900;
    color: var(--sp-primary);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.sp-404__text {
    font-size: 1.1rem;
    color: var(--sp-text-secondary);
    margin-bottom: 2rem;
}

.sp-404__search {
    margin-bottom: 1.5rem;
}

/* === NO RESULTS === */
.sp-no-results {
    text-align: center;
    padding: 3rem 1rem;
}

.sp-no-results__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.sp-no-results__text {
    color: var(--sp-text-secondary);
    margin-bottom: 1.5rem;
}

.sp-no-results .sp-search-form {
    max-width: 400px;
    margin: 0 auto;
}

/* === PAGE === */
.sp-page {
    background: var(--sp-surface);
    border-radius: var(--sp-radius-lg);
    padding: 1.5rem;
    box-shadow: var(--sp-shadow);
}

@media (min-width: 768px) {
    .sp-page {
        padding: 2rem 2.5rem;
    }
}

.sp-page__title {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .sp-page__title {
        font-size: 2.25rem;
    }
}

.sp-page__thumbnail {
    border-radius: var(--sp-radius);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.sp-page-links {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--sp-border);
    font-size: 0.9rem;
}

/* === PRINT === */
@media print {
    .sp-header,
    .sp-sidebar,
    .sp-footer,
    .sp-share,
    .sp-pagination,
    .sp-related,
    .sp-ad,
    .sp-back-to-top,
    .sp-breadcrumbs {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
        font-size: 12pt;
    }

    .sp-article,
    .sp-page {
        box-shadow: none;
        padding: 0;
    }

    a {
        color: #000;
        text-decoration: underline;
    }

    a::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
    }
}

/* === AUTHOR BIO (Compact — photo float left) === */
.sp-author-bio {
    padding: 1rem 1.25rem;
    margin-top: 1.5rem;
    background: var(--sp-bg);
    border-radius: var(--sp-radius);
    border: 1px solid var(--sp-border);
}

/* Clearfix */
.sp-author-bio::after {
    content: "";
    display: table;
    clear: both;
}

.sp-author-bio__avatar {
    float: left;
    margin-right: 1rem;
    margin-bottom: 0.5rem;
    line-height: 0;
}

.sp-author-bio__img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--sp-border);
    transition: border-color var(--sp-transition);
}

.sp-author-bio:hover .sp-author-bio__img {
    border-color: var(--sp-primary);
}



.sp-author-bio__name {
    font-size: 0.85rem;
    font-weight: 700;
    margin: 0 0 0.2rem;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

/* Verified badge (blue tick) */
.sp-verified-badge {
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
}

.sp-author-bio__name a {
    color: var(--sp-text);
    transition: color var(--sp-transition);
}

.sp-author-bio__name a:hover {
    color: var(--sp-primary);
}

.sp-author-bio__desc {
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--sp-text-muted);
    margin-bottom: 0.25rem;
}

.sp-author-bio__more {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--sp-primary);
    transition: gap var(--sp-transition);
}

.sp-author-bio__more:hover {
    gap: 0.4rem;
    color: var(--sp-primary-hover);
}

.sp-author-bio__more svg {
    flex-shrink: 0;
}

/* === YOUTUBE SHORTS SECTION (after author bio) === */
.sp-yt-shorts {
    margin-top: 1.5rem;
    padding: 1.25rem;
    background: var(--sp-surface);
    border-radius: var(--sp-radius-lg);
    border: 1px solid var(--sp-border);
}

.sp-yt-shorts__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    gap: 0.75rem;
}

.sp-yt-shorts__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--sp-text);
    margin: 0;
}

.sp-yt-shorts__title a {
    color: var(--sp-text);
    text-decoration: none;
    transition: color 0.15s ease;
}

.sp-yt-shorts__title a:hover {
    color: var(--sp-primary);
}

.sp-yt-shorts__accent {
    display: inline-block;
    width: 4px;
    height: 1.25em;
    background: var(--sp-primary);
    border-radius: 2px;
    flex-shrink: 0;
}

.sp-yt-shorts__subscribe {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 1rem;
    background: #0f0f0f;
    color: #fff;
    border-radius: 50px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    flex-shrink: 0;
}

.sp-yt-shorts__subscribe:hover {
    background: #272727;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 3px 12px rgba(0,0,0,0.2);
}

[data-theme="dark"] .sp-yt-shorts__subscribe {
    background: #fff;
    color: #0f0f0f;
}

[data-theme="dark"] .sp-yt-shorts__subscribe:hover {
    background: #e0e0e0;
    color: #0f0f0f;
}

.sp-yt-shorts__yt-icon {
    flex-shrink: 0;
}

.sp-yt-shorts__scroll {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.25rem;
}

.sp-yt-shorts__scroll::-webkit-scrollbar {
    display: none;
}

.sp-yt-shorts__card {
    display: flex;
    flex-direction: column;
    min-width: 145px;
    max-width: 170px;
    flex-shrink: 0;
    scroll-snap-align: start;
    text-decoration: none;
    color: inherit;
    border-radius: var(--sp-radius-lg);
    overflow: hidden;
    background: var(--sp-bg);
    border: 1px solid var(--sp-border);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.sp-yt-shorts__card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sp-shadow-md);
    border-color: var(--sp-primary);
}

.sp-yt-shorts__thumb {
    position: relative;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    background: #000;
}

.sp-yt-shorts__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sp-yt-shorts__card:hover .sp-yt-shorts__thumb img {
    transform: scale(1.06);
}

.sp-yt-shorts__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}

.sp-yt-shorts__card:hover .sp-yt-shorts__play {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05);
}

.sp-yt-shorts__shorts-badge {
    position: absolute;
    bottom: 6px;
    left: 6px;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    backdrop-filter: blur(4px);
}

.sp-yt-shorts__card-title {
    padding: 0.5rem 0.6rem 0.65rem;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--sp-text);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* — Responsive: Mobile */
@media (max-width: 767px) {
    .sp-yt-shorts {
        padding: 0.85rem;
        margin-top: 1rem;
        border-radius: var(--sp-radius);
    }

    .sp-yt-shorts__header {
        margin-bottom: 0.75rem;
    }

    .sp-yt-shorts__title {
        font-size: 0.92rem;
    }

    .sp-yt-shorts__subscribe {
        padding: 0.35rem 0.75rem;
        font-size: 0.75rem;
    }

    .sp-yt-shorts__card {
        min-width: 120px;
        max-width: 140px;
    }

    .sp-yt-shorts__card-title {
        padding: 0.4rem 0.5rem 0.5rem;
        font-size: 0.68rem;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .sp-yt-shorts__play {
        width: 38px;
        height: 38px;
    }

    .sp-yt-shorts__play svg {
        width: 28px;
        height: 28px;
    }
}

/* — Dark mode */

/* === FOLLOW BAR (below featured image — reference style) === */
/* === GOOGLE NEWS CTA BUTTON === */
.sp-gnews-cta-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.sp-gnews-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: #1a1a1a;
    color: #fff;
    padding: 0.55rem 1.2rem;
    border-radius: 2rem;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
    transition: background var(--sp-transition), transform var(--sp-transition);
    white-space: nowrap;
}

.sp-gnews-cta:hover {
    background: #333;
    color: #fff;
    transform: translateY(-1px);
}

.sp-gnews-cta__logo {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.sp-gnews-cta__text {
    color: #fff;
}

.sp-gnews-cta__text strong {
    font-weight: 700;
}

[data-theme="dark"] .sp-gnews-cta {
    background: #2a2a2a;
    border: 1px solid var(--sp-border);
}

[data-theme="dark"] .sp-gnews-cta:hover {
    background: #3a3a3a;
}

.sp-follow-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    margin-bottom: 1.25rem;
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: 2rem;
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.sp-follow-bar__gnews {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #1a73e8;
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    transition: opacity var(--sp-transition);
}

.sp-follow-bar__gnews:hover {
    opacity: 0.8;
    color: #1a73e8;
}

.sp-follow-bar__gnews img {
    width: 20px;
    height: 20px;
}

.sp-follow-bar__gnews-text {
    color: #1a73e8;
    font-weight: 700;
}

.sp-follow-bar__follow-text {
    color: #1a73e8;
    font-weight: 600;
}

.sp-follow-bar__sep {
    color: var(--sp-border-strong);
    font-size: 1rem;
    line-height: 1;
    user-select: none;
}

.sp-follow-bar__icons {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.sp-follow-bar__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #fff;
    transition: transform var(--sp-transition), opacity var(--sp-transition);
}

.sp-follow-bar__icon:hover {
    transform: scale(1.1);
    color: #fff;
}

.sp-follow-bar__icon--fb { background: var(--sp-c-facebook); }
.sp-follow-bar__icon--wa { background: var(--sp-c-whatsapp); }
.sp-follow-bar__icon--yt { background: var(--sp-c-youtube); }
.sp-follow-bar__icon--tg { background: var(--sp-c-telegram); }
.sp-follow-bar__icon--li { background: var(--sp-c-linkedin); }

/* === SHARE BOTTOM (end of article) === */
.sp-share-bottom {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--sp-border);
}

.sp-share-bottom__label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--sp-text-muted);
    white-space: nowrap;
}

.sp-share-bottom__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* Share button base */
.sp-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
    flex-shrink: 0;
    position: relative;
}

.sp-share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.sp-share-btn:active {
    transform: translateY(0);
}

/* Brand colors */
.sp-share-btn--fb      { background: var(--sp-c-facebook); }
.sp-share-btn--tw      { background: #111; }
.sp-share-btn--wa      { background: var(--sp-c-whatsapp); }
.sp-share-btn--tg      { background: var(--sp-c-telegram); }
.sp-share-btn--li      { background: var(--sp-c-linkedin); }
.sp-share-btn--reddit  { background: var(--sp-c-reddit); }
.sp-share-btn--pin     { background: var(--sp-c-pinterest); }
.sp-share-btn--email   { background: var(--sp-text-secondary); }
.sp-share-btn--copy    { background: var(--sp-text-muted); }

/* Hover brightening */
.sp-share-btn--fb:hover      { background: #1565d8; }
.sp-share-btn--tw:hover      { background: #333; }
.sp-share-btn--wa:hover      { background: #1ebd5a; }
.sp-share-btn--tg:hover      { background: #1e92cc; }
.sp-share-btn--li:hover      { background: #084d94; }
.sp-share-btn--reddit:hover  { background: #e03d00; }
.sp-share-btn--pin:hover     { background: #c8001f; }
.sp-share-btn--email:hover   { background: var(--sp-text); }
.sp-share-btn--copy:hover    { background: var(--sp-text-secondary); }

/* Copy link success state */
.sp-share-btn--copy.is-copied {
    background: #10b981;
}

/* Tooltip for copy */
.sp-share-btn--copy 

.sp-share-btn--copy.is-copied 

[data-theme="dark"] .sp-share-btn--tw { background: #e7e9ea; color: #000; }
[data-theme="dark"] .sp-share-btn--tw:hover { background: #d6d9db; }
[data-theme="dark"] .sp-share-btn--email { background: var(--sp-text-muted); }
[data-theme="dark"] .sp-share-btn--copy { background: var(--sp-border-strong, #555); }

/* === SINGLE POST — FULL WIDTH === */
.sp-layout--full {
    display: block;
}

.sp-layout--full .sp-content {
    max-width: var(--sp-content-width);
    margin: 0 auto;
}

/* === INFINITE SCROLL — SINGLE POST === */
.sp-infinite-post {
    position: relative;
}

/* Up Next — thick line divider (per reference image) */
.sp-infinite-post__divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 2.5rem 0 2rem;
}

.sp-infinite-post__divider::before,
.sp-infinite-post__divider::after {
    content: '';
    flex: 1;
    height: 2px;
    background: var(--sp-text);
}

.sp-infinite-post__divider::before {
    flex: 0 0 24px;
}

.sp-infinite-post__divider-text {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--sp-text);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
}

/* Load trigger — invisible sentinel at 80% of article height */
.sp-load-trigger {
    position: absolute;
    bottom: 20%;
    left: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

/* Loader animation */
.sp-infinite-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2.5rem 1rem;
    color: var(--sp-text-muted);
    font-size: 0.85rem;
    font-weight: 500;
}

.sp-infinite-loader__spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--sp-border);
    border-top-color: var(--sp-primary);
    border-radius: 50%;
    animation: sp-spin 0.7s linear infinite;
}

@keyframes sp-spin {
    to { transform: rotate(360deg); }
}

/* === MOBILE SCROLL NAV (below header) === */
.sp-scroll-nav {
    background: var(--sp-surface);
    border-bottom: 1px solid var(--sp-border);
    overflow: hidden;
    /* Deliberately NOT sticky.
       Two stacked sticky bars (60px header + 42px rail) ate a sixth of a
       phone viewport, and because the header hides on scroll-down the rail
       was left floating with a gap above it, painting over the lead story's
       headline. It is a category shortcut, not a primary control, so it
       scrolls away with the rest of the page. */
    position: relative;
    z-index: calc(var(--sp-z-header) - 1);
}

@media (min-width: 1024px) {
    .sp-scroll-nav {
        display: none !important;
    }
}

.sp-scroll-nav__inner {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.sp-scroll-nav__inner::-webkit-scrollbar {
    display: none;
}

.sp-scroll-nav__list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0;
    padding: 0 0.5rem;
    margin: 0;
    list-style: none;
    white-space: nowrap;
    width: max-content;
    min-width: 100%;
}

.sp-scroll-nav__list li {
    display: inline-flex !important;
    align-items: center;
    flex-shrink: 0;
}

/* Pipe separator between items */
.sp-scroll-nav__list li + li::before {
    content: '|';
    color: var(--sp-border-strong);
    font-size: 0.75rem;
    padding: 0 0.15rem;
    line-height: 1;
}

.sp-scroll-nav__list li a {
    display: block;
    padding: 0.6rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--sp-text-secondary);
    transition: color var(--sp-transition);
    white-space: nowrap;
}

.sp-scroll-nav__list li a:hover,
.sp-scroll-nav__list li.current-menu-item a {
    color: var(--sp-primary);
}

/* === LANGUAGE SWITCHER ==================================================
   A single icon button, identical in size to the dark-mode and search
   toggles it sits with — .sp-btn-icon supplies the 44x44 box and the 22px
   glyph. Only the breakpoint visibility lives here.
   ====================================================================== */
/* Compounded with .sp-btn-icon deliberately.
   These are single-class selectors tying with .sp-btn-icon{display:flex},
   so whichever is written last wins — and after LiteSpeed reorders rules
   into its combined stylesheet that was .sp-btn-icon, which forced BOTH the
   mobile and desktop switchers visible at once. Raising specificity makes
   the outcome independent of source order. */
.sp-btn-icon.sp-lang-toggle--desktop {
    display: none;
}

/* === HEADER LEFT (hamburger) === */
.sp-header__left {
    display: flex;
    align-items: center;
}

@media (min-width: 1024px) {
    .sp-header__left .sp-menu-toggle {
        display: none;
    }
    .sp-btn-icon.sp-lang-toggle--mobile {
        display: none;
    }
    .sp-btn-icon.sp-lang-toggle--desktop {
        display: flex;
    }
}

/* === MOBILE NAV SOCIAL === */
.sp-mobile-nav__social {
    display: flex;
    gap: 0.75rem;
    padding: 1.5rem 0;
    margin-top: 1rem;
    border-top: 1px solid var(--sp-border);
    flex-wrap: wrap;
}

.sp-mobile-nav__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--sp-text-secondary);
    background: var(--sp-bg);
    transition: color var(--sp-transition), background-color var(--sp-transition), border-color var(--sp-transition), box-shadow var(--sp-transition), transform var(--sp-transition), opacity var(--sp-transition);
}

.sp-mobile-nav__social-link:hover {
    color: #fff;
}

.sp-mobile-nav__social-link--facebook:hover { background: var(--sp-c-facebook); }
.sp-mobile-nav__social-link--twitter:hover { background: #111; }
.sp-mobile-nav__social-link--instagram:hover { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.sp-mobile-nav__social-link--youtube:hover { background: var(--sp-c-youtube); }
.sp-mobile-nav__social-link--telegram:hover { background: var(--sp-c-telegram); }
.sp-mobile-nav__social-link--whatsapp:hover { background: var(--sp-c-whatsapp); }
.sp-mobile-nav__social-link--google_news:hover { background: var(--sp-c-gnews); }
.sp-mobile-nav__social-link--linkedin:hover { background: var(--sp-c-linkedin); }

/* Featured image — the one and only container declaration.
   The 16:9 reservation lives on the image (which is what needs it for CLS),
   not on the container, so <figcaption> is no longer clipped away. */
.sp-article__featured-image {
    margin: 0 0 var(--sp-space-5);
}

.sp-article__featured-image picture,
.sp-article__featured-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    border-radius: var(--sp-radius-md);
    background: var(--sp-surface-sunken);
}

/* ================================================================
   TABLE OF CONTENTS — Auto-generated from headings
   ================================================================ */
.sp-toc {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-left: 4px solid var(--sp-primary);
    border-radius: var(--sp-radius-md);
    margin: 1rem 0 1.5rem;
    overflow: hidden;
}

.sp-toc__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 1rem;
    cursor: pointer;
    user-select: none;
    list-style: none; /* Hide default summary marker */
}

/* Hide default webkit summary marker */
.sp-toc__header::-webkit-details-marker {
    display: none;
}

details[open] .sp-toc__header {
    border-bottom: 1px solid var(--sp-border);
}

.sp-toc__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--sp-text);
    margin: 0;
}

.sp-toc__title svg {
    color: var(--sp-primary);
    flex-shrink: 0;
}

.sp-toc__toggle {
    color: var(--sp-text-muted);
    display: flex;
    align-items: center;
    transition: transform var(--sp-transition);
}

details[open] .sp-toc__toggle {
    transform: rotate(180deg);
}

.sp-toc__nav {
    padding: 0.5rem 1rem 0.75rem;
}

.sp-toc__list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: toc-counter;
}

/* Only top-level items (level-0) increment the main counter */
.sp-toc__item {
    border-bottom: 1px dashed var(--sp-border);
}

.sp-toc__item:not(.sp-toc__item--level-1):not(.sp-toc__item--level-2) {
    counter-increment: toc-counter;
}

.sp-toc__item:last-child {
    border-bottom: none;
}

.sp-toc__link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--sp-text-secondary);
    transition: color 0.15s ease, padding-left 0.15s ease;
    text-decoration: none;
}

.sp-toc__link::before {
    content: counter(toc-counter, decimal-leading-zero);
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--sp-primary);
    min-width: 1.4rem;
    flex-shrink: 0;
    opacity: 0.7;
}

/* Sub-levels: hide number, show a dash/dot instead */
.sp-toc__item--level-1 .sp-toc__link::before,
.sp-toc__item--level-2 .sp-toc__link::before {
    content: '–';
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 0.4;
    min-width: 1rem;
}

.sp-toc__link:hover {
    color: var(--sp-primary);
    padding-left: 0.35rem;
}

/* Indent levels */
.sp-toc__item--level-1 .sp-toc__link {
    padding-left: 1.25rem;
    font-size: 0.82rem;
    font-weight: 500;
}

.sp-toc__item--level-2 .sp-toc__link {
    padding-left: 2.5rem;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Dark mode */


/* ================================================================
   READ FULL ARTICLE — Content truncation at 25% of post content
   ================================================================ */
/* Scoped to .sp-js: without scripting the reader has no way to expand the
   article, so it must not be clipped in the first place. */
.sp-js .sp-content-truncated {
    position: relative;
    /* overflow: clip instead of hidden so AdSense slots inside don't
       escape the clipping box and displace the sibling read-more button */
    overflow: hidden;
    /* Use overflow-x: clip so ads that are wider than the column don't
       push the button sideways. Falls back gracefully on older Chrome. */
    overflow-x: clip;
    max-height: 25vh;       /* CSS fallback; JS calculates from actual post content */
    transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    /* contain: layout prevents AdSense reflows from escaping this element */
    contain: layout;
}

.sp-js .sp-content-truncated::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to bottom, transparent, var(--sp-bg) 85%);
    pointer-events: none;
    transition: opacity 0.4s ease;
    /* Ensure gradient sits above any ad iframes */
    z-index: 1;
}

.sp-js .sp-content-truncated.is-expanded {
    max-height: none;
    overflow: visible;
    overflow-x: visible;
    contain: none;
}

.sp-js .sp-content-truncated.is-expanded::after {
    opacity: 0;
    pointer-events: none;
}

/* Read-more wrapper must never be affected by document horizontal overflow.
   We reset any possible transform/offset coming from wider-than-viewport ads. */
/* Without JS the button cannot do anything, and the article is already
   shown in full, so there is nothing for it to reveal. */
html:not(.sp-js) .sp-read-more-wrap {
    display: none;
}

.sp-js .sp-read-more-wrap {
    display: flex;
    justify-content: center;
    /* Negative top margin pulls it visually up into the gradient fade zone */
    margin: -0.5rem 0 1.5rem;
    position: relative;
    z-index: 2;
    /* Prevent the wrapper itself from ever being wider than the column */
    width: 100%;
    box-sizing: border-box;
    /* Guard against being pushed by floated/absolutely positioned ad elements */
    clear: both;
    /* Ensure consistent positioning on mobile even with ad layout shifts */
    left: 0;
    right: 0;
}

.sp-read-more-wrap.is-hidden {
    display: none;
}

.sp-read-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.6rem;
    background: var(--sp-primary);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 700;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(0,0,0,0.18);
    transition: background 0.2s ease, transform 0.18s ease, box-shadow 0.18s ease;
    letter-spacing: 0.01em;
    /* Prevent button from ever overflowing its container */
    max-width: 100%;
    white-space: nowrap;
}

.sp-read-more-btn:hover {
    background: var(--sp-primary-hover, #0055cc);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.22);
}

.sp-read-more-btn svg {
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.sp-read-more-btn:hover svg {
    transform: translateY(2px);
}


/* ================================================================
   IN-ARTICLE RELATED POSTS — Trending-style cards
   ================================================================ */
.sp-related-inline {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-md);
    margin: 1.5rem 0;
    overflow: hidden;
}

.sp-related-inline__header {
    padding: 0.6rem 1rem;
    border-bottom: 2px solid var(--sp-border);
}

.sp-related-inline__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--sp-text);
    margin: 0;
}

.sp-related-inline__title svg {
    color: var(--sp-primary);
    flex-shrink: 0;
}

.sp-related-inline__cards {
    display: flex;
    flex-direction: column;
}

.sp-related-inline__card {
    display: flex;
    align-items: center; /* More compact alignment */
    gap: 0.7rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--sp-border);
    color: inherit;
    transition: background 0.15s ease;
}

.sp-related-inline__card:last-child {
    border-bottom: none;
}

.sp-related-inline__card:hover {
    background: var(--sp-surface-hover);
}

.sp-related-inline__num {
    font-size: 1.75rem;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(135deg, var(--sp-primary), var(--sp-primary-hover));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    flex-shrink: 0;
    min-width: 1.8rem;
    text-align: center;
    padding-top: 0.1rem;
}

.sp-related-inline__card-body {
    flex: 1;
    min-width: 0;
}

.sp-related-inline__card-title {
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--sp-text);
    margin: 0;
    transition: color 0.15s ease;
}

.sp-related-inline__card:hover .sp-related-inline__card-title {
    color: var(--sp-primary);
}

/* Dark mode */

/* ================================================================
   SIDEBAR — Desktop-only, modern design
   ================================================================ */
.sp-sidebar {
    display: none;
}

@media (min-width: 1024px) {
    .sp-sidebar {
        display: block;
        width: var(--sp-sidebar-width);
        flex-shrink: 0;
        position: sticky;
        top: calc(var(--sp-header-height) + 1.5rem);
        scrollbar-width: thin;
        scrollbar-color: var(--sp-border) transparent;
    }
    .sp-sidebar::-webkit-scrollbar {
        width: 4px;
    }
    .sp-sidebar::-webkit-scrollbar-track {
        background: transparent;
    }
    .sp-sidebar::-webkit-scrollbar-thumb {
        background: var(--sp-border);
        border-radius: 4px;
    }
}

/* ── Widget block ── */
.sp-sb-widget {
    background: var(--sp-surface);
    border-radius: var(--sp-radius-lg);
    border: 1px solid var(--sp-border);
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.sp-sb-widget__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--sp-text);
    margin: 0;
    padding: 1rem 1.15rem;
    border-bottom: 2px solid var(--sp-border);
}

.sp-sb-widget__title svg {
    color: var(--sp-primary);
    flex-shrink: 0;
}

/* ── Recent Posts (numbered list — trending style) ── */
.sp-sb-posts {
    display: flex;
    flex-direction: column;
}

.sp-sb-post {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.9rem 1.15rem;
    border-bottom: 1px solid var(--sp-border);
    color: inherit;
    transition: background 0.15s ease;
}

.sp-sb-post:last-child {
    border-bottom: none;
}

.sp-sb-post:hover {
    background: var(--sp-surface-hover);
}

.sp-sb-post__num {
    font-size: 1.55rem;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(135deg, var(--sp-primary), var(--sp-primary-hover));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    flex-shrink: 0;
    min-width: 1.6rem;
    text-align: center;
    padding-top: 0.15rem;
}

.sp-sb-post__body {
    flex: 1;
    min-width: 0;
}

.sp-sb-post__cat {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sp-primary);
    margin-bottom: 0.15rem;
}

.sp-sb-post__title {
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--sp-text);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    transition: color 0.15s ease;
}

.sp-sb-post:hover .sp-sb-post__title {
    color: var(--sp-primary);
}

.sp-sb-post__time {
    font-size: 0.68rem;
    color: var(--sp-text-muted);
    display: block;
    margin-top: 0.2rem;
}

/* ── Social Links ── */
.sp-sb-socials {
    display: flex;
    flex-direction: column;
}

.sp-sb-social {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1.15rem;
    border-bottom: 1px solid var(--sp-border);
    color: var(--sp-text);
    transition: background 0.15s ease;
}

.sp-sb-social:last-child {
    border-bottom: none;
}

.sp-sb-social:hover {
    background: var(--sp-surface-hover);
    color: var(--sb-social-color, var(--sp-primary));
}

.sp-sb-social__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--sp-bg);
    color: var(--sb-social-color, var(--sp-text-secondary));
    flex-shrink: 0;
    transition: background 0.2s ease, color 0.2s ease;
}

.sp-sb-social:hover .sp-sb-social__icon {
    background: var(--sb-social-color, var(--sp-primary));
    color: #fff;
}

.sp-sb-social__label {
    flex: 1;
    font-size: 0.82rem;
    font-weight: 600;
}

.sp-sb-social__arrow {
    color: var(--sp-text-muted);
    flex-shrink: 0;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.sp-sb-social:hover .sp-sb-social__arrow {
    opacity: 1;
    transform: translateX(0);
}

/* ── Sidebar widget generic (WP widget areas) ── */
.sp-sidebar .sp-widget {
    background: var(--sp-surface);
    border-radius: var(--sp-radius-lg);
    border: 1px solid var(--sp-border);
    padding: 1.15rem;
    margin-bottom: 1.25rem;
}

.sp-sidebar .sp-widget__title {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--sp-text);
    margin: 0 0 0.85rem;
    padding-bottom: 0.65rem;
    border-bottom: 2px solid var(--sp-border);
}

.sp-sidebar .sp-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sp-sidebar .sp-widget li {
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--sp-border);
    font-size: 0.82rem;
}

.sp-sidebar .sp-widget li:last-child {
    border-bottom: none;
}

.sp-sidebar .sp-widget a {
    color: var(--sp-text-secondary);
    transition: color 0.15s ease;
}

.sp-sidebar .sp-widget a:hover {
    color: var(--sp-primary);
}

/* ── Sidebar Ad spots ── */
.sp-ad--sidebar {
    margin-bottom: 1.25rem;
    border-radius: var(--sp-radius-lg);
    overflow: hidden;
}

/* ── Sidebar dark mode ── */

[data-theme="dark"] .sp-sb-social__icon {
    background: var(--sp-surface-hover);
}


/* === YOUTUBE SHORTS LIGHTBOX === */
.sp-shorts-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}

.sp-shorts-modal.is-active {
    opacity: 1;
    visibility: visible;
}

.sp-shorts-modal__content {
    position: relative;
    width: 100%;
    max-width: 400px;
    aspect-ratio: 9/16;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    transform: translateY(20px) scale(0.95);
    transition: color 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sp-shorts-modal.is-active .sp-shorts-modal__content {
    transform: translateY(0) scale(1);
}

.sp-shorts-modal__iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.sp-shorts-modal__close {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}

.sp-shorts-modal__close:hover {
    opacity: 0.8;
}

@media (max-width: 600px) {
    .sp-shorts-modal__content {
        max-width: 100%;
        height: 100vh;
        border-radius: 0;
    }
    .sp-shorts-modal__close {
        top: 16px;
        right: 16px;
        z-index: 2;
        background: rgba(0,0,0,0.5);
        border-radius: 50%;
    }
}