/* Post title color change to navy blue - MORE SPECIFIC SELECTORS */
.post-title,
.single-post .post-title,
article h1.post-title,
.post-content > h1:first-of-type,
.entry-content > h1:first-of-type,
.main-content h1,
.home-content .post-title,
.page-content .post-title,
.page-content-full .post-title,
.single-post h1.post-title,
article.single-post h1.post-title,
.post-header h1.post-title,
.single-post .post-header h1.post-title,
article.single-post .post-header h1.post-title {
    color: #1e3a8a !important; /* Navy blue color */
}

.post-title a,
.single-post .post-title a,
article h1.post-title a,
.post-content > h1:first-of-type a,
.entry-content > h1:first-of-type a,
.main-content h1 a,
.home-content .post-title a,
.page-content .post-title a,
.page-content-full .post-title a,
.single-post h1.post-title a,
article.single-post h1.post-title a,
.post-header h1.post-title a,
.single-post .post-header h1.post-title a,
article.single-post .post-header h1.post-title a {
    color: #1e3a8a !important; /* Navy blue color */
}

/* Override theme-optimized.css specific rules */
.post-title,
.post-title a,
.home-content .post-title,
.home-content .post-title a {
    color: #1e3a8a !important;
}

/* Override any theme-optimized.css styles */
.single-post .post-title,
article.single-post .post-title,
.single-post h1.post-title,
article.single-post h1.post-title {
    color: #1e3a8a !important;
}

/* Override any typography-override.css styles */
.post-title,
.single-post .post-title,
article h1.post-title {
    color: #1e3a8a !important;
}

/* Override h1 general styles */
h1,
.main-content h1,
.post-header h1 {
    color: #1e3a8a !important;
}

/* Footer logo styling */
.footer-logo-section {
    text-align: center;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

.footer-logo {
    display: inline-block;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.footer-logo:hover {
    transform: scale(1.05);
}

.footer-logo-img {
    max-height: 180px; /* doubled from 90px */
    width: auto;
    object-fit: contain;
    filter: brightness(0.8);
    transition: all var(--transition-fast);
}

.footer-logo:hover .footer-logo-img {
    filter: brightness(1);
}

.footer-logo-text {
    font-size: var(--font-size-4xl); /* doubled from 2xl */
    font-weight: 700;
    color: var(--text-primary);
    transition: color var(--transition-fast);
}

.footer-logo:hover .footer-logo-text {
    color: var(--primary-color);
}

@media (max-width: 768px) {
    .footer-logo-img {
        max-height: 150px; /* doubled from 75px */
    }
    
    .footer-logo-text {
        font-size: var(--font-size-2xl); /* doubled from xl */
    }
}

@media (max-width: 480px) {
    .footer-logo-img {
        max-height: 120px; /* doubled from 60px */
    }
    
    .footer-logo-text {
        font-size: var(--font-size-xl); /* doubled from lg */
    }
}

/* Global focus box removal - remove blue boxes everywhere */
*:focus,
*:active,
*:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Remove mobile tap highlights globally */
* {
    -webkit-tap-highlight-color: transparent;
}

/* Override any specific focus styles that might still show blue boxes */
a:focus,
a:active,
a:focus-visible,
button:focus,
button:active,
button:focus-visible,
input:focus,
input:active,
input:focus-visible,
textarea:focus,
textarea:active,
textarea:focus-visible,
select:focus,
select:active,
select:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Add left padding to the site logo link (site-wide consistency) */
.site-header .site-logo a {
    padding-left: var(--spacing-sm) !important;
}

/* Remove blue focus box from logo */
.site-header .site-logo a:focus,
.site-header .site-logo a:active,
.site-header .site-logo a:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Remove mobile tap highlight from logo */
.site-header .site-logo a {
    -webkit-tap-highlight-color: transparent;
}

/* Override any page/post-specific container padding that affects logo positioning */
body.page .site-header .container,
body.single .site-header .container,
body.home .site-header .container,
body.archive .site-header .container {
    padding-left: var(--spacing-md) !important;
    padding-right: var(--spacing-md) !important;
}

/* Ensure header container padding is consistent across all templates */
body.page .site-header .header-container,
body.single .site-header .header-container,
body.home .site-header .header-container,
body.archive .site-header .header-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

@media (max-width: 480px) {
    .site-header .site-logo a {
        padding-left: var(--spacing-xs) !important;
    }
    
    /* Mobile container padding override */
    body.page .site-header .container,
    body.single .site-header .container,
    body.home .site-header .container,
    body.archive .site-header .container {
        padding-left: var(--spacing-sm) !important;
        padding-right: var(--spacing-sm) !important;
    }
}

/* Header logo size adjustments (site-wide consistency) */
.site-header .site-logo img {
    max-height: 64px !important; /* increase from 50px */
    width: auto;
    object-fit: contain;
}

@media (max-width: 768px) {
    .site-header .site-logo img {
        max-height: 52px !important; /* was ~45-50px */
    }
}

@media (max-width: 480px) {
    .site-header .site-logo img {
        max-height: 36px !important; /* was ~25-45px */
    }
}

/* Footer link focus/active styles: remove blue focus box specifically in footer */
.site-footer a:focus,
.site-footer a:active,
.site-footer a:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Also neutralize any generic *:focus rules within footer */
.site-footer :focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Remove mobile tap highlight in footer links */
.site-footer a {
    -webkit-tap-highlight-color: transparent;
}

/**
 * Additional CSS for DataGeeksTheme 2
 * 
 * @package DataGeeksTheme2
 * @version 2.0
 */

/* ==========================================================================
   User Dropdown Styles - Unified for All Layouts
   ========================================================================== */

/* Ensure containers don't clip dropdowns */
.header-actions,
.site-header,
.header-container {
    overflow: visible !important;
    position: relative !important;
}

/* Mobile-specific header overflow fixes */
@media (max-width: 768px) {
    .header-actions,
    .site-header,
    .header-container,
    .main-header,
    .header-wrapper {
        overflow: visible !important;
        position: relative !important;
    }
    
    /* Ensure mobile header doesn't constrain dropdown */
    .site-header .header-container {
        overflow: visible !important;
    }
}

/* Unified User Dropdown Styles */
.wp-user-dropdown {
    position: relative;
    display: inline-block;
    z-index: 10001;
    overflow: visible;
}

.wp-user-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: var(--primary-color, #007cba);
    color: var(--text-light, #ffffff);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.wp-user-icon:hover {
    background-color: var(--primary-dark, #005a87);
    transform: scale(1.05);
    border-color: var(--primary-dark, #005a87);
}

.wp-user-icon img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.wp-user-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 180px;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    margin-top: 8px;
    display: none;
    overflow: hidden;
}

.wp-user-dropdown.active .wp-user-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    display: block;
}

.wp-user-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: #333333;
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
    transition: all 0.2s ease;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    background-color: transparent;
}

.wp-user-menu-item:last-child {
    border-bottom: none;
}

.wp-user-menu-item:hover {
    background-color: #f8f9fa;
    color: var(--primary-color, #007cba);
    transform: translateX(2px);
}

.wp-user-menu-item:active {
    background-color: #e9ecef;
    transform: translateX(1px);
}

.wp-user-menu-item.logout {
    color: #dc3545;
}

.wp-user-menu-item.logout:hover {
    background-color: #ffe6e6;
    color: #c82333;
    transform: translateX(2px);
}

.wp-user-menu-item.logout:active {
    background-color: #ffcccc;
    transform: translateX(1px);
}

.wp-user-menu-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.wp-user-menu-item:hover svg {
    transform: scale(1.1);
}

.wp-user-menu-item:focus {
    outline: 2px solid var(--primary-color, #007cba);
    outline-offset: -2px;
    background-color: #f8f9fa;
}

.wp-user-menu-item.logout:focus {
    outline-color: #dc3545;
    background-color: #ffe6e6;
}

/* Ensure hover works on touch devices */
@media (hover: hover) {
    .wp-user-menu-item:hover {
        background-color: #f8f9fa;
        color: var(--primary-color, #007cba);
        transform: translateX(2px);
    }
    
    .wp-user-menu-item.logout:hover {
        background-color: #ffe6e6;
        color: #c82333;
        transform: translateX(2px);
    }
}

/* Touch device specific styles */
@media (hover: none) {
    .wp-user-menu-item:active,
    .wp-user-menu-item.touching {
        background-color: #e9ecef;
        transform: translateX(1px);
    }
    
    .wp-user-menu-item.logout:active,
    .wp-user-menu-item.logout.touching {
        background-color: #ffcccc;
        transform: translateX(1px);
    }
}

/* Responsive Design - Unified for All Views */
@media (max-width: 768px) {
    .wp-user-icon {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 0.8rem;
    }
    
    .wp-user-menu-item {
        padding: 10px 14px;
        font-size: 13px;
        gap: 10px;
        transition: all 0.15s ease;
    }
    
    .wp-user-menu-item:hover {
        background-color: #f8f9fa;
        color: var(--primary-color, #007cba);
        transform: translateX(1px);
    }
    
    .wp-user-menu-item:active {
        background-color: #e9ecef;
        transform: translateX(0);
    }
    
    .wp-user-menu-item.logout:hover {
        background-color: #ffe6e6;
        color: #c82333;
        transform: translateX(1px);
    }
    
    .wp-user-menu-item.logout:active {
        background-color: #ffcccc;
        transform: translateX(0);
    }
}

@media (max-width: 480px) {
    .wp-user-icon {
        width: 2rem;
        height: 2rem;
        font-size: 0.75rem;
    }
    
    .wp-user-menu-item {
        padding: 8px 12px;
        font-size: 12px;
        gap: 8px;
        transition: all 0.15s ease;
    }
    
    .wp-user-menu-item:hover {
        background-color: #f8f9fa;
        color: var(--primary-color, #007cba);
        transform: translateX(1px);
    }
    
    .wp-user-menu-item:active {
        background-color: #e9ecef;
        transform: translateX(0);
    }
    
    .wp-user-menu-item.logout:hover {
        background-color: #ffe6e6;
        color: #c82333;
        transform: translateX(1px);
    }
    
    .wp-user-menu-item.logout:active {
        background-color: #ffcccc;
        transform: translateX(0);
    }
    
    .wp-user-menu-item svg {
        width: 14px;
        height: 14px;
    }
}

/* Override any single post layout for pages */
.page .content-area {
    display: block !important;
    grid-template-columns: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

.page .sidebar-right {
    display: none !important;
}

.page .doc-sidebar {
    display: none !important;
}

.page .sidebar-left {
    display: none !important;
}

/* Ensure page layout is completely full-width */
body.page .content-area {
    display: block !important;
    grid-template-columns: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

body.page .sidebar-right,
body.page .sidebar-left,
body.page .doc-sidebar {
    display: none !important;
}

/* Hide any widget content in sidebars for pages */
body.page .widget,
body.page .widget-area {
    display: none !important;
}

/* Ensure main content takes full width on pages */
body.page .main-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Full-width page layout - different from posts */
.page-content {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.page-content .page-post {
    background-color: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
    margin-bottom: 0 !important;
    max-width: 100%;
    width: 100%;
}

.page-content .post-header {
    text-align: center;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

.page-content .post-title {
    display: none !important;
}

.page-content .post-thumbnail {
    margin-bottom: var(--spacing-2xl);
    text-align: center;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.page-content .post-thumbnail img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
}

.page-content .post-content {
    line-height: 1.8;
    font-size: var(--font-size-lg);
    color: var(--text-primary);
    max-width: 100%;
    width: 100%;
}

.page-content .post-content h1,
.page-content .post-content h2,
.page-content .post-content h3,
.page-content .post-content h4,
.page-content .post-content h5,
.page-content .post-content h6 {
    margin-top: var(--spacing-2xl);
    margin-bottom: var(--spacing-lg);
    color: var(--text-primary);
    font-weight: 600;
}

.page-content .post-content h1 {
    font-size: var(--font-size-3xl);
}

.page-content .post-content h2 {
    font-size: var(--font-size-2xl);
}

.page-content .post-content h3 {
    font-size: var(--font-size-xl);
}

.page-content .post-content h4 {
    font-size: var(--font-size-lg);
}

.page-content .post-content h5 {
    font-size: var(--font-size-base);
}

.page-content .post-content h6 {
    font-size: var(--font-size-sm);
}

.page-content .post-content p {
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-base);
    line-height: 1.8;
}

.page-content .post-content ul,
.page-content .post-content ol {
    margin-bottom: var(--spacing-lg);
    padding-left: var(--spacing-xl);
}

.page-content .post-content li {
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-base);
    line-height: 1.7;
}

.page-content .post-content blockquote {
    border-left: 4px solid var(--primary-color);
    padding-left: var(--spacing-lg);
    margin: var(--spacing-2xl) 0;
    font-style: italic;
    color: var(--text-secondary);
    background-color: var(--bg-secondary);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    font-size: var(--font-size-lg);
}

.page-content .post-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-lg);
    margin: var(--spacing-lg) 0;
    box-shadow: var(--shadow-sm);
}

.page-content .post-content table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--bg-primary);
    font-size: var(--font-size-base);
    line-height: 1.6;
    margin: var(--spacing-lg) 0;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.page-content .post-content th,
.page-content .post-content td {
    padding: var(--spacing-md) var(--spacing-lg);
    border: 1px solid var(--border-color);
    text-align: left;
    vertical-align: top;
}

.page-content .post-content th {
    background-color: var(--primary-color);
    color: var(--text-light);
    font-weight: 600;
    font-size: var(--font-size-base);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.page-content .post-content tbody tr:hover {
    background-color: var(--bg-secondary);
}

.page-content .page-links {
    margin-top: var(--spacing-xl);
    padding-top: 0 !important;
    border-top: none !important;
    text-align: center;
}

.page-content .page-links a {
    display: inline-block;
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: var(--primary-color);
    color: var(--text-light);
    text-decoration: none;
    border-radius: var(--border-radius-lg);
    margin: 0 var(--spacing-sm);
    transition: all var(--transition-fast);
    font-weight: 500;
}

.page-content .page-links a:hover {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Responsive page layout */
@media (max-width: 1200px) {
    .page-content {
        padding: 0 !important;
    }
    
    .page-content .page-post {
        padding: 0 !important;
    }
}

@media (max-width: 768px) {
    .page-content {
        padding: 0 !important;
    }
    
    .page-content .page-post {
        padding: 0 !important;
        margin-bottom: 0 !important;
    }
    
    .page-content .post-header {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
}

@media (max-width: 480px) {
    .page-content {
        padding: 0 !important;
    }
    
    .page-content .page-post {
        padding: 0 !important;
    }
}

/* ==========================================================================
   Admin Bar Removal and Navigation Improvements
   ========================================================================== */

/* Completely hide admin bar */
#wpadminbar {
    display: none !important;
}

html {
    margin-top: 0 !important;
    overflow-x: hidden;
}

body.admin-bar {
    padding-top: 0 !important;
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    max-width: 100vw;
    box-sizing: border-box;
}

/* Navigation styles moved to navigation-master.css - duplicates removed */

/* ==========================================================================
   Mobile Sidebar Menu (Hamburger Drawer)
   ========================================================================== */

.mobile-posts-overlay {
    position: fixed !important; /* Ensure it stays fixed during scroll */
    top: 60px; /* Start directly below navigation bar - reduced for proper positioning */
    left: -100%;
    width: 300px;
    height: calc(100vh - 60px); /* Adjust height to account for navigation only */
    background: var(--overlay-bg, #ffffff) !important; /* Ensure background color is applied */
    z-index: 9999 !important; /* Higher than everything else */
    transition: left 0.3s ease-in-out;
    box-shadow: var(--overlay-shadow, 0 1rem 3rem rgba(0, 0, 0, 0.175)) !important; /* Ensure shadow is applied */
    overflow-y: auto;
    /* No gap from left - starts from left edge */
    margin-left: 0 !important; /* Remove any left margin */
    /* Prevent scrolling with page */
    transform: translateZ(0); /* Force hardware acceleration */
    will-change: transform; /* Optimize for animations */
    border-right: 1px solid rgba(0, 0, 0, 0.1); /* Add subtle border for definition */
}

/* Responsive adjustments for navigation height - consistent positioning */
@media (max-width: 1024px) {
    .mobile-posts-overlay {
        position: fixed !important; /* Ensure fixed positioning */
        top: 60px; /* Consistent positioning across all devices */
        height: calc(100vh - 60px);
        margin-left: 0 !important; /* No gap from left */
        transform: translateZ(0); /* Force hardware acceleration */
    }
}

@media (max-width: 768px) {
    .mobile-posts-overlay {
        position: fixed !important; /* Ensure fixed positioning */
        top: 60px; /* Consistent positioning across all devices */
        height: calc(100vh - 60px);
        margin-left: 0 !important; /* No gap from left */
        transform: translateZ(0); /* Force hardware acceleration */
    }
}

@media (max-width: 480px) {
    .mobile-posts-overlay {
        position: fixed !important; /* Ensure fixed positioning */
        top: 60px; /* Consistent positioning across all devices */
        height: calc(100vh - 60px);
        width: 280px; /* Narrower on small screens */
        margin-left: 0 !important; /* No gap from left */
        transform: translateZ(0); /* Force hardware acceleration */
    }
}

.mobile-posts-overlay.active {
    left: 0 !important; /* No gap from left edge */
}

/* Mobile overlay content styling */
.mobile-posts-overlay .mobile-posts-content {
    background: var(--overlay-bg, #1a1a1a) !important;
    color: var(--overlay-nav-text, #ffffff) !important;
    padding: var(--spacing-md, 1rem) !important;
}

/* Mobile overlay list container - Remove any hierarchical styling */
.mobile-posts-overlay .mobile-posts-list {
    padding: 0 !important;
    margin: 0 !important;
}

/* Mobile overlay sections - Remove hierarchy */
.mobile-posts-overlay .toc-section {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Mobile overlay header styling */
.mobile-posts-overlay .mobile-posts-header {
    background: var(--overlay-header-bg, #2c3e50) !important;
    color: var(--overlay-header-text, #ffffff) !important;
    padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem) !important;
    margin: calc(-1 * var(--spacing-md, 1rem)) calc(-1 * var(--spacing-md, 1rem)) var(--spacing-md, 1rem) calc(-1 * var(--spacing-md, 1rem)) !important;
    border-bottom: 1px solid var(--overlay-header-border, #34495e) !important;
}

/* Mobile overlay title styling */
.mobile-posts-overlay h3 {
    color: var(--overlay-title-text, #f1c40f) !important;
    font-weight: 600 !important;
    margin: 0 !important;
    border-bottom: 2px solid var(--overlay-title-text, #f1c40f) !important;
    padding-bottom: var(--spacing-xs, 0.25rem) !important;
}

/* Mobile overlay close button styling */
.mobile-posts-overlay .mobile-posts-close {
    color: var(--overlay-header-text, #ffffff) !important;
    background: transparent !important;
    border: none !important;
    padding: var(--spacing-sm, 0.5rem) !important;
    border-radius: var(--border-radius, 0.375rem) !important;
    transition: all var(--transition-fast, 0.15s ease-in-out) !important;
}

.mobile-posts-overlay .mobile-posts-close:hover {
    background: var(--overlay-nav-hover-bg, #34495e) !important;
    color: var(--overlay-nav-hover-text, #f1c40f) !important;
}

/* Mobile overlay navigation links hover and active states - Border below like second image */
.mobile-posts-overlay .toc-link:hover,
.mobile-posts-overlay .mobile-posts-list .toc-link:hover,
.mobile-posts-overlay .toc-item .toc-link:hover,
.mobile-posts-overlay .toc-main .toc-link:hover {
    background: transparent !important; /* No background fill */
    color: #f1c40f !important; /* Yellow theme color */
    text-decoration: none !important;
    transform: none !important; /* Remove slide effect */
    border: none !important; /* Remove all borders */
    border-bottom: 3px solid #f1c40f !important; /* Yellow bottom border */
    border-radius: 0 !important; /* No border radius */
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace !important;
    font-size: 0.875rem !important;
    padding-bottom: calc(0.25rem - 3px) !important; /* Adjust padding for border */
}

.mobile-posts-overlay .toc-link.active,
.mobile-posts-overlay .mobile-posts-list .toc-link.active,
.mobile-posts-overlay .toc-item .toc-link.active,
.mobile-posts-overlay .toc-main .toc-link.active,
.mobile-posts-overlay .toc-item.active .toc-link {
    background: transparent !important; /* No background fill */
    color: #f1c40f !important; /* Yellow text color */
    text-decoration: none !important;
    border: none !important; /* Remove all borders */
    border-bottom: 3px solid #f1c40f !important; /* Yellow bottom border */
    border-radius: 0 !important; /* No border radius */
    outline: none !important;
    box-shadow: none !important;
    padding: 0.25rem 1rem !important;
    padding-bottom: calc(0.25rem - 3px) !important; /* Adjust padding for border */
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
}

/* Mobile overlay focus states - Match site navigation accessibility */
.mobile-posts-overlay .toc-link:focus,
.mobile-posts-overlay .toc-link:active,
.mobile-posts-overlay .toc-item.active .toc-link:focus,
.mobile-posts-overlay .toc-item.active .toc-link:active {
    outline: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
}

/* Keep bottom border on active tab when focused */
.mobile-posts-overlay .toc-item.active .toc-link:focus,
.mobile-posts-overlay .toc-item.active .toc-link:active {
    border-bottom: 3px solid #f1c40f !important;
}

/* Keyboard navigation support - visible focus for accessibility */
.mobile-posts-overlay .toc-link:focus-visible {
    outline: 2px dashed #f1c40f;
    outline-offset: 2px;
}

/* Mobile overlay section titles - Remove hierarchy styling */
.mobile-posts-overlay .toc-title {
    display: none !important; /* Hide category titles to remove hierarchy */
}

/* Mobile overlay list styling - Remove hierarchy */
.mobile-posts-overlay .toc-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Mobile overlay items - All aligned at same level - Override all conflicting styles */
.mobile-posts-overlay .toc-item,
.mobile-posts-overlay .mobile-posts-list .toc-item {
    margin: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; /* Add subtle separator lines */
}

/* Remove border from last item */
.mobile-posts-overlay .toc-item:last-child,
.mobile-posts-overlay .mobile-posts-list .toc-item:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
}

/* Make all links look the same regardless of hierarchy */
.mobile-posts-overlay .toc-link,
.mobile-posts-overlay .mobile-posts-list .toc-link,
.mobile-posts-overlay .toc-item .toc-link,
.mobile-posts-overlay .toc-main .toc-link {
    color: var(--text-secondary, #6c757d) !important;
    background: transparent !important;
    border-radius: 0.375rem !important;
    transition: all var(--transition-fast, 0.15s ease-in-out) !important;
    padding: 0.25rem 1rem !important;
    margin: 0 !important; /* Remove all margins for consistent spacing */
    display: block !important;
    text-decoration: none !important;
    font-weight: 400 !important;
    font-size: 0.875rem !important;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace !important;
    border: none !important; /* No border by default */
    line-height: 1.4 !important; /* Consistent line height */
    position: static !important; /* Override any positioning */
}

/* Lock body scroll when overlay is active */
body.menu-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
}

/* Ensure overlay content scrolls independently */
.mobile-posts-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    /* Prevent content from scrolling with page */
    position: relative;
    z-index: 10000;
    background: var(--overlay-content-bg);
}

/* Ensure overlay content scrolls independently */
.mobile-posts-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    /* Prevent content from scrolling with page */
    position: relative;
    z-index: 10000;
    background: var(--overlay-content-bg);
}

.mobile-posts-header {
    background: var(--overlay-header-bg);
    color: var(--overlay-header-text);
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--overlay-header-border);
    position: sticky;
    top: 0;
    z-index: 10000 !important; /* Higher than overlay */
}

.mobile-posts-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.mobile-posts-close,
.mobile-posts-back {
    background: transparent;
    border: none;
    color: var(--overlay-header-text);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    min-width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-posts-close:hover,
.mobile-posts-back:hover {
    background: rgba(255, 255, 255, 0.1);
}

.mobile-posts-back {
    margin-right: 0.5rem;
}

.mobile-posts-list {
    flex: 1;
    padding: 1rem 0; /* Remove left/right padding */
    margin: 0 !important; /* Remove margins */
    background: var(--overlay-content-bg);
}

/* Sidebar Left - Clean TOC Styles */
.sidebar-left {
    background: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
}

.sidebar-left .sidebar-content {
    background: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
}

.sidebar-left .toc-section {
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.sidebar-left .toc-title {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #1e3a8a !important;
    margin: 0 !important;
    padding: 0.75rem 1rem 0.75rem 1rem !important; /* Reduced top and bottom padding */
    background: #ffffff !important;
    border: none !important;
    border-bottom: 2px solid #e5e7eb !important; /* Add bottom border */
    width: 100% !important;
    box-sizing: border-box !important;
    line-height: 1.3 !important;
}

.sidebar-left .toc-title::after {
    display: none !important;
}

.sidebar-left .toc-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.sidebar-left .toc-item {
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
    overflow: visible !important;
}

.sidebar-left .toc-link {
    display: block !important;
    width: 100% !important;
    padding: 0.2rem 1rem 0.2rem 0.5rem !important; /* Reduced left padding from 1rem to 0.5rem */
    color: #4b5563 !important;
    text-decoration: none !important;
    font-size: 0.9rem !important;
    font-weight: 400 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    line-height: 1.2 !important;
    background: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    transition: all 0.2s ease !important;
    position: relative !important;
}

.sidebar-left .toc-link:hover {
    background: #ffffff !important;
    color: #1e3a8a !important;
    text-decoration: none !important;
    border: none !important;
    padding: 0.2rem 1rem !important;
}

.sidebar-left .toc-link:hover::after {
    display: none !important;
}

.sidebar-left .toc-item.active .toc-link:hover {
    background: rgba(30, 58, 138, 0.1) !important;
    color: #1e3a8a !important;
}

.sidebar-left .toc-link:focus {
    outline: none !important;
    box-shadow: none !important;
    background: #ffffff !important;
    color: #4b5563 !important;
}

.sidebar-left .toc-link:active {
    outline: none !important;
    box-shadow: none !important;
    background: #ffffff !important;
    color: #4b5563 !important;
}

.sidebar-left .toc-link:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.sidebar-left .toc-item.active .toc-link:focus {
    outline: none !important;
    box-shadow: none !important;
    background: rgba(30, 58, 138, 0.1) !important;
    color: #1e3a8a !important;
}

.sidebar-left .toc-item.active .toc-link:active {
    outline: none !important;
    box-shadow: none !important;
    background: rgba(30, 58, 138, 0.1) !important;
    color: #1e3a8a !important;
}

.sidebar-left .toc-item.active .toc-link {
    background: rgba(30, 58, 138, 0.1) !important;
    color: #1e3a8a !important;
    font-weight: 600 !important;
    padding: 0.2rem 0 0.2rem 1rem !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
}

.sidebar-left .toc-item.active .toc-link::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    background: #1e3a8a;
    z-index: 1;
}

.sidebar-left .toc-item.toc-main .toc-link {
    font-weight: 400 !important; /* Match site navigation font weight */
    color: var(--text-secondary, #666666) !important; /* Gray text for white background */
    border-left: none; /* Remove border-left to eliminate visual padding */
    padding: 0.5rem 0.5rem !important; /* Reduced left/right padding for more compact layout */
    margin: 0 !important;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace !important; /* Match site navigation font */
    font-size: 0.875rem !important; /* Match site navigation font size */
    background: transparent !important; /* Match site navigation background */
}

/* Mobile sidebar navigation styling */
.mobile-posts-list .toc-section {
    margin-bottom: 1.5rem;
}

.mobile-posts-list .toc-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--overlay-title-text);
    margin-bottom: 0.75rem;
    padding: 0.75rem 1rem 0.75rem 1rem; /* Consistent padding with sidebar-left */
    border-bottom: 2px solid #e5e7eb; /* Updated to match sidebar-left */
}

.mobile-posts-list .toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-posts-list .toc-item {
    margin-bottom: 0 !important; /* Remove bottom margin */
}

.mobile-posts-list .toc-link {
    display: block;
    padding: 0.75rem 1rem 0.75rem 0.5rem; /* Reduced left padding from 1rem to 0.5rem */
    color: var(--overlay-nav-text);
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s ease;
    font-size: 1rem !important; /* Better readable size */
    line-height: 1.4;
}

.mobile-posts-list .toc-link:hover {
    background-color: var(--overlay-nav-hover-bg);
    color: var(--overlay-nav-hover-text);
    text-decoration: none;
}

.mobile-posts-list .toc-item.active .toc-link {
    background-color: var(--overlay-nav-active-bg);
    color: var(--overlay-nav-active-text);
    font-weight: 500;
}

.mobile-posts-list .toc-item.toc-main .toc-link {
    font-weight: 600;
    color: var(--overlay-title-text);
    border-left: 3px solid var(--overlay-title-border);
    padding-left: calc(0.75rem + 1%); /* Add 1% left padding */
}

.mobile-posts-list .category-link,
.mobile-posts-list .resource-link {
    display: block;
    text-decoration: none;
    color: var(--overlay-link-text);
    transition: color 0.2s ease;
}

.mobile-posts-list .category-link:hover,
.mobile-posts-list .resource-link:hover {
    color: var(--overlay-link-hover-text);
}

.mobile-posts-list .category-name,
.mobile-posts-list .resource-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.3;
}

.mobile-posts-list .category-link:hover .category-name,
.mobile-posts-list .resource-link:hover .resource-title {
    color: var(--overlay-link-hover-text);
}

/* TOC Section styling for mobile overlay (sidebar-left functionality) */
.mobile-posts-list .toc-section {
    margin: 0;
    padding: 0;
    margin-left: 0 !important; /* Remove left margin */
    margin-right: 0 !important; /* Remove right margin */
}

.mobile-posts-list .toc-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--overlay-title-text);
    margin: 0 0 1rem 0;
    padding: 0.75rem 1rem 0.75rem 1rem !important; /* Consistent padding with sidebar-left */
    border-bottom: 2px solid #e5e7eb; /* Updated to match sidebar-left */
}

.mobile-posts-list .toc-list {
    list-style: none;
    padding: 0 !important;
    margin: 0 !important;
    margin-left: 0 !important; /* Ensure no left margin */
    margin-right: 0 !important; /* Ensure no right margin */
}

.mobile-posts-list .toc-item {
    margin: 0 !important;
    padding: 0 !important;
    margin-left: 0 !important; /* Ensure no left margin */
    margin-right: 0 !important; /* Ensure no right margin */
    margin-bottom: 0 !important; /* Remove bottom margin */
    border-bottom: 1px solid var(--border-color);
}

.mobile-posts-list .toc-item:last-child {
    border-bottom: none;
}

.mobile-posts-list .toc-link {
    display: block;
    padding: 0.5rem 0; /* Remove left/right padding, minimal top/bottom */
    color: var(--overlay-nav-text);
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 0.875rem !important; /* Better readable size - 14px */
    line-height: 1.2;
    margin: 0 !important; /* Remove all margins */
}

.mobile-posts-list .toc-link:hover {
    background-color: var(--overlay-nav-hover-bg);
    color: var(--overlay-nav-hover-text);
    padding-left: 0; /* Remove left padding on hover */
}

.mobile-posts-list .toc-item.active .toc-link {
    background-color: var(--overlay-nav-active-bg);
    color: var(--overlay-nav-active-text);
    font-weight: 500;
    border-left: none; /* Remove border-left */
    padding: 0.5rem 0 0.5rem 1% !important; /* Add 1% left padding */
    margin: 0 !important; /* Remove margins */
}

.mobile-posts-list .toc-item.toc-main .toc-link {
    font-weight: 600;
    color: var(--overlay-title-text);
    font-size: 0.875rem !important; /* Better readable size - 14px */
    padding: 0.5rem 0 0.5rem 1% !important; /* Add 1% left padding */
    margin: 0 !important; /* Remove margins */
}

.mobile-posts-list .toc-item.toc-main .toc-link:hover {
    background-color: var(--overlay-link-hover-bg);
    color: var(--overlay-link-hover-text);
}

/* Topics/Topics list styling for mobile overlay */
.mobile-posts-list .topics-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-posts-list .topic-item {
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 1rem;
}

.mobile-posts-list .topic-link {
    display: block;
    text-decoration: none;
    color: var(--overlay-link-text);
    transition: all 0.2s ease;
    padding: 0.75rem;
    background: var(--overlay-content-bg);
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.mobile-posts-list .topic-link:hover {
    color: var(--overlay-link-hover-text);
    background: var(--overlay-link-hover-bg);
    border-color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: var(--shadow-primary);
}

.mobile-posts-list .topic-title {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--overlay-link-text);
}

.mobile-posts-list .topic-link:hover .topic-title {
    color: var(--overlay-link-hover-text);
}

.mobile-posts-list .topic-excerpt {
    margin: 0 0 0.5rem 0;
    font-size: 1rem !important; /* Better readable size */
    line-height: 1.4;
    color: var(--text-secondary);
}

.mobile-posts-list .topic-date {
    font-size: 0.9rem !important; /* Minimum readable size for metadata */
    color: var(--text-muted);
    display: block;
}

/* Style sidebar content in mobile overlay */
.mobile-posts-list .toc-section {
    margin-bottom: 1.5rem;
    margin-left: 0 !important; /* Remove left margin */
    margin-right: 0 !important; /* Remove right margin */
    padding: 0 !important; /* Remove padding */
}

.mobile-posts-list .toc-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--overlay-title-text);
    margin-bottom: 0.5rem;
    padding: 0 !important; /* Remove padding */
    padding-bottom: 0.5rem !important; /* Keep bottom padding */
    border-bottom: 2px solid var(--overlay-title-border);
}

.mobile-posts-list .toc-list {
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
    margin-left: 0 !important; /* Ensure no left margin */
    margin-right: 0 !important; /* Ensure no right margin */
}

.mobile-posts-list .toc-item {
    margin-bottom: 0 !important; /* Remove bottom margin */
    margin-left: 0 !important; /* Remove left margin */
    margin-right: 0 !important; /* Remove right margin */
    padding: 0 !important; /* Remove padding */
}

.mobile-posts-list .toc-link {
    display: block;
    padding: 0.5rem 0; /* Remove left/right padding, minimal top/bottom */
    color: var(--overlay-nav-text);
    text-decoration: none;
    border-radius: 0; /* Remove border-radius */
    transition: all 0.2s ease;
    font-size: 0.875rem !important; /* Better readable size - 14px */
    line-height: 1.2;
    margin: 0 !important; /* Remove all margins */
}

.mobile-posts-list .toc-link:hover {
    background-color: var(--overlay-nav-hover-bg);
    color: var(--overlay-nav-hover-text);
}

.mobile-posts-list .toc-item.active .toc-link {
    background-color: var(--overlay-nav-active-bg);
    color: var(--overlay-nav-active-text);
}

.mobile-posts-list .toc-main .toc-link {
    font-weight: 600;
    color: var(--overlay-title-text);
}

.mobile-posts-list .toc-main .toc-link:hover {
    background-color: var(--overlay-nav-hover-bg);
}

.posts-list, .categories-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.post-item, .category-item {
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
}

.post-item:last-child, .category-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.post-link, .category-link {
    text-decoration: none;
    color: #333;
    display: block;
    transition: color 0.2s ease;
}

.post-link:hover, .category-link:hover {
    color: #2c3e50;
}

.post-title, .category-name {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.3;
}

.post-excerpt {
    margin: 0 0 0.5rem 0;
    color: #666;
    font-size: 1rem !important; /* Better readable size */
    line-height: 1.4;
}

.post-date {
    color: #999;
    font-size: 0.9rem !important; /* Minimum readable size for metadata */
}

/* Enhanced No Posts / Search Results Styling */
.no-posts {
    text-align: center;
    padding: var(--spacing-3xl) var(--spacing-lg);
    background-color: var(--bg-primary);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    margin: var(--spacing-xl) 0;
    border: 1px solid var(--border-color);
    max-width: 100%;
    box-sizing: border-box;
}

.no-posts h2 {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-lg);
    line-height: 1.2;
}

.no-posts p {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xl);
    line-height: 1.6;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.no-posts .search-form {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    gap: var(--spacing-sm);
    align-items: stretch;
    position: relative;
}

.no-posts .search-form .search-input {
    flex: 1;
    padding: var(--spacing-md) var(--spacing-lg);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    font-size: var(--font-size-base);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: all var(--transition-normal);
    min-width: 0;
}

.no-posts .search-form .search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-lighter);
}

.no-posts .search-form .search-button {
    padding: var(--spacing-md) var(--spacing-xl);
    background-color: var(--primary-color);
    color: var(--text-light);
    border: none;
    border-radius: var(--border-radius-lg);
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    white-space: nowrap;
    flex-shrink: 0;
}

.no-posts .search-form .search-button:hover {
    background-color: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.no-posts .search-form .search-button:active {
    transform: translateY(0);
}

.no-posts .search-form .search-button i {
    font-size: var(--font-size-base);
    line-height: 1;
}

.no-posts .search-form .search-button i::before {
    display: inline-block;
    vertical-align: middle;
}


/* Styling for "No posts found" message in sidebar */
.sidebar-left .toc-item .toc-link:not([href]) {
    color: var(--text-muted);
    font-style: italic;
    cursor: default;
    opacity: 0.7;
}

.sidebar-left .toc-item .toc-link:not([href]):hover {
    background: transparent !important;
    color: var(--text-muted) !important;
}

/* Page Header Styling for Archive Pages */
.page-header {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 2px solid var(--border-color);
}

.page-title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: #1e3a8a;
    margin-bottom: var(--spacing-md);
    line-height: 1.2;
}

.archive-description {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    line-height: 1.6;
    margin-top: var(--spacing-md);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .no-posts {
        padding: var(--spacing-xl) var(--spacing-md);
        margin: var(--spacing-lg) 0;
    }
    
    .no-posts h2 {
        font-size: var(--font-size-2xl);
    }
    
    .no-posts p {
        font-size: var(--font-size-base);
    }
    
    .no-posts .search-form {
        flex-direction: column;
        gap: var(--spacing-md);
        max-width: 100%;
    }
    
    .no-posts .search-form .search-input,
    .no-posts .search-form .search-button {
        width: 100%;
        justify-content: center;
    }
    
    .no-posts .search-form .search-button {
        padding: var(--spacing-md);
    }
}

@media (max-width: 768px) {
    .mobile-posts-content {
        margin: 0;
        border-radius: 0;
    }
    
    .mobile-posts-header {
        padding: 1rem;
    }
    
    .mobile-posts-list {
        padding: 0.5rem;
    }
    
    .post-title, .category-name {
        font-size: 1rem;
    }
    
    .post-excerpt {
        font-size: 0.85rem;
    }
    
    /* Hide sidebar-left on mobile */
    .sidebar-left {
        display: none !important;
    }
    
    /* Adjust content area for mobile */
    .content-area {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
    
    .main-content {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Live Search Results */
.live-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 0 0 0.5rem 0.5rem;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    z-index: 10002;
    max-height: 300px;
    overflow-y: auto;
    display: none;
}

.live-search-results.show {
    display: block;
}

.live-search-results ul,
.live-search-results .search-results {
    list-style: none;
    margin: 0;
    padding: 0;
}

.live-search-results li,
.live-search-results .search-results li {
    border-bottom: 1px solid #f1f3f4;
    margin: 0;
    padding: 0;
}

.live-search-results li:last-child,
.live-search-results .search-results li:last-child {
    border-bottom: none;
}

.live-search-results li a,
.live-search-results .search-results li a {
    display: block;
    padding: 0.75rem 1rem;
    color: #212529;
    text-decoration: none;
    transition: background-color 0.15s ease-in-out;
}

.live-search-results li a:hover,
.live-search-results .search-results li a:hover {
    background-color: #f8f9fa;
    color: #007BFF;
}

.search-loading,
.search-error {
    padding: 0.75rem 1rem;
    text-align: center;
    color: #6c757d;
    font-style: italic;
}

.search-error {
    color: #dc3545;
}

/* Mobile Live Search Results */
#live-search-results-mobile {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    z-index: 10002;
    max-height: 250px;
    overflow-y: auto;
    display: none;
    margin-top: 0.5rem;
}

#live-search-results-mobile.show {
    display: block;
}

.live-search-results.show {
    display: block;
}

.live-search-results ul,
#live-search-results-mobile ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.live-search-results li,
#live-search-results-mobile li {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--border-light);
}

.live-search-results li:last-child,
#live-search-results-mobile li:last-child {
    border-bottom: none;
}

.live-search-results li a,
#live-search-results-mobile li a {
    display: block;
    color: var(--text-primary);
    text-decoration: none;
    padding: var(--spacing-xs) 0;
    transition: color var(--transition-fast);
}

.live-search-results li a:hover,
#live-search-results-mobile li a:hover {
    color: var(--primary-color);
}

.search-loading,
.search-error {
    padding: var(--spacing-md);
    text-align: center;
    color: var(--text-muted);
}

/* User Dropdown - Duplicate rules removed to prevent conflicts */

/* Mobile dropdown positioning - Cleaned up */
@media (max-width: 768px) {
    .wp-user-menu {
        position: fixed !important;
        top: auto !important;
        right: 20px !important;
        left: auto !important;
        min-width: 160px !important;
        margin-top: 0 !important;
        z-index: 99999 !important;
        transform: translateY(-10px);
    }
    
    .wp-user-dropdown.active .wp-user-menu {
        position: fixed !important;
        top: auto !important;
        right: 20px !important;
        left: auto !important;
        transform: translateY(0) !important;
        z-index: 99999 !important;
    }
    
    .header-actions {
        overflow: visible !important;
    }
    
    .header-container {
        overflow: visible !important;
    }
}

.wp-user-menu-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-primary);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.wp-user-menu-item:hover {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.wp-user-menu-item.logout {
    color: var(--error-color);
}

.wp-user-menu-item.logout:hover {
    background-color: var(--error-light);
    color: var(--error-dark);
}

.wp-user-menu-item svg {
    width: 16px;
    height: 16px;
}

/* Authentication Buttons - corrected class names */
.wp-auth-button {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--primary-color);
    color: var(--text-light);
    text-decoration: none;
    border-radius: var(--border-radius);
    font-weight: 500;
    transition: all var(--transition-fast);
}

.wp-auth-button:hover {
    background-color: var(--primary-dark);
    color: var(--text-light);
    text-decoration: none;
    transform: translateY(-1px);
}

.wp-auth-button.register {
    background-color: var(--accent-color);
}

.wp-auth-button.register:hover {
    background-color: var(--accent-dark);
}

/* Remove duplicate mobile menu styles - using the ones above */

/* Post Navigation */
.post-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--border-light);
}

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

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

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

.post-navigation a {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--primary-color);
    color: var(--text-light);
    text-decoration: none;
    border-radius: var(--border-radius);
    font-weight: 500;
    transition: all var(--transition-fast);
}

.post-navigation a:hover {
    background-color: var(--primary-dark);
    color: var(--text-light);
    text-decoration: none;
    transform: translateY(-1px);
}

/* Post Navigation Text Styling - Aggressive Override */
.post-navigation .nav-subtitle,
.post-navigation div.nav-subtitle {
    display: block !important;
    font-size: var(--font-size-sm) !important;
    font-weight: 500 !important;
    margin-bottom: var(--spacing-xs) !important;
    opacity: 0.8 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: initial !important;
    max-width: none !important;
    width: auto !important;
}

.post-navigation .nav-title,
.post-navigation div.nav-title {
    display: block !important;
    font-size: var(--font-size-base) !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: initial !important;
    max-width: none !important;
    width: auto !important;
    height: auto !important;
}

.post-navigation a {
    display: block !important;
    padding: var(--spacing-md) var(--spacing-lg) !important;
    text-align: left !important;
    min-height: auto !important;
    white-space: normal !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    text-overflow: initial !important;
    height: auto !important;
    max-height: none !important;
}

/* Override any WordPress core styles */
.post-navigation a * {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: initial !important;
    max-width: none !important;
    width: auto !important;
    height: auto !important;
}

/* WordPress Navigation Override - Most Specific */
.nav-links .nav-previous a,
.nav-links .nav-next a,
.post-navigation .nav-previous a,
.post-navigation .nav-next a {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: initial !important;
    max-width: none !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

.nav-links .nav-previous a *,
.nav-links .nav-next a *,
.post-navigation .nav-previous a *,
.post-navigation .nav-next a * {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: initial !important;
    max-width: none !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
}

@media (max-width: 768px) {
    .post-navigation {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .post-navigation .nav-previous,
    .post-navigation .nav-next {
        max-width: 100%;
        text-align: center;
    }
    
    .post-navigation a {
        text-align: center !important;
        padding: var(--spacing-sm) var(--spacing-md) !important;
    }
    
    .post-navigation .nav-subtitle {
        font-size: var(--font-size-xs);
    }
    
    .post-navigation .nav-title {
        font-size: var(--font-size-sm);
    }
}

/* Desktop-only: Post navigation layout and sizing */
@media (min-width: 1024px) {
    /* Keep buttons anchored left/right with space between */
    .single .post-navigation {
        justify-content: space-between !important;
        gap: 0 !important;
    }

    /* Fixed-width containers so middle stays empty */
    .single .post-navigation .nav-previous,
    .single .post-navigation .nav-next {
        flex: 0 0 auto !important;
        width: 200px !important; /* fixed button area */
        max-width: 200px !important;
        min-width: 200px !important;
    }

    .single .post-navigation .nav-previous { text-align: left !important; }
    .single .post-navigation .nav-next { text-align: right !important; }

    /* Make links look like compact buttons inside their fixed areas */
    .single .post-navigation .nav-previous a,
    .single .post-navigation .nav-next a,
    .single .post-navigation .nav-previous .nav-placeholder,
    .single .post-navigation .nav-next .nav-placeholder {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important; /* allow marquee to scroll from left */
        width: 100% !important;   /* fill the 200px container */
        height: 44px !important;
        padding: 0 var(--spacing-md) !important;
        white-space: nowrap !important; /* container controls overflow */
        overflow: hidden !important;
    }

    /* Placeholder maintains size when link is missing */
    .single .post-navigation .nav-placeholder {
        visibility: hidden;
        background: transparent !important;
        border: none !important;
    }

    /* Banner-style marquee: continuously scroll the full text */
    .single .post-navigation .nav-marquee {
        display: inline-block !important;
        white-space: nowrap !important;
        will-change: transform;
        animation: navMarquee 12s linear infinite;
    }

    /* duplicate content for seamless looping */
    .single .post-navigation .nav-marquee::after {
        content: ' \00A0\00A0' attr(data-text);
    }

    @keyframes navMarquee {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }
}

/* Comments Styling */
.comments-area {
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--border-light);
}

.comments-title {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-lg);
}

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

.comment-body {
    padding: var(--spacing-lg) 0;
    border-bottom: 1px solid var(--border-light);
}

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

.comment-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.comment-author img {
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius-full);
    margin-right: var(--spacing-sm);
}

.comment-metadata {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.comment-content {
    margin-top: var(--spacing-md);
    line-height: 1.7;
}

.comment-content p {
    margin-bottom: var(--spacing-sm);
}

.reply {
    margin-top: var(--spacing-md);
}

.reply a {
    font-size: var(--font-size-sm);
    color: var(--primary-color);
    text-decoration: none;
}

.reply a:hover {
    text-decoration: none;
}

/* Comment Form */
.comment-form {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--border-light);
}

.comment-form-comment,
.comment-form-author,
.comment-form-email,
.comment-form-url {
    margin-bottom: var(--spacing-md);
}

.comment-form-comment label,
.comment-form-author label,
.comment-form-email label,
.comment-form-url label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: 500;
}

.comment-form-comment textarea,
.comment-form-author input,
.comment-form-email input,
.comment-form-url input {
    width: 100%;
    padding: var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    transition: border-color var(--transition-fast);
}

.comment-form-comment textarea:focus,
.comment-form-author input:focus,
.comment-form-email input:focus,
.comment-form-url input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px var(--primary-lighter);
}

.form-submit {
    margin-top: var(--spacing-lg);
}

.submit {
    background-color: var(--primary-color);
    color: var(--text-light);
    border: none;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.submit:hover {
    background-color: var(--primary-dark);
    transform: translateY(-1px);
}

/* Social Links - Yellow Theme & Circular Design */
.social-links {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background-color: transparent !important; /* Transparent background */
    color: #6c757d !important; /* Match footer text color */
    text-decoration: none;
    border-radius: 50% !important; /* Perfect circle */
    border: 2px solid #6c757d !important; /* Gray border */
    transition: all var(--transition-fast);
    font-size: 1rem !important; /* Icon size */
}

.social-link:hover {
    background-color: #f1c40f !important; /* Yellow background on hover */
    color: #1a1a1a !important; /* Dark text on yellow background */
    border-color: #f1c40f !important; /* Yellow border on hover */
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(241, 196, 15, 0.3); /* Yellow shadow */
}

/* Error 404 Styling */
.error-404 {
    text-align: center;
    padding: var(--spacing-3xl) 0;
}

.error-404-widgets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-xl);
    margin-top: var(--spacing-2xl);
}

.error-404-widgets .widget {
    text-align: left;
    background: var(--bg-light);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
}

.error-404-widgets .widget h3 {
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
}

.error-404-widgets .widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.error-404-widgets .widget li {
    margin-bottom: var(--spacing-xs);
}

.error-404-widgets .widget a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.error-404-widgets .widget a:hover {
    color: var(--primary-color);
}


/* Home Page Full Width Layout - Aggressive Override */
.home-content {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: var(--spacing-lg) 0 !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.home-content .posts-container {
    max-width: none !important;
    width: 100% !important;
    display: block !important;
}

.home-content .post {
    max-width: none !important;
    width: 100% !important;
    margin: 0 auto var(--spacing-xl) auto !important;
}

/* Page Layout Override - Ensure pages use single column */
.page .content-area {
    display: block !important;
    grid-template-columns: 1fr !important;
    margin-top: var(--spacing-xs) !important;
    gap: var(--spacing-xs) !important;
}

.page .sidebar-left,
.page .sidebar-right {
    display: none !important;
}

.page .main-content {
    width: 100% !important;
    max-width: 800px !important;
    margin-left: var(--spacing-sm) !important;
    margin-right: var(--spacing-xl) !important;
}

/* Content Area - Proper Width Constraints */
.content-area {
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    max-width: 100% !important;
    width: 100%;
    box-sizing: border-box;
}

/* Site main padding */
.site-main {
    padding-top: 0 !important;
    padding-left: 0 !important; /* No left padding */
    padding-bottom: 0 !important; /* Remove bottom padding */
    margin-top: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Specific padding adjustment for single posts */
.single .site-main {
    padding-left: 0 !important; /* Remove left padding for single posts since we have grid layout */
    padding-right: 0 !important; /* Remove right padding for full-width layout */
    max-width: 100vw !important; /* Full viewport width */
    overflow-x: hidden !important;
}

/* Remove container margins for single posts */
.single .container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
}

/* All hamburger menu and navigation styles moved to navigation-master.css */

/* Responsive styles moved to responsive.css - duplicates removed */

/* Override grid layout for single posts - 3 column layout */
.single .content-area {
    display: grid !important;
    grid-template-columns: 15% 75% 10% !important; /* Reduced left sidebar (15%), main content (75%), right sidebar (10%) */
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important; /* No margins - full layout view */
    gap: 0 !important; /* No gaps for seamless layout */
    max-width: 100% !important;
    width: 100% !important;
    min-height: 100vh !important;
    box-sizing: border-box !important;
}

/* Adjust sidebar display for single posts */
.single .sidebar-right {
    display: block !important; /* Show right sidebar for ads */
    background-color: var(--bg-primary);
    border-left: none !important;
    border-bottom: none !important; /* ensure no bottom border */
    box-shadow: none !important; /* remove shadow border */
    padding: var(--spacing-md) !important;
    min-height: 100vh !important;
    box-sizing: border-box !important;
}

.single .sidebar-left {
    display: block !important;
    background-color: var(--bg-primary, #ffffff) !important; /* Clean white background to match theme */
    padding: 0 !important; /* Remove all padding */
    position: relative;
    top: 0;
    min-height: 100vh !important; /* Match main-content height */
    height: 100% !important; /* Full height */
    width: 100% !important;
    box-sizing: border-box !important;
    border-right: none !important;
}

/* Hide sidebar-left on tablet and mobile devices for mobile hamburger menu */
@media (max-width: 1024px) {
    .single .sidebar-left,
    .single .sidebar-right {
        display: none !important;
    }
    
    .single .content-area {
        display: block !important;
        grid-template-columns: none !important;
    }
    
    .single .main-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: var(--spacing-md) var(--spacing-sm) !important;
    }
    
    /* Fix hamburger menu positioning for single posts */
    .single .nav-container {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: var(--spacing-sm) var(--spacing-md) !important;
    }
    
    .single .mobile-menu-toggle {
        display: flex !important;
        position: static !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: 2.5rem !important;
        height: 2.5rem !important;
        background: transparent !important;
        border: none !important;
        color: #ffffff !important;
        cursor: pointer !important;
        border-radius: var(--border-radius) !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.2rem !important;
        transition: all 0.2s ease !important;
        z-index: 1001 !important;
        margin-right: var(--spacing-sm) !important;
        margin-left: 0 !important;
        flex-shrink: 0 !important;
        padding: 0 !important;
    }
    
    .single .mobile-menu-toggle:hover {
        background: rgba(255, 255, 255, 0.1) !important;
    }
    
    .single .mobile-menu-toggle i {
        font-size: 1.2rem !important;
        transition: all 0.2s ease !important;
        font-weight: bold !important;
    }
    
    /* Adjust category navigation for single posts */
    .single .nav-menu {
        display: flex !important;
        flex-direction: row !important;
        flex: 1 !important;
        justify-content: flex-start !important;
        align-items: center !important;
        margin-left: 0 !important;
        padding: 0 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .single .nav-menu li {
        flex-shrink: 0 !important;
        width: auto !important;
        margin: 0 !important;
    }
    
    .single .nav-menu a {
        padding: var(--spacing-sm) var(--spacing-md) !important;
        border-radius: var(--border-radius) !important;
        text-align: center !important;
        margin: 0 var(--spacing-xs) !important;
        white-space: nowrap !important;
        display: block !important;
        font-size: 0.85rem !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        background-color: transparent !important;
        color: #ffffff !important;
        transition: all 0.2s ease !important;
        border: none !important;
        min-width: auto !important;
    }
    
    /* Show mobile posts overlay on tablets and below for single posts */
    .single #mobile-posts-overlay {
        display: block !important;
    }
}

/* Additional mobile-specific adjustments */
@media (max-width: 768px) {
    .single .main-content {
        padding: var(--spacing-sm) !important;
    }
    
    /* Show mobile posts overlay on mobile for single posts */
    .single #mobile-posts-overlay {
        display: block !important;
    }
}

/* Main content full width for single posts */
.single .main-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: var(--spacing-lg) var(--spacing-md) !important; /* Reduced horizontal padding */
    background-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    min-height: 100vh !important;
    border-left: 1px solid var(--border-color) !important;
    border-right: 1px solid var(--border-color) !important;
}

/* Right Sidebar Ad Units */
.single .sidebar-right .widget,
.single .sidebar-right .ad-unit {
    background-color: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    text-align: center;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    box-sizing: border-box;
}

.single .sidebar-right .ad-unit-content {
    color: #6c757d;
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.single .sidebar-right .ad-unit::before {
    content: "Ad Unit";
    color: #adb5bd;
    font-size: var(--font-size-xs);
    margin-bottom: var(--spacing-sm);
}

/* Fallback for empty right sidebar */
.single .sidebar-right:empty::after {
    content: "Ad Space Available";
    display: block;
    background-color: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    text-align: center;
    color: #6c757d;
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Full Width Page Content */
.page-content-full {
    width: 100% !important;
    max-width: 1400px !important;
    margin-left: var(--spacing-sm) !important;
    margin-right: var(--spacing-xl) !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
    background-color: var(--bg-primary);
    min-height: calc(100vh - 200px);
    box-sizing: border-box;
}

.page-content-full .post {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.page-content-full .post-header {
    text-align: left;
    margin-bottom: var(--spacing-xl);
}

.page-content-full .post-title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
    line-height: 1.2;
}

.page-content-full .post-thumbnail {
    margin-bottom: var(--spacing-xl);
    text-align: center;
}

.page-content-full .post-thumbnail img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-lg);
}

.page-content-full .post-content {
    line-height: 1.8;
    font-size: var(--font-size-lg);
    color: var(--text-primary);
}

.page-content-full .post-content h1,
.page-content-full .post-content h2,
.page-content-full .post-content h3,
.page-content-full .post-content h4,
.page-content-full .post-content h5,
.page-content-full .post-content h6 {
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
    font-weight: 600;
}

.page-content-full .post-content h1 {
    font-size: var(--font-size-2xl);
}

.page-content-full .post-content h2 {
    font-size: var(--font-size-xl);
}

.page-content-full .post-content h3 {
    font-size: var(--font-size-lg);
}

.page-content-full .post-content p {
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-lg);
}

.page-content-full .post-content ul,
.page-content-full .post-content ol {
    margin-bottom: var(--spacing-lg);
    padding-left: var(--spacing-xl);
}

.page-content-full .post-content li {
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-lg);
}

.page-content-full .post-content blockquote {
    border-left: 4px solid var(--primary-color);
    padding-left: var(--spacing-lg);
    margin: var(--spacing-xl) 0;
    font-style: italic;
    color: var(--text-secondary);
    background-color: var(--bg-secondary);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    font-size: var(--font-size-lg);
}

.page-content-full .post-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-lg);
    margin: var(--spacing-lg) 0;
}

.page-content-full .post-content table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--spacing-xl) 0;
    background-color: var(--bg-primary);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.page-content-full .post-content th,
.page-content-full .post-content td {
    padding: var(--spacing-md);
    border: 1px solid var(--border-color);
    text-align: left;
    font-size: var(--font-size-base);
}

.page-content-full .post-content th {
    background-color: var(--bg-secondary);
    font-weight: 600;
    color: var(--text-primary);
}

.page-content-full .page-links {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}

.page-content-full .page-links a {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--primary-color);
    color: var(--text-light);
    text-decoration: none;
    border-radius: var(--border-radius);
    margin: 0 var(--spacing-xs);
    transition: all var(--transition-fast);
}

.page-content-full .page-links a:hover {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
}

/* Responsive page content full */
@media (max-width: 768px) {
    .page-content-full {
        padding: var(--spacing-md) var(--spacing-sm) !important;
    }
    
    .page-content-full .post-title {
        font-size: var(--font-size-2xl);
    }
    
    .page-content-full .post-content {
        font-size: var(--font-size-base);
    }
    
    .page-content-full .post-content p {
        font-size: var(--font-size-base);
    }
    
    .page-content-full .post-content li {
        font-size: var(--font-size-base);
    }
    
    .page-content-full .post-content blockquote {
        font-size: var(--font-size-base);
        padding: var(--spacing-md);
    }
}

@media (max-width: 480px) {
    .page-content-full {
        padding: var(--spacing-sm) !important;
    }
    
    .page-content-full .post-title {
        font-size: var(--font-size-xl);
    }
    
    .page-content-full .post-content {
        font-size: var(--font-size-sm);
    }
    
    .page-content-full .post-content p {
        font-size: var(--font-size-sm);
    }
    
    .page-content-full .post-content li {
        font-size: var(--font-size-sm);
    }
    
    .page-content-full .post-content blockquote {
        font-size: var(--font-size-sm);
        padding: var(--spacing-sm);
    }
}

/* Reduce line height between sentences for better readability - HIGH PRIORITY */
.single .post-content,
.single .entry-content,
.single .content-area .main-content,
.post-content,
.entry-content {
    line-height: 1.3 !important;  /* Reduced from 1.6 to 1.3 */
}

/* Also reduce line height for paragraphs within posts - HIGH PRIORITY */
.single .post-content p,
.single .entry-content p,
.post-content p,
.entry-content p {
    line-height: 1.3 !important;
    margin-bottom: 0.5rem !important;  /* Further reduced paragraph spacing */
    margin-top: 0 !important;  /* Remove top margin from paragraphs */
}


/* Reduce line height for headings - HIGH PRIORITY */
.single .post-content h1,
.single .post-content h2,
.single .post-content h3,
.single .post-content h4,
.single .post-content h5,
.single .post-content h6,
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
    line-height: 1.2 !important;
    margin-top: 0.8rem !important;     /* Further reduced heading spacing */
    margin-bottom: 0.4rem !important;  /* Further reduced bottom spacing */
}

/* Reduce line height for lists - HIGH PRIORITY */
.single .post-content ul,
.single .post-content ol,
.post-content ul,
.post-content ol {
    line-height: 1.3 !important;
    margin-bottom: 0.5rem !important;  /* Reduced list spacing */
    margin-top: 0.3rem !important;     /* Reduced top spacing */
}

.single .post-content li,
.post-content li {
    line-height: 1.3 !important;
    margin-bottom: 0.2rem !important;  /* Further reduced list item spacing */
}

/* Fix line break spacing - reduce space after <br> tags - HIGH PRIORITY */
.single .post-content br,
.single .entry-content br,
.post-content br,
.entry-content br {
    line-height: 0.1 !important;  /* Minimal space after line breaks */
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    height: 0.1em !important;
}

/* Reduce spacing for block elements - HIGH PRIORITY */
.single .post-content div,
.single .entry-content div,
.post-content div,
.entry-content div {
    margin-bottom: 0.3rem !important;
}

/* Reduce spacing for any elements that might add extra space - HIGH PRIORITY */
.single .post-content * + p,
.single .entry-content * + p,
.post-content * + p,
.entry-content * + p {
    margin-top: 0.3rem !important;
}

/* Fix table spacing - reduce blank space above and below tables - HIGH PRIORITY */
.single .post-content table,
.single .entry-content table,
.post-content table,
.entry-content table,
.main-content table {
    margin-top: 0.5rem !important;     /* Minimal space above tables */
    margin-bottom: 0.5rem !important; /* Minimal space below tables */
}

/* Fix responsive table wrapper spacing - HIGH PRIORITY */
.single .post-content .responsive-table,
.single .entry-content .responsive-table,
.post-content .responsive-table,
.entry-content .responsive-table,
.main-content .responsive-table {
    margin-top: 0.5rem !important;     /* Minimal space above table wrappers */
    margin-bottom: 0.5rem !important; /* Minimal space below table wrappers */
}

/* Fix page content full table spacing - HIGH PRIORITY */
.page-content-full .post-content table {
    margin-top: 0.5rem !important;     /* Override var(--spacing-xl) */
    margin-bottom: 0.5rem !important;  /* Override var(--spacing-xl) */
}

/* Fix any table-related spacing from other CSS files - HIGH PRIORITY */
.home-content .post-content table,
.page-content .post-content table {
    margin-top: 0.5rem !important;     /* Override existing margins */
    margin-bottom: 0.5rem !important; /* Override existing margins */
}

/* Fix double bullets from content manager plugin - force standard bullets - HIGH PRIORITY */
.wp-doc-post-magic-content ul {
    list-style-type: disc !important;  /* Force standard disc bullets */
    list-style: disc !important;      /* Override plugin's list-style: none */
    padding-left: 1.5rem !important;   /* Standard indentation */
}

.wp-doc-post-magic-content ol {
    list-style-type: decimal !important; /* Force standard decimal numbers */
    list-style: decimal !important;    /* Override plugin's list-style: none */
    padding-left: 1.5rem !important;   /* Standard indentation */
}

.wp-doc-post-magic-content li {
    list-style: inherit !important;     /* Inherit standard bullets from parent */
    display: list-item !important;    /* Standard list item display */
    padding: 0 !important;             /* Remove plugin's custom padding */
    margin: 0.2rem 0 !important;      /* Minimal spacing */
    line-height: 1.3 !important;     /* Consistent line height */
}

/* Hide plugin's custom bullet elements completely - HIGH PRIORITY */
.wp-doc-post-magic-content .wp-doc-bullet {
    display: none !important;          /* Completely hide custom bullets */
}

/* Override all plugin bullet levels - HIGH PRIORITY */
.wp-doc-post-magic-content .wp-doc-bullet[data-level="0"],
.wp-doc-post-magic-content .wp-doc-bullet[data-level="1"],
.wp-doc-post-magic-content .wp-doc-bullet[data-level="2"],
.wp-doc-post-magic-content .wp-doc-bullet[data-level="3"],
.wp-doc-post-magic-content .wp-doc-bullet[data-level="4"] {
    display: none !important;          /* Hide all custom bullet levels */
}

/* Override plugin bullet pseudo-elements - HIGH PRIORITY */
.wp-doc-post-magic-content .wp-doc-bullet::before,
.wp-doc-post-magic-content .wp-doc-bullet[data-level="0"]::before,
.wp-doc-post-magic-content .wp-doc-bullet[data-level="1"]::before,
.wp-doc-post-magic-content .wp-doc-bullet[data-level="2"]::before,
.wp-doc-post-magic-content .wp-doc-bullet[data-level="3"]::before,
.wp-doc-post-magic-content .wp-doc-bullet[data-level="4"]::before {
    display: none !important;          /* Hide all pseudo-element bullets */
    content: none !important;          /* Remove all content */
}

/* Desktop-specific fix for double bullets - HIGH PRIORITY */
@media screen and (min-width: 769px) {
    .wp-doc-post-magic-content .wp-doc-bullet {
        display: none !important;      /* Hide custom bullets on desktop */
        margin-left: 0 !important;     /* Reset margin */
        margin-right: 0 !important;    /* Reset margin */
    }
    
    .wp-doc-post-magic-content .wp-doc-bullet::before,
    .wp-doc-post-magic-content .wp-doc-bullet[data-level="0"]::before,
    .wp-doc-post-magic-content .wp-doc-bullet[data-level="1"]::before,
    .wp-doc-post-magic-content .wp-doc-bullet[data-level="2"]::before,
    .wp-doc-post-magic-content .wp-doc-bullet[data-level="3"]::before,
    .wp-doc-post-magic-content .wp-doc-bullet[data-level="4"]::before {
        display: none !important;      /* Hide all pseudo-elements on desktop */
        content: none !important;       /* Remove all content */
    }
    
    /* Ensure standard bullets show on desktop */
    .wp-doc-post-magic-content ul {
        list-style-type: disc !important;
        list-style: disc !important;
        padding-left: 1.5rem !important;
    }
    
    .wp-doc-post-magic-content ol {
        list-style-type: decimal !important;
        list-style: decimal !important;
        padding-left: 1.5rem !important;
    }
    
    .wp-doc-post-magic-content li {
        list-style: inherit !important;
        display: list-item !important;
        padding: 0 !important;
        margin: 0.2rem 0 !important;
    }
}

/* ==========================================================================
   Desktop Scrollbar Styling - Clean Implementation (Based on Mobile Logic)
   ========================================================================== */

/* Desktop-specific scrollbar styling - Clean and Simple */
@media screen and (min-width: 769px) {
    /* Universal scrollbar styling for desktop - AGGRESSIVE OVERRIDE */
    ::-webkit-scrollbar {
        width: 8px !important;
        height: 8px !important;
        background: #f1f3f4 !important;
        display: block !important;
    }

    ::-webkit-scrollbar-track {
        background: #f1f3f4 !important;
        border-radius: 6px !important;
        border: 1px solid #e8eaed !important;
        margin: 2px !important;
        display: block !important;
    }

    ::-webkit-scrollbar-thumb {
        background: #c1c8cd !important;
        border-radius: 6px !important;
        border: 1px solid #f1f3f4 !important;
        min-height: 24px !important;
        min-width: 24px !important;
        transition: all 0.2s ease-in-out !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #9aa0a6 !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
    }

    ::-webkit-scrollbar-thumb:active {
        background: #5f6368 !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    }

    ::-webkit-scrollbar-corner {
        background: #f1f3f4 !important;
        display: block !important;
    }

    /* Firefox scrollbar styling for desktop */
    * {
        scrollbar-width: thin !important;
        scrollbar-color: #c1c8cd #f1f3f4 !important;
    }

    /* Body and HTML scrollbar styling for desktop */
    body, html {
        scrollbar-width: thin !important;
        scrollbar-color: #c1c8cd #f1f3f4 !important;
    }

    /* Specific element scrollbar styling for desktop */
    .sidebar-left::-webkit-scrollbar,
    .sidebar-right::-webkit-scrollbar,
    .main-content::-webkit-scrollbar,
    .post-content::-webkit-scrollbar {
        width: 8px !important;
        display: block !important;
    }

    .sidebar-left::-webkit-scrollbar-track,
    .sidebar-right::-webkit-scrollbar-track,
    .main-content::-webkit-scrollbar-track,
    .post-content::-webkit-scrollbar-track {
        background: #f1f3f4 !important;
        border-radius: 6px !important;
        border: 1px solid #e8eaed !important;
        margin: 2px !important;
        display: block !important;
    }

    .sidebar-left::-webkit-scrollbar-thumb,
    .sidebar-right::-webkit-scrollbar-thumb,
    .main-content::-webkit-scrollbar-thumb,
    .post-content::-webkit-scrollbar-thumb {
        background: #c1c8cd !important;
        border-radius: 6px !important;
        border: 1px solid #f1f3f4 !important;
        min-height: 24px !important;
        transition: all 0.2s ease-in-out !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .sidebar-left::-webkit-scrollbar-thumb:hover,
    .sidebar-right::-webkit-scrollbar-thumb:hover,
    .main-content::-webkit-scrollbar-thumb:hover,
    .post-content::-webkit-scrollbar-thumb:hover {
        background: #9aa0a6 !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
    }

    /* Override any conflicting navigation scrollbar rules */
    .nav-menu::-webkit-scrollbar {
        display: block !important;
        width: 8px !important;
    }
    
    .nav-menu::-webkit-scrollbar-thumb {
        background: #c1c8cd !important;
        border-radius: 6px !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Force scrollbar visibility with maximum specificity */
    html::-webkit-scrollbar,
    body::-webkit-scrollbar,
    *::-webkit-scrollbar {
        width: 8px !important;
        height: 8px !important;
        display: block !important;
        background: #f1f3f4 !important;
    }

    html::-webkit-scrollbar-track,
    body::-webkit-scrollbar-track,
    *::-webkit-scrollbar-track {
        background: #f1f3f4 !important;
        border-radius: 6px !important;
        border: 1px solid #e8eaed !important;
        margin: 2px !important;
        display: block !important;
    }

    html::-webkit-scrollbar-thumb,
    body::-webkit-scrollbar-thumb,
    *::-webkit-scrollbar-thumb {
        background: #c1c8cd !important;
        border-radius: 6px !important;
        border: 1px solid #f1f3f4 !important;
        min-height: 24px !important;
        min-width: 24px !important;
        transition: all 0.2s ease-in-out !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    html::-webkit-scrollbar-thumb:hover,
    body::-webkit-scrollbar-thumb:hover,
    *::-webkit-scrollbar-thumb:hover {
        background: #9aa0a6 !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
    }
}

/* Mobile overlay scrollbar - Enhanced */
.mobile-posts-overlay {
    scrollbar-width: thin !important;
    scrollbar-color: var(--scrollbar-thumb-bg, #c1c8cd) var(--scrollbar-track-bg, #f1f3f4) !important;
}

.mobile-posts-overlay::-webkit-scrollbar {
    width: var(--scrollbar-width, 8px);
}

.mobile-posts-overlay::-webkit-scrollbar-track {
    background: var(--scrollbar-track-bg, #f1f3f4) !important;
    border-radius: 6px;
    border: 1px solid var(--scrollbar-track-border, #e8eaed);
    margin: 2px;
}

.mobile-posts-overlay::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-bg, #c1c8cd) !important;
    border-radius: 6px;
    border: 1px solid var(--scrollbar-thumb-border, #f1f3f4);
    min-height: 24px;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.mobile-posts-overlay::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover, #9aa0a6) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Table scrollbar styling - Enhanced - ALWAYS VISIBLE */
.responsive-table {
    scrollbar-width: thin !important;
    scrollbar-color: var(--scrollbar-thumb-bg, #c1c8cd) var(--scrollbar-track-bg, #f1f3f4) !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
}

.responsive-table::-webkit-scrollbar {
    height: var(--scrollbar-width, 8px) !important;
    width: var(--scrollbar-width, 8px) !important;
    display: block !important;
}

.responsive-table::-webkit-scrollbar-track {
    background: var(--scrollbar-track-bg, #f1f3f4) !important;
    border-radius: 6px !important;
    border: 1px solid var(--scrollbar-track-border, #e8eaed) !important;
    margin: 2px !important;
    display: block !important;
    -webkit-appearance: none !important;
}

.responsive-table::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-bg, #c1c8cd) !important;
    border-radius: 6px !important;
    border: 1px solid var(--scrollbar-thumb-border, #f1f3f4) !important;
    min-width: 24px !important;
    min-height: 24px !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    display: block !important;
    -webkit-appearance: none !important;
}

.responsive-table::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover, #9aa0a6) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

/* Force table scrollbars to be visible */
table,
.main-content table,
.post-content table,
.page-content table,
.home-content table {
    scrollbar-width: thin !important;
    scrollbar-color: var(--scrollbar-thumb-bg, #c1c8cd) var(--scrollbar-track-bg, #f1f3f4) !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    max-width: 100% !important;
    display: block !important;
}

table::-webkit-scrollbar,
.main-content table::-webkit-scrollbar,
.post-content table::-webkit-scrollbar,
.page-content table::-webkit-scrollbar,
.home-content table::-webkit-scrollbar {
    height: var(--scrollbar-width, 8px) !important;
    width: var(--scrollbar-width, 8px) !important;
    display: block !important;
}

table::-webkit-scrollbar-track,
.main-content table::-webkit-scrollbar-track,
.post-content table::-webkit-scrollbar-track,
.page-content table::-webkit-scrollbar-track,
.home-content table::-webkit-scrollbar-track {
    background: var(--scrollbar-track-bg, #f1f3f4) !important;
    border-radius: 6px !important;
    border: 1px solid var(--scrollbar-track-border, #e8eaed) !important;
    margin: 2px !important;
    display: block !important;
    -webkit-appearance: none !important;
}

table::-webkit-scrollbar-thumb,
.main-content table::-webkit-scrollbar-thumb,
.post-content table::-webkit-scrollbar-thumb,
.page-content table::-webkit-scrollbar-thumb,
.home-content table::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-bg, #c1c8cd) !important;
    border-radius: 6px !important;
    border: 1px solid var(--scrollbar-thumb-border, #f1f3f4) !important;
    min-width: 24px !important;
    min-height: 24px !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    display: block !important;
    -webkit-appearance: none !important;
}

/* Sidebar scrollbars - Enhanced */
.sidebar-left,
.sidebar-right {
    scrollbar-width: thin !important;
    scrollbar-color: var(--scrollbar-thumb-bg, #c1c8cd) var(--scrollbar-track-bg, #f1f3f4) !important;
}

.sidebar-left::-webkit-scrollbar,
.sidebar-right::-webkit-scrollbar {
    width: var(--scrollbar-width, 8px);
}

.sidebar-left::-webkit-scrollbar-track,
.sidebar-right::-webkit-scrollbar-track {
    background: var(--scrollbar-track-bg, #f1f3f4) !important;
    border-radius: 6px;
    border: 1px solid var(--scrollbar-track-border, #e8eaed);
    margin: 2px;
}

.sidebar-left::-webkit-scrollbar-thumb,
.sidebar-right::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-bg, #c1c8cd) !important;
    border-radius: 6px;
    border: 1px solid var(--scrollbar-thumb-border, #f1f3f4);
    min-height: 24px;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.sidebar-left::-webkit-scrollbar-thumb:hover,
.sidebar-right::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover, #9aa0a6) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Search results scrollbars - Enhanced */
.live-search-results {
    scrollbar-width: thin !important;
    scrollbar-color: var(--scrollbar-thumb-bg, #c1c8cd) var(--scrollbar-track-bg, #f1f3f4) !important;
}

.live-search-results::-webkit-scrollbar {
    width: var(--scrollbar-width, 8px);
}

.live-search-results::-webkit-scrollbar-track {
    background: var(--scrollbar-track-bg, #f1f3f4) !important;
    border-radius: 6px;
    border: 1px solid var(--scrollbar-track-border, #e8eaed);
    margin: 2px;
}

.live-search-results::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-bg, #c1c8cd) !important;
    border-radius: 6px;
    border: 1px solid var(--scrollbar-thumb-border, #f1f3f4);
    min-height: 24px;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.live-search-results::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover, #9aa0a6) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Dark mode scrollbar support */
@media (prefers-color-scheme: dark) {
    :root {
        --scrollbar-track-bg: #2d2d2d;
        --scrollbar-track-border: #404040;
        --scrollbar-thumb-bg: #5a5a5a;
        --scrollbar-thumb-hover: #6e6e6e;
        --scrollbar-thumb-active: #8a8a8a;
        --scrollbar-thumb-border: #2d2d2d;
        --scrollbar-corner: #2d2d2d;
    }
}

/* High contrast mode scrollbar support */
@media (prefers-contrast: high) {
    :root {
        --scrollbar-track-bg: #ffffff;
        --scrollbar-track-border: #000000;
        --scrollbar-thumb-bg: #000000;
        --scrollbar-thumb-hover: #333333;
        --scrollbar-thumb-active: #666666;
        --scrollbar-thumb-border: #ffffff;
        --scrollbar-corner: #ffffff;
    }
}

/* Additional scrollbar styles for specific elements */
/* Code blocks and pre elements */
pre,
code,
.highlight,
.syntax-highlight {
    scrollbar-width: thin !important;
    scrollbar-color: var(--scrollbar-thumb-bg, #c1c8cd) var(--scrollbar-track-bg, #f1f3f4) !important;
}

pre::-webkit-scrollbar,
code::-webkit-scrollbar,
.highlight::-webkit-scrollbar,
.syntax-highlight::-webkit-scrollbar {
    width: var(--scrollbar-width, 8px);
    height: var(--scrollbar-width, 8px);
}

pre::-webkit-scrollbar-track,
code::-webkit-scrollbar-track,
.highlight::-webkit-scrollbar-track,
.syntax-highlight::-webkit-scrollbar-track {
    background: var(--scrollbar-track-bg, #f1f3f4) !important;
    border-radius: 6px;
    border: 1px solid var(--scrollbar-track-border, #e8eaed);
    margin: 2px;
}

pre::-webkit-scrollbar-thumb,
code::-webkit-scrollbar-thumb,
.highlight::-webkit-scrollbar-thumb,
.syntax-highlight::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-bg, #c1c8cd) !important;
    border-radius: 6px;
    border: 1px solid var(--scrollbar-thumb-border, #f1f3f4);
    min-height: 24px;
    min-width: 24px;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Modal and overlay scrollbars */
.modal,
.overlay,
.popup,
.dialog {
    scrollbar-width: thin !important;
    scrollbar-color: var(--scrollbar-thumb-bg, #c1c8cd) var(--scrollbar-track-bg, #f1f3f4) !important;
}

.modal::-webkit-scrollbar,
.overlay::-webkit-scrollbar,
.popup::-webkit-scrollbar,
.dialog::-webkit-scrollbar {
    width: var(--scrollbar-width, 8px);
}

.modal::-webkit-scrollbar-track,
.overlay::-webkit-scrollbar-track,
.popup::-webkit-scrollbar-track,
.dialog::-webkit-scrollbar-track {
    background: var(--scrollbar-track-bg, #f1f3f4) !important;
    border-radius: 6px;
    border: 1px solid var(--scrollbar-track-border, #e8eaed);
    margin: 2px;
}

.modal::-webkit-scrollbar-thumb,
.overlay::-webkit-scrollbar-thumb,
.popup::-webkit-scrollbar-thumb,
.dialog::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-bg, #c1c8cd) !important;
    border-radius: 6px;
    border: 1px solid var(--scrollbar-thumb-border, #f1f3f4);
    min-height: 24px;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Widget areas and sidebars */
.widget,
.widget-area,
.widget-content {
    scrollbar-width: thin !important;
    scrollbar-color: var(--scrollbar-thumb-bg, #c1c8cd) var(--scrollbar-track-bg, #f1f3f4) !important;
}

.widget::-webkit-scrollbar,
.widget-area::-webkit-scrollbar,
.widget-content::-webkit-scrollbar {
    width: var(--scrollbar-width, 8px);
}

.widget::-webkit-scrollbar-track,
.widget-area::-webkit-scrollbar-track,
.widget-content::-webkit-scrollbar-track {
    background: var(--scrollbar-track-bg, #f1f3f4) !important;
    border-radius: 6px;
    border: 1px solid var(--scrollbar-track-border, #e8eaed);
    margin: 2px;
}

.widget::-webkit-scrollbar-thumb,
.widget-area::-webkit-scrollbar-thumb,
.widget-content::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-bg, #c1c8cd) !important;
    border-radius: 6px;
    border: 1px solid var(--scrollbar-thumb-border, #f1f3f4);
    min-height: 24px;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    ::-webkit-scrollbar-thumb {
        transition: none !important;
        transform: none !important;
    }
    
    ::-webkit-scrollbar-thumb:hover {
        transform: none !important;
    }
    
    ::-webkit-scrollbar-thumb:active {
        transform: none !important;
    }
}

/* ==========================================================================
   SCROLLBAR VISIBILITY FIXES - FORCE SCROLLBARS TO ALWAYS SHOW
   ========================================================================== */

/* Override any conflicting styles that might hide scrollbars */
* {
    scrollbar-gutter: stable !important;
}

/* Ensure all scrollable elements show scrollbars */
.scrollable,
.scrollable-content,
.scroll-container {
    overflow: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--scrollbar-thumb-bg, #c1c8cd) var(--scrollbar-track-bg, #f1f3f4) !important;
}

/* Force scrollbars on specific WordPress elements */
.wp-block-table,
.wp-block-table__wrapper,
.wp-block-group,
.wp-block-columns {
    scrollbar-width: thin !important;
    scrollbar-color: var(--scrollbar-thumb-bg, #c1c8cd) var(--scrollbar-track-bg, #f1f3f4) !important;
}

.wp-block-table::-webkit-scrollbar,
.wp-block-table__wrapper::-webkit-scrollbar,
.wp-block-group::-webkit-scrollbar,
.wp-block-columns::-webkit-scrollbar {
    width: var(--scrollbar-width, 8px) !important;
    height: var(--scrollbar-width, 8px) !important;
    display: block !important;
}

/* Ensure content areas have proper scrolling */
.content-area,
.main-content,
.post-content,
.page-content {
    scrollbar-width: thin !important;
    scrollbar-color: var(--scrollbar-thumb-bg, #c1c8cd) var(--scrollbar-track-bg, #f1f3f4) !important;
}

/* Force scrollbar thumb visibility by ensuring content overflow */
body::after {
    content: "" !important;
    display: block !important;
    height: 101vh !important;
    width: 101vw !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: -9999 !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Alternative method - force scrollbar thumb with pseudo-element */
html::after {
    content: "" !important;
    display: block !important;
    height: 100.1vh !important;
    width: 100.1vw !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: -9999 !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Test scrollbar visibility - add temporary content to force scrollbars */
.scrollbar-test {
    height: 200vh !important;
    width: 200vw !important;
    background: linear-gradient(45deg, #f0f0f0, #e0e0e0) !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
    opacity: 0.1 !important;
}

/* Force table scrollbar thumb visibility */
table::after,
.responsive-table::after {
    content: "" !important;
    display: block !important;
    height: 1px !important;
    width: 101% !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* ==========================================================================
   SCROLLBAR THUMB FORCE VISIBILITY - AGGRESSIVE APPROACH
   ========================================================================== */

/* Force scrollbar thumb to always be visible with stronger styling */
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-bg, #c1c8cd) !important;
    border-radius: 6px !important;
    border: 2px solid var(--scrollbar-thumb-border, #f1f3f4) !important;
    min-height: 40px !important;
    min-width: 40px !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    display: block !important;
    -webkit-appearance: none !important;
    cursor: pointer !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 9999 !important;
}

/* Ensure scrollbar thumb is always visible - override browser defaults */
::-webkit-scrollbar-thumb:not(:hover):not(:active):not(:focus) {
    background: var(--scrollbar-thumb-bg, #c1c8cd) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Force scrollbar thumb visibility on all states */
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active,
::-webkit-scrollbar-thumb:focus {
    background: var(--scrollbar-thumb-hover, #9aa0a6) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Alternative scrollbar thumb styling for better visibility */
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #c1c8cd 0%, #9aa0a6 100%) !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* Force scrollbar thumb to be visible even when not scrolling */
::-webkit-scrollbar-thumb:window-inactive {
    background: var(--scrollbar-thumb-bg, #c1c8cd) !important;
    opacity: 0.8 !important;
    visibility: visible !important;
}

/* Enhanced Post Title Styling - Bigger Text Size - HIGH PRIORITY */
/* Main post titles - much larger and more prominent */
.post-title,
.single-post .post-title,
article h1.post-title,
.post-content > h1:first-of-type,
.entry-content > h1:first-of-type,
.main-content > h1:first-of-type,
.main-content article h1:first-of-type {
    font-size: clamp(2.5rem, 2rem + 2.5vw, 4rem) !important; /* Much larger - 40px to 64px */
    font-weight: 700 !important;
    line-height: 1.1 !important;
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
    color: var(--text-primary) !important;
    letter-spacing: -0.02em !important;
}

/* OVERRIDE: First paragraph h1 converted from paragraph - must override the clamp() above */
.main-content .post-content > h1.first-paragraph-h1:first-of-type,
.main-content article .post-content > h1.first-paragraph-h1:first-of-type,
article.single-post .post-content > h1.first-paragraph-h1:first-of-type,
.main-content article.single-post .post-content > h1.first-paragraph-h1:first-of-type {
    font-size: 28px !important;
}

/* Post titles in lists/cards - also bigger */
.post-title,
.search-main-content .post-title,
.home-content .post-title,
.page-content .post-title {
    font-size: clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem) !important; /* 24px to 36px */
    font-weight: 600 !important;
    line-height: 1.2 !important;
    margin-bottom: 0.75rem !important;
    color: var(--text-primary) !important;
}

/* Page content full post titles - even bigger */
.page-content-full .post-title {
    font-size: clamp(2.25rem, 1.75rem + 2vw, 3.5rem) !important; /* 36px to 56px */
    font-weight: 700 !important;
    line-height: 1.1 !important;
    margin-bottom: 1.5rem !important;
    color: var(--text-primary) !important;
}

/* Ensure title links use theme colors */
.post-title a {
    color: inherit !important;
    text-decoration: none;
}

.post-title a:hover,
.post-title a:focus {
    color: var(--primary-color) !important;
    text-decoration: none;
}

/* Mobile responsive adjustments for post titles */
@media (max-width: 768px) {
    .post-title,
    .single-post .post-title,
    article h1.post-title,
    .post-content > h1:first-of-type,
    .entry-content > h1:first-of-type,
    .main-content > h1:first-of-type,
    .main-content article h1:first-of-type {
        font-size: clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem) !important; /* 28px to 40px on mobile */
        line-height: 1.15 !important;
    }
    
    .post-title,
    .search-main-content .post-title,
    .home-content .post-title,
    .page-content .post-title {
        font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem) !important; /* 20px to 28px on mobile */
    }
    
    .page-content-full .post-title {
        font-size: clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem) !important; /* 24px to 36px on mobile */
    }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
    .post-title,
    .single-post .post-title,
    article h1.post-title,
    .post-content > h1:first-of-type,
    .entry-content > h1:first-of-type,
    .main-content > h1:first-of-type,
    .main-content article h1:first-of-type {
        font-size: clamp(2rem, 1.75rem + 1.25vw, 3rem) !important; /* 32px to 48px on tablet */
    }
    
    .post-title,
    .search-main-content .post-title,
    .home-content .post-title,
    .page-content .post-title {
        font-size: clamp(1.375rem, 1.125rem + 1vw, 2rem) !important; /* 22px to 32px on tablet */
    }
    
    .page-content-full .post-title {
        font-size: clamp(1.875rem, 1.5rem + 1.5vw, 3rem) !important; /* 30px to 48px on tablet */
    }
}


/* Print Styles */
@media print {
    .live-search-results,
    .wp-user-menu,
    .social-links {
        display: none !important;
    }
    
    /* Hide navigation in print */
    nav,
    .navigation,
    button {
        display: none !important;
    }
    
    .post-navigation {
        page-break-inside: avoid;
    }
}

/* ==========================================================================
   Button Styles - Remove Underlines (Additional Styles)
   ========================================================================== */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.btn,
.button,
.wp-block-button__link,
.search-button,
.auth-button,
.submit-btn-modern,
.wp-auth-button,
.wp-social-button,
.wp-auth-toggle-button {
    text-decoration: none !important;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
.btn:hover,
.button:hover,
.wp-block-button__link:hover,
.search-button:hover,
.auth-button:hover,
.submit-btn-modern:hover,
.wp-auth-button:hover,
.wp-social-button:hover,
.wp-auth-toggle-button:hover {
    text-decoration: none !important;
}

button:focus,
input[type="button"]:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
.btn:focus,
.button:focus,
.wp-block-button__link:focus,
.search-button:focus,
.auth-button:focus,
.submit-btn-modern:focus,
.wp-auth-button:focus,
.wp-social-button:focus,
.wp-auth-toggle-button:focus {
    text-decoration: none !important;
}

button:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
.btn:active,
.button:active,
.wp-block-button__link:active,
.search-button:active,
.auth-button:active,
.submit-btn-modern:active,
.wp-auth-button:active,
.wp-social-button:active,
.wp-auth-toggle-button:active {
    text-decoration: none !important;
}

/* ==========================================================================
   FIRST PARAGRAPH ONLY - FINAL OVERRIDE - EXCLUDE HEADINGS - MAXIMUM SPECIFICITY
   ========================================================================== */
/* Target ONLY the first <p> tag with MAXIMUM specificity to override .main-content p */
.main-content article.single-post .post-content > p:first-of-type,
.main-content .post.single-post .post-content > p:first-of-type,
.main-content article .post-content > p:first-of-type,
article.single-post .post-content > p:first-of-type,
.single .main-content article .post-content > p:first-of-type,
.single .main-content .post-content > p:first-of-type,

/* First paragraph converted to h1 - MAXIMUM SPECIFICITY TO OVERRIDE ALL CONFLICTS */
.main-content article.single-post .post-content > h1.first-paragraph-h1,
.main-content .post.single-post .post-content > h1.first-paragraph-h1,
.main-content article .post-content > h1.first-paragraph-h1,
article.single-post .post-content > h1.first-paragraph-h1,
.single .main-content article .post-content > h1.first-paragraph-h1,
.single .main-content .post-content > h1.first-paragraph-h1,
.main-content .post-content > h1.first-paragraph-h1 {
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    color: inherit !important;
}


/* Make nested spans inherit */
.main-content .post-content > h1.first-paragraph-h1 span,
.main-content article .post-content > h1.first-paragraph-h1 span,
article.single-post .post-content > h1.first-paragraph-h1 span {
    font-size: inherit !important;
}

@media (max-width: 1024px) {
    .main-content article.single-post .post-content > h1.first-paragraph-h1,
    .main-content .post.single-post .post-content > h1.first-paragraph-h1,
    .main-content article .post-content > h1.first-paragraph-h1,
    article.single-post .post-content > h1.first-paragraph-h1,
    .single .main-content article .post-content > h1.first-paragraph-h1,
    .single .main-content .post-content > h1.first-paragraph-h1 {
        font-size: 26px !important;
    }
}

@media (max-width: 768px) {
    .main-content article.single-post .post-content > h1.first-paragraph-h1,
    .main-content .post.single-post .post-content > h1.first-paragraph-h1,
    .main-content article .post-content > h1.first-paragraph-h1,
    article.single-post .post-content > h1.first-paragraph-h1,
    .single .main-content article .post-content > h1.first-paragraph-h1,
    .single .main-content .post-content > h1.first-paragraph-h1 {
        font-size: 22px !important;
    }
}

/* Override media queries - Desktop */
@media (min-width: 1025px) {
    .main-content article.single-post .post-content > p:first-of-type,
    .main-content .post.single-post .post-content > p:first-of-type,
    .main-content article .post-content > p:first-of-type,
    article.single-post .post-content > p:first-of-type {
        font-size: 28px !important;
        line-height: 1.6 !important;
    }
}

/* Override media queries - Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
    .main-content article.single-post .post-content > p:first-of-type,
    .main-content .post.single-post .post-content > p:first-of-type,
    .main-content article .post-content > p:first-of-type,
    article.single-post .post-content > p:first-of-type {
        font-size: 26px !important;
        line-height: 1.6 !important;
    }
}

/* Override media queries - Mobile */
@media (max-width: 768px) {
    .main-content article.single-post .post-content > p:first-of-type,
    .main-content .post.single-post .post-content > p:first-of-type,
    .main-content article .post-content > p:first-of-type,
    article.single-post .post-content > p:first-of-type {
        font-size: 22px !important;
        line-height: 1.6 !important;
    }
}