/*
Theme Name: R34C8
Theme URI: https://example.com/r34c8
Author: PuREACH
Author URI: https://example.com
Description: R34C8 — A high-performance WordPress magazine theme. Features ad-ready slots, dynamic category blocks, hero grid, reading progress, Table of Contents, and mobile-optimized layouts.
Version: 5.53.9
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: r34c8
*/

/* =============================================
   CSS VARIABLES — Matched to live r34c8.com
   ============================================= */
/* Google Fonts loaded via header.php <link> for non-blocking performance */

:root {
    --primary-color: #ec5725;
    --primary-dark: #d93802;
    --dark-bg: #292929;
    --text-main: #292929;
    --text-muted: #757575;
    --bg-main: #FFFFFF;
    --bg-card: #FFFFFF;
    --bg-peach: #FEE2D9;
    --border-light: #EAEAEA;
    --border-radius: 20px;
    --border-radius-lg: 20px;
    --shadow-card: 0 -2px 20px rgba(51, 51, 51, 0.08);
    --font-stack: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-heading: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-ui: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --container-width: 1279px;
    --container-wide: 1279px;
    --sidebar-width: 300px;
    --content-width: 782px;
}

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

html,
body {
    width: 100%;
}

#page {
    overflow-x: hidden;
}

body {
    font-family: var(--font-stack);
    color: var(--text-main);
    background-color: var(--bg-main);
    line-height: 1.5;
    font-size: 18px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s ease;
}

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

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

ul,
ol {
    list-style: none;
}

/* =============================================
   LAYOUT CONTAINERS
   ============================================= */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 4px;
}

.container-wide {
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 0 16px;
}


/* =============================================
   SEARCH OVERLAY
   ============================================= */
.search-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 100000;
    display: flex; align-items: flex-start; justify-content: center;
    padding-top: 12vh;
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    backdrop-filter: blur(8px);
}
.search-overlay.active { opacity: 1; visibility: visible; }
.search-overlay-inner {
    width: 90%; max-width: 600px; text-align: center;
    position: relative;
    animation: searchSlideIn 0.35s ease-out;
}
@keyframes searchSlideIn { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } }
.search-overlay-close {
    position: absolute; top: -50px; right: 0;
    background: none; border: none; color: #fff; font-size: 36px;
    cursor: pointer; opacity: 0.7; transition: opacity 0.2s;
    line-height: 1;
}
.search-overlay-close:hover { opacity: 1; }
.search-overlay-form {
    display: flex;
    align-items: center;
    gap: 12px;
}
.search-input-wrap {
    display: flex; align-items: center; gap: 14px;
    background: #ffffff;
    border: 2px solid transparent;
    border-radius: 12px; padding: 16px 20px;
    transition: border-color 0.2s, box-shadow 0.2s;
    flex: 1;
}
.search-input-wrap:focus-within { border-color: var(--primary-color, #D93802); box-shadow: 0 0 0 4px rgba(217, 56, 2, 0.2); }
.search-input-wrap i { color: #888; font-size: 20px; flex-shrink: 0; }
.search-input-wrap input {
    flex: 1; background: none; border: none; outline: none;
    color: #333; font-size: 18px; font-family: inherit;
    width: 100%;
}
.search-input-wrap input:focus {
    outline: none !important;
    box-shadow: none !important;
}
.search-input-wrap input::placeholder { color: #aaa; }
.search-overlay-submit {
    background: var(--primary-color, #D93802); color: #fff;
    border: none; padding: 0 32px; border-radius: 12px;
    font-size: 16px; font-weight: 700; cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    height: 60px;
    display: flex; align-items: center; justify-content: center;
}
.search-overlay-submit:hover { background: #c13000; transform: translateY(-1px); }
.search-overlay-hint {
    margin-top: 20px; color: rgba(255,255,255,0.6); font-size: 13px;
}
.search-overlay-hint kbd {
    background: rgba(255,255,255,0.2); padding: 2px 8px;
    border-radius: 4px; border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
}
@media (max-width: 500px) {
    .search-overlay-form { flex-direction: column; width: 100%; }
    .search-overlay-submit { width: 100%; height: 50px; }
    .search-input-wrap { width: 100%; }
}

/* =============================================
   MOBILE MENU
   ============================================= */
.mobile-menu-backdrop {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 99999;
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.mobile-menu-backdrop.active { opacity: 1; visibility: visible; }
.mobile-menu {
    position: fixed; top: 0; right: 0; width: 300px; max-width: 85vw;
    height: 100%; background: #1a1a1a; z-index: 100001;
    display: flex; flex-direction: column;
    /* MOB-1: Hardware-accelerated sliding */
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: -8px 0 30px rgba(0,0,0,0.3);
    overflow-y: auto;
    /* MOB-2: Safe Area Insets for iOS Notch/Dynamic Island */
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mobile-menu.active { transform: translateX(0); }
.mobile-menu-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mobile-menu-title {
    color: #fff; font-weight: 700; font-size: 18px; letter-spacing: 0.5px;
}
.mobile-menu-close {
    background: none; border: none; color: rgba(255,255,255,0.6);
    /* MOB-4: Apple HIG Touch Target Compliance (min 44x44px) */
    font-size: 28px; cursor: pointer; padding: 12px; margin: -12px; line-height: 1;
}
.mobile-menu-close:hover { color: #fff; }
.mobile-menu-search {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mobile-search-wrap {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px; padding: 10px 14px;
}
.mobile-search-wrap i { color: rgba(255,255,255,0.4); font-size: 14px; }
.mobile-search-wrap input { font-size: 14px; }
.mobile-menu-links {
    list-style: none; margin: 0; padding: 12px 0;
}
.mobile-menu-links li a {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 24px; color: rgba(255,255,255,0.85);
    text-decoration: none; font-size: 15px; font-weight: 500;
    transition: background 0.2s, color 0.2s;
}
.mobile-menu-links li a:hover {
    background: rgba(255,255,255,0.06);
    color: var(--primary-color, #D93802);
}
.mobile-menu-links li a i { width: 20px; text-align: center; opacity: 0.5; }
.mobile-menu-social {
    display: flex; gap: 16px; padding: 20px 24px;
    margin-top: auto;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.mobile-menu-social a {
    color: rgba(255,255,255,0.5); font-size: 18px;
    transition: color 0.2s;
}
.mobile-menu-social a:hover { color: var(--primary-color, #D93802); }

/* =============================================
   TOAST NOTIFICATION (Share "Link copied!" etc.)
   ============================================= */
.r34c8-toast {
    position: fixed; bottom: 30px; left: 50%; transform: translate(-50%, 20px);
    background: #333; color: #fff; padding: 12px 28px;
    border-radius: 10px; font-size: 14px; font-weight: 600;
    opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 100000; pointer-events: none;
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.r34c8-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* =============================================
   PLACEHOLDER IMAGE (no featured image)
   ============================================= */
.am-placeholder-img {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; width: 100%; height: 100%; min-height: 180px;
    background: linear-gradient(145deg, #e8e8e8, #f5f5f5);
    color: #b0b0b0; border-radius: inherit;
}
.am-placeholder-img svg { opacity: 0.4; }
.am-placeholder-img span {
    font-size: 13px; font-weight: 600; letter-spacing: 0.5px;
    text-transform: uppercase; opacity: 0.5;
}
/* Custom default thumbnail (replaces SVG placeholder when set in Theme Settings) */
.am-default-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}

/* =============================================
   BACK TO TOP BUTTON (P5 — moved from inline)
   ============================================= */
.back-to-top-btn {
    /* MOB-2: Safe Area Inset */
    position: fixed; bottom: calc(30px + env(safe-area-inset-bottom, 0px)); right: 30px; z-index: 9999;
    background: var(--primary-color, #D93802); color: #fff;
    border: none; border-radius: 8px; width: 44px; height: 56px;
    font-size: 20px; cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s;
    opacity: 0; pointer-events: none; transform: translateY(20px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.back-to-top-btn:hover {
    background: var(--primary-dark, #D93802);
}

@media (max-width: 768px) {
    /* MOB-3: Fix BTT mobile clearance (don't overlap sticky ad/thumb sweep) */
    .back-to-top-btn {
        bottom: calc(90px + env(safe-area-inset-bottom, 0px));
        right: 20px;
        width: 40px; height: 50px;
        font-size: 18px;
    }
}

/* =============================================
   HEADER — Exact R34C8 Match
   ============================================= */
.site-header {
    background-color: var(--dark-bg);
    z-index: 1000;
    height: 56px;
    display: flex;
    align-items: center;
}

body:not(.header-not-sticky) .site-header {
    position: sticky;
    top: 0;
}

/* WordPress Admin Bar offset for sticky header */
.admin-bar .site-header {
    top: 32px;
}
@media screen and (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;
    }
}


.header-inner {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
}

.site-logo img {
    border-radius: 0;
    height: 23px;
    width: auto;
}

/* Text fallback when no logo image is configured */
.site-logo-text {
    color: #fff;
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.5px;
    white-space: nowrap;
    line-height: 1;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-actions button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.header-actions img {
    border-radius: 0;
}

/* Hamburger Icon */
.hamburger-btn {
    flex-direction: column;
    justify-content: space-around;
    width: 24px;
    height: 18px;
}

.hamburger-btn span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #ffffff;
    border-radius: 2px;
}

/* =============================================
   CATEGORY NAVIGATION — White Pill Bar
   ============================================= */
.category-nav-wrapper {
    background-color: #FFFFFF;
    padding: 12px 0;
    border-bottom: none;
    z-index: 999;
}

body:not(.header-not-sticky):not(.catnav-not-sticky) .category-nav-wrapper {
    position: sticky;
    top: 56px;
}

/* Header NOT sticky but category nav IS sticky */
body.header-not-sticky:not(.catnav-not-sticky) .category-nav-wrapper {
    position: sticky;
    top: 0;
}

/* Category nav NOT sticky — static positioning */
body.catnav-not-sticky .category-nav-wrapper {
    position: static;
}

.admin-bar .category-nav-wrapper {
    top: 88px; /* 56px header + 32px admin bar */
}
@media screen and (max-width: 782px) {
    .admin-bar .category-nav-wrapper {
        top: 102px; /* 56px header + 46px admin bar */
    }
}

.category-nav {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0 4px;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.category-nav::-webkit-scrollbar {
    display: none;
}

.cat-pill {
    display: inline-block;
    padding: 10px 20px;
    background-color: #EEEEEE;
    color: var(--text-main);
    border-radius: 30px;
    font-size: 20px;
    font-weight: 700;
    text-transform: capitalize;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
    flex-shrink: 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    scroll-snap-align: start;
}

.cat-pill.active,
.cat-pill:hover {
    background-color: var(--primary-color);
    color: #FFFFFF;
}

/* =============================================
   HOMEPAGE — MAIN CONTAINER
   ============================================= */
.home-page-container {
    max-width: 940px;
    padding: 0px 16px;
}

.single-post-nav-container {
    max-width: calc(var(--content-width) + var(--sidebar-width) + 44px);
    /* 44px is the gap between content and sidebar in .single-layout */
}

.single-post-nav-container-no-sidebar {
    max-width: 900px;
    /* Matches the hardcoded 900px fallback in single.php when sidebar is missing */
}

/* =============================================
   HOMEPAGE — HERO SECTION
   ============================================= */
.home-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;      /* Force sidebar column to match hero height */
    justify-content: space-between;
    margin-bottom: 30px;
}

.home-hero .hero-main {
    width: 100%;
    margin-bottom: 20px;
}

.home-hero .hero-sidebar {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media (min-width: 992px) {
    .home-hero .hero-main {
        width: calc(66.6667% - 12px);
        margin-bottom: 0;
    }

    .home-hero .hero-sidebar {
        width: calc(33.3333% - 12px);
    }
}

/* Main Hero Card — matches R34C8 card: 20px radius, soft shadow, 24px padding */
.hero-main {
    background: var(--bg-card);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.hero-main .hero-text {
    padding: 24px 24px 20px;
}

.hero-main .hero-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.hero-main .hero-category {
    font-size: 11px;
    font-weight: 700;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
}

.hero-main .hero-date {
    font-size: 12px;
    color: var(--text-muted);
}

.hero-main .hero-title {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text-main);
    margin-bottom: 8px;
}

.hero-main .hero-title a {
    color: inherit;
    text-decoration: none;
}

.hero-main .hero-title a:hover {
    color: var(--primary-color);
}

.hero-main .hero-excerpt {
    font-size: 18px;
    line-height: 1.5;
    color: var(--text-main);
    margin-bottom: 0;
}

.hero-main .hero-image {
    margin-top: auto;
    position: relative;
}

.hero-main .hero-image img {
    width: 100%;
    display: block;
    object-fit: cover;
    aspect-ratio: 16/9;
    border-radius: 0;
}

/* Sidebar Stack Cards */

.sidebar-card {
    background: var(--bg-card);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-card);
    padding: 24px;
    display: flex;
    flex-direction: column;
    /* hero_height / N: subtract total gap space then divide equally by count */
    height: calc((100% - (var(--sidebar-count) - 1) * 20px) / var(--sidebar-count));
    overflow: hidden; /* clip at card boundary as last resort */
}

.sidebar-card .card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.sidebar-card .meta-category {
    font-size: 11px;
    font-weight: 700;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.sidebar-card .meta-date {
    font-size: 12px;
    color: var(--text-muted);
}

.sidebar-card .card-title-wrap {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.sidebar-card .card-title {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-main);
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 999;
    line-clamp: 999;
    overflow: hidden;
    max-height: 100%;
}

.sidebar-card .card-title a {
    color: inherit;
    text-decoration: none;
}

.sidebar-card .card-title a:hover {
    color: var(--primary-color);
}

/* =============================================
   HERO — TRENDING MODE
   Professional rounded pill callouts
   ============================================= */

/* Source label inside/above hero - fallback style */
.hero-trending-label {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: var(--primary-color, #EC5725);
    display: inline-block;
    padding: 5px 14px;
    border-radius: 20px;
    margin-bottom: 12px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

/* Premium Pill for Trending Now */
.hero-trending-label.trending-now-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 14px 4px 4px;
    border-radius: 30px;
    background: linear-gradient(90deg, #fff7f0 0px, #ffb347 40px, #ff6a00 70px, #e8320a 100%);
    box-shadow: 0 4px 18px rgba(232, 50, 10, 0.40);
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.25);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    position: relative;
    overflow: visible;
    margin-bottom: 20px;
    align-self: flex-start;
}

/* White Circle Wrapper */
.trending-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1), 0 2px 4px rgba(255, 61, 0, 0.15);
    z-index: 2;
    margin-right: 8px;
    overflow: visible;
}

/* Foreground SVG Flame */
.trending-now-pill .trending-flame-svg {
    flex-shrink: 0;
    width: 18px;
    height: 22.5px;
    transform-origin: center bottom;
    will-change: transform;
    margin-top: -3px;
    margin-bottom: 0px;
}

/* Text Element */
.trending-text-span {
    z-index: 2;
    margin-right: 6px;
}

/* White Arrow on the right */
.trending-arrow-span {
    display: inline-flex;
    align-items: center;
    color: #ffffff;
    z-index: 2;
    animation: arrow-bounce 0.8s infinite alternate ease-in-out;
}

@keyframes arrow-bounce {
    0% { transform: translateX(0); }
    100% { transform: translateX(2.5px); }
}

/* Spark elements hidden — bg flame removed */
.trending-bg-flame-container { display: none; }

/* Custom keyframe animations for the multi-layered flame */
@keyframes flame-flicker-outer {
    0% { transform: scale(1) rotate(-1.5deg); opacity: 0.9; }
    50% { transform: scale(1.04) rotate(1deg); opacity: 1; }
    100% { transform: scale(0.96) rotate(-0.5deg); opacity: 0.95; }
}

@keyframes flame-flicker-middle {
    0% { transform: scale(0.94) rotate(1deg); opacity: 0.95; }
    50% { transform: scale(1.06) rotate(-1.5deg); opacity: 1; }
    100% { transform: scale(0.97) rotate(0.5deg); opacity: 0.9; }
}

@keyframes flame-flicker-inner {
    0% { transform: scale(0.9) translateY(0.5px); }
    100% { transform: scale(1.1) translateY(-0.5px); }
}

.flame-outer {
    animation: flame-flicker-outer 1.6s ease-in-out infinite alternate;
    transform-origin: center bottom;
}

.flame-middle {
    animation: flame-flicker-middle 1.2s ease-in-out infinite alternate;
    transform-origin: center bottom;
}

.flame-inner {
    animation: flame-flicker-inner 0.8s ease-in-out infinite alternate;
    transform-origin: center bottom;
}

/* Hero image — relative for badge positioning (merged into L546) */

/* Rank badge — frosted glass pill on image corner */
.hero-rank-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 10;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    letter-spacing: -0.3px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Views pill in hero meta — small rounded callout */
.hero-views-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background: rgba(0, 0, 0, 0.05);
    padding: 2px 10px;
    border-radius: 12px;
    margin-right: 8px;
}

.hero-views-pill i {
    font-size: 10px;
    opacity: 0.6;
}

/* Sidebar card — rank pill (small, rounded, inline) */
.rank-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
    padding: 2px 7px;
    border-radius: 8px;
    letter-spacing: -0.3px;
    flex-shrink: 0;
    min-width: 22px;
}

/* Sidebar card — views pill (small, rounded, inline) */
.views-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    background: rgba(0, 0, 0, 0.04);
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: auto;
}

.views-pill i {
    font-size: 9px;
    opacity: 0.5;
}

/* Dark mode */
body.dark-mode .hero-trending-label {
    background: var(--primary-color, #EC5725);
    color: #fff;
    box-shadow: none;
}

body.dark-mode .hero-trending-label.trending-now-pill {
    background: linear-gradient(90deg, #fff7f0 0px, #ffb347 40px, #ff6a00 70px, #e8320a 100%);
    box-shadow: 0 4px 18px rgba(232, 50, 10, 0.55);
    color: #fff;
}

body.dark-mode .hero-rank-badge {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode .hero-views-pill {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
}

body.dark-mode .rank-pill {
    background: rgba(255, 255, 255, 0.18);
}

body.dark-mode .views-pill {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
}

/* =============================================
   HOMEPAGE — CATEGORY SECTION BLOCK
   Peach background, "Category" + "See all", 3-col grid
   ============================================= */
.category-section {
    border-radius: var(--border-radius-lg);
    padding: 30px;
    margin-bottom: 30px;
    /* Per-block custom property hooks (set via inline style from block builder) */
    --block-card-title-size: 18px;
    --block-card-title-weight: var(--card-title-weight, 700);
    --block-card-radius: 12px;
    --block-image-ratio: 16/9;
    --block-grid-cols: 3;
    --block-section-title-size: 18px;
    --block-section-title-weight: 400;
}

.category-section.section-odd {
    background-color: var(--bg-peach);
}

.category-section.section-even {
    background-color: #FFFFFF;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

/* Inside category sections: keep meta minimal */
.category-section .card-meta {
    display: flex;
    margin-bottom: 6px;
}

.category-section .grid-card .card-body {
    padding: 12px 16px 14px;
}

.category-section-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 24px;
}

.category-section-header h2 {
    font-size: var(--block-section-title-size, 18px);
    font-weight: var(--block-section-title-weight, 400);
    color: var(--block-section-title-color, var(--text-main));
    /* UPPERCASE option targets the section title ONLY (var set inline per block);
       it must never cascade into card titles/excerpts below */
    text-transform: var(--block-section-title-transform, none);
    margin: 0;
}

/* Per-block card title style (from Homepage Builder) */
.category-section .card-title a,
.category-section .block-hero-title a,
.category-section .full-card-title,
.category-section .featured-main-title a {
    font-size: var(--block-card-title-size, inherit);
    font-weight: var(--block-card-title-weight, 700);
}

.category-section-header .see-all {
    font-size: 16px;
    color: #BD2F00;
    font-weight: 600;
    text-decoration: none;
}

.category-section-header .see-all:hover {
    text-decoration: underline;
}

/* =============================================
   LAYOUT: FEATURED + HEADLINES
   One big image+title left, headline list right
   ============================================= */
.layout-featured-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 0 24px;
}

.layout-featured-wrap .featured-main {
    grid-column: 1;
    grid-row: 1 / 20;
}

.layout-featured-wrap .featured-main-image {
    display: block;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.layout-featured-wrap .featured-main-image img {
    width: 100%;
    display: block;
    object-fit: cover;
    aspect-ratio: 16/9;
    transition: transform .3s;
}

.layout-featured-wrap .featured-main-image:hover img {
    transform: scale(1.03);
}

.layout-featured-wrap .featured-main-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
    margin: 14px 0 0;
}

.layout-featured-wrap .featured-main-title a {
    color: var(--text-main);
    text-decoration: none;
}

.layout-featured-wrap .featured-main-title a:hover {
    color: var(--primary-color);
}

.layout-featured-wrap .featured-headline {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-main);
    text-decoration: none;
    transition: color .2s;
}

.layout-featured-wrap .featured-hl-date {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.layout-featured-wrap .featured-main-excerpt {
    font-size: 14px;
    color: var(--text-muted);
    margin: 8px 0 4px;
    line-height: 1.5;
}

.layout-featured-wrap .featured-main-date {
    font-size: 12px;
    color: var(--text-muted);
    display: block;
    margin-top: 6px;
}

.layout-featured-wrap .featured-headline:last-child {
    border-bottom: none;
}

.layout-featured-wrap .featured-headline:hover {
    color: var(--primary-color);
}

@media (max-width: 768px) {
    .layout-featured-wrap {
        grid-template-columns: 1fr;
    }

    .layout-featured-wrap .featured-main {
        grid-row: auto;
        margin-bottom: 16px;
    }

    .layout-featured-wrap .featured-headline {
        grid-column: 1;
    }
}

/* =============================================
   LAYOUT: LIST
   Compact rows with small thumbnail + title
   ============================================= */
.layout-list-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.layout-list-wrap .list-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    text-decoration: none;
    transition: background .2s;
}

.layout-list-wrap .list-item:last-child {
    border-bottom: none;
}

.layout-list-wrap .list-item:hover {
    background: rgba(0, 0, 0, 0.02);
}

.layout-list-wrap .list-item-thumb {
    width: 120px;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

.layout-list-wrap .list-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.layout-list-wrap .list-item-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.layout-list-wrap .list-item-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.4;
    transition: color .2s;
}

.layout-list-wrap .list-item-date {
    font-size: 11px;
    color: var(--text-muted);
}

.layout-list-wrap .list-item:hover .list-item-title {
    color: var(--primary-color);
}

/* =============================================
   LAYOUT: FULL-WIDTH GALLERY
   Large 2-column image cards
   ============================================= */
.layout-full-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.layout-full-wrap .full-card {
    display: block;
    text-decoration: none;
    border-radius: var(--border-radius);
    overflow: hidden;
    background: var(--bg-card);
    box-shadow: var(--shadow-card);
    transition: transform .25s, box-shadow .25s;
}

.layout-full-wrap .full-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 -2px 30px rgba(51, 51, 51, 0.15);
}

.layout-full-wrap .full-card-image img {
    width: 100%;
    display: block;
    object-fit: cover;
    aspect-ratio: 16/9;
}

.layout-full-wrap .full-card-body {
    padding: 16px 20px;
}

.layout-full-wrap .full-card-cat {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary-color);
    margin-bottom: 6px;
}

.layout-full-wrap .full-card-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-main);
    margin: 0 0 8px;
}

.layout-full-wrap .full-card-excerpt {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0 0 6px;
}

.layout-full-wrap .full-card-date {
    font-size: 11px;
    color: var(--text-muted);
    display: block;
}

@media (max-width: 600px) {
    .layout-full-wrap {
        grid-template-columns: 1fr;
    }
}

/* Grid Cards */
.card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

/* Per-block grid column override */
.category-section .card-grid {
    --_cols: var(--block-grid-cols, 3);
}

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

@media (min-width: 992px) {
    .card-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .category-section .card-grid {
        grid-template-columns: repeat(var(--block-grid-cols, 3), 1fr);
    }
}

/* Standard Grid Card — Image top, Title bottom */
.grid-card {
    background: var(--bg-card);
    border-radius: var(--block-card-radius, var(--border-radius));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-card);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.grid-card:hover {
    transform: translateY(-3px);
    box-shadow: rgba(51, 51, 51, 0.15) 0px -2px 30px 0px;
}

.grid-card .card-link {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    text-decoration: none;
    color: inherit;
}

.grid-card .card-image {
}

.grid-card .card-image img {
    width: 100%;
    display: block;
    object-fit: cover;
    aspect-ratio: var(--block-image-ratio, 16/9);
    border-radius: 0;
}

.grid-card .card-body {
    padding: 16px 24px 16px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.grid-card .card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.grid-card .meta-category {
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--primary-color);
    padding: 3px 10px;
    border-radius: 4px;
    line-height: 1.4;
    white-space: nowrap;
}

.grid-card .meta-date {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}

.grid-card .meta-read-time {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
    white-space: nowrap;
}

.grid-card .card-title {
    font-size: var(--block-card-title-size, 18px);
    font-weight: var(--block-card-title-weight, 700);
    line-height: 1.5;
    color: var(--text-main);
    margin: 0 0 8px;
}

.grid-card .card-title a {
    color: inherit;
    text-decoration: none;
}

.grid-card .card-title a:hover {
    color: var(--primary-color);
}

.grid-card .card-excerpt {
    font-size: 14px;
    line-height: 21px;
    color: var(--text-main);
    margin: 0 0 8px;
    font-weight: 400;
}

/* =============================================
   AD SLOTS — Reusable containers for ads
   ============================================= */
.ad-slot {
    text-align: center;
    margin: 30px 0;
    clear: both;
    overflow: visible; /* Must be visible for responsive ads that use negative margins */
    width: 100%;
}

/* Ensure AdSense responsive ins elements fill properly */
.ad-slot ins.adsbygoogle {
    display: block !important;
    width: 100%;
    min-height: 90px;
}

.ad-slot-label {
    display: block;
    font-size: 10px;
    font-weight: 400;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
}

/* Horizontal line decorators around ad label */
.ad-slot-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
    overflow: hidden; /* keep this on the label divider only */
}

.ad-slot-divider::before,
.ad-slot-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--border-light);
}

.ad-slot-divider span {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    white-space: nowrap;
}

/* Common slot sizes — responsive-ad friendly */
.ad-slot-banner {
    display: block;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    min-height: 90px;
}

.ad-slot-sidebar {
    display: block;
    width: 100%;
    margin-bottom: 20px;
    text-align: center;
    min-height: 250px;
}

.ad-slot-incontent {
    display: block;
    width: 100%;
    margin: 20px auto;
    text-align: center;
    min-height: 250px;
}

/* In-content ad marker — transparent wrapper for Continue Reading positioning.
   Must not interfere with AdsKeeper/MGID sizing or viewability. */
.r34c8-ic-ad {
    display: block;
    width: 100%;
    margin: 20px 0;
    clear: both;
}

/* Mobile ad slots: fill their container naturally.
   AdsKeeper/MGID responsive ads auto-size to fit.
   No breakout hack needed — avoids stacking context issues
   that interfere with ad network viewability detection. */
@media (max-width: 768px) {
    .ad-slot {
        width: 100%;
        margin: 20px 0;
    }

    .ad-slot-banner,
    .ad-slot-incontent {
        min-height: 50px;
    }

    /* ── AdsKeeper / MGID auto-placed widgets (mobile) ──────────────────────
       These are injected by AdsKeeper's OWN JS, so the theme can't add a class
       to them — attribute selectors are the only lever we have. AdsKeeper sets
       inline widths and renders its "ADSKEEPER" attribution badge at the
       widget's right edge, so without !important the widget renders wider than
       the column and #page{overflow-x:hidden} (or any overflow:hidden ancestor)
       clips that badge — the classic 'ADSKEEP…' cut-off.

       1) Hard-cap the container AND every descendant (inner divs, iframe, img)
          to 100% so nothing can overflow → nothing gets cropped. !important is
          required to beat AdsKeeper's inline styles. */
    [id^="_mgwidget_"],
    [data-type="_mgwidget"] {
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }
    /* Cap every descendant AND zero its min-width: AdsKeeper sometimes sets a
       fixed inline min-width on the inner card/iframe that is WIDER than our
       column — min-width beats max-width, so without min-width:0 the inner
       content stays oversized and overflows both sides (header + badge clipped). */
    [id^="_mgwidget_"] *,
    [data-type="_mgwidget"] * {
        max-width: 100% !important;
        min-width: 0 !important;
    }
    [id^="_mgwidget_"] iframe,
    [data-type="_mgwidget"] iframe,
    [id^="_mgwidget_"] img,
    [data-type="_mgwidget"] img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* 2) FULL-WIDTH ADS toggle ON only (body.r34c8-ads-fw, added by
       r34c8_body_classes() when r34c8_ad_fullwidth is on). Break AdsKeeper
       widgets out of the content side-padding to the FULL screen width. When the
       toggle is OFF this class is ABSENT, so only the cap rule (1) above applies
       → widgets stay at width:100% of their container and follow the content
       padding like everything else (normal behavior). Full-bleed via 100vw +
       negative margins is depth-independent; #page{overflow-x:hidden} clips any
       sub-pixel spill. */
    body.r34c8-ads-fw [id^="_mgwidget_"],
    body.r34c8-ads-fw [data-type="_mgwidget"] {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
    }
    /* Category-grid widgets already span the row via grid-column:1/-1 — keep
       them in-flow so the full-bleed margins don't shove them off-canvas.
       Scoped to body.r34c8-ads-fw with higher specificity than the site-wide
       full-bleed rule (2) above so grid ads are never 100vw-bled when ON. */
    body.r34c8-ads-fw .cat-grid > [id^="_mgwidget_"],
    body.r34c8-ads-fw .cat-grid > [data-type="_mgwidget"],
    body.r34c8-ads-fw .cat-grid > .r34c8-ic-ad,
    body.r34c8-ads-fw .cat-grid > .r34c8-ad-fw {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 3) IN-CONTENT ads — NEVER full-bleed. The theme injects in-content ads as
       <div class="r34c8-ic-ad [r34c8-ad-fw]">…AdsKeeper widget…</div> between
       paragraphs INSIDE .entry-content, which AdsKeeper then wraps in its OWN
       .clipped-content (overflow:hidden) gate. In Full-Width Ads mode the WRAPPER
       gets r34c8-ad-fw → 100vw full-bleed → it overflows the clipped-content box
       and is clipped on BOTH sides ("STORY YOU MUST READ" → "TORY…", and the
       badge → "ADSKEEPE"). Force the wrapper AND the widget back in flow at
       content-column width with no negative margins → nothing overflows → the
       overflow:hidden gate has nothing to crop. (.entry-content has no side
       padding, so width:100% already fills the whole text column.) These
       selectors are more specific than the body.r34c8-ads-fw full-bleed rule
       above and than the .r34c8-ad-fw 100vw rule, so they win even with the
       toggle ON. */
    body.single .entry-content .r34c8-ic-ad,
    body.single .entry-content .r34c8-ad-fw,
    body.single .entry-content [id^="_mgwidget_"],
    body.single .entry-content [data-type="_mgwidget"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 4) IN-CONTENT ads stay at content-column width — even with the toggle ON.
       (Reverted in v5.33.11.) We tried full-bleeding in-content ads by dropping
       AdsKeeper's overflow:hidden on .clipped-content. That BROKE AdsKeeper's own
       layout: its auto-placed widgets are positioned against that clipped box, so
       removing the clip let them spill OUT and overlap the article text (multiple
       ads stacked on top of each other and on the paragraphs). AdsKeeper's
       container clip is load-bearing for its layout, so we leave it alone. Net:
       in-content ads fill the full text column (rule 3) and are never cropped, but
       cannot break PAST the column. Only TOP/BEFORE/AFTER and outside-content
       AdsKeeper widgets full-bleed when the toggle is on. */
}

/* ── Ad Skeleton Placeholder (CLS prevention) ── */
.ad-slot-skeleton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: inherit;
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: ad-skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: 6px;
}
.ad-slot-skeleton span::after {
    content: 'Loading ad...';
    font-size: 11px;
    color: #bbb;
    text-transform: uppercase;
    letter-spacing: 1px;
}
body.dark-mode .ad-slot-skeleton {
    background: linear-gradient(90deg, #1a1a1a 25%, #252525 50%, #1a1a1a 75%);
    background-size: 200% 100%;
}
body.dark-mode .ad-slot-skeleton span::after {
    color: #555;
}
@keyframes ad-skeleton-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Deferred slots — contain template content, prevent CLS */
.ad-slot-deferred .ad-slot-banner {
    position: relative;
    overflow: hidden;
}
/* Loaded transition */
.ad-slot-loaded .ad-slot-banner {
    animation: ad-slot-fadein 0.3s ease-out;
}
@keyframes ad-slot-fadein {
    from { opacity: 0.5; }
    to { opacity: 1; }
}

/* =============================================
   Admin Visual Ad Previews
   ============================================= */
.ad-slot.ad-preview-mode,
.ad-slot-sticky-bottom.ad-preview-mode {
    border: 2px dashed #3b82f6 !important;
    background-color: rgba(59, 130, 246, 0.05) !important;
    position: relative;
    min-height: 100px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 30px auto;
}

.ad-slot-sticky-bottom.ad-preview-mode {
    margin: 0;
}

.ad-preview-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #3b82f6;
    color: #fff;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
    pointer-events: none;
    white-space: nowrap;
    z-index: 10;
}

/* Bottom sticky native ad bar (MGID-style / Anchor ads) */
.ad-slot-sticky-bottom {
    position: fixed;
    /* MOB-2: Bottom Safe Area Inset */
    bottom: env(safe-area-inset-bottom, 0px);
    left: 0;
    right: 0;
    z-index: 999;
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    padding: 8px 16px;
    min-height: 60px;
    display: none;
    /* Hidden by default, show when ad code is inserted */
}

.ad-slot-sticky-bottom.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =============================================
   SINGLE POST — Article Layout with Sidebar
   ============================================= */
.single-post .main-content {
    background-color: #FFFFFF;
    /* Very light gray to pop the white shadow */
}

.single-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 30px 0 60px;
}

@media (min-width: 992px) {
    .single-layout {
        grid-template-columns: minmax(0, var(--content-width)) var(--sidebar-width);
        gap: 44px;
        justify-content: center;
    }
}

/* Article Content Column — matches R34C8 card */
.article-content {
    min-width: 0;
    background: #FFFFFF;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-card);
    padding: 24px;
}

/* Featured Image */
.article-featured-image {
    margin-bottom: 24px;
    overflow: hidden;
    border-radius: var(--border-radius);
}

.article-featured-image.has-aspect-ratio {
    position: relative;
}

.article-featured-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;
    border-radius: var(--border-radius);
}

.article-featured-image.has-aspect-ratio img {
    position: absolute;
    top: 0;
    left: 0;
}

.article-featured-image figcaption {
    font-size: 14px;
    color: #888;
    padding: 8px 0;
    line-height: 1.4;
}

/* Article Title — matches R34C8: 32px/44.8px */
.article-title-single {
    font-size: 32px;
    font-weight: 700;
    line-height: 44.8px;
    color: var(--text-main);
    margin: 0 0 16px;
    font-family: var(--font-stack);
    letter-spacing: normal;
}

/* Author & Share Row */
.article-author-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}

.author-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.author-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    padding: 3px;
    border: 1px solid var(--primary-color);
}

/* Initials-based avatar fallback when Gravatar is unavailable */
.author-avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-color), #ff7043);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-decoration: none;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 8px rgba(217, 56, 2, 0.2);
    flex-shrink: 0;
}

.author-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.author-details .author-name {
    font-size: 17px;
    color: #292929;
    margin-bottom: 2px;
}

.author-details .author-by {
    color: #757575;
    font-weight: 400;
}

.author-details .author-link {
    font-weight: 700;
    color: #1a202c;
    text-decoration: none;
}

.author-details .article-date-time {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #8c8c8c;
}

.author-details .post-views-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    color: var(--primary-color);
    background: rgba(217, 56, 2, 0.06); /* very subtle tint */
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid rgba(217, 56, 2, 0.15);
}
.author-details .post-views-pill i {
    font-size: 13px;
    opacity: 0.9;
}

/* Share Buttons */
.share-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}

.share-btn {
    width: 38px;
    height: 38px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    text-decoration: none;
    transition: background-color 0.2s, opacity 0.2s;
}

.share-btn:hover {
    opacity: 0.85;
    color: #fff;
}

.share-btn-copy {
    background-color: #000000;
}

.share-btn-email {
    background-color: #D65A31;
}

.share-btn-flipboard {
    background-color: #DF382C;
}

.share-btn-twitter {
    background-color: #000000;
}

.share-btn-facebook {
    background-color: #4C69BA;
}

.share-btn-facebook-full {
    border-radius: 6px;
    padding: 0 16px;
    width: auto;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
}

/* Lead Paragraph (Automatically applied to first paragraph via CSS) */
/* Base Lead Paragraph Styles */
.article-lead,
body.has-lead-paragraph .entry-content > p:first-of-type {
    font-size: 22px;
    line-height: 1.5;
    color: #1a202c;
    margin-bottom: 24px;
    transition: all 0.3s ease;
}

/* --- Lead Text Styles --- */
body:not(.lead-text-bold):not(.lead-text-italic):not(.lead-text-normal) .article-lead,
body:not(.lead-text-bold):not(.lead-text-italic):not(.lead-text-normal).has-lead-paragraph .entry-content > p:first-of-type,
body.lead-text-bold-italic .article-lead,
body.lead-text-bold-italic.has-lead-paragraph .entry-content > p:first-of-type {
    font-weight: 700;
    font-style: italic;
}

body.lead-text-bold .article-lead,
body.lead-text-bold.has-lead-paragraph .entry-content > p:first-of-type {
    font-weight: 700;
    font-style: normal;
}

body.lead-text-italic .article-lead,
body.lead-text-italic.has-lead-paragraph .entry-content > p:first-of-type {
    font-weight: 400;
    font-style: italic;
}

body.lead-text-normal .article-lead,
body.lead-text-normal.has-lead-paragraph .entry-content > p:first-of-type {
    font-weight: 400;
    font-style: normal;
}

/* --- Lead Design Layouts --- */
/* 1. Left Border Accent (Box) */
body:not(.lead-design-quote):not(.lead-design-minimal) .article-lead,
body:not(.lead-design-quote):not(.lead-design-minimal).has-lead-paragraph .entry-content > p:first-of-type,
body.lead-design-border-left .article-lead,
body.lead-design-border-left.has-lead-paragraph .entry-content > p:first-of-type {
    padding: 16px 20px;
    background: #FFF8F6;
    border-left: 4px solid var(--primary-color);
    border-radius: 0 8px 8px 0;
}

/* 2. Quotation (Premium Hanging Quote) */
body.lead-design-quote .article-lead,
body.lead-design-quote.has-lead-paragraph .entry-content > p:first-of-type {
    position: relative;
    padding: 12px 0 16px 54px;
    background: transparent;
    border: none;
    font-size: 26px;
    line-height: 1.4;
    color: var(--primary-color);
}
body.lead-design-quote .article-lead::before,
body.lead-design-quote.has-lead-paragraph .entry-content > p:first-of-type::before {
    content: '“';
    position: absolute;
    left: 0;
    top: -4px;
    font-family: Georgia, serif;
    font-size: 80px;
    color: var(--primary-color);
    opacity: 1;
    line-height: 1;
}

/* 3. Minimalist (No Box) */
body.lead-design-minimal .article-lead,
body.lead-design-minimal.has-lead-paragraph .entry-content > p:first-of-type {
    padding: 0;
    background: transparent;
    border: none;
    font-size: 24px;
    color: var(--primary-color);
}

/* Article Body Content — matches R34C8: 24px/36px */
.entry-content {
    font-size: 24px;
    font-weight: 400;
    line-height: 36px;
    color: var(--text-main);
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

.entry-content p {
    margin-bottom: 16px;
}

/* ── Article Heading Design System ── */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    font-family: var(--heading-stack, var(--font-stack));
    color: var(--text-main);
    line-height: 1.3;
    letter-spacing: -0.02em;
    word-break: break-word;
}

/* H1 — Hero Statement (rarely used in articles, but available) */
.entry-content h1 {
    font-size: 2.25em;
    font-weight: 900;
    margin: 48px 0 24px;
    line-height: 1.15;
    letter-spacing: -0.03em;
    position: relative;
    padding-bottom: 20px;
}
.entry-content h1::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 64px;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color, #EC5725), #FF8A5C);
    border-radius: 4px;
}

/* H2 — Major Sections (primary content dividers) */
.entry-content h2 {
    font-size: 1.75em;
    font-weight: 800;
    margin: 48px 0 20px;
    padding-bottom: 14px;
    position: relative;
    line-height: 1.25;
    letter-spacing: -0.025em;
}
.entry-content h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 48px;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color, #EC5725), #FF8A5C);
    border-radius: 3px;
    transition: width 0.3s ease;
}
.entry-content h2:hover::after {
    width: 72px;
}

/* H3 — Sub-sections (left accent bar) */
.entry-content h3 {
    font-size: 1.35em;
    font-weight: 700;
    margin: 36px 0 14px;
    padding-left: 16px;
    position: relative;
    line-height: 1.35;
}
.entry-content h3::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.15em;
    bottom: 0.15em;
    width: 4px;
    background: linear-gradient(180deg, var(--primary-color, #EC5725), #6366f1);
    border-radius: 4px;
}

/* H4 — Key Points (uppercase label style) */
.entry-content h4 {
    font-size: 1.1em;
    font-weight: 700;
    margin: 28px 0 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--primary-color, #EC5725);
    position: relative;
    padding-left: 20px;
}
.entry-content h4::before {
    content: '▸';
    position: absolute;
    left: 0;
    font-size: 1.1em;
    line-height: inherit;
    color: var(--primary-color, #EC5725);
}

/* H5 — Detail Labels (pill-tag look) */
.entry-content h5 {
    font-size: 0.95em;
    font-weight: 700;
    margin: 24px 0 8px;
    display: inline-block;
    background: linear-gradient(135deg, rgba(236, 87, 37, 0.08), rgba(99, 102, 241, 0.06));
    padding: 4px 14px;
    border-radius: 6px;
    letter-spacing: 0.02em;
    color: var(--text-main);
    border-left: 3px solid var(--primary-color, #EC5725);
}

/* H6 — Fine Print / Overline (muted, small-caps feel) */
.entry-content h6 {
    font-size: 0.85em;
    font-weight: 600;
    margin: 20px 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #888;
    position: relative;
    padding-bottom: 6px;
}
.entry-content h6::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 24px;
    height: 2px;
    background: #ddd;
    border-radius: 2px;
}


.entry-content img {
    margin: 28px 0;
    border-radius: 0;
}

.entry-content blockquote {
    border-left: 4px solid var(--primary-color);
    padding: 16px 24px;
    margin: 24px 0;
    background: #FFF8F6;
    font-style: italic;
    font-size: 22px;
    line-height: 1.5;
    border-radius: 0 8px 8px 0;
}

.entry-content iframe,
.entry-content embed,
.entry-content object {
    max-width: 100%;
}

.entry-content a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 400;
}

.entry-content a:hover {
    text-decoration: underline;
    color: var(--primary-dark);
}

.entry-content strong {
    font-weight: 700;
}

/* Image Captions within content */
.wp-caption {
    max-width: 100%;
    margin: 24px 0;
}

.wp-caption img {
    margin: 0;
}

.wp-caption-text {
    font-size: 14px;
    color: #888;
    padding: 8px 0;
    line-height: 1.4;
}

/* =============================================
   CONTINUE READING — Collapsible Content
   ============================================= */
.r34c8-cr {
    position: relative;
    /* overflow is NOT set here — JS adds it alongside max-height
       to prevent the collapsed wrapper from hiding content
       while siblings render below it */
}

/* JS applies this class when it's ready to collapse */
.r34c8-cr--collapsed {
    overflow: hidden;
}

/* Open state: no clipping */
.r34c8-cr--open {
    overflow: visible !important;
    max-height: none !important;
}

/* Overlay: hidden by default, JS shows it only when content is tall */
.r34c8-cr-overlay {
    display: none;
    /* JS sets display:flex when needed */
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.8) 50%,
            rgba(255, 255, 255, 1) 100%);
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 12px;
    z-index: 10;
    transition: opacity 0.4s ease;
    /* Let taps pass through the gradient — only the button is clickable */
    pointer-events: none;
}

/* Button */
.r34c8-cr-btn {
    font-family: inherit;
    font-size: 14px;
    padding: 10px 32px;
    border-radius: 40px;
    border: none;
    background: var(--primary-color);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(236, 87, 37, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: transform 0.15s, background 0.15s, box-shadow 0.15s;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    /* Re-enable pointer events (overlay has none) + kill mobile tap delay */
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

.r34c8-cr-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(236, 87, 37, 0.45);
}
.r34c8-cr-btn:active {
    transform: scale(0.97);
    box-shadow: 0 2px 8px rgba(236, 87, 37, 0.3);
}
@media (max-width: 768px) {
    .r34c8-cr-btn {
        padding: 12px 40px;
        font-size: 13px;
        min-height: 44px;
    }
}

/* =============================================
   CONTINUE READING — Button Styles (v5.52.0)
   Six designs, each centered on a divider line
   (Theme Settings → Single Article → Continue
   Reading → Button Style). Senior-friendly.
   ============================================= */

/* Shared: the button row draws a line on each side of the button */
.r34c8-cr-btnrow::before,
.r34c8-cr-btnrow::after {
    content: '';
    flex: 1 1 0;
    min-width: 24px;
    height: 2px;
    margin: 0 14px;
}
/* Inside the collapse overlay the button sits at the bottom — align the
   side lines to the button's vertical middle (12px pad + 44px btn / 2) */
.r34c8-cr-overlay.r34c8-cr-btnrow::before,
.r34c8-cr-overlay.r34c8-cr-btnrow::after {
    align-self: flex-end;
    margin-bottom: 33px;
}

/* 1) CLASSIC — gradient glow pill on a fading orange line */
.r34c8-cr-btn--classic {
    background: linear-gradient(135deg, #FF7A1A, var(--primary-color));
    box-shadow: 0 6px 24px rgba(217, 56, 2, 0.5);
}
.r34c8-cr-btn--classic:hover { background: linear-gradient(135deg, #FF7A1A, var(--primary-color)); filter: brightness(1.06); }
.r34c8-cr-btnrow--classic::before { background: linear-gradient(to left,  var(--primary-color), rgba(217, 56, 2, 0)); }
.r34c8-cr-btnrow--classic::after  { background: linear-gradient(to right, var(--primary-color), rgba(217, 56, 2, 0)); }

/* 2) KEEP — bare text between dotted lines, » « accents */
.r34c8-cr-btn--keep {
    background: transparent;
    color: #374151;
    box-shadow: none;
    padding: 10px 6px;
}
.r34c8-cr-btn--keep::before { content: '\bb'; color: var(--primary-color); margin-right: 10px; font-size: 19px; line-height: 1; }
.r34c8-cr-btn--keep::after  { content: '\ab'; color: var(--primary-color); margin-left: 10px;  font-size: 19px; line-height: 1; }
.r34c8-cr-btn--keep:hover { background: transparent; color: #111827; transform: none; box-shadow: none; }
.r34c8-cr-btn--keep svg { stroke: var(--primary-color); }
.r34c8-cr-btnrow--keep::before,
.r34c8-cr-btnrow--keep::after { height: 0; border-top: 2px dotted #C7CCD4; }

/* 3) BOOK — white card with a book icon, thin grey line */
.r34c8-cr-btn--book {
    background: #fff;
    color: #1F2937;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(17, 24, 39, 0.10);
}
.r34c8-cr-btn--book::before {
    content: '\f518';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--primary-color);
    margin-right: 10px;
    font-size: 16px;
}
.r34c8-cr-btn--book:hover { background: #F9FAFB; color: #111827; }
.r34c8-cr-btn--book svg { stroke: var(--primary-color); }
.r34c8-cr-btnrow--book::before,
.r34c8-cr-btnrow--book::after { height: 1px; background: #D8DCE2; }

/* 4) NEXT — orange text link with a circled chevron, dot-tipped orange line */
.r34c8-cr-btn--next {
    background: transparent;
    color: var(--primary-color);
    box-shadow: none;
    padding: 10px 6px;
    letter-spacing: 1.5px;
}
.r34c8-cr-btn--next:hover { background: transparent; color: var(--primary-dark); transform: none; box-shadow: none; }
.r34c8-cr-btn--next svg {
    border: 2px solid currentColor;
    border-radius: 50%;
    padding: 3px;
    width: 22px;
    height: 22px;
}
.r34c8-cr-btnrow--next::before {
    height: 8px;
    background: radial-gradient(circle at calc(100% - 4px) 50%, var(--primary-color) 3px, rgba(217, 56, 2, 0) 4px),
                linear-gradient(to left, rgba(217, 56, 2, 0.75), rgba(217, 56, 2, 0)) no-repeat center / 100% 1px;
}
.r34c8-cr-btnrow--next::after {
    height: 8px;
    background: radial-gradient(circle at 4px 50%, var(--primary-color) 3px, rgba(217, 56, 2, 0) 4px),
                linear-gradient(to right, rgba(217, 56, 2, 0.75), rgba(217, 56, 2, 0)) no-repeat center / 100% 1px;
}

/* 5) SOFT — light warm pill with an orange circle arrow */
.r34c8-cr-btn--soft {
    background: #FFF4ED;
    color: #7A2E0E;
    box-shadow: 0 4px 14px rgba(217, 56, 2, 0.12);
}
.r34c8-cr-btn--soft::before {
    content: '\f054';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    background: var(--primary-color);
    color: #fff;
    width: 26px;
    height: 26px;
    line-height: 26px;
    border-radius: 50%;
    text-align: center;
    font-size: 12px;
    margin-right: 10px;
    flex-shrink: 0;
}
.r34c8-cr-btn--soft:hover { background: #FFEAD9; color: #7A2E0E; }
.r34c8-cr-btnrow--soft::before,
.r34c8-cr-btnrow--soft::after { height: 1px; background: #E3E6EB; }

/* 6) OUTLINE — outlined pill on a dot-ended grey line */
.r34c8-cr-btn--outline {
    background: #fff;
    color: #111827;
    border: 2px solid #111827;
    box-shadow: none;
}
.r34c8-cr-btn--outline:hover { background: #111827; color: #fff; }
.r34c8-cr-btnrow--outline::before {
    height: 8px;
    background: radial-gradient(circle at 4px 50%, #9AA1AB 3px, rgba(154, 161, 171, 0) 4px),
                linear-gradient(to right, rgba(154, 161, 171, 0) 0 8px, #C9CED6 8px) no-repeat center / 100% 2px;
}
.r34c8-cr-btnrow--outline::after {
    height: 8px;
    background: radial-gradient(circle at calc(100% - 4px) 50%, #9AA1AB 3px, rgba(154, 161, 171, 0) 4px),
                linear-gradient(to left, rgba(154, 161, 171, 0) 0 8px, #C9CED6 8px) no-repeat center / 100% 2px;
}

/* =============================================
   CONTINUE READING — Button Styles, batch 2 (v5.53.2)
   Generic UI-kit set (Pill/Text Link/Divider/Outline/
   Label/Sticky Tab), evaluated against 65+ readability
   criteria: large text, high contrast, clear arrow,
   48px+ tap area, simple/familiar shapes.
   ============================================= */

/* 7) SOLID — flat solid pill, soft drop shadow (not glow), largest tap area */
.r34c8-cr-btn--solid {
    background: var(--primary-color);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    padding: 12px 32px;
    min-height: 48px;
}
.r34c8-cr-btn--solid:hover { background: var(--primary-dark); }
.r34c8-cr-btnrow--solid::before,
.r34c8-cr-btnrow--solid::after { height: 1px; background: #E5E7EB; }

/* 8) LINK — bare text, zero chrome, zero divider line */
.r34c8-cr-btn--link {
    background: transparent;
    color: var(--primary-color);
    box-shadow: none;
    padding: 10px 6px;
    font-size: 15px;
}
.r34c8-cr-btn--link:hover { background: transparent; color: var(--primary-dark); transform: none; box-shadow: none; }
.r34c8-cr-btn--link svg { stroke: var(--primary-color); }
.r34c8-cr-btnrow--link::before,
.r34c8-cr-btnrow--link::after { background: none; height: 0; }

/* 9) DIVIDER — plain orange text between solid neutral lines (newspaper feel) */
.r34c8-cr-btn--divider {
    background: transparent;
    color: var(--primary-color);
    box-shadow: none;
    padding: 10px 6px;
}
.r34c8-cr-btn--divider:hover { background: transparent; color: var(--primary-dark); transform: none; box-shadow: none; }
.r34c8-cr-btn--divider svg { stroke: var(--primary-color); }
.r34c8-cr-btnrow--divider::before,
.r34c8-cr-btnrow--divider::after { height: 1px; background: #D1D5DB; }

/* 10) BORDERED — white pill, orange border + text, lighter visual weight */
.r34c8-cr-btn--bordered {
    background: #fff;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    box-shadow: none;
}
.r34c8-cr-btn--bordered:hover { background: var(--primary-color); color: #fff; }
.r34c8-cr-btnrow--bordered::before,
.r34c8-cr-btnrow--bordered::after { height: 1px; background: #E5E7EB; }

/* 11) LABEL — small solid tag, compact corners, less visual space */
.r34c8-cr-btn--label {
    background: var(--primary-color);
    border-radius: 8px;
    padding: 9px 18px;
    min-height: 38px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}
.r34c8-cr-btn--label:hover { background: var(--primary-dark); }
.r34c8-cr-btnrow--label::before,
.r34c8-cr-btnrow--label::after { height: 1px; background: #E5E7EB; }

/* 12) TAB — bookmark tab straddling the card's bottom edge (v5.53.4, rebuilt
   to match the user's reference mockup). Three layers, bottom to top:
     1. Row ::before (z:-2) — the "page below the card": a flat light-grey
        band whose 1px top border + inset shadow read as the white content
        card ending, with the grey page background showing underneath.
     2. Button ::before/::after (z:-1) — darker-orange folded ribbon ends
        that peek out from behind the pill's bottom corners (skewed so the
        outer edge hangs lower, like a bookmark ribbon's cut tails).
     3. The orange pill itself, straddling the edge: ~60% above the card
        edge in the fade, ~40% hanging below into the grey band.
   STACKING WARNING: the ribbon ends rely on the classic negative-z-index
   trick — they must join the OVERLAY's stacking context (overlay is
   position:absolute + z-index:10) so z-index:-1 slides them behind the
   pill's own background. That only works while the BUTTON does not create
   a stacking context, so this button must never get transform / z-index /
   opacity / filter in ANY state (rest, hover, active, animation, loading)
   — the lift is done with position:relative + bottom, and every inherited
   transform is explicitly overridden below. Violating this paints the
   ribbon ends ON TOP of the pill as dark corner patches. */
.r34c8-cr-btn--tab {
    background: var(--primary-color);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
    position: relative;
    bottom: 6px;
    transition: bottom 0.15s, background 0.15s, box-shadow 0.15s;
}
.r34c8-cr-btn--tab:hover {
    background: var(--primary-dark);
    transform: none;
    bottom: 8px;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
}
.r34c8-cr-btn--tab:active { transform: none; bottom: 5px; }
/* Folded ribbon ends behind the pill's bottom corners */
.r34c8-cr-btn--tab::before,
.r34c8-cr-btn--tab::after {
    content: '';
    position: absolute;
    z-index: -1;
    bottom: -7px;
    width: 28px;
    height: 26px;
    background: #B23002;
}
.r34c8-cr-btn--tab::before {
    left: -13px;
    border-radius: 8px 0 0 8px;
    transform: skewY(-12deg);
}
.r34c8-cr-btn--tab::after {
    right: -13px;
    border-radius: 0 8px 8px 0;
    transform: skewY(12deg);
}
/* The card edge + grey "page below" band (margin:0 kills the shared side-line
   rules' 14px side insets and 33px bottom margin) */
.r34c8-cr-overlay.r34c8-cr-btnrow--tab::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 34px;
    margin: 0;
    background: #F1F3F6;
    border-top: 1px solid #DDE1E7;
    box-shadow: inset 0 8px 12px -8px rgba(17, 24, 39, 0.18);
    z-index: -2;
}
.r34c8-cr-btnrow--tab::after { content: none; }
/* Loading dims via opacity globally — opacity < 1 creates a stacking context
   (see warning above), so Sticky Tab dims its label color instead */
.r34c8-cr-btn--tab.r34c8-cr-btn--loading { opacity: 1; color: rgba(255, 255, 255, 0.7); }

/* "Click here" animation (Theme Settings toggle) — gentle, senior-friendly:
   a slow breathing pulse + the little arrow bobs down. No fast flashing. */
.r34c8-cr-btn.r34c8-cr-anim { animation: r34c8CrNudge 2.6s ease-in-out infinite; }
.r34c8-cr-btn.r34c8-cr-anim svg { animation: r34c8CrBob 1.6s ease-in-out infinite; }
.r34c8-cr-btn--classic.r34c8-cr-anim { animation: r34c8CrPulse 2.6s ease-in-out infinite; }
/* Sticky Tab must never be transformed — a running transform animation makes
   the button a stacking context, which yanks its z-index:-1 ribbon ends from
   behind the pill and paints them on top (see the stacking warning at style
   12). Its nudge pulses the shadow instead; the arrow still bobs (the svg is
   a child — transforming IT is safe). */
.r34c8-cr-btn--tab.r34c8-cr-anim { animation: r34c8CrTabNudge 2.6s ease-in-out infinite; }
@keyframes r34c8CrNudge {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}
@keyframes r34c8CrTabNudge {
    0%, 100% { box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22); }
    50%      { box-shadow: 0 10px 26px rgba(217, 56, 2, 0.55); }
}
@keyframes r34c8CrBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(4px); }
}
@keyframes r34c8CrPulse {
    0%, 100% { transform: scale(1);    box-shadow: 0 6px 24px rgba(217, 56, 2, 0.5); }
    50%      { transform: scale(1.04); box-shadow: 0 8px 36px rgba(217, 56, 2, 0.8); }
}
@media (prefers-reduced-motion: reduce) {
    .r34c8-cr-anim,
    .r34c8-cr-anim svg { animation: none !important; }
}

/* Loading state while the next story part is fetched */
.r34c8-cr-btn--loading {
    opacity: 0.75;
    pointer-events: none;
}

/* Seamless Parts: an inline-loaded story part + end-of-story marker */
.r34c8-cr-part { margin-top: 8px; }
.r34c8-cr-end {
    text-align: center;
    margin: 36px 0 20px;
    font-size: 14px;
    font-weight: 600;
    color: #9CA3AF;
}

/* Dark-mode overrides for these styles live next to the global dark-mode
   .r34c8-cr-btn rule (later in this file) so the cascade order is right. */

/* Post Tags */
.post-tags {
    position: relative;
    z-index: 2;
    margin-top: 44px;
    padding-top: 24px;
    border-top: 1px solid var(--border-light);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.post-tags a {
    display: inline-flex;
    align-items: center;
    background: var(--primary-color);
    color: #fff;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    min-height: 40px;
    transition: background 0.2s;
}

.post-tags a:hover {
    background: var(--primary-dark);
    color: #fff;
}

/* =============================================
   SIDEBAR
   ============================================= */
.sidebar {
    position: relative;
}

.sidebar-widget {
    margin-bottom: 30px;
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.08);
    padding: 30px;
}

.sidebar-widget-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

/* Top News Widget */
.top-news-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.top-news-item {
    padding: 16px 0;
    border-bottom: 1px solid var(--border-light);
}

.top-news-item:first-child {
    padding-top: 0;
}

.top-news-item:last-child {
    border-bottom: none;
}

.top-news-item .news-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--text-main);
    margin-bottom: 6px;
}

.top-news-item .news-title a {
    color: inherit;
    text-decoration: none;
}

.top-news-item .news-title a:hover {
    color: var(--primary-color);
}

.top-news-item .news-date {
    font-size: 14px;
    color: var(--text-muted);
}

/* Sticky sidebar — applied to <aside> when setting is on */
@media (min-width: 992px) {
    .sidebar.sidebar-is-sticky {
        position: sticky;
        top: 76px;
        align-self: start;
    }
}

/* =============================================
   RELATED ARTICLES — Bottom of Single Post
   ============================================= */
.related-articles {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid var(--border-light);
}

.related-articles h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
}

/* --- CLASSIC STYLE --- */
.related-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.related-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.related-item .related-text {
    flex: 1;
    min-width: 0;
}

.related-item-featured {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 24px;
}

.related-item-featured .related-image {
    width: 100%;
}

.related-item-featured .related-image img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 12px;
}

.related-item .related-text .related-title,
.related-item-featured .related-text .related-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text-main);
}

.related-item .related-text .related-title a,
.related-item-featured .related-text .related-title a {
    color: inherit;
    text-decoration: none;
}

.related-item .related-text .related-title a:hover,
.related-item-featured .related-text .related-title a:hover {
    color: var(--primary-color);
}

.related-item .related-text .related-date {
    font-size: 14px;
    color: var(--text-muted);
    margin-top: 6px;
}

.related-item .related-image {
    flex-shrink: 0;
    width: 140px;
}

.related-item .related-image img {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    border-radius: 8px;
}

/* --- GRID STYLE --- */
.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.related-grid-card {
    display: block;
    text-decoration: none;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: transform 0.25s, box-shadow 0.25s;
}

.related-grid-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

.related-grid-image {
    aspect-ratio: 16/10;
    overflow: hidden;
    background: #f0f0f0;
}

.related-grid-image img,
.related-grid-image svg,
.related-grid-image .placeholder-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s;
}

.related-grid-card:hover .related-grid-image img {
    transform: scale(1.04);
}

.related-grid-body {
    padding: 14px 16px 16px;
}

.related-grid-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-main);
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-grid-card:hover .related-grid-title {
    color: var(--primary-color);
}

.related-grid-date {
    font-size: 12px;
    color: var(--text-muted);
}

/* --- MINIMAL STYLE --- */
.related-minimal {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.related-minimal-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    text-decoration: none;
    transition: background 0.2s, padding-left 0.2s;
}

.related-minimal-item:last-child {
    border-bottom: none;
}

.related-minimal-item:hover {
    background: rgba(0, 0, 0, 0.02);
    padding-left: 6px;
}

.related-minimal-num {
    font-size: 28px;
    font-weight: 800;
    color: rgba(0, 0, 0, 0.08);
    line-height: 1;
    flex-shrink: 0;
    width: 36px;
    text-align: center;
}

.related-minimal-item:hover .related-minimal-num {
    color: var(--primary-color);
    opacity: 0.3;
}

.related-minimal-thumb {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.related-minimal-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.related-minimal-text {
    flex: 1;
    min-width: 0;
}

.related-minimal-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.35;
    margin-bottom: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-minimal-item:hover .related-minimal-title {
    color: var(--primary-color);
}

.related-minimal-text time {
    font-size: 12px;
    color: var(--text-muted);
}

/* --- Related Articles: Mobile Responsive --- */
@media (max-width: 768px) {
    .related-articles {
        margin-top: 24px;
        padding-top: 20px;
    }

    .related-item .related-image {
        width: 100px;
    }

    .related-item .related-text .related-title {
        font-size: 15px;
    }

    .related-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .related-grid-body {
        padding: 10px 12px 12px;
    }

    .related-grid-title {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .related-grid {
        grid-template-columns: 1fr;
    }

    .related-item .related-image {
        width: 80px;
    }

    .related-minimal-num {
        font-size: 22px;
        width: 28px;
    }

    .related-minimal-thumb {
        width: 48px;
        height: 48px;
    }
}

/* =============================================
   POST NAVIGATION — Prev / Next Links
   ============================================= */
.post-navigation {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border-light);
}

.post-navigation .nav-links {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
    flex: 1;
    min-width: 0;
}

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

.post-navigation .nav-previous a,
.post-navigation .nav-next a {
    text-decoration: none;
    display: block;
    padding: 12px 16px;
    border-radius: 10px;
    background: #f8f8f8;
    transition: background 0.2s, box-shadow 0.2s;
}

.post-navigation .nav-previous a:hover,
.post-navigation .nav-next a:hover {
    background: #f0f0f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.post-navigation .nav-subtitle {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.post-navigation .nav-title {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 480px) {
    .post-navigation .nav-links {
        flex-direction: column;
        gap: 10px;
    }

    .post-navigation .nav-next {
        text-align: left;
    }
}

/* =============================================
   STORIES CATEGORY — Mobile Feed Layout
   ============================================= */
.custom-stories-container {
    background-color: var(--bg-main);
    padding: 12px 0;
    /* Remove left/right padding to make cards edge-to-edge */
    min-height: 100vh;
}

.stories-feed-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Gap between edge-to-edge cards */
    max-width: 800px;
    margin: 0 auto;
}

/* Story Card */
.story-card {
    background-color: #ffffff;
    border-radius: 24px;
    /* Large pill-like rounded corners */
    box-shadow: none;
    /* Flatter design for mobile */
    padding: 20px 16px 0;
    /* Text padding */
    overflow: hidden;
    margin: 0;
    /* Touch edges */
}

.story-card-header {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.story-card-category {
    font-size: 11px;
    font-weight: 700;
    line-height: 15.4px;
    color: var(--primary-dark);
    text-transform: uppercase;
    text-decoration: none;
}

.story-card-date {
    font-size: 12px;
    font-weight: 400;
    line-height: 19.2px;
    color: var(--text-muted);
}

.story-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* story-card-title/excerpt base styles — defined in L3564+ */

.story-card-image {
    margin: 0 -16px;
    /* Offset the card padding to make image full width */
    position: relative;
    display: block;
}

.story-card-image img {
    width: 100%;
    display: block;
    height: auto;
    object-fit: cover;
    aspect-ratio: 16/9;
    border-radius: 0;
    /* Card overflow: hidden handles the bottom rounding */
}

/* =============================================
   ARCHIVE / INDEX PAGES — Card Grid
   ============================================= */
.page-header {
    text-align: center;
    margin-bottom: 40px;
}

.page-title {
    font-size: 36px;
    font-weight: 700;
    color: var(--text-main);
}

.archive-description {
    color: var(--text-muted);
    font-size: 18px;
    margin-top: 10px;
}

.archive-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

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

@media (min-width: 992px) {
    .archive-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Pagination */
.nav-links {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 50px;
    flex-wrap: wrap;
}

.nav-links .page-numbers {
    padding: 12px 20px;
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-main);
    font-weight: 700;
    font-size: 18px;
    text-decoration: none;
    transition: all 0.2s;
    min-height: 48px;
    min-width: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-links .page-numbers.current,
.nav-links .page-numbers:hover {
    background: var(--primary-color);
    color: #fff;
}

/* =============================================
   404 PAGE
   ============================================= */
.error-404-content {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    padding: 80px 20px;
}

.error-404-content .error-code {
    font-size: 120px;
    font-weight: 900;
    color: var(--primary-color);
    line-height: 1;
    margin-bottom: 20px;
}

.error-404-content h2 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 16px;
}

.error-404-content p {
    font-size: 18px;
    color: var(--text-muted);
    margin-bottom: 30px;
}

.btn-home {
    display: inline-block;
    padding: 12px 28px;
    background: var(--primary-color);
    color: #fff;
    border-radius: 30px;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    transition: background 0.2s;
}

.btn-home:hover {
    background: var(--primary-dark);
    color: #fff;
}

/* =============================================
   WORDPRESS DEFAULT SEARCH FORM
   (get_search_form() outputs .search-field + .search-submit)
   ============================================= */
.searchform,
.search-form,
form[role="search"] {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

/* Hide WordPress "Search for:" label text but keep it accessible */
.search-form label > .screen-reader-text,
.search-form > label {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.search-form label > .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.search-field,
.searchform input[type="search"],
input[type="search"].search-field {
    flex: 1;
    padding: 12px 18px;
    font-size: 16px;
    font-family: var(--font-stack);
    color: var(--text-main);
    background: var(--bg-card);
    border: 2px solid var(--border-light);
    border-radius: 10px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
}

.search-field:focus,
.searchform input[type="search"]:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(236, 87, 37, 0.15);
}

.search-field::placeholder {
    color: #aaa;
}

.search-submit,
.searchform button[type="submit"],
.searchform input[type="submit"] {
    padding: 12px 24px;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    font-family: var(--font-stack);
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}

.search-submit:hover,
.searchform button[type="submit"]:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
}

/* Dark mode overrides for default search form */
body.dark-mode .search-field,
body.dark-mode .searchform input[type="search"] {
    background: var(--bg-surface);
    color: #ffffff;
    border-color: var(--border-light);
}

body.dark-mode .search-field:focus,
body.dark-mode .searchform input[type="search"]:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}

body.dark-mode .search-submit,
body.dark-mode .searchform button[type="submit"] {
    background: var(--primary-color);
    color: #fff;
}

/* page-content-single base styles moved to L3599 block */

/* =============================================
   SEARCH RESULTS
   ============================================= */
.search-header {
    text-align: center;
    margin-bottom: 40px;
}

.search-header h1 {
    font-size: 28px;
    font-weight: 700;
}

.search-header h1 span {
    color: var(--primary-color);
}

/* =============================================
   FOOTER — Dark themed
   ============================================= */
.site-footer {
    background-color: var(--dark-bg);
    color: #FFF;
    padding: 60px 0 30px;
    margin-top: 60px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr 2fr;
    }
}

.footer-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-logo {
    font-family: 'Brush Script MT', cursive, sans-serif;
    font-size: 32px;
    color: var(--primary-color);
    margin-bottom: 5px;
}

.footer-description {
    color: rgba(255, 255, 255, 0.85);
    font-size: 16px;
    max-width: 300px;
    line-height: 1.75;
    margin-top: 0;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

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

.footer-links h4 {
    margin-bottom: 15px;
    color: #FFF;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-links ul {
    list-style: none;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.85);
    font-size: 16px;
    text-underline-offset: 3px;
}

.footer-links a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.footer-bottom {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.65);
}

/* (removed dead media query — identical to base rule) */

.social-icons {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #555;
    color: #FFF;
    font-size: 20px;
    transition: background-color 0.2s;
}

.social-icons a:hover {
    background-color: var(--primary-color);
}

/* =============================================
   MAIN CONTENT WRAPPER
   ============================================= */
.main-content {
    padding: 30px 0;
}

/* When category nav is hidden, collapse the gap between header and content */
body.no-cat-nav .main-content {
    padding-top: 10px;
}
body.no-cat-nav .single-layout {
    padding-top: 10px;
}

/* =============================================
   MOBILE — 768px and below (matches R34C8.com 1:1)
   ============================================= */

/* CSS-3 FIX: Removed duplicate overflow-x: hidden (already set at L54) */
/* CSS-8 FIX: Removed touch-action: manipulation from root — causes scroll jank.
   Apply to specific interactive elements (buttons) only if needed. */

@media (max-width: 768px) {

    /* --- Page background --- */
    .single-post .main-content,
    .main-content {
        background-color: var(--bg-main);
        padding: 8px 0 0;
    }

    /* --- Category nav (R34C8 pill style) --- */
    .category-nav-wrapper {
        padding: 10px 0;
    }

    .cat-pill {
        padding: 8px 18px;
        font-size: 16px;
        min-height: 40px;
    }

    /* --- Hero section --- */
    .home-hero {
        margin-top: -12px;
        margin-bottom: 12px;
        gap: 12px;
    }

    .hero-main {
        border-radius: var(--border-radius-lg);
        box-shadow: var(--shadow-card);
    }

    .hero-main .hero-text {
        padding: 12px 12px 8px;
    }

    .hero-main .hero-title {
        font-size: 20px;
        line-height: 28px;
        margin-bottom: 8px;
    }

    .hero-sidebar {
        border-radius: var(--border-radius-lg);
        background: var(--bg-card);
        box-shadow: var(--shadow-card);
        margin: 0 0 12px;
    }

    .sidebar-card {
        height: auto;
        padding: 16px;
    }

    .sidebar-card .card-title {
        font-size: 16px;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    /* Trending pills on mobile */
    .hero-trending-label {
        font-size: 9px;
        padding: 4px 10px;
        margin-bottom: 8px;
        letter-spacing: 0.3px;
    }

    .hero-trending-label.trending-now-pill {
        font-size: 10px;
        padding: 3px 10px 3px 3px;
        margin-bottom: 12px;
        letter-spacing: 0.6px;
    }

    .hero-trending-label.trending-now-pill .trending-icon-wrapper {
        width: 24px;
        height: 24px;
        margin-right: 6px;
    }

    .hero-trending-label.trending-now-pill .trending-flame-svg {
        width: 14px;
        height: 17.5px;
        margin-top: -2px;
        margin-bottom: 0px;
    }

    .hero-rank-badge {
        font-size: 11px;
        padding: 3px 9px;
    }

    .hero-views-pill {
        font-size: 10px;
        padding: 1px 7px;
        margin-right: 5px;
    }

    /* Grid cards on mobile */
    .grid-card .card-body {
        padding: 12px 12px 10px;
    }

    .grid-card .card-excerpt {
        display: none;
    }

    .grid-card .card-title {
        font-size: 16px;
        line-height: 22px;
        margin-bottom: 4px;
    }

    /* Category section grid on mobile: 2-col compact cards */
    .category-section .card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .category-section .grid-card .card-image img {
        aspect-ratio: 4/3;
    }

    .category-section .grid-card .card-body {
        padding: 8px 10px 10px;
    }

    .category-section .grid-card .card-title {
        font-size: 14px;
        line-height: 19px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .category-section .card-meta .meta-category {
        font-size: 10px;
    }

    /* List layout compact on mobile */
    .layout-list-wrap .list-item-thumb {
        width: 64px;
        height: 64px;
    }

    .layout-list-wrap .list-item-title {
        font-size: 14px;
        line-height: 1.35;
    }

    /* Full-width gallery: single column on mobile */
    .layout-full-wrap {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    /* --- Single article layout (R34C8: white card, edge-to-edge, rounded top) --- */
    .single-layout {
        grid-template-columns: 1fr;
        padding: 0;
        gap: 16px;
    }

    /* The main article card: clean flat on mobile with side breathing room */
    .article-content {
        margin: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        background: var(--bg-card);
    }

    /* Featured image: full bleed inside the card, rounded only at top */
    .article-featured-image {
        margin: 0 0 0 0;
    }

    .article-featured-image img {
        width: 100%;
        border-radius: 12px;
        display: block;
    }

    .article-featured-image figcaption {
        padding: 8px 16px;
    }

    /* All inner article content: inherit side padding from .container/.main-content
       which is controlled by Theme Settings → Mobile Overrides → Content Side Padding */
    .article-breadcrumbs,
    .article-title-single,
    .article-author-row,
    .article-lead,
    .entry-content-wrapper,
    .post-tags,
    .related-articles,
    .comments-area {
        /* No hardcoded padding — uses parent container padding */
    }

    /* Article-lead override */
    .article-lead {
        padding: 12px;
    }

    /* Entry content padding — inherits from parent container */
    .entry-content {
        padding-bottom: 32px;
    }

    /* Images inside content: full width within padded area */
    .entry-content img {
        width: 100%;
        max-width: 100%;
        border-radius: 8px;
    }

    /* Title sizing — R34C8 mobile: 29px/40.6px */
    .article-title-single {
        font-size: 29px;
        line-height: 40.6px;
        padding-top: 20px;
    }

    /* Author row: stack on mobile just like R34C8 */
    .article-author-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    /* Share buttons fill width */
    .share-buttons {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    /* Sidebar collapses below content  */
    .sidebar {
        margin: 0 -16px;
        padding: 0 16px;
    }

    .sidebar-widget {
        border-radius: 16px;
        margin-bottom: 12px;
    }

    /* Category section */
    .category-section {
        padding: 20px 16px;
        border-radius: 16px;
    }

    /* Static page card */
    .page-content-single {
        margin: 0 -16px;
        border-radius: 24px 24px 0 0;
        box-shadow: 0 -2px 20px rgba(51, 51, 51, 0.08);
        padding: 24px 16px;
    }

    /* --- Mobile UI Optimizations --- */
    /* 1. Prevent keyboard obscuring search */
    .search-overlay {
        padding-top: 5vh;
    }

    /* 2. Increase social share tap targets for touch */
    .share-btn {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }

    /* 3. Prevent tables, pre, and iframes from breaking viewport */
    .entry-content table, 
    .entry-content pre,
    .entry-content iframe,
    .entry-content video {
        max-width: 100%;
        overflow-x: auto;
        display: block;
    }

    /* 4. Hide floating share bar on small screens to prevent overlap */
    .floating-share-bar {
        display: none !important;
    }
}

/* --- Story cards: R34C8 feed layout --- */
@media (max-width: 768px) {

    .custom-stories-container {
        padding: 8px 0;
        background: #F5F5F5;
    }

    .stories-feed-list {
        gap: 12px;
        padding: 0 8px;
    }

    .story-card {
        border-radius: 20px;
        padding: 16px 16px 0;
        overflow: hidden;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    }

    /* Story card image: goes full-width, bottom edge inherits card radius */
    .story-card-image {
        margin: 0 -16px;
        /* Bleed over card padding */
        border-radius: 0;
        /* Card overflow:hidden handles bottom rounding */
    }

    .story-card-image img {
        border-radius: 0;
        aspect-ratio: 16/9;
        width: 100%;
    }

    .story-card-title {
        font-size: 20px;
        line-height: 1.4;
    }

    .story-card-excerpt {
        font-size: 15px;
        line-height: 1.6;
    }
}

@media (max-width: 480px) {
    .hero-main .hero-excerpt {
        font-size: 16px;
        line-height: 26px;
    }

    .category-section-header h2 {
        font-size: 20px;
    }
}

/* =============================================
   COMMENTS AREA & FORM — Custom Clean Layout
   ============================================= */
.comments-area {
    margin-top: 48px;
    padding-top: 36px;
    border-top: 2px solid #EAEAEA;
}

/* Section headings */
.comments-title,
.comment-reply-title {
    font-size: 26px;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 28px;
    line-height: 1.3;
}

/* Intro note */
.cf-note {
    font-size: 16px;
    color: #757575;
    margin-bottom: 24px;
}

/* Field wrapper — label always on top */
.cf-field,
.comment-form-author,
.comment-form-email,
.comment-form-url,
.comment-form-comment,
.comment-form-cookies-consent {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.comment-form-cookies-consent {
    flex-direction: row;
    align-items: flex-start;
}

.cf-field label,
.r34c8-comment-form .cf-field>label,
.comment-form label {
    display: block;
    font-size: 17px;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 8px;
}

.cf-field label .optional,
.comment-form label .optional {
    font-size: 14px;
    font-weight: 400;
    color: #888;
    margin-left: 6px;
}

.cf-field label .required,
.comment-form label .required {
    color: var(--primary-color);
    margin-left: 2px;
}

/* Inputs & textarea */
.r34c8-comment-form input[type="text"],
.r34c8-comment-form input[type="email"],
.r34c8-comment-form input[type="url"],
.r34c8-comment-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 14px 18px;
    font-size: 18px;
    font-family: inherit;
    color: #1a202c;
    background: #FAFAFA;
    border: 2px solid #D1D5DB;
    border-radius: 10px;
    line-height: 1.6;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
}

.r34c8-comment-form input[type="text"]:focus,
.r34c8-comment-form input[type="email"]:focus,
.r34c8-comment-form input[type="url"]:focus,
.r34c8-comment-form textarea:focus,
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(236, 87, 37, 0.12);
    background: #fff;
}

.r34c8-comment-form input::placeholder,
.r34c8-comment-form textarea::placeholder,
.comment-form input::placeholder,
.comment-form textarea::placeholder {
    color: #AAA;
    font-size: 16px;
}

.r34c8-comment-form textarea {
    min-height: 160px;
    resize: vertical;
}

/* Cookies checkbox row */
.cf-cookies {
    margin-top: 4px;
    margin-bottom: 24px;
}

.cf-cookies-label,
.comment-form-cookies-consent label {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 12px;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #555 !important;
    cursor: pointer;
    line-height: 1.5;
}

.cf-cookies-label input[type="checkbox"],
.comment-form-cookies-consent input[type="checkbox"] {
    width: 22px;
    height: 22px;
    min-width: 22px;
    cursor: pointer;
    accent-color: var(--primary-color);
    margin-top: 2px;
}

/* Submit button */
.cf-submit {
    margin-top: 8px;
}

.r34c8-submit-btn,
.comment-form .submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 44px;
    font-size: 19px;
    font-weight: 700;
    font-family: inherit;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 40px;
    cursor: pointer;
    letter-spacing: 0.3px;
    box-shadow: 0 6px 20px rgba(236, 87, 37, 0.35);
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    min-height: 56px;
    text-decoration: none;
}

.r34c8-submit-btn:hover,
.comment-form .submit:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(236, 87, 37, 0.45);
    color: #fff;
}

/* ---- Existing comments list ---- */
.comment-list {
    list-style: none;
    padding: 0;
    margin: 0 0 40px;
}

.comment-body {
    padding: 24px 0;
    border-bottom: 1px solid #EAEAEA;
}

.comment-body:last-child {
    border-bottom: none;
}

.comment-author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.comment-author img {
    border-radius: 50%;
    width: 48px;
    height: 48px;
}

.comment-author .fn {
    font-size: 17px;
    font-weight: 700;
    color: #1a202c;
}

.comment-metadata {
    font-size: 14px;
    color: #757575;
    margin-bottom: 12px;
}

.comment-metadata a {
    color: inherit;
    text-decoration: none;
}

.comment-content p {
    font-size: 18px;
    line-height: 1.75;
    color: #1a202c;
    margin-bottom: 0;
}

.comment-reply-link {
    display: inline-flex;
    align-items: center;
    margin-top: 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
    padding: 6px 16px;
    border: 2px solid var(--primary-color);
    border-radius: 20px;
    transition: all 0.2s;
}

.comment-reply-link:hover {
    background: var(--primary-color);
    color: #fff;
}

.no-comments {
    font-size: 17px;
    color: #757575;
    font-style: italic;
    padding: 16px 0;
}

/* =============================================
   GLOBAL FOCUS STYLES — Keyboard Accessibility
   ============================================= */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 3px;
}

/* =============================================
   STORY CARD — Larger text for feeds
   ============================================= */
.story-card-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text-main);
    margin-bottom: 12px;
}

.story-card-excerpt {
    font-size: 17px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--text-main);
    margin-bottom: 16px;
}

@media (min-width: 768px) {
    .story-card-title {
        font-size: 30px;
        line-height: 1.35;
    }

    .story-card-excerpt {
        font-size: 20px;
        line-height: 1.7;
    }
}

/* =============================================
   STATIC PAGES — Professional Custom Styling
   Font sizes & spacing matched to post typography
   Styled like R34C8.com pages
   ============================================= */

/* Page wrapper */
.page-content-single {
    max-width: 960px;
    margin: 0 auto;
    padding: 40px 20px 60px;
    background: var(--bg-card);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-card);
}

/* ── Per-Page Style overrides (Page Style meta box) ── */
body.page-width-narrow .page-content-single {
    max-width: 720px;
}

body.page-width-wide .page-content-single {
    max-width: none;
}

/* "No title" header style — keep the H1 for SEO/screen readers, hide visually */
.amp-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Template-level hero banner reuses the .am-page-hero design system but renders
   an H1 (the page title) instead of an in-content H2 */
.am-page-hero h1.entry-title,
.page-content-single .amp-template-hero h1.entry-title {
    position: relative;
    font-size: 38px;
    font-weight: 900;
    margin: 0 0 18px;
    padding: 0;
    border: none;
    color: #fff;
    letter-spacing: -.02em;
    text-shadow: 0 2px 20px rgba(0, 0, 0, .3);
    text-align: center;
    line-height: 1.2;
    z-index: 2;
}

.page-content-single .amp-template-hero {
    margin-top: -10px;
}

@media (max-width: 768px) {
    .am-page-hero h1.entry-title,
    .page-content-single .amp-template-hero h1.entry-title {
        font-size: 26px;
    }

    .page-content-single .amp-template-hero {
        padding: 48px 24px;
    }
}

.page-content-single .entry-header {
    margin-bottom: 40px;
    padding-bottom: 24px;
    border-bottom: 3px solid var(--primary-color);
    position: relative;
}

.page-content-single .entry-title {
    font-size: 38px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--text-main);
    margin: 0;
    font-family: var(--font-stack);
    letter-spacing: -0.02em;
}

/* Entry Content Typography — matches post body font sizing */
.page-content-single .entry-content {
    font-size: 20px;
    line-height: 34px;
    color: var(--text-main);
    font-family: var(--font-stack);
    font-weight: 400;
}

.page-content-single .entry-content h2 {
    font-size: 30px;
    font-weight: 800;
    color: var(--text-main);
    margin: 52px 0 22px;
    padding-bottom: 14px;
    border-bottom: 2px solid #f0f0f0;
    position: relative;
    font-family: var(--font-stack);
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.page-content-single .entry-content h2::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 2px;
    background: var(--primary-color);
}

.page-content-single .entry-content h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-main);
    margin: 40px 0 16px;
    font-family: var(--font-stack);
    letter-spacing: -0.01em;
    line-height: 1.35;
    padding-left: 16px;
    position: relative;
}
.page-content-single .entry-content h3::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.15em;
    bottom: 0.15em;
    width: 4px;
    background: linear-gradient(180deg, var(--primary-color, #EC5725), #6366f1);
    border-radius: 4px;
}

.page-content-single .entry-content h4 {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-color, #EC5725);
    margin: 28px 0 12px;
    font-family: var(--font-stack);
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-left: 20px;
    position: relative;
}
.page-content-single .entry-content h4::before {
    content: '▸';
    position: absolute;
    left: 0;
    font-size: 1.1em;
    line-height: inherit;
    color: var(--primary-color, #EC5725);
}

.page-content-single .entry-content h5 {
    font-size: 17px;
    font-weight: 700;
    margin: 24px 0 8px;
    display: inline-block;
    background: linear-gradient(135deg, rgba(236, 87, 37, 0.08), rgba(99, 102, 241, 0.06));
    padding: 4px 14px;
    border-radius: 6px;
    letter-spacing: 0.02em;
    color: var(--text-main);
    border-left: 3px solid var(--primary-color, #EC5725);
}

.page-content-single .entry-content h6 {
    font-size: 15px;
    font-weight: 600;
    margin: 20px 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #888;
    position: relative;
    padding-bottom: 6px;
}
.page-content-single .entry-content h6::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 24px;
    height: 2px;
    background: #ddd;
    border-radius: 2px;
}

.page-content-single .entry-content p {
    margin: 0 0 22px;
    font-size: 20px;
    line-height: 34px;
}

/* .page-content-single .entry-content a — single source of truth is below (L3815) */

/* .page-content-single strong — uses var(--text-main) for dark mode compat */
.page-content-single .entry-content strong {
    font-weight: 700;
    color: var(--text-main);
}

.page-content-single .entry-content em {
    color: var(--text-main);
    font-style: italic;
}

/* .page-content-single ul/ol — single source of truth is below */

.page-content-single .entry-content ul {
    list-style: none;
    padding-left: 0;
}

.page-content-single .entry-content ul li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 12px;
}

.page-content-single .entry-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 13px;
    width: 7px;
    height: 7px;
    background: var(--primary-color);
    border-radius: 50%;
}

.page-content-single .entry-content ol {
    list-style: decimal;
    padding-left: 28px;
}

.page-content-single .entry-content ol li {
    margin-bottom: 12px;
    padding-left: 6px;
}

.page-content-single .entry-content ol li::marker {
    color: var(--primary-color);
    font-weight: 700;
}

.page-content-single .entry-content hr {
    border: none;
    height: 1px;
    background: #e8e8e8;
    margin: 40px 0;
}

/* ===== CUSTOM PAGE COMPONENTS ===== */


.page-content-single .entry-content a {
    color: var(--primary-color, #EC5725);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 2px;
    font-weight: 600;
    transition: color .2s;
}

.page-content-single .entry-content a:hover {
    color: var(--primary-dark, #D93802);
}

/* Ensure CTA buttons are NOT overridden by entry-content link styles */
.page-content-single .entry-content .am-btn {
    text-decoration: none;
}

.page-content-single .entry-content .am-btn-primary {
    color: #fff;
}

.page-content-single .entry-content .am-btn-primary:hover {
    color: #fff;
}

.page-content-single .entry-content .am-btn-outline {
    color: #EC5725;
}

.page-content-single .entry-content .am-btn-outline:hover {
    color: #fff;
}

/* Ensure am-card links don't inherit entry-content underline */
.page-content-single .entry-content .am-card a {
    text-decoration: none;
    font-weight: 700;
}

.page-content-single .entry-content .am-contact-row a {
    text-decoration: none;
}

/* Cancel entry-content underline/color/weight for the latest-news feed widget */
.page-content-single .entry-content .am-latest-news a {
    text-decoration: none;
    font-weight: inherit;
    color: inherit;
}
.page-content-single .entry-content .am-ln-hero-title a {
    color: var(--text-main, #222);
}
.page-content-single .entry-content .am-ln-hero-cta {
    color: var(--primary-color, #D93802);
    font-weight: 700;
}

.page-content-single .entry-content ul,
.page-content-single .entry-content ol {
    margin: 0 0 24px;
    padding-left: 28px;
}

.page-content-single .entry-content li {
    margin-bottom: 10px;
    line-height: 1.7;
}

.page-content-single .entry-content li strong {
    color: #1a1a2e;
}

/* duplicate strong removed — see L3719 (uses var(--text-main) for dark mode) */
/* Page Hero Section */
/* =============================================
   LEGAL & COMPLIANCE — Premium Design System
   Deploy-Ready · All 9 Pages
   ============================================= */

/* ── Animated Gradient Hero ── */
.am-page-hero {
    position: relative;
    background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
    background-size: 200% 200%;
    animation: amHeroGradient 8s ease infinite;
    color: #fff;
    padding: 72px 48px;
    border-radius: 24px;
    margin-bottom: 48px;
    text-align: center;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(15,12,41,.35);
}

@keyframes amHeroGradient {
    0% { background-position: 0% 50% }
    50% { background-position: 100% 50% }
    100% { background-position: 0% 50% }
}

/* Floating glow orbs */
.am-page-hero::before {
    content: '';
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(236,87,37,.25) 0%, transparent 70%);
    top: -80px;
    right: -60px;
    animation: amOrbFloat 6s ease-in-out infinite alternate;
    pointer-events: none;
}

.am-page-hero::after {
    content: '';
    position: absolute;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(99,102,241,.2) 0%, transparent 70%);
    bottom: -60px;
    left: -40px;
    animation: amOrbFloat 8s ease-in-out infinite alternate-reverse;
    pointer-events: none;
}

@keyframes amOrbFloat {
    0% { transform: translate(0, 0) scale(1) }
    100% { transform: translate(20px, -20px) scale(1.15) }
}

.am-page-hero h2,
.page-content-single .entry-content .am-page-hero h2 {
    position: relative;
    font-size: 38px;
    font-weight: 900;
    margin: 0 0 18px;
    padding-bottom: 0;
    border: none;
    border-bottom: none;
    color: #fff;
    letter-spacing: -.02em;
    text-shadow: 0 2px 20px rgba(0,0,0,.3);
    text-align: center;
}

.am-page-hero h2::after,
.page-content-single .entry-content .am-page-hero h2::after {
    display: none;
}

.am-page-hero p,
.page-content-single .entry-content .am-page-hero p {
    position: relative;
    font-size: 18px;
    opacity: .9;
    max-width: 620px;
    margin: 0 auto;
    line-height: 1.75;
    font-weight: 400;
    color: #fff !important;
    text-align: center;
}

/* ── Hero with Uploaded Image (r34c8.com style) ── */
.am-page-hero.has-hero-image {
    background: #1a1a2e;
    animation: none;
    position: relative;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.am-hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
    filter: grayscale(30%) brightness(0.85);
    transition: filter 0.4s ease;
    z-index: 0;
}

.am-page-hero.has-hero-image:hover .am-hero-image {
    filter: grayscale(10%) brightness(0.8);
}

/* Dark gradient overlay for text readability */
.am-page-hero.has-hero-image::before {
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.6) 100%);
    border-radius: 24px;
    z-index: 1;
    animation: none;
}

.am-page-hero.has-hero-image::after {
    display: none;
}

.am-page-hero.has-hero-image h2,
.am-page-hero.has-hero-image p,
.page-content-single .entry-content .am-page-hero.has-hero-image h2,
.page-content-single .entry-content .am-page-hero.has-hero-image p {
    position: relative;
    z-index: 2;
    color: #fff;
    text-shadow: 0 2px 16px rgba(0,0,0,0.5);
}

/* ── Latest News — dynamic feed (matches homepage design language) ── */
.am-latest-news {
    margin: 8px 0 40px;
}

.am-ln-head {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding: 12px 18px;
    background: var(--bg-card, #fff);
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 12px;
    box-shadow: var(--shadow-card, 0 2px 12px rgba(0, 0, 0, .05));
}

.am-ln-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--primary-color, #D93802);
}

.am-ln-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--primary-color, #D93802);
    animation: amLnPulse 1.6s ease-in-out infinite;
}

@keyframes amLnPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(217, 56, 2, .45); }
    50% { box-shadow: 0 0 0 6px rgba(217, 56, 2, 0); }
}

.am-ln-updated,
.am-ln-count {
    font-size: 12px;
    color: var(--text-muted, #777);
    font-weight: 600;
}

.am-ln-count {
    margin-left: auto;
}

/* Hero — newest story, image left / text right like the homepage hero */
.am-ln-hero {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    background: var(--bg-card, #fff);
    border-radius: var(--border-radius-lg, 16px);
    overflow: hidden;
    box-shadow: var(--shadow-card, 0 2px 20px rgba(0, 0, 0, .08));
    margin-bottom: 26px;
    transition: transform .25s ease, box-shadow .25s ease;
}

.am-ln-hero:hover {
    transform: translateY(-3px);
    box-shadow: rgba(51, 51, 51, .15) 0 -2px 30px 0;
}

.am-ln-hero-img {
    position: relative;
    display: block;
}

.am-ln-hero-img img {
    width: 100%;
    height: 100%;
    min-height: 280px;
    object-fit: cover;
    display: block;
    border-radius: 0;
}

.am-ln-hero-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--primary-color, #D93802);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 6px 12px;
    border-radius: 30px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}

.am-ln-hero-body {
    padding: 26px 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.am-ln-hero-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--text-muted, #777);
    margin-bottom: 12px;
}

.am-ln-hero-meta .meta-category {
    font-size: 10px;
    font-weight: 700;
    color: #fff !important;
    text-transform: uppercase;
    letter-spacing: .5px;
    background: var(--primary-color, #D93802);
    padding: 3px 10px;
    border-radius: 4px;
    line-height: 1.4;
    white-space: nowrap;
    text-decoration: none;
}

.am-ln-hero-title,
.page-content-single .entry-content .am-ln-hero-title {
    font-size: 26px;
    line-height: 1.35;
    margin: 0 0 12px;
    padding: 0;
    border: none;
}

.am-ln-hero-title a {
    color: var(--text-main, #222);
    text-decoration: none;
}

.am-ln-hero-title a:hover {
    color: var(--primary-color, #D93802);
}

.am-ln-hero-excerpt,
.page-content-single .entry-content p.am-ln-hero-excerpt {
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-main, #444);
    opacity: .85;
    margin: 0 0 18px;
}

.am-ln-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-color, #D93802) !important;
    text-decoration: none;
    transition: gap .2s ease;
}

.am-ln-hero-cta:hover {
    gap: 13px;
}

/* Load More */
.am-ln-more-wrap {
    text-align: center;
    margin: 26px 0 6px;
}

.am-ln-more {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--primary-color, #D93802);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    padding: 13px 34px;
    border-radius: 40px;
    box-shadow: 0 6px 18px rgba(217, 56, 2, .3);
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.am-ln-more:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(217, 56, 2, .4);
}

.am-ln-more:disabled {
    opacity: .7;
    cursor: wait;
    transform: none;
}

.am-ln-more-spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: amLnSpin .7s linear infinite;
}

.am-ln-more.is-loading .am-ln-more-spinner {
    display: inline-block;
}

@keyframes amLnSpin {
    to { transform: rotate(360deg); }
}

/* Dark mode */
body.dark-mode .am-ln-head,
body.dark-mode .am-ln-hero {
    border-color: rgba(255, 255, 255, .08);
}

@media (max-width: 768px) {
    .am-ln-hero {
        grid-template-columns: 1fr;
    }

    .am-ln-hero-img img {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .am-ln-hero-body {
        padding: 18px 16px 22px;
    }

    .am-ln-hero-title,
    .page-content-single .entry-content .am-ln-hero-title {
        font-size: 20px;
    }

    .am-ln-count {
        display: none;
    }
}

/* ── Info Cards Grid ── */
.am-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    margin: 36px 0;
}

.am-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 20px;
    padding: 32px 28px;
    text-align: center;
    transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
    box-shadow: 0 4px 20px rgba(0,0,0,.04);
    position: relative;
    overflow: hidden;
}

.am-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #FF6B35, #6366f1, #EC5725);
    background-size: 200% 100%;
    animation: amCardBorder 4s linear infinite;
    opacity: 0;
    transition: opacity .3s;
}

@keyframes amCardBorder {
    0% { background-position: 0% 0% }
    100% { background-position: 200% 0% }
}

.am-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(0,0,0,.12);
}

.am-card:hover::before {
    opacity: 1;
}

.am-card-icon {
    font-size: 42px;
    margin-bottom: 18px;
    display: block;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,.1));
}

.am-card h3,
.am-card h4 {
    font-size: 20px;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0 0 12px;
    letter-spacing: -.01em;
}

.am-card p {
    font-size: 16px;
    color: #6b7280;
    line-height: 1.65;
    margin: 0;
}

.am-card a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    color: #EC5725;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: gap .2s, color .2s;
}

.am-card a:hover {
    gap: 10px;
    color: #D93802;
    text-decoration: none;
}

/* ── Contact Info Block (Glassmorphism) ── */
.am-contact-info {
    background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(249,250,251,.95));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 20px;
    padding: 36px;
    margin: 36px 0;
    box-shadow: 0 8px 32px rgba(0,0,0,.06);
}

.am-contact-info h3 {
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 24px;
    color: #1a1a2e;
    letter-spacing: -.01em;
}

.am-contact-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
    font-size: 17px;
}

.am-contact-row-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #FF6B35, #EC5725);
    color: #fff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 4px 12px rgba(236,87,37,.25);
}

.am-contact-row strong {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: #9ca3af;
    margin-bottom: 3px;
    font-weight: 700;
}

.am-contact-row a {
    color: #EC5725;
    font-weight: 600;
    text-decoration: none;
}

.am-contact-row a:hover {
    text-decoration: underline;
}

/* ── Stat Counter Grid (Glassmorphism) ── */
.am-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    margin: 36px 0;
}

.am-stat {
    text-align: center;
    padding: 32px 20px;
    background: linear-gradient(145deg, rgba(255,107,53,.06), rgba(255,255,255,.9));
    border: 1px solid rgba(236,87,37,.12);
    border-radius: 20px;
    transition: transform .3s, box-shadow .3s;
    position: relative;
    overflow: hidden;
}

.am-stat::after {
    content: '';
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(236,87,37,.08) 0%, transparent 70%);
    top: -20px;
    right: -20px;
    pointer-events: none;
}

.am-stat:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 36px rgba(236,87,37,.12);
}

.am-stat-number {
    font-size: 40px;
    font-weight: 900;
    background: linear-gradient(135deg, #FF6B35, #D93802);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
    line-height: 1;
    margin-bottom: 10px;
    letter-spacing: -.02em;
}

.am-stat-label {
    font-size: 12px;
    color: #6b7280;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
}

/* ── CTA Buttons ── */
.am-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 36px;
    border-radius: 14px;
    font-weight: 800;
    font-size: 15px;
    text-decoration: none;
    transition: all .3s cubic-bezier(.34,1.56,.64,1);
    cursor: pointer;
    border: none;
    letter-spacing: -.01em;
    position: relative;
    overflow: hidden;
}

.am-btn-primary {
    background: linear-gradient(135deg, #FF6B35, #D93802);
    color: #fff;
    box-shadow: 0 6px 24px rgba(217,56,2,.3);
}

.am-btn-primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
    transition: left .5s;
}

.am-btn-primary:hover::after {
    left: 100%;
}

.am-btn-primary:hover {
    background: linear-gradient(135deg, #D93802, #B82E01);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 36px rgba(217,56,2,.4);
    color: #fff;
    text-decoration: none;
}

.am-btn-outline {
    background: transparent;
    color: #EC5725;
    border: 2px solid #EC5725;
}

.am-btn-outline:hover {
    background: #EC5725;
    color: #fff;
    text-decoration: none;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 36px rgba(236,87,37,.25);
}

/* ── Contact Form ── */
.am-form {
    margin: 36px 0;
}

.am-form-group {
    margin-bottom: 22px;
}

.am-form-group label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #4b5563;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.am-form-group input[type="text"],
.am-form-group input[type="email"],
.am-form-group input[type="url"],
.am-form-group textarea,
.am-form-group select {
    width: 100%;
    padding: 14px 20px;
    border: 2px solid #e5e7eb;
    border-radius: 14px;
    font-size: 15px;
    font-family: inherit;
    background: #fafbfc;
    transition: border-color .2s, box-shadow .2s, background .2s;
    color: #1a1a2e;
}

.am-form-group input:focus,
.am-form-group textarea:focus,
.am-form-group select:focus {
    border-color: #EC5725;
    box-shadow: 0 0 0 4px rgba(236,87,37,.08);
    outline: none;
    background: #fff;
}

.am-form-group textarea {
    min-height: 150px;
    resize: vertical;
}

.am-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

@media (max-width: 600px) {
    .am-form-row {
        grid-template-columns: 1fr;
    }
}

/* ── Team Grid (3D Hover) ── */
.am-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
    margin: 36px 0;
}

.am-team-member {
    text-align: center;
    padding: 36px 24px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,.04);
    transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
}

.am-team-member:hover {
    transform: translateY(-6px) rotateX(2deg);
    box-shadow: 0 16px 48px rgba(0,0,0,.1);
}

.am-team-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF6B35, #D93802);
    color: #fff;
    font-size: 32px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    box-shadow: 0 8px 24px rgba(236,87,37,.25);
    transition: transform .3s;
}

.am-team-member:hover .am-team-avatar {
    transform: scale(1.1) rotate(5deg);
}

.am-team-member h4 {
    font-size: 17px;
    font-weight: 800;
    margin: 0 0 6px;
    color: #1a1a2e;
}

.am-team-member p {
    font-size: 13px;
    color: #9ca3af;
    margin: 0;
    font-weight: 500;
}

/* ── Feature Cards (Animated Border) ── */
.am-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin: 36px 0;
}

.am-feature-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 20px;
    padding: 36px 30px;
    box-shadow: 0 4px 20px rgba(0,0,0,.04);
    transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
    position: relative;
    overflow: hidden;
}

.am-feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #FF6B35, #6366f1, #10b981, #EC5725);
    background-size: 300% 100%;
    animation: amFeatureBorder 6s linear infinite;
}

@keyframes amFeatureBorder {
    0% { background-position: 0% 0% }
    100% { background-position: 300% 0% }
}

.am-feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(0,0,0,.12);
}

.am-feature-card h3 {
    font-size: 19px;
    font-weight: 800;
    margin: 0 0 14px;
    color: #1a1a2e;
    letter-spacing: -.01em;
}

.am-feature-card p {
    font-size: 14.5px;
    line-height: 1.7;
    color: #6b7280;
    margin: 0;
}

/* ── Alert / Info Boxes (Frosted Glass) ── */
.am-info-box {
    padding: 22px 28px;
    border-radius: 16px;
    margin: 28px 0;
    font-size: 14.5px;
    line-height: 1.7;
    position: relative;
    overflow: hidden;
}

.am-info-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: .04;
    pointer-events: none;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        currentColor 10px,
        currentColor 10.5px
    );
}

.am-info-box.info {
    background: linear-gradient(135deg, #eff6ff, #f0f6ff);
    border-left: 5px solid #3b82f6;
    color: #1e3a5f;
    box-shadow: 0 4px 16px rgba(59,130,246,.08);
}

.am-info-box.warning {
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    border-left: 5px solid #f59e0b;
    color: #78350f;
    box-shadow: 0 4px 16px rgba(245,158,11,.08);
}

.am-info-box.success {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border-left: 5px solid #10b981;
    color: #064e3b;
    box-shadow: 0 4px 16px rgba(16,185,129,.08);
}

.am-info-box strong {
    font-weight: 800;
}

.am-info-box a {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

.am-info-box a:hover {
    opacity: .8;
}

/* ── Section Divider (Animated Gradient) ── */
.am-divider {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 56px 0;
    color: #d1d5db;
    font-size: 14px;
    font-weight: 600;
}

.am-divider::before,
.am-divider::after {
    content: '';
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, transparent, #e5e7eb, transparent);
    border-radius: 2px;
}

/* ── Legal Section Numbering ── */
.entry-content ol ol {
    list-style: lower-alpha;
    margin-top: 10px;
}

.entry-content ol ol li::marker {
    color: #9ca3af;
    font-weight: 500;
}

/* ── Heading styles consolidated in Article Heading Design System (line ~1278) ── */

/* ── Tab-style Page Sections ── */
.am-section {
    margin-bottom: 48px;
}

.am-section-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid #f3f4f6;
}

.am-section-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
}

.am-section-icon.orange { background: linear-gradient(135deg, #fff5f2, #ffe8de); color: #EC5725; }
.am-section-icon.blue { background: linear-gradient(135deg, #eff6ff, #dbeafe); color: #3b82f6; }
.am-section-icon.green { background: linear-gradient(135deg, #ecfdf5, #d1fae5); color: #10b981; }

/* ── Page Content Link Enhancement ── */
.page-content-single .entry-content > a {
    color: #EC5725;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(236,87,37,.3);
    transition: border-color .2s, color .2s;
}

.page-content-single .entry-content > a:hover {
    color: #D93802;
    border-bottom-color: #D93802;
}

/* ── Legal Pages Responsive ── */
@media (max-width: 768px) {
    .page-content-single {
        padding: 24px 16px 40px;
    }

    .page-content-single .entry-title {
        font-size: 28px;
        letter-spacing: -0.01em;
    }

    .page-content-single .entry-content {
        font-size: 17px;
        line-height: 30px;
    }

    .page-content-single .entry-content p {
        font-size: 17px;
        line-height: 30px;
    }

    .page-content-single .entry-content h2 {
        font-size: 24px;
    }

    .page-content-single .entry-content h3 {
        font-size: 20px;
    }

    .am-page-hero {
        padding: 48px 24px;
        border-radius: 18px;
    }

    .am-page-hero h2 {
        font-size: 26px;
    }

    .am-page-hero p {
        font-size: 16px;
    }

    .am-contact-info {
        padding: 24px;
    }

    .am-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .am-btn {
        padding: 14px 28px;
        font-size: 14px;
    }

    .am-cards-grid {
        grid-template-columns: 1fr;
    }

    .am-info-box {
        padding: 18px 20px;
    }
}

/* =============================================
   CATEGORY PAGE — Full-Featured Layout
   ============================================= */

/* Container */
.cat-page-container {
    max-width: 1200px;
    padding: 0 16px;
}

/* ---- Breadcrumbs ---- */
.cat-breadcrumbs,
.article-breadcrumbs {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 20px 0 0;
    margin-bottom: 20px;
}

.cat-breadcrumbs a,
.article-breadcrumbs a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s;
}

.cat-breadcrumbs a:hover,
.article-breadcrumbs a:hover {
    color: var(--primary-color);
}

.cat-breadcrumbs .sep,
.article-breadcrumbs .sep {
    margin: 0 8px;
    color: #ccc;
    font-size: 14px;
}

.cat-breadcrumbs .current,
.article-breadcrumbs .current {
    color: var(--text-main);
    font-weight: 700;
}

/* ---- Category Header ---- */
.cat-header {
    padding: 28px 0 24px;
    border-bottom: 2px solid var(--border-light);
    margin-bottom: 28px;
    position: relative;
}

.cat-header::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 80px;
    height: 2px;
    background: var(--primary-color);
}

.cat-header-title {
    font-size: 36px;
    font-weight: 800;
    color: var(--text-main);
    margin: 0 0 8px;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.cat-header-description {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-muted);
    margin-bottom: 12px;
    max-width: 600px;
}

.cat-header-description p {
    margin: 0;
}

.cat-header-meta {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cat-post-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-color);
    background: rgba(217, 56, 2, 0.08);
    padding: 5px 14px;
    border-radius: 20px;
}

.cat-post-count i {
    font-size: 12px;
}

/* ---- HERO Section ---- */
.cat-hero {
    background: var(--bg-card);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    margin-bottom: 32px;
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .cat-hero {
        grid-template-columns: 1.2fr 1fr;
    }
}

.cat-hero-image {
    display: block;
    position: relative;
    overflow: hidden;
}

.cat-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    aspect-ratio: 16 / 10;
    transition: transform 0.5s ease;
}

.cat-hero:hover .cat-hero-image img {
    transform: scale(1.04);
}

.cat-hero-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--primary-color);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 5px 14px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(217, 56, 2, 0.35);
}

.cat-hero-body {
    padding: 28px 28px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cat-hero-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    font-size: 12px;
    color: var(--text-muted);
    flex-wrap: wrap;
}

.cat-hero-category {
    font-weight: 700;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 11px;
}

.cat-hero-read {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cat-hero-title {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 12px;
    color: var(--text-main);
}

.cat-hero-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.cat-hero-title a:hover {
    color: var(--primary-color);
}

.cat-hero-excerpt {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0 0 16px;
}

.cat-hero-author {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-muted);
}

.cat-hero-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary-color);
}

.cat-hero-author strong {
    color: var(--text-main);
}

/* ---- TRENDING STRIP ---- */
.cat-trending {
    margin-bottom: 36px;
}

.cat-trending-header {
    margin-bottom: 16px;
}

.cat-trending-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cat-trending-header h3 i {
    color: #F59E0B;
    font-size: 16px;
}

.cat-trending-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

@media (max-width: 991px) {
    .cat-trending-strip {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .cat-trending-strip {
        grid-template-columns: 1fr;
    }
}

.cat-trending-card {
    background: var(--bg-card);
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    text-decoration: none;
    transition: transform 0.25s, box-shadow 0.25s;
    position: relative;
    overflow: hidden;
}

.cat-trending-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 -2px 25px rgba(51, 51, 51, 0.14);
}

.cat-trending-number {
    font-size: 28px;
    font-weight: 800;
    color: rgba(217, 56, 2, 0.12);
    line-height: 1;
    flex-shrink: 0;
    width: 32px;
    text-align: center;
    font-family: var(--font-stack);
}

.cat-trending-card:hover .cat-trending-number {
    color: rgba(217, 56, 2, 0.3);
}

.cat-trending-thumb {
    width: 96px;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

.cat-trending-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cat-trending-text h4 {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-main);
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cat-trending-date {
    font-size: 11px;
    color: var(--text-muted);
}

/* ---- MAIN LAYOUT: Grid + Sidebar ---- */
.cat-main-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
    margin-bottom: 40px;
}

@media (min-width: 992px) {
    .cat-main-layout {
        grid-template-columns: 1fr 320px;
    }
}

/* Grid Header */
.cat-grid-header {
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--border-light);
}

.cat-grid-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
}

/* Grid */
.cat-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

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

/* Ads injected between grid cards (category.php drops one in every 6 cards)
   must span the FULL row — without this they get squeezed into a single
   half-width grid cell, breaking the card flow and killing ad viewability. */
.cat-grid > .r34c8-lazy-ad,
.cat-grid > .r34c8-ic-ad,
.cat-grid > .ad-hide-mobile,
.cat-grid > .r34c8-ad-fw,
.cat-grid > [id^="_mgwidget"],
.cat-grid > [data-type="_mgwidget"],
.cat-grid > ins.adsbygoogle {
    grid-column: 1 / -1;
    width: 100%;
}

/* Grid Card */
.cat-grid-card {
    background: var(--bg-card);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cat-grid-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 -2px 30px rgba(51, 51, 51, 0.15);
}

.cat-gc-image {
    display: block;
    overflow: hidden;
}

.cat-gc-image img {
    width: 100%;
    display: block;
    object-fit: cover;
    aspect-ratio: 16 / 9;
    transition: transform 0.4s ease;
}

.cat-grid-card:hover .cat-gc-image img {
    transform: scale(1.05);
}

.cat-gc-body {
    padding: 16px 20px 18px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.cat-gc-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.cat-gc-category {
    font-size: 10px;
    font-weight: 700;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cat-gc-read {
    font-size: 11px;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cat-gc-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-main);
    margin: 0 0 8px;
}

.cat-gc-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.cat-gc-title a:hover {
    color: var(--primary-color);
}

.cat-gc-excerpt {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-muted);
    margin: 0 0 12px;
    flex-grow: 1;
}

.cat-gc-footer {
    font-size: 12px;
    color: #aaa;
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cat-gc-author,
.cat-gc-comments {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-muted);
}

.cat-gc-author i,
.cat-gc-comments i {
    font-size: 10px;
}

/* ---- SIDEBAR ---- */
.cat-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

@media (min-width: 992px) {
    .cat-sidebar {
        position: sticky;
        top: 80px;
        align-self: start;
    }
}

.cat-sidebar-block {
    background: var(--bg-card);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-card);
    padding: 20px;
}

.cat-sidebar-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border-light);
}

.cat-sidebar-title i {
    color: var(--primary-color);
    font-size: 14px;
}

/* Sidebar - Numbered List */
.cat-sidebar-list {
    display: flex;
    flex-direction: column;
}

.cat-sidebar-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    text-decoration: none;
    transition: background 0.2s;
}

.cat-sidebar-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.cat-sidebar-item:first-child {
    padding-top: 0;
}

.cat-sidebar-item:hover {
    background: rgba(217, 56, 2, 0.02);
    border-radius: 8px;
}

.cat-si-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(217, 56, 2, 0.08);
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.cat-si-text h5 {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-main);
    margin: 0 0 3px;
    transition: color 0.2s;
}

.cat-sidebar-item:hover .cat-si-text h5 {
    color: var(--primary-color);
}

.cat-si-date {
    font-size: 11px;
    color: var(--text-muted);
}

/* Sidebar - Category Pills */
.cat-sidebar-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cat-sidebar-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: #f5f5f5;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    text-decoration: none;
    transition: all 0.2s;
}

.cat-sidebar-pill:hover {
    background: var(--primary-color);
    color: #fff;
}

.cat-pill-count {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 700;
}

.cat-sidebar-pill:hover .cat-pill-count {
    color: rgba(255, 255, 255, 0.8);
}

/* Sidebar - Newsletter CTA */
.cat-sidebar-cta {
    background: linear-gradient(135deg, #FFF5F2 0%, #FEE2D9 100%);
    text-align: center;
    padding: 28px 24px;
}

.cat-cta-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 4px 15px rgba(217, 56, 2, 0.3);
}

.cat-sidebar-cta h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 8px;
}

.cat-sidebar-cta p {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-muted);
    margin: 0 0 16px;
}

.cat-cta-btn {
    display: inline-block;
    padding: 10px 28px;
    background: var(--primary-color);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.25s;
    box-shadow: 0 3px 12px rgba(217, 56, 2, 0.3);
}

.cat-cta-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(217, 56, 2, 0.4);
    color: #fff;
}

/* ---- DON'T MISS SECTION ---- */
.cat-dontmiss {
    margin-bottom: 40px;
    background: var(--bg-peach);
    border-radius: var(--border-radius-lg);
    padding: 30px;
}

.cat-dontmiss-header {
    margin-bottom: 20px;
}

.cat-dontmiss-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cat-dontmiss-header h3 i {
    color: var(--primary-color);
}

.cat-dontmiss-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

@media (max-width: 991px) {
    .cat-dontmiss-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

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

.cat-dm-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    background: var(--bg-card);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform 0.25s, box-shadow 0.25s;
}

.cat-dm-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 -2px 25px rgba(51, 51, 51, 0.14);
}

.cat-dm-thumb {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.cat-dm-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s;
}

.cat-dm-card:hover .cat-dm-thumb img {
    transform: scale(1.06);
}

.cat-dm-text {
    padding: 12px 14px;
}

.cat-dm-text h4 {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-main);
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cat-dm-date {
    font-size: 11px;
    color: var(--text-muted);
}

/* ---- PAGINATION ---- */
.cat-pagination {
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid var(--border-light);
}

.cat-pagination .nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.cat-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    text-decoration: none;
    background: #f5f5f5;
    transition: all 0.2s;
    gap: 6px;
}

.cat-pagination .page-numbers:hover {
    background: var(--primary-color);
    color: #fff;
}

.cat-pagination .page-numbers.current {
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 3px 10px rgba(217, 56, 2, 0.3);
}

.cat-pagination .page-numbers.dots {
    background: transparent;
    color: var(--text-muted);
    pointer-events: none;
}

.cat-pagination .prev.page-numbers,
.cat-pagination .next.page-numbers {
    background: var(--text-main);
    color: #fff;
    padding: 0 20px;
    gap: 8px;
}

.cat-pagination .prev.page-numbers:hover,
.cat-pagination .next.page-numbers:hover {
    background: var(--primary-color);
}

/* ---- EMPTY STATE ---- */
.cat-empty {
    text-align: center;
    padding: 80px 24px;
}

.cat-empty-icon {
    font-size: 56px;
    color: #ddd;
    margin-bottom: 20px;
}

.cat-empty h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 12px;
}

.cat-empty p {
    font-size: 16px;
    color: var(--text-muted);
    margin: 0 0 24px;
}

.cat-empty-btn {
    display: inline-block;
    padding: 12px 32px;
    background: var(--primary-color);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.25s;
    box-shadow: 0 4px 14px rgba(217, 56, 2, 0.3);
}

.cat-empty-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(217, 56, 2, 0.4);
    color: #fff;
}

/* ---- RESPONSIVE: Category ---- */
@media (max-width: 768px) {
    .cat-header-title {
        font-size: 28px;
    }

    .cat-hero {
        grid-template-columns: 1fr;
    }

    .cat-hero-image img {
        aspect-ratio: 16 / 9;
    }

    .cat-hero-title {
        font-size: 22px;
    }

    .cat-hero-body {
        padding: 20px;
    }

    .cat-trending-strip {
        grid-template-columns: 1fr 1fr;
    }

    .cat-main-layout {
        grid-template-columns: 1fr;
    }

    .cat-dontmiss-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cat-dontmiss {
        padding: 20px;
    }

    .cat-page-container {
        padding: 0 10px;
    }
}

@media (max-width: 480px) {
    .cat-header-title {
        font-size: 24px;
    }

    .cat-trending-strip {
        grid-template-columns: 1fr;
    }

    .cat-grid {
        grid-template-columns: 1fr;
    }

    .cat-dontmiss-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- HEADER STYLE MODIFIERS (Settings) ---- */
.cat-header--accent {
    background: var(--primary-color);
    padding: 28px 24px 24px;
    border-radius: var(--border-radius);
    border-bottom: none;
    margin-bottom: 28px;
}

.cat-header--accent::after {
    display: none;
}

.cat-header--accent .cat-header-title {
    color: #fff;
}

.cat-header--accent .cat-header-description,
.cat-header--accent .cat-header-description p {
    color: rgba(255, 255, 255, 0.85);
}

.cat-header--accent .cat-post-count {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.cat-header--dark {
    background: #1a1a1a;
    padding: 28px 24px 24px;
    border-radius: var(--border-radius);
    border-bottom: none;
    margin-bottom: 28px;
}

.cat-header--dark::after {
    display: none;
}

.cat-header--dark .cat-header-title {
    color: #fff;
}

.cat-header--dark .cat-header-description,
.cat-header--dark .cat-header-description p {
    color: rgba(255, 255, 255, 0.7);
}

.cat-header--dark .cat-post-count {
    background: rgba(217, 56, 2, 0.2);
    color: var(--primary-color);
}

/* ---- GRID: 3-Column Variant ---- */
@media (min-width: 600px) {
    .cat-grid--3col {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .cat-grid--3col {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .cat-grid--3col {
        grid-template-columns: 1fr;
    }
}

/* ---- Full-Width When Sidebar Hidden ---- */
.cat-main-layout--full {
    grid-template-columns: 1fr !important;
}

@media (min-width: 600px) {
    .cat-main-layout--full .cat-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ===========================================================
   CATEGORY DESIGN VARIANTS (Theme Hub → Category & Archive)
   =========================================================== */

/* ---- Card Style: Horizontal (Image Left) ---- */
@media (min-width: 480px) {
    .cat-cards--horizontal .cat-grid-card {
        flex-direction: row;
        align-items: stretch;
    }
    .cat-cards--horizontal .cat-gc-image {
        width: 42%;
        flex-shrink: 0;
    }
    .cat-cards--horizontal .cat-gc-image img {
        height: 100%;
        aspect-ratio: auto;
        min-height: 150px;
    }
}

/* ---- Card Style: Compact (Title Only, no excerpt) ---- */
.cat-cards--compact .cat-gc-body {
    padding: 12px 16px 14px;
}
.cat-cards--compact .cat-gc-title {
    font-size: 15px;
    margin-bottom: 4px;
}

/* ---- Card Style: Magazine (First Card Spans Full Width) ---- */
@media (min-width: 600px) {
    .cat-cards--magazine .cat-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .cat-cards--magazine .cat-grid-card:first-child {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: stretch;
    }
    .cat-cards--magazine .cat-grid-card:first-child .cat-gc-image {
        width: 55%;
        flex-shrink: 0;
    }
    .cat-cards--magazine .cat-grid-card:first-child .cat-gc-image img {
        height: 100%;
        aspect-ratio: auto;
        min-height: 260px;
    }
    .cat-cards--magazine .cat-grid-card:first-child .cat-gc-title {
        font-size: 22px;
    }
    .cat-cards--magazine .cat-grid-card:first-child .cat-gc-body {
        padding: 24px 28px;
        justify-content: center;
    }
}

/* Mobile fallback: magazine first card goes vertical */
@media (max-width: 599px) {
    .cat-cards--horizontal .cat-grid-card,
    .cat-cards--magazine .cat-grid-card:first-child {
        flex-direction: column;
    }
    .cat-cards--horizontal .cat-gc-image,
    .cat-cards--magazine .cat-grid-card:first-child .cat-gc-image {
        width: 100%;
    }
    .cat-cards--magazine .cat-grid-card:first-child .cat-gc-image img {
        aspect-ratio: 16/9;
        min-height: 0;
        height: auto;
    }
}

/* ---- Image Aspect Ratio Overrides ---- */
.cat-ratio--43 .cat-gc-image img  { aspect-ratio: 4/3; }
.cat-ratio--32 .cat-gc-image img  { aspect-ratio: 3/2; }
.cat-ratio--11 .cat-gc-image img  { aspect-ratio: 1/1; }
/* Ratio doesn't apply to horizontal cards (image fills card height instead) */
.cat-cards--horizontal.cat-ratio--43 .cat-gc-image img,
.cat-cards--horizontal.cat-ratio--32 .cat-gc-image img,
.cat-cards--horizontal.cat-ratio--11 .cat-gc-image img { aspect-ratio: auto; }

/* ---- Card Border Radius ---- */
.cat-radius--sharp .cat-grid-card,
.cat-radius--sharp .cat-gc-image img  { border-radius: 0; }
.cat-radius--rounded .cat-grid-card   { border-radius: 24px; }

/* ---- Card Shadow ---- */
.cat-shadow--none   .cat-grid-card { box-shadow: none; border: 1px solid var(--border-light); }
.cat-shadow--strong .cat-grid-card { box-shadow: 0 6px 28px rgba(0,0,0,0.16); }

/* ---- Card Hover Effects ---- */
.cat-hover--none  .cat-grid-card:hover { transform: none; box-shadow: var(--shadow-card); }
.cat-hover--none.cat-shadow--none .cat-grid-card:hover { box-shadow: none; }
.cat-hover--scale .cat-grid-card:hover { transform: scale(1.025); box-shadow: 0 8px 32px rgba(0,0,0,0.14); }
.cat-hover--glow  .cat-grid-card:hover { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--primary-color), 0 8px 24px rgba(0,0,0,0.1); }

/* ---- Hero Image Height ---- */
.cat-hero--compact .cat-hero .cat-hero-image img { min-height: 180px; }
.cat-hero--tall    .cat-hero .cat-hero-image img { min-height: 440px; }

@media (min-width: 768px) {
    .cat-hero--compact .cat-hero .cat-hero-image img { min-height: 220px; }
    .cat-hero--tall    .cat-hero .cat-hero-image img { min-height: 480px; }
}

/* ---- Hero Layout: Full-Width Stacked ---- */
.cat-hero--stacked .cat-hero {
    grid-template-columns: 1fr !important;
}
.cat-hero--stacked .cat-hero .cat-hero-image img {
    aspect-ratio: 21/9;
    max-height: 400px;
}
.cat-hero--stacked .cat-hero .cat-hero-body {
    padding: 24px 28px;
}

/* ---- Hero Layout: Image Overlay (text over image) ---- */
.cat-hero--overlay .cat-hero {
    position: relative;
    grid-template-columns: 1fr !important;
    min-height: 380px;
    overflow: hidden;
}
.cat-hero--overlay .cat-hero .cat-hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.cat-hero--overlay .cat-hero .cat-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: auto;
}
.cat-hero--overlay .cat-hero .cat-hero-body {
    position: relative;
    z-index: 1;
    min-height: 380px;
    background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.35) 55%, transparent 100%);
    padding: 200px 32px 36px;
    justify-content: flex-end;
}
.cat-hero--overlay .cat-hero .cat-hero-title a,
.cat-hero--overlay .cat-hero .cat-hero-excerpt,
.cat-hero--overlay .cat-hero .cat-hero-author strong { color: #fff; }
.cat-hero--overlay .cat-hero .cat-hero-author,
.cat-hero--overlay .cat-hero .cat-hero-meta time { color: rgba(255,255,255,0.75); }
.cat-hero--overlay .cat-hero .cat-hero-read,
.cat-hero--overlay .cat-hero .cat-hero-category    { color: rgba(255,255,255,0.8); }
.cat-hero--overlay .cat-hero .cat-hero-avatar      { border-color: rgba(255,255,255,0.5); }

/* ===========================================================
   HOMEPAGE: Hero Block Layout (★ Hero — Big + Sidebar)
   =========================================================== */
.layout-hero-wrap {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 24px;
    align-items: start;
}

/* -- Big Post (left) -- */
.block-hero-main {
    background: #fff;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    transition: box-shadow .3s, transform .3s;
}

.block-hero-main:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,.1);
    transform: translateY(-3px);
}

.block-hero-image {
    display: block;
    overflow: hidden;
}

.block-hero-image img {
    width: 100%;
    height: 340px;
    object-fit: cover;
    transition: transform .4s;
}

.block-hero-main:hover .block-hero-image img {
    transform: scale(1.04);
}

.block-hero-body {
    padding: 20px 22px 22px;
}

.block-hero-cat {
    display: inline-block;
    background: var(--primary-color);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 3px 10px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.block-hero-title {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 8px;
}

.block-hero-title a {
    color: #111;
    text-decoration: none;
    transition: color .2s;
}

.block-hero-title a:hover {
    color: var(--primary-color);
}

.block-hero-excerpt {
    color: #666;
    font-size: .92rem;
    line-height: 1.55;
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.block-hero-meta time {
    color: #999;
    font-size: .82rem;
}

/* -- Sidebar Cards (right) -- */
.block-hero-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.block-hero-side-card {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none;
    transition: background .2s, padding-left .2s;
}

.block-hero-side-card:first-child {
    padding-top: 0;
}

.block-hero-side-card:last-child {
    border-bottom: none;
}

.block-hero-side-card:hover {
    background: #fafafa;
    padding-left: 6px;
    border-radius: 8px;
}

.bhsc-thumb {
    width: 100px;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.bhsc-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bhsc-text h4 {
    font-size: .9rem;
    font-weight: 700;
    color: #222;
    margin: 0 0 4px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .2s;
}

.block-hero-side-card:hover .bhsc-text h4 {
    color: var(--primary-color);
}

.bhsc-date {
    color: #999;
    font-size: .78rem;
}

/* -- Responsive -- */
@media (max-width: 768px) {
    .layout-hero-wrap {
        grid-template-columns: 1fr;
    }

    .block-hero-image img {
        height: 220px;
    }

    .block-hero-sidebar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .block-hero-side-card {
        border-bottom: none;
        background: #fafafa;
        border-radius: 10px;
        padding: 10px;
    }

    .bhsc-thumb {
        width: 80px;
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 480px) {
    .block-hero-sidebar {
        grid-template-columns: 1fr;
    }

    .block-hero-title {
        font-size: 1.15rem;
    }
}

/* ===========================================================
   HOMEPAGE: Full-Width Gallery Layout (⊟ Full-Width Gallery)
   =========================================================== */
.layout-full-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

@media (min-width: 768px) {
    .layout-full-wrap {
        grid-template-columns: repeat(3, 1fr);
    }
}

.full-card {
    position: relative;
    display: block;
    border-radius: var(--border-radius);
    overflow: hidden;
    aspect-ratio: 16 / 10;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.full-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0) 100%);
    pointer-events: none;
    z-index: 1;
}

.full-card-image {
    width: 100%;
    height: 100%;
}

.full-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.full-card:hover .full-card-image img {
    transform: scale(1.05);
}

.full-card-title {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    z-index: 2;
    color: #fff;
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.35;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s;
}

.full-card:hover .full-card-title {
    color: var(--primary-color);
}

/* ===========================================================
   HOMEPAGE: Featured + Headlines Layout
   =========================================================== */
.layout-featured-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.featured-main {
    flex: 1 1 55%;
    min-width: 300px;
}

.featured-main-image {
    display: block;
    border-radius: var(--border-radius);
    overflow: hidden;
    margin-bottom: 12px;
}

.featured-main-image img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    transition: transform 0.4s;
}

.featured-main:hover .featured-main-image img {
    transform: scale(1.04);
}

.featured-main-title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.3;
}

.featured-main-title a {
    color: #111;
    text-decoration: none;
}

.featured-main-title a:hover {
    color: var(--primary-color);
}

/* The wrapper container for the headlines to sit on right side */
.featured-headlines-container {
    flex: 1 1 35%;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.featured-headline {
    font-size: 1.1rem;
    font-weight: 700;
    color: #222;
    text-decoration: none;
    padding: 14px 0;
    border-bottom: 1px solid #eaeaea;
    transition: color 0.2s, padding-left 0.2s;
    line-height: 1.4;
}

.featured-headline:hover {
    color: var(--primary-color);
    padding-left: 8px;
    border-color: var(--primary-color);
}

/* ===========================================================
   HOMEPAGE: List Layout
   =========================================================== */
.layout-list-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

@media (min-width: 900px) {
    .layout-list-wrap {
        grid-template-columns: repeat(3, 1fr);
    }
}

.list-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #f0f0f0;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}

.list-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border-color: #e4e4e4;
}

.list-item-thumb {
    width: 70px;
    height: 70px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.list-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.list-item-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #222;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s;
}

.list-item:hover .list-item-title {
    color: var(--primary-color);
}


/* Share button new platform colors */
.share-btn-whatsapp { color: #25D366; }
.share-btn-telegram { color: #0088cc; }
.share-btn-pinterest { color: #E60023; }

/* =============================================
   TABLE OF CONTENTS (F12)
   ============================================= */
.r34c8-toc {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-left: 4px solid var(--primary-color, #D93802);
    border-radius: 8px;
    padding: 20px 24px;
    margin: 24px 0 32px;
    font-size: 15px;
}
.r34c8-toc-title {
    font-weight: 800;
    font-size: 16px;
    margin-bottom: 12px;
    color: #222;
    display: flex;
    align-items: center;
    gap: 8px;
}
.r34c8-toc ol {
    list-style: decimal;
    margin: 0;
    padding-left: 20px;
}
.r34c8-toc li {
    margin-bottom: 6px;
    line-height: 1.5;
}
.r34c8-toc a {
    color: #444;
    text-decoration: none;
    transition: color 0.2s;
}
.r34c8-toc a:hover {
    color: var(--primary-color, #D93802);
}
.r34c8-toc ol ol {
    margin-top: 4px;
    padding-left: 18px;
    list-style: lower-alpha;
}

/* =============================================
   PRINT STYLESHEET (F9)
   ============================================= */
@media print {
    .site-header,
    .category-nav-wrapper,
    .sidebar,
    .site-footer,
    .back-to-top-btn,
    .ad-slot,
    .ad-slot-sticky-bottom,
    .share-buttons,
    .post-navigation,
    .related-articles,
    .comments-area,
    .search-overlay,
    .mobile-menu,
    .mobile-menu-backdrop,
    #reading-progress-container,
    .r34c8-cr-overlay,
    .r34c8-toc,
    .floating-share-bar,
    .author-bio-box,
    .am-lightbox,
    .dark-mode-toggle { display: none !important; }

    body, .main-content, .container, .entry-content {
        color: #000 !important;
        background: #fff !important;
        font-size: 12pt !important;
        line-height: 1.6 !important;
    }
    .single-layout { grid-template-columns: 1fr !important; max-width: 100% !important; }
    .entry-content img { max-width: 100% !important; page-break-inside: avoid; }
    a { color: #000 !important; text-decoration: underline !important; }
    a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #666; }
    a[href^="#"]::after, a[href^="javascript"]::after { content: ""; }
    /* Print: Show article URL at bottom */
    .article-content::after {
        content: "Printed from: " attr(data-url);
        display: block;
        margin-top: 24pt;
        font-size: 9pt;
        color: #666;
        border-top: 1px solid #ccc;
        padding-top: 8pt;
    }
}

/* =============================================
   PREMIUM: DARK MODE (v5.0.1)
   ============================================= */
/* Sleek, high-contrast True Black/Charcoal palette */
body.dark-mode {
    --bg-main: #080808;          /* Deepest black/gray for site background */
    --bg-card: #141414;          /* Slightly lighter for cards to stand out */
    --bg-surface: #1f1f1f;       /* For inputs, hovered elements, quotes */
    --text-main: #f9fafb;        /* Crisp off-white for high readability */
    --text-muted: #9ca3af;       /* Clear contrast gray for meta data */
    --border-light: #2a2a2a;     /* Visible but subtle separation borders */
    --shadow-card: 0 8px 30px rgba(0,0,0,0.8); /* Stronger shadow for depth */
}

/* Base application & Containers */
body.dark-mode { background: var(--bg-main) !important; color: var(--text-main); }
html.dark-mode { background: var(--bg-main); color: var(--text-main); }
body.dark-mode .main-content,
body.dark-mode .single-post .main-content { background: var(--bg-main); }
body.dark-mode .container { background: transparent; }
body.dark-mode .single-layout { background: transparent; }
body.dark-mode .category-nav-wrapper { /* see dark mode mobile section below */ }

/* Article text & links */
body.dark-mode .article-content { background: #0a0a0a; color: var(--text-main); border-color: var(--border-light); box-shadow: var(--shadow-card); }
body.dark-mode .entry-content { color: var(--text-main); }
/* On dark mode, standard links must be bright and readable */
body.dark-mode .entry-content a { color: #60a5fa; text-decoration-color: rgba(96, 165, 250, 0.4); }
body.dark-mode .entry-content a:hover { text-decoration-color: #60a5fa; }
body.dark-mode .entry-content blockquote { 
    border-left-color: var(--primary-color, #fbbf24); 
    background: var(--bg-surface); 
    color: var(--text-main); 
}
body.dark-mode .entry-content pre,
body.dark-mode .entry-content code { background: #000; color: #e5e7eb; border: 1px solid var(--border-light); }
body.dark-mode .article-title-single { color: #ffffff; }

/* Article Meta row */
body.dark-mode .article-author-row { border-color: var(--border-light); background: var(--bg-card); }
body.dark-mode .author-name, body.dark-mode .author-link { color: #ffffff; }
body.dark-mode .article-date-time { color: var(--text-muted); }
body.dark-mode .article-breadcrumbs, body.dark-mode .article-breadcrumbs a { color: var(--text-muted) !important; }

/* Header & Footer */
body.dark-mode .site-header { background: #000000 !important; border-bottom: 1px solid var(--border-light); }
body.dark-mode .site-footer { background: #000000 !important; border-top: 1px solid var(--border-light); }

/* Sidebar */
body.dark-mode .sidebar { background: transparent; box-shadow: none; border: none; }
body.dark-mode .sidebar-widget { background: var(--bg-card); border-color: var(--border-light); box-shadow: var(--shadow-card); }
body.dark-mode .sidebar-widget-title,
body.dark-mode .sidebar .widget-title { color: #ffffff; border-bottom-color: var(--border-light); }
body.dark-mode .sidebar a { color: var(--text-main); }
body.dark-mode .popular-post-info .popular-post-title { color: #ffffff; }

/* Cards & Grids */
body.dark-mode .card,
body.dark-mode .content-grid .card,
body.dark-mode .list-item { background: var(--bg-card); border-color: var(--border-light); box-shadow: var(--shadow-card); }
body.dark-mode .card-title, body.dark-mode .card-title a,
body.dark-mode .list-item-title, body.dark-mode .featured-headline { color: #ffffff; }
body.dark-mode .list-item:hover .list-item-title, body.dark-mode .featured-headline:hover { color: var(--primary-color); }
body.dark-mode .card-date, body.dark-mode .card-meta { color: var(--text-muted); }

/* Hero Section */
body.dark-mode .hero-main,
body.dark-mode .hero-sidebar .card,
body.dark-mode .block-hero-main,
body.dark-mode .block-hero-side-card { background: var(--bg-card); border-color: var(--border-light); }
body.dark-mode .hero-sidebar .card-title a,
body.dark-mode .block-hero-title a,
body.dark-mode .bhsc-text h4 { color: #ffffff; }
body.dark-mode .featured-main-title a { color: #ffffff; }
body.dark-mode .bhsc-date { color: var(--text-muted); }

/* Categories & Loops */
body.dark-mode .category-section { border-color: var(--border-light); }
body.dark-mode .category-section-header h2 a { color: #ffffff; }
body.dark-mode .cat-pagination a { color: var(--text-muted); border-color: var(--border-light); background: var(--bg-card); }
body.dark-mode .cat-pagination a:hover { background: var(--bg-surface); color: #fff; }

/* Bottom Article UX */
body.dark-mode .related-articles { background: var(--bg-card); border-color: var(--border-light); }
body.dark-mode .related-title a { color: #ffffff; }
body.dark-mode .related-date { color: var(--text-muted); }
body.dark-mode .post-navigation { border-color: var(--border-light); background: var(--bg-card); }
body.dark-mode .post-navigation a { color: #ffffff; }
body.dark-mode .comments-area { background: var(--bg-card); border-color: var(--border-light); color: var(--text-main); }
body.dark-mode .tag-badges a { background: var(--bg-surface); color: var(--text-muted); border-color: var(--border-light); }
body.dark-mode .share-buttons .share-btn { background: var(--bg-surface); border-color: var(--border-light); color: var(--text-muted); }
body.dark-mode .r34c8-toc { background: var(--bg-surface); border-color: var(--border-light); color: var(--text-main); }
body.dark-mode .r34c8-toc a { color: #60a5fa; }
body.dark-mode .article-lead,
body.dark-mode.has-lead-paragraph .entry-content > p:first-of-type { color: var(--text-main); border-color: var(--border-light); background: var(--bg-surface); }
body.dark-mode figure figcaption { color: var(--text-muted); }

/* Overlays & Inputs */
body.dark-mode .search-overlay { background: rgba(0,0,0,0.98); backdrop-filter: blur(10px); }
body.dark-mode input, body.dark-mode textarea, body.dark-mode select {
    background: var(--bg-surface); color: #ffffff; border-color: var(--border-light);
}
body.dark-mode input:focus, body.dark-mode textarea:focus { border-color: #60a5fa; box-shadow: 0 0 0 3px rgba(96,165,250,0.2); }
/* Fix: Search overlay .search-input-wrap uses a hardcoded white bg — override for dark mode */
body.dark-mode .search-input-wrap {
    background: #1f1f1f;
    border-color: var(--border-light);
}
body.dark-mode .search-input-wrap input {
    background: transparent;
    color: #ffffff;
}
body.dark-mode .search-input-wrap:focus-within {
    border-color: #60a5fa;
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.2);
}
body.dark-mode .search-input-wrap i { color: #9ca3af; }
/* Fix: Search button in header — ensure no unwanted bg/border appear in dark mode */
body.dark-mode .header-actions button {
    background: none;
    border: none;
    outline: none;
    box-shadow: none;
}
body.dark-mode #header-search-btn {
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Continue Reading Dark overrides */
body.dark-mode .r34c8-cr-overlay {
    background: linear-gradient(to bottom, rgba(10,10,10,0) 0%, rgba(10,10,10,0.8) 50%, rgba(10,10,10,1) 100%);
}

/* Dark Mode: Comment Form inputs (specificity fix — U3) */
body.dark-mode .r34c8-comment-form input[type="text"],
body.dark-mode .r34c8-comment-form input[type="email"],
body.dark-mode .r34c8-comment-form input[type="url"],
body.dark-mode .r34c8-comment-form textarea,
body.dark-mode .comment-form input[type="text"],
body.dark-mode .comment-form input[type="email"],
body.dark-mode .comment-form input[type="url"],
body.dark-mode .comment-form textarea {
    background: var(--bg-surface);
    color: #ffffff;
    border-color: var(--border-light);
}
body.dark-mode .r34c8-comment-form input:focus,
body.dark-mode .r34c8-comment-form textarea:focus,
body.dark-mode .comment-form input:focus,
body.dark-mode .comment-form textarea:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96,165,250,0.2);
    background: var(--bg-card);
}
body.dark-mode .r34c8-comment-form input::placeholder,
body.dark-mode .r34c8-comment-form textarea::placeholder {
    color: #6b7280;
}

/* Dark Mode: Category Sections peach/white backgrounds (U4) */
body.dark-mode .category-section.section-odd { background-color: var(--bg-card); }
body.dark-mode .category-section.section-even { background-color: var(--bg-surface); box-shadow: none; }

/* Dark Mode: Category Pills (U5) */
body.dark-mode .cat-pill { background-color: var(--bg-surface); color: var(--text-main); }
body.dark-mode .cat-pill.active,
body.dark-mode .cat-pill:hover { background-color: var(--primary-color); color: #fff; }

/* Dark Mode: Comment text elements with hardcoded colors (U6) */
body.dark-mode .comments-title,
body.dark-mode .comment-reply-title { color: #f4f4f5; }
body.dark-mode .comment-author .fn { color: #f4f4f5; }
body.dark-mode .comment-content p { color: var(--text-main); }
body.dark-mode .comment-metadata a { color: var(--text-muted); }
body.dark-mode .cf-note { color: var(--text-muted); }
body.dark-mode .cf-field label,
body.dark-mode .r34c8-comment-form .cf-field > label,
body.dark-mode .comment-form label { color: #f4f4f5; }
body.dark-mode .cf-cookies-label,
body.dark-mode .comment-form-cookies-consent label { color: var(--text-muted) !important; }
body.dark-mode .no-comments { color: var(--text-muted); }
body.dark-mode .comment-reply-link { color: var(--primary-color); border-color: var(--primary-color); }
body.dark-mode .comment-reply-link:hover { background: var(--primary-color); color: #fff; }

/* Dark Mode: Live Search Results (U12) */
body.dark-mode .srl-item { background: var(--bg-surface); border-color: var(--border-light); }
body.dark-mode .srl-title { color: #f4f4f5; }
body.dark-mode .srl-date { color: var(--text-muted); }
body.dark-mode .srl-no-results,
body.dark-mode .srl-loading { color: var(--text-muted); }

/* Dark mode toggle button */
.dark-mode-toggle {
    background: none;
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    width: 36px; height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.25s ease;
    flex-shrink: 0;
}
.dark-mode-toggle:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.3); }
body.dark-mode .dark-mode-toggle { color: #fbbf24; border-color: rgba(251,191,36,0.3); background: rgba(251,191,36,0.05); }
body.dark-mode .dark-mode-toggle:hover { background: rgba(251,191,36,0.15); }

/* =============================================
   PREMIUM: IMAGE LIGHTBOX (v5.0)
   ============================================= */
.am-lightbox {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.95);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
    cursor: zoom-out;
    backdrop-filter: blur(12px);
}
.am-lightbox.active { opacity: 1; visibility: visible; }
.am-lightbox img {
    max-width: 92vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
    transition: transform 0.3s ease;
    cursor: default;
}
.am-lightbox-close {
    position: absolute;
    top: 16px; right: 20px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    width: 44px; height: 44px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.am-lightbox-close:hover { background: rgba(255,255,255,0.25); transform: scale(1.1); }
.am-lightbox-caption {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 14px;
    max-width: 600px;
    text-align: center;
    padding: 10px 20px;
    background: rgba(0,0,0,0.7);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    backdrop-filter: blur(4px);
}
.entry-content img:not(.author-avatar):not(.wp-smiley) { cursor: zoom-in; }

/* =============================================
   PREMIUM: FLOATING SOCIAL SHARE BAR (v5.0)
   ============================================= */
.floating-share-bar {
    position: fixed;
    left: calc(50% - 470px);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 9990;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}
.floating-share-bar.visible { opacity: 1; visibility: visible; }
.floating-share-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    color: #fff;
    font-size: 15px;
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
}
.floating-share-bar a:hover { transform: scale(1.15); box-shadow: 0 4px 12px rgba(0,0,0,0.25); }
.floating-share-bar .fsb-facebook { background: #1877f2; }
.floating-share-bar .fsb-twitter { background: #1da1f2; }
.floating-share-bar .fsb-whatsapp { background: #25d366; }
.floating-share-bar .fsb-email { background: #6b7280; }
.floating-share-bar .fsb-copy { background: #374151; }
.floating-share-bar .fsb-divider {
    width: 24px; height: 1px;
    background: rgba(0,0,0,0.15);
    margin: 2px auto;
}
body.dark-mode .floating-share-bar .fsb-divider { background: rgba(255,255,255,0.15); }
@media (max-width: 1200px) { .floating-share-bar { display: none !important; } }

/* =============================================
   PREMIUM: AUTHOR BIO BOX (v5.0)
   ============================================= */
.author-bio-box {
    display: flex;
    gap: 20px;
    padding: 24px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin: 32px 0;
}
.author-bio-box .abb-avatar {
    width: 72px; height: 72px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 3px solid #e5e7eb;
}
.author-bio-box .abb-info { flex: 1; min-width: 0; }
.author-bio-box .abb-name {
    font-size: 17px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 4px;
}
.author-bio-box .abb-name a { color: inherit; text-decoration: none; }
.author-bio-box .abb-name a:hover { color: #EC5725; }
.author-bio-box .abb-meta {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 8px;
}
.author-bio-box .abb-bio {
    font-size: 14px;
    color: #374151;
    line-height: 1.6;
    margin: 0;
}
body.dark-mode .author-bio-box {
    background: var(--bg-surface);
    border-color: var(--border-light);
}
body.dark-mode .author-bio-box .abb-name { color: #f4f4f5; }
body.dark-mode .author-bio-box .abb-name a:hover { color: #fbbf24; }
body.dark-mode .author-bio-box .abb-meta { color: var(--text-muted); }
body.dark-mode .author-bio-box .abb-bio { color: var(--text-main); }
body.dark-mode .author-bio-box .abb-avatar { border-color: var(--border-light); }
.abb-avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-color), #ff7043);
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-decoration: none;
    padding: 0;
    border: 3px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 12px rgba(217, 56, 2, 0.2);
    flex-shrink: 0;
}
body.dark-mode .abb-avatar-initials {
    border-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
body.dark-mode .author-avatar-initials {
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
@media (max-width: 480px) {
    .author-bio-box { flex-direction: column; align-items: center; text-align: center; }
}

/* =============================================
   PREMIUM: LIVE SEARCH RESULTS (v5.0)
   ============================================= */
.search-results-live {
    max-height: 420px;
    overflow-y: auto;
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.search-results-live::-webkit-scrollbar { width: 4px; }
.search-results-live::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 2px; }
.srl-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    color: #fff;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
}
.srl-item:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.2); }
.srl-thumb {
    width: 72px;
    height: 48px;
    border-radius: 4px;
    object-fit: contain;
    flex-shrink: 0;
    background: rgba(255,255,255,0.05);
}
.srl-info { flex: 1; min-width: 0; text-align: left; }
.srl-title {
    font-size: 14px;
    font-weight: 600;
    color: #f4f4f5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
    line-height: 1.4;
}
.srl-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.2);
    font-size: 20px;
}
.srl-date { font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 4px; }
.srl-no-results {
    text-align: center;
    padding: 24px;
    color: rgba(255,255,255,0.5);
    font-size: 14px;
}
.srl-loading {
    text-align: center;
    padding: 16px;
    color: rgba(255,255,255,0.5);
}

/* =============================================
   PREMIUM: POST VIEWS COUNTER (v5.4 — Redesigned Pill)
   ============================================= */
.post-views-count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    background: linear-gradient(135deg, rgba(236, 87, 37, 0.08), rgba(255, 112, 67, 0.06));
    border: 1px solid rgba(236, 87, 37, 0.12);
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.2px;
    transition: all 0.25s ease;
}
.post-views-count:hover {
    background: linear-gradient(135deg, rgba(236, 87, 37, 0.14), rgba(255, 112, 67, 0.10));
    border-color: rgba(236, 87, 37, 0.2);
    transform: scale(1.03);
}
.post-views-count i {
    font-size: 11px;
    color: var(--primary-color);
    transition: transform 0.3s ease;
}
.post-views-count:hover i {
    transform: scale(1.15);
}
body.dark-mode .post-views-count {
    color: rgba(255, 255, 255, 0.75);
    background: linear-gradient(135deg, rgba(236, 87, 37, 0.12), rgba(255, 112, 67, 0.08));
    border-color: rgba(236, 87, 37, 0.18);
}
body.dark-mode .post-views-count:hover {
    background: linear-gradient(135deg, rgba(236, 87, 37, 0.2), rgba(255, 112, 67, 0.14));
}
body.dark-mode .post-views-count i {
    color: #ff7043;
}

/* Popular Posts Widget */
.popular-posts-widget { margin-top: 24px; }
.popular-post-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;
    text-decoration: none;
    transition: opacity 0.2s;
}
.popular-post-item:last-child { border-bottom: none; }
.popular-post-item:hover { opacity: 0.85; }
.popular-post-rank {
    font-size: 22px;
    font-weight: 800;
    color: #e5e7eb;
    min-width: 28px;
    line-height: 1;
    display: flex;
    align-items: flex-start;
    padding-top: 2px;
}
.popular-post-item:first-child .popular-post-rank { color: #EC5725; }
.popular-post-info { flex: 1; min-width: 0; }
.popular-post-title {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
    line-height: 1.4;
}
.popular-post-meta {
    font-size: 11px;
    color: #6b7280;
    margin-top: 3px;
}
body.dark-mode .popular-post-item { border-color: var(--border-light); }
body.dark-mode .popular-post-title { color: #f4f4f5; }
body.dark-mode .popular-post-meta { color: var(--text-muted); }
body.dark-mode .popular-post-rank { color: #6b7280; }

/* =============================================
   PREMIUM: MOBILE OPTIMIZATIONS (v5.0)
   ============================================= */

/* --- Mobile Header: Dark Mode Toggle --- */
@media (max-width: 768px) {
    .header-actions { gap: 10px; }
    .dark-mode-toggle {
        width: 32px; height: 32px;
        font-size: 14px;
    }
}

/* --- Mobile: Lightbox touch-friendly --- */
@media (max-width: 768px) {
    .am-lightbox img {
        max-width: 96vw;
        max-height: 80vh;
        border-radius: 2px;
    }
    .am-lightbox-close {
        top: 10px; right: 10px;
        width: 44px; height: 44px;
        font-size: 24px;
    }
    .am-lightbox-caption {
        bottom: 12px;
        font-size: 12px;
        max-width: 90vw;
        padding: 6px 12px;
    }
}

/* --- Mobile: Live Search Results --- */
@media (max-width: 768px) {
    .search-results-live {
        max-height: 320px;
        margin-top: 12px;
        gap: 6px;
    }
    .srl-item {
        padding: 10px 12px;
        gap: 10px;
    }
    .srl-thumb {
        width: 60px;
        height: 40px;
        border-radius: 3px;
    }
    .srl-title { font-size: 13px; }
}

/* --- Mobile: Author Bio Box --- */
@media (max-width: 768px) {
    .author-bio-box {
        padding: 18px;
        gap: 14px;
        margin: 24px 0;
        border-radius: 10px;
    }
    .author-bio-box .abb-avatar {
        width: 56px; height: 56px;
    }
    .author-bio-box .abb-name { font-size: 15px; }
    .author-bio-box .abb-bio { font-size: 13px; }
}

/* --- Mobile: Popular Posts Widget --- */
@media (max-width: 768px) {
    .popular-post-item { padding: 10px 0; gap: 10px; }
    .popular-post-rank {
        font-size: 18px;
        min-width: 24px;
    }
    .popular-post-title { font-size: 13px; }
}

/* --- Mobile: Post Views Count (v5.4 pill) --- */
@media (max-width: 480px) {
    .post-views-count { font-size: 11px; padding: 2px 8px; gap: 3px; }
    .post-views-count i { font-size: 10px; }
}

/* --- Dark Mode: Mobile Menu --- */
body.dark-mode .mobile-menu {
    background: #0f0f1a;
    border-color: var(--border-light);
}
body.dark-mode .mobile-menu-header {
    border-color: var(--border-light);
    color: var(--text-main);
}
body.dark-mode .mobile-menu-title { color: var(--text-main); }
body.dark-mode .mobile-menu-links li a {
    color: var(--text-main);
    border-color: var(--border-light);
}
body.dark-mode .mobile-menu-links li a:hover {
    background: var(--bg-surface);
}
body.dark-mode .mobile-menu-search input {
    background: var(--bg-surface);
    color: var(--text-main);
    border-color: var(--border-light);
}
body.dark-mode .mobile-menu-backdrop {
    background: rgba(0,0,0,0.7);
}

/* --- Dark Mode: Category Nav (below header) --- */
body.dark-mode .category-nav-wrapper {
    background: #0a0a14;
    border-color: var(--border-light);
}
body.dark-mode .category-nav-wrapper a {
    color: var(--text-muted);
}
body.dark-mode .category-nav-wrapper a:hover,
body.dark-mode .category-nav-wrapper a.active {
    color: #f4f4f5;
}

/* --- Dark Mode: Footer --- */
body.dark-mode .footer-top { background: #0a0a14; border-color: var(--border-light); }
body.dark-mode .footer-bottom { background: #070710; border-color: var(--border-light); }
body.dark-mode .site-footer .footer-description,
body.dark-mode .site-footer .footer-copyright { color: var(--text-muted); }
body.dark-mode .site-footer a { color: var(--text-muted); }
body.dark-mode .site-footer a:hover { color: #f4f4f5; }

/* --- Dark Mode: Grid Cards on mobile --- */
body.dark-mode .grid-card,
body.dark-mode .cat-grid-card,
body.dark-mode .sidebar-card {
    background: var(--bg-card);
    border-color: var(--border-light);
}
body.dark-mode .hero-title,
body.dark-mode .hero-title a { color: #f4f4f5; }
body.dark-mode .hero-excerpt { color: var(--text-muted); }

/* --- Dark Mode: Pagination --- */
body.dark-mode .cat-pagination .current {
    background: var(--bg-surface);
    border-color: var(--border-light);
    color: #f4f4f5;
}
body.dark-mode .cat-pagination .prev.page-numbers,
body.dark-mode .cat-pagination .next.page-numbers {
    background: var(--bg-surface);
    color: #f4f4f5;
}
body.dark-mode .cat-pagination .prev.page-numbers:hover,
body.dark-mode .cat-pagination .next.page-numbers:hover {
    background: var(--primary-color);
    color: #fff;
}

/* --- Dark Mode: 404 Page --- */
/* Fix: 404.php uses .error-404-content, not .error-404 */
body.dark-mode .error-404 h1,
body.dark-mode .error-404-content h1,
body.dark-mode .error-404-content .error-code { color: #f4f4f5; }
body.dark-mode .error-404 p,
body.dark-mode .error-404-content p { color: var(--text-muted); }
body.dark-mode .error-404-content h2 { color: #f0f0f0; }

/* --- Dark Mode: Continue Reading button (U11) --- */
body.dark-mode .r34c8-cr-btn {
    background: var(--bg-surface);
    color: #f4f4f5;
    border: 1px solid var(--border-light);
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}

/* Dark mode: Continue Reading button styles (v5.52.0) — after the generic
   rule above so each style keeps its look in dark mode. */
body.dark-mode .r34c8-cr-btn--classic {
    background: linear-gradient(135deg, #FF7A1A, var(--primary-color));
    color: #fff;
    border: none;
}
body.dark-mode .r34c8-cr-btn--keep {
    background: transparent;
    color: #E5E7EB;
    border: none;
    box-shadow: none;
}
body.dark-mode .r34c8-cr-btn--next {
    background: transparent;
    color: #FF8A50;
    border: none;
    box-shadow: none;
}
body.dark-mode .r34c8-cr-btn--book,
body.dark-mode .r34c8-cr-btn--outline {
    background: var(--bg-surface, #1f1f1f);
    color: #F4F4F5;
    border-color: rgba(255, 255, 255, 0.25);
}
body.dark-mode .r34c8-cr-btn--soft {
    background: rgba(217, 56, 2, 0.16);
    color: #FFD9C4;
    border: none;
}
body.dark-mode .r34c8-cr-btnrow--keep::before,
body.dark-mode .r34c8-cr-btnrow--keep::after { border-top-color: #4B5563; }
body.dark-mode .r34c8-cr-btnrow--book::before,
body.dark-mode .r34c8-cr-btnrow--book::after,
body.dark-mode .r34c8-cr-btnrow--soft::before,
body.dark-mode .r34c8-cr-btnrow--soft::after { background: #3F3F46; }
body.dark-mode .r34c8-cr-end { color: #6B7280; }

/* Dark mode: Continue Reading button styles, batch 2 (v5.53.2) */
body.dark-mode .r34c8-cr-btn--link,
body.dark-mode .r34c8-cr-btn--divider {
    background: transparent;
    color: #FF8A50;
    border: none;
    box-shadow: none;
}
body.dark-mode .r34c8-cr-btn--bordered {
    background: var(--bg-surface, #1f1f1f);
    color: #FF8A50;
    border-color: #FF8A50;
}
body.dark-mode .r34c8-cr-btnrow--solid::before,
body.dark-mode .r34c8-cr-btnrow--solid::after,
body.dark-mode .r34c8-cr-btnrow--divider::before,
body.dark-mode .r34c8-cr-btnrow--divider::after,
body.dark-mode .r34c8-cr-btnrow--bordered::before,
body.dark-mode .r34c8-cr-btnrow--bordered::after,
body.dark-mode .r34c8-cr-btnrow--label::before,
body.dark-mode .r34c8-cr-btnrow--label::after { background: #3F3F46; }
/* Sticky Tab's card-edge band (border + fill + inset shadow — needs its own
   dark override instead of the flat-color rule above). */
body.dark-mode .r34c8-cr-btnrow--tab::before {
    background: #202024;
    border-top-color: #3F3F46;
    box-shadow: inset 0 8px 12px -8px rgba(0, 0, 0, 0.65);
}
/* Ribbon ends: dark pill (bg-surface) needs grey tails, not orange */
body.dark-mode .r34c8-cr-btn--tab::before,
body.dark-mode .r34c8-cr-btn--tab::after {
    background: #3F3F46;
}

/* --- Dark Mode: Cookie Popup --- */
body.dark-mode .cookie-popup {
    background: #1a1a2e;
    border-color: var(--border-light);
    color: var(--text-main);
}

/* --- Dark Mode: Sticky bottom ad --- */
body.dark-mode .ad-slot-sticky-bottom {
    background: #0a0a14;
    border-color: var(--border-light);
}

/* --- Dark Mode: Back to top --- */
body.dark-mode .back-to-top-btn {
    background: var(--bg-surface);
    border-color: var(--border-light);
    color: var(--text-main);
}

/* =============================================
   STORY PARTS — Simple Continue Button
   ============================================= */
.story-continue-wrap {
    text-align: center;
    margin: 12px 0 0;
    padding: 0;
}
/* Eat into parent .entry-content bottom padding so buttons sit flush against ads */
.story-continue-wrap:last-child {
    margin-bottom: -32px;
    padding-bottom: 0;
}
.story-nav-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.entry-content .story-continue-btn,
.story-continue-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--primary-color), #e64a19) !important;
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    padding: 11px 28px;
    border-radius: 10px;
    text-decoration: none !important;
    box-shadow: 0 3px 12px rgba(236, 87, 37, 0.25);
    transition: all 0.25s ease;
    border: none !important;
    cursor: pointer;
    line-height: 1.3;
    letter-spacing: 0.2px;
}
.entry-content .story-continue-btn:hover,
.story-continue-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(236, 87, 37, 0.35);
    color: #fff !important;
    text-decoration: none !important;
}
.entry-content .story-continue-btn-prev,
.story-continue-btn-prev {
    background: #374151 !important;
    box-shadow: 0 3px 12px rgba(55, 65, 81, 0.2);
}
.entry-content .story-continue-btn-prev:hover,
.story-continue-btn-prev:hover {
    background: #4B5563 !important;
    box-shadow: 0 6px 20px rgba(55, 65, 81, 0.3);
}
.story-continue-btn i {
    font-size: 13px;
    transition: transform 0.3s ease;
}
.story-continue-btn:hover i {
    transform: translateX(3px);
}
.story-continue-btn-prev:hover i {
    transform: translateX(-3px);
}
.story-continue-meta {
    display: block;
    margin-top: 4px;
    margin-bottom: 0;
    font-size: 12px;
    font-weight: 600;
    color: #9CA3AF;
}
.entry-content .story-continue-back,
.story-continue-back {
    display: inline-block;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-color) !important;
    text-decoration: none !important;
}
.story-continue-back:hover { text-decoration: underline !important; }
body.dark-mode .story-continue-meta { color: #6B7280; }
body.dark-mode .story-continue-back { color: #ff7043 !important; }
body.dark-mode .entry-content .story-continue-btn,
body.dark-mode .story-continue-btn {
    background: linear-gradient(135deg, var(--primary-color), #e64a19) !important;
    color: #fff !important;
}
body.dark-mode .entry-content .story-continue-btn-prev,
body.dark-mode .story-continue-btn-prev {
    background: #4B5563 !important;
}
@media (max-width: 600px) {
    .story-layout-stacked .story-nav-buttons {
        flex-direction: column;
        gap: 8px;
    }
    .story-layout-stacked .story-nav-buttons .story-continue-btn {
        width: 100%;
    }
    .story-continue-btn {
        font-size: 14px;
        padding: 11px 24px;
    }
}

/* =============================================
   STORY PARTS — Layout: Side by Side
   ============================================= */
/* Classic: side-by-side makes nav-buttons row */
.story-layout-side .story-nav-buttons {
    flex-direction: row;
}
.story-layout-side .story-nav-buttons .story-continue-btn {
    flex: 1;
    min-width: 0;
}
/* Card: side-by-side uses grid */
.story-style-card.story-layout-side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.story-style-card.story-layout-side .story-continue-meta {
    grid-column: 1 / -1;
}
.story-style-card.story-layout-side .story-btn-card-prev {
    margin-bottom: 0;
}
/* Netflix: side-by-side uses grid */
.story-style-netflix.story-layout-side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.story-style-netflix.story-layout-side .story-btn-netflix-prev {
    margin-bottom: 0;
}
/* Magazine: side-by-side uses grid */
.story-style-magazine.story-layout-side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.story-style-magazine.story-layout-side .story-btn-magazine-prev {
    margin-bottom: 0;
}
/* Mobile: stacked layout falls back for card/netflix/magazine */
@media (max-width: 600px) {
    .story-style-card.story-layout-stacked,
    .story-style-netflix.story-layout-stacked,
    .story-style-magazine.story-layout-stacked {
        grid-template-columns: 1fr;
    }
}
/* =============================================
   STORY PARTS — Style 2: CARD
   ============================================= */
.story-style-card {
    margin: 12px 0 0;
}
.story-btn-card {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-light, #E5E7EB);
    border-left: 4px solid var(--primary-color, #D93802);
    border-radius: 12px;
    text-decoration: none !important;
    color: var(--text-main, #1F2937) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    transition: all 0.25s ease;
}
.story-btn-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.12);
    border-left-color: #e64a19;
    text-decoration: none !important;
    color: var(--text-main, #1F2937) !important;
}
.story-btn-card-body {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}
.story-btn-card-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--primary-color, #D93802), #e64a19);
    color: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.story-btn-card-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.story-btn-card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main, #1F2937);
    line-height: 1.3;
}
.story-btn-card-sub {
    font-size: 13px;
    color: var(--text-muted, #6B7280);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.story-btn-card-chevron {
    color: var(--text-muted, #9CA3AF);
    font-size: 14px;
    flex-shrink: 0;
    margin-left: 12px;
    transition: transform 0.2s;
}
.story-btn-card:hover .story-btn-card-chevron {
    transform: translateX(4px);
    color: var(--primary-color, #D93802);
}
body.dark-mode .story-btn-card {
    background: var(--bg-card);
    border-color: var(--border-light);
    border-left-color: var(--primary-color, #ff7043);
}
body.dark-mode .story-btn-card-title { color: var(--text-main); }
body.dark-mode .story-btn-card-sub { color: var(--text-muted); }
@media (max-width: 600px) {
    .story-btn-card { padding: 16px 18px; }
    .story-btn-card-title { font-size: 15px; }
    .story-btn-card-sub { font-size: 12px; }
    .story-btn-card-icon { width: 38px; height: 38px; font-size: 14px; }
}
/* Card style: Previous part */
.story-btn-card-prev {
    border-left: 4px solid #9CA3AF;
    margin-bottom: 8px;
}
.story-btn-card-prev:hover {
    border-left-color: #6B7280;
}
.story-btn-card-icon-prev {
    background: linear-gradient(135deg, #6B7280, #9CA3AF) !important;
}
.story-btn-card-chevron-left {
    margin-left: 0;
    margin-right: 12px;
}
.story-btn-card-prev:hover .story-btn-card-chevron-left {
    transform: translateX(-4px);
}
body.dark-mode .story-btn-card-prev {
    border-left-color: #6B7280;
}

/* Floating bar: Previous part button */
.story-floating-bar-btn-prev {
    background: rgba(255,255,255,0.12) !important;
    border: 1px solid rgba(255,255,255,0.15);
}
.story-floating-bar-btn-prev:hover {
    background: rgba(255,255,255,0.2) !important;
}
.story-floating-bar-btn-prev i {
    transition: transform 0.2s;
}
.story-floating-bar-btn-prev:hover i {
    transform: translateX(-3px);
}

/* Netflix style: Previous part */
.story-btn-netflix-prev {
    margin-bottom: 8px;
    border-color: #333;
}
.story-btn-netflix-prev .story-btn-netflix-label {
    color: #9CA3AF;
}
.story-btn-netflix-prev:hover {
    border-color: #555;
}

/* Magazine style: Previous part */
.story-btn-magazine-prev {
    margin-bottom: 8px;
    background: linear-gradient(135deg, #1E293B, #334155) !important;
}
.story-btn-magazine-prev .story-btn-magazine-label {
    color: #94A3B8;
}
.story-btn-magazine-arrow-left {
    order: -1;
}
.story-btn-magazine-prev:hover .story-btn-magazine-arrow-left {
    transform: translateX(-4px);
    color: #94A3B8;
}

/* =============================================
   STORY PARTS — Style 3: FLOATING BAR
   ============================================= */
.story-style-floating-inline {
    text-align: center;
    margin: 12px 0 0;
}
.story-floating-bar {
    position: fixed;
    bottom: -80px;
    left: 0;
    right: 0;
    z-index: 998;
    background: rgba(17, 17, 17, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 0 20px;
    transition: bottom 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
    /* Safe area for iPhone notch */
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.story-floating-bar.visible {
    bottom: 0;
}
.story-floating-bar-inner {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    gap: 16px;
}
.story-floating-bar-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}
.story-floating-bar-progress {
    color: #9CA3AF;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.story-floating-bar-track {
    width: 100%;
    max-width: 200px;
    height: 3px;
    background: #333;
    border-radius: 3px;
    overflow: hidden;
}
.story-floating-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color, #D93802), #e64a19);
    border-radius: 3px;
    transition: width 0.3s ease;
}
.story-floating-bar-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--primary-color, #D93802), #e64a19);
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 24px;
    border-radius: 10px;
    text-decoration: none !important;
    white-space: nowrap;
    transition: all 0.2s;
    flex-shrink: 0;
}
.story-floating-bar-btn:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 16px rgba(236, 87, 37, 0.4);
    text-decoration: none !important;
    color: #fff !important;
}
.story-floating-bar-btn i {
    font-size: 12px;
    transition: transform 0.2s;
}
.story-floating-bar-btn:hover i {
    transform: translateX(3px);
}
@media (max-width: 600px) {
    .story-floating-bar-inner { padding: 12px 0; }
    .story-floating-bar-btn { font-size: 13px; padding: 10px 18px; }
    .story-floating-bar-progress { font-size: 11px; }
    .story-floating-bar-track { max-width: 120px; }
}

/* =============================================
   STORY PARTS — Style 4: NETFLIX
   ============================================= */
.story-style-netflix {
    margin: 12px 0 0;
}
.story-btn-netflix {
    display: flex !important;
    align-items: center;
    gap: 0;
    background: #141414;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none !important;
    color: #fff !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    transition: all 0.3s ease;
    border: 1px solid #2a2a2a;
}
.story-btn-netflix:hover {
    transform: scale(1.01);
    box-shadow: 0 8px 36px rgba(0,0,0,0.5);
    border-color: #E50914;
    text-decoration: none !important;
    color: #fff !important;
}
.story-btn-netflix-thumb {
    width: 160px;
    height: 100px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}
.story-btn-netflix-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.story-btn-netflix:hover .story-btn-netflix-thumb img {
    transform: scale(1.08);
}
.story-btn-netflix-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    background: rgba(229, 9, 20, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.2s;
    border: 2px solid rgba(255,255,255,0.3);
}
.story-btn-netflix:hover .story-btn-netflix-play {
    opacity: 1;
}
.story-btn-netflix-info {
    flex: 1;
    padding: 16px 20px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.story-btn-netflix-label {
    font-size: 11px;
    font-weight: 800;
    color: #E50914;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.story-btn-netflix-title {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.story-btn-netflix-bar {
    width: 100%;
    height: 3px;
    background: #333;
    border-radius: 2px;
    margin-top: 8px;
    overflow: hidden;
}
.story-btn-netflix-bar-fill {
    height: 100%;
    width: 0%;
    background: #E50914;
    border-radius: 2px;
    animation: netflix-bar-fill 8s linear forwards;
}
@keyframes netflix-bar-fill {
    0% { width: 0%; }
    100% { width: 100%; }
}
.story-btn-netflix-meta {
    padding: 16px 20px 16px 0;
    flex-shrink: 0;
}
.story-btn-netflix-meta span {
    font-size: 12px;
    color: #6B7280;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
    .story-btn-netflix-thumb { width: 100px; height: 75px; }
    .story-btn-netflix-info { padding: 12px 14px; }
    .story-btn-netflix-title { font-size: 14px; }
    .story-btn-netflix-label { font-size: 10px; }
    .story-btn-netflix-meta { padding: 12px 14px 12px 0; }
    .story-btn-netflix-play { width: 30px; height: 30px; font-size: 10px; }
}

/* =============================================
   STORY PARTS — Style 5: MAGAZINE STRIP
   ============================================= */
.story-style-magazine {
    margin: 12px 0 0;
}
.story-btn-magazine {
    display: flex !important;
    align-items: center;
    gap: 0;
    background: linear-gradient(135deg, #0F172A, #1E293B);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none !important;
    color: #fff !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.35);
    transition: all 0.3s ease;
    border: 1px solid rgba(255,255,255,0.06);
}
.story-btn-magazine:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 36px rgba(15, 23, 42, 0.5);
    text-decoration: none !important;
    color: #fff !important;
}
.story-btn-magazine-thumb {
    width: 120px;
    height: 90px;
    flex-shrink: 0;
    overflow: hidden;
}
.story-btn-magazine-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.story-btn-magazine:hover .story-btn-magazine-thumb img {
    transform: scale(1.05);
}
.story-btn-magazine-content {
    flex: 1;
    padding: 16px 20px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.story-btn-magazine-label {
    font-size: 11px;
    font-weight: 700;
    color: #F59E0B;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.story-btn-magazine-title {
    font-size: 15px;
    font-weight: 600;
    color: #F1F5F9;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.story-btn-magazine-arrow {
    padding: 16px 24px;
    flex-shrink: 0;
    color: rgba(255,255,255,0.4);
    font-size: 18px;
    transition: all 0.2s;
}
.story-btn-magazine:hover .story-btn-magazine-arrow {
    color: #F59E0B;
    transform: translateX(4px);
}
@media (max-width: 600px) {
    .story-btn-magazine-thumb { width: 90px; height: 72px; }
    .story-btn-magazine-content { padding: 12px 14px; }
    .story-btn-magazine-title { font-size: 14px; }
    .story-btn-magazine-label { font-size: 10px; }
    .story-btn-magazine-arrow { padding: 12px 16px; font-size: 16px; }
}

/* =============================================
   EMOTIONAL TEXT HIGHLIGHT (v5.5)
   ============================================= */
.emo-highlight {
    transition: all 0.2s ease;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    /* Ensures brush/background wraps correctly across line breaks */
}
.emo-highlight:hover {
    filter: brightness(1.12);
    transform: scale(1.01);
}
/* Dark mode: boost visibility on dark backgrounds */
body.dark-mode .emo-highlight {
    filter: brightness(1.2);
}
body.dark-mode .emo-highlight:hover {
    filter: brightness(1.4);
}

/* =============================================
   CSS-5 FIX: CONTENT-VISIBILITY FOR BELOW-FOLD SECTIONS
   Skips rendering of off-screen content — saves 50-100ms per page.
   ============================================= */
.category-section,
.related-articles,
.comments-area,
.site-footer,
.cat-dontmiss {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
}

/* =============================================
   CSS-4 FIX: DARK MODE — Complete Color System
   Applied via body.dark-mode class (toggled by main.js)
   ============================================= */
body.dark-mode {
    --bg-main: #0d0d0d;
    --bg-card: #161616;
    --text-main: #e0e0e0;
    --text-muted: #888888;
    --border-light: #2a2a2a;
    --bg-peach: #1a1210;
    --dark-bg: #0a0a0a;
    --shadow-card: 0 2px 20px rgba(0, 0, 0, 0.4);
    background-color: var(--bg-main);
    color: var(--text-main);
}

/* Header */
body.dark-mode .site-header {
    background-color: #111111;
}

/* Category nav */
body.dark-mode .category-nav-wrapper {
    background-color: #111111;
}
body.dark-mode .cat-pill {
    background-color: #222222;
    color: var(--text-main);
}
body.dark-mode .cat-pill.active,
body.dark-mode .cat-pill:hover {
    background-color: var(--primary-color);
    color: #fff;
}

/* Cards */
body.dark-mode .grid-card,
body.dark-mode .hero-main,
body.dark-mode .sidebar-card,
body.dark-mode .article-content,
body.dark-mode .sidebar-widget,
body.dark-mode .story-card {
    background-color: var(--bg-card);
    box-shadow: var(--shadow-card);
}

/* Category section blocks */
body.dark-mode .category-section.section-odd {
    background-color: #1a1210;
}
body.dark-mode .category-section.section-even {
    background-color: var(--bg-card);
    box-shadow: var(--shadow-card);
}

/* Text and links */
body.dark-mode .hero-main .hero-title,
body.dark-mode .grid-card .card-title,
body.dark-mode .sidebar-card .card-title,
body.dark-mode .hero-main .hero-excerpt,
body.dark-mode .grid-card .card-excerpt {
    color: var(--text-main);
}

body.dark-mode .hero-main .hero-title a,
body.dark-mode .grid-card .card-title a,
body.dark-mode .sidebar-card .card-title a {
    color: var(--text-main);
}

body.dark-mode .hero-main .hero-title a:hover,
body.dark-mode .grid-card .card-title a:hover,
body.dark-mode .sidebar-card .card-title a:hover {
    color: var(--primary-color);
}

/* Article single */
body.dark-mode .single-post .main-content {
    background-color: var(--bg-main);
}

body.dark-mode .article-title-single {
    color: var(--text-main);
}

body.dark-mode .author-details .author-name,
body.dark-mode .author-details .author-link {
    color: var(--text-main);
}

body.dark-mode .entry-content {
    color: var(--text-main);
}

body.dark-mode .entry-content h1,
body.dark-mode .entry-content h2,
body.dark-mode .entry-content h3,
body.dark-mode .entry-content h4 {
    color: var(--text-main);
}

body.dark-mode .entry-content blockquote {
    background: #1a1510;
    border-left-color: var(--primary-color);
    color: var(--text-main);
}

body.dark-mode .entry-content a {
    color: #ff8a65;
}

/* Lead paragraph */
body.dark-mode .article-lead,
body.dark-mode.has-lead-paragraph .entry-content > p:first-of-type {
    color: var(--text-main);
    background: #1a1510;
}

/* Continue reading overlay */
body.dark-mode .r34c8-cr-overlay {
    background: linear-gradient(to bottom,
        rgba(22, 22, 22, 0) 0%,
        rgba(22, 22, 22, 1) 30%,
        rgba(22, 22, 22, 1) 100%);
}

/* Related articles */
body.dark-mode .related-articles {
    border-top-color: var(--border-light);
}
body.dark-mode .related-grid-card {
    background: var(--bg-card);
    box-shadow: var(--shadow-card);
}
body.dark-mode .related-grid-title,
body.dark-mode .related-item .related-text .related-title {
    color: var(--text-main);
}
body.dark-mode .related-minimal-item {
    border-bottom-color: var(--border-light);
}

/* Sidebar */
body.dark-mode .sidebar-widget {
    background: var(--bg-card);
}
body.dark-mode .top-news-item {
    border-bottom-color: var(--border-light);
}
body.dark-mode .top-news-item .news-title {
    color: var(--text-main);
}

/* Post navigation */
body.dark-mode .post-navigation {
    border-top-color: var(--border-light);
}
body.dark-mode .post-navigation .nav-previous a,
body.dark-mode .post-navigation .nav-next a {
    background: #1a1a1a;
}
body.dark-mode .post-navigation .nav-title {
    color: var(--text-main);
}

/* Comments */
body.dark-mode .comments-area {
    border-top-color: var(--border-light);
}
body.dark-mode .comments-title,
body.dark-mode .comment-reply-title,
body.dark-mode .comment-author .fn,
body.dark-mode .comment-content p {
    color: var(--text-main);
}
body.dark-mode .comment-body {
    border-bottom-color: var(--border-light);
}
body.dark-mode .r34c8-comment-form input[type="text"],
body.dark-mode .r34c8-comment-form input[type="email"],
body.dark-mode .r34c8-comment-form input[type="url"],
body.dark-mode .r34c8-comment-form textarea {
    background: #1a1a1a;
    color: var(--text-main);
    border-color: var(--border-light);
}
body.dark-mode .r34c8-comment-form input:focus,
body.dark-mode .r34c8-comment-form textarea:focus {
    border-color: var(--primary-color);
    background: #111111;
}

/* Tags */
body.dark-mode .post-tags {
    border-top-color: var(--border-light);
}

/* Footer */
body.dark-mode .site-footer {
    background-color: #050505;
}

/* Page content (static pages) */
body.dark-mode .page-content-single {
    background: var(--bg-card);
}
body.dark-mode .page-content-single .entry-title {
    color: var(--text-main);
}
body.dark-mode .page-content-single .entry-content {
    color: var(--text-main);
}
body.dark-mode .page-content-single .entry-content h2 {
    color: var(--text-main);
    border-bottom-color: var(--border-light);
}
body.dark-mode .page-content-single .entry-content strong {
    color: var(--text-main);
}

/* Ad slots */
body.dark-mode .ad-slot-divider::before,
body.dark-mode .ad-slot-divider::after {
    background-color: var(--border-light);
}

/* Search overlay */
body.dark-mode .search-input-wrap {
    background: #1a1a1a;
    border-color: #333;
}
body.dark-mode .search-input-wrap input {
    color: var(--text-main);
}

/* Category page */
body.dark-mode .cat-header--dark {
    background: #111;
}
body.dark-mode .cat-grid-card {
    background: var(--bg-card);
}
body.dark-mode .cat-gc-title a,
body.dark-mode .cat-hero-title a {
    color: var(--text-main);
}

/* Pagination */
body.dark-mode .nav-links .page-numbers {
    background: var(--bg-card);
    color: var(--text-main);
}

/* Placeholder image */
body.dark-mode .am-placeholder-img {
    background: linear-gradient(145deg, #1a1a1a, #222222);
    color: #555;
}

/* 404 page */
body.dark-mode .error-404-content h2 {
    color: var(--text-main);
}

/* Sticky bottom ad */
body.dark-mode .ad-slot-sticky-bottom {
    background: #111;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
}

/* Mobile menu (already dark — no changes needed) */

/* Archive pages */
body.dark-mode .page-title {
    color: var(--text-main);
}

/* Featured headline layout */
body.dark-mode .layout-featured-wrap .featured-headline {
    color: var(--text-main);
    border-bottom-color: var(--border-light);
}
body.dark-mode .layout-featured-wrap .featured-main-title a {
    color: var(--text-main);
}

/* List layout */
body.dark-mode .layout-list-wrap .list-item {
    border-bottom-color: var(--border-light);
}
body.dark-mode .layout-list-wrap .list-item-title {
    color: var(--text-main);
}

/* Full-width gallery */
body.dark-mode .layout-full-wrap .full-card {
    background: var(--bg-card);
    box-shadow: var(--shadow-card);
}
body.dark-mode .layout-full-wrap .full-card-title {
    color: var(--text-main);
}

/* =============================================
   v5.6.11 AUDIT FIXES
   ============================================= */

/* MOB-1 FIX: Tablet breakpoint (768-991px) — prevents overly-wide content on iPad */
@media (min-width: 768px) and (max-width: 991px) {
    .single-layout {
        max-width: 720px;
        margin: 0 auto;
    }
    .container {
        padding: 0 20px;
    }
    /* Constrain homepage hero for tablets */
    .hero-section {
        grid-template-columns: 1fr;
    }
}

/* MOB-3 FIX: Larger touch targets for elderly users (44×44px minimum per WCAG) */
@media (pointer: coarse) {
    .share-btn {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .top-nav-item a,
    .category-nav a {
        padding: 10px 16px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    /* Story Continue button already large enough (18px + 18px padding) */
}

/* UI-1: Horizontal overflow is already handled by html,body overflow-x:clip (line 56).
   Do NOT add overflow-x:clip here — it clips in-content ads that use
   full-width sizing, reducing AdsKeeper/MGID visibility scores. */

/* MOB-6 FIX: Enlarge sticky ad close button for elderly fingers */
@media (pointer: coarse) {
    .ad-sticky-close {
        width: 32px !important;
        height: 32px !important;
        font-size: 18px !important;
        top: 2px !important;
        right: 6px !important;
    }
}