/*!
Theme Name: TIT Magzine
Theme URI: https://mrkreativez.com/jnews-newspaper
Author: JNews Theme
Author URI: https://mrkreativez.com
Description: A professional newspaper WordPress theme fully optimized for Google AdSense. Features responsive design, dark mode, highlights carousel, multiple ad zones (header, sidebar, in-content, footer), customizer-based AdSense configuration, and a pixel-perfect JNews-inspired layout.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
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: TIT Magzine
Tags: news, blog, magazine, newspaper, two-columns, right-sidebar, custom-colors, custom-header, custom-menu, custom-logo, featured-images, footer-widgets, theme-options, threaded-comments, translation-ready, rtl-language-support
*/

/* =============================================
   DESIGN SYSTEM - JNews Newspaper Theme
   ============================================= */
:root {
    --bg-white: #ffffff;
    --bg-grey: #f4f4f4;
    --bg-dark: #111111;
    --text-main: #111111;
    --text-muted: #555555;
    --accent-red: #c00;
    --accent-blue: #174e96;
    --border-light: #e6e6e6;
    --border-dark: #000;
    --font-serif: 'Libre Baskerville', serif;
    --font-sans: 'Inter', sans-serif;
    --font-logo: 'Playfair Display', serif;
    --transition: all 0.3s ease;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.12);
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-white);
    color: var(--text-main);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

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

a:hover {
    color: var(--accent-red);
}

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

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px 15px;
    z-index: 9999;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 0;
}

/* =============================================
   TOP BAR
   ============================================= */
.top-bar {
    background: #000;
    color: #fff;
    padding: 8px 0;
    font-size: 11px;
}

.top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-social a {
    color: #fff;
    margin-right: 15px;
    font-size: 13px;
    transition: color 0.3s;
}

.top-social a:hover {
    color: #ccc;
}

.top-utility {
    display: flex;
    align-items: center;
    gap: 15px;
}

.top-date {
    color: #aaa;
    font-weight: 700;
    font-size: 11px;
}

.login-btn {
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.login-btn:hover {
    color: #ccc;
}

.search-wrapper {
    display: flex;
    align-items: center;
}

.search-wrapper input {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    padding: 2px 5px;
    width: 140px;
    outline: none;
    font-size: 11px;
    font-family: var(--font-sans);
}

.search-wrapper input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.search-wrapper button {
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 0 5px;
}

/* =============================================
   HEADER MAIN (Logo Bar)
   ============================================= */
.header-main {
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-light);
}

.header-logo {
    font-family: var(--font-logo);
    font-size: 72px;
    flex: 1;
    text-align: center;
    letter-spacing: -2px;
    color: #000;
    line-height: 1;
}

.header-logo a {
    color: #000;
}

.header-logo img {
    max-height: 70px;
    width: auto;
}

.header-side {
    width: 260px;
    display: flex;
    align-items: center;
}

.newsletter-btn-outline {
    border: 2px solid #e5e5e5;
    color: #000;
    padding: 8px 15px;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 5px;
    text-transform: uppercase;
    transition: var(--transition);
}

.newsletter-btn-outline:hover {
    background: #000;
    color: #fff;
    border-color: #000;
}

.weather-side {
    justify-content: flex-end;
}

/* Legacy static widget (kept for backwards compat) */
.weather-widget-compact {
    display: flex;
    align-items: center;
    gap: 10px;
}

.weather-widget-compact i {
    font-size: 22px;
    color: #000;
}

.weather-info {
    display: flex;
    flex-direction: column;
}

.weather-info .temp {
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
}

.weather-info .location {
    font-size: 10px;
    text-transform: uppercase;
    color: #999;
    font-weight: 700;
}

/* ── Multi-city dynamic weather widget ── */
.weather-multi {
    position: relative;
    cursor: pointer;
    user-select: none;
    min-width: 120px;
}

.weather-city-slide {
    display: none;
    align-items: center;
    gap: 10px;
    animation: wxFadeIn 0.4s ease;
}

.weather-city-slide.active {
    display: flex;
}

@keyframes wxFadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wx-icon {
    font-size: 22px;
    color: #000;
    flex-shrink: 0;
}

.weather-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.weather-info .temp {
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
    color: #000;
}

.wx-location {
    font-size: 10px;
    text-transform: uppercase;
    color: #999;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1.2;
}

.wx-label {
    font-size: 9px;
    color: #bbb;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.wx-dots {
    display: flex;
    gap: 4px;
    margin-top: 4px;
    justify-content: center;
}

.wx-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ddd;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.3s;
}

.wx-dot.active {
    background: #000;
}

/* Dark mode */
body.dark-mode .wx-icon {
    color: #ddd;
}

body.dark-mode .weather-info .temp {
    color: #fff;
}

body.dark-mode .wx-location {
    color: #888;
}

body.dark-mode .wx-dot {
    background: #444;
}

body.dark-mode .wx-dot.active {
    background: #fff;
}

/* =============================================
   NAVIGATION
   ============================================= */
.nav-main {
    border-top: 3px solid var(--border-dark);
    border-bottom: 1px solid var(--border-light);
    padding: 0;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow-sm);
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.nav-placeholder-left {
    width: 50px;
}

.nav-right {
    display: flex;
    align-items: center;
    width: 50px;
    justify-content: flex-end;
}

.nav-main ul {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 25px;
}

.nav-main ul li {
    position: relative;
}

.nav-main ul li a {
    font-family: "Work Sans", Helvetica, Arial, sans-serif;
    display: block;
    padding: 12px 14px;
    font-weight: 400;
    font-size: 15px;
    letter-spacing: normal;
    color: #000;
    /* text-transform: uppercase; */
    transition: color 0.3s;
    white-space: nowrap;
}

.nav-main ul li a:hover,
.nav-main ul li.current-menu-item>a,
.nav-main ul li.current-menu-ancestor>a {
    color: var(--accent-red);
}

/* Dropdown menus */
.nav-main ul li ul.sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid var(--border-light);
    border-top: 3px solid var(--accent-red);
    min-width: 200px;
    box-shadow: var(--shadow-md);
    z-index: 1001;
    flex-direction: column;
}

.nav-main ul li:hover>ul.sub-menu {
    display: flex;
}

.nav-main ul li ul.sub-menu li a {
    padding: 10px 15px;
    font-size: 12px;
    border-bottom: 1px solid var(--border-light);
}

.nav-main ul li ul.sub-menu li:last-child a {
    border-bottom: none;
}

/* Dark Mode Toggle */
.dark-mode-toggle {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 18px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked+.slider {
    background-color: #000;
}

input:checked+.slider:before {
    transform: translateX(16px);
}

/* =============================================
   HIGHLIGHTS BAR
   ============================================= */
.highlights-bar {
    padding: 0;
    border-bottom: 1px solid var(--border-light);
    background: #fff;
}

.highlights-container {
    display: flex;
    align-items: center;
}

.nav-arrow {
    background: #fff;
    border: 1px solid var(--border-light);
    cursor: pointer;
    padding: 0 12px;
    font-size: 18px;
    color: #999;
    height: 97px;
    flex-shrink: 0;
    transition: color 0.3s;
}

.nav-arrow:hover {
    color: #000;
}

.highlights-wrapper {
    flex: 1;
    overflow: hidden;
    position: relative;
    border-left: 1px solid var(--border-light);
    border-right: 1px solid var(--border-light);
}

.highlights-grid {
    display: flex;
    transition: transform 0.4s ease-in-out;
}

.highlight-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.highlight-item {
    cursor: pointer;
    display: flex;
    flex: 0 0 33.3733%;
    gap: 12px;
    align-items: center;
    padding: 15px 20px;
    border-right: 1px solid var(--border-light);
    transition: background 0.3s;
}

.highlight-item:hover {
    background: var(--bg-grey);
}

.highlight-item img {
    width: 65px;
    height: 65px;
    object-fit: cover;
    flex-shrink: 0;
}

.highlight-item h4 {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    font-family: "Libre Baskerville", Helvetica, Arial, sans-serif;
}

/* =============================================
   ADSENSE AD UNITS
   ============================================= */
.jnews-ad-wrap {
    text-align: center;
    margin: 0 auto;
    overflow: hidden;
}

.jnews-incontent-ad {
    margin: 30px auto;
    text-align: center;
    clear: both;
    overflow: hidden;
}

.ad-label {
    display: block;
    font-size: 10px;
    color: #bbb;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 6px;
    font-weight: 600;
}

.header-ad-zone {
    padding: 15px 0;
    background: #fff;
    text-align: center;
    border-bottom: 1px solid var(--border-light);
}

.leaderboard-ad-zone {
    padding: 25px 0;
    text-align: center;
}

.footer-ad-zone {
    padding: 20px 0;
    background: var(--bg-grey);
    text-align: center;
    border-top: 1px solid var(--border-light);
}

/* Placeholder when no AdSense configured */
.ad-placeholder {
    background: var(--bg-grey);
    border: 1px dashed #ccc;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #bbb;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    gap: 5px;
    min-height: 90px;
    width: 100%;
}

/* =============================================
   MAIN CONTENT GRID
   ============================================= */
.main-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 40px;
    padding: 40px 0;
    align-items: start;
}

.main-content {
    min-width: 0;
}

/* Featured Article */
.featured-article img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
    margin-bottom: 20px;
}

.meta.hero-meta.meta-details {
    gap: 15px;
}

.featured-article .category-tag {
    display: inline-block;
    background: var(--accent-red);
    color: #fff;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

.featured-article h1 {
    font-family: var(--font-serif);
    font-size: 42px;
    line-height: 1.1;
    margin-bottom: 15px;
    font-weight: 900;
    color: #000;
}

.featured-article h1 a {
    color: #000;
}

.featured-article h1 a:hover {
    color: var(--accent-red);
}

.featured-article .excerpt {
    font-size: 15px;
    color: var(--text-muted);
    margin-bottom: 20px;
    line-height: 1.7;
}

.hero-meta {
    color: #999;
    margin-bottom: 20px;
    font-size: 12px;
}

.hero-meta .meta-by {
    font-style: italic;
    margin-right: 3px;
}

.hero-meta .meta-author {
    font-weight: bold;
    color: #333;
}

.hero-meta .meta-author:hover {
    color: var(--accent-red);
}

.hero-meta .meta-date {
    color: #999;
    font-weight: 600;
    text-transform: uppercase;
}

.read-more-btn {
    display: inline-block;
    background: #000;
    color: #fff;
    padding: 10px 22px;
    font-weight: 700;
    font-size: 10px;
    margin-bottom: 25px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: background 0.3s;
}

.read-more-btn:hover {
    background: var(--accent-red);
    color: #fff;
}

.related-links-grid li a {
    display: flex;
    align-items: center;
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 15px;
}

/* Related Links */
.related-links-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 30px;
    list-style: none;
    border-top: 1px solid var(--border-light);
    padding-top: 20px;
}

.related-links-grid li {
    font-size: 13px;
    font-weight: 800;
    line-height: 1.3;
}

/* .related-links-grid li::before {
    content: '›';
    margin-right: 5px;
    color: var(--accent-red);
} */

.related-links-grid li a:hover {
    color: var(--accent-red);
}

.article-grid .article-card .category-tag {
    position: absolute;
    bottom: 15px;
    left: 15px;
    background: #000;
    color: #fff;
    padding: 4px 8px;
    font-weight: 400;
}

/* Article Grid */
.article-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 40px;
    border-top: 3px solid #000;
    padding-top: 30px;
}

.article-card img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
    margin-bottom: 12px;
    transition: opacity 0.3s;
}

.article-card:hover img {
    opacity: 0.9;
}

.article-card .category-tag {
    display: inline-block;
    background: transparent;
    color: var(--accent-blue);
    padding: 0;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    /* margin-bottom: 8px; */
    letter-spacing: 0.5px;
}

.article-card h3 {
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 900;
    line-height: 1.3;
    margin-bottom: 8px;
}

.article-card h3 a:hover {
    color: var(--accent-red);
}

/* Article List Items (betterment / al-item) */
.article-list-wrapper {
    margin-top: 30px;
    padding-top: 10px;
}

.al-item {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    align-items: flex-start;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 30px;
}

.al-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.al-img {
    width: 220px;
    height: 155px;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}

.al-body {
    flex: 1;
    min-width: 0;
}

.al-title {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 900;
    line-height: 1.3;
    margin-bottom: 8px;
}

.al-title a:hover {
    color: var(--accent-red);
}

.al-meta {
    margin-bottom: 10px;
    font-size: 10px;
    color: #aaa;
}

.al-excerpt {
    color: #555;
    line-height: 1.7;
    font-size: 14px;
}

/* =============================================
   SIDEBAR
   ============================================= */
.sidebar {
    min-width: 0;
    overflow: hidden;
}

.sidebar-section {
    margin-bottom: 40px;
}

.sidebar-section h3 {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    border-bottom: 3px solid #000;
    padding-bottom: 10px;
    margin-bottom: 25px;
    letter-spacing: 0.5px;
}

.sidebar-ad-container {
    margin-bottom: 40px;
    text-align: center;
}

.sidebar-ad-box {
    background: var(--bg-grey);
    width: 300px;
    height: 250px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bbb;
    border: 1px dashed #ddd;
    flex-direction: column;
    gap: 8px;
}

.popular-item {
    display: flex;
    gap: 15px;
    margin-bottom: 22px;
    align-items: flex-start;
}

.popular-item .number {
    font-size: 30px;
    font-family: var(--font-serif);
    font-style: italic;
    color: #e0e0e0;
    line-height: 1;
    font-weight: 900;
    flex-shrink: 0;
    width: 42px;
}

.popular-item h4 {
    font-size: 13px;
    font-family: var(--font-serif);
    font-weight: 900;
    line-height: 1.4;
    margin-bottom: 4px;
}

.popular-item h4 a:hover {
    color: var(--accent-red);
}

/* =============================================
   META
   ============================================= */
.meta {
    font-size: 11px;
    text-transform: uppercase;
    color: #999;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    letter-spacing: 0.3px;
    font-family: "Work Sans", Helvetica, Arial, sans-serif;
}

.meta a {
    color: #999;
}

.meta a:hover {
    color: var(--accent-red);
}

.meta .sep {
    color: #ddd;
}

.category-tag {
    display: inline-block;
    background: #000;
    color: #fff;
    padding: 3px 10px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.category-tag:hover {
    background: var(--accent-red);
    color: #fff;
}

.sidecategory.meta.hero-meta.meta-details .meta-clock {
    gap: 5px;
    display: flex;
}

/* =============================================
   VIDEO SECTION
   ============================================= */
.video-channel-modern {
    position: relative;
    background: #0f172a;
    padding: 80px 0;
    margin: 60px 0;
    overflow: hidden;
    color: #fff;
}

.vc-bg-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(220, 38, 38, 0.15) 0%, rgba(15, 23, 42, 0) 70%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
}

.vc-container {
    position: relative;
    z-index: 2;
}

.vc-header {
    text-align: center;
    margin-bottom: 50px;
}

.vc-title {
    font-size: 42px;
    font-weight: 900;
    font-family: var(--font-serif);
    margin-bottom: 10px;
    background: linear-gradient(to right, #fff, #cbd5e1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -1px;
}

.vc-subtitle {
    font-size: 16px;
    color: #94a3b8;
}

.vc-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
    align-items: stretch;
}

.vc-main-video-wrapper {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 10px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
}

.vc-video-frame {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
    height: 0;
    border-radius: 12px;
    overflow: hidden;
}

.vc-video-frame iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.vc-playlist-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s;
}

.vc-playlist-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(220, 38, 38, 0.2);
    border-color: rgba(220, 38, 38, 0.3);
}

.vc-playlist-icon {
    font-size: 48px;
    color: #ef4444;
    margin-bottom: 20px;
    filter: drop-shadow(0 0 15px rgba(239, 68, 68, 0.4));
}

.vc-playlist-content h3 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 15px;
    font-family: var(--font-sans);
    color: #f8fafc;
}

.vc-playlist-content p {
    font-size: 15px;
    color: #94a3b8;
    line-height: 1.6;
    margin-bottom: 30px;
}

.vc-playlist-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
    color: #fff;
    padding: 14px 28px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s;
    box-shadow: 0 8px 20px rgba(220, 38, 38, 0.3);
}

.vc-playlist-btn:hover {
    color: #fff;
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(220, 38, 38, 0.5);
}

.vc-playlist-list-wrapper {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    backdrop-filter: blur(10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    height: 100%;
    max-height: 430px;
    /* same as a typical 16:9 iframe height */
}

.vc-playlist-header {
    background: rgba(0, 0, 0, 0.4);
    padding: 15px 20px;
    font-weight: 800;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
}

.vc-playlist-items {
    overflow-y: auto;
    flex: 1;
}

.vc-playlist-items::-webkit-scrollbar {
    width: 6px;
}

.vc-playlist-items::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

.vc-playlist-items::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.vc-playlist-item {
    display: flex;
    gap: 15px;
    padding: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: background 0.3s;
    align-items: flex-start;
}

.vc-playlist-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.vc-playlist-thumb {
    position: relative;
    width: 120px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 16/9;
}

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

.vc-play-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.vc-playlist-item:hover .vc-play-overlay {
    opacity: 1;
}

.vc-play-overlay i {
    color: #fff;
    font-size: 20px;
}

.vc-playlist-info h4 {
    font-size: 14px;
    font-family: var(--font-sans);
    line-height: 1.5;
    font-weight: 600;
    color: #e2e8f0;
    margin: 0;
}

@media (max-width: 991px) {
    .vc-layout {
        grid-template-columns: 1fr;
    }
}

/* =============================================
   CATEGORY GRID (Homepage)
   ============================================= */
.category-grid-section {
    padding: 50px 0;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.category-grid-item {
    border-top: 3px solid #000;
    padding-top: 15px;
}

.category-grid-item .cat-label {
    font-weight: 900;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--accent-blue);
    display: block;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}

.category-grid-item img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    display: block;
    margin-bottom: 10px;
}

.category-grid-item h3 {
    font-family: var(--font-serif);
    font-size: 15px;
    font-weight: 900;
    line-height: 1.3;
}

.category-grid-item h3 a:hover {
    color: var(--accent-red);
}

/* Category grid columns (homepage bottom grid) */
.cg-col {
    border-top: 3px solid #000;
    padding-top: 15px;
}

.cg-col-heading {
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 10px;
    margin-bottom: 18px;
}

.cg-col-heading a {
    color: inherit;
}

.cg-col-heading a:hover {
    color: var(--accent-red);
}


.cg-featured {
    margin-bottom: 18px;
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.cg-featured-img {
    width: 40%;
    flex-shrink: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 2px;
}

.cg-featured-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cg-featured-body {
    flex: 1;
    min-width: 0;
}

.cg-featured-title {
    font-family: var(--font-serif);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 5px;
}

.cg-featured-title a:hover {
    color: var(--accent-red);
}

.cg-list-item {
    border-top: 1px solid var(--border-light);
    padding: 9px 0;
}

.cg-list-item a {
    font-family: var(--font-serif);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    display: block;
    margin-bottom: 3px;
}

.cg-list-item a:hover {
    color: var(--accent-red);
}

body.dark-mode .cg-col {
    border-color: #444;
}

body.dark-mode .cg-col-heading {
    border-color: #333;
    color: #ddd;
}

body.dark-mode .cg-list-item {
    border-color: #2a2a2a;
}

body.dark-mode .cg-list-item a {
    color: #ccc;
}

body.dark-mode .cg-featured-title a {
    color: #ddd;
}

/* =============================================
   SINGLE POST
   ============================================= */
.single-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 50px;
    padding: 40px 0;
    align-items: start;
}

.article-header {
    margin-bottom: 30px;
}

.article-breadcrumbs {
    font-size: 11px;
    color: #999;
    margin-bottom: 15px;
}

.article-breadcrumbs a {
    color: #999;
}

.article-breadcrumbs a:hover {
    color: var(--accent-red);
}

.article-title {
    font-family: var(--font-serif);
    font-size: 40px;
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: 20px;
    color: #000;
}

.article-meta-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    font-size: 12px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-light);
    flex-wrap: wrap;
}

.article-meta-row .author-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.article-meta-row .author-wrap img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.article-meta-row .author-name {
    font-weight: 700;
    color: #333;
}

.article-meta-row .author-name:hover {
    color: var(--accent-red);
}

.article-meta-row .meta-date,
.article-meta-row .meta-read-time,
.article-meta-row .meta-comments {
    color: #999;
}

.social-share-top {
    display: flex;
    gap: 8px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 15px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    border-radius: 2px;
    transition: opacity 0.3s;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
}

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

.share-fb {
    background: #1877f2;
}

.share-tw {
    background: #000;
}

.share-li {
    background: #0a66c2;
}

.share-wa {
    background: #25d366;
}

/* Featured Image */
.featured-image-wrap {
    margin-bottom: 30px;
}

.featured-image-wrap img {
    width: 100%;
    display: block;
}

.featured-image-wrap figcaption {
    font-size: 12px;
    color: #999;
    padding: 8px 0;
    font-style: italic;
}

/* Article Content */
.article-content {
    line-height: 1.8;
    font-size: 16px;
    color: #333;
}

.article-content p {
    margin-bottom: 24px;
}

.article-content h2 {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 900;
    margin: 35px 0 20px;
}

.article-content h3 {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 900;
    margin: 30px 0 15px;
}

.article-content h4 {
    font-size: 18px;
    font-weight: 800;
    margin: 25px 0 12px;
}

.article-content blockquote {
    border-left: 4px solid var(--accent-red);
    margin: 30px 0;
    padding: 15px 25px;
    background: #f9f9f9;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 18px;
    line-height: 1.6;
    color: #333;
}

.article-content blockquote cite {
    display: block;
    font-size: 13px;
    font-style: normal;
    color: #999;
    margin-top: 10px;
}

.article-content ul,
.article-content ol {
    margin: 0 0 24px 25px;
}

.article-content li {
    margin-bottom: 8px;
}

.article-content img {
    max-width: 100%;
    height: auto;
    margin: 20px 0;
}

.article-content figure {
    margin: 30px 0;
}

.article-content figcaption {
    font-size: 12px;
    color: #999;
    text-align: center;
    margin-top: 8px;
    font-style: italic;
}

.article-content a {
    color: var(--accent-blue);
    text-decoration: underline;
}

.article-content a:hover {
    color: var(--accent-red);
}

.article-content .wp-block-image {
    margin: 30px 0;
}

.article-content .alignleft {
    float: left;
    margin: 5px 25px 20px 0;
}

.article-content .alignright {
    float: right;
    margin: 5px 0 20px 25px;
}

.article-content .aligncenter {
    display: block;
    margin: 20px auto;
    text-align: center;
}

.article-content .wp-caption-text {
    font-size: 12px;
    color: #999;
    text-align: center;
    margin-top: 5px;
}

.article-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.article-content th,
.article-content td {
    border: 1px solid var(--border-light);
    padding: 10px 15px;
    text-align: left;
}

.article-content th {
    background: var(--bg-grey);
    font-weight: 800;
}

/* Tags */
.article-tags {
    margin: 30px 0;
    padding: 20px 0;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}

.article-tags .tags-label {
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: block;
}

.article-tags a {
    display: inline-block;
    border: 1px solid var(--border-light);
    padding: 4px 12px;
    font-size: 11px;
    margin: 3px 3px 3px 0;
    color: #555;
    transition: var(--transition);
}

.article-tags a:hover {
    background: #000;
    color: #fff;
    border-color: #000;
}

/* Author Bio */
.author-bio {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 25px;
    border: 1px solid var(--border-light);
    margin: 30px 0;
    background: var(--bg-grey);
}

.author-bio img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.author-bio-content .author-bio-name {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 900;
    margin-bottom: 8px;
}

.author-bio-content .author-bio-name a:hover {
    color: var(--accent-red);
}

.author-bio-content p {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
}

.author-bio-social {
    margin-top: 10px;
    display: flex;
    gap: 8px;
}

.author-bio-social a {
    font-size: 13px;
    color: #999;
}

.author-bio-social a:hover {
    color: var(--accent-red);
}

/* Related Posts */
.related-posts {
    margin: 40px 0;
}

.related-posts h3 {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    border-bottom: 3px solid #000;
    padding-bottom: 10px;
    margin-bottom: 25px;
}

.related-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.related-post-card img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
    margin-bottom: 12px;
}

.related-post-card h4 {
    font-family: var(--font-serif);
    font-size: 15px;
    font-weight: 900;
    line-height: 1.3;
    margin-bottom: 6px;
}

.related-post-card h4 a:hover {
    color: var(--accent-red);
}

/* =============================================
   CATEGORY / ARCHIVE PAGE
   ============================================= */
.category-hero-section {
    margin-top: 30px;
    margin-bottom: 20px;
}

.category-hero-section .featured-article {
    position: relative;
    overflow: hidden;
}

.category-hero-section .hero-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
}

.category-hero-section .hero-title {
    font-family: var(--font-serif);
    font-size: 30px;
    line-height: 1.1;
    margin-bottom: 10px;
    font-weight: 900;
}

.category-hero-section .hero-title a {
    color: #fff;
}

.category-header-wrap {
    margin: 25px 0 20px;
}

.category-breadcrumbs {
    font-size: 11px;
    color: #999;
    margin-bottom: 12px;
}

.category-breadcrumbs a {
    color: #999;
    text-transform: capitalize;
}

.category-breadcrumbs a:hover {
    color: var(--accent-red);
}

.category-main-title {
    font-family: var(--font-serif);
    font-size: 40px;
    font-weight: 900;
    margin-bottom: 5px;
}

.category-subtitle {
    color: #666;
    font-size: 14px;
}

.category-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 40px;
    padding: 30px 0 60px;
    align-items: start;
}

.category-posts {
    min-width: 0;
}

/* Article List in category */
.jeg-post-list {
    list-style: none;
}

.jeg-post-item {
    display: flex;
    gap: 0;
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--border-light);
}

.jeg-post-item:last-child {
    border-bottom: none;
}

.jeg-post-thumb {
    flex: 0 0 300px;
    width: 300px;
    position: relative;
    overflow: hidden;
    margin-right: 20px;
}

.jeg-post-thumb img {
    width: 100%;
    height: 210px;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.jeg-post-item:hover .jeg-post-thumb img {
    transform: scale(1.04);
}

.jeg-post-thumb .post-cat {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: #000;
    color: #fff;
    padding: 3px 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    z-index: 2;
}

.jeg-post-body {
    flex: 1;
    min-width: 0;
    padding-top: 5px;
}

.jeg-post-title {
    font-family: var(--font-serif);
    font-size: 21px;
    line-height: 1.3;
    margin-bottom: 10px;
    font-weight: 900;
}

.jeg-post-title a:hover {
    color: var(--accent-red);
}

.jeg-post-excerpt {
    font-size: 14px;
    color: #555;
    line-height: 1.7;
    margin: 10px 0 15px;
}

.jeg-readmore {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #333;
    border-bottom: 2px solid transparent;
    padding-bottom: 1px;
    transition: var(--transition);
}

.jeg-readmore:hover {
    color: var(--accent-blue);
    border-bottom-color: var(--accent-blue);
}

/* =============================================
   AUTHOR PAGE
   ============================================= */
.author-hero {
    background: var(--bg-grey);
    padding: 40px 0;
    border-bottom: 1px solid var(--border-light);
}

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

.author-info-box img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.author-details .author-name {
    font-family: var(--font-serif);
    font-size: 32px;
    font-weight: 900;
    margin-bottom: 8px;
}

.author-details .author-title {
    font-size: 12px;
    text-transform: uppercase;
    color: #999;
    font-weight: 700;
    margin-bottom: 10px;
}

.author-details .author-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    max-width: 600px;
}

.author-socials {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.author-socials a {
    width: 32px;
    height: 32px;
    border-radius: 2px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.author-socials .a-fb {
    background: #3b5998;
}

.author-socials .a-tw {
    background: #000;
}

.author-socials .a-ig {
    background: #e1306c;
}

.author-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 40px;
    padding: 40px 0;
    align-items: start;
}

.author-posts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.author-post-card {
    border: 1px solid var(--border-light);
    overflow: hidden;
}

.author-post-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.author-post-card-body {
    padding: 15px;
}

.author-post-card h3 {
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 900;
    line-height: 1.3;
    margin-bottom: 8px;
}

.author-post-card h3 a:hover {
    color: var(--accent-red);
}

.author-post-card .meta {
    margin-bottom: 0;
}

/* =============================================
   SEARCH PAGE
   ============================================= */
.search-header {
    padding: 40px 0 30px;
    border-bottom: 1px solid var(--border-light);
}

.search-header h1 {
    font-family: var(--font-serif);
    font-size: 32px;
    font-weight: 900;
    margin-bottom: 10px;
}

.search-header p {
    color: #666;
    font-size: 14px;
}

.search-form-large {
    display: flex;
    border: 2px solid #000;
    margin-top: 20px;
    max-width: 600px;
}

.search-form-large input {
    flex: 1;
    border: none;
    padding: 12px 15px;
    font-size: 15px;
    outline: none;
    background: transparent;
    font-family: var(--font-sans);
}

.search-form-large button {
    background: #000;
    border: none;
    color: #fff;
    padding: 0 20px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.3s;
}

.search-form-large button:hover {
    background: var(--accent-red);
}

.search-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 40px;
    padding: 40px 0;
    align-items: start;
}

/* =============================================
   404 PAGE
   ============================================= */
.error-404-wrap {
    text-align: center;
    padding: 80px 20px;
}

.error-404-wrap .error-code {
    font-family: var(--font-serif);
    font-size: 120px;
    font-weight: 900;
    line-height: 1;
    color: #f0f0f0;
    margin-bottom: 20px;
}

.error-404-wrap h2 {
    font-family: var(--font-serif);
    font-size: 32px;
    font-weight: 900;
    margin-bottom: 15px;
}

.error-404-wrap p {
    font-size: 15px;
    color: #666;
    margin-bottom: 30px;
}

.error-404-wrap .back-btn {
    display: inline-block;
    background: #000;
    color: #fff;
    padding: 12px 30px;
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background 0.3s;
}

.error-404-wrap .back-btn:hover {
    background: var(--accent-red);
    color: #fff;
}

/* =============================================
   COMMENTS
   ============================================= */
.comments-section {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 3px solid #000;
}

.comments-title {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 900;
    margin-bottom: 30px;
}

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

.comment {
    margin-bottom: 25px;
}

.comment-body {
    display: flex;
    gap: 15px;
}

.comment-body .comment-author-avatar {
    flex-shrink: 0;
}

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

.comment-content-wrap {
    flex: 1;
}

.comment-meta {
    font-size: 12px;
    color: #999;
    margin-bottom: 8px;
}

.comment-meta .comment-author-name {
    font-weight: 700;
    color: #333;
    font-size: 13px;
    margin-right: 8px;
}

.comment-text {
    font-size: 14px;
    line-height: 1.7;
    color: #444;
}

.comment-text p {
    margin-bottom: 10px;
}

.reply {
    margin-top: 8px;
}

.reply a {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #999;
    letter-spacing: 0.5px;
}

.reply a:hover {
    color: var(--accent-red);
}

.children {
    margin-left: 50px;
    list-style: none;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-light);
}

/* Comment Form */
.comment-respond {
    margin-top: 40px;
}

.comment-respond h3 {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 900;
    margin-bottom: 20px;
}

.comment-form {}

.comment-form .comment-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

.comment-form p {
    margin-bottom: 15px;
}

.comment-form label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 6px;
    color: #444;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-light);
    font-family: var(--font-sans);
    font-size: 14px;
    outline: none;
    transition: border-color 0.3s;
}

.comment-form input:focus,
.comment-form textarea:focus {
    border-color: #000;
}

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

.comment-form .form-submit input {
    background: #000;
    color: #fff;
    border: none;
    padding: 12px 30px;
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background 0.3s;
    width: auto;
}

.comment-form .form-submit input:hover {
    background: var(--accent-red);
}

/* =============================================
   FOOTER
   ============================================= */
.site-footer {
    background: #fff;
    border-top: 5px solid #000;
}

.footer-widgets {
    padding: 60px 0 40px;
}

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

.footer-col h4 {
    text-transform: uppercase;
    font-size: 12px;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 12px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

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

.footer-col ul li {
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #444;
}

.footer-col ul li a:hover {
    color: var(--accent-red);
}

.footer-logo {
    font-family: var(--font-logo);
    font-size: 40px;
    font-weight: 900;
    color: #000;
    margin-bottom: 15px;
    display: block;
}

.footer-logo img {
    max-height: 50px;
}

.footer-about-text {
    font-size: 13px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 20px;
}

.footer-contact-info p {
    font-size: 13px;
    color: #666;
    margin-bottom: 6px;
}

.footer-contact-info a {
    color: #000;
    font-weight: 700;
}

.footer-social {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.footer-social a {
    width: 32px;
    height: 32px;
    background: #000;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    border-radius: 2px;
    transition: background 0.3s;
}

.footer-social a:hover {
    background: var(--accent-red);
    color: #fff;
}

.footer-categories {
    list-style: none;
}

.footer-categories li a {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    padding: 9px 0;
    font-size: 13px;
    font-weight: 700;
    color: #444;
}

.footer-categories li a:hover {
    color: var(--accent-red);
}

.footer-categories li a span {
    color: #bbb;
    font-size: 11px;
}

.footer-newsletter-form .newsletter-input-wrap {
    display: flex;
    border: 1px solid #ddd;
}

.footer-newsletter-form input {
    flex: 1;
    padding: 11px 12px;
    border: none;
    outline: none;
    font-family: var(--font-sans);
    font-size: 13px;
}

.footer-newsletter-form button {
    background: #000;
    color: #fff;
    border: none;
    padding: 0 18px;
    font-weight: 800;
    cursor: pointer;
    font-size: 11px;
    text-transform: uppercase;
    transition: background 0.3s;
}

.footer-newsletter-form button:hover {
    background: var(--accent-red);
}

.footer-bottom {
    background: #111;
    color: #888;
    padding: 18px 0;
    font-size: 12px;
}

.footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-menu ul {
    display: flex;
    list-style: none;
    gap: 20px;
}

.footer-menu a {
    color: #ccc;
    font-weight: 700;
    font-size: 12px;
}

.footer-menu a:hover {
    color: #fff;
}

/* =============================================
   MOBILE OVERLAY & DRAWER
   ============================================= */
.mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1998;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.mobile-overlay.active {
    display: block;
    opacity: 1;
}

.mobile-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 290px;
    height: 100%;
    background: #fff;
    z-index: 1999;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
}

.mobile-drawer.open {
    transform: translateX(0);
}

.mobile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.mobile-drawer-logo span {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 900;
    color: #000;
}

.mobile-drawer-logo img {
    max-height: 30px;
}

.mobile-drawer-close {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    color: #555;
    border: 1px solid #ddd;
    line-height: 1;
    transition: var(--transition);
}

.mobile-drawer-close:hover {
    background: #000;
    color: #fff;
    border-color: #000;
}

.mobile-drawer-search {
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.mobile-drawer-search form {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    padding: 8px 12px;
}

.mobile-drawer-search input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 13px;
    background: transparent;
    color: #333;
    font-family: var(--font-sans);
}

.mobile-drawer-search button {
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
}

.mobile-drawer-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
}

.mobile-drawer-nav>li {
    border-bottom: 1px solid #f0f0f0;
}

.mobile-drawer-nav>li>a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    font-size: 12px;
    font-weight: 800;
    color: #111;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    transition: color 0.2s, padding-left 0.2s;
}

.mobile-drawer-nav>li>a:hover,
.mobile-drawer-nav>li>a.active {
    color: var(--accent-red);
    padding-left: 20px;
}

.mobile-drawer-footer {
    padding: 16px;
    border-top: 1px solid #eee;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
}

.mobile-drawer-footer a {
    width: 30px;
    height: 30px;
    border-radius: 2px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.mobile-drawer-footer .m-fb {
    background: #3b5998;
}

.mobile-drawer-footer .m-tw {
    background: #000;
}

.mobile-drawer-footer .m-yt {
    background: #ff0000;
}

.mobile-drawer-footer .m-ig {
    background: #e1306c;
}

/* =============================================
   MOBILE HEADER
   ============================================= */
.mobile-header {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    height: 54px;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow-sm);
    border-bottom: 1px solid var(--border-light);
}

.mobile-hamburger {
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 22px;
    flex-shrink: 0;
}

.mobile-hamburger span {
    display: block;
    height: 2px;
    width: 100%;
    background: #000;
    border-radius: 2px;
    transition: var(--transition);
}

.mobile-header-logo {
    flex: 1;
    text-align: center;
    max-width: 200px;
}

.mobile-header-logo a {
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 900;
    color: #000;
}

.mobile-header-logo img {
    max-height: 34px;
    vertical-align: middle;
}

.mobile-search-btn {
    background: none;
    border: none;
    padding: 6px 8px;
    cursor: pointer;
    font-size: 15px;
    color: #333;
    flex-shrink: 0;
}

.mobile-search-bar {
    display: none;
    background: #f4f4f4;
    border-bottom: 1px solid #ddd;
}

.mobile-search-bar.open {
    display: flex;
}

.mobile-search-bar form {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 15px;
}

.mobile-search-bar input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    background: transparent;
    font-family: var(--font-sans);
}

.mobile-search-bar button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
}

/* =============================================
   VISIBILITY UTILITIES
   ============================================= */
.desktop-only {
    display: block;
}

.mobile-only {
    display: none;
}

/* =============================================
   PAGINATION
   ============================================= */
.pagination {
    display: flex;
    gap: 8px;
    margin: 40px 0 60px;
    flex-wrap: wrap;
}

.pagination .page-numbers {
    background: var(--bg-grey);
    color: #000;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    transition: var(--transition);
}

.pagination .page-numbers.current {
    background: #000;
    color: #fff;
}

.pagination a.page-numbers:hover {
    background: var(--accent-red);
    color: #fff;
}

.pagination .page-numbers.dots {
    background: transparent;
    width: auto;
}

/* =============================================
   MODAL (Login)
   ============================================= */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    inset: 0;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
}

.modal.open {
    display: flex;
}

.modal-content {
    background: #fff;
    padding: 35px;
    width: 400px;
    max-width: 90%;
    position: relative;
}

.close-btn {
    color: #aaa;
    float: right;
    font-size: 26px;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 15px;
    line-height: 1;
}

.close-btn:hover {
    color: #000;
}

/* WordPress Widgets */
.widget {
    margin-bottom: 35px;
}

.widget-title {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    border-bottom: 3px solid #000;
    padding-bottom: 10px;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}

.widget ul {
    list-style: none;
}

.widget ul li {
    border-bottom: 1px solid var(--border-light);
    padding: 8px 0;
    font-size: 13px;
}

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

.widget ul li a {
    color: #444;
    font-weight: 600;
}

.widget ul li a:hover {
    color: var(--accent-red);
}

.widget_search .search-form {
    display: flex;
    border: 1px solid var(--border-light);
}

.widget_search .search-field {
    flex: 1;
    border: none;
    padding: 8px 10px;
    outline: none;
    font-family: var(--font-sans);
}

.widget_search .search-submit {
    background: #000;
    color: #fff;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    font-weight: 700;
    font-size: 12px;
}

.widget_search .search-submit:hover {
    background: var(--accent-red);
}

.textwidget p {
    font-size: 13px;
    color: #666;
    line-height: 1.7;
}

/* Gallery & Captions */
.wp-caption {
    max-width: 100%;
}

.wp-caption-text {
    font-size: 12px;
    color: #999;
    text-align: center;
    margin-top: 5px;
    font-style: italic;
}

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

.gallery-item {
    overflow: hidden;
}

.gallery-item img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    transition: transform 0.4s;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

/* =============================================
   DARK MODE
   ============================================= */
body.dark-mode {
    background-color: #111;
    color: #ddd;
}

body.dark-mode .nav-main {
    background-color: #1a1a1a;
    border-color: #333;
}

body.dark-mode .nav-main ul li a {
    color: #ddd;
}

body.dark-mode .highlights-bar {
    background-color: #1a1a1a;
    border-color: #333;
}

body.dark-mode .highlight-item {
    border-color: #2a2a2a;
}

body.dark-mode .highlight-item:hover {
    background: #222;
}

body.dark-mode .highlight-item h4 {
    color: #ddd;
}

body.dark-mode .nav-arrow {
    background: #1a1a1a;
    color: #ddd;
}


body.dark-mode .author-hero{
    background-color: #1a1a1a;    
}

body.dark-mode .featured-article h1,
body.dark-mode .article-title,
body.dark-mode .al-title,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4 {
    color: #fff !important;
}

body.dark-mode .featured-article h1 a {
    color: #fff !important;
}

body.dark-mode .featured-article h1 a:hover {
    color: var(--accent-red);
}

body.dark-mode .main-grid {}

body.dark-mode .site-footer {
    background-color: #1a1a1a;
    border-color: #333;
}

body.dark-mode .footer-widgets {
    background: #1a1a1a;
}

body.dark-mode .footer-grid {}

body.dark-mode .footer-col h4 {
    border-color: #333;
    color: #ddd;
}

body.dark-mode .footer-categories li a {
    border-color: #2a2a2a;
    color: #bbb;
}

body.dark-mode .footer-about-text {
    color: #aaa;
}

body.dark-mode .footer-contact-info p,
body.dark-mode .footer-contact-info a {
    color: #bbb;
}

body.dark-mode .header-main {
    border-color: #333;
}

body.dark-mode .newsletter-btn-outline {
    border-color: #444;
    color: #ddd;
}

body.dark-mode .newsletter-btn-outline:hover {
    border-color: #fff;
    background: #fff;
    color: #000;
}

body.dark-mode .weather-widget-compact i,
body.dark-mode .weather-info .temp {
    color: #fff;
}

body.dark-mode .weather-info .location {
    color: #aaa;
}

body.dark-mode .modal-content {
    background-color: #222;
    color: #fff;
    border-color: #444;
}

body.dark-mode .close-btn {
    color: #aaa;
}

body.dark-mode .mobile-header {
    background: #1a1a1a;
    border-color: #333;
}

body.dark-mode .mobile-hamburger span {
    background: #ddd;
}

body.dark-mode .mobile-search-btn {
    color: #ddd;
}

body.dark-mode .mobile-search-bar {
    background: #222;
    border-color: #333;
}

body.dark-mode .mobile-drawer {
    background: #1a1a1a;
}

body.dark-mode .mobile-drawer-header {
    border-color: #333;
}

body.dark-mode .mobile-drawer-logo span {
    color: #fff;
}

body.dark-mode .mobile-drawer-close {
    color: #ddd;
    border-color: #444;
}

body.dark-mode .mobile-drawer-search {
    border-color: #333;
}

body.dark-mode .mobile-drawer-search form {
    border-color: #555;
    background: #222;
}

body.dark-mode .mobile-drawer-search input {
    color: #ddd;
}

body.dark-mode .mobile-drawer-nav>li {
    border-color: #2a2a2a;
}

body.dark-mode .mobile-drawer-nav>li>a {
    color: #ddd;
}

body.dark-mode .mobile-drawer-footer {
    border-color: #333;
}

body.dark-mode .article-content {
    color: #ccc;
}

body.dark-mode .article-content blockquote {
    background: #222;
    border-color: var(--accent-red);
}

body.dark-mode .author-bio {
    background: #1a1a1a;
    border-color: #333;
}

body.dark-mode .jeg-post-item {
    border-color: #2a2a2a;
}

body.dark-mode .category-main-title {
    color: #fff;
}

body.dark-mode .article-title {
    color: #fff;
}

body.dark-mode .top-bar {
    background: #0a0a0a;
}

body.dark-mode .sidebar-section h3 {
    border-color: #444;
    color: #ddd;
}

body.dark-mode .popular-item h4 a {
    color: #ddd;
}

body.dark-mode .widget-title {
    border-color: #444;
    color: #ddd;
}

body.dark-mode .widget ul li {
    border-color: #2a2a2a;
}

body.dark-mode .widget ul li a {
    color: #bbb;
}

body.dark-mode .ad-placeholder {
    background: #1a1a1a;
    border-color: #333;
    color: #555;
}

body.dark-mode .footer-newsletter-form input {
    background: #222;
    color: #ddd;
    border-color: #444;
}

body.dark-mode .footer-newsletter-form .newsletter-input-wrap {
    border-color: #444;
}

body.dark-mode .related-posts h3 {
    border-color: #444;
    color: #fff;
}

body.dark-mode .comment-meta .comment-author-name {
    color: #ddd;
}

body.dark-mode .comment-text {
    color: #bbb;
}

body.dark-mode .comment-form input[type="text"],
body.dark-mode .comment-form input[type="email"],
body.dark-mode .comment-form textarea {
    background: #222;
    border-color: #444;
    color: #ddd;
}

body.dark-mode .search-form-large {
    border-color: #444;
}

body.dark-mode .search-form-large input {
    color: #ddd;
    background: #1a1a1a;
}

body.dark-mode .error-404-wrap h2 {
    color: #fff;
}

/* =============================================
   POPULAR NEWS — CIRCULAR NUMBER (items 2-5)
   ============================================= */
.circular-number {
    width: 34px !important;
    height: 34px;
    border: 2px solid #e0e0e0;
    border-radius: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 13px !important;
    font-weight: 900;
    font-family: var(--font-serif);
    font-style: normal !important;
    color: #bbb !important;
    flex-shrink: 0;
    line-height: 1 !important;
}

body.dark-mode .circular-number {
    border-color: #444;
    color: #555 !important;
}

/* =============================================
   VIDEO CHANNEL — PLAYLIST UI
   ============================================= */
.playlist-currently-playing {
    background: #1a1a1a;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.cp-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
    padding-right: 10px;
}

.cp-label>span:first-child {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--accent-blue);
    font-weight: 700;
}

.cp-title {
    font-size: 11px;
    color: #ccc;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.cp-play-icon {
    font-size: 26px;
    color: var(--accent-blue);
    flex-shrink: 0;
}

.thumbnail-wrapper {
    flex-shrink: 0;
    overflow: hidden;
}

/* =============================================
   RESPONSIVE — TABLET (768px – 1199px)
   ============================================= */
@media (min-width: 768px) and (max-width: 1199px) {
    .header-logo {
        font-size: 48px;
    }

    .header-logo img{
        max-height: auto;
    width: auto;
    max-width: 40vw;
    }

    .header-side {
        width: auto;
    }

    main.container {
    padding: 60px 20px 80px !important;
}

    .nav-main ul {
        gap: 25px;
        flex-wrap: wrap;
    }

    .nav-main ul li a {
        padding: 12px 9px;
        font-size: 11px;
    }

    .main-grid {
        grid-template-columns: 1fr 250px;
        gap: 25px;
    }

    .single-layout {
        grid-template-columns: 1fr 250px;
        gap: 30px;
    }

    .category-layout {
        grid-template-columns: 1fr 250px;
        gap: 25px;
    }

    .author-layout {
        grid-template-columns: 1fr 250px;
        gap: 25px;
    }

    .search-layout {
        grid-template-columns: 1fr 250px;
        gap: 25px;
    }

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

    .featured-article h1 {
        font-size: 28px;
    }

    .article-title {
        font-size: 30px;
    }

    .category-main-title {
        font-size: 32px;
    }

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

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

    .jeg-post-thumb {
        flex: 0 0 230px;
        width: 230px;
    }

    .jeg-post-thumb img {
        height: 170px;
    }

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

    .author-posts-grid {
        grid-template-columns: 1fr;
    }


}

/* =============================================
   RESPONSIVE — MOBILE (≤ 767px)
   ============================================= */
@media (max-width: 767px) {
    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: flex !important;
    }
    
    div#main .container{
        padding: 20px 20px 20px !important;
    }
    
    .category-hero-section .container .featured-article img {
        height: auto !important;
    margin-bottom: 0;
    aspect-ratio: 16/12 !important;
}

    /* .featured-article img{
        max-height: 240px;
    } */

    .container{
        padding: 60px 20px 80px !important;
    }

    .container .jpage-two-col div {
    border: 0px !important;
    padding: 0px !important;
}

    .main-grid,
    .single-layout,
    .category-layout,
    .author-layout,
    .search-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .main-grid {
        padding: 20px 0;
    }

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

    .footer-bottom-inner {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .footer-menu ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .featured-article h1 {
        font-size: 24px;
    }

    .article-title {
        font-size: 24px;
    }

    .category-main-title {
        font-size: 26px;
    }

    .author-details .author-name {
        font-size: 24px;
    }

    .article-grid {
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    .related-links-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .related-posts-grid {
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    .category-grid {
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    .author-posts-grid {
        grid-template-columns: 1fr;
    }

    .author-info-box {
        flex-direction: column;
        text-align: center;
    }

    .author-socials {
        justify-content: center;
    }

    .jeg-post-item {
        flex-direction: column;
    }

    .jeg-post-thumb {
        width: 100%;
        flex: 0 0 auto;
        margin-right: 0;
        margin-bottom: 12px;
    }

    .jeg-post-thumb img {
        height: 200px;
    }

    .article-meta-row {
        gap: 10px;
    }

    .al-item {
        gap: 12px;
    }

    .al-img {
        width: 120px;
        height: auto;
        aspect-ratio: 16/12;
    }

    .al-excerpt {
        display: none;
    }

    .comment-form .comment-form-grid {
        grid-template-columns: 1fr;
    }

    .social-share-top {
        gap: 6px;
    }

    .share-btn {
        padding: 6px 10px;
        font-size: 10px;
    }

    .error-404-wrap .error-code {
        font-size: 80px;
    }

    .error-404-wrap h2 {
        font-size: 22px;
    }

    .highlights-bar {
        display: none;
    }

    .author-bio {
        flex-direction: column;
    }

    .author-bio img {
        width: 70px;
        height: 70px;
    }

    .footer-widgets {
        padding: 40px 0 30px;
    }

    .category-hero-section .hero-content {
        padding: 20px;
    }

    .category-hero-section .hero-title {
        font-size: 20px;
    }
}

/* =============================================
   RESPONSIVE — SMALL PHONE (≤ 480px)
   ============================================= */
@media (max-width: 480px) {

    .article-grid,
    .related-posts-grid,
    .category-grid {
        grid-template-columns: 1fr;
    }

    .author-posts-grid {
        grid-template-columns: 1fr;
    }

    .article-title {
        font-size: 20px;
    }

    .featured-article h1 {
        font-size: 20px;
    }

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

    .search-form-large {
        flex-direction: column;
    }

    .search-form-large input {
        padding: 12px;
    }

    .search-form-large button {
        padding: 12px;
        width: 100%;
    }
}

/* =============================================
   READING PROGRESS BAR
   ============================================= */
#readingProgress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-red), #ff6b6b);
    z-index: 9999;
    transition: width 0.1s linear;
    border-radius: 0 2px 2px 0;
    pointer-events: none;
}

/* =============================================
   BACK TO TOP BUTTON
   ============================================= */
#backToTop {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 44px;
    height: 44px;
    background: #000;
    color: #fff;
    border: none;
    border-radius: 2px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s, background 0.2s;
    z-index: 999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

#backToTop.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#backToTop:hover {
    background: var(--accent-red);
}

@media (max-width: 767px) {
    #backToTop {
        bottom: 20px;
        right: 16px;
        width: 40px;
        height: 40px;
    }
}

/* =============================================
   ADSENSE — IMPROVED AD ZONES & LABELS
   ============================================= */

/* AdSense label — clearly distinguishable from content */
.ad-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #bbb;
    text-align: center;
    margin-bottom: 6px;
    user-select: none;
}

/* Wrapper around every ad unit */
.jnews-ad-wrap {
    text-align: center;
    overflow: hidden;
    clear: both;
    position: relative;
    padding: 6px 0;
    background: transparent;
}

/* In-content ad — well-separated from article text */
.jnews-incontent-ad {
    margin: 35px auto;
    text-align: center;
    clear: both;
    overflow: hidden;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    padding: 20px 0;
}

/* Placeholder shown in Customizer preview / WP_DEBUG */
.ad-placeholder {
    background: var(--bg-grey);
    border: 1px dashed #ccc;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #bbb;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    gap: 6px;
    min-height: 90px;
    width: 100%;
}

body.dark-mode .ad-placeholder {
    background: #1a1a1a;
    border-color: #333;
}

body.dark-mode .jnews-incontent-ad {
    border-color: #2a2a2a;
}

/* Below-article ad zone */
.below-article-ad-zone {
    margin: 30px 0;
    padding: 20px 0;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    text-align: center;
    clear: both;
}

body.dark-mode .below-article-ad-zone {
    border-color: #2a2a2a;
}

/* =============================================
   DEMO AD PLACEHOLDERS
   Rich coloured blocks shown when "Show Demo Ads" is ON.
   Each slot has its own --demo-color set inline via PHP.
   ============================================= */
.jnews-demo-ad {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--demo-color, #2c3e50);
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
}

/* Diagonal stripe overlay for visual distinction */
.jnews-demo-ad::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(45deg,
            transparent,
            transparent 12px,
            rgba(255, 255, 255, 0.04) 12px,
            rgba(255, 255, 255, 0.04) 24px);
    pointer-events: none;
}

/* Top-left "AD ZONE" watermark */
.jnews-demo-ad::after {
    content: 'AD ZONE';
    position: absolute;
    top: 8px;
    left: 12px;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.2);
    font-family: var(--font-sans);
    pointer-events: none;
}

.demo-ad-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 14px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.demo-ad-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 2.5px;
    padding: 2px 8px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    text-transform: uppercase;
    font-family: var(--font-sans);
    margin-bottom: 2px;
}

.demo-ad-name {
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.demo-ad-size {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.55);
    font-family: monospace;
}

.demo-ad-tip {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--font-sans);
    max-width: 300px;
    line-height: 1.4;
}

.demo-ad-cta {
    display: inline-block;
    margin-top: 6px;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 5px 14px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: var(--font-sans);
    transition: background 0.2s;
}

.demo-ad-cta:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

/* Ad label below demo block */
.jnews-demo-ad+.ad-label {
    margin-top: 4px;
}

/* =============================================
   MOBILE STICKY AD BANNER
   Fixed to bottom on mobile only; slides out on close.
   ============================================= */
.jnews-mobile-sticky-ad {
    display: none;
    /* shown only on mobile via media query below */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1200;
    background: #fff;
    border-top: 1px solid #ddd;
    text-align: center;
    padding: 6px 0 4px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.12);
}

.jnews-mobile-sticky-ad .ad-label {
    margin-bottom: 3px;
}

.mobile-sticky-close {
    position: absolute;
    top: 4px;
    right: 8px;
    background: none;
    border: none;
    font-size: 14px;
    color: #999;
    cursor: pointer;
    padding: 2px 5px;
    line-height: 1;
    z-index: 1;
}

.mobile-sticky-close:hover {
    color: #333;
}

/* Demo variant inside mobile sticky */
.jnews-mobile-sticky-ad .jnews-demo-ad {
    max-width: 320px;
    min-height: 50px;
    margin: 0 auto;
}

.jnews-mobile-sticky-ad .demo-ad-inner {
    padding: 8px 12px;
    gap: 2px;
}

.jnews-mobile-sticky-ad .demo-ad-name {
    font-size: 10px;
}

.jnews-mobile-sticky-ad .demo-ad-tip,
.jnews-mobile-sticky-ad .demo-ad-cta {
    display: none;
}

body.dark-mode .jnews-mobile-sticky-ad {
    background: #1a1a1a;
    border-color: #333;
}

@media (max-width: 767px) {
    .jnews-mobile-sticky-ad {
        display: block;
    }

    /* Push page content up so sticky bar doesn't overlap */
    body.has-sticky-ad {
        padding-bottom: 66px;
    }
}

/* =============================================
   PRINT STYLES (SEO: Google indexes print too)
   ============================================= */
@media print {

    /* Hide ads, navigation, sidebar */
    .jnews-ad-wrap,
    .jnews-incontent-ad,
    .header-ad-zone,
    .footer-ad-zone,
    .sidebar,
    .single-sidebar,
    .nav-main,
    .top-bar,
    .highlights-bar,
    .mobile-header,
    .mobile-drawer,
    .mobile-overlay,
    .social-share-top,
    .social-share-bottom,
    .article-share-bar,
    .related-posts,
    .comments-section,
    #backToTop,
    #readingProgress {
        display: none !important;
    }

    /* Clean article layout */
    .single-layout,
    .main-grid {
        grid-template-columns: 1fr !important;
    }

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

    .article-title {
        font-size: 24pt;
    }

    a[href]::after {
        content: ' (' attr(href) ')';
        font-size: 9pt;
        color: #555;
    }

    a[href^='#']::after,
    a[href^='javascript']::after {
        content: '';
    }

    img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    .article-body p {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

/* =============================================
   SINGLE POST — Newspaper Premium
   Matches jnews.io/newspaper & NYT structure.
   Same layout as single.html — polished styling.
   ============================================= */

/* Breadcrumb bar */
.single-breadcrumb {
    background: #fff;
    /* border-bottom: 1px solid #eee; */
    padding: 10px 0;
    font-size: 11px;
    color: #999;
    letter-spacing: 0.3px;
    margin-top: 40px;
}

.single-breadcrumb .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.single-breadcrumb a {
    color: #888;
    font-weight: 600;
}

.single-breadcrumb a:hover {
    color: var(--accent-red);
}

.single-breadcrumb span {
    color: #ccc;
}

body.dark-mode .single-breadcrumb {
    background: #151515;
    border-color: #222;
}

body.dark-mode .single-breadcrumb a {
    color: #777;
}

/* Category section label (red pill above title) */
.single-cat-label {
    display: inline-block;
    background: var(--accent-red);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 4px 14px;
    margin-bottom: 18px;
    margin-top: 30px;
}

.single-cat-label:hover {
    background: #a00;
    color: #fff;
}

/* Article title */
.article-title {
    font-family: var(--font-serif);
    font-size: clamp(26px, 3.5vw, 44px);
    font-weight: 900;
    line-height: 1.18;
    color: #111;
    margin: 0 0 16px;
    letter-spacing: -0.5px;
}

body.dark-mode .article-title {
    color: #f0f0f0;
}

/* Subtitle / italic deck */
.article-subtitle {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 19px;
    color: #666;
    line-height: 1.55;
    margin: 0 0 22px;
    border-bottom: 1px solid transparent;
}

body.dark-mode .article-subtitle {
    color: #aaa;
}

/* Meta row */
.article-meta-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 13px 0;
    margin-bottom: 28px;
    border-top: 1px solid #e0e0e0;
    border-bottom: 2px solid #111;
    font-size: 12px;
    color: #888;
}

.article-meta-row .author-info {
    display: flex;
    align-items: center;
    gap: 9px;
}

.article-meta-row .author-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
}

.article-meta-row .author-name {
    font-weight: 700;
    color: #222;
}

.article-meta-row .author-name:hover {
    color: var(--accent-red);
}

.article-meta-row .meta-divider {
    color: #ccc;
}

.article-meta-row .categories-list a {
    font-weight: 700;
    color: #222;
}

.article-meta-row .categories-list a:hover {
    color: var(--accent-red);
}

.meta-spacer {
    flex: 1;
}

.meta-reading-time,
.meta-comments {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #aaa;
}

.meta-reading-time i,
.meta-comments i {
    color: #bbb;
}

.meta-comments {
    color: #888;
}

.meta-comments:hover {
    color: var(--accent-red);
}

body.dark-mode .article-meta-row {
    border-top-color: #2a2a2a;
    border-bottom-color: #ddd;
    color: #aaa;
}

body.dark-mode .article-meta-row .author-name,
body.dark-mode .article-meta-row .categories-list a {
    color: #ddd;
}

/* Featured image */
.article-featured-figure {
    margin: 0 0 8px;
}

.article-featured-img {
    width: 100%;
    max-height: 480px;
    object-fit: cover;
    display: block;
}

.article-img-caption {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 13px;
    color: #888;
    line-height: 1.5;
    margin: 10px 0 28px;
    padding-bottom: 0;
}

body.dark-mode .article-img-caption {
    color: #777;
}

/* Share bar (below featured image) */
.article-share-bar {
    display: flex;
    align-items: center;
    border-top: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
    padding: 14px 0;
    margin-bottom: 32px;
    gap: 0;
    flex-wrap: wrap;
}

.share-metrics {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 800;
    color: #aaa;
    padding-right: 20px;
    border-right: 1px solid #e6e6e6;
    margin-right: 20px;
    flex-shrink: 0;
}

.metric-item {
    text-align: center;
    line-height: 1.2;
}

.metric-item span {
    display: block;
    font-size: 17px;
    font-weight: 900;
    color: #111;
    line-height: 1;
    margin-bottom: 1px;
}

.share-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    border-radius: 3px;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s;
    text-decoration: none;
}

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

.share-fb {
    background: #3b5998;
}

.share-tw {
    background: #000;
}

.share-email,
.share-pi {
    background: var(--accent-red);
}

.share-li {
    background: #0077b5;
}

.share-wa {
    background: #25d366;
}

.share-copy-btn {
    width: 36px;
    height: 36px;
    background: #eaeaea;
    color: #555;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
}

.share-copy-btn:hover {
    background: #222;
    color: #fff;
}

body.dark-mode .article-share-bar {
    border-color: #2a2a2a;
}

body.dark-mode .share-metrics {
    border-right-color: #2a2a2a;
    color: #666;
}

body.dark-mode .metric-item span {
    color: #fff;
}

body.dark-mode .share-copy-btn {
    background: #2a2a2a;
    color: #aaa;
}

/* Article body — premium reading typography */
.article-body {
    font-size: 16.5px;
    line-height: 1.87;
    color: #2d2d2d;
}

.article-body p {
    margin-bottom: 26px;
}

.article-body h2 {
    font-family: var(--font-serif);
    font-size: 26px;
    font-weight: 900;
    color: #111;
    margin: 40px 0 16px;
    line-height: 1.25;
}

.article-body h3 {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 900;
    color: #111;
    margin: 32px 0 14px;
}

.article-body a {
    color: var(--accent-red);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.article-body a:hover {
    color: #a00;
}

.article-body blockquote {
    border-left: 4px solid var(--accent-red);
    padding: 16px 24px;
    background: #fafafa;
    margin: 32px 0;
    font-style: italic;
    font-size: 17px;
    color: #444;
    line-height: 1.7;
}

.article-body ul,
.article-body ol {
    margin: 0 0 26px 22px;
    padding: 0;
    line-height: 1.85;
    color: #3a3a3a;
}

.article-body li {
    margin-bottom: 8px;
}

.article-body img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 25px 0;
}

body.dark-mode .article-body {
    color: #c8c8c8;
}

body.dark-mode .article-body h2,
body.dark-mode .article-body h3 {
    color: #efefef;
}

body.dark-mode .article-body blockquote {
    background: #1e1e1e;
    color: #bbb;
}

body.dark-mode .article-body ul,
body.dark-mode .article-body ol {
    color: #bbb;
}

/* Auto drop-cap on first paragraph */
.article-body>p:first-of-type::first-letter {
    font-family: var(--font-serif);
    font-size: 62px;
    font-weight: 900;
    float: left;
    line-height: 0.78;
    margin: 8px 10px 0 0;
    color: #111;
}

body.dark-mode .article-body>p:first-of-type::first-letter {
    color: #fff;
}

/* Manual drop cap class (for explicit use in editor) */
.article-body .drop-cap {
    font-family: var(--font-serif);
    font-size: 62px;
    font-weight: 900;
    float: left;
    line-height: 0.78;
    margin: 8px 10px 0 0;
    color: #111;
}

body.dark-mode .article-body .drop-cap {
    color: #fff;
}

/* Inline related news block */
.inline-related-news {
    border-top: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
    padding: 14px 0;
    margin: 28px 0;
}

.inline-related-news .label {
    font-size: 10px;
    font-weight: 900;
    color: var(--accent-blue);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: block;
    margin-bottom: 9px;
}

.inline-related-news ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.inline-related-news li {
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 700;
}

.inline-related-news a {
    color: #111;
}

.inline-related-news a:hover {
    color: var(--accent-blue);
}

.inline-related-news .bullet {
    color: var(--accent-blue);
    margin-right: 8px;
}

body.dark-mode .inline-related-news {
    border-color: #2a2a2a;
}

body.dark-mode .inline-related-news a {
    color: #ddd;
}

/* Float-right pull quote */
.float-quote-right {
    float: right;
    width: 240px;
    border: none !important;
    border-top: 2px solid #111 !important;
    border-bottom: 2px solid #111 !important;
    padding: 14px 0 !important;
    margin: 12px 0 20px 25px !important;
    text-align: center;
    font-family: var(--font-serif);
    font-size: 15px;
    font-weight: 700;
    font-style: italic;
    color: #111 !important;
    line-height: 1.4;
    text-transform: uppercase;
    background: none !important;
}

body.dark-mode .float-quote-right {
    border-color: #fff !important;
    color: #fff !important;
}

/* Float-right image */
.float-image-right {
    float: right;
    width: 280px;
    margin: 12px 0 20px 25px;
}

.float-image-right img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 6px;
}

.float-image-right .caption {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 11px;
    color: #999;
    display: block;
}

/* Left-border quote */
.left-border-quote {
    border-left: 3px solid var(--accent-blue) !important;
    padding: 14px 22px !important;
    margin: 28px 0 !important;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 16px;
    color: #555 !important;
    line-height: 1.6;
    background: #f9f9f9 !important;
    text-transform: uppercase;
}

body.dark-mode .left-border-quote {
    background: #1a1a1a !important;
    color: #ccc !important;
}

/* Large centered quote */
.large-centered-quote {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 700;
    font-style: italic;
    text-align: center;
    margin: 32px 0;
    color: #111;
    border: none !important;
    padding: 0 !important;
    background: none !important;
    text-transform: uppercase;
    line-height: 1.4;
}

body.dark-mode .large-centered-quote {
    color: #fff !important;
}

/* Centered body image */
.centered-body-image {
    margin: 32px 0;
    text-align: center;
}

.centered-body-image img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 10px;
}

.centered-body-image .caption {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 12px;
    color: #999;
    display: block;
}

/* Tags */
.article-tags {
    margin: 35px 0 28px;
    padding-top: 22px;
    border-top: 1px solid #eee;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.article-tags-label {
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #555;
    margin-right: 4px;
}

.article-tags a {
    display: inline-block;
    border: 1px solid #ddd;
    color: #666;
    font-size: 11px;
    padding: 5px 13px;
    transition: all 0.2s;
    border-radius: 2px;
}

.article-tags a:hover {
    background: var(--accent-red);
    border-color: var(--accent-red);
    color: #fff;
}

body.dark-mode .article-tags {
    border-color: #2a2a2a;
}

body.dark-mode .article-tags-label {
    color: #aaa;
}

body.dark-mode .article-tags a {
    border-color: #333;
    color: #bbb;
}

/* Bottom social share (circle buttons) */
.social-share-bottom {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 18px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin-bottom: 40px;
}

.social-share-bottom .share-label {
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #555;
    margin-right: 4px;
}

.social-share-bottom a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #fff;
    font-size: 14px;
    transition: transform 0.2s, opacity 0.2s;
}

.social-share-bottom a:hover {
    transform: scale(1.1);
    opacity: 0.9;
    color: #fff;
}

body.dark-mode .social-share-bottom {
    border-color: #2a2a2a;
}

body.dark-mode .social-share-bottom .share-label {
    color: #888;
}

/* Below-article ad zone */
.below-article-ad-zone {
    margin: 30px 0;
    padding: 20px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    text-align: center;
    clear: both;
}

body.dark-mode .below-article-ad-zone {
    border-color: #2a2a2a;
}

/* Author bio */
.author-bio {
    display: flex;
    gap: 24px;
    padding: 28px 30px;
    background: #f8f9fa;
    border: 1px solid #e8e8e8;
    border-left: 4px solid var(--accent-red);
    margin-bottom: 40px;
    align-items: flex-start;
}

.author-bio img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.author-bio-info {
    flex: 1;
    min-width: 0;
}

.author-bio-info h4 {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 900;
    margin-bottom: 4px;
    color: #111;
}

.author-bio-info h4 a {
    color: inherit;
}

.author-bio-info h4 a:hover {
    color: var(--accent-red);
}

.author-role {
    font-size: 10px;
    color: var(--accent-red);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
    display: block;
}

.author-bio-info p {
    font-size: 13px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 14px;
}

.author-bio-socials {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.author-bio-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
    transition: opacity 0.2s, transform 0.2s;
}

.author-bio-socials a:hover {
    opacity: 0.85;
    transform: scale(1.08);
    color: #fff;
}

.author-all-posts-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #555;
    border-bottom: 1px solid #ddd;
    padding-bottom: 1px;
    margin-left: 6px;
}

.author-all-posts-link:hover {
    color: var(--accent-red);
    border-color: var(--accent-red);
}

body.dark-mode .author-bio {
    background: #1a1a1a;
    border-color: #2a2a2a;
    border-left-color: var(--accent-red);
}

body.dark-mode .author-bio-info h4 {
    color: #efefef;
}

body.dark-mode .author-bio-info p {
    color: #aaa;
}

body.dark-mode .author-all-posts-link {
    color: #aaa;
    border-color: #444;
}

/* Related posts */
.related-posts {
    margin-bottom: 45px;
}

.related-posts h3 {
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 900;
    border-bottom: 3px solid #111;
    padding-bottom: 10px;
    margin-bottom: 22px;
    letter-spacing: 1.5px;
    color: #111;
}

.related-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.related-post-card {}

.rpc-img-link {
    display: block;
    overflow: hidden;
    height: 165px;
    background: #f0f0f0;
    position: relative;
}

.rpc-img-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.related-post-card:hover .rpc-img-link img {
    transform: scale(1.05);
}

.rpc-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    font-size: 32px;
}

.rp-cat {
    font-size: 10px;
    font-weight: 900;
    color: var(--accent-red);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 12px 0 6px;
}

.related-post-card h4 {
    font-family: var(--font-serif);
    font-size: 15px;
    font-weight: 900;
    line-height: 1.35;
    color: #111;
    margin-bottom: 7px;
}

.related-post-card h4 a {
    color: inherit;
}

.related-post-card h4 a:hover {
    color: var(--accent-red);
}

.rp-meta {
    font-size: 10px;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

body.dark-mode .related-posts h3 {
    border-color: #444;
    color: #ddd;
}

body.dark-mode .related-post-card h4 {
    color: #ddd;
}

/* Post navigation */
.post-nav-row {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 22px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin-bottom: 35px;
    flex-wrap: wrap;
}

.post-nav-item {
    max-width: 48%;
}

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

.pnav-dir {
    display: block;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #bbb;
    margin-bottom: 5px;
}

.post-nav-item a {
    font-family: var(--font-serif);
    font-size: 14px;
    font-weight: 700;
    color: #333;
    line-height: 1.4;
}

.post-nav-item a:hover {
    color: var(--accent-red);
}

body.dark-mode .post-nav-row {
    border-color: #2a2a2a;
}

body.dark-mode .post-nav-item a {
    color: #ccc;
}

/* Comments */
.comments-section {
    margin-top: 10px;
}

.comments-section>h3 {
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 900;
    border-bottom: 3px solid #111;
    padding-bottom: 10px;
    margin-bottom: 25px;
    letter-spacing: 1px;
    color: #111;
}

body.dark-mode .comments-section>h3 {
    border-color: #aaa;
    color: #ddd;
}

.comment-item {
    display: flex;
    gap: 18px;
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid #f0f0f0;
}

.comment-item.depth-2 {
    margin-left: 55px;
}

.comment-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #e8e8e8;
}

.comment-avatar img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.comment-body {
    flex: 1;
}

.comment-author {
    font-weight: 800;
    font-size: 14px;
    color: #111;
    margin-bottom: 3px;
}

.comment-date {
    font-size: 11px;
    color: #bbb;
    margin-bottom: 10px;
}

.comment-text {
    font-size: 14px;
    color: #555;
    line-height: 1.75;
}

.comment-text p {
    margin-bottom: 8px;
}

.comment-reply {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-red);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
    margin-top: 8px;
}

.comment-reply:hover {
    text-decoration: underline;
}

body.dark-mode .comment-item {
    border-color: #222;
}

body.dark-mode .comment-author {
    color: #ddd;
}

body.dark-mode .comment-text {
    color: #aaa;
}

/* Comment form */
.comment-form-wrap {
    margin-top: 38px;
}

.comment-form-wrap h3 {
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 900;
    border-bottom: 3px solid #111;
    padding-bottom: 10px;
    margin-bottom: 22px;
    letter-spacing: 1px;
    color: #111;
}

.comment-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.comment-form .full-width,
.cf-row {
    grid-column: 1 / -1;
}

.cf-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.comment-form p {
    margin: 0;
}

.comment-form input,
.comment-form textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid #ddd;
    font-size: 13px;
    font-family: var(--font-sans);
    color: #333;
    outline: none;
    background: #fff;
    transition: border-color 0.2s;
}

.comment-form textarea {
    height: 130px;
    resize: vertical;
}

.comment-form input:focus,
.comment-form textarea:focus {
    border-color: var(--accent-red);
    box-shadow: 0 0 0 2px rgba(192, 0, 0, 0.07);
}

.comment-submit {
    background: #111;
    color: #fff;
    border: none;
    padding: 12px 28px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background 0.2s;
}

.comment-submit:hover {
    background: var(--accent-red);
}

body.dark-mode .comment-form-wrap h3 {
    border-color: #aaa;
    color: #ddd;
}

body.dark-mode .comment-form input,
body.dark-mode .comment-form textarea {
    background: #1e1e1e;
    border-color: #333;
    color: #ddd;
}

/* Sidebar */
.single-sidebar {}

.sidebar-widget {
    margin-bottom: 35px;
}

.sidebar-widget-title {
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-bottom: 3px solid #111;
    padding-bottom: 10px;
    margin-bottom: 20px;
    color: #111;
}

body.dark-mode .sidebar-widget-title {
    border-color: #aaa;
    color: #ddd;
}

/* Sidebar ad placeholder */
.sidebar-ad {
    background: #f4f4f4;
    border: 1px solid #eee;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #bbb;
    font-size: 13px;
    gap: 8px;
}

.sidebar-ad span {
    font-size: 9px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* Popular news — rank 01 */
.sidebar-popular-first,
.sidebar-pop-first {
    margin-bottom: 22px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 18px;
}

/* New rank-01 structure: .sidebar-pop-first */
.spf-img-link {
    display: block;
    overflow: hidden;
    margin-bottom: 12px;
}

.spf-img-link img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.spf-img-link:hover img {
    transform: scale(1.03);
}

.spf-body {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

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

.spf-text h4 {
    font-family: var(--font-serif);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 7px;
}

.spf-text h4 a {
    color: #111;
}

.spf-text h4 a:hover {
    color: var(--accent-red);
}

.spf-rank {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 48px;
    font-weight: 900;
    color: #e8e8e8;
    line-height: 1;
    user-select: none;
    flex-shrink: 0;
}

body.dark-mode .sidebar-pop-first {
    border-color: #222;
}

body.dark-mode .spf-text h4 a {
    color: #ddd;
}

body.dark-mode .spf-rank {
    color: #2a2a2a;
}

/* Legacy rank-01 structure */
.sidebar-popular-first h4 {
    font-family: var(--font-serif);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 7px;
}

.sidebar-popular-first h4 a {
    color: #111;
}

.sidebar-popular-first h4 a:hover {
    color: var(--accent-red);
}

.pop-rank-big {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 46px;
    font-weight: 900;
    color: #e8e8e8;
    line-height: 1;
    user-select: none;
    flex-shrink: 0;
}

body.dark-mode .sidebar-popular-first {
    border-color: #222;
}

body.dark-mode .sidebar-popular-first h4 a {
    color: #ddd;
}

body.dark-mode .pop-rank-big {
    color: #333;
}

/* ── "Connect with us" widget ─────────────── */
.sidebar-connect {
    border: 1px solid #e5e5e5;
    overflow: hidden;
}

.sconnect-cover {
    height: 130px;
    background: linear-gradient(135deg, #1a1a2e 0%, #0f3460 50%, #16213e 100%);
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 0;
}

.sconnect-cover-inner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sconnect-cover-inner img {
    max-height: 44px;
    width: auto;
    opacity: 0.2;
    filter: brightness(10);
}

.sconnect-site-name {
    font-family: var(--font-serif);
    font-size: 26px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.18);
    letter-spacing: -1px;
}

.sconnect-profile {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px 10px;
    width: 100%;
}

.sconnect-logo {
    width: 48px;
    height: 48px;
    border: 2px solid #fff;
    background: #fff;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sconnect-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sconnect-logo span {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 900;
    color: #111;
    line-height: 1;
}

.sconnect-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.sconnect-info strong {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
    line-height: 1.2;
}

.sconnect-info span {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.72);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.sconnect-platforms {
    background: #f5f6f7;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-top: 1px solid #e5e5e5;
}

.sconnect-platform-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: #fff;
    border: 1px solid #e0e0e0;
    color: #333;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
}

.sconnect-platform-btn:hover {
    background: var(--scp-color, #1877f2);
    border-color: var(--scp-color, #1877f2);
    color: #fff;
}

.sconnect-platform-btn i {
    font-size: 15px;
    color: var(--scp-color, #1877f2);
    width: 18px;
    text-align: center;
    transition: color 0.2s;
    flex-shrink: 0;
}

.sconnect-platform-btn:hover i {
    color: #fff;
}

.sconnect-platform-btn span {
    flex: 1;
}

.sconnect-platform-btn em {
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #bbb;
    background: #f0f0f0;
    padding: 2px 8px;
    border-radius: 10px;
    transition: all 0.2s;
}

.sconnect-platform-btn:hover em {
    background: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.85);
}

.sconnect-empty {
    font-size: 11px;
    color: #aaa;
    padding: 12px;
    text-align: center;
    margin: 0;
}

body.dark-mode .sidebar-connect {
    border-color: #2a2a2a;
}

body.dark-mode .sconnect-platforms {
    background: #1a1a1a;
    border-color: #2a2a2a;
}

body.dark-mode .sconnect-platform-btn {
    background: #222;
    border-color: #333;
    color: #ccc;
}

body.dark-mode .sconnect-platform-btn:hover {
    color: #fff;
}

body.dark-mode .sconnect-platform-btn em {
    background: #333;
    color: #888;
}

/* Popular ranks 02-05 */
.sidebar-popular-item {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
    align-items: flex-start;
}

.sidebar-popular-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.pop-num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #f4f4f4;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 12px;
    flex-shrink: 0;
}

.sidebar-popular-item h4 {
    font-family: var(--font-serif);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 4px;
}

.sidebar-popular-item h4 a {
    color: #111;
}

.sidebar-popular-item h4 a:hover {
    color: var(--accent-red);
}

.sidebar-popular-meta {
    font-size: 10px;
    text-transform: uppercase;
    color: #aaa;
    font-weight: 700;
    letter-spacing: 0.3px;
}

body.dark-mode .sidebar-popular-item {
    border-color: #222;
}

body.dark-mode .sidebar-popular-item h4 a {
    color: #ddd;
}

body.dark-mode .pop-num {
    background: #222;
    color: #bbb;
}

/* Newsletter CTA */
.sidebar-newsletter-cta {
    background: linear-gradient(135deg, #111 0%, #2a2a2a 100%);
    padding: 24px 20px;
    text-align: center;
}

.sidebar-newsletter-cta i {
    font-size: 26px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 12px;
    display: block;
}

.sidebar-newsletter-cta h4 {
    font-family: var(--font-serif);
    font-size: 17px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 8px;
}

.sidebar-newsletter-cta p {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.6;
    margin-bottom: 16px;
}

.sidebar-nl-btn {
    display: inline-block;
    background: var(--accent-red);
    color: #fff;
    padding: 9px 20px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background 0.2s;
}

.sidebar-nl-btn:hover {
    background: #a00;
    color: #fff;
}

/* Sidebar news list */
.sidebar-news-item {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f0f0f0;
    align-items: flex-start;
}

.sidebar-news-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.sidebar-news-item img {
    width: 75px;
    height: 62px;
    object-fit: cover;
    flex-shrink: 0;
}

.sidebar-news-item h4 {
    font-family: var(--font-serif);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    color: #111;
    margin-bottom: 4px;
}

.sidebar-news-item h4 a {
    color: inherit;
}

.sidebar-news-item h4 a:hover {
    color: var(--accent-red);
}

.sidebar-news-meta {
    font-size: 10px;
    color: #bbb;
}

body.dark-mode .sidebar-news-item {
    border-color: #222;
}

body.dark-mode .sidebar-news-item h4 {
    color: #ddd;
}

/* Sidebar tag cloud */
.sidebar-tag-cloud a {
    display: inline-block;
    border: 1px solid #ddd;
    padding: 4px 10px;
    font-size: 11px;
    color: #666;
    margin: 3px 2px;
    transition: all 0.2s;
}

.sidebar-tag-cloud a:hover {
    background: #111;
    color: #fff;
    border-color: #111;
}

body.dark-mode .sidebar-tag-cloud a {
    background: #1e1e1e;
    color: #bbb;
    border-color: #2a2a2a;
}

body.dark-mode .sidebar-tag-cloud a:hover {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    color: #fff;
}

/* Connect widget (legacy) */
.sidebar-connect-widget {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.connect-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    transition: opacity 0.2s;
}

.connect-btn:hover {
    opacity: 0.88;
    color: #fff;
}

.connect-fb {
    background: #1877f2;
}

.connect-tw {
    background: #000;
}

.connect-yt {
    background: #f00;
}

.connect-ig {
    background: #e1306c;
}

/* Responsive */
@media (max-width: 900px) {
    .single-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .related-posts-grid {
        grid-template-columns: 1fr 1fr;
    }

    .sidebar-connect-widget {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 600px) {
    .article-title {
        font-size: 24px;
    }

    .article-subtitle {
        font-size: 15px;
    }

    .related-posts-grid {
        grid-template-columns: 1fr;
    }

    .cf-row {
        grid-template-columns: 1fr;
    }

    .share-metrics {
        display: none;
    }

    .float-quote-right,
    .float-image-right {
        float: none;
        width: 100%;
        margin: 20px 0;
    }

    .sidebar-connect-widget {
        grid-template-columns: 1fr 1fr;
    }

    .post-nav-item {
        max-width: 100%;
    }
}

/* PAGE TEMPLATES — About / Careers / Advertise / Contact
   ============================================= */

/* Hero */
.jpage-hero {
    text-align: center;
    padding: 60px 0 40px;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 0;
}

.jpage-eyebrow {
    display: inline-block;
    background: var(--accent-red);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 4px 14px;
    margin-bottom: 20px;
}

.jpage-title {
    font-family: var(--font-serif);
    font-size: 54px;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 20px;
    color: #000;
}

.jpage-subtitle {
    font-size: 16px;
    color: #666;
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.7;
}

body.dark-mode .jpage-title {
    color: #fff;
}

body.dark-mode .jpage-subtitle {
    color: #aaa;
}

/* Mission strip */
.jpage-mission-strip {
    background: #111;
    padding: 40px 50px;
    margin: 50px 0;
}

.jpage-mission-strip blockquote {
    font-family: var(--font-serif);
    font-size: 22px;
    font-style: italic;
    color: #fff;
    line-height: 1.6;
    margin: 0;
    text-align: center;
}

/* Section title */
.jpage-section-title {
    font-family: var(--font-serif);
    font-size: 32px;
    font-weight: 900;
    border-bottom: 3px solid #000;
    padding-bottom: 12px;
    color: #000;
}

body.dark-mode .jpage-section-title {
    color: #fff;
    border-color: #444;
}

/* Two column story */
.jpage-two-col {
    display: grid;
    grid-template-columns: 1fr 860px;
    gap: 40px;
    align-items: start;
}

.jpage-two-col-text p {
    font-size: 15px;
    color: #555;
    line-height: 1.8;
    margin-bottom: 20px;
}

body.dark-mode .jpage-two-col-text p {
    color: #aaa;
}

/* Values / perks grid */
.jpage-values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.jpage-value-card {
    border-top: 3px solid #000;
    padding: 25px 0 0;
}

.jpage-value-card i {
    font-size: 22px;
    color: var(--accent-red);
    margin-bottom: 14px;
    display: block;
}

.jpage-value-card h3 {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 900;
    margin-bottom: 10px;
    color: #000;
}

.jpage-value-card p {
    font-size: 13px;
    color: #666;
    line-height: 1.7;
}

body.dark-mode .jpage-value-card {
    border-color: #444;
}

body.dark-mode .jpage-value-card h3 {
    color: #ddd;
}

body.dark-mode .jpage-value-card p {
    color: #aaa;
}

/* Team grid */
.jpage-team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.jpage-team-card {
    text-align: center;
    border: 1px solid var(--border-light);
    padding: 30px 20px;
}

.jpage-team-avatar {
    width: 80px;
    height: 80px;
    background: #f4f4f4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
}

.jpage-team-avatar i {
    font-size: 32px;
    color: #ccc;
}

.jpage-team-card h4 {
    font-family: var(--font-serif);
    font-size: 17px;
    font-weight: 900;
    margin-bottom: 4px;
}

.jpage-team-role {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--accent-red);
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.jpage-team-card p {
    font-size: 12px;
    color: #777;
    line-height: 1.6;
}

body.dark-mode .jpage-team-card {
    border-color: #2a2a2a;
    background: #1a1a1a;
}

body.dark-mode .jpage-team-card h4 {
    color: #ddd;
}

body.dark-mode .jpage-team-card p {
    color: #aaa;
}

/* Stats bar */
.jpage-stats-bar {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    border: 1px solid var(--border-light);
}

.jpage-stat {
    text-align: center;
    padding: 28px 10px;
    border-right: 1px solid var(--border-light);
}

.jpage-stat:last-child {
    border-right: none;
}

.jpage-stat strong {
    display: block;
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 900;
    color: #000;
    line-height: 1;
    margin-bottom: 6px;
}

.jpage-stat span {
    font-size: 11px;
    text-transform: uppercase;
    color: #999;
    letter-spacing: 0.5px;
    font-weight: 700;
}

body.dark-mode .jpage-stats-bar {
    border-color: #2a2a2a;
}

body.dark-mode .jpage-stat {
    border-color: #2a2a2a;
}

body.dark-mode .jpage-stat strong {
    color: #fff;
}

/* Jobs list (Careers) */
.jpage-jobs-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border-light);
}

.jpage-job-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    padding: 25px 30px;
    border-bottom: 1px solid var(--border-light);
}

.jpage-job-card:last-child {
    border-bottom: none;
}

.jpage-job-meta {
    flex: 1;
}

.jpage-job-meta h3 {
    font-family: var(--font-serif);
    font-size: 19px;
    font-weight: 900;
    margin-bottom: 8px;
    color: #000;
}

.jpage-job-meta p {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    margin-top: 8px;
}

.jpage-job-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.jpage-tag {
    display: inline-block;
    border: 1px solid #ddd;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    color: #555;
}

.jpage-tag-dept {
    background: #000;
    color: #fff;
    border-color: #000;
}

.jpage-apply-btn {
    display: inline-block;
    background: #000;
    color: #fff;
    padding: 11px 22px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    transition: background 0.3s;
}

.jpage-apply-btn:hover {
    background: var(--accent-red);
    color: #fff;
}

body.dark-mode .jpage-job-card {
    border-color: #2a2a2a;
}

body.dark-mode .jpage-job-meta h3 {
    color: #ddd;
}

body.dark-mode .jpage-job-meta p {
    color: #aaa;
}

body.dark-mode .jpage-jobs-list {
    border-color: #2a2a2a;
}

/* Pricing (Advertise) */
.jpage-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.jpage-price-card {
    border: 1px solid var(--border-light);
    padding: 35px 30px;
    position: relative;
    display: flex;
    flex-direction: column;
}

.jpage-price-featured {
    border: 2px solid #000;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.jpage-price-badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-red);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 16px;
    white-space: nowrap;
}

.jpage-price-header {
    margin-bottom: 25px;
}

.jpage-price-header h3 {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 900;
    margin-bottom: 10px;
}

.jpage-price-amount {
    font-family: var(--font-serif);
    font-size: 40px;
    font-weight: 900;
    color: #000;
    line-height: 1;
}

.jpage-price-amount span {
    font-size: 16px;
    color: #999;
    font-family: var(--font-sans);
    font-weight: 400;
}

.jpage-price-features {
    list-style: none;
    flex: 1;
    margin-bottom: 25px;
}

.jpage-price-features li {
    padding: 9px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.jpage-price-features li i.fa-check {
    color: #27ae60;
}

.jpage-price-features li.jpage-price-na {
    color: #ccc;
}

.jpage-price-features li.jpage-price-na i {
    color: #ddd;
}

.jpage-price-btn {
    display: block;
    text-align: center;
    background: #000;
    color: #fff;
    padding: 13px;
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background 0.3s;
    margin-top: auto;
}

.jpage-price-btn:hover {
    background: var(--accent-red);
    color: #fff;
}

body.dark-mode .jpage-price-card {
    border-color: #2a2a2a;
    background: #1a1a1a;
}

body.dark-mode .jpage-price-featured {
    border-color: #555;
}

body.dark-mode .jpage-price-header h3 {
    color: #ddd;
}

body.dark-mode .jpage-price-amount {
    color: #fff;
}

body.dark-mode .jpage-price-features li {
    border-color: #2a2a2a;
    color: #bbb;
}

/* Specs table */
.jpage-specs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.jpage-specs-table th {
    background: #000;
    color: #fff;
    padding: 12px 15px;
    text-align: left;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.jpage-specs-table td {
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-light);
    color: #444;
}

.jpage-specs-table tr:last-child td {
    border-bottom: none;
}

.jpage-specs-table tr:nth-child(even) td {
    background: #fafafa;
}

body.dark-mode .jpage-specs-table td {
    border-color: #2a2a2a;
    color: #bbb;
    background: transparent;
}

body.dark-mode .jpage-specs-table tr:nth-child(even) td {
    background: #1a1a1a;
}

/* Contact layout */
.jpage-contact-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 60px;
    align-items: start;
}

.jpage-contact-info-block {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 28px;
}

.jpage-contact-info-block i {
    font-size: 18px;
    color: var(--accent-red);
    flex-shrink: 0;
    margin-top: 3px;
}

.jpage-contact-info-block strong {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.jpage-contact-info-block p {
    font-size: 13px;
    color: #666;
    line-height: 1.7;
    margin: 0;
}

.jpage-contact-info-block a {
    color: #333;
    font-weight: 600;
}

.jpage-contact-info-block a:hover {
    color: var(--accent-red);
}

body.dark-mode .jpage-contact-info-block strong {
    color: #ddd;
}

body.dark-mode .jpage-contact-info-block p {
    color: #aaa;
}

body.dark-mode .jpage-contact-info-block a {
    color: #bbb;
}

/* Department cards (Contact) */
.jpage-dept-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.jpage-dept-card {
    border: 1px solid var(--border-light);
    padding: 25px 20px;
}

.jpage-dept-card h3 {
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 900;
    margin-bottom: 8px;
    color: #000;
}

.jpage-dept-card p {
    font-size: 13px;
    color: #777;
    line-height: 1.6;
    margin-bottom: 12px;
}

.jpage-dept-card a {
    font-size: 12px;
    font-weight: 700;
    color: #333;
    word-break: break-all;
}

.jpage-dept-card a:hover {
    color: var(--accent-red);
}

body.dark-mode .jpage-dept-card {
    border-color: #2a2a2a;
    background: #1a1a1a;
}

body.dark-mode .jpage-dept-card h3 {
    color: #ddd;
}

/* Social buttons (Contact) */
.jpage-social-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    border-radius: 2px;
}

.jpage-social-fb {
    background: #1877f2;
}

.jpage-social-tw {
    background: #000;
}

.jpage-social-yt {
    background: #ff0000;
}

.jpage-social-ig {
    background: #e1306c;
}

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

/* Shared form styles */
.jpage-form {}

.jpage-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.jpage-form-field {
    margin-bottom: 20px;
}

.jpage-form-field label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #555;
    margin-bottom: 6px;
}

.jpage-form-field input,
.jpage-form-field select,
.jpage-form-field textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid #ddd;
    font-size: 14px;
    font-family: var(--font-sans);
    outline: none;
    transition: border-color 0.3s;
    background: #fff;
    color: #000;
}

.jpage-form-field input:focus,
.jpage-form-field select:focus,
.jpage-form-field textarea:focus {
    border-color: #000;
}

.jpage-form-field textarea {
    resize: vertical;
}

.jpage-submit-btn {
    background: #000;
    color: #fff;
    border: none;
    padding: 14px 36px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background 0.3s;
}

.jpage-submit-btn:hover {
    background: var(--accent-red);
}

.jpage-form-success {
    background: #e8f5e9;
    border: 1px solid #81c784;
    color: #2e7d32;
    padding: 14px 18px;
    margin-bottom: 25px;
    font-size: 14px;
    font-weight: 600;
}

.jpage-form-error {
    background: #ffebee;
    border: 1px solid #ef9a9a;
    color: #c62828;
    padding: 14px 18px;
    margin-bottom: 25px;
    font-size: 14px;
    font-weight: 600;
}

body.dark-mode .jpage-form-field input,
body.dark-mode .jpage-form-field select,
body.dark-mode .jpage-form-field textarea {
    background: #1a1a1a;
    border-color: #333;
    color: #ddd;
}

body.dark-mode .jpage-form-field input:focus,
body.dark-mode .jpage-form-field select:focus,
body.dark-mode .jpage-form-field textarea:focus {
    border-color: #888;
}

body.dark-mode .jpage-form-field label {
    color: #aaa;
}

/* Page template responsive */
@media (max-width: 1024px) {
    .jpage-two-col {
        grid-template-columns: 1fr;
    }

    .jpage-two-col-img {
        order: -1;
    }

    .jpage-two-col-img img {
        max-height: 260px;
        object-fit: cover;
    }

    .jpage-pricing-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

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

    .jpage-stats-bar {
        grid-template-columns: repeat(3, 1fr);
    }

    .jpage-stat {
        border-bottom: 1px solid var(--border-light);
    }

    .jpage-contact-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .jpage-title {
        font-size: 34px;
    }

    .jpage-values-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .jpage-team-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

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

    .jpage-dept-grid {
        grid-template-columns: 1fr 1fr;
    }

    .jpage-form-row {
        grid-template-columns: 1fr;
    }

    .jpage-job-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .jpage-mission-strip {
        padding: 25px 20px;
    }

    .jpage-mission-strip blockquote {
        font-size: 16px;
    }

    .jpage-pricing-grid {
        grid-template-columns: 1fr;
    }
}

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

    .jpage-team-grid {
        grid-template-columns: 1fr;
    }

    .jpage-dept-grid {
        grid-template-columns: 1fr;
    }

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

/* ===== SITE FOOTER REBUILD ===== */
.site-footer {
    background: #f5f5f5;
    color: #555;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    line-height: 1.6;
    border-top: 1px solid #e0e0e0;
}

body.dark-mode .site-footer {
    background: #111;
    color: #aaa;
    border-color: #222;
}

.site-footer a {
    color: #333;
    text-decoration: none;
    transition: color 0.2s;
}

body.dark-mode .site-footer a {
    color: #ccc;
}

.site-footer a:hover {
    color: #2a5d9a;
}

.site-footer h4 {
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    color: #111;
    margin-top: 0;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

body.dark-mode .site-footer h4 {
    color: #fff;
}

.footer-widgets {
    padding: 50px 0;
}

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

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

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

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col ul li {
    margin-bottom: 8px;
}

/* Column 1: Newsletter special styling */
.newsletter-title-caps {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    font-weight: 800;
    color: #111;
    text-transform: uppercase;
    margin-bottom: 12px;
    line-height: 1.4;
}

body.dark-mode .newsletter-title-caps {
    color: #fff;
}

.newsletter-desc {
    font-size: 12px;
    color: #666;
    margin-bottom: 18px;
}

body.dark-mode .newsletter-desc {
    color: #999;
}

.footer-newsletter-form-rebuild {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-newsletter-form-rebuild input {
    padding: 10px 12px;
    border: 1px solid #ddd;
    background: #fff;
    font-size: 12px;
    width: 100%;
    box-sizing: border-box;
}

body.dark-mode .footer-newsletter-form-rebuild input {
    border-color: #333;
    background: #222;
    color: #fff;
}

.footer-newsletter-form-rebuild button {
    background: #2a5d9a;
    color: #fff;
    border: none;
    padding: 10px;
    font-weight: 800;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background 0.2s;
}

.footer-newsletter-form-rebuild button:hover {
    background: #1f4675;
}

/* Column 2: Category 2-column grid */
.footer-category-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 15px;
}

/* Copyright bottom bar */
.footer-bottom-rebuild {
    background: #ebebeb;
    padding: 20px 0;
    border-top: 1px solid #ddd;
    color: #666;
    font-size: 12px;
}

body.dark-mode .footer-bottom-rebuild {
    background: #0a0a0a;
    border-color: #222;
    color: #999;
}

.footer-bottom-inner-rebuild {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 768px) {
    .footer-bottom-inner-rebuild {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}

.footer-copyright-rebuild a {
    font-weight: 700;
    color: #333;
}

body.dark-mode .footer-copyright-rebuild a {
    color: #fff;
}

.footer-menu-rebuild ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 15px;
}

.footer-menu-rebuild ul li {
    display: inline-flex;
    align-items: center;
}

.footer-menu-rebuild ul li:not(:last-child)::after {
    content: "/";
    margin-left: 15px;
    color: #aaa;
    font-weight: 300;
}

.footer-menu-rebuild a {
    color: #666;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.5px;
}

body.dark-mode .footer-menu-rebuild a {
    color: #999;
}

/* ===== MICRO-INTERACTIONS & ANIMATIONS ===== */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===== STICKY SIDEBAR ===== */
.sticky-sidebar-widget {
    position: sticky;
    top: 80px;
    /* Below sticky nav */
}

/* ===== AJAX LIVE SEARCH ===== */
.ajax-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    z-index: 100;
    margin-top: 5px;
    display: none;
    max-height: 400px;
    overflow-y: auto;
}

body.dark-mode .ajax-search-results {
    background: #1a1a1a;
    border-color: #333;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.ajax-results-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ajax-results-list li a {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #f5f5f5;
    text-decoration: none;
    color: #333;
    gap: 12px;
}

body.dark-mode .ajax-results-list li a {
    border-color: #2a2a2a;
    color: #eee;
}

.ajax-results-list li a:hover {
    background: #f9f9f9;
}

body.dark-mode .ajax-results-list li a:hover {
    background: #222;
}

.ajax-results-list img,
.ajax-thumb-placeholder {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
}

.ajax-thumb-placeholder {
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
}

body.dark-mode .ajax-thumb-placeholder {
    background: #333;
}

.ajax-results-list strong {
    display: block;
    font-size: 13px;
    line-height: 1.3;
    margin-bottom: 4px;
}

.ajax-date {
    display: block;
    font-size: 11px;
    color: #888;
}

.ajax-view-all {
    display: block;
    padding: 10px 15px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    color: #2a5d9a;
    text-decoration: none;
    background: #f5f5f5;
}

body.dark-mode .ajax-view-all {
    background: #222;
    color: #4ea8ff;
}

.ajax-view-all:hover {
    text-decoration: underline;
}

.ajax-loading,
.ajax-no-results,
.ajax-error {
    padding: 15px;
    text-align: center;
    font-size: 13px;
    color: #666;
}

body.dark-mode .ajax-loading,
body.dark-mode .ajax-no-results,
body.dark-mode .ajax-error {
    color: #aaa;
}

/* =============================================
   DARK MODE LOGO TOGGLE
   ============================================= */
.custom-logo-link-dark {
    display: none;
}

body.dark-mode .custom-logo-link {
    display: none !important;
}

body.dark-mode .custom-logo-link-dark {
    display: inline-block !important;
}

/* =============================================
   MEGA MENU
   ============================================= */
.nav-main ul li.mega-menu {
    position: static;
}

.nav-main ul li.mega-menu .mega-menu-wrapper {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1170px;
    background: #fff;
    border: 1px solid var(--border-light);
    border-top: 3px solid var(--accent-red);
    box-shadow: var(--shadow-md);
    z-index: 1001;
    min-height: 350px;
}

.nav-main ul li.mega-menu:hover .mega-menu-wrapper {
    display: flex;
}

.mega-menu-tabs {
    flex: 0 0 200px;
    background: #fafafa;
    border-right: 1px solid var(--border-light);
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    justify-content: flex-start !important;
}

.mega-menu-tab {
    width: 100%;
}

.mega-menu-tab a {
    display: block;
    padding: 15px 20px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #666 !important;
    text-transform: uppercase;
    border-left: 3px solid transparent;
    transition: all 0.2s;
}

.mega-menu-tab.active>a,
.mega-menu-tab:hover>a {
    background: #fff;
    color: #000 !important;
    border-left-color: var(--accent-red);
}

.mega-menu-content {
    flex: 1;
    padding: 30px;
    background: #fff;
    min-width: 0;
}

.mega-panel {
    display: none;
    animation: fadeIn 0.3s ease;
    position: relative;
    padding-bottom: 50px;
    /* Space for carousel controls */
}

.mega-panel.active {
    display: block;
}

.mega-posts-viewport {
    overflow: hidden;
    width: 100%;
}

.mega-posts-grid {
    display: flex;
    gap: 20px;
    transition: transform 0.4s ease;
}

.mega-post {
    display: flex;
    flex-direction: column;
    flex: 0 0 calc((100% - 60px) / 4);
    /* 4 items visible, 3 gaps of 20px */
}

.mega-posts-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    gap: 10px;
}

.mega-nav-arrow {
    background: #fff;
    border: 1px solid var(--border-light);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    color: #666;
    transition: all 0.2s;
    line-height: 1;
}

.mega-nav-arrow:hover {
    background: var(--accent-red);
    color: #fff;
    border-color: var(--accent-red);
}

.mega-post>a {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mega-post-img {
    width: 100%;
    height: 140px;
    object-fit: cover;
}

.mega-post-placeholder {
    width: 100%;
    height: 140px;
    background: #eee;
}

.mega-post-title {
    font-family: var(--font-serif);
    font-size: 15px;
    line-height: 1.4;
    font-weight: 700;
    color: #000;
	text-wrap: auto;
}

.mega-post:hover .mega-post-title {
    color: var(--accent-red);
}

.mega-no-posts {
    color: #999;
    font-style: italic;
}

/* Dark Mode Overrides for Mega Menu */
body.dark-mode .nav-main ul li.mega-menu .mega-menu-wrapper {
    background: #1a1a1a;
    border-color: #333;
}

body.dark-mode .mega-menu-tabs {
    background: #111;
    border-color: #333;
}

body.dark-mode .mega-menu-tab a {
    color: #999 !important;
}

body.dark-mode .mega-menu-tab.active>a,
body.dark-mode .mega-menu-tab:hover>a {
    background: #1a1a1a;
    color: #fff !important;
}

body.dark-mode .mega-menu-content {
    background: #1a1a1a;
}

body.dark-mode .mega-post-title {
    color: #fff;
}

body.dark-mode .mega-post-placeholder {
    background: #333;
}

/* =============================================
   MOBILE DRAWER MEGA MENU STYLES (COMMENTED OUT)
   ============================================= 
.mobile-drawer-nav li.mega-menu {
    position: relative;
    display: flex;
    flex-direction: column;
}

.mobile-drawer-nav li.mega-menu .mega-menu-wrapper {
    position: static;
    transform: none;
    width: 100%;
    max-width: none;
    min-height: auto;
    display: none;
    flex-direction: column;
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
    margin-top: 0;
}

.mobile-drawer-nav li.mega-menu.active .mega-menu-wrapper,
.mobile-drawer-nav li.mega-menu.focus-within .mega-menu-wrapper {
    display: flex;
}

.mobile-drawer-nav .mega-menu-tabs {
    flex: none;
    width: 100%;
    flex-direction: row !important;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    border-right: none;
    border-bottom: 1px solid #f0f0f0;
    background: transparent;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.mobile-drawer-nav .mega-menu-tabs::-webkit-scrollbar {
    display: none;
}

.mobile-drawer-nav .mega-menu-tab {
    width: auto;
    flex-shrink: 0;
}

.mobile-drawer-nav .mega-menu-tab a {
    padding: 10px 15px !important;
    font-size: 12px !important;
    border-left: none;
    border-bottom: 2px solid transparent;
}

.mobile-drawer-nav .mega-menu-tab.active > a,
.mobile-drawer-nav .mega-menu-tab:hover > a {
    border-left: none;
    border-bottom-color: var(--accent-red);
    background: transparent;
}

.mobile-drawer-nav .mega-menu-content {
    padding: 15px 0;
    background: transparent;
}

.mobile-drawer-nav .mega-panel {
    padding-bottom: 0;
}

.mobile-drawer-nav .mega-posts-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.mobile-drawer-nav .mega-posts-viewport::-webkit-scrollbar {
    display: none;
}

.mobile-drawer-nav .mega-posts-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    padding-bottom: 5px;
    transform: none !important;
}

.mobile-drawer-nav .mega-post {
    flex: 0 0 75%;
    scroll-snap-align: start;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.mobile-drawer-nav .mega-post>a {
    gap: 0;
}

.mobile-drawer-nav .mega-post-img,
.mobile-drawer-nav .mega-post-placeholder {
    height: 110px;
    border-radius: 6px 6px 0 0;
}

.mobile-drawer-nav .mega-post-title {
    font-size: 13px;
    padding: 10px;
    background: #fff;
    margin: 0;
}

.mobile-drawer-nav .mega-posts-controls {
    display: none !important;
}

body.dark-mode .mobile-drawer-nav li.mega-menu .mega-menu-wrapper {
    background: transparent;
    border-color: #333;
}

body.dark-mode .mobile-drawer-nav .mega-menu-tabs {
    background: transparent;
    border-bottom-color: #333;
}

body.dark-mode .mobile-drawer-nav .mega-post {
    background: #111;
    box-shadow: none;
    border: 1px solid #333;
}

body.dark-mode .mobile-drawer-nav .mega-post-title {
    background: #111;
}
*/

/* =============================================
   MOBILE DRAWER SUBMENU STYLES
   ============================================= */
.mobile-drawer-nav .sub-menu {
    display: none;
    list-style: none;
    padding: 0 0 0 15px;
    margin: 0;
    background: #fcfcfc;
    border-left: 2px solid var(--accent-red);
}

.mobile-drawer-nav > li.active > .sub-menu,
.mobile-drawer-nav > li.menu-item-has-children.active > .sub-menu {
    display: block;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.mobile-drawer-nav .sub-menu li {
    border-bottom: 1px solid #f5f5f5;
}

.mobile-drawer-nav .sub-menu li:last-child {
    border-bottom: none;
}

.mobile-drawer-nav .sub-menu a {
    display: block;
    padding: 12px 15px;
    font-size: 13px;
    color: #555;
    text-transform: capitalize;
    font-weight: 500;
    transition: all 0.2s;
    text-decoration: none;
}

.mobile-drawer-nav .sub-menu a:hover {
    color: var(--accent-red);
    padding-left: 20px;
    background: #fff;
}

/* Submenu Indicator */
.mobile-drawer-nav .menu-item-has-children > a {
    position: relative;
    padding-right: 35px;
}

.mobile-drawer-nav .menu-item-has-children > a::after {
    content: '\25BC';
    font-size: 10px;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
    color: #999;
}

.mobile-drawer-nav .menu-item-has-children.active > a::after {
    transform: translateY(-50%) rotate(180deg);
    color: var(--accent-red);
}

/* Dark Mode Support */
body.dark-mode .mobile-drawer-nav .sub-menu {
    background: #151515;
    border-left-color: var(--accent-red);
}

body.dark-mode .mobile-drawer-nav .sub-menu li {
    border-bottom-color: #222;
}

body.dark-mode .mobile-drawer-nav .sub-menu a {
    color: #aaa;
}

body.dark-mode .mobile-drawer-nav .sub-menu a:hover {
    color: #fff;
    background: #1a1a1a;
}

/* =============================================
   MOBILE DRAWER AUTH BUTTONS
   ============================================= */
.mobile-drawer-auth {
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mobile-auth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    background: #f5f5f5;
    border: none;
    border-radius: 4px;
    color: #333;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.mobile-auth-btn:hover {
    background: #ebebeb;
    color: #000;
}

.mobile-auth-btn.signup-btn {
    background: var(--accent-red);
    color: #fff;
}

.mobile-auth-btn.signup-btn:hover {
    background: #c0392b;
}

body.dark-mode .mobile-drawer-auth {
    border-bottom-color: #333;
}

body.dark-mode .mobile-auth-btn {
    background: #222;
    color: #ccc;
}

body.dark-mode .mobile-auth-btn:hover {
    background: #333;
    color: #fff;
}

/* =============================================
   AUTH MODAL POPUP
   ============================================= */
.jnews-auth-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.jnews-auth-modal.active {
    opacity: 1;
    visibility: visible;
}

.auth-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.auth-modal-content {
    position: relative;
    background: #fff;
    width: 100%;
    max-width: 420px;
    border-radius: 8px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    overflow: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.jnews-auth-modal.active .auth-modal-content {
    transform: translateY(0);
}

.auth-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    font-size: 20px;
    color: #999;
    cursor: pointer;
    z-index: 10;
    line-height: 1;
    transition: color 0.2s;
}

.auth-modal-close:hover {
    color: #333;
}

.auth-modal-header {
    display: flex;
    background: #f9f9f9;
    border-bottom: 1px solid #eee;
}

.auth-tab-btn {
    flex: 1;
    padding: 20px;
    background: transparent;
    border: none;
    font-size: 14px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
}

.auth-tab-btn.active {
    color: #111;
    border-bottom-color: var(--accent-red);
    background: #fff;
}

.auth-modal-body {
    padding: 30px;
}

.auth-panel {
    display: none;
    animation: fadeIn 0.3s ease;
}

.auth-panel.active {
    display: block;
}

.auth-field {
    margin-bottom: 20px;
}

.auth-field label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #555;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.auth-field input[type="text"],
.auth-field input[type="email"],
.auth-field input[type="password"] {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fafafa;
    font-size: 14px;
    transition: all 0.2s;
}

.auth-field input:focus {
    border-color: var(--accent-red);
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

.auth-field-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.auth-remember {
    font-size: 13px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.auth-submit-btn {
    width: 100%;
    padding: 14px;
    background: var(--accent-red);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s;
}

.auth-submit-btn:hover {
    background: #c0392b;
}

.auth-links {
    text-align: center;
    margin-top: 20px;
}

.auth-links a {
    font-size: 13px;
    color: #888;
    text-decoration: none;
    transition: color 0.2s;
}

.auth-links a:hover {
    color: var(--accent-red);
}

/* Dark Mode Support for Modal */
body.dark-mode .auth-modal-content {
    background: #151515;
}

body.dark-mode .auth-modal-header {
    background: #111;
    border-bottom-color: #333;
}

body.dark-mode .auth-tab-btn {
    color: #666;
}

body.dark-mode .auth-tab-btn.active {
    color: #fff;
    background: #151515;
}

body.dark-mode .auth-field label {
    color: #aaa;
}

body.dark-mode .auth-field input {
    background: #111;
    border-color: #333;
    color: #fff;
}

body.dark-mode .auth-field input:focus {
    background: #000;
}

body.dark-mode .auth-modal-close:hover {
    color: #fff;
}