/*
Theme Name: Liveschoolbd Premium
Theme URI: https://liveschoolbd.com/
Author: Antigravity AI (DeepMind Team)
Author URI: https://liveschoolbd.com/
Description: An international-level, ultra-professional, Pure White Newspaper & Magazine style WordPress theme. Upgraded to Version 2.2.0 with a high-end mobile-first navigation menu, vanilla JS cache-bypass engine, and Zero-CLS layouts.
Version: 2.2.0
License: Premium Private License - Registered exclusively for Liveschoolbd.com
License URI: https://liveschoolbd.com/
Text Domain: liveschoolbd
Tags: news, blog, two-columns, right-sidebar, grid-layout, custom-background, custom-colors, custom-header, custom-menu, featured-images, full-width-template, theme-options, translation-ready
*/

/* ==========================================================================
   1. DESIGN SYSTEM & CSS VARIABLES (LIGHT & DARK THEMES)
   ========================================================================== */
:root {
    /* Color Palette - Pure White Built (Light Mode Default) */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --text-primary: #2c3e50;
    --text-secondary: #4a5568;
    --text-muted: #556275;
    
    /* Dynamic Accent Colors (Overridden by WP Customizer) */
    --color-accent: #0066cc;
    --color-accent-hover: #0056b3;
    --color-accent-light: rgba(0, 123, 255, 0.08);
    
    /* Layout Elements */
    --border-color: #e2e8f0;
    --border-light: #edf2f7;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.02), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.01), 0 2px 4px -1px rgba(0,0,0,0.02);
    
    /* Typography (Premium Noto Serif Bengali editorial settings) */
    --font-heading: 'Noto Serif Bengali', 'Lora', Georgia, Cambria, serif;
    --font-body: 'Noto Serif Bengali', 'Inter', -apple-system, sans-serif;
    --font-size-base: 16px;
    --line-height-body: 1.75;
    
    /* Animation */
    --transition-fast: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark Mode Overrides (Injected by body class) */
body.dark-mode {
    --bg-primary: #121212;
    --bg-secondary: #1a1a1a;
    --text-primary: #f8f9fa;
    --text-secondary: #cbd5e0;
    --text-muted: #a0aec0;
    
    --border-color: #2d3748;
    --border-light: #2d3748;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.2);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.3);
}

/* Smooth Transitions for Color Switching */
body {
    transition: background-color var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal);
}

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

html {
    font-size: var(--font-size-base);
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: var(--line-height-body);
    font-weight: 400;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

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

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

ul, ol {
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--text-primary);
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 0.75rem;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }

/* Global Accessibility Screen Reader Utility */
.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;
}

/* ==========================================================================
   3. STRUCTURAL LAYOUT
   ========================================================================== */
.site-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-main {
    flex-grow: 1;
}

.container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 1.25rem;
    padding-left: 1.25rem;
}

/* Responsive Grid Base */
.grid-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

/* ==========================================================================
   4. NEWSPAPER HEADER OVERHAUL (LIGHT/DARK DESIGN SYSTEM)
   ========================================================================== */
.site-header {
    border-bottom: 1px solid var(--border-light);
    position: relative;
    background-color: var(--bg-primary);
}

/* Main Top Header Grid Bar */
.main-header-bar {
    padding: 1.25rem 0;
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border-light);
}

.main-header-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.5rem;
}

/* Left Column: Live Widgets */
.header-left-widgets {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-family: var(--font-body);
}

.header-left-widgets > span {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    position: relative;
}

/* Elegant editorial dividers */
.header-left-widgets > span:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -0.75rem;
    top: 15%;
    height: 70%;
    width: 1px;
    background-color: var(--border-color);
}

.widget-item-clock {
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.5px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.widget-item-date {
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
}

.widget-item-weather {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--color-accent);
    font-weight: 600;
    white-space: nowrap;
}

/* Center Column: Branding */
.header-center-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.logo-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo-wrapper img {
    max-height: 70px;
    width: auto;
    object-fit: contain;
    transition: filter var(--transition-normal);
}

/* Logo Switch Visibility Rules */
.dark-logo { display: none !important; }
.light-logo { display: block !important; }

body.dark-mode .light-logo { display: none !important; }
body.dark-mode .dark-logo { display: block !important; }

/* Filter inversion fallback for black-logo uploads */
body.dark-mode .logo-wrapper img:not(.dark-logo) {
    filter: invert(1) hue-rotate(180deg);
}

.site-title {
    font-family: var(--font-heading);
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -0.8px;
    text-transform: uppercase;
    line-height: 1.1;
}

.site-title a {
    color: var(--text-primary);
    background: linear-gradient(45deg, var(--text-primary) 30%, var(--color-accent) 90%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.dark-mode .site-title a {
    background: linear-gradient(45deg, var(--text-primary) 40%, var(--color-accent) 95%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.site-description {
    font-family: 'Noto Serif Bengali', 'SolaimanLipi', 'Kalpurush', sans-serif;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.4rem;
    font-weight: 600;
    letter-spacing: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0.9;
}

.site-description::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 1px;
    background: linear-gradient(to left, var(--border-color), transparent);
}

.site-description::after {
    content: "";
    display: inline-block;
    width: 20px;
    height: 1px;
    background: linear-gradient(to right, var(--border-color), transparent);
}

@media (max-width: 768px) {
    .site-description {
        font-size: 0.75rem;
        margin-top: 0.25rem;
    }
    .site-description::before,
    .site-description::after {
        width: 15px;
    }
}


/* Right Column: Actions */
.header-right-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
}

/* Sleek Inline Header Search Bar */
.header-search-box {
    display: block; /* Visible on desktop/tablet */
    margin-right: 0.5rem;
}

.header-search-form {
    display: flex;
    align-items: center;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 24px; /* Modern pill style! */
    padding: 0 0 0 1.25rem;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
    width: 240px; /* Comfortably fits the full placeholder and icon without cropping */
    height: 44px; /* WCAG standard touch target height */
}

.header-search-form:focus-within {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-light);
    background-color: var(--bg-primary);
    width: 280px; /* High-end dynamic expand on focus */
}

.header-search-input {
    border: none !important;
    background: none !important;
    padding: 0 !important;
    flex-grow: 1 !important; /* Dynamically share space */
    width: 50px !important; /* Set very small base width so flexbox stretches it */
    min-width: 0 !important; /* Prevent flex container blowout */
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    color: var(--text-primary) !important;
    outline: none !important;
    font-family: var(--font-body) !important;
}

.header-search-input::placeholder {
    color: var(--text-muted);
}

.header-search-submit {
    border: none;
    background: none;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition-fast);
    min-width: 44px; /* WCAG standard touch target width */
    min-height: 44px; /* WCAG standard touch target height */
}

.header-search-submit:hover {
    color: var(--color-accent);
}

/* Responsive Hide for Inline Header Search Bar */
@media (max-width: 1023px) {
    .header-search-box {
        display: none !important; /* Hide inline search bar on tablets/mobiles */
    }
}

/* Slimmer Search Box on medium screens (Desktop-first scaling) */
@media (max-width: 1200px) and (min-width: 1024px) {
    .header-search-form {
        width: 190px; /* comfortable width that fits beautifully without cutting off */
    }
    .header-search-form:focus-within {
        width: 230px; /* Expand on medium screens too */
    }
}

/* Sun/Moon Toggle Button */
.theme-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.25rem;
    color: var(--text-primary);
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.theme-toggle-btn:hover {
    background-color: var(--bg-secondary);
    color: var(--color-accent);
}

.theme-toggle-btn .sun-icon { display: none; }
.theme-toggle-btn .moon-icon { display: block; }

body.dark-mode .theme-toggle-btn .sun-icon { display: block; }
body.dark-mode .theme-toggle-btn .moon-icon { display: none; }

/* Hamburger Button Overhaul */
.hamburger-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 1.6rem;
    height: 1.15rem;
    padding: 0;
    transition: opacity var(--transition-fast);
}

.hamburger-btn:hover {
    opacity: 0.8;
}

.hamburger-btn span {
    width: 100%;
    height: 2px;
    background-color: var(--text-primary);
    transition: background-color var(--transition-normal);
}

/* Desktop Menubar (Below Header) */
.nav-bar {
    border-top: 1px solid var(--border-color);
    border-bottom: 2px solid var(--text-primary); /* Classic broadsheet accent border */
    background-color: var(--bg-primary);
    position: relative;
    z-index: 100;
}

.nav-bar.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: var(--shadow-md);
    border-top: none;
    animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-bar-inner {
    display: flex;
    justify-content: center; /* Center the primary navigation menu! */
    align-items: center;
    height: 4.25rem; /* Roomier bar - exactly 2-4px larger vertical height! */
    position: relative;
}

/* Navigation Dropdowns */
.primary-menu {
    display: flex;
    gap: 1rem; /* Reduced gap between items to fit all beautifully! */
    height: 100%;
}

.primary-menu > li {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
}

.primary-menu > li > a {
    font-size: 1.1rem; /* Increased size by exactly 2px for outstanding readability! */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 0 0.5rem; /* Reduced side padding to prevent overlapping and reduce gap! */
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    color: var(--text-primary);
    white-space: nowrap; /* Keep parent menu items strictly in one line! */
}

.primary-menu > li > a::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-accent);
    transition: width var(--transition-fast);
}

.primary-menu > li:hover > a {
    color: var(--color-accent);
}

.primary-menu > li:hover > a::after {
    width: 100%;
}

.primary-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(12px) scale(0.96);
    background-color: var(--bg-primary);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-top: 3px solid var(--color-accent); /* Gorgeous colored top bar! */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08), 0 5px 15px rgba(0, 0, 0, 0.03); /* Dual-layered soft luxury shadow */
    padding: 0.5rem;
    min-width: 240px;
    width: max-content; /* Dynamic width to fit single line text! */
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), transform var(--transition-normal), visibility var(--transition-normal);
    z-index: 999;
    border-radius: 12px; /* Super premium rounded corners */
}

body.dark-mode .primary-menu .sub-menu {
    background-color: #1a1a1a;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), 0 5px 15px rgba(0, 0, 0, 0.15);
}

/* Premium Centered Tooltip Pointer */
.primary-menu .sub-menu::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(4px) rotate(45deg);
    width: 10px;
    height: 10px;
    background-color: var(--color-accent);
    z-index: 99;
    pointer-events: none;
    transition: transform var(--transition-normal);
}

.primary-menu li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) scale(1);
}

.primary-menu .sub-menu li {
    position: relative;
    margin: 0;
    width: 100%;
}

/* Remove dated separator borders - modern portals use clean spacing and hover cards */
.primary-menu .sub-menu li:not(:last-child) {
    border-bottom: none;
}

.primary-menu .sub-menu li a {
    color: var(--text-secondary);
    font-size: 0.925rem; /* Highly readable premium sizing */
    font-weight: 600;
    padding: 0.7rem 1.25rem 0.7rem 1.75rem; /* Space on left for glowing indicator */
    display: block;
    white-space: nowrap; /* Keep child menu items strictly in one line! */
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 8px; /* Beautiful pill hover card */
    position: relative;
}

.primary-menu .sub-menu li a:hover {
    color: var(--color-accent);
    background-color: rgba(0, 122, 255, 0.04);
    padding-left: 1.95rem; /* Elegant micro-interaction slide-out nudge on hover! */
}

body.dark-mode .primary-menu .sub-menu li a:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

/* Elegant vertical accent pill indicator sliding and growing in on hover */
.primary-menu .sub-menu li a::before {
    content: '';
    position: absolute;
    left: 0.75rem;
    top: 50%;
    height: 40%;
    width: 3px;
    border-radius: 2px;
    background-color: var(--color-accent);
    transform: translateY(-50%) scaleY(0);
    transform-origin: center;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.primary-menu .sub-menu li a:hover::before {
    transform: translateY(-50%) scaleY(1);
}

/* Nav Actions (Search toggle placed floating right) */
.nav-actions {
    position: absolute;
    right: 0.5rem;
    display: flex;
    align-items: center;
}

/* Search Modal Panel */
.search-overlay-bar {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border-light);
    padding: 1.25rem 0;
    z-index: 998;
    box-shadow: var(--shadow-sm);
    display: none;
    animation: fadeIn var(--transition-fast);
}

.search-overlay-bar.is-active {
    display: block;
}

/* ==========================================================================
   4C. RESPONSIVE MOBILE-FIRST UPGRADES & TOUCH CONTROLS
   ========================================================================== */

/* Layout Helpers to handle display toggling */
.mobile-only {
    display: none !important;
}

/* Base Desktop Column Alignments */
.header-left-column {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.header-right-column {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

@media (max-width: 1023px) {
    .desktop-only {
        display: none !important;
    }
    
    button.mobile-only {
        display: flex !important;
    }
    
    div.mobile-only {
        display: flex !important;
    }
    
    span.mobile-only {
        display: inline-block !important;
    }

    /* Core header layout: Hamburger left, centered logo, Moon toggle right */
    .main-header-bar {
        padding: 0.75rem 0;
    }
    
    .main-header-grid {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        gap: 0.5rem !important;
    }
    
    .header-left-column,
    .header-right-column {
        flex: 0 0 45px !important;
        width: 45px !important;
        display: flex;
        align-items: center;
    }
    
    .header-left-column {
        justify-content: flex-start;
    }
    
    .header-right-column {
        justify-content: flex-end;
    }
    
    .header-center-logo {
        flex: 1 !important;
        text-align: center;
        max-width: calc(100% - 90px) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .site-title {
        font-size: 1.4rem !important; /* Elegant centered header text */
        letter-spacing: -0.5px;
        line-height: 1.1;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        margin: 0 !important;
        width: 100% !important;
        text-align: center !important;
    }
    
    .site-title a {
        background: linear-gradient(45deg, var(--text-primary) 30%, var(--color-accent) 90%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        display: inline-block !important;
    }

    .logo-wrapper img {
        max-height: 48px; /* Clean and proportioned mobile logo */
        width: auto;
    }

    /* Centered Mobile Widgets Sub-header */
    .header-mobile-widgets {
        display: flex !important;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.5rem;
        font-size: 0.7rem;
        color: var(--text-secondary);
        border-top: 1px solid var(--border-light);
        border-bottom: 1px solid var(--border-light);
        padding: 0.35rem 0.25rem;
        margin-top: 0.5rem;
        width: 100%;
    }

    .header-mobile-widgets > span {
        display: flex;
        align-items: center;
        gap: 0.2rem;
        white-space: nowrap;
    }

    .header-mobile-widgets > span:not(:last-child)::after {
        content: '|';
        margin-left: 0.5rem;
        color: var(--border-color);
    }
    
    /* Horizontally swipeable PC-like navigation menu on mobile devices (Clean scroll re-architecture) */
    .nav-bar {
        display: block !important;
        border-top: 1px solid var(--border-light);
        border-bottom: 2px solid var(--text-primary);
        background-color: var(--bg-primary);
        padding: 0 !important;
        overflow: visible !important; /* Let children handle the horizontal scroll boundary */
    }
    
    .nav-bar::-webkit-scrollbar {
        display: none !important; /* Hide scrollbar completely */
    }
    
    /* Remove padding and container limits inside navigation on mobile */
    .nav-bar .container {
        padding: 0 !important;
        margin: 0 !important;
        max-width: none !important;
        width: 100% !important;
        overflow: visible !important;
    }
    
    .nav-bar-inner {
        height: 2.75rem !important; /* Slim compact menu bar */
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        overflow-x: auto !important; /* Direct horizontal swiping scroll! */
        -webkit-overflow-scrolling: touch !important; /* Ultra-smooth touch momentum scroll for iOS & Android */
        padding: 0 1rem !important; /* Creates elegant page-edge margins for scrolling list! */
        width: 100% !important;
    }
    
    .nav-bar-inner::-webkit-scrollbar {
        display: none !important; /* Hide scrollbars for a highly polished luxury look */
    }
    
    .primary-menu {
        display: flex !important;
        flex-direction: row !important;
        gap: 0.75rem !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        width: max-content !important; /* Stretches dynamically to exactly fit all menu links */
    }
    
    .primary-menu > li {
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
    }
    
    .primary-menu > li > a {
        font-size: 0.85rem !important; /* highly readable responsive text */
        font-weight: 700 !important;
        padding: 0 0.5rem !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        letter-spacing: 0.2px !important;
        white-space: nowrap !important;
    }
    
    .primary-menu > li > a::after {
        bottom: 0px !important;
    }
    
    /* Disable desktop dropdown overlays on swipe menu - prevents blocking screens */
    .primary-menu .sub-menu {
        display: none !important;
    }
}

/* ==========================================================================
   4A. OFF-CANVAS HAMBURGER DRAWER SYSTEM
   ========================================================================== */
.off-canvas-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: -320px;
    width: 300px;
    background-color: var(--bg-secondary);
    z-index: 99999 !important; /* Extremely high z-index to stay above everything, including bottom nav capsule */
    box-shadow: var(--shadow-md);
    transition: left var(--transition-normal);
    padding: 2.5rem 1.5rem 8.5rem !important; /* Extra bottom padding to prevent social link crop/overlap */
    overflow-y: auto;
    border-right: 1px solid var(--border-color);
    transform: translateZ(0); /* Force GPU Stacking context so it stays above translate/blur bottom nav */
}

.off-canvas-drawer.is-active {
    left: 0;
}

.off-canvas-overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 99998 !important; /* Below drawer, but above bottom nav capsule */
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
    backdrop-filter: blur(2px); /* Premium next-level blur overlay! */
    transform: translateZ(0); /* Force GPU Stacking context */
}

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

.off-canvas-close {
    background: none;
    border: none;
    font-size: 1.75rem;
    cursor: pointer;
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    color: var(--text-primary);
    transition: color var(--transition-fast);
}

.off-canvas-close:hover {
    color: var(--color-accent);
}

/* ==========================================================
   4A. OFF-CANVAS BRAND & OVERRIDES
   ========================================================== */
.off-canvas-brand {
    margin-bottom: 2rem !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding-bottom: 1rem !important;
}

.off-canvas-brand .site-title {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-align: left !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.off-canvas-brand .site-title a {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    color: var(--text-primary) !important;
    display: inline-block !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
}

body.dark-mode .off-canvas-brand .site-title a {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Force Drawer scroll safety & hide horizontal scrollbar completely */
.off-canvas-drawer {
    overflow-x: hidden !important;
}
.off-canvas-drawer::-webkit-scrollbar {
    width: 4px !important;
}
.off-canvas-drawer::-webkit-scrollbar-thumb {
    background-color: var(--border-color) !important;
    border-radius: 4px !important;
}

.off-canvas-menu {
    margin-bottom: 2.5rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Level 1 (Top Level Menu List) */
.off-canvas-menu ul,
.off-canvas-menu ul.primary-menu {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
}

.off-canvas-menu ul > li,
.off-canvas-menu ul.primary-menu > li {
    margin-bottom: 0 !important;
    position: relative !important;
    border-bottom: 1px solid var(--border-light) !important;
    padding-bottom: 0 !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
}

.off-canvas-menu ul > li:last-child,
.off-canvas-menu ul.primary-menu > li:last-child {
    border-bottom: none !important;
}

.off-canvas-menu ul > li > a,
.off-canvas-menu ul.primary-menu > li > a {
    font-size: 1.05rem !important; /* Large elegant editorial font */
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: auto !important;
    padding: 0.85rem 0.5rem !important;
    white-space: normal !important; /* Allow wrapping */
    box-sizing: border-box !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
}

/* Hide horizontal desktop line indicator */
.off-canvas-menu ul > li > a::after,
.off-canvas-menu ul.primary-menu > li > a::after {
    display: none !important;
}

/* Active Highlight for Level 1 */
.off-canvas-menu ul > li.current-menu-item > a,
.off-canvas-menu ul.primary-menu > li.current-menu-item > a,
.off-canvas-menu ul > li.current_page_item > a,
.off-canvas-menu ul.primary-menu > li.current_page_item > a {
    color: var(--color-accent) !important;
    padding-left: 1rem !important;
    font-weight: 700 !important;
    background-color: rgba(0, 122, 255, 0.04) !important;
    border-radius: 8px !important;
}

.off-canvas-menu ul > li.menu-item-has-children > a,
.off-canvas-menu ul.primary-menu > li.menu-item-has-children > a,
.off-canvas-menu ul > li.page_item_has_children > a,
.off-canvas-menu ul.primary-menu > li.page_item_has_children > a {
    padding-right: 3rem !important; /* Room for toggle button */
}

/* Level 1 Chevron toggle button */
.off-canvas-menu ul > li > .sub-menu-toggle,
.off-canvas-menu ul.primary-menu > li > .sub-menu-toggle {
    position: absolute !important;
    right: 0.25rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 2.25rem !important;
    height: 2.25rem !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    color: var(--text-secondary) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 10 !important;
    border-radius: 50% !important;
    transition: all var(--transition-fast) !important;
    padding: 0 !important;
}

.off-canvas-menu ul > li > .sub-menu-toggle:hover,
.off-canvas-menu ul.primary-menu > li > .sub-menu-toggle:hover {
    background-color: rgba(0, 122, 255, 0.05) !important;
    color: var(--color-accent) !important;
}

body.dark-mode .off-canvas-menu ul > li > .sub-menu-toggle:hover,
body.dark-mode .off-canvas-menu ul.primary-menu > li > .sub-menu-toggle:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.sub-menu-toggle .chevron-icon {
    transition: transform var(--transition-normal) !important;
    stroke: var(--text-secondary) !important;
}

.sub-menu-toggle.is-active .chevron-icon {
    transform: rotate(180deg) !important;
    stroke: var(--color-accent) !important;
}

/* Level 2 Sub-Menu (First nested clean accordion list) */
.off-canvas-menu ul > li > .sub-menu,
.off-canvas-menu ul.primary-menu > li > .sub-menu,
.off-canvas-menu ul > li > .children,
.off-canvas-menu ul.primary-menu > li > .children {
    display: block !important;
    position: static !important;
    transform: none !important;
    width: auto !important; /* Allow dynamic indentation */
    background-color: rgba(0, 0, 0, 0.015) !important; /* Soft premium shaded layered background */
    border: none !important;
    border-left: 1.5px solid var(--border-color, #e2e8f0) !important; /* Thin elegant grey guideline */
    border-radius: 8px !important; /* Nest cleanly with soft rounded cards */
    box-shadow: none !important;
    margin-left: 1.25rem !important; /* Elegant indent to show logical nesting */
    margin-right: 0.5rem !important;
    margin-top: 0px !important; /* Overridden in JS during animation */
    padding: 0px !important; /* Overridden in JS during animation */
    list-style: none !important;
    box-sizing: border-box !important;
}

body.dark-mode .off-canvas-menu ul > li > .sub-menu,
body.dark-mode .off-canvas-menu ul.primary-menu > li > .sub-menu,
body.dark-mode .off-canvas-menu ul > li > .children,
body.dark-mode .off-canvas-menu ul.primary-menu > li > .children {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

.off-canvas-menu ul > li > .sub-menu > li,
.off-canvas-menu ul.primary-menu > li > .sub-menu > li,
.off-canvas-menu ul > li > .children > li,
.off-canvas-menu ul.primary-menu > li > .children > li {
    margin-bottom: 0 !important;
    position: relative !important;
    border-bottom: none !important; /* Clean design: no sub-menu item dividers */
    padding-bottom: 0 !important;
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
}

.off-canvas-menu ul > li > .sub-menu > li:last-child,
.off-canvas-menu ul.primary-menu > li > .sub-menu > li:last-child,
.off-canvas-menu ul > li > .children > li:last-child,
.off-canvas-menu ul.primary-menu > li > .children > li:last-child {
    border-bottom: none !important;
}

/* Level 2 Sub-Menu Links inside the Card */
.off-canvas-menu ul > li > .sub-menu > li > a,
.off-canvas-menu ul.primary-menu > li > .sub-menu > li > a,
.off-canvas-menu ul > li > .children > li > a,
.off-canvas-menu ul.primary-menu > li > .children > li > a {
    font-size: 0.95rem !important; /* Slightly larger, extremely readable */
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
    text-transform: none !important;
    letter-spacing: 0px !important;
    padding: 0.65rem 3rem 0.65rem 1.75rem !important; /* Right: space for sub chevron. Left: room for bullet. */
    display: block !important;
    width: 100% !important;
    white-space: normal !important;
    box-sizing: border-box !important;
    transition: all var(--transition-fast) !important;
    position: relative !important;
    border-bottom: none !important;
}

.off-canvas-menu ul > li > .sub-menu > li > a:hover,
.off-canvas-menu ul.primary-menu > li > .sub-menu > li > a:hover,
.off-canvas-menu ul > li > .children > li > a:hover,
.off-canvas-menu ul.primary-menu > li > .children > li > a:hover {
    color: var(--color-accent) !important;
    padding-left: 2rem !important; /* Micro-nudge on hover */
    background-color: rgba(0, 122, 255, 0.03) !important;
}

body.dark-mode .off-canvas-menu ul > li > .sub-menu > li > a:hover,
body.dark-mode .off-canvas-menu ul.primary-menu > li > .sub-menu > li > a:hover,
body.dark-mode .off-canvas-menu ul > li > .children > li > a:hover,
body.dark-mode .off-canvas-menu ul.primary-menu > li > .children > li > a:hover {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

/* Level 2 Chevron Bullet (Absolute layout prevents multiline text wrapping break!) */
.off-canvas-menu ul > li > .sub-menu > li > a::before,
.off-canvas-menu ul.primary-menu > li > .sub-menu > li > a::before,
.off-canvas-menu ul > li > .children > li > a::before,
.off-canvas-menu ul.primary-menu > li > .children > li > a::before {
    content: '•' !important; /* Bullet is cleaner than raw chevron bullet */
    position: absolute !important;
    left: 0.85rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 0.85rem !important;
    line-height: 1 !important;
    color: var(--text-muted) !important;
    transition: color var(--transition-fast), transform var(--transition-fast) !important;
    display: inline-block !important;
}

.off-canvas-menu ul > li > .sub-menu > li > a:hover::before,
.off-canvas-menu ul.primary-menu > li > .sub-menu > li > a:hover::before,
.off-canvas-menu ul > li > .children > li > a:hover::before,
.off-canvas-menu ul.primary-menu > li > .children > li > a:hover::before {
    color: var(--color-accent) !important;
    transform: translateY(-50%) scale(1.2) !important;
}

/* Level 2 Chevron sub-toggle (for Level 3 deep nested sub-menus) */
.off-canvas-menu ul > li > .sub-menu > li > .sub-menu-toggle,
.off-canvas-menu ul.primary-menu > li > .sub-menu > li > .sub-menu-toggle,
.off-canvas-menu ul > li > .children > li > .sub-menu-toggle,
.off-canvas-menu ul.primary-menu > li > .children > li > .sub-menu-toggle {
    position: absolute !important;
    right: 0.5rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 2rem !important;
    height: 2rem !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    color: var(--text-muted) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 10 !important;
    border-radius: 50% !important;
    transition: all var(--transition-fast) !important;
    padding: 0 !important;
}

.off-canvas-menu ul > li > .sub-menu > li > .sub-menu-toggle:hover,
.off-canvas-menu ul.primary-menu > li > .sub-menu > li > .sub-menu-toggle:hover,
.off-canvas-menu ul > li > .children > li > .sub-menu-toggle:hover,
.off-canvas-menu ul.primary-menu > li > .children > li > .sub-menu-toggle:hover {
    background-color: rgba(0, 122, 255, 0.05) !important;
    color: var(--color-accent) !important;
}

/* Level 3 Deep Nested Sub-Menu (No box inside box - clean indented list!) */
.off-canvas-menu ul > li > .sub-menu > li > .sub-menu,
.off-canvas-menu ul.primary-menu > li > .sub-menu > li > .sub-menu,
.off-canvas-menu ul > li > .children > li > .children,
.off-canvas-menu ul.primary-menu > li > .children > li > .children {
    display: block !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    padding-left: 1.25rem !important;
    margin-top: 0px !important; /* JS controlled transition */
    margin-bottom: 0.5rem !important;
    border-left: 2px solid var(--border-color) !important;
    border-radius: 0 !important;
    list-style: none !important;
    box-sizing: border-box !important;
}

.off-canvas-menu ul > li > .sub-menu > li > .sub-menu > li,
.off-canvas-menu ul.primary-menu > li > .sub-menu > li > .sub-menu > li,
.off-canvas-menu ul > li > .children > li > .children > li,
.off-canvas-menu ul.primary-menu > li > .children > li > .children > li {
    margin-bottom: 0 !important;
    position: relative !important;
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* Level 3 Links */
.off-canvas-menu ul > li > .sub-menu > li > .sub-menu > li > a,
.off-canvas-menu ul.primary-menu > li > .sub-menu > li > .sub-menu > li > a,
.off-canvas-menu ul > li > .children > li > .children > li > a,
.off-canvas-menu ul.primary-menu > li > .children > li > .children > li > a {
    font-size: 0.825rem !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
    text-transform: none !important;
    letter-spacing: 0px !important;
    padding: 0.45rem 0.5rem 0.45rem 1.15rem !important;
    display: block !important;
    width: 100% !important;
    white-space: normal !important;
    box-sizing: border-box !important;
    transition: color var(--transition-fast), padding-left var(--transition-fast) !important;
    position: relative !important;
}

.off-canvas-menu ul > li > .sub-menu > li > .sub-menu > li > a:hover,
.off-canvas-menu ul.primary-menu > li > .sub-menu > li > .sub-menu > li > a:hover,
.off-canvas-menu ul > li > .children > li > .children > li > a:hover,
.off-canvas-menu ul.primary-menu > li > .children > li > .children > li > a:hover {
    color: var(--color-accent) !important;
    padding-left: 1.35rem !important;
}

/* Level 3 Chevron Bullet Indicator */
.off-canvas-menu ul > li > .sub-menu > li > .sub-menu > li > a::before,
.off-canvas-menu ul.primary-menu > li > .sub-menu > li > .sub-menu > li > a::before,
.off-canvas-menu ul > li > .children > li > .children > li > a::before,
.off-canvas-menu ul.primary-menu > li > .children > li > .children > li > a::before {
    content: '»' !important;
    position: absolute !important;
    left: 0.35rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 0.8rem !important;
    color: var(--text-muted) !important;
    transition: color var(--transition-fast), transform var(--transition-fast) !important;
    display: inline-block !important;
}

.off-canvas-menu ul > li > .sub-menu > li > .sub-menu > li > a:hover::before,
.off-canvas-menu ul.primary-menu > li > .sub-menu > li > .sub-menu > li > a:hover::before,
.off-canvas-menu ul > li > .children > li > .children > li > a:hover::before,
.off-canvas-menu ul.primary-menu > li > .children > li > .children > li > a:hover::before {
    color: var(--color-accent) !important;
    transform: translateY(-50%) translateX(2px) !important;
}

.off-canvas-social {
    border-top: 1px solid var(--border-color);
    padding-top: 1.5rem;
    margin-top: 1.5rem;
}

.off-canvas-social .social-links {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.off-canvas-social .social-links a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50% !important;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    transition: all var(--transition-fast) !important;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}

.off-canvas-social .social-links a:hover {
    color: #ffffff !important;
    transform: translateY(-3px) scale(1.05);
}

.off-canvas-social .social-links a.drawer-facebook:hover { background-color: #1877f2 !important; border-color: #1877f2 !important; box-shadow: 0 5px 12px rgba(24, 119, 242, 0.3); }
.off-canvas-social .social-links a.drawer-twitter:hover { background-color: #000000 !important; border-color: #000000 !important; box-shadow: 0 5px 12px rgba(0, 0, 0, 0.3); }
.off-canvas-social .social-links a.drawer-linkedin:hover { background-color: #0077b5 !important; border-color: #0077b5 !important; box-shadow: 0 5px 12px rgba(0, 119, 181, 0.3); }
.off-canvas-social .social-links a.drawer-youtube:hover { background-color: #ff0000 !important; border-color: #ff0000 !important; box-shadow: 0 5px 12px rgba(255, 0, 0, 0.3); }
.off-canvas-social .social-links a.drawer-instagram:hover { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important; border-color: transparent !important; box-shadow: 0 5px 12px rgba(220, 39, 67, 0.3); }

.off-canvas-social .social-links a svg.svg-social {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ==========================================================================
   5. DYNAMIC NEWSPAPER HOMEPAGE (INDEX & ARCHIVES)
   ========================================================================== */
.home-sections-wrapper {
    padding: 2rem 0 4rem 0;
}

/* Section Header styling */
.section-title-wrap {
    border-bottom: 2px solid var(--text-primary); /* Thick solid broadsheet line */
    margin-bottom: 1.75rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    transition: border-color var(--transition-normal);
}

body.dark-mode .section-title-wrap {
    border-bottom-color: var(--border-color);
}

.section-title {
    font-size: 1.05rem; /* Clean and proportioned */
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.4rem 0.85rem !important;
    background-color: var(--color-accent); /* Dynamic colored card tab! */
    color: #ffffff !important;
    margin-bottom: 0;
    display: inline-block;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    box-shadow: 0 4px 10px var(--color-accent-light);
    position: relative;
    z-index: 1;
}

.section-title a {
    color: #ffffff !important;
}

/* Post Cards layouts */
.post-card {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    background-color: var(--bg-primary);
    position: relative;
    transition: transform var(--transition-normal);
}

.post-thumb-link {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: 6px;
    background-color: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
}

/* Elegant Filmic Gradient depth overlay */
.post-thumb-link::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.15) 100%);
    opacity: 0.6;
    transition: opacity var(--transition-normal);
    pointer-events: none;
    z-index: 1;
}

.post-thumb-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.post-card:hover .post-thumb-link img {
    transform: scale(1.06);
}

.post-card:hover .post-thumb-link::after {
    opacity: 0.85;
}

/* Glassmorphic Pill Category Badge */
.post-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background-color: var(--color-accent);
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.25rem 0.65rem;
    border-radius: 20px; /* Elegant pill! */
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    letter-spacing: 0.5px;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.post-card:hover .post-badge {
    transform: translateY(-1px);
    background-color: var(--color-accent-hover);
}

.post-meta-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.post-meta-author {
    font-weight: 600;
    color: var(--text-secondary);
}

.post-title {
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 0.4rem;
    letter-spacing: -0.2px;
}

.post-title a {
    color: var(--text-primary);
    transition: color var(--transition-fast);
}

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

.post-excerpt {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Module A: Lead News Section */
.lead-news-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}

.lead-primary-card {
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 1.5rem;
}

.lead-primary-card .post-title {
    font-size: 1.5rem;
    margin-top: 0.5rem;
}

.lead-secondary-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.list-mini-card {
    display: flex;
    gap: 1rem;
    border-bottom: 1px dashed var(--border-light);
    padding: 0.55rem;
    border-radius: 6px;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.list-mini-card:last-child {
    border-bottom: none;
}

.list-mini-card .post-thumb-link {
    width: 100px;
    height: 70px;
    flex-shrink: 0;
    aspect-ratio: auto;
    border-radius: 4px;
}

.list-mini-card .post-title {
    font-size: 0.95rem;
    line-height: 1.35;
}

.list-mini-card:hover {
    background-color: var(--bg-secondary);
    transform: translateX(4px); /* Premium micro-nudge right */
}

/* Module B: Newspaper Category Blocks (Grid 2/3 Cols) */
.category-blocks-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-bottom: 3rem;
}

.posts-sub-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

/* Module C: Infinite Timeline/List layouts */
.timeline-posts-list {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.timeline-horizontal-card {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

body.dark-mode .timeline-horizontal-card {
    background-color: #161616; /* Clean card popup layout on dark mode background */
}

.timeline-horizontal-card:hover {
    transform: translateY(-4px); /* Premium visual lift */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.02);
    border-color: var(--border-color);
}

body.dark-mode .timeline-horizontal-card:hover {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

/* Widgetized Sidebar Area */
.sidebar-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.widget {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    padding: 1.5rem;
}

.widget-title {
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    border-bottom: 2px solid var(--border-light);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    position: relative;
}

.widget-title::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 40px;
    height: 2px;
    background-color: var(--color-accent);
}

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

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

.widget ul li a {
    color: var(--text-secondary);
}

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

/* ==========================================================================
   6. SINGLE POST TEMPLATE (READING-OPTIMIZED)
   ========================================================================== */
.post-layout-container {
    padding: 2rem 0 4rem 0;
}

/* SEO Schema Breadcrumb */
.breadcrumb-navigation {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.breadcrumb-navigation a {
    color: var(--text-muted);
}

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

.breadcrumb-separator {
    font-size: 0.65rem;
}

/* Post Core Headings */
.single-post-title {
    font-size: 2rem;
    line-height: 1.25;
    margin-bottom: 1rem;
    letter-spacing: -0.4px;
}

.single-post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    font-size: 0.825rem;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 1.25rem;
    margin-bottom: 1.75rem;
}

.single-meta-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.single-meta-avatar img {
    border-radius: 50%;
    width: 24px;
    height: 24px;
}

/* Distraction Free Reading Content Body */
.post-reading-wrapper {
    max-width: 760px;
    margin: 0 auto;
}

.post-featured-media {
    margin-bottom: 2.5rem;
    border-radius: 6px;
    overflow: hidden;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-light);
    padding: 0.5rem; /* Framed look! */
}

.post-featured-media img {
    width: 100%;
    height: auto;
    max-height: 600px;
    object-fit: contain; /* Renders the complete image in full aspect ratio! No cutoffs! */
    display: block;
    margin: 0 auto;
    border-radius: 4px;
}

.post-featured-media figcaption {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
    margin-top: 0.75rem;
    font-style: italic;
}

.article-content {
    font-size: 1rem;
    line-height: var(--line-height-body);
    color: var(--text-primary);
}

.article-content p {
    margin-bottom: 1.5rem;
}

.article-content h2, 
.article-content h3 {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.article-content blockquote {
    position: relative;
    background-color: var(--bg-secondary);
    border-left: 5px solid var(--color-accent);
    padding: 1.5rem 2rem 1.5rem 3.5rem;
    margin: 2.5rem 0;
    border-radius: 0 8px 8px 0;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.01);
}

body.dark-mode .article-content blockquote {
    box-shadow: inset 0 0 10px rgba(255,255,255,0.01);
}

.article-content blockquote p {
    font-family: 'Noto Serif Bengali', 'SolaimanLipi', 'Kalpurush', Georgia, serif;
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--text-primary);
    font-style: italic;
    margin-bottom: 0.5rem !important;
}

/* Large decorative quote mark in the background */
.article-content blockquote::before {
    content: "“";
    position: absolute;
    top: -0.2rem;
    left: 0.75rem;
    font-size: 4rem;
    font-family: Georgia, serif;
    line-height: 1;
    color: var(--color-accent);
    opacity: 0.25;
}

/* Quote citation / author info */
.article-content blockquote cite {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-style: normal;
    margin-top: 0.5rem;
}
.article-content blockquote cite::before {
    content: "— ";
}

/* responsive tables styling */
.article-content table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    font-size: 0.95rem;
    line-height: 1.5;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
}

.article-content th,
.article-content td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
}

.article-content th {
    background-color: var(--bg-secondary);
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border-color);
}

.article-content tr:last-child td {
    border-bottom: none;
}

.article-content tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.015);
}

body.dark-mode .article-content tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.015);
}

/* Enable horizontal scroll on small screens for tables */
.wp-block-table,
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 2rem 0;
    border: 1px solid var(--border-color);
    border-radius: 6px;
}
.wp-block-table table,
.table-responsive table {
    margin: 0;
}


/* Font Resizer Widget inside Single Post Actions Bar */
.font-resizer-tool {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.resizer-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.resizer-btn {
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    padding: 0.25rem 0.65rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-fast) !important;
}

.resizer-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background-color: var(--color-accent-light);
}

.resizer-btn.active {
    background-color: var(--color-accent) !important;
    color: #ffffff !important;
    border-color: var(--color-accent) !important;
}

/* Premium Dynamic Social Share Row */
.post-share-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1.25rem 0;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    margin: 2.5rem 0;
}

.share-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
}

.share-buttons-list {
    display: flex;
    gap: 0.6rem;
}

.share-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50% !important;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    transition: all var(--transition-fast) !important;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    cursor: pointer;
}

.share-btn i.dashicons,
.share-btn svg {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.share-btn:hover {
    color: #ffffff !important;
    transform: translateY(-3px) scale(1.05);
}

.share-fb:hover { background-color: #1877f2 !important; border-color: #1877f2 !important; box-shadow: 0 4px 10px rgba(24, 119, 242, 0.25); }
.share-tw:hover { background-color: #000000 !important; border-color: #000000 !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); }
.share-ln:hover { background-color: #0077b5 !important; border-color: #0077b5 !important; box-shadow: 0 4px 10px rgba(0, 119, 181, 0.25); }
.share-yt:hover { background-color: #ff0000 !important; border-color: #ff0000 !important; box-shadow: 0 4px 10px rgba(255, 0, 0, 0.25); }
.share-ig:hover { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important; border-color: transparent !important; box-shadow: 0 4px 10px rgba(220, 39, 67, 0.25); }
.share-wa:hover { background-color: #25d366 !important; border-color: #25d366 !important; box-shadow: 0 4px 10px rgba(37, 211, 102, 0.25); }
.share-link:hover { background-color: var(--color-accent) !important; border-color: var(--color-accent) !important; box-shadow: 0 4px 10px rgba(0, 123, 255, 0.25); }

/* Custom Author Bio Box */
/* ==========================================================================
   PREMIUM PROFESSIONAL AUTHOR CARD
   ========================================================================== */

.author-card {
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2.5rem;
    background: var(--bg-primary);
    box-shadow: 0 4px 24px rgba(0,0,0,0.04);
    transition: box-shadow 0.25s ease;
    position: relative;
    overflow: hidden;
}

.author-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-accent), #7c3aed);
}

body.dark-mode .author-card {
    border-color: rgba(255,255,255,0.08);
    box-shadow: 0 4px 24px rgba(0,0,0,0.2);
}

.author-card-top {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

/* Avatar with gradient ring */
.author-card-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.author-card-avatar-wrap::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, var(--color-accent), #7c3aed, #f59e0b, var(--color-accent));
    z-index: 0;
}

.author-card-avatar {
    position: relative;
    z-index: 1;
    display: block;
    width: 72px !important;
    height: 72px !important;
    border-radius: 50% !important;
    border: 3px solid var(--bg-primary) !important;
    object-fit: cover;
}

.author-card-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    z-index: 2;
    border: 2px solid var(--bg-primary);
    cursor: default;
}

/* Identity */
.author-card-identity {
    flex: 1;
    min-width: 0;
}

.author-card-label {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    display: block;
    margin-bottom: 2px;
}

.author-card-name {
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0 0 4px;
    line-height: 1.2;
}

.author-card-name a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.author-card-name a:hover {
    color: var(--color-accent);
}

.author-card-post-count {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 600;
}

/* Social icons */
.author-card-socials {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.author-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.author-social-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.author-social-tw:hover { background: #000; color: #fff; border-color: #000; }
.author-social-fb:hover { background: #1877f2; color: #fff; border-color: #1877f2; }
.author-social-web:hover { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }

/* Bio */
.author-card-bio {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0 0 1rem;
    border-top: 1px solid var(--border-light);
    padding-top: 0.85rem;
}

/* CTA button */
.author-card-all-posts {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-accent);
    text-decoration: none;
    border: 1px solid var(--border-color);
    padding: 0.4rem 0.9rem;
    border-radius: 20px;
    transition: all 0.2s ease;
    background: var(--bg-secondary);
}

.author-card-all-posts:hover {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
    transform: translateX(2px);
}

@media (max-width: 480px) {
    .author-card-socials {
        margin-left: 0;
    }
    .author-card-top {
        align-items: flex-start;
    }
}

/* Premium Related Posts Grid Overhaul */
.related-posts-block {
    margin-top: 3.5rem;
    margin-bottom: 3.5rem;
}

.related-posts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

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

.related-posts-grid .post-card {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transition: all var(--transition-normal) !important;
    padding: 0 !important;
}

.related-posts-grid .post-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--shadow-md) !important;
    border-color: var(--color-accent) !important;
}

.related-posts-grid .post-card .post-thumb-link {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16/9 !important;
    overflow: hidden !important;
    border-bottom: 1px solid var(--border-light) !important;
}

.related-posts-grid .post-card .post-thumb-link img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform var(--transition-normal) !important;
}

.related-posts-grid .post-card:hover .post-thumb-link img {
    transform: scale(1.06) !important;
}

.related-posts-grid .post-card .post-meta-wrap {
    padding: 0.75rem 1rem 0.25rem 1rem !important;
    font-size: 0.7rem !important;
    color: var(--text-muted) !important;
    font-weight: 600 !important;
    border: none !important;
    background: transparent !important;
    margin: 0 !important;
}

.related-posts-grid .post-card .post-title {
    padding: 0 1rem 1.25rem 1rem !important;
    margin: 0 !important;
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    flex-grow: 1 !important;
    border: none !important;
}

.related-posts-grid .post-card .post-title a {
    color: var(--text-primary) !important;
    text-decoration: none !important;
    transition: color var(--transition-fast) !important;
}

.related-posts-grid .post-card .post-title a:hover {
    color: var(--color-accent) !important;
}

/* Custom Single Post Sidebar styling */
.single-post-sidebar .widget-title {
    border-bottom: 2px solid var(--text-primary) !important;
    padding-bottom: 0.5rem !important;
    margin-bottom: 1.25rem !important;
}

body.dark-mode .single-post-sidebar .widget-title {
    border-bottom-color: var(--border-color) !important;
}

.single-post-sidebar .topic-pill-btn:hover {
    background-color: var(--color-accent) !important;
    color: #ffffff !important;
    border-color: var(--color-accent) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--color-accent-light);
}

.single-post-sidebar .topic-pill-btn:hover .pill-count {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

.single-post-sidebar .sidebar-feed-item:hover .sidebar-item-title a {
    color: var(--color-accent) !important;
}

/* ==========================================================================
   COMPACT PREMIUM COMMENTS SECTION
   ========================================================================== */

.comments-area {
    margin-top: 3rem;
    border-top: 2px solid var(--border-light);
    padding-top: 2rem;
}

/* Header */
.comments-header {
    margin-bottom: 1.5rem;
}

.comments-title {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin: 0 !important;
    color: var(--text-primary) !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

/* Empty state */
.no-comments-placeholder {
    text-align: center;
    padding: 2rem 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.no-comments-placeholder svg {
    opacity: 0.4;
    display: block;
    margin: 0 auto 0.5rem;
}

/* Comment list reset */
.comment-list {
    list-style: none !important;
    margin: 0 0 1.5rem !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
}

/* Each comment item */
.comment-item {
    list-style: none !important;
}

.comment-body-inner {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

/* Avatar circle */
.comment-avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
}

.comment-avatar-img,
.comment-avatar img {
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    display: block !important;
}

/* Bubble */
.comment-bubble {
    flex: 1;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 0 10px 10px 10px;
    padding: 0.75rem 1rem;
    min-width: 0;
}

body.dark-mode .comment-bubble {
    border-color: rgba(255,255,255,0.06);
}

.comment-bubble-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.comment-author-name,
.comment-author cite {
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
    font-style: normal !important;
}

.comment-author-name a {
    color: var(--text-primary);
    text-decoration: none;
}

.comment-date,
.comment-metadata {
    font-size: 0.68rem !important;
    color: var(--text-muted) !important;
    margin-left: auto;
}

.comment-text,
.comment-content {
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
    color: var(--text-primary) !important;
    margin: 0 0 0.5rem !important;
}

.comment-text p,
.comment-content p { margin: 0 !important; }

.comment-awaiting {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
    margin: 0 0 0.5rem;
}

/* Actions row */
.comment-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.comment-reply-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    color: var(--text-muted) !important;
    text-decoration: none !important;
    padding: 0.2rem 0.5rem !important;
    border-radius: 3px !important;
    background: transparent !important;
    border: none !important;
    transition: color 0.2s ease !important;
}

.comment-reply-link:hover {
    color: var(--color-accent) !important;
    background: var(--color-accent-light) !important;
}

/* Nested replies */
.comment-list .children {
    list-style: none !important;
    margin: 0.75rem 0 0 2.75rem !important;
    padding: 0 !important;
    border-left: 2px solid var(--border-light) !important;
    padding-left: 0.75rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
}

@media (max-width: 600px) {
    .comment-list .children {
        margin-left: 1.5rem !important;
    }
}

/* Pagination */
.comments-pagination {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--color-accent);
}

/* ---- COMPACT COMMENT FORM ---- */
.comment-respond {
    margin-top: 2rem !important;
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-light) !important;
    border-top: 3px solid var(--color-accent) !important;
    padding: 1.5rem !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04) !important;
}

body.dark-mode .comment-respond {
    box-shadow: 0 2px 12px rgba(0,0,0,0.2) !important;
}

.comment-reply-title {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin: 0 0 1rem !important;
    color: var(--text-primary) !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.comment-reply-title small a {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    margin-left: 0.5rem;
}

/* 2-column row for name/email */
.cf-row--2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 0;
}

@media (max-width: 480px) {
    .cf-row--2col {
        grid-template-columns: 1fr;
    }
}

.cf-field {
    margin-bottom: 0.75rem;
}

.cf-field label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cf-field label abbr {
    color: var(--color-accent);
    text-decoration: none;
}

.cf-field input,
.cf-field textarea,
.comment-form-field input,
.comment-form-field textarea {
    width: 100% !important;
    border: 1px solid var(--border-color) !important;
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    padding: 0.6rem 0.85rem !important;
    border-radius: 6px !important;
    font-family: var(--font-body) !important;
    font-size: 0.85rem !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    box-sizing: border-box !important;
    line-height: 1.5 !important;
}

.cf-field--textarea .cf-field {
    margin-bottom: 0;
}

.cf-field textarea,
.comment-form-field textarea {
    resize: vertical !important;
    min-height: 100px !important;
}

.cf-field input:focus,
.cf-field textarea:focus,
.comment-form-field input:focus,
.comment-form-field textarea:focus {
    border-color: var(--color-accent) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 13, 110, 253), 0.12) !important;
}

/* Submit button — compact pill */
.cf-submit-btn,
.comment-respond button[type="submit"] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    background: var(--color-accent) !important;
    color: #fff !important;
    border: none !important;
    padding: 0.6rem 1.5rem !important;
    border-radius: 20px !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin-top: 0.75rem !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

.cf-submit-btn:hover,
.comment-respond button[type="submit"]:hover {
    opacity: 0.88 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18) !important;
}

/* Logged-in note */
.logged-in-as,
.comment-notes {
    font-size: 0.75rem !important;
    color: var(--text-muted) !important;
    margin-bottom: 0.75rem !important;
    line-height: 1.4 !important;
}

/* Cancel reply link */
#cancel-comment-reply-link {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-decoration: none;
    margin-left: 0.5rem;
}


/* ==========================================================================
   7. FOOTER STYLES
   ========================================================================== */
.site-footer {
    background-color: #fafbfc; /* Luxury editorial light gray-white tint */
    border-top: 4px solid var(--text-primary); /* Bold classic newspaper broadtop line */
    padding-top: 4rem;
    padding-bottom: 5.5rem; /* Space for mobile bottom bar */
    transition: background-color var(--transition-normal), border-color var(--transition-normal);
}

body.dark-mode .site-footer {
    background-color: #0b0b0b; /* Extremely rich deep dark mode background */
    border-top-color: var(--border-color);
}

.footer-columns-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-bottom: 3rem;
}

.footer-widget-title {
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0.5rem;
    margin-bottom: 1.25rem;
    position: relative;
    letter-spacing: 0.2px;
}

.footer-widget-title::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 30px;
    height: 2px;
    background-color: var(--color-accent);
}

.footer-widget {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.footer-brand-widget img {
    transition: filter var(--transition-normal);
}

/* Beautiful dynamic round brand social icons follow widget */
.footer-social-links {
    display: flex;
    gap: 0.6rem;
    margin-top: 1.25rem;
}

.footer-social-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50% !important;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    transition: all var(--transition-fast) !important;
    box-shadow: var(--shadow-sm);
}

.footer-social-btn:hover {
    color: #ffffff !important;
    transform: translateY(-3px) scale(1.05);
}

.footer-social-links a.footer-facebook:hover { background-color: #1877f2 !important; border-color: #1877f2 !important; box-shadow: 0 5px 12px rgba(24, 119, 242, 0.3); }
.footer-social-links a.footer-twitter:hover { background-color: #000000 !important; border-color: #000000 !important; box-shadow: 0 5px 12px rgba(0, 0, 0, 0.3); }
.footer-social-links a.footer-linkedin:hover { background-color: #0077b5 !important; border-color: #0077b5 !important; box-shadow: 0 5px 12px rgba(0, 119, 181, 0.3); }
.footer-social-links a.footer-youtube:hover { background-color: #ff0000 !important; border-color: #ff0000 !important; box-shadow: 0 5px 12px rgba(255, 0, 0, 0.3); }
.footer-social-links a.footer-instagram:hover { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important; border-color: transparent !important; box-shadow: 0 5px 12px rgba(220, 39, 67, 0.3); }

.footer-social-btn svg.svg-social {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

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

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

.footer-widget ul li {
    padding: 0.6rem 0;
    border-bottom: 1px dashed var(--border-light);
    transition: border-color var(--transition-fast);
}

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

/* Elegant micro-animated horizontal nudge on link hover */
.footer-widget ul li a {
    transition: color var(--transition-fast), transform var(--transition-fast);
    display: inline-block;
}

.footer-widget ul li a:hover {
    transform: translateX(4px);
}

/* Footer Bottom Area */
.footer-bottom-bar {
    border-top: 1px solid var(--border-color);
    padding-top: 1.5rem;
    font-size: 0.8rem;
    color: var(--text-secondary); /* Increased contrast for WCAG AA compliance */
}

.footer-bottom-bar a {
    color: var(--text-primary);
    transition: color var(--transition-fast);
}

.footer-bottom-bar a:hover {
    color: var(--color-accent);
}

.footer-bottom-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

/* Back to Top button */
.scroll-top-btn {
    position: fixed;
    bottom: 4.5rem;
    right: 1.25rem;
    background-color: var(--bg-primary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
    z-index: 998;
}

.scroll-top-btn i.dashicons,
.scroll-top-btn svg {
    font-size: 20px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin: 0;
    padding: 0;
}

.scroll-top-btn.is-visible {
    opacity: 1;
    visibility: visible;
}

.scroll-top-btn:hover {
    background-color: var(--color-accent);
    color: #ffffff;
    border-color: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* ==========================================
   7B. PWA-STYLE MOBILE BOTTOM NAVIGATION BAR
   ========================================== */
/* ============================================================
   7-B. NEXT-LEVEL PREMIUM MOBILE BOTTOM NAVIGATION BAR
   ============================================================ */

.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 62px;
    background-color: rgba(255, 255, 255, 0.9);
    border-top: 1px solid rgba(0,0,0,0.06);
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    z-index: 9980;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 -2px 24px rgba(0, 0, 0, 0.08), 0 -1px 0 rgba(0,0,0,0.04);
    transition: background-color var(--transition-normal), bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

body.dark-mode .mobile-bottom-nav {
    background-color: rgba(14, 14, 14, 0.92);
    border-top-color: rgba(255,255,255,0.06);
    box-shadow: 0 -2px 24px rgba(0,0,0,0.4), 0 -1px 0 rgba(255,255,255,0.04);
}

/* ==========================================================================
   8. RESPONSIVE GRID LAYOUT SCALING (TABLET & DESKTOP)
   ========================================================================== */
@media (min-width: 768px) {
    h1 { font-size: 2.25rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.35rem; }
    
    /* Layout */
    .container {
        max-width: 720px;
    }
    
    /* Post Cards */
    .timeline-horizontal-card {
        flex-direction: row;
        gap: 1.5rem;
    }
    
    .timeline-horizontal-card .post-thumb-link {
        width: 220px;
        flex-shrink: 0;
    }
    
    /* Lead News Grid */
    .lead-news-grid {
        grid-template-columns: 2fr 1fr;
    }
    
    /* Grid Sub-items */
    .posts-sub-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .category-blocks-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .related-posts-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .footer-columns-wrap {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    /* Layout */
    .container {
        max-width: 1200px;
    }
    
    /* Show Desktop Elements */
    .top-bar,
    .nav-bar {
        display: block;
    }
    
    .mobile-header,
    .mobile-bottom-nav {
        display: none;
    }
    
    .main-header-inner {
        flex-direction: row;
        justify-content: space-between;
    }
    
    .header-ads {
        width: auto;
        max-width: 728px;
    }
    
    .logo-wrapper {
        text-align: left;
    }
    
    /* Newspaper Main Layout Grid */
    .site-main-layout {
        display: grid;
        grid-template-columns: 8fr 4fr;
        gap: 2.5rem;
        margin-bottom: 4rem;
    }
    
    .site-main-layout.full-width {
        grid-template-columns: 1fr;
    }
    
    .site-main-layout.full-width .timeline-horizontal-card .post-thumb-link {
        width: 280px;
    }
    
    .category-blocks-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
    }
    
    .footer-columns-wrap {
        grid-template-columns: 1.35fr 0.9fr 0.9fr 0.85fr;
    }
    
    .footer-bottom-inner {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
    
    .footer-bottom-menu {
        display: flex;
        gap: 1.25rem;
    }
    
    .site-footer {
        padding-bottom: 3.5rem; /* Remove mobile bottom nav offset */
    }
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

/* ==========================================================================
   9. CUSTOM HOMEPAGE WIDGETS & INTUITIVE BUILDER STYLES
   ========================================================================== */

/* Three Column Grid Widget */
.posts-three-column-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .posts-three-column-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.75rem;
    }
}

/* Tabbed Category Widget */
.liveschoolbd-tabbed-widget-wrap {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: background-color var(--transition-normal), border-color var(--transition-normal);
}

.liveschoolbd-tabbed-widget {
    width: 100%;
}

.tabbed-widget-header {
    border-bottom: 2px solid var(--border-light);
    margin-bottom: 1.75rem;
    padding-bottom: 0.25rem;
}

.tabbed-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.tabbed-nav li {
    margin: 0;
}

.tab-trigger {
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-muted);
    padding: 0.5rem 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    transition: color var(--transition-fast);
}

.tab-trigger:hover {
    color: var(--color-accent);
}

.tab-trigger::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--color-accent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--transition-fast);
}

.tab-trigger.active {
    color: var(--color-accent);
}

.tab-trigger.active::after {
    transform: scaleX(1);
}

/* Tab pane transitions */
.tab-pane {
    display: none;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.tab-pane.active {
    display: block;
}

.tab-pane.show {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   10. NEXT-LEVEL SIDEBAR WIDGETS OVERHAUL (BROADSHEET EDITORIAL)
   ========================================================================== */

/* Sidebar Widget Containers */
.sidebar-wrapper .widget {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-sm);
    transition: background-color var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.sidebar-wrapper .widget:hover {
    box-shadow: var(--shadow-md);
}

/* Sidebar Widget Titles */
.sidebar-wrapper .widget-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-primary);
    border-bottom: 2px solid var(--text-primary);
    padding-bottom: 0.65rem;
    margin-bottom: 1.5rem;
    position: relative;
    display: flex;
    align-items: center;
}

body.dark-mode .sidebar-wrapper .widget-title {
    border-bottom-color: var(--border-color);
}

.sidebar-wrapper .widget-title::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 50px;
    height: 2px;
    background-color: var(--color-accent);
}

/* Sidebar Lists: General (Categories, Archives, Pages) */
.sidebar-wrapper .widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-wrapper .widget ul li {
    padding: 0.65rem 0;
    border-bottom: 1px dashed var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95rem;
    font-weight: 500;
}

.sidebar-wrapper .widget ul li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.sidebar-wrapper .widget ul li:first-child {
    padding-top: 0;
}

.sidebar-wrapper .widget ul li a {
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: transform var(--transition-fast), color var(--transition-fast);
}

.sidebar-wrapper .widget ul li a:hover {
    color: var(--color-accent);
    transform: translateX(4px);
}

/* Custom categories count badge inside sidebars */
.sidebar-wrapper .widget ul li {
    color: var(--text-muted);
}

/* Recent Posts Sidebar Widget Overhaul */
.sidebar-wrapper .widget_recent_entries ul li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0.85rem 0;
}

.sidebar-wrapper .widget_recent_entries ul li a {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    transform: none !important;
}

.sidebar-wrapper .widget_recent_entries ul li a:hover {
    color: var(--color-accent);
}

.sidebar-wrapper .widget_recent_entries .post-date {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Search Form Widget - Robust & Next-Level Broadside Pill */
.sidebar-wrapper .search-form,
.sidebar-wrapper .searchform,
.sidebar-wrapper #searchform {
    display: flex !important;
    align-items: center !important;
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 30px !important;
    padding: 0.25rem 0.5rem 0.25rem 1.25rem !important;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.sidebar-wrapper .search-form:focus-within,
.sidebar-wrapper .searchform:focus-within,
.sidebar-wrapper #searchform:focus-within {
    border-color: var(--color-accent) !important;
    box-shadow: 0 0 0 3px var(--color-accent-light) !important;
    background-color: var(--bg-primary) !important;
}

/* Hide legacy helper or screen reader texts cleanly */
.sidebar-wrapper .search-form .screen-reader-text,
.sidebar-wrapper .searchform .screen-reader-text,
.sidebar-wrapper #searchform .screen-reader-text {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    word-wrap: normal !important;
}

/* Handle legacy wrapper labels */
.sidebar-wrapper .search-form label,
.sidebar-wrapper .searchform label,
.sidebar-wrapper #searchform label {
    display: block !important;
    flex-grow: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

/* Inner input field */
.sidebar-wrapper .search-form .search-field,
.sidebar-wrapper .searchform .search-field,
.sidebar-wrapper #searchform .search-field,
.sidebar-wrapper .search-form input[type="search"],
.sidebar-wrapper .searchform input[type="search"],
.sidebar-wrapper #searchform input[type="search"],
.sidebar-wrapper .searchform input[type="text"],
.sidebar-wrapper #searchform input[type="text"] {
    border: none !important;
    background: none !important;
    padding: 0.5rem 0 !important;
    width: 100% !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    color: var(--text-primary) !important;
    outline: none !important;
    font-family: var(--font-body) !important;
    box-shadow: none !important;
}

/* Clean up input padding under Firefox & Safari */
.sidebar-wrapper .search-form input[type="search"]::-webkit-search-cancel-button,
.sidebar-wrapper .searchform input[type="search"]::-webkit-search-cancel-button,
.sidebar-wrapper #searchform input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

/* Upgraded rounded submit button */
.sidebar-wrapper .search-form .search-submit,
.sidebar-wrapper .searchform .search-submit,
.sidebar-wrapper #searchform .search-submit,
.sidebar-wrapper .search-form input[type="submit"],
.sidebar-wrapper .searchform input[type="submit"],
.sidebar-wrapper #searchform input[type="submit"] {
    background-color: var(--color-accent) !important;
    border: none !important;
    color: #fff !important;
    cursor: pointer !important;
    padding: 0.5rem 1.25rem !important;
    border-radius: 20px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: background-color var(--transition-fast), transform var(--transition-fast) !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    height: auto !important;
    line-height: 1.2 !important;
}

.sidebar-wrapper .search-form .search-submit:hover,
.sidebar-wrapper .searchform .search-submit:hover,
.sidebar-wrapper #searchform .search-submit:hover,
.sidebar-wrapper .search-form input[type="submit"]:hover,
.sidebar-wrapper .searchform input[type="submit"]:hover,
.sidebar-wrapper #searchform input[type="submit"]:hover {
    background-color: var(--color-accent-hover) !important;
    transform: translateY(-1px) !important;
}

/* Category & Archive Post Count Badge */
.post-count-badge {
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.65rem;
    border-radius: 20px;
    border: 1px solid var(--border-light);
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    display: inline-block;
    min-width: 1.5rem;
    text-align: center;
    margin-left: 0.5rem;
}

.sidebar-wrapper .widget ul li:hover .post-count-badge {
    background-color: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}

/* Tag Cloud Widget */
.sidebar-wrapper .tagcloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sidebar-wrapper .tagcloud a {
    font-size: 0.75rem !important; /* Forces consistent beautiful tags */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-light);
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    transition: all var(--transition-fast);
}

.sidebar-wrapper .tagcloud a:hover {
    color: #fff;
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px var(--color-accent-light);
}

/* Calendar Widget */
.sidebar-wrapper .widget_calendar table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.sidebar-wrapper .widget_calendar caption {
    font-family: var(--font-heading);
    font-weight: 700;
    padding: 0.5rem 0;
    border-bottom: 2px solid var(--border-light);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.sidebar-wrapper .widget_calendar th,
.sidebar-wrapper .widget_calendar td {
    padding: 0.5rem;
    text-align: center;
}

.sidebar-wrapper .widget_calendar th {
    font-weight: 700;
    color: var(--text-secondary);
}

.sidebar-wrapper .widget_calendar td#today {
    background-color: var(--color-accent);
    color: #fff;
    font-weight: 700;
    border-radius: 4px;
}

/* ==========================================================================
   11. MULTI-PLATFORM STICKY MENUBAR & ACTIONS STYLING
   ========================================================================== */

.sticky-nav-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto; /* Push actions to the absolute right side */
    flex-shrink: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

/* Hide action controls unless the navbar is sticky (active scroll state) */
.nav-bar:not(.is-sticky) .sticky-nav-actions {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.nav-bar.is-sticky .sticky-nav-actions {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Style the buttons inside the sticky action bar */
.sticky-action-btn,
.sticky-theme-btn,
.sticky-hamburger {
    background: none !important;
    border: none !important;
    outline: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50% !important;
    color: var(--text-primary) !important;
    transition: all var(--transition-fast) !important;
    padding: 0 !important;
}

.sticky-action-btn:hover,
.sticky-theme-btn:hover,
.sticky-hamburger:hover {
    background-color: var(--bg-secondary) !important;
    color: var(--color-accent) !important;
}

/* Make sure B/W toggler sun/moon works inside sticky bar too */
.sticky-theme-btn .sun-icon { display: none; }
.sticky-theme-btn .moon-icon { display: block; }
body.dark-mode .sticky-theme-btn .sun-icon { display: block; }
body.dark-mode .sticky-theme-btn .moon-icon { display: none; }

/* Sticky hamburger bars */
.sticky-hamburger {
    flex-direction: column !important;
    justify-content: space-around !important;
    width: 2rem !important;
    height: 2rem !important;
    padding: 0.5rem !important;
}
.sticky-hamburger span {
    width: 100% !important;
    height: 2px !important;
    background-color: var(--text-primary) !important;
    transition: background-color var(--transition-normal) !important;
}
.sticky-hamburger:hover span {
    background-color: var(--color-accent) !important;
}

/* Mobile swipeable categories + locked actions menu on the right */
@media (max-width: 1023px) {
    .nav-bar-inner {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: 0 0.5rem !important;
        gap: 0.5rem !important;
    }
    
    .nav-bar-inner .primary-menu {
        flex-grow: 1 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin-right: 0 !important;
    }
    
    .nav-bar.is-sticky .sticky-nav-actions {
        display: flex !important;
        border-left: 1px solid var(--border-light);
        padding-left: 0.5rem;
    }
}

/* ==========================================================================
   12. POST SHARE STORY ACTION BUG FIX (BLACK BORDERS CLEAR)
   ========================================================================== */
.share-btn {
    border: none !important;
    outline: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    box-shadow: var(--shadow-sm) !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

.share-btn i.dashicons {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}

/* ==========================================================================
   13. NEXT-LEVEL FULL-SCREEN SEARCH OVERLAY (GLASSMORPHISM)
   ========================================================================== */
.search-fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

body.dark-mode .search-fullscreen-overlay {
    background-color: rgba(18, 18, 18, 0.97);
}

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

/* Body lock on search active */
body.search-active {
    overflow: hidden !important;
}

/* Close Button */
.search-close-btn {
    position: absolute;
    top: 2rem;
    right: 2rem;
    background: none !important;
    border: none !important;
    font-size: 3.5rem;
    line-height: 1;
    color: var(--text-primary);
    cursor: pointer;
    transition: color var(--transition-fast), transform var(--transition-fast), background-color var(--transition-fast) !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50% !important;
    box-shadow: none !important;
}

.search-close-btn:hover {
    color: var(--color-accent);
    transform: rotate(90deg);
    background-color: var(--bg-secondary) !important;
}

/* Main Form Content Container */
.search-fullscreen-content {
    width: 100%;
    max-width: 800px;
    padding: 2rem;
    text-align: center;
    transform: translateY(30px) scale(0.95);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.search-fullscreen-overlay.is-active .search-fullscreen-content {
    transform: translateY(0) scale(1);
}

/* Search Form Inputs */
.search-fullscreen-form {
    width: 100%;
    margin-bottom: 2.5rem;
}

.search-input-wrap {
    display: flex;
    align-items: center;
    border-bottom: 3px solid var(--text-primary);
    padding: 0.5rem 0;
    transition: border-color var(--transition-normal);
    position: relative;
}

body.dark-mode .search-input-wrap {
    border-bottom-color: var(--border-color);
}

.search-input-wrap:focus-within {
    border-bottom-color: var(--color-accent);
}

.search-fullscreen-overlay .search-field-input {
    width: 100%;
    background: none !important;
    border: none !important;
    outline: none !important;
    font-family: var(--font-heading);
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--text-primary);
    padding: 0.5rem 1rem 0.5rem 0 !important;
    box-shadow: none !important;
}

.search-fullscreen-overlay .search-field-input::placeholder {
    color: var(--text-muted);
    font-weight: 500;
}

/* Mobile responsive scaling */
@media (max-width: 767px) {
    .search-fullscreen-overlay .search-field-input {
        font-size: 1.45rem;
    }
    .search-close-btn {
        top: 1rem;
        right: 1rem;
        font-size: 2.5rem;
        width: 3rem;
        height: 3rem;
    }
}

.search-submit-btn {
    background: none !important;
    border: none !important;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem !important;
    transition: color var(--transition-fast), transform var(--transition-fast) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: none !important;
}

.search-submit-btn:hover {
    color: var(--color-accent);
    transform: scale(1.1);
}

.search-submit-btn svg {
    width: 2.25rem;
    height: 2.25rem;
}

@media (max-width: 767px) {
    .search-submit-btn svg {
        width: 1.75rem;
        height: 1.75rem;
    }
}

/* Suggestion Tags */
.search-suggestions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    animation: fadeIn var(--transition-normal) 0.2s forwards;
    opacity: 0;
}

.search-fullscreen-overlay.is-active .search-suggestions {
    opacity: 1;
}

.suggestion-title {
    font-size: 0.95rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
}

.suggestion-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.suggestion-tags a {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-secondary);
    background-color: var(--bg-secondary);
    padding: 0.55rem 1.35rem;
    border-radius: 30px;
    transition: all var(--transition-fast);
    border: 1px solid var(--border-color);
}

.suggestion-tags a:hover {
    color: #fff;
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px var(--color-accent-light);
}

/* ==========================================================================
   14. MASTER TRIPLE COLUMN BROADSHEET GRID (ASYNCHRONOUS EDITORIAL)
   ========================================================================== */
.triple-broadsheet-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.25rem;
    margin-bottom: 3.5rem;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 2.5rem;
    transition: border-color var(--transition-normal);
}

body.dark-mode .triple-broadsheet-grid {
    border-bottom-color: var(--border-color);
}

/* Tablet (2 columns) */
@media (min-width: 768px) and (max-width: 1023px) {
    .triple-broadsheet-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .hero-column {
        grid-column: span 2;
        border-bottom: 1px dashed var(--border-light);
        padding-bottom: 2rem;
    }
}

/* Desktop (3 columns - asymmetric width matching the drawing!) */
@media (min-width: 1024px) {
    .triple-broadsheet-grid {
        display: grid !important;
        grid-template-columns: 1fr 1.35fr 1fr !important; /* Center column is wider and matches the drawing! */
        gap: 1.75rem !important;
    }
    
    /* Elegant broadsheet vertical divider borders between columns */
    .broadsheet-column:not(:last-child) {
        border-right: 1px solid var(--border-light);
        padding-right: 1.5rem;
    }
}

/* Mobile Stacking Order ("phone er jonne best"!) */
@media (max-width: 1023px) {
    .triple-broadsheet-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 2.5rem !important;
    }
    
    /* Force Center Hero Column to the absolute top of the phone screen */
    .left-column { order: 2 !important; }
    .center-column { order: 1 !important; } 
    .right-column { order: 3 !important; }
    
    .broadsheet-column {
        border-right: none !important;
        padding-right: 0 !important;
        border-bottom: 2px solid var(--border-light);
        padding-bottom: 2rem;
    }
    .broadsheet-column:last-child {
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }
}

.broadsheet-column {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Column Headers */
.broadsheet-column-header {
    border-bottom: 2px solid var(--text-primary);
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    position: relative;
    transition: border-color var(--transition-normal);
}

body.dark-mode .broadsheet-column-header {
    border-bottom-color: var(--border-color);
}

.broadsheet-column-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    margin-bottom: 0;
    color: var(--text-primary);
    display: flex;
    align-items: center;
}

.broadsheet-column-title a {
    color: var(--text-primary);
    position: relative;
}

.broadsheet-column-title a::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 35px;
    height: 2px;
    background-color: var(--color-accent);
}

/* 1. Center Column Lead Highlight Post on top */
.broadsheet-lead-post {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    border-bottom: 1px dashed var(--border-light);
    padding-bottom: 1.25rem;
    transition: border-color var(--transition-normal);
}

.broadsheet-lead-post .post-thumb-link {
    aspect-ratio: 16 / 9;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.broadsheet-lead-title {
    font-size: 1.25rem;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: -0.3px;
    margin-top: 0.25rem;
}

/* 2. Smaller Mini List Posts below */
.broadsheet-list-posts {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.broadsheet-mini-card {
    display: flex !important;
    gap: 0.85rem;
    border-bottom: 1px dashed var(--border-light) !important;
    padding-bottom: 0.85rem !important;
    align-items: center;
    background: none !important;
    border-radius: 0 !important;
    transition: transform var(--transition-fast), background-color var(--transition-fast);
}

.broadsheet-mini-card:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.broadsheet-mini-card .post-thumb-link {
    width: 90px;
    height: 60px;
    flex-shrink: 0;
    aspect-ratio: auto;
    border-radius: 4px;
}

.mini-card-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.15rem;
}

.broadsheet-mini-title {
    font-size: 0.925rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 0;
}

.broadsheet-mini-title a {
    color: var(--text-primary);
}

.broadsheet-mini-title a:hover {
    color: var(--color-accent);
}

.broadsheet-mini-card:hover {
    transform: translateX(4px);
}

/* ==========================================================================
   12. CATEGORY-WISE EDITORIAL SHOWCASE GRID (BOTTOM HOMEPAGE)
   ========================================================================== */

/* Mobile-first base layout (Stacked rows) */
.homepage-categories-editorial-grid {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    margin-top: 1.5rem;
    margin-bottom: 3.5rem;
}

.editorial-cat-block {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-top: 4px solid var(--cat-accent-color);
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.editorial-cat-block:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* Category header styled beautifully */
.editorial-cat-header {
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 0.75rem;
    margin-bottom: 1.25rem;
}

.editorial-cat-title {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0;
    text-transform: uppercase;
}

.editorial-cat-title a {
    color: var(--cat-accent-color);
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

.editorial-cat-title a:hover {
    opacity: 0.85;
}

/* Main featured card in each category block */
.cat-featured-card {
    margin-bottom: 1.25rem;
}

.cat-featured-thumb {
    display: block;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 0.85rem;
    aspect-ratio: 16/9;
    background-color: var(--bg-secondary);
}

.cat-featured-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.cat-featured-card:hover .cat-featured-thumb img {
    transform: scale(1.04);
}

.cat-featured-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-bottom: 0.4rem;
}

.cat-featured-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 0.6rem;
}

.cat-featured-title a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

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

.cat-featured-excerpt {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 0;
}

/* Secondary list links in each category block */
.cat-list-posts {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    border-top: 1px solid var(--border-light);
    padding-top: 1.25rem;
}

.cat-list-item {
    border-bottom: 1px dashed var(--border-light);
    padding-bottom: 0.75rem;
}

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

.cat-list-link {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
    transition: color var(--transition-fast);
}

.cat-list-bullet {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--cat-accent-color);
    flex-shrink: 0;
    margin-top: 0.5rem;
    transition: transform var(--transition-fast);
}

.cat-list-item:hover .cat-list-link {
    color: var(--cat-accent-color);
}

.cat-list-item:hover .cat-list-bullet {
    transform: scale(1.4);
}

/* Dark mode tweaks */
body.dark-mode .editorial-cat-block {
    background-color: #161616;
}

/* Tablet & PC professional layout (Side-by-side grids) */
@media (min-width: 768px) {
    .homepage-categories-editorial-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
    }
}

@media (min-width: 1024px) {
    .homepage-categories-editorial-grid {
        gap: 3rem;
        margin-top: 2rem;
        margin-bottom: 4rem;
    }
    
    .cat-featured-title {
        font-size: 1.25rem;
    }
}

/* ==========================================================================
   13. NEXT-LEVEL NEWS CATEGORY SECTIONS (STYLE-MATCHING NEWSPAPER GRID)
   ========================================================================== */

/* General Category Title Bullets (Matches Prothom Alo Bullet Style) */
.broadsheet-category-section .editorial-cat-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.broadsheet-category-section .editorial-cat-title::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: var(--cat-accent-color);
    flex-shrink: 0;
}

/* --- STYLE 1: BROADCLASS NATIONAL GRID (Matches Screenshot 1) --- */
.broadsheet-national-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.national-main-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.national-middle-feed {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

/* New Left Column Sub-list of small posts underneath the hero post */
.national-left-sub-list {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    border-top: 2px solid var(--border-light);
    padding-top: 1.25rem;
}

.national-sub-item {
    border-bottom: 1px dashed var(--border-light);
    padding-bottom: 0.75rem;
    transition: transform var(--transition-fast);
}

.national-sub-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.national-sub-item:hover {
    transform: translateX(4px);
}

.national-sub-title {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.45;
    margin: 0 0 0.25rem 0;
}

.national-sub-title a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.national-sub-title a:hover {
    color: var(--color-accent);
}

.national-sub-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.national-sidebar-feed {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 1.5rem;
}

.national-sidebar-tabs {
    display: flex;
    border-bottom: 2px solid var(--border-light);
    margin-bottom: 1.25rem;
    gap: 1rem;
}

.national-sidebar-tabs span {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-secondary); /* Upgraded for high contrast */
    padding-bottom: 0.5rem;
    cursor: pointer;
    position: relative;
}

.national-sidebar-tabs .active-tab {
    color: #0f4c81; /* High contrast deep sapphire */
}
body.dark-mode .national-sidebar-tabs .active-tab {
    color: #3b82f6; /* High visibility blue for dark mode */
}

.national-sidebar-tabs .active-tab::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-accent);
}

.national-sidebar-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.national-sidebar-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 0.85rem;
    transition: transform var(--transition-fast);
}

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

.national-sidebar-item:hover {
    transform: translateX(4px);
}

.national-item-number {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-secondary); /* Darker gray for WCAG AA compliance */
    width: 20px;
    flex-shrink: 0;
    opacity: 0.85; /* Increased opacity to fully resolve contrast warning */
}

.national-item-content {
    flex-grow: 1;
}

.national-item-title {
    font-family: var(--font-heading);
    font-size: 0.925rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
}

.national-item-title a {
    color: var(--text-primary);
    text-decoration: none;
}

.national-item-title a:hover {
    color: var(--color-accent);
}

.national-item-thumb {
    width: 60px;
    height: 45px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
    background-color: var(--bg-secondary);
}

.national-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.national-more-btn {
    display: block;
    width: 100%;
    text-align: center;
    background-color: #0091ea;
    color: #fff !important;
    text-decoration: none;
    padding: 0.65rem;
    border-radius: 4px;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 1.5rem;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.national-more-btn:hover {
    background-color: #00b0ff;
    transform: translateY(-1px);
}

.national-more-btn {
    display: block;
    width: 100%;
    text-align: center;
    background-color: var(--color-accent);
    color: #fff !important;
    text-decoration: none;
    padding: 0.65rem;
    border-radius: 4px;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 1.5rem;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.national-more-btn:hover {
    background-color: var(--color-accent-hover, #0056b3);
    transform: translateY(-1px);
}

.national-hero-thumb {
    display: block;
    aspect-ratio: 16/9;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 1rem;
    background-color: var(--bg-secondary);
}

.national-hero-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.national-hero-card:hover .national-hero-thumb img {
    transform: scale(1.03);
}

.national-hero-title {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.35;
    margin-top: 0;
    margin-bottom: 0.6rem;
}

.national-hero-title a {
    color: var(--text-primary);
    text-decoration: none;
}

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

.national-hero-excerpt {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.national-middle-card {
    margin-bottom: 1rem;
}

.national-middle-thumb {
    display: block;
    aspect-ratio: 16/10;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
    background-color: var(--bg-secondary);
}

.national-middle-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.national-middle-card:hover .national-middle-thumb img {
    transform: scale(1.03);
}

.national-middle-title {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
}

.national-middle-title a {
    color: var(--text-primary);
    text-decoration: none;
}

.national-middle-title a:hover {
    color: var(--cat-accent-color);
}


/* --- STYLE 2: 4-COLUMN HORIZONTAL GRID (Matches Screenshot 2) --- */
.broadsheet-capital-row {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.capital-card {
    display: flex;
    flex-direction: column;
}

.capital-thumb {
    display: block;
    aspect-ratio: 16/10;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.75rem;
    background-color: var(--bg-secondary);
}

.capital-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.capital-card:hover .capital-thumb img {
    transform: scale(1.03);
}

.capital-title {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.capital-title a {
    color: var(--text-primary);
    text-decoration: none;
}

.capital-title a:hover {
    color: var(--cat-accent-color);
}

.capital-excerpt {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}


/* --- STYLE 3: ASYMMETRIC SPORTS GRID (Matches Screenshot 3) --- */
.broadsheet-uni-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.uni-main-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.uni-left-column-group {
    display: flex;
    flex-direction: column;
}

.uni-hero-card {
    display: flex;
    flex-direction: column;
}

.uni-hero-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.85rem;
    background-color: var(--bg-secondary);
}

.uni-hero-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.uni-hero-card:hover .uni-hero-thumb img {
    transform: scale(1.03);
}

.uni-hero-title {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.35;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.uni-hero-title a {
    color: var(--text-primary);
    text-decoration: none;
}

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

.uni-hero-excerpt {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.uni-left-sub-list {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    border-top: 2px solid var(--border-light);
    padding-top: 1.25rem;
}

.uni-sub-item {
    padding-bottom: 0.85rem;
    border-bottom: 1px dashed var(--border-light);
}

.uni-sub-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.uni-sub-title {
    font-family: var(--font-heading);
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 0.35rem;
}

.uni-sub-title a {
    color: var(--text-primary);
    text-decoration: none;
}

.uni-sub-title a:hover {
    color: var(--cat-accent-color);
}

.uni-sub-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Center & Right stacked box card feeds */
.uni-middle-feed,
.uni-right-sidebar-feed {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.uni-middle-card {
    display: flex;
    flex-direction: column;
}

.uni-middle-thumb {
    display: block;
    aspect-ratio: 16/10;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.6rem;
    background-color: var(--bg-secondary);
}

.uni-middle-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.uni-middle-card:hover .uni-middle-thumb img {
    transform: scale(1.03);
}

.uni-middle-title {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
}

.uni-middle-title a {
    color: var(--text-primary);
    text-decoration: none;
}

.uni-middle-title a:hover {
    color: var(--cat-accent-color);
}



/* --- RESPONSIVE MEDIA QUERIES FOR SIDE-BY-SIDE PC PROFESSIONAL VIEWS --- */

/* Tablet & Smaller Desktop Viewports (768px and above) */
@media (min-width: 768px) {
    .broadsheet-capital-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
    
    .capital-card {
        border-bottom: none;
        padding-bottom: 0;
    }
    
    .uni-middle-feed,
    .uni-right-sidebar-feed {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Full Broadsheet PC Professional viewports (1024px and above) */
@media (min-width: 1024px) {
    .broadsheet-national-grid {
        display: grid;
        grid-template-columns: 8.5fr 3.5fr;
        gap: 2.5rem;
    }
    
    .national-main-content {
        display: grid;
        grid-template-columns: 1.8fr 1fr;
        gap: 2rem;
        border-right: 1px solid var(--border-light);
        padding-right: 2rem;
    }
    
    .national-middle-feed {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .national-sidebar-feed {
        background: none;
        border: none;
        padding: 0;
    }
    
    .broadsheet-capital-row {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.75rem;
    }
    
    .capital-card {
        border-right: 1px solid var(--border-light);
        padding-right: 1.75rem;
    }
    
    .capital-card:nth-child(4n) {
        border-right: none;
        padding-right: 0;
    }
    
    .broadsheet-uni-grid {
        display: grid;
        grid-template-columns: 8.5fr 3.5fr;
        gap: 2.5rem;
    }
    
    .uni-main-content {
        display: grid;
        grid-template-columns: 1.8fr 1fr;
        gap: 2rem;
        border-right: 1px solid var(--border-light);
        padding-right: 2rem;
    }
    
    .uni-middle-feed,
    .uni-right-sidebar-feed {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .uni-middle-feed {
        border-right: 1px solid var(--border-light);
        padding-right: 2rem;
    }
}

/* Dark mode overrides for category cards */
body.dark-mode .national-sidebar-feed {
    background-color: #121212;
}

body.dark-mode .liveschoolbd-empty-posts-fallback {
    background-color: #1a1a1a !important;
}

/* Premium category "আরও পড়ুন" button styles */
.category-read-more-wrapper {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-light);
    width: 100%;
}

.category-read-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--btn-color, var(--color-accent));
    text-decoration: none;
    background-color: transparent;
    border: 1.5px solid var(--btn-color, var(--color-accent));
    padding: 7px 18px;
    border-radius: 30px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.category-read-more-btn span {
    display: inline-block;
}

.category-read-more-btn svg {
    width: 14px;
    height: 14px;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-read-more-btn:hover {
    background-color: var(--btn-color, var(--color-accent));
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.category-read-more-btn:hover svg {
    transform: translateX(4px);
}

/* Dark mode compatibility */
body.dark-mode .category-read-more-wrapper {
    border-top-color: #2a2a2a;
}

/* ==========================================================================
   14. ULTRA-PREMIUM HORIZONTAL WEB STORIES STRIP
   ========================================================================== */
.web-stories-section {
    width: 100%;
}

.web-stories-scroll-container {
    overflow-x: auto;
    scrollbar-width: none; /* Hide scrollbar Firefox */
    -ms-overflow-style: none; /* Hide scrollbar IE */
    display: flex;
    padding: 0.5rem 0.1rem 1rem;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}

.web-stories-scroll-container::-webkit-scrollbar {
    display: none; /* Hide scrollbar Chrome/Safari */
}

.web-stories-track {
    display: flex;
    gap: 1.25rem;
}

.web-story-card {
    flex: 0 0 150px;
    width: 150px;
    aspect-ratio: 9/16;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    border: 2px solid transparent;
    background-color: var(--bg-secondary);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease;
    text-decoration: none;
    display: block;
}

.web-story-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16);
    border-color: #e91e63;
}

.story-image-wrap {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
    transition: transform 0.5s ease;
}

.web-story-card:hover .story-image-wrap {
    transform: scale(1.05);
}

.story-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 100%);
    z-index: 1;
}

.story-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    width: 38px;
    height: 38px;
    background-color: rgba(233, 30, 99, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
    box-shadow: 0 4px 10px rgba(233, 30, 99, 0.4);
}

.web-story-card:hover .story-play-icon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.story-meta {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.85rem;
    z-index: 2;
}

.story-title {
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.35;
    color: #ffffff;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.liveschoolbd-empty-stories-fallback {
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.liveschoolbd-empty-stories-fallback:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

@media (min-width: 768px) {
    .web-story-card {
        flex: 0 0 160px;
        width: 160px;
    }
    
    .story-title {
        font-size: 0.85rem;
    }
}

/* ==========================================================================
   15. NEXT-LEVEL MULTILINGUAL DATE ROTATOR
   ========================================================================== */
.header-date-rotator {
    display: inline-grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    align-items: center;
    overflow: hidden;
    height: 30px;
}

.rotator-item {
    grid-area: 1 / 1 / 2 / 2;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    display: flex;
    align-items: center;
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-family: var(--font-heading);
}

.rotator-item.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.rotator-item i {
    color: var(--color-accent) !important;
}

/* Dark Mode Synergy */
body.dark-mode .rotator-item {
    color: var(--text-muted);
}

/* Mobile Alignment adjustments */
@media (max-width: 1023px) {
    .header-mobile-widgets .header-date-rotator {
        width: 100%;
        justify-content: center;
        justify-items: center;
    }
    
    .header-mobile-widgets .rotator-item {
        font-size: 0.75rem;
        justify-content: center;
        text-align: center;
    }
}

/* Premium Newspaper Post Thumbnail Placeholders */
.post-placeholder-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--bg-secondary) 30%, var(--border-light) 90%);
    color: var(--text-muted);
    transition: background var(--transition-normal);
    overflow: hidden;
}

/* Enforce position: relative and overflow: hidden on all thumbnail wrappers to support absolute child placeholders */
.post-thumb-link,
.ap-card-thumb,
.cat-featured-thumb,
.national-item-thumb,
.national-hero-thumb,
.national-middle-thumb,
.capital-thumb,
.uni-hero-thumb,
.uni-middle-thumb,
.broadsheet-lead-post .post-thumb-link,
.broadsheet-mini-card .post-thumb-link,
.sidebar-item-thumb {
    position: relative !important;
    overflow: hidden !important;
}

.post-placeholder-thumb i {
    font-size: 32px;
    opacity: 0.45;
    transition: transform var(--transition-normal), opacity var(--transition-normal);
}

.post-thumb-link:hover .post-placeholder-thumb i,
.national-hero-thumb:hover .post-placeholder-thumb i,
.national-middle-thumb:hover .post-placeholder-thumb i,
.national-item-thumb:hover .post-placeholder-thumb i,
.capital-thumb:hover .post-placeholder-thumb i,
.sports-hero-thumb:hover .post-placeholder-thumb i,
.sports-horizontal-thumb:hover .post-placeholder-thumb i,
.sports-middle-thumb:hover .post-placeholder-thumb i,
.sports-mini-sidebar-thumb:hover .post-placeholder-thumb i {
    transform: scale(1.15);
    opacity: 0.8;
}

/* ==========================================================================
   25. DYNAMIC CUSTOMIZABLE ADVERTISEMENT STYLING
   ========================================================================== */
.liveschoolbd-ad-wrapper {
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: 1.5rem 0;
    margin: 2rem 0;
    text-align: center;
    position: relative;
    transition: background-color var(--transition-normal);
}

.liveschoolbd-ad-wrapper.ad-slot-header {
    margin-top: 0;
    margin-bottom: 2rem;
    background-color: var(--bg-primary);
    border-top: none;
}

.liveschoolbd-ad-wrapper.ad-slot-single {
    margin: 1.5rem 0;
    padding: 1rem 0;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

.liveschoolbd-ad-wrapper .ad-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    position: relative;
}

.liveschoolbd-ad-wrapper .ad-label {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    font-family: var(--font-primary);
}

.liveschoolbd-ad-wrapper .ad-image-inner img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.liveschoolbd-ad-wrapper .ad-image-inner a {
    display: inline-block;
    max-width: 100%;
}

.liveschoolbd-ad-wrapper .ad-image-inner a:hover img {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
}

.liveschoolbd-ad-wrapper .ad-code-inner {
    display: inline-block;
    max-width: 100%;
    overflow: auto;
    vertical-align: middle;
}

/* Specific Slot Sizes/Margins Adjustments */
.ad-slot-header .ad-image-inner img {
    max-height: 90px;
}

.ad-slot-home_mid .ad-image-inner img {
    max-height: 120px;
}

.ad-slot-single .ad-image-inner img {
    max-height: 250px;
}

/* Skyscraper Wallpaper Gutter Ads (Left & Right margins) */
.liveschoolbd-ad-wrapper.ad-slot-gutter_left,
.liveschoolbd-ad-wrapper.ad-slot-gutter_right {
    position: absolute;
    top: 180px;
    width: 120px;
    height: 600px;
    padding: 0.5rem 0;
    margin: 0;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    z-index: 10;
}

.liveschoolbd-ad-wrapper.ad-slot-gutter_left {
    left: calc(50% - 600px - 140px); /* Centers relative to the 1200px container */
}

.liveschoolbd-ad-wrapper.ad-slot-gutter_right {
    right: calc(50% - 600px - 140px); /* Centers relative to the 1200px container */
}

/* Hide on screens narrower than 1480px to prevent overlapping content */
@media screen and (max-width: 1480px) {
    .liveschoolbd-ad-wrapper.ad-slot-gutter_left,
    .liveschoolbd-ad-wrapper.ad-slot-gutter_right {
        display: none !important;
    }
}

/* Premium Default Placeholder styling */
.ad-placeholder-default {
    padding: 1.25rem;
    border: 2px dashed var(--border-color);
    border-radius: 6px;
    background-color: var(--bg-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.liveschoolbd-ad-wrapper:hover .ad-placeholder-default {
    border-color: var(--color-accent);
    background-color: var(--bg-secondary);
}

.ad-placeholder-badge {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    background-color: var(--bg-secondary);
    color: var(--color-accent);
    padding: 0.25rem 0.6rem;
    border-radius: 12px;
    margin-bottom: 0.5rem;
    border: 1px solid var(--border-color);
    letter-spacing: 0.05em;
}

.ad-placeholder-text {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.35rem;
    font-family: var(--font-primary);
}

.ad-placeholder-size {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.ad-placeholder-contact {
    font-size: 0.7rem;
    color: var(--color-accent);
    font-weight: 600;
    font-family: var(--font-primary);
    border-top: 1px solid var(--border-color);
    padding-top: 0.35rem;
    width: 100%;
    text-align: center;
}

/* Specific slot sizing tweaks for default placeholders */
.ad-slot-header .ad-placeholder-default,
.ad-slot-home_mid .ad-placeholder-default {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.5rem;
    min-height: 60px;
    max-width: 728px;
    margin: 0 auto;
}

.ad-slot-home_mid .ad-placeholder-default {
    max-width: 970px;
}

.ad-slot-header .ad-placeholder-flex,
.ad-slot-home_mid .ad-placeholder-flex {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-grow: 1;
}

.ad-slot-header .ad-placeholder-contact,
.ad-slot-home_mid .ad-placeholder-contact {
    width: auto;
    border-top: none;
    padding-top: 0;
    margin-left: auto;
}

.ad-slot-header .ad-placeholder-text,
.ad-slot-home_mid .ad-placeholder-text {
    margin-bottom: 0;
    font-size: 0.85rem;
}

.ad-slot-header .ad-placeholder-badge,
.ad-slot-home_mid .ad-placeholder-badge {
    margin-bottom: 0;
}

.ad-slot-header .ad-placeholder-size,
.ad-slot-home_mid .ad-placeholder-size {
    margin-bottom: 0;
    font-size: 0.7rem;
}

/* Skyscraper vertical ad defaults */
.ad-slot-gutter_left .ad-placeholder-default,
.ad-slot-gutter_right .ad-placeholder-default {
    height: 560px;
    border: none;
    background: transparent;
    padding: 0.5rem;
}

.ad-slot-gutter_left .ad-placeholder-text,
.ad-slot-gutter_right .ad-placeholder-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 0.1em;
    margin: 1.5rem 0;
    font-size: 1.1rem;
    color: var(--text-muted);
}

/* Make single post sidebar ad sticky to optimize empty gutter space */
@media screen and (min-width: 1024px) {
    .single-post-sidebar .liveschoolbd-ad-wrapper.ad-slot-single {
        position: -webkit-sticky;
        position: sticky;
        top: 95px; /* Sits below sticky navigation */
        margin-top: 2rem;
        z-index: 5;
        border: 1px solid var(--border-color);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
        background-color: var(--bg-secondary);
        border-radius: 6px;
        transition: top var(--transition-normal);
    }
}

/* Styles for Category Showcase Sidebar Ad slots */
.liveschoolbd-ad-wrapper.ad-slot-showcase_right {
    margin-top: 1.5rem;
    margin-bottom: 0;
    padding: 1rem 0;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.liveschoolbd-ad-wrapper.ad-slot-showcase_right .ad-placeholder-default {
    border-color: var(--border-color);
}


/* ==========================================
   ANCHOR / STICKY BOTTOM BAR ADVERTISEMENT
   ========================================== */

.liveschoolbd-anchor-ad {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9990;
    background: var(--bg-primary);
    border-top: 2px solid var(--accent-color);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 40px 6px 12px;
    min-height: 60px;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
}

/* Push mobile bottom nav above anchor ad (Only when active and not dismissed) */
@media screen and (max-width: 767px) {
    .liveschoolbd-anchor-ad:not(.anchor-ad-hidden) ~ .mobile-bottom-nav {
        bottom: calc(75px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* Push floating scroll-top button above anchor ad */
.scroll-top-btn {
    bottom: calc(70px + env(safe-area-inset-bottom, 0px));
}

@media screen and (min-width: 768px) {
    .scroll-top-btn {
        bottom: 80px;
    }
}

.liveschoolbd-anchor-ad.anchor-ad-hidden {
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
}

/* Close (X) button */
.anchor-ad-close {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-left: 1px solid var(--border-color);
    cursor: pointer;
    color: var(--text-muted);
    padding: 0;
    transition: background-color 0.2s ease, color 0.2s ease;
    border-radius: 0;
}

.anchor-ad-close:hover {
    background-color: rgba(255, 0, 0, 0.08);
    color: #e53e3e;
}

/* "বিজ্ঞাপন" label badge */
.anchor-ad-label {
    position: absolute;
    top: 3px;
    left: 8px;
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
    opacity: 0.7;
}

/* Inner content wrapper */
.anchor-ad-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    max-width: 970px;
    min-height: 50px;
    overflow: hidden;
}

.anchor-ad-inner img.anchor-ad-img {
    max-height: 90px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    display: block;
}

/* Premium fallback placeholder */
.anchor-ad-placeholder {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 4px 0;
    justify-content: center;
}

.anchor-ad-placeholder-badge {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background: var(--accent-color);
    padding: 3px 8px;
    border-radius: 3px;
    flex-shrink: 0;
}

.anchor-ad-placeholder-text {
    font-size: 0.82rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.anchor-ad-placeholder-contact {
    font-size: 0.75rem;
    color: var(--accent-color);
    font-weight: 600;
    flex-shrink: 0;
}

/* Dark mode adjustments */
.dark-mode .liveschoolbd-anchor-ad {
    box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
}

/* On desktop, don't let anchor ad overlap content excessively — keep it slim */
@media screen and (min-width: 768px) {
    .liveschoolbd-anchor-ad {
        padding: 4px 44px 4px 16px;
        min-height: 66px;
    }

    .anchor-ad-close {
        width: 44px;
    }
}

/* Safe area inset support for notched phones */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .liveschoolbd-anchor-ad {
        padding-bottom: calc(6px + env(safe-area-inset-bottom));
    }
}

/* ============================================================
   NEXT-LEVEL PREMIUM MOBILE BOTTOM FLOATING DOCK (PILL STYLE)
   ============================================================ */
.mobile-bottom-nav {
    position: fixed;
    bottom: 1.25rem !important; /* Float elegantly above the bottom viewport */
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 2rem) !important;
    max-width: 420px !important; /* Sleek, highly focused dock profile */
    height: 66px !important;
    background-color: rgba(255, 255, 255, 0.82) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 33px !important; /* Gorgeous capsule shape */
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    z-index: 9980 !important;
    backdrop-filter: blur(25px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(190%) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding: 0 8px !important; /* Perfect inner spacing */
}

body.dark-mode .mobile-bottom-nav {
    background-color: rgba(18, 18, 18, 0.80) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* Individual Bottom Nav Capsule Buttons */
.mobile-bottom-nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--text-secondary) !important;
    text-decoration: none !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    flex: 1 !important;
    height: 50px !important; /* Exact vertical alignment: (66px container - 50px item) / 2 = 8px top/bottom gap */
    margin: 0 4px !important;
    border-radius: 25px !important; /* Soft pill/capsule shape */
    padding: 0 !important;
    gap: 3px !important;
    position: relative !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

.mobile-bottom-nav-item svg {
    color: var(--text-secondary) !important;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Beautiful Tactile Active/Pressed Feedback on Click (Immediate response) */
.mobile-bottom-nav-item:active {
    transform: scale(0.92) !important;
}

/* Hover State (Subtle highlight - Desktop/Cursor devices only to prevent sticky touch states on mobile) */
@media (hover: hover) {
    .mobile-bottom-nav-item:hover {
        background-color: rgba(0, 123, 255, 0.04) !important;
        color: var(--color-accent) !important;
    }

    .mobile-bottom-nav-item:hover svg {
        color: var(--color-accent) !important;
        transform: translateY(-1px) scale(1.05) !important;
    }
}

/* Active Class Highlight (The active visual state - remains highlighted) */
.mobile-bottom-nav-item.is-active {
    background-color: rgba(15, 76, 129, 0.08) !important; /* Premium sapphire light background */
    color: #0f4c81 !important; /* Premium deep sapphire with ultra-high contrast ratio */
    box-shadow: inset 0 0 0 1px rgba(15, 76, 129, 0.15) !important; /* Gorgeous inside border glow */
}

.mobile-bottom-nav-item.is-active svg {
    color: #0f4c81 !important;
    transform: scale(1.08) !important; /* Beautiful slight scale for status visibility */
}

.mobile-bottom-nav-item.is-active span {
    font-weight: 800 !important;
    color: #0f4c81 !important;
}

/* Dark Mode Active Highlighting overrides (Vibrant premium accents) */
@media (hover: hover) {
    body.dark-mode .mobile-bottom-nav-item:hover {
        background-color: rgba(255, 255, 255, 0.04) !important;
        color: #3b82f6 !important;
    }

    body.dark-mode .mobile-bottom-nav-item:hover svg {
        color: #3b82f6 !important;
    }
}

body.dark-mode .mobile-bottom-nav-item.is-active {
    background-color: rgba(0, 123, 255, 0.16) !important; /* Rich sapphire highlight */
    color: #3b82f6 !important; /* Dynamic high-visibility contrast blue */
    box-shadow: inset 0 0 0 1px rgba(0, 123, 255, 0.28) !important;
}

body.dark-mode .mobile-bottom-nav-item.is-active svg {
    color: #3b82f6 !important;
}

body.dark-mode .mobile-bottom-nav-item.is-active span {
    color: #3b82f6 !important;
}

/* Desktop override to hide floating bar completely */
@media screen and (min-width: 1024px) {
    .mobile-bottom-nav {
        display: none !important;
    }
}

/* Mobile & Tablet override to hide duplicate circular scroll-top button */
@media screen and (max-width: 1023px) {
    .scroll-top-btn {
        display: none !important;
    }
}


/* ==========================================================================
   AUTHOR / JOURNALIST PROFILE  —  Instagram × Facebook × Premium News
   ========================================================================== */

/* ── Outer wrapper ─────────────────────────────────────────────────────────── */
.ap-wrap {
    background: var(--bg-secondary);
    min-height: 60vh;
    padding-bottom: 4rem;
}

/* ══ PROFILE HEADER ══════════════════════════════════════════════════════════ */

/* Cover photo strip */
.ap-cover {
    position: relative;
    width: 100%;
    height: 260px;
    overflow: hidden;
}

.ap-cover-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.45) 100%);
}

/* Profile bar — sits at bottom of cover, floats up */
.ap-profile-header {
    position: relative;
    margin-bottom: 0;
}

.ap-profile-bar {
    display: flex;
    align-items: flex-end;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 0 0 1.5rem;
    margin-top: -60px;   /* pull up into cover */
    position: relative;
    z-index: 2;
}

/* ── Avatar ────────────────────────────────────────────────────────────────── */
.ap-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.ap-avatar {
    width: 130px !important;
    height: 130px !important;
    border-radius: 50% !important;
    border: 5px solid var(--bg-primary) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.22) !important;
    object-fit: cover;
    display: block;
    background: var(--bg-secondary);
}

body.dark-mode .ap-avatar { border-color: var(--bg-secondary) !important; }

.ap-avatar-badge {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* ── Name + meta ───────────────────────────────────────────────────────────── */
.ap-profile-info {
    flex: 1;
    min-width: 200px;
    padding-bottom: 0.25rem;
}

.ap-name-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ap-name {
    font-size: 1.75rem;
    font-weight: 900;
    color: var(--text-primary);
    margin: 0;
    font-family: var(--font-heading);
    line-height: 1.15;
}

.ap-verified-badge {
    display: inline-flex;
    align-items: center;
    color: var(--color-accent);
    flex-shrink: 0;
}

.ap-designation {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted);
    margin: 0.2rem 0 0.55rem;
    letter-spacing: 0.02em;
}

.ap-beats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.ap-beat-tag {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-accent);
    padding: 0.15rem 0.55rem;
    background: var(--color-accent-light);
    border-radius: 20px;
    border: 1px solid var(--color-accent);
    letter-spacing: 0.01em;
}

/* ── Inline stats (Instagram-style) ───────────────────────────────────────── */
.ap-inline-stats {
    display: flex;
    gap: 2rem;
    align-items: flex-end;
    padding-bottom: 0.5rem;
}

.ap-inline-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.1rem;
}

.ap-inline-stat strong {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--text-primary);
    font-family: var(--font-heading);
    line-height: 1;
}

.ap-inline-stat span {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ── Action buttons (social icons) ────────────────────────────────────────── */
.ap-actions {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    padding-bottom: 0.4rem;
    flex-wrap: wrap;
}

.ap-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.22s cubic-bezier(0.4,0,0.2,1);
    border: 1.5px solid var(--border-color);
    color: var(--text-secondary);
    background: var(--bg-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.ap-action-btn:hover { transform: translateY(-3px) scale(1.08); box-shadow: 0 6px 18px rgba(0,0,0,0.12); }

.ap-btn-fb:hover { background: #1877f2; color: #fff; border-color: #1877f2; }
.ap-btn-tw:hover { background: #000;    color: #fff; border-color: #000; }
.ap-btn-li:hover { background: #0a66c2; color: #fff; border-color: #0a66c2; }
.ap-btn-ig:hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); color: #fff; border-color: transparent; }
.ap-btn-web:hover{ background: var(--color-accent); color: #fff; border-color: var(--color-accent); }

/* ── Bio row ───────────────────────────────────────────────────────────────── */
.ap-bio-row {
    padding: 0.75rem 0 1.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    flex-wrap: wrap;
}

.ap-bio {
    font-size: 0.9rem;
    line-height: 1.72;
    color: var(--text-secondary);
    margin: 0;
    max-width: 55ch;
    flex-shrink: 0;
}

.ap-meta-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    padding-top: 0.15rem;
}

.ap-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 0.3rem 0.8rem;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
}

.ap-meta-chip--link:hover {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
    transform: translateY(-1px);
}

/* ══ CONTENT AREA ════════════════════════════════════════════════════════════ */
.ap-content-area {
    padding-top: 0.5rem;
}

/* Tab bar */
.ap-tab-bar {
    display: flex;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 2rem;
}

.ap-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 0.75rem 0;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ap-tab--active {
    color: var(--text-primary);
    border-bottom-color: var(--text-primary);
}

.ap-tab-count {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 20px;
}

/* ── Posts Grid ────────────────────────────────────────────────────────────── */
.ap-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

/* Card */
.ap-card {
    background: var(--bg-primary);
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
}

.ap-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.1);
}

/* Thumbnail */
.ap-card-thumb {
    position: relative;
    display: block;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--bg-secondary);
}

.ap-card-thumb > img,
.ap-card-thumb > svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
    display: block;
}

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

/* Hover overlay (Instagram-style likes count) */
.ap-card-hover-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.38);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.ap-card:hover .ap-card-hover-overlay { opacity: 1; }

.ap-card-stat {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 800;
    font-family: var(--font-heading);
}

/* Views badge */
.ap-card-views-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 0.2rem;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2;
}

/* Card body */
.ap-card-body {
    padding: 1rem 1.1rem 1.1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.ap-card-cats {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-accent);
}

.ap-card-cats a { color: inherit; text-decoration: none; }

.ap-card-title {
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.45;
    margin: 0;
    font-family: var(--font-heading);
    flex: 1;
}

.ap-card-title a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.2s;
}

.ap-card-title a:hover { color: var(--color-accent); }

.ap-card-excerpt {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ap-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.65rem;
    border-top: 1px solid var(--border-light);
    margin-top: auto;
}

.ap-card-date {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.68rem;
    color: var(--text-muted);
    font-weight: 500;
}

.ap-card-read {
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--color-accent);
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: gap 0.2s;
}

.ap-card-read:hover { text-decoration: underline; }

/* ── Pagination ────────────────────────────────────────────────────────────── */
.ap-pagination {
    margin-top: 3rem;
    display: flex;
    justify-content: center;
}

.ap-pagination .nav-links { display: flex; gap: 0.4rem; align-items: center; }

.ap-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    border: 1.5px solid var(--border-color);
    color: var(--text-secondary);
    text-decoration: none;
    background: var(--bg-primary);
    transition: all 0.2s ease;
}

.ap-pagination .page-numbers.current,
.ap-pagination .page-numbers:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
    box-shadow: 0 4px 12px var(--color-accent-light);
}

/* ── Empty state ───────────────────────────────────────────────────────────── */
.ap-empty {
    text-align: center;
    padding: 5rem 2rem;
    color: var(--text-muted);
}

.ap-empty svg { display: block; margin: 0 auto 1.25rem; opacity: 0.3; }
.ap-empty h3  { font-size: 1.1rem; font-weight: 800; margin: 0 0 0.4rem; color: var(--text-primary); }
.ap-empty p   { font-size: 0.85rem; margin: 0; }

/* ══ DARK MODE ═══════════════════════════════════════════════════════════════ */
body.dark-mode .ap-wrap          { background: var(--bg-secondary); }
body.dark-mode .ap-card          { border-color: var(--border-color); }
body.dark-mode .ap-action-btn    { background: var(--bg-secondary); border-color: var(--border-color); }
body.dark-mode .ap-meta-chip     { background: var(--bg-secondary); border-color: var(--border-color); }
body.dark-mode .ap-tab-bar       { border-bottom-color: var(--border-color); }

/* ══ RESPONSIVE ══════════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
    .ap-grid        { grid-template-columns: repeat(2, 1fr); }
    .ap-cover       { height: 200px; }
    .ap-inline-stats{ gap: 1.25rem; }
    .ap-name        { font-size: 1.4rem; }
}

@media (max-width: 640px) {
    .ap-cover       { height: 150px; }
    .ap-profile-bar {
        flex-direction: column;
        align-items: flex-start;
        margin-top: -50px;
        gap: 0.75rem;
        padding-bottom: 1rem;
    }
    .ap-avatar  { width: 96px !important; height: 96px !important; }
    .ap-grid    { grid-template-columns: 1fr; gap: 1rem; }
    .ap-inline-stats { gap: 1.5rem; }
    .ap-bio-row { flex-direction: column; gap: 0.75rem; }
    .ap-name    { font-size: 1.25rem; }
    .ap-actions { padding-top: 0.25rem; }
}

/* ==========================================================================
   AUTHOR CARD UPGRADE  (single.php — designation + experience + beat)
   ========================================================================== */

.author-card-designation {
    display: inline-block;
    background: var(--color-accent);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.15rem 0.6rem;
    border-radius: 20px;
    margin: 0.25rem 0 0.5rem;
}

.author-card-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.35rem;
}

.author-card-post-count,
.author-card-exp,
.author-card-beat {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
}

.author-card-exp  svg { color: var(--color-accent); }
.author-card-beat svg { color: var(--color-accent); }

.author-social-btn.author-social-li:hover { background: #0a66c2; color: #fff; border-color: #0a66c2; }
.author-social-btn.author-social-ig:hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); color: #fff; border-color: transparent; }

/* ==========================================================================
   DYNAMIC ANTI-ADBLOCK MODAL OVERLAY (Option 1 — Revenue Shield)
   ========================================================================== */

.adblock-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background-color: rgba(15, 23, 42, 0.75); /* Deep translucent backdrop */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.adblock-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.adblock-modal {
    background-color: var(--bg-primary, #ffffff);
    color: var(--text-primary, #2d3748);
    border: 1px solid var(--border-color, #e2e8f0);
    width: 100%;
    max-width: 480px;
    padding: 2.5rem 2rem;
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    text-align: center;
    transform: scale(0.9);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.adblock-overlay.active .adblock-modal {
    transform: scale(1);
}

.adblock-icon-wrap {
    width: 72px;
    height: 72px;
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444; /* Alert Red */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 0 auto 1.5rem;
    animation: adblockPulse 2s infinite ease-in-out;
}

@keyframes adblockPulse {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    70% { box-shadow: 0 0 0 12px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.adblock-svg-lock {
    width: 32px;
    height: 32px;
}

.adblock-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    font-family: var(--font-heading);
    color: var(--text-primary);
}

.adblock-desc {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text-secondary, #4a5568);
    margin-bottom: 1rem;
}

.adblock-instruction {
    font-size: 0.88rem;
    line-height: 1.5;
    font-weight: 700;
    color: var(--color-accent, #ff5722);
    background-color: rgba(255, 87, 34, 0.06);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px dashed rgba(255, 87, 34, 0.2);
    margin-bottom: 1.75rem;
}

.adblock-refresh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    background-color: var(--color-accent, #ff5722);
    color: #ffffff;
    border: none;
    padding: 0.85rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 6px -1px rgba(255, 87, 34, 0.25);
    transition: all 0.2s ease-in-out;
}

.adblock-refresh-btn:hover {
    background-color: var(--color-accent-hover, #e64a19);
    box-shadow: 0 10px 15px -3px rgba(255, 87, 34, 0.35);
    transform: translateY(-2px);
}

.adblock-refresh-btn:active {
    transform: translateY(0);
}

/* ==========================================================================
   PREMIUM PRINT & A4 PDF GENERATION (Option 2 — dynamic branding footer)
   ========================================================================== */

@media print {
    /* Hide all layout wrappers, widgets, mobile bottom navigation and desktop scroll buttons */
    .site-header,
    .nav-bar,
    .sidebar-wrapper,
    .site-footer,
    .post-share-wrap,
    .author-card,
    .related-posts-block,
    #comments,
    .single-post-actions-bar,
    .off-canvas-drawer,
    .off-canvas-overlay,
    .search-fullscreen-overlay,
    .theme-toggle-btn,
    .hamburger-btn,
    .action-btn,
    .print-tool-action,
    .ad-slot-wrapper,
    .post-navigation,
    .mobile-bottom-nav,
    .scroll-top-btn,
    iframe,
    ins {
        display: none !important;
        height: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Force high-quality Bangla serif/sans-serif fonts for paper printing */
    body, p, li, h1, h2, h3, h4, h5, h6, span, a, div {
        font-family: 'SolaimanLipi', 'Kalpurush', 'Noto Sans Bengali', 'Noto Serif Bengali', Arial, sans-serif !important;
    }

    /* Set main body configurations */
    body {
        background-color: #ffffff !important;
        color: #000000 !important;
        font-size: 12pt !important;
        line-height: 1.65 !important;
        margin: 0 !important;
        padding: 0 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Re-structure container sizes */
    .site-main-layout,
    .site-content-area,
    .single-post-wrapper,
    .container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        box-shadow: none !important;
        border: none !important;
        background: transparent !important;
    }

    .single-post-header,
    .page-header {
        margin-bottom: 2rem !important;
        border-bottom: 2px solid #000000 !important;
        padding-bottom: 1rem !important;
    }

    .single-post-title {
        font-size: 24pt !important;
        line-height: 1.3 !important;
        color: #000000 !important;
        font-weight: bold !important;
        margin-bottom: 0.5rem !important;
    }

    .single-post-meta {
        font-size: 10pt !important;
        color: #555555 !important;
        border: none !important;
        padding: 0 !important;
        margin-bottom: 0 !important;
    }
    
    .single-meta-avatar img {
        display: none !important;
    }

    .post-featured-media {
        margin: 1.5rem 0 !important;
        text-align: center !important;
    }

    .post-featured-media img {
        max-width: 100% !important;
        height: auto !important;
        border-radius: 0 !important;
    }

    .article-content {
        font-size: 12pt !important;
        line-height: 1.65 !important;
        color: #111111 !important;
    }

    /* Print page-breaks optimization */
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid !important;
        page-break-inside: avoid !important;
        color: #000000 !important;
    }
    
    p, li, blockquote, figure {
        page-break-inside: avoid !important;
    }

    blockquote {
        border-left: 4px solid #666666 !important;
        padding-left: 1.25rem !important;
        margin-left: 0 !important;
        font-style: italic !important;
        color: #444444 !important;
    }

    /* Render dynamic printed branding footer */
    .print-branding-footer {
        display: block !important;
        text-align: center !important;
        margin-top: 4rem !important;
        padding-top: 1.5rem !important;
        border-top: 2px dashed #999999 !important;
        page-break-inside: avoid !important;
    }

    .print-brand-title {
        font-size: 16pt !important;
        font-weight: 800 !important;
        color: #ff5722 !important;
        margin: 0 0 0.25rem 0 !important;
        letter-spacing: 0.05em !important;
    }

    .print-brand-tagline {
        font-size: 10pt !important;
        color: #333333 !important;
        margin: 0 0 0.5rem 0 !important;
    }

    .print-brand-url {
        font-size: 9pt !important;
        font-family: monospace !important;
        color: #000000 !important;
        text-decoration: underline !important;
        margin: 0 0 0.25rem 0 !important;
    }

    .print-brand-copyright {
        font-size: 8pt !important;
        color: #666666 !important;
        margin: 0 !important;
    }
}

/* ==========================================================================
   ENFORCE THEME TYPOGRAPHY ON ACTIONS BAR
   ========================================================================== */
.single-post-actions-bar,
.single-post-actions-bar button,
.single-post-actions-bar span,
.resizer-btn,
.action-btn {
    font-family: var(--font-heading), 'Noto Serif Bengali', 'SolaimanLipi', 'Kalpurush', sans-serif !important;
}

/* ==========================================================================
   NUCLEAR OVERRIDE FOR MOBILE DRAWER NAVIGATION MENU     /* 3. Force the off-canvas menu elements to stack vertically with a premium floating-pill design */
    .off-canvas-drawer .off-canvas-menu,
    .off-canvas-menu {
        width: 100% !important;
        display: block !important;
    }
    
    /* Target ANY list inside the drawer's menu nav */
    .off-canvas-menu ul,
    .off-canvas-menu ul.primary-menu,
    .off-canvas-menu .primary-menu,
    .off-canvas-menu .menu,
    .off-canvas-drawer .off-canvas-menu ul,
    .off-canvas-drawer .off-canvas-menu .menu {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Floating-pill layout: Generous spacing, borderless list items */
    .off-canvas-menu li,
    .off-canvas-menu ul > li,
    .off-canvas-menu ul.primary-menu > li,
    .off-canvas-menu .menu li,
    .off-canvas-drawer .off-canvas-menu li {
        display: block !important;
        width: auto !important; /* Float cleanly inside the drawer container */
        height: auto !important;
        margin: 4px 12px !important; /* Beautiful space from drawer edges */
        padding: 0 !important;
        float: none !important;
        box-sizing: border-box !important;
        border-bottom: none !important; /* Remove clunky solid list dividers */
        position: relative !important;
    }
    
    .off-canvas-menu li:last-child,
    .off-canvas-drawer .off-canvas-menu li:last-child {
        border-bottom: none !important;
    }
    
    /* Premium modern link layout inside the drawer */
    .off-canvas-menu li a,
    .off-canvas-menu ul > li > a,
    .off-canvas-menu ul.primary-menu > li > a,
    .off-canvas-drawer .off-canvas-menu li a {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        height: auto !important;
        padding: 0.85rem 1rem !important; /* Beautiful side breathing room */
        font-size: 1rem !important; /* Refined size for ultimate elegance */
        font-weight: 600 !important; /* Professional Noto Serif Bengali weight */
        color: var(--text-primary) !important;
        text-transform: none !important; /* Remove forced uppercase for a clean layout */
        letter-spacing: 0px !important;
        white-space: normal !important;
        box-sizing: border-box !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        position: relative !important;
        border-radius: 8px !important; /* Clean rounded pill hover states */
    }
    
    /* Remove vertical line hover indicators */
    .off-canvas-menu li a::after,
    .off-canvas-drawer .off-canvas-menu li a::after {
        display: none !important;
    }
    
    /* Completely remove old thick vertical line indicators on left */
    .off-canvas-menu li a::before,
    .off-canvas-drawer .off-canvas-menu li a::before {
        display: none !important;
    }
    
    /* Beautiful subtle background highlight on hover/interaction */
    .off-canvas-menu li a:hover,
    .off-canvas-drawer .off-canvas-menu li a:hover {
        color: var(--color-accent) !important;
        padding-left: 1.25rem !important; /* Elegant micro-nudge inside the pill */
        background-color: rgba(0, 122, 255, 0.04) !important;
    }
    
    body.dark-mode .off-canvas-menu li a:hover,
    body.dark-mode .off-canvas-drawer .off-canvas-menu li a:hover {
        background-color: rgba(255, 255, 255, 0.02) !important;
    }
    
    /* Active Link Highlights (Premium solid tinted highlight pill) */
    .off-canvas-menu li.current-menu-item > a,
    .off-canvas-menu li.current_page_item > a,
    .off-canvas-drawer .off-canvas-menu li.current-menu-item > a {
        color: var(--color-accent) !important;
        background-color: rgba(0, 122, 255, 0.05) !important;
        font-weight: 700 !important;
        padding-left: 1.25rem !important;
    }
    
    body.dark-mode .off-canvas-menu li.current-menu-item > a,
    body.dark-mode .off-canvas-drawer .off-canvas-menu li.current-menu-item > a {
        background-color: rgba(255, 255, 255, 0.03) !important;
    }

    /* 4. Utility pages menu styling (Small elegant links at the bottom of the drawer) */
    .drawer-utility-menu {
        margin-top: 2rem !important;
        margin-bottom: 2rem !important;
        border-top: 1px dashed var(--border-color) !important;
        padding-top: 1.5rem !important;
        display: block !important;
        width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        box-sizing: border-box !important;
    }
    
    .utility-menu-title {
        font-size: 0.75rem !important;
        font-weight: 700 !important;
        color: var(--text-muted) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        margin-bottom: 0.75rem !important;
        display: block !important;
    }
    
    .drawer-pages-list {
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        width: 100% !important;
    }
    
    .drawer-pages-list li {
        margin-bottom: 0 !important;
        border-bottom: none !important;
        padding-bottom: 0 !important;
        display: block !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .drawer-pages-list li a {
        font-size: 0.85rem !important; /* Small, discrete utility pages font size */
        font-weight: 600 !important;
        color: var(--text-secondary) !important;
        text-transform: none !important; /* Do not force uppercase on utility pages */
        letter-spacing: 0px !important;
        padding: 0.45rem 0.5rem !important;
        display: block !important;
        width: 100% !important;
        white-space: normal !important;
        box-sizing: border-box !important;
        transition: all 0.2s ease !important;
        border-radius: 4px !important;
    }
    
    /* Clean micro-hover nudge for utility pages */
    .drawer-pages-list li a:hover {
        color: var(--color-accent) !important;
        padding-left: 0.75rem !important;
        background-color: rgba(0, 122, 255, 0.02) !important;
    }
    
    body.dark-mode .drawer-pages-list li a:hover {
        background-color: rgba(255, 255, 255, 0.01) !important;
    }

    /* 5. Fix mobile off-canvas drawer toggle chevrons positioning & browser outlines */
    .off-canvas-menu ul > li > .sub-menu-toggle,
    .off-canvas-menu ul.primary-menu > li > .sub-menu-toggle,
    .off-canvas-menu li > .sub-menu-toggle,
    .off-canvas-drawer .off-canvas-menu .sub-menu-toggle {
        position: absolute !important;
        right: 0.5rem !important;
        top: 50% !important; /* CENTERED VERTICALLY INSTEAD OF TOP LOCK */
        transform: translateY(-50%) !important;
        height: 2.25rem !important; /* MODERATE ACCESSIBLE PILL HEIGHT */
        width: 2.25rem !important;
        border: none !important;
        outline: none !important; /* REMOVE CHROME BLACK SQUARE OUTLINE */
        box-shadow: none !important;
        background: transparent !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        z-index: 10 !important;
        padding: 0 !important;
        border-radius: 50% !important;
    }

    .off-canvas-menu ul > li > .sub-menu-toggle:focus,
    .off-canvas-menu ul.primary-menu > li > .sub-menu-toggle:focus,
    .off-canvas-menu li > .sub-menu-toggle:focus,
    .off-canvas-drawer .off-canvas-menu .sub-menu-toggle:focus,
    .off-canvas-menu ul > li > .sub-menu-toggle:active,
    .off-canvas-menu ul.primary-menu > li > .sub-menu-toggle:active,
    .off-canvas-menu li > .sub-menu-toggle:active,
    .off-canvas-drawer .off-canvas-menu .sub-menu-toggle:active {
        outline: none !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    /* Clean the chevron icons styles */
    .sub-menu-toggle .chevron-icon {
        width: 12px !important;
        height: 12px !important;
        stroke: var(--text-secondary) !important;
        transition: transform var(--transition-normal) !important;
    }
    
    .sub-menu-toggle.is-active .chevron-icon {
        transform: rotate(180deg) !important;
        stroke: var(--color-accent) !important;
    }

    /* Beautify the mobile submenu cards (remove duplicate borders/bar overload) */
    .off-canvas-menu ul > li > .sub-menu,
    .off-canvas-menu ul.primary-menu > li > .sub-menu,
    .off-canvas-menu ul > li > .children,
    .off-canvas-menu ul.primary-menu > li > .children {
        background-color: rgba(0, 0, 0, 0.015) !important; /* Soft premium layered background */
        border: none !important; /* Zero heavy borders */
        border-left: 1.5px solid var(--border-color, #e2e8f0) !important; /* Elegant thin guideline */
        border-radius: 8px !important; /* Nest cleanly with rounded card */
        box-shadow: none !important; /* Zero shadow overload */
        margin-left: 1.25rem !important; /* Indent beautifully inside the parent block */
        margin-right: 0.5rem !important;
        margin-top: 4px !important;
        margin-bottom: 4px !important;
        padding: 4px 0 !important;
        width: auto !important; /* Constrain with margins */
    }
    
    body.dark-mode .off-canvas-menu ul > li > .sub-menu,
    body.dark-mode .off-canvas-menu ul.primary-menu > li > .sub-menu,
    body.dark-mode .off-canvas-menu ul > li > .children,
    body.dark-mode .off-canvas-menu ul.primary-menu > li > .children {
        background-color: rgba(255, 255, 255, 0.01) !important;
        border: none !important;
        border-left: 1.5px solid var(--border-color, #2d3748) !important;
    }

    /* Nest submenu items inside card cleanly */
    .off-canvas-menu ul > li > .sub-menu > li,
    .off-canvas-menu ul.primary-menu > li > .sub-menu > li,
    .off-canvas-menu ul > li > .children > li,
    .off-canvas-menu ul.primary-menu > li > .children > li {
        margin: 2px 4px !important;
        border-bottom: none !important;
        padding-bottom: 0 !important;
        width: auto !important;
    }
    
    /* Child links inside mobile sub-menu card */
    .off-canvas-menu ul > li > .sub-menu > li > a,
    .off-canvas-menu ul.primary-menu > li > .sub-menu > li > a,
    .off-canvas-menu ul > li > .children > li > a,
    .off-canvas-menu ul.primary-menu > li > .children > li > a {
        font-size: 0.925rem !important;
        font-weight: 500 !important;
        color: var(--text-secondary) !important;
        padding: 0.65rem 1rem 0.65rem 1.75rem !important; /* Left space for bullet, Right: chevron space */
        display: block !important;
        border-radius: 6px !important;
        border-bottom: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Small arrow indicator for mobile sub-menu items */
    .off-canvas-menu ul > li > .sub-menu > li > a::before,
    .off-canvas-menu ul.primary-menu > li > .sub-menu > li > a::before,
    .off-canvas-menu ul > li > .children > li > a::before,
    .off-canvas-menu ul.primary-menu > li > .children > li > a::before {
        content: '•' !important;
        position: absolute !important;
        left: 0.85rem !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        font-size: 0.75rem !important;
        color: var(--text-muted) !important;
    }
    
    .off-canvas-menu ul > li > .sub-menu > li > a:hover,
    .off-canvas-menu ul.primary-menu > li > .sub-menu > li > a:hover,
    .off-canvas-menu ul > li > .children > li > a:hover,
    .off-canvas-menu ul.primary-menu > li > .children > li > a:hover {
        color: var(--color-accent) !important;
        padding-left: 2rem !important;
        background-color: rgba(0, 122, 255, 0.03) !important;
    }
    
    .off-canvas-menu ul > li > .sub-menu > li > a:hover::before,
    .off-canvas-menu ul.primary-menu > li > .sub-menu > li > a:hover::before,
    .off-canvas-menu ul > li > .children > li > a:hover::before,
    .off-canvas-menu ul.primary-menu > li > .children > li > a:hover::before {
        color: var(--color-accent) !important;
        transform: translateY(-50%) scale(1.2) !important;
    }
}