/* ==========================================================================
   Rapidnet Theme — News Features CSS
   ========================================================================== */

/* ──────────────────────────────────────────────────────────────────────────
   LAYOUT HELPERS
   ────────────────────────────────────────────────────────────────────────── */
.container {
    max-width: var(--content-width, 1200px);
    margin-inline: auto;
    padding-inline: 20px;
}

/* ──────────────────────────────────────────────────────────────────────────
   TOP META BAR
   ────────────────────────────────────────────────────────────────────────── */
.rn-topbar {
    background: var(--topbar-bg, #111);
    color: var(--topbar-text, #ccc);
    font-size: 12px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.rn-topbar__inner {
    max-width: var(--content-width, 1200px);
    margin-inline: auto;
    padding: 6px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.rn-topbar__date {
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: .85;
}

.rn-topbar__socials {
    display: flex;
    align-items: center;
    gap: 2px;
}

.rn-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    color: inherit;
    text-decoration: none;
    transition: background .2s, color .2s;
}

.rn-social-link:hover { background: rgba(255,255,255,.12); color: #fff; }
.rn-social-link--fb:hover { color: #1877F2; }
.rn-social-link--tw:hover { color: #000; }
.rn-social-link--ig:hover { color: #E1306C; }
.rn-social-link--yt:hover { color: #FF0000; }

/* ──────────────────────────────────────────────────────────────────────────
   HEADER ACTIONS (search + dark mode)
   ────────────────────────────────────────────────────────────────────────── */
.rn-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.rn-search-toggle,
.rn-darkmode-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: 1px solid var(--menu-border-color, #e5e5e5);
    border-radius: var(--border-radius, 6px);
    color: var(--menu-text-color, #1a1a1a);
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
}

.rn-search-toggle:hover,
.rn-darkmode-toggle:hover {
    background: var(--menu-active-bg-color, #f0f0f0);
    border-color: var(--menu-text-hover-color, #0066cc);
    color: var(--menu-text-hover-color, #0066cc);
}

/* Dark/light icon switching */
.dark-mode .rn-icon-moon { display: none; }
.dark-mode .rn-icon-sun  { display: block; }
.rn-icon-moon { display: block; }
.rn-icon-sun  { display: none; }

/* ──────────────────────────────────────────────────────────────────────────
   SEARCH OVERLAY
   ────────────────────────────────────────────────────────────────────────── */
.rn-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,.75);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 100px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s, visibility .25s;
}

.rn-search-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.rn-search-overlay__inner {
    position: relative;
    width: 100%;
    max-width: 660px;
    margin-inline: 20px;
}

.rn-search-overlay__inner .search-form {
    display: flex;
    gap: 8px;
}

.rn-search-overlay__inner .search-field {
    flex: 1;
    padding: 14px 18px;
    font-size: 18px;
    border: 2px solid var(--menu-text-hover-color, #0066cc);
    border-radius: var(--border-radius, 6px);
    outline: none;
    background: #fff;
    color: #111;
}

.rn-search-overlay__inner .search-submit {
    padding: 14px 22px;
    background: var(--menu-text-hover-color, #0066cc);
    color: #fff;
    border: none;
    border-radius: var(--border-radius, 6px);
    font-weight: 600;
    cursor: pointer;
}

.rn-search-overlay__close {
    position: absolute;
    top: -44px;
    right: 0;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}

/* ──────────────────────────────────────────────────────────────────────────
   BREAKING NEWS TICKER
   ────────────────────────────────────────────────────────────────────────── */
.rn-ticker {
    background: var(--ticker-bg, #CC0000);
    color: var(--ticker-text, #fff);
    display: flex;
    align-items: stretch;
    overflow: hidden;
    font-size: 13px;
    line-height: 1;
    min-height: 38px;
}

.rn-ticker__label {
    flex-shrink: 0;
    background: rgba(0,0,0,.25);
    display: flex;
    align-items: center;
    padding: 0 16px;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
}

.rn-ticker__track-wrap {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    position: relative;
}

.rn-ticker__track-wrap::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 32px;
    background: linear-gradient(to right, var(--ticker-bg, #CC0000), transparent);
    z-index: 1;
    pointer-events: none;
}

.rn-ticker__track {
    display: flex;
    align-items: center;
    gap: 0;
    white-space: nowrap;
    animation: rn-ticker-scroll var(--ticker-speed, 25s) linear infinite;
    will-change: transform;
}

.rn-ticker__track.is-paused {
    animation-play-state: paused;
}

@keyframes rn-ticker-scroll {
    from { transform: translateX(100%); }
    to   { transform: translateX(-100%); }
}

.rn-ticker__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    color: inherit;
    text-decoration: none;
    transition: opacity .2s;
    white-space: nowrap;
}

.rn-ticker__item:hover { opacity: .8; }

.rn-ticker__cat {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 3px;
    background: rgba(0,0,0,.3);
}

.rn-ticker__title {
    font-weight: 500;
}

.rn-ticker__sep {
    opacity: .5;
    padding: 0 4px;
}

.rn-ticker__pause {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    background: rgba(0,0,0,.2);
    border: none;
    color: inherit;
    cursor: pointer;
    transition: background .2s;
}

.rn-ticker__pause:hover { background: rgba(0,0,0,.4); }

/* ──────────────────────────────────────────────────────────────────────────
   ADVERTISEMENT SLOTS
   ────────────────────────────────────────────────────────────────────────── */
.rn-ad {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--body-bg, #f8f8f8);
    border: 1px dashed #ddd;
    border-radius: var(--border-radius, 6px);
    padding: 12px;
    margin: 20px auto;
    text-align: center;
    overflow: hidden;
}

.rn-ad--leaderboard { max-width: 728px; min-height: 90px; }
.rn-ad--box         { max-width: 300px; min-height: 250px; }

/* ──────────────────────────────────────────────────────────────────────────
   CATEGORY BADGES
   ────────────────────────────────────────────────────────────────────────── */
.rn-cat-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    padding: 3px 8px;
    border-radius: 3px;
    text-decoration: none;
    line-height: 1.4;
}

.rn-cat-badge--sm  { font-size: 9px;  padding: 2px 6px; }
.rn-cat-badge--xs  { font-size: 9px;  padding: 2px 5px; }
.rn-cat-badge--lg  { font-size: 11px; padding: 4px 10px; }

/* ──────────────────────────────────────────────────────────────────────────
   HERO SECTION
   ────────────────────────────────────────────────────────────────────────── */
.rn-hero {
    padding: 24px 0 32px;
    background: var(--body-bg, #f8f8f8);
}

.rn-hero__grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 20px;
}

@media (max-width: 900px) {
    .rn-hero__grid { grid-template-columns: 1fr; }
}

/* Main feature */
.rn-hero__main-link {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: var(--border-radius, 6px);
    overflow: hidden;
    background: var(--card-bg, #fff);
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    transition: transform .2s, box-shadow .2s;
}

.rn-hero__main-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
}

.rn-hero__main-img img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    display: block;
}

.rn-hero__main-body {
    padding: 20px 24px 24px;
}

.rn-hero__main-title {
    font-size: clamp(1.3rem, 3vw, 2rem);
    font-weight: 800;
    line-height: 1.2;
    margin: 10px 0 12px;
    color: var(--body-text, #1a1a1a);
}

.rn-hero__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #888;
}

.rn-hero__sep { opacity: .5; }

/* Side stories */
.rn-hero__side {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rn-hero__side-item {
    display: flex;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    background: var(--card-bg, #fff);
    border-radius: var(--border-radius, 6px);
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
    transition: transform .2s;
}

.rn-hero__side-item:hover { transform: translateX(4px); }

.rn-hero__side-img { flex-shrink: 0; width: 110px; }
.rn-hero__side-img img { width: 110px; height: 80px; object-fit: cover; display: block; }

.rn-hero__side-body {
    padding: 10px 12px 10px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rn-hero__side-title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    color: var(--body-text, #1a1a1a);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rn-hero__side-date { font-size: 11px; color: #999; }

/* ──────────────────────────────────────────────────────────────────────────
   HOMEPAGE LAYOUT
   ────────────────────────────────────────────────────────────────────────── */
.rn-homepage-layout { padding: 32px 0 48px; }

.rn-homepage-grid { display: grid; gap: 32px; }

.rn-homepage-grid--with-sidebar {
    grid-template-columns: 1fr 320px;
}

@media (max-width: 1024px) {
    .rn-homepage-grid--with-sidebar { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────────────────────
   CATEGORY SECTION GRIDS
   ────────────────────────────────────────────────────────────────────────── */
.rn-cat-sections { display: flex; flex-direction: column; gap: 40px; }

.rn-cat-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f0f0f0;
}

.rn-cat-section__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0;
    color: var(--body-text, #1a1a1a);
}

.rn-cat-section__accent {
    display: block;
    width: 4px;
    height: 20px;
    border-radius: 2px;
    flex-shrink: 0;
}

.rn-cat-section__more {
    font-size: 12px;
    font-weight: 600;
    color: var(--link-color, #0066cc);
    text-decoration: none;
    letter-spacing: .03em;
    white-space: nowrap;
}

.rn-cat-section__more:hover { text-decoration: underline; }

/* Category card grid */
.rn-cat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 640px) { .rn-cat-grid { grid-template-columns: 1fr; } }

.rn-cat-grid__secondary {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Card */
.rn-cat-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--card-bg, #fff);
    border-radius: var(--border-radius, 6px);
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
    transition: transform .2s, box-shadow .2s;
}

.rn-cat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,.1);
}

.rn-cat-card--lead { }

.rn-cat-card--sm {
    display: flex;
    flex-direction: row;
}

.rn-cat-card__img img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.rn-cat-card__img--sm { flex-shrink: 0; }
.rn-cat-card__img--sm img { width: 120px; height: 80px; object-fit: cover; display: block; }

.rn-cat-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.rn-cat-card--sm .rn-cat-card__body { padding: 10px 12px; }

.rn-cat-card__title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
    color: var(--body-text, #1a1a1a);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rn-cat-card__title--sm { font-size: 13px; -webkit-line-clamp: 2; }
.rn-cat-card__meta, .rn-cat-card__date { font-size: 11px; color: #999; }
.rn-cat-card__meta { display: flex; gap: 6px; flex-wrap: wrap; }

/* ──────────────────────────────────────────────────────────────────────────
   TRENDING SIDEBAR
   ────────────────────────────────────────────────────────────────────────── */
.rn-trending {
    background: var(--card-bg, #fff);
    border-radius: var(--border-radius, 6px);
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
    overflow: hidden;
    margin-bottom: 24px;
}

.rn-trending__header {
    padding: 14px 16px;
    border-bottom: 2px solid #f0f0f0;
}

.rn-trending__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0;
    color: var(--body-text, #1a1a1a);
}

.rn-trending__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rn-trending__item {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #f5f5f5;
    align-items: flex-start;
}

.rn-trending__item:last-child { border-bottom: none; }

.rn-trending__num {
    flex-shrink: 0;
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
    color: #e0e0e0;
    min-width: 24px;
    text-align: center;
}

.rn-trending__body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }

.rn-trending__link {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--body-text, #1a1a1a);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rn-trending__link:hover { color: var(--link-color, #0066cc); }

.rn-trending__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #aaa;
}

.rn-trending__views {
    display: flex;
    align-items: center;
    gap: 3px;
}

/* ──────────────────────────────────────────────────────────────────────────
   ARTICLE (single.php)
   ────────────────────────────────────────────────────────────────────────── */
.rn-article-layout {
    display: grid;
    gap: 40px;
    padding: 32px 0 48px;
}

.rn-article-layout--with-sidebar {
    grid-template-columns: 1fr 300px;
}

@media (max-width: 1024px) {
    .rn-article-layout--with-sidebar { grid-template-columns: 1fr; }
}

.rn-article { max-width: 780px; }
.rn-article-layout:not(.rn-article-layout--with-sidebar) .rn-article { margin-inline: auto; }

.rn-article__header { margin-bottom: 28px; display: flex; flex-direction: column; gap: 14px; }

.rn-article__title {
    font-size: clamp(1.6rem, 4vw, 2.6rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -.01em;
    margin: 0;
    color: var(--body-text, #1a1a1a);
}

.rn-article__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 13px;
    color: #888;
}

.rn-article__author {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
    color: var(--body-text, #333);
}

.rn-article__author a { color: inherit; text-decoration: none; }
.rn-article__author a:hover { color: var(--link-color, #0066cc); }

.rn-article__avatar { border-radius: 50%; display: block; }

.rn-article__sep { opacity: .4; }

.rn-article__date { }

.rn-article__views {
    display: flex;
    align-items: center;
    gap: 4px;
}

.rn-reading-time {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

/* Print button */
.rn-print-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: none;
    border: 1px solid #ddd;
    border-radius: var(--border-radius, 6px);
    font-size: 12px;
    color: #888;
    cursor: pointer;
    transition: border-color .2s, color .2s;
    margin-left: 6px;
}

.rn-print-btn:hover { border-color: #aaa; color: #444; }

/* Featured image */
.rn-article__featured-img {
    margin-bottom: 36px;
    border-radius: var(--border-radius, 6px);
    overflow: hidden;
}

.rn-article__featured-img img {
    width: 100%;
    height: auto;
    display: block;
}

.rn-article__img-caption {
    font-size: 12px;
    color: #999;
    padding: 8px 12px;
    background: #fafafa;
    border-top: 1px solid #eee;
    margin: 0;
}

/* Article body */
.rn-article__body {
    font-size: 17px;
    line-height: 1.75;
    color: var(--body-text, #333);
    margin-bottom: 40px;
}

.rn-article__body p,
.rn-article__body ul,
.rn-article__body ol,
.rn-article__body blockquote { margin-bottom: 1.4em; }

.rn-article__body h2 { font-size: 1.5em; margin: 1.8em 0 .6em; }
.rn-article__body h3 { font-size: 1.25em; margin: 1.5em 0 .6em; }
.rn-article__body img { max-width: 100%; border-radius: var(--border-radius, 6px); }

.rn-article__body blockquote {
    border-left: 4px solid var(--link-color, #0066cc);
    padding: 12px 20px;
    margin-left: 0;
    background: #f8f9ff;
    border-radius: 0 var(--border-radius, 6px) var(--border-radius, 6px) 0;
    font-style: italic;
}

/* Article footer */
.rn-article__footer { border-top: 1px solid #eee; padding-top: 20px; margin-bottom: 32px; }

.rn-article__tags { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; }
.rn-article__tags a {
    padding: 4px 10px;
    background: #f0f0f0;
    border-radius: 20px;
    text-decoration: none;
    color: var(--body-text, #333);
    font-size: 12px;
    transition: background .2s, color .2s;
}
.rn-article__tags a:hover { background: var(--link-color, #0066cc); color: #fff; }

/* ──────────────────────────────────────────────────────────────────────────
   SOCIAL SHARING
   ────────────────────────────────────────────────────────────────────────── */
.rn-sharing {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 28px 0;
    padding: 20px;
    background: #f9f9f9;
    border-radius: var(--border-radius, 6px);
    border: 1px solid #eee;
}

.rn-sharing__label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #888;
    margin-right: 4px;
}

.rn-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--border-radius, 6px);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border: 1.5px solid transparent;
    cursor: pointer;
    background: #fff;
    transition: transform .15s, box-shadow .15s;
    color: #fff;
}

.rn-share-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,.15); }

.rn-share-btn--fb { background: #1877F2; }
.rn-share-btn--tw { background: #000; }
.rn-share-btn--wa { background: #25D366; }
.rn-share-btn--tg { background: #0088cc; }
.rn-share-btn--copy {
    background: #f0f0f0;
    color: #444;
    border-color: #ddd;
}
.rn-share-btn--copy.is-copied { background: #0a7a0a; color: #fff; }

/* ──────────────────────────────────────────────────────────────────────────
   AUTHOR BIO
   ────────────────────────────────────────────────────────────────────────── */
.rn-author-bio {
    display: flex;
    gap: 20px;
    padding: 24px;
    background: var(--card-bg, #fff);
    border-radius: var(--border-radius, 6px);
    border: 1px solid #eee;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    margin: 32px 0;
}

@media (max-width: 560px) { .rn-author-bio { flex-direction: column; align-items: center; text-align: center; } }

.rn-author-bio__img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}

.rn-author-bio__name {
    font-size: 15px;
    font-weight: 800;
    margin: 0 0 6px;
}

.rn-author-bio__name a { text-decoration: none; color: var(--body-text, #1a1a1a); }
.rn-author-bio__name a:hover { color: var(--link-color, #0066cc); }

.rn-author-bio__desc {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    margin: 0 0 10px;
}

.rn-author-bio__link {
    font-size: 12px;
    font-weight: 600;
    color: var(--link-color, #0066cc);
    text-decoration: none;
}

.rn-author-bio__link:hover { text-decoration: underline; }

/* ──────────────────────────────────────────────────────────────────────────
   POST NAVIGATION
   ────────────────────────────────────────────────────────────────────────── */
.rn-post-nav .nav-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 32px 0;
}

.rn-post-nav .nav-previous,
.rn-post-nav .nav-next {
    background: var(--card-bg, #fff);
    border-radius: var(--border-radius, 6px);
    padding: 16px 20px;
    border: 1px solid #eee;
    transition: border-color .2s;
}

.rn-post-nav .nav-previous:hover,
.rn-post-nav .nav-next:hover { border-color: var(--link-color, #0066cc); }

.rn-post-nav .nav-next { text-align: right; }

.rn-post-nav a { text-decoration: none; color: inherit; display: block; }

.rn-nav-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #aaa;
    margin-bottom: 4px;
}

.rn-nav-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
    font-weight: 700;
    color: var(--body-text, #1a1a1a);
    line-height: 1.3;
}

/* ──────────────────────────────────────────────────────────────────────────
   RELATED POSTS
   ────────────────────────────────────────────────────────────────────────── */
.rn-related {
    margin: 40px 0;
    padding-top: 32px;
    border-top: 2px solid #f0f0f0;
}

.rn-related__title {
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 20px;
    color: var(--body-text, #1a1a1a);
}

.rn-related__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

/* ──────────────────────────────────────────────────────────────────────────
   LAZY LOAD FADE IN
   ────────────────────────────────────────────────────────────────────────── */
img[data-src],
img.rn-lazy:not(.rn-lazy-loaded) {
    opacity: 0;
    transition: opacity .4s ease;
}

img.rn-lazy-loaded {
    opacity: 1;
}

/* ──────────────────────────────────────────────────────────────────────────
   INFINITE SCROLL LOADER
   ────────────────────────────────────────────────────────────────────────── */
.rn-infinite-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    gap: 10px;
    font-size: 14px;
    color: #888;
}

.rn-infinite-loader__spinner {
    width: 24px;
    height: 24px;
    border: 3px solid #eee;
    border-top-color: var(--link-color, #0066cc);
    border-radius: 50%;
    animation: rn-spin .7s linear infinite;
}

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

/* ──────────────────────────────────────────────────────────────────────────
   DARK MODE
   ────────────────────────────────────────────────────────────────────────── */
.dark-mode {
    --body-bg: var(--dm-bg, #0d0d0d);
    --body-text: var(--dm-text, #e5e5e5);
    --card-bg: var(--dm-card, #1a1a1a);
    --border-color: var(--dm-border, #2a2a2a);
}

.dark-mode body {
    background: var(--body-bg);
    color: var(--body-text);
}

.dark-mode .rn-cat-card,
.dark-mode .rn-hero__main-link,
.dark-mode .rn-hero__side-item,
.dark-mode .rn-trending,
.dark-mode .rn-author-bio,
.dark-mode .rn-post-nav .nav-previous,
.dark-mode .rn-post-nav .nav-next {
    background: var(--card-bg);
    border-color: var(--border-color);
    color: var(--body-text);
}

.dark-mode .rn-cat-section__header,
.dark-mode .rn-trending__header,
.dark-mode .rn-trending__item { border-color: var(--border-color); }

.dark-mode .rn-article__body { color: var(--body-text); }
.dark-mode .rn-article__body blockquote { background: #1e2035; }

.dark-mode .rn-sharing { background: var(--card-bg); border-color: var(--border-color); }
.dark-mode .rn-share-btn--copy { background: #2a2a2a; color: #ccc; border-color: #3a3a3a; }

.dark-mode .rn-article__footer { border-color: var(--border-color); }
.dark-mode .rn-article__tags a { background: #2a2a2a; color: #ccc; }
.dark-mode .rn-article__tags a:hover { background: var(--link-color, #0066cc); color: #fff; }

.dark-mode .rn-topbar { background: #000; border-color: rgba(255,255,255,.05); }

.dark-mode .rn-search-overlay__inner .search-field { background: #1a1a1a; color: #e5e5e5; }
.dark-mode .rn-search-toggle,
.dark-mode .rn-darkmode-toggle { border-color: #333; color: #ccc; }
.dark-mode .rn-search-toggle:hover,
.dark-mode .rn-darkmode-toggle:hover { background: #2a2a2a; }

.dark-mode .rn-ad { background: #1a1a1a; border-color: #2a2a2a; }
.dark-mode .rn-cat-card__title,
.dark-mode .rn-hero__main-title,
.dark-mode .rn-hero__side-title,
.dark-mode .rn-trending__link { color: var(--body-text); }

/* ──────────────────────────────────────────────────────────────────────────
   PRINT STYLES
   ────────────────────────────────────────────────────────────────────────── */
@media print {
    .rn-topbar,
    .rn-ticker,
    .rn-header-actions,
    .rn-sharing,
    .rn-related,
    .rn-trending,
    .rn-ad,
    #site-header .main-navigation,
    .menu-toggle,
    #mobile-menu,
    .rn-article-sidebar,
    .rn-homepage-sidebar,
    .rn-post-nav { display: none !important; }

    .rn-article-layout { grid-template-columns: 1fr !important; }
    .rn-article__title { font-size: 24pt; }
    .rn-article__body { font-size: 11pt; line-height: 1.5; }
    a { color: inherit; text-decoration: none; }
}