/*
Theme Name: Theory NFL
Theme URI: https://beezloop.com/
Author: BeezLoop
Author URI: https://beezloop.com/
Description: An edgy news site theme with interactive opinion theories and discussions
Version: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: theory-news

MODERN DESIGN SYSTEM - v8.0 (2026 Edition)
==========================================

⭐ 2026 FEATURES:
- Modern CSS Container Queries for component-level responsiveness
- Fluid Typography with clamp() for perfect scaling
- Enhanced Image Placeholders with modern gradients
- Advanced Mobile-First responsive design
- Improved Dark/Light mode with better contrast
- CSS Subgrid for advanced layouts
- Modern color spaces (oklch when supported)
- Enhanced accessibility (WCAG AAA where possible)

COLOR PALETTE:

Light Mode (Default):
- Backgrounds: Pure white (#ffffff) for main content, subtle grey (#f8fafc) for sections
- Text: Very dark (#0f172a) for headings, dark grey (#1e293b) for body, medium grey (#64748b) for meta
- Borders: Light grey (#e2e8f0)
- Accent: Gold (#ffd700)

Dark Mode (Grey Shades ONLY):
- Backgrounds: Dark grey (#1a1a1a) for main, medium grey (#242424) for cards, light grey (#2d2d2d) for inputs
- Text: White (#ffffff) for headings, light grey (#e0e0e0) for body, medium grey (#b3b3b3) for meta
- Borders: Visible grey (#404040)
- Accent: Gold (#ffd700)

KEY PRINCIPLES:
1. Light mode = Dark fonts on light backgrounds
2. Dark mode = Light fonts on grey backgrounds (NO pure black #000000)
3. Consistent grey scale hierarchy in dark mode
4. All text meets WCAG AA contrast standards (4.5:1 minimum)
5. Future-proof with CSS custom properties
6. Mobile-first responsive design
7. Container queries for component responsiveness
*/

/* ===== MODERN GOOGLE FONTS IMPORT ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
    /* ===== 2026 MODERN COLORS ===== */
    --primary-color: #0f172a;
    --secondary-color: #64748b;
    --accent-color: #ffd700;
    --accent-hover: #ffed4e;
    --text-color: #1e293b;
    --text-muted: #94a3b8;
    
    /* ===== TYPOGRAPHY SYSTEM (Enhanced for Maximum Readability) ===== */
    --body-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Helvetica Neue', Arial, sans-serif;
    --header-font: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace;
    
    /* Fluid Typography (2026 Enhanced - Larger & More Readable) */
    --font-size-xs: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
    --font-size-sm: clamp(1rem, 0.95rem + 0.4vw, 1.125rem);
    --font-size-base: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
    --font-size-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --font-size-xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
    --font-size-2xl: clamp(1.875rem, 1.65rem + 1.125vw, 2.5rem);
    --font-size-3xl: clamp(2.25rem, 1.95rem + 1.5vw, 3.25rem);
    --font-size-4xl: clamp(3rem, 2.5rem + 2.5vw, 4.5rem);
    
    /* ===== BACKGROUNDS & SURFACES (Enhanced Color Harmony) ===== */
    --white: #ffffff;
    --section-bg: #ffffff;
    --light-bg: #f8fafc;
    --card-bg: rgba(255, 255, 255, 0.95);
    --border-color: rgba(226, 232, 240, 0.6);
    --dark-bg: #0f172a;
    
    /* Enhanced Color Palette */
    --color-sky: #0ea5e9;
    --color-emerald: #10b981;
    --color-violet: #8b5cf6;
    --color-rose: #f43f5e;
    
    /* ===== LAYOUT ===== */
    --container-width: 1320px;
    --container-padding: clamp(1rem, 3vw, 2rem);
    --section-gap: clamp(2rem, 5vw, 4rem);
    
    /* ===== TRANSITIONS (2026 Ultra-Smooth) ===== */
    --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-smooth: cubic-bezier(0.45, 0, 0.55, 1);
    --ease-bounce: cubic-bezier(0.68, -0.6, 0.32, 1.6);
    
    /* ===== GLASSMORPHISM (Enhanced Premium Effects) ===== */
    --glass-border: 1px solid rgba(226, 232, 240, 0.4);
    --box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.7) inset;
    --card-shadow: 0 12px 40px rgba(15, 23, 42, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
    --hover-shadow: 0 20px 60px rgba(255, 215, 0, 0.25), 0 0 0 2px rgba(255, 215, 0, 0.3) inset;
    --glass-blur: blur(24px);
    --glass-blur-strong: blur(48px);
    --glow-golden: 0 0 40px rgba(255, 215, 0, 0.4);
    --glow-blue: 0 0 40px rgba(14, 165, 233, 0.4);
    --glow-purple: 0 0 40px rgba(139, 92, 246, 0.4);
    --frost-shadow: var(--box-shadow);

    /* ===== BIAS INDICATORS ===== */
    --bias-left: #4285f4;
    --bias-center: #9e9e9e;
    --bias-right: #ea4335;
    
    /* ===== SPACING SYSTEM (2026) ===== */
    --space-xs: clamp(0.5rem, 1vw, 0.75rem);
    --space-sm: clamp(0.75rem, 1.5vw, 1rem);
    --space-md: clamp(1rem, 2vw, 1.5rem);
    --space-lg: clamp(1.5rem, 3vw, 2.5rem);
    --space-xl: clamp(2rem, 4vw, 3.5rem);
    --space-2xl: clamp(3rem, 6vw, 5rem);
    
    /* ===== BORDER RADIUS (Modern 2026) ===== */
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-full: 9999px;
    
    /* ===== IMAGE PLACEHOLDER COLORS ===== */
    --placeholder-bg: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    --placeholder-icon: #cbd5e1;
    --placeholder-text: #94a3b8;
}

/* Dark Mode - System Theme Responsive */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* ===== DARK MODE COLORS (2026 Enhanced) ===== */
        --primary-color: #ffffff;
        --secondary-color: #cbd5e1;
        --accent-color: #ffd700;
        --accent-hover: #ffed4e;
        --text-color: #e2e8f0;
        --text-muted: #94a3b8;
        --white: #1a1a1a;
        --section-bg: #1a1a1a;
        --light-bg: #242424;
        --card-bg: rgba(36, 36, 36, 0.75);
        --dark-bg: #1a1a1a;
        --border-color: rgba(64, 64, 64, 0.7);
        --glass-border: 1px solid rgba(64, 64, 64, 0.6);
        --box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
        --card-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
        --hover-shadow: 0 12px 36px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 215, 0, 0.2) inset;
        --bias-left: #5ea3ff;
        --bias-center: #b3b3b3;
        --bias-right: #ff6b6b;
        
        /* Dark mode image placeholders */
        --placeholder-bg: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
        --placeholder-icon: #404040;
        --placeholder-text: #64748b;
    }
}

/* Manual Dark Mode Override */
[data-theme="dark"] {
    /* ===== DARK MODE COLORS (2026 Enhanced) ===== */
    --primary-color: #ffffff;
    --secondary-color: #cbd5e1;
    --accent-color: #ffd700;
    --accent-hover: #ffed4e;
    --text-color: #e2e8f0;
    --text-muted: #94a3b8;
    --white: #1a1a1a;
    --section-bg: #1a1a1a;
    --light-bg: #242424;
    --card-bg: rgba(36, 36, 36, 0.75);
    --dark-bg: #1a1a1a;
    --border-color: rgba(64, 64, 64, 0.7);
    --glass-border: 1px solid rgba(64, 64, 64, 0.6);
    --box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
    --card-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    --hover-shadow: 0 12px 36px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 215, 0, 0.2) inset;
    --bias-left: #5ea3ff;
    --bias-center: #b3b3b3;
    --bias-right: #ff6b6b;
    
    /* Dark mode image placeholders */
    --placeholder-bg: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
    --placeholder-icon: #404040;
    --placeholder-text: #64748b;
}

/* Dark Mode Styles */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) body {
        background: #1a1a1a;
        color: var(--text-color);
    }
}

[data-theme="dark"] body {
    background: #1a1a1a;
    color: var(--text-color);
}

/* Dark mode for all elements */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .site-header,
    :root:not([data-theme="light"]) .theory-sidebar,
    :root:not([data-theme="light"]) .post-card,
    :root:not([data-theme="light"]) .headline-item,
    :root:not([data-theme="light"]) .headline-item-vertical,
    :root:not([data-theme="light"]) .site-footer,
    :root:not([data-theme="light"]) .trending-bar,
    :root:not([data-theme="light"]) .main-navigation,
    :root:not([data-theme="light"]) article {
        transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    }
}

[data-theme="dark"] .site-header,
[data-theme="dark"] .theory-sidebar,
[data-theme="dark"] .post-card,
[data-theme="dark"] .headline-item,
[data-theme="dark"] .headline-item-vertical,
[data-theme="dark"] .site-footer,
[data-theme="dark"] .trending-bar,
[data-theme="dark"] .main-navigation,
[data-theme="dark"] article {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .site-header {
        background: #1a1a1a;
        border-bottom-color: #404040;
    }

    :root:not([data-theme="light"]) .theory-sidebar {
        background: #242424;
        border-color: #404040;
    }

    :root:not([data-theme="light"]) .theory-sidebar .widget {
        background: #2d2d2d;
        border-color: #404040;
    }

    :root:not([data-theme="light"]) .post-card,
    :root:not([data-theme="light"]) .headline-item,
    :root:not([data-theme="light"]) .headline-item-vertical {
        background: #242424;
        border-color: #404040;
    }

    :root:not([data-theme="light"]) .front-hero-card::before {
        background: rgba(26, 26, 26, 0.7);
    }

    :root:not([data-theme="light"]) .theory-sidebar .widget_search input[type="search"] {
        background: #2d2d2d;
        color: var(--text-color);
        border-color: #404040;
    }

    :root:not([data-theme="light"]) .theory-sidebar .widget_search input[type="search"]::placeholder {
        color: #999999;
    }

    :root:not([data-theme="light"]) .newsletter-form input[type="email"] {
        background: #2d2d2d;
        color: var(--text-color);
        border-color: #404040;
    }

    :root:not([data-theme="light"]) .newsletter-form input[type="email"]::placeholder {
        color: #999999;
    }

    :root:not([data-theme="light"]) .site-footer {
        background: #1a1a1a;
        border-top-color: #404040;
    }

    :root:not([data-theme="light"]) .main-navigation {
        background: #1a1a1a;
        border-color: transparent;
    }
    
    :root:not([data-theme="light"]) .trending-bar {
        background: #1a1a1a;
        border-color: #404040;
    }

    :root:not([data-theme="light"]) .trending-inner::after {
        background: none;
    }

    :root:not([data-theme="light"]) .trending-fallback {
        background: #242424;
    }

    :root:not([data-theme="light"]) .trending-pill {
        background: #2d2d2d;
        color: #ffffff;
        border: 1px solid #404040;
    }

    :root:not([data-theme="light"]) .trending-pill:hover {
        background: #404040;
        color: #ffffff;
        border-color: #505050;
    }

    :root:not([data-theme="light"]) .top-info-bar {
        background: #1a1a1a;
        color: #e0e0e0;
        border-bottom-color: #404040;
    }

    :root:not([data-theme="light"]) .date-time-info,
    :root:not([data-theme="light"]) .weather-info {
        color: #e0e0e0;
    }

    :root:not([data-theme="light"]) .date-time-info span {
        color: #b3b3b3;
    }

    :root:not([data-theme="light"]) .weather-temp {
        color: #ffffff;
    }

    :root:not([data-theme="light"]) .weather-desc {
        color: #b3b3b3;
    }

    :root:not([data-theme="light"]) .weather-location {
        color: #b3b3b3;
    }

    :root:not([data-theme="light"]) .card-title a,
    :root:not([data-theme="light"]) .entry-title,
    :root:not([data-theme="light"]) .entry-title a,
    :root:not([data-theme="light"]) .headline-title,
    :root:not([data-theme="light"]) .headline-title-vert {
        color: var(--primary-color);
    }

    :root:not([data-theme="light"]) .post-card-excerpt,
    :root:not([data-theme="light"]) .entry-meta,
    :root:not([data-theme="light"]) .headline-date,
    :root:not([data-theme="light"]) .headline-date-vert {
        color: var(--secondary-color);
    }

    :root:not([data-theme="light"]) article {
        background: #242424;
        border-color: #404040;
    }
}

[data-theme="dark"] .site-header {
    background: rgba(26, 26, 26, 0.8);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border-bottom-color: rgba(64, 64, 64, 0.5);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 1px 0 0 rgba(255, 255, 255, 0.03) inset;
}

[data-theme="dark"] .theory-sidebar {
    background: rgba(26, 26, 26, 0.6);
    backdrop-filter: blur(20px) saturate(120%);
    -webkit-backdrop-filter: blur(20px) saturate(120%);
    border-color: rgba(64, 64, 64, 0.5);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .theory-sidebar .widget {
    background: rgba(36, 36, 36, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-color: rgba(64, 64, 64, 0.5);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

[data-theme="dark"] .theory-sidebar .widget:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 215, 0, 0.15) inset;
    border-color: rgba(255, 215, 0, 0.3);
}

[data-theme="dark"] .headline-item,
[data-theme="dark"] .headline-item-vertical {
    background: rgba(36, 36, 36, 0.75);
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    border-color: rgba(64, 64, 64, 0.5);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

[data-theme="dark"] .headline-item:hover,
[data-theme="dark"] .headline-item-vertical:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 215, 0, 0.2) inset;
    border-color: rgba(255, 215, 0, 0.4);
}

[data-theme="dark"] .post-card .card-title,
[data-theme="dark"] .post-card .card-title a {
    color: #ffffff;
}

[data-theme="dark"] .post-card .post-card-excerpt,
[data-theme="dark"] .post-card-excerpt {
    color: #b3b3b3;
}

[data-theme="dark"] .post-card .author-name {
    color: #b3b3b3;
}

[data-theme="dark"] .post-card .read-more {
    color: #ffd700;
    border-color: #ffd700;
}

[data-theme="dark"] .post-card .read-more:hover {
    background: #ffd700 !important;
    color: #ffffff !important;
    border-color: #ffd700;
}

[data-theme="dark"] .front-hero-card::before {
    background: #1a1a1a;
}

[data-theme="dark"] .theory-sidebar .widget_search input[type="search"] {
    background: #1a1a1a;
    color: var(--text-color);
    border-color: #404040;
}

[data-theme="dark"] .theory-sidebar .widget_search input[type="search"]::placeholder {
    color: #999999;
}

[data-theme="dark"] .newsletter-form input[type="email"] {
    background: #1a1a1a;
    color: var(--text-color);
    border-color: #404040;
}

[data-theme="dark"] .newsletter-form input[type="email"]::placeholder {
    color: #999999;
}

[data-theme="dark"] .site-footer {
    background: rgba(26, 26, 26, 0.85);
    backdrop-filter: blur(20px) saturate(120%);
    -webkit-backdrop-filter: blur(20px) saturate(120%);
    border-top-color: rgba(64, 64, 64, 0.5);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .main-navigation {
    background: #1a1a1a;
    border-color: transparent;
}

[data-theme="dark"] .trending-bar {
    background: rgba(26, 26, 26, 0.85);
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    border-color: rgba(64, 64, 64, 0.5);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .trending-inner::after {
    background: none;
}

[data-theme="dark"] .trending-fallback {
    background: #1a1a1a;
}

[data-theme="dark"] .top-info-bar {
    background: #1a1a1a;
    color: #ffffff;
    border-bottom-color: #404040;
}

[data-theme="dark"] .date-time-info,
[data-theme="dark"] .weather-info {
    color: #ffffff;
}

[data-theme="dark"] .date-time-info span {
    color: #ffffff;
}

[data-theme="dark"] .weather-temp {
    color: #ffffff;
}

[data-theme="dark"] .weather-desc {
    color: #b3b3b3;
}

[data-theme="dark"] .weather-location {
    color: #ffffff;
}

[data-theme="dark"] .trending-pill {
    background: #1a1a1a;
    color: #ffffff;
}

[data-theme="dark"] .trending-pill:hover {
    background: var(--accent-color);
    color: #ffffff;
}

[data-theme="dark"] .card-title a,
[data-theme="dark"] .entry-title,
[data-theme="dark"] .entry-title a,
[data-theme="dark"] .headline-title,
[data-theme="dark"] .headline-title-vert {
    color: var(--primary-color);
}

[data-theme="dark"] .post-card-excerpt,
[data-theme="dark"] .entry-meta,
[data-theme="dark"] .headline-date,
[data-theme="dark"] .headline-date-vert {
    color: var(--secondary-color);
}

[data-theme="dark"] article {
    background: #1a1a1a;
    border-color: #404040;
}

/* Dark Mode Toggle Button — hidden, kept in DOM for JS event handling */
.theme-toggle {
    display: none !important;
    position: fixed;
    bottom: 20px;
    right: 90px;
    left: auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: #0f172a;
    border: 2px solid rgba(15, 23, 42, 0.1);
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.15),
                0 0 0 1px rgba(255, 255, 255, 0.5) inset;
    transition: var(--transition);
    z-index: 9998;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    -webkit-tap-highlight-color: transparent;
}

@media (max-width: 768px) {
    .theme-toggle {
        bottom: 90px;
        right: 86px;
        left: auto;
        width: 52px;
        height: 52px;
        z-index: 9998;
        display: flex !important;
        opacity: 1 !important;
    }
}

@media (max-width: 480px) {
    .theme-toggle {
        width: 48px;
        height: 48px;
        bottom: 90px;
        right: 82px;
        left: auto;
        display: flex !important;
    }
}

.theme-toggle.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px) scale(0.9);
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.2),
                0 0 0 1px rgba(255, 255, 255, 0.8) inset;
}

.theme-toggle:active {
    transform: scale(0.95);
    transition: var(--transition-fast);
}

.theme-toggle svg {
    width: 26px;
    height: 26px;
    transition: transform 0.4s var(--ease-out);
}

.theme-toggle:hover svg {
    transform: rotate(15deg) scale(1.1);
}

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

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

[data-theme="dark"] .theme-toggle {
    background: rgba(36, 36, 36, 0.95);
    color: #ffd700;
    border-color: rgba(255, 215, 0, 0.3);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4),
                0 0 0 1px rgba(255, 215, 0, 0.2) inset;
}

[data-theme="dark"] .theme-toggle:hover {
    background: rgba(36, 36, 36, 1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(255, 215, 0, 0.4) inset,
                0 0 20px rgba(255, 215, 0, 0.15);
}

[data-theme="dark"] .theme-toggle .sun-icon {
    display: block;
}

[data-theme="dark"] .theme-toggle .moon-icon {
    display: none;
}

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

html { 
    scroll-behavior: smooth; 
    background-color: var(--light-bg);
    /* Ultra-smooth scrolling with momentum */
    scroll-padding-top: 100px;
}

body {
    margin: 0;
    padding-top: 32px;
    font-family: var(--body-font);
    color: var(--text-color);
    background: var(--white);
    /* Modern gradient background */
    background-image: 
        radial-gradient(at 0% 0%, rgba(255, 215, 0, 0.03) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(14, 165, 233, 0.03) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(139, 92, 246, 0.03) 0px, transparent 50%),
        radial-gradient(at 0% 100%, rgba(16, 185, 129, 0.03) 0px, transparent 50%);
    line-height: 1.8;
    font-size: 18px;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    
    /* Modern 2026: Better touch scrolling */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    
    /* Prevent text size adjustment on mobile */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    
}

/* Dark mode gradient background */
[data-theme="dark"] body {
    background: #1a1a1a;
    background-image: 
        radial-gradient(at 0% 0%, rgba(255, 215, 0, 0.05) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(14, 165, 233, 0.05) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(139, 92, 246, 0.05) 0px, transparent 50%),
        radial-gradient(at 0% 100%, rgba(16, 185, 129, 0.05) 0px, transparent 50%);
}

body.topbar-hidden {
    padding-top: 0;
}

img { 
    max-width: 100%; 
    height: auto; 
    display: block;
    /* Modern image enhancements */
    border-radius: var(--radius-md);
    transition: var(--transition);
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Hover effect for images */
img:hover {
    transform: scale(1.02);
    box-shadow: var(--card-shadow);
}

/* Image loading optimization */
img[loading="lazy"] {
    opacity: 0;
    animation: fadeInImage 0.6s var(--ease-out) forwards;
}

@keyframes fadeInImage {
    to {
        opacity: 1;
    }
}

/* Better image aspect ratios */
.post-card-thumb img,
.post-thumbnail img {
    object-fit: cover;
    width: 100%;
    aspect-ratio: 16/9;
}

/* Premium image overlays */
.post-card-thumb,
.post-thumbnail {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.post-card-thumb::after,
.post-thumbnail::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.05) 100%
    );
    opacity: 0;
    transition: var(--transition);
    pointer-events: none;
}

.post-card:hover .post-card-thumb::after,
.post-thumbnail:hover::after {
    opacity: 1;
}

/* ==========================================
   IMAGE PLACEHOLDERS (2026 Modern Style)
   ========================================== */

/* Base placeholder styles for missing images */
.placeholder-image,
img:not([src]),
img[src=""],
img[src*="placeholder"] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--placeholder-bg);
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    min-height: 200px;
    width: 100%;
    overflow: hidden;
}

/* Icon for placeholders */
.placeholder-image::before,
img:not([src])::before,
img[src=""]::before {
    content: '';
    display: block;
    width: 64px;
    height: 64px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2394a3b8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.5;
    position: absolute;
}

/* Text label for placeholders */
.placeholder-image::after,
img:not([src])::after,
img[src=""]::after {
    content: 'Image';
    position: absolute;
    bottom: 12px;
    font-size: var(--font-size-sm);
    color: var(--placeholder-text);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Specific placeholder for thumbnails */
.post-card-thumb img:not([src]),
.post-card-thumb img[src=""],
.post-thumbnail img:not([src]),
.post-thumbnail img[src=""] {
    min-height: 200px;
    background: var(--placeholder-bg);
}

/* Hero/Featured image placeholders */
.front-hero-card:not([style*="background-image"]),
.hero-placeholder {
    background: var(--placeholder-bg) !important;
    position: relative;
    min-height: 400px;
}

.front-hero-card:not([style*="background-image"])::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2394a3b8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.3;
    z-index: 1;
}

/* Animate placeholder on load */
@keyframes placeholder-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

.placeholder-image,
img:not([src]),
img[src=""] {
    animation: placeholder-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Dark mode placeholder adjustments */
[data-theme="dark"] .placeholder-image::before,
[data-theme="dark"] img:not([src])::before,
[data-theme="dark"] img[src=""]::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23404040" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>');
}

/* Skeleton loading effect for images */
.skeleton-image {
    background: linear-gradient(
        90deg,
        var(--light-bg) 0%,
        var(--card-bg) 50%,
        var(--light-bg) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Responsive placeholder heights */
@media (max-width: 768px) {
    .placeholder-image,
    img:not([src]),
    img[src=""] {
        min-height: 160px;
    }
    
    .placeholder-image::before,
    img:not([src])::before,
    img[src=""]::before {
        width: 48px;
        height: 48px;
    }
    
    .front-hero-card:not([style*="background-image"]) {
        min-height: 300px;
    }
}

@media (max-width: 480px) {
    .placeholder-image,
    img:not([src]),
    img[src=""] {
        min-height: 140px;
    }
    
    .front-hero-card:not([style*="background-image"]) {
        min-height: 250px;
    }
}

/* End of Image Placeholders */
/* ========================================== */

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

a:hover { color: #d97706; }

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 2rem;
    width: 100%;
}

.wrap {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 1.5rem;
    width: 100%;
}

/* ==========================================
   2026 MOBILE-FIRST RESPONSIVE TYPOGRAPHY
   Enhanced for Maximum Readability
   ========================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--header-font);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: var(--primary-color);
    margin-top: 0;
    margin-bottom: 0.75em;
    /* Smooth text rendering */
    text-rendering: optimizeLegibility;
    /* Modern text effects */
    transition: color var(--transition);
}

h1 {
    font-size: var(--font-size-4xl);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.04em;
}

h2 {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    line-height: 1.15;
}

h3 {
    font-size: var(--font-size-2xl);
    font-weight: 600;
}

h4 {
    font-size: var(--font-size-xl);
    font-weight: 600;
}

h5 {
    font-size: var(--font-size-lg);
    font-weight: 600;
}

h6 {
    font-size: var(--font-size-base);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Enhanced paragraph styling */
p {
    margin: 0 0 1em;
    font-size: var(--font-size-base);
    line-height: 1.7;
    color: var(--text-color);
    font-weight: 400;
}

/* Better link styling */
a {
    color: inherit;
    text-decoration: none;
    transition: all var(--transition);
    position: relative;
}

a:hover {
    color: #d97706;
}

/* Animated underline for text links */
p a,
.entry-content a {
    color: var(--primary-color);
    text-decoration: underline;
    text-decoration-color: rgba(255, 215, 0, 0.4);
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
    transition: all var(--transition);
}

p a:hover,
.entry-content a:hover {
    color: #d97706;
    text-decoration-color: #d97706;
    text-underline-offset: 6px;
}

/* Enhanced list styling */
ul, ol {
    margin: 0 0 1.5em;
    padding-left: 2em;
    line-height: 1.8;
}

li {
    margin-bottom: 0.5em;
    font-size: var(--font-size-base);
}

/* Blockquote styling */
blockquote {
    margin: 2em 0;
    padding: 1.5em 2em;
    border-left: 4px solid var(--accent-color);
    background: var(--light-bg);
    border-radius: var(--radius-md);
    font-size: var(--font-size-lg);
    font-style: italic;
    color: var(--secondary-color);
    box-shadow: var(--box-shadow);
}

blockquote p:last-child {
    margin-bottom: 0;
}

/* Code styling */
code, pre {
    font-family: var(--font-mono);
    font-size: 0.9em;
    border-radius: var(--radius-sm);
}

code {
    padding: 0.2em 0.4em;
    background: var(--light-bg);
    color: var(--color-violet);
    font-weight: 500;
}

pre {
    padding: 1.5em;
    background: var(--primary-color);
    color: #ffffff;
    overflow-x: auto;
    margin: 1.5em 0;
}

pre code {
    background: none;
    color: inherit;
    padding: 0;
}

/* ==========================================
   ULTRA-MODERN BUTTON SYSTEM (2026)
   Premium Animations & Interactions
   ========================================== */

/* Base button styles */
button,
.btn,
.button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.wp-block-button__link,
.read-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 14px 32px;
    font-family: var(--body-font);
    font-size: var(--font-size-base);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    border: none;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--accent-color) 0%, #ffb700 100%);
    color: #0f172a;
    box-shadow: 0 4px 16px rgba(255, 215, 0, 0.3),
                0 0 0 1px rgba(255, 255, 255, 0.3) inset;
    transition: all 0.4s var(--ease-out);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    -webkit-tap-highlight-color: transparent;
    will-change: transform, box-shadow;
    
    /* Prevent text selection */
    user-select: none;
    -webkit-user-select: none;
}

/* Shine effect overlay */
button::before,
.btn::before,
.button::before,
input[type="submit"]::before,
.read-more::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 100%
    );
    transform: translateX(-100%) skewX(-15deg);
    transition: transform 0.6s var(--ease-out);
}

/* Hover state */
button:not(.nav-action-btn):not(.mobile-nav-chat-btn):not(.mobile-nav-theme-btn):not(.menu-toggle):hover,
.btn:hover,
.button:hover,
input[type="submit"]:hover,
.read-more:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 32px rgba(255, 215, 0, 0.5),
                0 0 0 2px rgba(255, 255, 255, 0.5) inset,
                0 0 40px rgba(255, 215, 0, 0.3);
    background: linear-gradient(135deg, #ffed4e 0%, #ffd700 100%);
}

button:not(.nav-action-btn):not(.mobile-nav-chat-btn):not(.mobile-nav-theme-btn):not(.menu-toggle):hover::before,
.btn:hover::before,
.button:hover::before,
input[type="submit"]:hover::before,
.read-more:hover::before {
    transform: translateX(100%) skewX(-15deg);
}

/* Active/pressed state */
button:not(.nav-action-btn):not(.mobile-nav-chat-btn):not(.mobile-nav-theme-btn):not(.menu-toggle):active,
.btn:active,
.button:active,
input[type="submit"]:active,
.read-more:active {
    transform: translateY(-1px) scale(0.98);
    box-shadow: 0 4px 16px rgba(255, 215, 0, 0.4),
                0 0 0 1px rgba(255, 255, 255, 0.3) inset;
    transition-duration: 0.1s;
}

/* Focus state */
button:focus,
.btn:focus,
.button:focus,
input[type="submit"]:focus,
.read-more:focus {
    outline: none;
    box-shadow: 0 4px 16px rgba(255, 215, 0, 0.3),
                0 0 0 3px rgba(255, 215, 0, 0.4),
                0 0 0 1px rgba(255, 255, 255, 0.3) inset;
}

/* Disabled state */
button:disabled,
.btn:disabled,
.button:disabled,
input[type="submit"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Secondary button variant */
.btn-secondary,
.button-secondary {
    background: transparent;
    color: var(--accent-color);
    border: 2px solid var(--accent-color);
    box-shadow: 0 4px 16px rgba(255, 215, 0, 0.15);
}

.btn-secondary:hover,
.button-secondary:hover {
    background: var(--accent-color);
    color: #0f172a;
    border-color: var(--accent-color);
}

/* Outline button variant */
.btn-outline,
.button-outline {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.btn-outline:hover,
.button-outline:hover {
    background: var(--light-bg);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

/* Ghost button variant */
.btn-ghost,
.button-ghost {
    background: transparent;
    color: var(--primary-color);
    border: none;
    box-shadow: none;
    padding: 12px 24px;
}

.btn-ghost:hover,
.button-ghost:hover {
    background: rgba(255, 215, 0, 0.1);
    transform: translateY(-2px);
    box-shadow: none;
}

/* Button sizes */
.btn-sm,
.button-sm {
    padding: 10px 20px;
    font-size: var(--font-size-sm);
}

.btn-lg,
.button-lg {
    padding: 18px 40px;
    font-size: var(--font-size-lg);
}

.btn-xl,
.button-xl {
    padding: 22px 48px;
    font-size: var(--font-size-xl);
}

/* Icon buttons */
.btn-icon,
.button-icon {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
}

.btn-icon svg,
.button-icon svg {
    width: 24px;
    height: 24px;
}

/* Button group */
.btn-group,
.button-group {
    display: inline-flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Loading state */
.btn-loading,
.button-loading {
    pointer-events: none;
    opacity: 0.7;
    position: relative;
}

.btn-loading::after,
.button-loading::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* Ripple effect on click */
@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 0.6;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

button.ripple::after,
.btn.ripple::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.5);
    animation: ripple 0.6s ease-out;
}

/* Pulse animation for CTA buttons */
@keyframes pulse {
    0%, 100% {
        box-shadow: 0 4px 16px rgba(255, 215, 0, 0.3),
                    0 0 0 0 rgba(255, 215, 0, 0.4);
    }
    50% {
        box-shadow: 0 4px 16px rgba(255, 215, 0, 0.3),
                    0 0 0 12px rgba(255, 215, 0, 0);
    }
}

.btn-pulse,
.button-pulse {
    animation: pulse 2s ease-in-out infinite;
}

/* Dark mode button styles */
[data-theme="dark"] button:not(.nav-action-btn):not(.mobile-nav-chat-btn):not(.mobile-nav-theme-btn):not(.menu-toggle),
[data-theme="dark"] .btn,
[data-theme="dark"] .button,
[data-theme="dark"] input[type="submit"],
[data-theme="dark"] .read-more {
    background: linear-gradient(135deg, var(--accent-color) 0%, #ffb700 100%);
    color: #0f172a;
    box-shadow: 0 4px 16px rgba(255, 215, 0, 0.4),
                0 0 0 1px rgba(255, 215, 0, 0.3) inset;
}

[data-theme="dark"] button:not(.nav-action-btn):not(.mobile-nav-chat-btn):not(.mobile-nav-theme-btn):not(.menu-toggle):hover,
[data-theme="dark"] .btn:hover,
[data-theme="dark"] .button:hover,
[data-theme="dark"] input[type="submit"]:hover,
[data-theme="dark"] .read-more:hover {
    box-shadow: 0 12px 32px rgba(255, 215, 0, 0.6),
                0 0 0 2px rgba(255, 215, 0, 0.5) inset,
                0 0 40px rgba(255, 215, 0, 0.4);
}

[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .button-secondary {
    background: transparent;
    color: var(--accent-color);
    border-color: var(--accent-color);
}

[data-theme="dark"] .btn-outline,
[data-theme="dark"] .button-outline {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .btn-outline:hover,
[data-theme="dark"] .button-outline:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

/* ==========================================
   MODERN FORM INPUTS (2026)
   ========================================== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
textarea,
select {
    width: 100%;
    padding: 14px 18px;
    font-family: var(--body-font);
    font-size: var(--font-size-base);
    line-height: 1.5;
    color: var(--text-color);
    background: var(--white);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    outline: none;
    transition: all var(--transition);
    -webkit-appearance: none;
    appearance: none;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.1),
                0 4px 16px rgba(255, 215, 0, 0.15);
    transform: translateY(-2px);
}

input::placeholder,
textarea::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

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

/* Dark mode form inputs */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: #2d2d2d;
    border-color: #404040;
    color: #ffffff;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #999999;
}

/* ==========================================
   SMOOTH SCROLLING & ANIMATIONS (2026)
   Ultra-Premium Motion Design
   ========================================== */

/* Smooth scroll snap for sections */
.scroll-snap-container {
    scroll-snap-type: y proximity;
    scroll-padding-top: 100px;
}

.scroll-snap-section {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
}

/* Parallax scroll effect base */
.parallax-section {
    transform-style: preserve-3d;
    perspective: 1000px;
}

.parallax-layer {
    transform: translateZ(0);
    will-change: transform;
}

/* Fade-in animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Animation utility classes */
.animate-fade-in {
    animation: fadeIn 0.8s var(--ease-out) forwards;
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s var(--ease-out) forwards;
}

.animate-fade-in-down {
    animation: fadeInDown 0.8s var(--ease-out) forwards;
}

.animate-fade-in-left {
    animation: fadeInLeft 0.8s var(--ease-out) forwards;
}

.animate-fade-in-right {
    animation: fadeInRight 0.8s var(--ease-out) forwards;
}

.animate-scale-in {
    animation: scaleIn 0.6s var(--ease-spring) forwards;
}

/* Stagger animation delays */
.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; }
.animate-delay-4 { animation-delay: 0.4s; }
.animate-delay-5 { animation-delay: 0.5s; }

/* Hover lift effect for cards */
.hover-lift {
    transition: transform 0.4s var(--ease-out),
                box-shadow 0.4s var(--ease-out);
}

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.15);
}

/* Hover glow effect */
.hover-glow {
    position: relative;
    transition: all 0.4s var(--ease-out);
}

.hover-glow::after {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(
        135deg,
        var(--accent-color),
        var(--color-sky),
        var(--color-violet)
    );
    border-radius: inherit;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.4s var(--ease-out);
    filter: blur(20px);
}

.hover-glow:hover::after {
    opacity: 0.6;
}

/* Smooth entrance for page load */
@keyframes pageEnter {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

body {
    animation: pageEnter 0.6s var(--ease-out);
}

/* Skeleton loader */
@keyframes skeletonWave {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.skeleton {
    background: linear-gradient(
        90deg,
        var(--light-bg) 0%,
        rgba(226, 232, 240, 0.5) 50%,
        var(--light-bg) 100%
    );
    background-size: 200% 100%;
    animation: skeletonWave 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

/* Micro-interactions for better UX */
.interactive {
    transition: all 0.3s var(--ease-out);
    cursor: pointer;
}

.interactive:hover {
    transform: scale(1.05);
}

.interactive:active {
    transform: scale(0.95);
}

/* Floating animation for decorative elements */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

.float {
    animation: float 3s ease-in-out infinite;
}

/* Rotate animation */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.rotate {
    animation: rotate 20s linear infinite;
}

/* Gradient shift animation */
@keyframes gradientShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.gradient-animate {
    background-size: 200% 200%;
    animation: gradientShift 8s ease infinite;
}

/* Smooth focus indicators */
:focus-visible {
    outline: 3px solid var(--accent-color);
    outline-offset: 4px;
    border-radius: var(--radius-sm);
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================
   ENHANCED CARD ANIMATIONS
   ========================================== */

.post-card,
.headline-item,
.headline-item-vertical {
    /* Smooth entrance */
    opacity: 0;
    animation: fadeInUp 0.6s var(--ease-out) forwards;
}

/* Stagger card animations */
.post-card:nth-child(1) { animation-delay: 0.05s; }
.post-card:nth-child(2) { animation-delay: 0.1s; }
.post-card:nth-child(3) { animation-delay: 0.15s; }
.post-card:nth-child(4) { animation-delay: 0.2s; }
.post-card:nth-child(5) { animation-delay: 0.25s; }
.post-card:nth-child(6) { animation-delay: 0.3s; }

.headline-item:nth-child(1) { animation-delay: 0.05s; }
.headline-item:nth-child(2) { animation-delay: 0.1s; }
.headline-item:nth-child(3) { animation-delay: 0.15s; }
.headline-item:nth-child(4) { animation-delay: 0.2s; }
.headline-item:nth-child(5) { animation-delay: 0.25s; }
.headline-item:nth-child(6) { animation-delay: 0.3s; }

/* Premium hover transform */
.post-card:hover,
.headline-item:hover,
.headline-item-vertical:hover {
    animation: none; /* Stop entrance animation */
}

/* ==========================================
   SCROLL-BASED ANIMATIONS
   ========================================== */

/* Fade in as elements enter viewport */
.scroll-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s var(--ease-out),
                transform 0.8s var(--ease-out);
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Scroll progress indicator */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-color), var(--color-sky));
    z-index: 9999;
    transition: width 0.1s ease-out;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

/* Optimized for readability on all devices */
@media (max-width: 768px) {
    body {
        line-height: 1.65;
    }
    
    p {
        line-height: 1.6;
    }
}

.section-heading {
    font-size: 1.35rem;
    text-align: left;
    color: var(--primary-color);
    margin: 28px 0;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

[data-theme="dark"] .section-heading {
    color: var(--primary-color);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

/* Top info strip */
.top-info-bar {
    background: #e5e7eb;
    color: #1f2937;
    font-size: 1rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.3);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    transition: transform 0.3s ease;
}

.top-info-bar.hidden {
    transform: translateY(-100%);
}

.top-info-bar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 215, 0, 0) 0%, rgba(255, 215, 0, 0.4) 50%, rgba(255, 215, 0, 0) 100%);
    opacity: 0.6;
}

.top-info-bar .container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.top-info-inner {
    display: flex;
    width: 100%;
    max-width: var(--container-width);
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 6px 0;
}

.date-time-info,
.weather-info {
    display: flex;
    align-items: center;
    gap: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 600;
    color: #1f2937;
}

.date-time-info span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #374151;
}

.current-time {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.weather-info {
    color: #374151;
}

.weather-temp {
    font-size: 1.125rem;
    color: #1f2937;
    font-weight: 700;
}

.weather-desc {
    text-transform: capitalize;
    color: #4b5563;
}

.weather-location {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ffd700;
    font-weight: 600;
}

@media (max-width: 768px) {
    .container {
        padding: 0 1rem !important;
    }

    img, video, iframe {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Hide top info bar on mobile */
    .top-info-bar {
        display: none !important;
    }

    /* Adjust body padding since topbar is hidden */
    body {
        padding-top: 0 !important;
    }

    .site-header {
        top: 0 !important;
    }

    /* MOBILE GLASSMORPHISM OPTIMIZATION - Reduce blur for better performance */
    .site-header,
    .site-footer,
    .trending-bar,
    .post-card,
    .headline-item,
    .headline-item-vertical,
    .theory-sidebar,
    .theory-sidebar .widget {
        backdrop-filter: blur(10px) saturate(150%) !important;
        -webkit-backdrop-filter: blur(10px) saturate(150%) !important;
    }

    /* Ensure touch targets are at least 44x44px */
    .menu-toggle,
    .hero-cta,
    button,
    a.read-more,
    .read-more-btn {
        min-height: 44px !important;
        min-width: 44px !important;
    }

    /* Optimize card shadows on mobile */
    .post-card {
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.3) inset !important;
    }

    .post-card:hover {
        box-shadow: 0 6px 16px rgba(15, 23, 42, 0.15), 0 0 0 1px rgba(255, 215, 0, 0.15) inset !important;
    }

    /* Dark mode mobile optimizations */
    [data-theme="dark"] .site-header,
    [data-theme="dark"] .site-footer,
    [data-theme="dark"] .trending-bar,
    [data-theme="dark"] .post-card,
    [data-theme="dark"] .headline-item,
    [data-theme="dark"] .headline-item-vertical,
    [data-theme="dark"] .theory-sidebar,
    [data-theme="dark"] .theory-sidebar .widget {
        backdrop-filter: blur(10px) saturate(120%) !important;
        -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
    }
}

/* Header & Navigation */
.site-header {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08), 0 1px 0 0 rgba(255, 255, 255, 0.5) inset;
    transition: var(--transition);
    border-bottom: 1px solid rgba(226, 232, 240, 0.5);
}

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

.site-header-inner {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 1.5rem;
    overflow: visible;
}

.site-title {
    font-family: var(--header-font);
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--primary-color);
    transition: var(--transition);
}

.custom-logo-link {
    display: block;
    line-height: 0;
}

.custom-logo {
    max-width: 200px;
    height: auto;
    display: block;
}

/* Logo switching for light/dark mode */
.logo-dark {
    display: none;
}

.logo-light {
    display: block;
}

[data-theme="dark"] .logo-dark {
    display: block;
}

[data-theme="dark"] .logo-light {
    display: none;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .logo-dark {
        display: block;
    }
    
    :root:not([data-theme="light"]) .logo-light {
        display: none;
    }
}

.menu-toggle {
    display: none;
    background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%);
    border: 1px solid rgba(255, 215, 0, 0.4);
    border-radius: 24px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px rgba(255, 215, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
    position: relative;
    overflow: hidden;
    will-change: transform, box-shadow;
}

.menu-toggle::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.menu-toggle:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}
.menu-toggle:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 24px rgba(255, 215, 0, 0.45), 0 0 0 2px rgba(255, 255, 255, 0.3) inset;
}

.menu-toggle:hover::before {
    opacity: 1;
}
.menu-toggle .menu-toggle-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: #2a2a2a;
    margin: 3px 0;
    transition: transform 0.35s var(--ease-out), opacity 0.25s ease;
    border-radius: 2px;
}
.menu-toggle[aria-expanded="true"] {
    background: linear-gradient(135deg, #ffb700 0%, #ff9700 100%);
    box-shadow: 0 8px 28px rgba(255, 215, 0, 0.5), 0 0 0 2px rgba(255, 255, 255, 0.25) inset;
    transform: scale(0.98);
}
.menu-toggle[aria-expanded="true"] .menu-toggle-bar {
    background: #2a2a2a;
}
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(2) {
    opacity: 0;
}
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

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

.main-navigation {
    margin-left: auto;
    display: flex;
    align-items: center; /* vertically center nav links with site title/logo */
    transition: max-height 0.35s var(--ease-out), opacity 0.25s ease, transform 0.35s var(--ease-out);
}

.main-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 2.5rem;
}

.main-navigation li {
    position: relative;
}

.main-navigation a {
    color: var(--secondary-color);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.05rem;
    padding: 0.5rem 0;
    transition: var(--transition);
    position: relative;
}

.main-navigation a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--accent-color);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}

.main-navigation a:hover {
    color: #0f172a;
}

.main-navigation a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.main-navigation li::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: var(--accent-color);
    transition: width 0.3s ease;
}

.main-navigation li:hover::after {
    width: 100%;
}

/* ==========================================
   HEADER NAV ACTION BUTTONS (Chat + Theme)
   ========================================== */

.nav-actions {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-left: 2.5rem;
    flex-shrink: 0;
}

.nav-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.5rem 0;
    border: none;
    background: none;
    box-shadow: none;
    outline: none;
    color: var(--secondary-color);
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    position: relative;
}

.nav-action-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--accent-color);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}

.nav-action-btn:hover,
.nav-action-btn:focus,
.nav-action-btn:focus-visible,
.nav-action-btn:active {
    color: #ffd700 !important;
    background: none !important;
    outline: none !important;
    box-shadow: none !important;
    transform: none !important;
}

.nav-action-btn:hover::before,
.nav-action-btn::before {
    display: none !important;
}

.nav-action-btn:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.nav-action-btn svg {
    flex-shrink: 0;
}

/* Sun icon shows in dark mode; moon icon shows in light mode */
.nav-sun-icon { display: none; }
.nav-moon-icon { display: block; }

[data-theme="dark"] .nav-sun-icon { display: block; }
[data-theme="dark"] .nav-moon-icon { display: none; }

[data-theme="dark"] .nav-action-btn {
    color: rgba(255, 255, 255, 0.85);
}

[data-theme="dark"] .nav-action-btn:hover,
[data-theme="dark"] .nav-action-btn:focus,
[data-theme="dark"] .nav-action-btn:active {
    color: #ffd700;
    background: none;
    box-shadow: none;
}

/* Hide nav-actions on mobile (handled by mobile bottom nav) */
@media (max-width: 768px) {
    .nav-actions {
        display: none;
    }
}

body.menu-open {
    overflow: hidden;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.45);
    
    
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s var(--ease-out);
    z-index: 999;
}

body.menu-open::after {
    opacity: 1;
    pointer-events: auto;
}

/* Top Stories / Headlines Section */
.theory-news-headlines {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 3rem;
}

.headline-card {
    background: var(--white);
    border: 1px solid var(--section-bg);
    border-radius: 12px;
    padding: 16px;
    box-shadow: var(--box-shadow);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.headline-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #ffd700 0%, #ffb700 50%, #ffd700 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

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

.headline-card:hover {
    box-shadow: 0 12px 32px rgba(255, 215, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
    border-color: rgba(255, 215, 0, 0.3);
}

.headline-title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

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

.headline-title a:hover {
    color: #d97706;
}

[data-theme="dark"] .headline-title a:hover {
    color: #f1f5f9;
}

.headline-desc {
    font-size: 1.05rem;
    color: var(--secondary-color);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.headline-meta {
    font-size: 1rem;
    color: var(--secondary-color);
    font-weight: 600;
    margin-top: auto;
}

/* Main Content Styles */
.site-main {
    padding: 0rem 0;
}

.entry-header {
    text-align: left;
    margin-bottom: 4rem;
    max-width: 800px;
}

.entry-title {
    font-size: 1.35rem;
    font-weight: 900;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
    transition: var(--transition);
}

.entry-title:hover,
.entry-title a:hover {
    color: #d97706;
}

[data-theme="dark"] .entry-title:hover,
[data-theme="dark"] .entry-title a:hover {
    color: #f1f5f9;
}

.entry-meta {
    color: #64748b;
    font-size: 1.05rem;
    margin-bottom: 2rem;
}

.post-thumbnail {
    margin: -3rem -3rem 3rem;
    overflow: hidden;
    border-radius: 15px 15px 0 0;
}

.post-thumbnail img {
    width: 100%;
    height: auto;
    transition: transform 0.5s ease;
}

.post-thumbnail:hover img {
    transform: scale(1.05);
}

.animate-init {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
    will-change: opacity, transform;
}

.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.single-post .post-thumbnail {
    margin: 0 0 2.5rem;
    border-radius: 22px;
    box-shadow: 0 24px 48px rgba(15,23,42,0.18);
}
.single-post .post-thumbnail img {
    border-radius: inherit;
}
.single-post .entry-header {
    max-width: 780px;
    margin: 0 0 1.8rem;
    text-align: left;
}
.single-post .entry-title {
    font-size: clamp(2rem, 2.6vw + 1rem, 2.8rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 0.8rem;
    color: var(--primary-color);
}
.single-post .entry-title a {
    color: inherit;
    text-decoration: none;
}
.single-post .entry-title a:hover {
    color: #d97706;
}
.single-post .entry-meta {
    color: var(--secondary-color);
    font-size: 1.1rem;
    margin-bottom: 1.4rem;
}

/* Frosted glass container for article content */
.single-post article {
    background: rgba(255, 255, 255, 0.85);
    
    
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 24px;
    padding: 3.5rem;
    box-shadow: 0 12px 48px rgba(26, 26, 26, 0.15),
                0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}

.single-post .entry-content {
    padding-left: 2rem;
    padding-right: 2rem;
    line-height: 1.8;
    font-size: 1.4rem;
}

.single-post .entry-content p {
    margin-bottom: 1.5rem;
    color: #1a1a1a;
    font-size: 1.4rem;
    font-weight: 450;
}
.single-post .entry-content h2,
.single-post .entry-content h3,
.single-post .entry-content h4 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: #1a1a1a;
    font-weight: 700;
}

.single-post .entry-title {
    color: #0f172a;
    font-weight: 800;
}

.single-post .entry-footer {
    padding-left: 2rem;
    padding-right: 2rem;
}
.single-post .entry-content img,
.single-post .entry-content figure img {
    border-radius: 20px;
    box-shadow: 0 18px 42px rgba(15,23,42,0.18);
    margin: 2rem auto;
    display: block;
    max-width: 100%;
    height: auto;
}
.single-post .entry-content figure {
    margin: 2rem auto;
    display: block;
    max-width: 100%;
}
.single-post .entry-content figure figcaption {
    font-size: 1.05rem;
    color: var(--secondary-color);
    margin-top: 0.6rem;
    text-align: center;
}

/* Archive & Category Page Styles */
.archive-header {
    text-align: center;
    padding: 3rem 0 2rem;
    margin-bottom: 2rem;
    border-bottom: 2px solid rgba(255, 215, 0, 0.2);
}

.archive-title {
    font-size: 2.75rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.archive-description {
    font-size: 1.25rem;
    color: #334155;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
    font-weight: 450;
}

.archive-description p {
    margin: 0;
}

.no-posts-found {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: var(--box-shadow);
}

.no-posts-found h2 {
    color: var(--primary-color);
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

.no-posts-found p {
    color: var(--secondary-color);
    font-size: 1.25rem;
}

/* Pagination Styles */
.pagination-wrapper {
    margin: 3rem 0 2rem;
    padding: 2rem 0;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

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

.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    background: var(--card-bg);
    color: var(--text-color);
    border: 1.5px solid rgba(148, 163, 184, 0.2);
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 2px 8px rgba(26, 26, 26, 0.08);
}

.page-numbers:hover {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 183, 0, 0.15));
    border-color: #ffd700;
    color: #ffd700;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.25);
}

.page-numbers.current {
    background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%);
    color: #1a1a1a;
    border-color: #ffd700;
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(255, 215, 0, 0.35);
}

.page-numbers.dots {
    border: none;
    background: transparent;
    box-shadow: none;
    cursor: default;
    color: var(--secondary-color);
}

.page-numbers.dots:hover {
    transform: none;
    background: transparent;
    border: none;
    box-shadow: none;
}

.page-numbers.prev,
.page-numbers.next {
    padding: 0 16px;
    font-weight: 600;
}

/* Dark mode pagination */
[data-theme="dark"] .pagination-wrapper {
    border-top-color: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .page-numbers {
    background: #242424;
    border-color: rgba(148, 163, 184, 0.2);
    color: #e2e8f0;
}

[data-theme="dark"] .page-numbers:hover {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 183, 0, 0.2));
    border-color: #ffd700;
    color: #ffd700;
}

[data-theme="dark"] .page-numbers.current {
    background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%);
    color: #ffffff;
}

[data-theme="dark"] .page-numbers.dots {
    color: #94a3b8;
}

/* Dark mode archive styles */
[data-theme="dark"] .archive-header {
    border-bottom-color: rgba(255, 215, 0, 0.3);
}

[data-theme="dark"] .archive-title {
    color: #f1f5f9;
}

[data-theme="dark"] .archive-description {
    color: #cbd5e1;
}

[data-theme="dark"] .no-posts-found {
    background: rgba(26, 26, 26, 0.75);
    
    
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .no-posts-found h2 {
    color: #f1f5f9;
}

[data-theme="dark"] .no-posts-found p {
    color: #cbd5e1;
}

/* Dark mode article content styling */
[data-theme="dark"] .single-post article {
    background: rgba(26, 26, 26, 0.95);
    
    
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

[data-theme="dark"] .single-post .entry-title {
    color: #f8fafc;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .single-post .entry-content p {
    color: #e2e8f0;
    font-weight: 400;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .single-post .entry-content h2,
[data-theme="dark"] .single-post .entry-content h3,
[data-theme="dark"] .single-post .entry-content h4 {
    color: #f1f5f9;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .single-post .entry-meta {
    color: #cbd5e1;
}

/* Theory Container Styles */
/* Theory Section */
.theory-container {
    background: var(--section-bg);
    padding: 4rem;
    margin: 4rem 0;
    position: relative;
    border-radius: 20px;
    box-shadow: var(--frost-shadow);
    
    
    border: var(--glass-border);
}

/* Search Box Styling */
.search-form {
    position: relative;
    max-width: 400px;
    margin: 0 auto;
}

.search-form input[type="search"],
.search-form .search-field {
    width: 100%;
    padding: 12px 20px;
    padding-right: 120px;
    font-size: 16px;
    background: var(--white);
    border: var(--glass-border);
    border-radius: 24px;
    outline: none;
    transition: var(--transition);
    
    
    box-shadow: var(--frost-shadow);
}

.search-form input[type="search"]:focus,
.search-form .search-field:focus {
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2);
}

.search-form button[type="submit"],
.search-form .search-submit {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: #0066cc;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 24px;
    font-weight: 700;
    font-size: 1.1rem;
    transition: var(--transition);
}

.search-form button[type="submit"]:hover,
.search-form .search-submit:hover {
    background: #0052a3;
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
}

[data-theme="dark"] .search-form button[type="submit"],
[data-theme="dark"] .search-form .search-submit {
    background: #ffd700;
    color: #2a2a2a;
}

[data-theme="dark"] .search-form button[type="submit"]:hover,
[data-theme="dark"] .search-form .search-submit:hover {
    background: #ffed4e;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
}

.theory-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--accent-color);
    border-radius: 20px 20px 0 0;
}

/* Front page hero and layout */
.front-hero {
    background-size: cover;
    background-position: center;
    color: var(--primary-color);
    padding: 72px 0;
    border-bottom: 1px solid var(--section-bg);
}

/* Hero and Top Stories Grid Layout */
.front-hero-stories-wrapper {
    padding: 2rem 0 1rem;
}

.hero-stories-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 24px;
    align-items: start;
}

/* Hero Carousel Styles */
.hero-carousel {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    min-height: 520px;
    box-shadow: 0 24px 48px rgba(15,23,42,0.18);
}

.hero-slide {
    position: absolute;
    inset: 0;
    background: var(--primary-color);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 40px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

.hero-slide:nth-child(1) {
    background-color: #c17a5f;
}

.hero-slide:nth-child(2) {
    background-color: #a89968;
}

.hero-slide:nth-child(3) {
    background-color: #7b8fa3;
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;
}

.hero-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.25) 100%);
}

/* Carousel Indicators */
.carousel-indicators {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.carousel-indicator {
    width: 60px;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.carousel-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: rgba(255, 255, 255, 0.95);
    transition: width 5s linear;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

.carousel-indicator.active .carousel-progress-bar {
    width: 100%;
}

.carousel-indicator:hover {
    background: rgba(255, 255, 255, 0.6);
}

/* Carousel Controls */
.carousel-prev,
.carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    background: rgba(255, 255, 255, 0.98);
    border: 2px solid rgba(15, 23, 42, 0.1);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    opacity: 1;
    visibility: visible;
    padding: 0;
}

.carousel-prev {
    left: 20px;
}

.carousel-next {
    right: 20px;
}

.carousel-prev:hover,
.carousel-next:hover {
    background: white;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    border-color: rgba(255, 215, 0, 0.3);
}

.carousel-prev:hover svg,
.carousel-next:hover svg {
    color: #ffd700;
    transform: scale(1.1);
}

.carousel-prev svg,
.carousel-next svg {
    color: #0f172a;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    width: 24px;
    height: 24px;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Dark mode for carousel controls */
[data-theme="dark"] .carousel-prev,
[data-theme="dark"] .carousel-next {
    background: rgba(36, 36, 36, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .carousel-prev:hover,
[data-theme="dark"] .carousel-next:hover {
    background: rgba(36, 36, 36, 1);
    border-color: rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .carousel-prev svg,
[data-theme="dark"] .carousel-next svg {
    color: #f1f5f9;
}

.front-hero-card {
    position: relative;
    border-radius: 16px;
    padding: 60px 40px;
    background: var(--primary-color);
    background-size: cover;
    background-position: center;
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--card-shadow);
    overflow: hidden;
}

.front-hero-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.35) 100%);
    border-radius: inherit;
}

.front-hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 700px;
}

.top-stories-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.headlines-list-vertical {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.headline-item-vertical {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    text-decoration: none;
    color: inherit;
    transition: all 0.5s var(--ease-spring);
    background: var(--card-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border-color);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    padding: 14px;
    will-change: transform, box-shadow;
    position: relative;
    isolation: isolate;
}

.headline-item-vertical::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--accent-color), var(--color-violet));
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.5s var(--ease-spring);
}

.headline-item-vertical:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.18),
                0 0 0 2px rgba(255, 215, 0, 0.25) inset,
                0 0 40px rgba(255, 215, 0, 0.2);
    border-color: rgba(255, 215, 0, 0.4);
}

.headline-item-vertical:hover::before {
    transform: scaleY(1);
    transform-origin: top;
}

.headline-item-vertical:hover .headline-thumb-vert img {
    transform: scale(1.12) rotate(2deg);
}

.headline-thumb-vert {
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 8px;
}

.headline-thumb-vert img {
    width: 90px;
    height: 70px;
    object-fit: cover;
    display: block;
    transition: transform 0.6s var(--ease-spring);
    will-change: transform;
    border-radius: var(--radius-sm);
}

.headline-item-vertical:hover .headline-thumb-vert img {
    transform: scale(1.12) rotate(2deg);
}

.headline-body-vert {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

/* Limit top stories sidebar to 4 items */
.top-stories-sidebar .headline-item-vertical:nth-child(n+5) {
    display: none;
}

.headline-title-vert {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--primary-color);
    line-height: 1.3;
}

.headline-date-vert {
    font-size: 0.75rem;
    color: var(--secondary-color);
    font-weight: 600;
    letter-spacing: 0.02em;
}

@media (max-width: 960px) {
    .hero-stories-grid {
        grid-template-columns: 1fr;
    }
    
    .hero-carousel,
    .front-hero-card {
        min-height: 400px;
    }
    
    .carousel-prev,
    .carousel-next {
        width: 40px;
        height: 40px;
    }
    
    .carousel-prev {
        left: 12px;
    }
    
    .carousel-next {
        right: 12px;
    }
    
    .hero-slide {
        padding: 40px 24px;
    }
}

.front-hero .wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}


.front-hero .wrap { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:60px 20px; }

/* Top headlines strip */
.top-headlines { 
    padding: 12px 0 40px; 
    background: transparent;
}
.top-headlines .wrap {
    padding: 0 4px;
}
.top-headlines .headlines-list { 
    display: flex; 
    gap: 18px; 
    overflow-x: auto; 
    padding: 8px 6px;
}
.headline-item {
    display: flex;
    flex-direction: column;
    width: 220px;
    text-align: left;
    color: inherit;
    text-decoration: none;
    transition: all 0.5s var(--ease-spring);
    background: var(--card-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border-color);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    isolation: isolate;
    position: relative;
    will-change: transform, box-shadow;
}

.headline-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.8) 0%,
        rgba(255, 215, 0, 0.1) 100%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
}

.headline-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-color), var(--color-sky), var(--color-violet));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s var(--ease-out);
}

.headline-item:hover {
    transform: translateY(-12px) scale(1.03);
    box-shadow: 0 24px 56px rgba(15, 23, 42, 0.2),
                0 0 0 2px rgba(255, 215, 0, 0.3) inset,
                var(--glow-golden);
    border-color: rgba(255, 215, 0, 0.5);
}

.headline-item:hover::before {
    opacity: 1;
}

.headline-item:hover::after {
    transform: scaleX(1);
}

.headline-item:hover .headline-thumb img {
    transform: scale(1.15) rotate(-2deg);
}
.headline-thumb { position: relative; overflow: hidden; z-index: 1; }
.headline-thumb img { 
    width: 100%; 
    height: 120px; 
    object-fit: cover; 
    display: block; 
    transition: transform 0.6s var(--ease-spring);
    will-change: transform;
}

.headline-item:hover .headline-thumb img { 
    transform: scale(1.15) rotate(-2deg);
}
.headline-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 1; }
.headline-title {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--primary-color);
    line-height: 1.3;
    letter-spacing: -0.02em;
    transition: color 0.3s ease;
}

.headline-item:hover .headline-title {
    color: var(--accent-color);
}
.headline-date {
    font-size: 0.9rem;
    color: var(--secondary-color);
    font-weight: 600;
    letter-spacing: 0.03em;
}

@media (min-width: 900px) {
    .top-headlines .headlines-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; overflow: visible; }
    .headline-item { width: auto; height: 100%; }
}

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

    .single-layout .theory-sidebar {
        position: static;
        top: auto;
    }
}


.hero-title {
    font-size: clamp(1.875rem, 4vw, 2.5rem);
    margin: 0 0 1rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: #fff;
    text-shadow: 0 4px 20px rgba(0,0,0,0.7),
                 0 8px 40px rgba(0,0,0,0.5),
                 0 2px 4px rgba(0,0,0,0.9);
    animation: fadeInUp 0.8s var(--ease-out) 0.2s backwards;
}

.hero-subtitle {
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    margin: 0 0 2rem;
    color: rgba(255, 255, 255, 0.95);
    max-width: 900px;
    line-height: 1.6;
    font-weight: 400;
    text-shadow: 0 2px 12px rgba(0,0,0,0.6),
                 0 4px 24px rgba(0,0,0,0.4);
    animation: fadeInUp 0.8s var(--ease-out) 0.4s backwards;
}

.hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, var(--accent-color) 0%, #ffb700 100%);
    color: #0f172a;
    padding: 18px 40px;
    border-radius: var(--radius-full);
    text-decoration: none;
    font-weight: 800;
    font-size: 1.125rem;
    letter-spacing: 0.02em;
    transition: all 0.5s var(--ease-spring);
    box-shadow: 0 8px 28px rgba(255, 215, 0, 0.4),
                0 0 0 1px rgba(255, 255, 255, 0.3) inset,
                0 0 60px rgba(255, 215, 0, 0.2);
    position: relative;
    overflow: hidden;
    will-change: transform, box-shadow;
    isolation: isolate;
    animation: pulse 3s ease-in-out infinite;
}

.hero-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.3) 0%,
        transparent 50%,
        rgba(255, 255, 255, 0.3) 100%
    );
    transform: translateX(-100%) skewX(-15deg);
    transition: transform 0.8s var(--ease-out);
}

.hero-cta:hover {
    transform: scale(1.08) translateY(-4px) !important;
    box-shadow: 0 16px 48px rgba(255, 215, 0, 0.6),
                0 0 0 3px rgba(255, 255, 255, 0.5) inset,
                0 0 80px rgba(255, 215, 0, 0.4) !important;
    color: #0f172a !important;
    background: linear-gradient(135deg, #ffed4e 0%, #ffd700 100%);
    animation: none;
}

.hero-cta:hover::before {
    transform: translateX(100%) skewX(-15deg);
}

.hero-cta:active {
    transform: scale(1.04) translateY(-2px) !important;
    box-shadow: 0 8px 28px rgba(255, 215, 0, 0.5) !important;
    transition-duration: 0.1s;
}

/* Add icon support */
.hero-cta svg {
    width: 20px;
    height: 20px;
    transition: transform 0.4s var(--ease-spring);
}

.hero-cta:hover svg {
    transform: translateX(4px) scale(1.1);
}

/* Constrain hero image inside centered card (not full-width) */
.front-hero {
    padding: 20px 0; /* reduced spacing above/below hero */
}
.front-hero .front-hero-card {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 12px;
    box-shadow: var(--box-shadow);
    overflow: hidden;
    position: relative;
}
.front-hero .front-hero-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.5));
    z-index: 1;
}
.front-hero .front-hero-content { 
    padding: 48px 28px; 
    display:flex; 
    flex-direction:column; 
    align-items:center; 
    text-align:center;
    position: relative;
    z-index: 2;
}


/* Read more and link styles */
.read-more {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%) !important;
    color: #0f172a !important;
    border: none !important;
    padding: 10px 22px !important;
    border-radius: var(--radius-full) !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.02em;
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 3px 12px rgba(255, 215, 0, 0.35) !important;
}

.read-more::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, transparent 60%);
    pointer-events: none;
}

.read-more:hover {
    background: linear-gradient(135deg, #ffe033 0%, #ffc400 100%) !important;
    color: #0a0a0a !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px rgba(255, 215, 0, 0.5) !important;
    border: none !important;
}

.read-more:active {
    transform: translateY(0) scale(0.98) !important;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3) !important;
}

[data-theme="dark"] .read-more {
    background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%) !important;
    color: #0f172a !important;
    border: none !important;
}

[data-theme="dark"] .read-more:hover {
    background: linear-gradient(135deg, #ffe033 0%, #ffc400 100%) !important;
    color: #0a0a0a !important;
    box-shadow: 0 8px 24px rgba(255, 215, 0, 0.55) !important;
}

/* Ensure links inside the grid are clearly clickable */

/* Bias meter under articles */
.bias-meter {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 6px;
    align-items: center;
    margin: 6px 0 4px;
}
.bias-meter .bias-seg {
    height: 6px;
    border-radius: 6px;
    background: var(--section-bg);
    opacity: 0.4;
}
.bias-meter.bias-left .bias-seg.left { background: var(--bias-left); opacity: 1; }
.bias-meter.bias-center .bias-seg.center { background: var(--bias-center); opacity: 1; }
.bias-meter.bias-right .bias-seg.right { background: var(--bias-right); opacity: 1; }
.bias-meter .bias-text {
    font-size: 0.95rem;
    color: var(--secondary-color);
}
.post-card a { color: inherit; text-decoration: none; }
.post-card a:hover { text-decoration: underline; }

/* Featured article layout adjustments */
.featured-article { display: grid; grid-template-columns: 1fr 420px; gap: 24px; align-items: start; }
.featured-article .featured-media img { width:100%; height:100%; object-fit:cover; border-radius:8px; }
.featured-article .featured-content { display:flex; flex-direction:column; gap:12px; }
.featured-article .entry-title a { color: var(--primary-color); text-decoration:none; }
.featured-article .entry-title a:hover { text-decoration: underline; }

.front-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2.5rem;
    align-items: start;
}

.single-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 2.5rem;
    align-items: start;
}

.single-layout .site-main {
    min-width: 0;
    padding: 0 0rem;
}

.single-layout .theory-sidebar {
    width: 100%;
}

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

.sidebar {
    width: 100%;
}

.front-layout .news-main {
    display: block;
    width: 100%;
}

.front-layout .news-main .posts-grid {
    width: 100%;
}

.posts-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Shorten excerpt for first article only */
.posts-grid .post-card.horizontal-card:first-child .post-card-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.post-card {
    display: flex;
    gap: 1rem;
    background: var(--card-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--card-shadow);
    transition: all 0.5s var(--ease-spring);
    position: relative;
    overflow: hidden;
    will-change: transform, box-shadow;
    isolation: isolate;
}

.post-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.15) 0%,
        transparent 50%,
        rgba(255, 215, 0, 0.05) 100%
    );
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

/* Animated border gradient on hover */
.post-card::after {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(
        135deg,
        var(--accent-color),
        var(--color-sky),
        var(--color-violet),
        var(--accent-color)
    );
    background-size: 300% 300%;
    border-radius: inherit;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.5s ease;
    animation: gradientShift 8s ease infinite;
}

.post-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.15),
                0 0 0 2px rgba(255, 215, 0, 0.2) inset,
                var(--glow-golden);
}

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

.post-card:hover::after {
    opacity: 0.3;
}

/* Smooth image zoom on card hover */
.post-card:hover img {
    transform: scale(1.08) rotate(1deg);
}

/* Override for horizontal cards - Desktop only */
@media (min-width: 969px) {
    /* Horizontal layout for desktop - Full width cards */
    .posts-grid .post-card.horizontal-card {
        display: flex !important;
        flex-direction: row !important;
        gap: 0 !important;
        padding: 0 !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        background: var(--card-bg) !important;
        box-shadow: var(--card-shadow) !important;
        transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
        position: relative !important;
    }

    /* Gradient accent bar on hover */
    .posts-grid .post-card.horizontal-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #ffd700 0%, #ffb700 50%, #ffd700 100%);
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: 1;
    }

    .posts-grid .post-card.horizontal-card:hover::before {
        opacity: 1;
    }

    .posts-grid .post-card.horizontal-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 32px rgba(255, 215, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1) !important;
        border-color: rgba(255, 215, 0, 0.3) !important;
    }

    /* Stronger specificity to override base .post-card styles */
    .posts-grid article.horizontal-card.post-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        width: 100% !important;
    }

    /* Thumbnail on LEFT side */
    .posts-grid .post-card.horizontal-card .post-card-thumb,
    article.post-card.horizontal-card .post-card-thumb {
        order: 1;
        flex: 0 0 280px;
        height: auto;
        overflow: hidden;
        display: flex;
        align-items: center;
    }

    .posts-grid .post-card.horizontal-card .post-card-thumb img,
    article.post-card.horizontal-card .post-card-thumb img {
        width: 100%;
        height: 100%;
        min-height: 200px;
        object-fit: cover;
    }

    /* Content on RIGHT side */
    .posts-grid .post-card.horizontal-card .post-card-content,
    article.post-card.horizontal-card .post-card-content {
        order: 2;
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 20px 24px;
        box-shadow: none !important;
    }

    .posts-grid .post-card.horizontal-card .post-card-body,
    article.post-card.horizontal-card .post-card-body {
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
}

/* Tablet breakpoint - Hybrid approach with smaller thumbnails */
@media (min-width: 769px) and (max-width: 968px) {
    .posts-grid .post-card.horizontal-card {
        display: flex !important;
        flex-direction: row !important;
        gap: 0 !important;
        padding: 0 !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        background: var(--card-bg) !important;
    }

    /* Thumbnail on LEFT side - smaller for tablet */
    .posts-grid .post-card.horizontal-card .post-card-thumb,
    article.post-card.horizontal-card .post-card-thumb {
        order: 1;
        flex: 0 0 200px;
        height: auto;
        overflow: hidden;
        display: flex;
        align-items: center;
    }

    .posts-grid .post-card.horizontal-card .post-card-thumb img,
    article.post-card.horizontal-card .post-card-thumb img {
        width: 100%;
        height: 100%;
        min-height: 180px;
        object-fit: cover;
    }

    /* Content on RIGHT side */
    .posts-grid .post-card.horizontal-card .post-card-content,
    article.post-card.horizontal-card .post-card-content {
        order: 2;
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 16px 20px;
    }

    .posts-grid .post-card.horizontal-card .post-card-body {
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
}

/* Footer styling */
.site-footer {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    padding: 48px 0 32px;
    border-top: 1px solid rgba(226, 232, 240, 0.5);
    color: #64748b;
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.06);
}

.site-footer .wrap {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 2rem;
}

.footer-links {
    display: flex;
    justify-content: center;
    margin-bottom: 28px;
    text-align: center;
}

.footer-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
    font-weight: 600;
    font-size: 1rem;
}

.footer-menu li {
    padding: 6px 12px;
}

.footer-menu li + li::before {
    content: "/";
    color: rgba(100, 116, 139, 0.45);
    margin-right: 12px;
}

.footer-menu a {
    color: #475569;
    letter-spacing: 0.2px;
    transition: color 0.18s ease, transform 0.18s ease;
}

.footer-menu a:hover {
    color: var(--primary-color);
    transform: translateY(-2px);
}

.footer-divider {
    width: 100%;
    max-width: var(--container-width);
    height: 1px;
    margin: 0 auto 28px;
    background: linear-gradient(90deg, rgba(148, 163, 184, 0) 0%, rgba(148, 163, 184, 0.5) 50%, rgba(148, 163, 184, 0) 100%);
    border: 0;
}

.footer-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    font-size: 1rem;
    color: #475569;
}

.footer-copy {
    margin: 0;
}

.footer-social {
    list-style: none;
    display: flex;
    gap: 18px;
    padding: 0;
    margin: 0;
    align-items: center;
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid rgba(148, 163, 184, 0.3);
    background: rgba(255, 255, 255, 0.03);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    position: relative;
}

.footer-social svg {
    width: 20px;
    height: 20px;
    display: block;
    color: var(--text-color);
    opacity: 0.7;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.footer-social a:hover {
    transform: translateY(-4px) scale(1.05);
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 183, 0, 0.15));
    border-color: #ffd700;
    box-shadow: 0 8px 20px rgba(255, 215, 0, 0.25);
}

.footer-social a:hover svg {
    color: #ffd700;
    opacity: 1;
    transform: scale(1.1) rotate(5deg);
}

[data-theme="dark"] .footer-menu a:hover {
    color: #ffd700;
}

[data-theme="dark"] .footer-social a {
    background: #242424;
    border-color: rgba(255, 215, 0, 0.2);
}

[data-theme="dark"] .footer-social svg {
    color: #f1f5f9;
    opacity: 0.8;
}

[data-theme="dark"] .footer-social a:hover {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 183, 0, 0.2));
    border-color: #ffd700;
    box-shadow: 0 8px 20px rgba(255, 215, 0, 0.35);
}

[data-theme="dark"] .footer-social a:hover svg {
    color: #ffd700;
    opacity: 1;
}

@media (max-width: 768px) {
    .footer-menu li + li::before {
        display: none;
    }

    .footer-menu li {
        padding: 6px 10px;
    }

    .footer-meta {
        flex-direction: column;
        text-align: center;
    }

    .footer-social {
        justify-content: center;
    }
}

/* Card hover effects */
.post-card:hover:not(.horizontal-card) {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

[data-theme="dark"] .post-card:hover:not(.horizontal-card) {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 215, 0, 0.3);
}

.post-card-thumb img { 
    width:100%; 
    height:200px; 
    object-fit:cover; 
    display:block;
    filter: brightness(1.05) contrast(1.02);
}
.post-card-body { padding: 16px 18px; }
.post-card .card-title {
    font-size: 1.25rem;
    margin: 0 0 10px;
    font-weight: 700;
    line-height: 1.4;
    color: #0f172a;
}

.post-card .card-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.post-card .card-title a:hover {
    color: #d97706;
}

[data-theme="dark"] .post-card .card-title a:hover {
    color: #f1f5f9;
}

.post-card .post-card-excerpt {
    color: #334155;
    margin-bottom: 12px;
    font-size: 1.05rem;
    line-height: 1.5;
    font-weight: 450;
}
.post-card .read-more { 
    display:inline-block;
    color: var(--accent-color);
    font-weight: 500;
    font-size: 1.05rem;
}

/* Dark mode for standard post cards */
[data-theme="dark"] .post-card {
    background: rgba(36, 36, 36, 0.7);
    backdrop-filter: blur(20px) saturate(120%);
    -webkit-backdrop-filter: blur(20px) saturate(120%);
    border-color: rgba(64, 64, 64, 0.5);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

[data-theme="dark"] .post-card::before {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.05), transparent);
}

[data-theme="dark"] .post-card:hover {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6),
                0 0 0 1px rgba(255, 215, 0, 0.3) inset;
    border-color: rgba(255, 215, 0, 0.4);
    transform: translateY(-6px) scale(1.01);
}

[data-theme="dark"] .post-card .card-title,
[data-theme="dark"] .post-card .card-title a {
    color: #f8fafc;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .post-card .post-card-excerpt {
    color: #e2e8f0;
    font-weight: 400;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .post-card .read-more {
    color: #ffd700;
    border-color: #ffd700;
}

/* Horizontal card layout for latest news - image on right */
.posts-grid .post-card.horizontal-card,
article.post-card.horizontal-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch;
    gap: 0 !important;
    padding: 20px 0 !important;
    border-bottom: 1px solid var(--border-color) !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease;
}

.posts-grid .post-card.horizontal-card:hover {
    background-color: rgba(0, 0, 0, 0.02) !important;
    transform: none !important;
    box-shadow: none !important;
}

[data-theme="dark"] .posts-grid .post-card.horizontal-card:hover,
[data-theme="dark"] article.post-card.horizontal-card:hover {
    background-color: rgba(255, 215, 0, 0.03) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Horizontal card base styles - typography and common elements */

.post-card.horizontal-card .card-title {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 8px;
    color: #0f172a;
}

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

.post-card.horizontal-card .card-title a:hover {
    text-decoration: none;
    color: #d97706;
}

[data-theme="dark"] .post-card.horizontal-card .card-title a:hover {
    color: #f1f5f9;
}

.post-card.horizontal-card .post-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    color: #475569;
    margin-bottom: 8px;
    flex-wrap: wrap;
    font-weight: 500;
}

.post-card.horizontal-card .post-meta .post-date {
    font-weight: 500;
}

.post-card.horizontal-card .post-meta .read-time {
    font-weight: 500;
}

.post-card.horizontal-card .post-meta .author-name {
    font-weight: 600;
    color: var(--accent-color);
}

.post-card.horizontal-card .post-meta .meta-separator {
    color: #d1d5db;
    font-weight: 400;
}

[data-theme="dark"] .post-card.horizontal-card .post-meta {
    color: #9ca3af;
}

[data-theme="dark"] .post-card.horizontal-card .post-meta .author-name {
    color: #ffd700;
}

.post-card.horizontal-card .post-author-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.post-card.horizontal-card .author-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
}

.post-card.horizontal-card .author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-card.horizontal-card .author-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color);
}

.post-card.horizontal-card .post-card-excerpt {
    font-size: 1.125rem;
    line-height: 1.6;
    color: #334155;
    margin: 0;
    max-width: 100%;
    font-weight: 450;
}

.post-card.horizontal-card .read-more-btn {
    display: inline-block;
    padding: 0;
    background: transparent;
    color: #ffd700;
    border: none;
    font-weight: 600;
    font-size: 1.1rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    align-self: flex-start;
    margin-top: auto;
}

.post-card.horizontal-card .read-more-btn:hover {
    color: #ffb700;
    transform: translateX(4px);
    text-decoration: underline;
}

.post-card.horizontal-card .post-card-thumb img {
    width: 100%;
    height: 100%;
    min-height: 280px;
    object-fit: cover;
    display: block;
}

/* Dark mode for horizontal cards */
[data-theme="dark"] .post-card.horizontal-card {
    border-bottom-color: #404040;
    background: transparent;
}

[data-theme="dark"] .post-card.horizontal-card .card-title {
    color: #ffffff;
}

[data-theme="dark"] .post-card.horizontal-card .card-title a:hover {
    color: #f1f5f9;
}

[data-theme="dark"] .post-card.horizontal-card .author-name {
    color: #e5e7eb;
}

[data-theme="dark"] .post-card.horizontal-card .post-card-excerpt {
    color: #9ca3af;
}

/* Mobile responsive for horizontal cards */
@media (max-width: 968px) {
    /* Completely reset horizontal card to traditional vertical card on mobile */
    .posts-grid .post-card.horizontal-card,
    article.post-card.horizontal-card,
    .post-card.horizontal-card {
        display: flex !important;
        flex-direction: column !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        margin-bottom: 20px !important;
        background: white !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding: 0 !important;
    }
    
    /* Image on top - reset order */
    .posts-grid .post-card.horizontal-card .post-card-thumb,
    article.post-card.horizontal-card .post-card-thumb,
    .post-card.horizontal-card .post-card-thumb {
        order: 1 !important;
        width: 100% !important;
        height: 220px !important;
        border-radius: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
        flex-shrink: 0 !important;
    }
    
    .posts-grid .post-card.horizontal-card .post-card-thumb img,
    article.post-card.horizontal-card .post-card-thumb img,
    .post-card.horizontal-card .post-card-thumb img {
        width: 100% !important;
        min-height: 220px !important;
        height: 220px !important;
        border-radius: 0 !important;
        object-fit: cover !important;
    }
    
    /* Content below image - reset order */
    .posts-grid .post-card.horizontal-card .post-card-content,
    article.post-card.horizontal-card .post-card-content,
    .post-card.horizontal-card .post-card-content {
        order: 2 !important;
        padding: 0 !important;
        display: block !important;
        flex: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
    }
    
    .posts-grid .post-card.horizontal-card .post-card-body,
    article.post-card.horizontal-card .post-card-body,
    .post-card.horizontal-card .post-card-body {
        padding: 16px !important;
        display: block !important;
        gap: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .posts-grid .post-card.horizontal-card .card-title,
    article.post-card.horizontal-card .card-title,
    .post-card.horizontal-card .card-title {
        font-size: 1.2rem !important;
        margin-bottom: 10px !important;
        line-height: 1.4 !important;
        display: block !important;
        visibility: visible !important;
    }
    
    .posts-grid .post-card.horizontal-card .card-title a,
    article.post-card.horizontal-card .card-title a,
    .post-card.horizontal-card .card-title a {
        display: inline !important;
        visibility: visible !important;
        color: var(--text-color) !important;
    }
    
    .posts-grid .post-card.horizontal-card .post-meta,
    article.post-card.horizontal-card .post-meta,
    .post-card.horizontal-card .post-meta {
        margin-bottom: 10px !important;
        display: flex !important;
        visibility: visible !important;
    }
    
    .posts-grid .post-card.horizontal-card .post-author-info,
    article.post-card.horizontal-card .post-author-info,
    .post-card.horizontal-card .post-author-info {
        margin-bottom: 12px !important;
        display: flex !important;
        visibility: visible !important;
    }
    
    .posts-grid .post-card.horizontal-card .post-card-excerpt,
    article.post-card.horizontal-card .post-card-excerpt,
    .post-card.horizontal-card .post-card-excerpt {
        margin-bottom: 12px !important;
        display: block !important;
        visibility: visible !important;
    }
    
    .posts-grid .post-card.horizontal-card .read-more-btn,
    article.post-card.horizontal-card .read-more-btn,
    .post-card.horizontal-card .read-more-btn {
        margin-top: 8px !important;
        padding: 10px 18px !important;
        background: var(--accent-color) !important;
        color: white !important;
        border-radius: 6px !important;
        display: inline-block !important;
        visibility: visible !important;
        text-decoration: none !important;
    }
}

/* Mobile optimizations for horizontal cards */
@media (max-width: 640px) {
    .post-card.horizontal-card {
        margin-bottom: 16px !important;
        border-radius: 10px !important;
    }
    
    .post-card.horizontal-card .post-card-thumb {
        height: 200px !important;
    }
    
    .post-card.horizontal-card .post-card-thumb img {
        min-height: 200px !important;
        height: 200px !important;
    }
    
    .post-card.horizontal-card .post-card-body {
        padding: 14px !important;
    }
    
    .post-card.horizontal-card .card-title {
        font-size: 1.1rem !important;
        line-height: 1.35 !important;
        margin-bottom: 8px !important;
    }
    
    /* Dark mode mobile card fixes */
    [data-theme="dark"] .post-card.horizontal-card {
        background: rgba(36, 36, 36, 0.9) !important;
        border-color: rgba(71, 85, 105, 0.4) !important;
    }
    
    [data-theme="dark"] .post-card.horizontal-card .card-title,
    [data-theme="dark"] .post-card.horizontal-card .card-title a {
        color: #f1f5f9 !important;
    }
    
    [data-theme="dark"] .post-card.horizontal-card .post-card-excerpt {
        color: #cbd5e1 !important;
    }
    
    [data-theme="dark"] .post-card.horizontal-card .author-name {
        color: #94a3b8 !important;
    }
    
    [data-theme="dark"] .post-card.horizontal-card .read-more {
        color: #2a2a2a !important;
    }
    
    .post-card.horizontal-card .post-card-excerpt {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        margin-bottom: 10px !important;
    }
    
    .post-card.horizontal-card .post-meta {
        font-size: 0.65rem !important;
        margin-bottom: 8px !important;
    }
    
    .post-card.horizontal-card .author-avatar {
        width: 32px !important;
        height: 32px !important;
    }
    
    .post-card.horizontal-card .author-name {
        font-size: 0.85rem !important;
    }
    
    .post-card.horizontal-card .post-author-info {
        margin-bottom: 10px !important;
    }
    
    .post-card.horizontal-card .read-more-btn {
        font-size: 0.9rem !important;
        margin-top: 6px !important;
    }
}

/* Featured card - larger visual weight but still uses .post-card structure */
.post-card.featured-card,
.post-card.post-card-featured {
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    border-radius: 12px;
}
.post-card.featured-card .post-card-thumb img,
.post-card.post-card-featured .post-card-thumb img {
    height: 360px !important;
}
.post-card.featured-card .post-card-body,
.post-card.post-card-featured .post-card-body {
    padding: 22px 24px;
}
.post-card.featured-card .card-title {
    font-size: 1.6rem;
    margin-bottom: 12px;
}
.post-card.featured-card .post-card-excerpt { font-size: 1.05rem; color: var(--secondary-color); }

/* Trending Topics Bar */
.trending-bar {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    padding: 12px 0;
    border-bottom: 1px solid rgba(226, 232, 240, 0.5);
    margin-bottom: 0;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}
.trending-inner {
    display: flex;
    align-items: center;
    gap: 18px;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 2rem;
    overflow: hidden;
    position: relative;
}
.trending-inner::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 150px;
    background: linear-gradient(to left, var(--light-bg) 0%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}
.trending-icon {
    display: flex;
    align-items: center;
    margin-right: 12px;
    flex-shrink: 0;
    z-index: 2;
    position: relative;
}

.trending-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    animation: buzz 2s ease-in-out infinite;
}

@keyframes buzz {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-2px) rotate(-3deg);
    }
    50% {
        transform: translateY(0) rotate(3deg);
    }
    75% {
        transform: translateY(-1px) rotate(-2deg);
    }
}
.trending-list {
    display: flex;
    gap: 12px;
    overflow: visible;
    padding-bottom: 2px;
    padding-right: 200px;
    position: relative;
    width: 100%;
}

/* Auto-scroll animation */
.trending-list.scrolling {
    animation: scroll-trending 30s linear infinite;
}

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

.trending-list:hover {
    animation-play-state: paused;
}

/* Faster scroll on mobile */
@media (max-width: 768px) {
    .trending-list.scrolling {
        animation: scroll-trending 15s linear infinite;
    }
}

.trending-item {
    display: inline-flex;
    align-items: center;
    background: var(--section-bg);
    color: var(--text-color);
    border-radius: 16px;
    font-size: 1rem;
    font-weight: 500;
    padding: 6px 14px;
    white-space: nowrap;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    border: 1px solid var(--border-color);
    flex-shrink: 0;
}

.trending-item:hover {
    background: var(--accent-color);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.2);
    border-color: var(--accent-color);
}

[data-theme="dark"] .trending-item {
    background: rgba(255, 215, 0, 0.15);
    color: #e2e8f0;
    border-color: rgba(255, 215, 0, 0.4);
}

[data-theme="dark"] .trending-item:hover {
    background: linear-gradient(135deg, #ffd700, #ffb700);
    color: #2a2a2a;
}

.trending-fallback {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    color: var(--secondary-color);
    opacity: 0.7;
    padding: 4px 12px 4px 0;
    white-space: nowrap;
    flex-shrink: 0;
    margin-right: 12px;
    background: var(--light-bg);
    position: relative;
    z-index: 2;
}
.trending-pill {
    display: flex;
    align-items: center;
    background: #ecebe7;
    color: #1a1a1a;
    border-radius: 18px;
    font-size: 0.98rem;
    font-weight: 600;
    padding: 6px 18px;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    transition: background 0.18s;
    cursor: pointer;
    border: none;
    outline: none;
    flex-shrink: 0;
}
.trending-pill:hover {
    background: rgba(255, 215, 0, 0.15);
    border-color: #ffd700;
    color: #ffd700;
    transform: translateY(-2px);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.trending-loading {
    color: var(--secondary-color);
    font-size: 1.1rem;
    opacity: 0.7;
}

/* Sidebar widgets */
.theory-sidebar .widget {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 1.5rem;
    margin-bottom: 1rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(226, 232, 240, 0.6);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.theory-sidebar .widget:hover {
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
    transform: translateY(-2px);
}

.widget-title,
h2.widget-title,
h3.widget-title,
.theory-sidebar .widget h1,
.theory-sidebar .widget h2,
.theory-sidebar .widget h3,
.theory-sidebar .widget h4 {
    font-size: 0.7rem !important;
    line-height: 1.2 !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding-bottom: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
    border-bottom: 1px solid rgba(226, 232, 240, 0.7);
}

/* Sidebar specific styling */
.theory-sidebar {
    width: 100%;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--radius-md);
    padding: 12px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
    border: 1px solid rgba(226, 232, 240, 0.5);
}
.theory-sidebar .widget { padding: 16px; }
.theory-sidebar .widget_search .search-form,
.theory-sidebar .search-form {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 0 !important;
    background: rgba(255, 255, 255, 0.95);
    border: 1.5px solid rgba(203, 213, 225, 0.8);
    border-radius: 50px;
    padding: 5px 5px 5px 16px;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.theory-sidebar .widget_search .search-form:focus-within,
.theory-sidebar .search-form:focus-within {
    border-color: #ffd700;
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.15), 0 2px 12px rgba(15, 23, 42, 0.06);
}
.theory-sidebar .widget_search label,
.theory-sidebar .search-form label {
    flex: 1;
    margin: 0;
    display: flex;
    align-items: center;
    min-width: 0;
}
.theory-sidebar .widget_search input[type="search"],
.theory-sidebar .widget_search .search-field,
.theory-sidebar .search-form input[type="search"],
.theory-sidebar .search-form .search-field,
.theory-sidebar input[type="search"],
.theory-sidebar .search-field {
    flex: 1;
    width: 100%;
    padding: 8px 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--primary-color);
    font-size: 0.95rem !important;
    font-weight: 400;
    outline: none;
}
.theory-sidebar .widget_search input[type="search"]:focus,
.theory-sidebar .widget_search .search-field:focus,
.theory-sidebar .search-form input[type="search"]:focus,
.theory-sidebar .search-form .search-field:focus {
    box-shadow: none !important;
    outline: none;
}
.theory-sidebar .widget_search input[type="search"]::placeholder,
.theory-sidebar .widget_search .search-field::placeholder,
.theory-sidebar .search-form input[type="search"]::placeholder,
.theory-sidebar .search-form .search-field::placeholder,
.theory-sidebar input[type="search"]::placeholder,
.theory-sidebar .search-field::placeholder {
    color: #94a3b8;
    font-weight: 400;
}
.theory-sidebar .widget_search button[type="submit"],
.theory-sidebar .widget_search .search-form button[type="submit"],
.theory-sidebar .search-form button[type="submit"],
.theory-sidebar .widget_search .search-submit,
.theory-sidebar .search-submit,
.theory-sidebar button[type="submit"] {
    flex-shrink: 0;
    position: static !important;
    width: auto !important;
    padding: 9px 18px !important;
    margin: 0;
    font-size: 0.875rem !important;
    font-weight: 700;
    background: linear-gradient(135deg, #ffd700, #ffb700) !important;
    color: #0f172a !important;
    border: none !important;
    border-radius: 50px !important;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
    transform: none !important;
    right: auto !important;
    top: auto !important;
    white-space: nowrap;
}
.theory-sidebar .widget_search button[type="submit"]:hover,
.theory-sidebar .widget_search .search-form button[type="submit"]:hover,
.theory-sidebar .search-form button[type="submit"]:hover,
.theory-sidebar .widget_search .search-submit:hover,
.theory-sidebar .search-submit:hover,
.theory-sidebar button[type="submit"]:hover {
    background: linear-gradient(135deg, #ffe033, #ffc400) !important;
    color: #0a0a0a !important;
    box-shadow: 0 4px 14px rgba(255, 215, 0, 0.45) !important;
    transform: none !important;
}
[data-theme="dark"] .theory-sidebar .widget_search .search-form,
[data-theme="dark"] .theory-sidebar .search-form {
    background: rgba(36, 36, 36, 0.9);
    border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .theory-sidebar input[type="search"],
[data-theme="dark"] .theory-sidebar .search-field {
    color: #f1f5f9 !important;
}
[data-theme="dark"] .theory-sidebar input[type="search"]::placeholder,
[data-theme="dark"] .theory-sidebar .search-field::placeholder {
    color: #64748b;
}

/* Sidebar widget titles */
.theory-sidebar .widget .widget-title { color: #94a3b8; }
[data-theme="dark"] .widget-title,
[data-theme="dark"] h3.widget-title {
    color: #475569;
    border-bottom-color: rgba(255, 255, 255, 0.07);
}

.widget_advert .ad-placeholder {
    display: grid;
    place-items: center;
    min-height: 250px;
    border-radius: 14px;
    border: 1px dashed rgba(148, 163, 184, 0.55);
    background: linear-gradient(135deg, rgba(148, 163, 184, 0.12), rgba(203, 213, 225, 0.18));
    color: var(--secondary-color);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
}

/* ============================================
   RECENT POSTS WIDGET — Numbered + Dividers
   ============================================ */

.widget_recent_entries {
    font-size: 0.78rem !important;
}

.widget_recent_entries ul {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: recent-post-counter;
}

.widget_recent_entries ul li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(226, 232, 240, 0.7);
    counter-increment: recent-post-counter;
    transition: background 0.15s ease;
    font-size: 0.78rem !important;
    line-height: 1.4;
}

.widget_recent_entries ul li:first-child { padding-top: 2px; }
.widget_recent_entries ul li:last-child { border-bottom: none; padding-bottom: 0; }

.widget_recent_entries ul li::before {
    content: counter(recent-post-counter, decimal-leading-zero);
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 800;
    color: #0f172a;
    background: linear-gradient(135deg, #ffd700, #ffb700);
    border-radius: 6px;
    padding: 3px 7px;
    margin-top: 2px;
    letter-spacing: 0.03em;
    line-height: 1.4;
    min-width: 30px;
    text-align: center;
}

.widget_recent_entries ul li a {
    font-size: 0.78rem !important;
    font-weight: 600;
    color: #1e293b;
    text-decoration: none;
    line-height: 1.45;
    display: block;
    transition: color 0.18s ease;
}

.widget_recent_entries ul li a:hover { color: #0066cc; }

.widget_recent_entries .post-date {
    display: block;
    font-size: 0.72rem;
    color: #94a3b8;
    margin-top: 3px;
    font-weight: 500;
}

[data-theme="dark"] .widget_recent_entries ul li {
    border-bottom-color: rgba(255, 255, 255, 0.07);
}

[data-theme="dark"] .widget_recent_entries ul li::before {
    color: #0f172a;
}

[data-theme="dark"] .widget_recent_entries ul li a {
    color: #e2e8f0;
}

[data-theme="dark"] .widget_recent_entries ul li a:hover { color: #ffd700; }

[data-theme="dark"] .widget_recent_entries .post-date { color: #64748b; }

/* ============================================
   WP BLOCK LATEST POSTS (Gutenberg widget)
   ============================================ */

.wp-block-latest-posts {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.wp-block-latest-posts li {
    padding: 9px 0 !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.7) !important;
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
}

.wp-block-latest-posts li:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.wp-block-latest-posts__post-title {
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    display: block;
}

.wp-block-latest-posts__post-title:hover {
    color: #ffd700 !important;
}

.wp-block-latest-posts__post-date {
    display: block;
    font-size: 0.68rem !important;
    color: #94a3b8 !important;
    margin-top: 2px;
}

[data-theme="dark"] .wp-block-latest-posts li {
    border-bottom-color: rgba(255, 255, 255, 0.07) !important;
}

[data-theme="dark"] .wp-block-latest-posts__post-title {
    color: #e2e8f0 !important;
}

[data-theme="dark"] .wp-block-latest-posts__post-title:hover {
    color: #ffd700 !important;
}

[data-theme="dark"] .wp-block-latest-posts__post-date {
    color: #64748b !important;
}

/* ============================================
   WP BLOCK LATEST COMMENTS (Gutenberg widget)
   ============================================ */

.wp-block-latest-comments {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.wp-block-latest-comments__comment {
    padding: 9px 0 !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.7) !important;
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
}

.wp-block-latest-comments__comment:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.wp-block-latest-comments__comment-author,
.wp-block-latest-comments__comment-author a,
.wp-block-latest-comments__comment-link {
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    text-decoration: none !important;
}

.wp-block-latest-comments__comment-link:hover,
.wp-block-latest-comments__comment-author a:hover {
    color: #ffd700 !important;
}

.wp-block-latest-comments__comment-date {
    display: block;
    font-size: 0.68rem !important;
    color: #94a3b8 !important;
    margin-top: 2px;
}

.wp-block-latest-comments__comment-excerpt p {
    font-size: 0.72rem !important;
    color: #64748b !important;
    margin: 4px 0 0 !important;
    line-height: 1.4;
}

[data-theme="dark"] .wp-block-latest-comments__comment {
    border-bottom-color: rgba(255, 255, 255, 0.07) !important;
}

[data-theme="dark"] .wp-block-latest-comments__comment-author,
[data-theme="dark"] .wp-block-latest-comments__comment-author a,
[data-theme="dark"] .wp-block-latest-comments__comment-link {
    color: #e2e8f0 !important;
}

[data-theme="dark"] .wp-block-latest-comments__comment-link:hover,
[data-theme="dark"] .wp-block-latest-comments__comment-author a:hover {
    color: #ffd700 !important;
}

[data-theme="dark"] .wp-block-latest-comments__comment-date {
    color: #64748b !important;
}

[data-theme="dark"] .wp-block-latest-comments__comment-excerpt p {
    color: #475569 !important;
}

/* ============================================
   WP BLOCK SEARCH (Gutenberg widget)
   ============================================ */

.wp-block-search__label {
    display: block !important;
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #94a3b8 !important;
    margin-bottom: 10px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.7) !important;
}

[data-theme="dark"] .wp-block-search__label {
    color: #475569 !important;
    border-bottom-color: rgba(255, 255, 255, 0.07) !important;
}

.wp-block-search__inside-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1.5px solid rgba(203, 213, 225, 0.8) !important;
    border-radius: 50px !important;
    padding: 5px 5px 5px 16px !important;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    gap: 0 !important;
}

.wp-block-search__inside-wrapper:focus-within {
    border-color: #ffd700 !important;
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.15), 0 2px 12px rgba(15, 23, 42, 0.06) !important;
}

.wp-block-search__input {
    flex: 1 !important;
    border: none !important;
    background: transparent !important;
    padding: 6px 0 !important;
    font-size: 0.85rem !important;
    color: var(--text-color) !important;
    outline: none !important;
    box-shadow: none !important;
    min-width: 0 !important;
}

.wp-block-search__input::placeholder {
    color: #94a3b8 !important;
    font-weight: 400 !important;
}

.wp-block-search__button {
    flex-shrink: 0 !important;
    padding: 9px 18px !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, #ffd700, #ffb700) !important;
    color: #0f172a !important;
    border: none !important;
    border-radius: 50px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3) !important;
    white-space: nowrap !important;
    margin: 0 !important;
}

.wp-block-search__button:hover {
    background: linear-gradient(135deg, #ffe033, #ffc400) !important;
    box-shadow: 0 4px 14px rgba(255, 215, 0, 0.45) !important;
    transform: none !important;
}

[data-theme="dark"] .wp-block-search__inside-wrapper {
    background: rgba(36, 36, 36, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .wp-block-search__input {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .wp-block-search__input::placeholder {
    color: #64748b !important;
}

/* Newsletter Widget */
.widget_newsletter {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 183, 0, 0.05) 100%);
    border: 2px solid #ffd700;
    color: var(--text-color);
}
.widget_newsletter .widget-title {
    color: var(--primary-color);
    margin-bottom: 8px !important;
}
.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}
.newsletter-form input[type="email"] {
    padding: 14px 16px;
    border: none;
    border-radius: 25px;
    font-size: 1.1rem;
    outline: none;
    background: white;
    color: var(--primary-color);
    font-weight: 400;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    transition: box-shadow 0.2s ease;
}
.newsletter-form input[type="email"]:focus {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.newsletter-form input[type="email"]::placeholder {
    color: #94a3b8;
    font-weight: 400;
}
.newsletter-submit {
    background: #1a1a1a;
    color: #fff;
    border: none;
    padding: 14px 20px;
    border-radius: 24px;
    font-weight: 700;
    font-size: 1.125rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    width: 100%;
    box-shadow: 0 4px 14px rgba(26, 26, 26, 0.3);
}
.newsletter-submit:hover {
    background: #0d1829;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(26, 26, 26, 0.4);
}

[data-theme="dark"] .newsletter-submit {
    background: linear-gradient(135deg, #ffd700, #ffb700);
    color: #2a2a2a;
}

[data-theme="dark"] .newsletter-submit:hover {
    background: linear-gradient(135deg, #ffed4e, #ffd700);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
}

@media (min-width: 1024px) {
    .theory-sidebar .widget_search .search-form,
    .theory-sidebar .search-form {
        max-width: 100%;
    }
    .theory-sidebar .widget_search input[type="search"],
    .theory-sidebar .widget_search .search-field,
    .theory-sidebar .search-form input[type="search"],
    .theory-sidebar .search-form .search-field,
    .theory-sidebar input[type="search"],
    .theory-sidebar .search-field {
        font-size: 14px;
    }
    .newsletter-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
    }
    .newsletter-form input[type="email"] {
        width: 100%;
    }
    .newsletter-submit {
        align-self: center;
        padding: 10px 26px;
        width: auto;
        justify-self: end;
    }
}

.recent-list { list-style: none; margin: 0; padding: 0; display:flex; flex-direction:column; gap:12px; }
.recent-item { display:block; }
.recent-link { display:flex; gap:12px; align-items:flex-start; text-decoration: none; color: inherit; transition: transform 0.2s ease; }
.recent-link:hover { transform: translateX(4px); }
.recent-thumb { flex-shrink: 0; width: 80px; height: 80px; overflow: hidden; border-radius: 8px; background: var(--light-bg); }
.recent-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.recent-info { display:flex; flex-direction:column; flex: 1; min-width: 0; }
.recent-title { font-weight:700; font-size:0.95rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.recent-meta { font-size:0.8rem; color:var(--secondary-color); margin-top:4px; }

/* Sticky sidebar on wider screens */
@media (min-width: 1000px) {
    .theory-sidebar { position: sticky; top: 120px; }
}

@media (max-width: 900px) {
    .menu-toggle {
        display: flex;
    }

    .main-navigation {
        display: none;
    }

    .main-navigation.is-open {
        display: block;
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        right: 0;
        background: #1a1a1a;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
        border-radius: 16px;
        z-index: 9999;
        margin: 0 1rem;
        animation: slideDown 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        overflow: hidden;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .main-navigation ul {
        flex-direction: column;
        gap: 0;
        padding: 0.75rem 0;
        margin: 0;
        list-style: none;
    }

    .main-navigation li {
        border-bottom: 1px solid rgba(71, 85, 105, 0.4);
        opacity: 0;
        animation: fadeInItem 0.3s ease forwards;
    }

    .main-navigation li:nth-child(1) { animation-delay: 0.05s; }
    .main-navigation li:nth-child(2) { animation-delay: 0.1s; }
    .main-navigation li:nth-child(3) { animation-delay: 0.15s; }
    .main-navigation li:nth-child(4) { animation-delay: 0.2s; }
    .main-navigation li:nth-child(5) { animation-delay: 0.25s; }
    .main-navigation li:nth-child(6) { animation-delay: 0.3s; }

    @keyframes fadeInItem {
        from {
            opacity: 0;
            transform: translateX(-10px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .main-navigation li:last-child {
        border-bottom: none;
    }

    .main-navigation a {
        display: block;
        padding: 1rem 1.5rem;
        font-size: 1.05rem;
        font-weight: 700;
        color: #e2e8f0;
        text-align: left;
        text-decoration: none;
        transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        position: relative;
        overflow: hidden;
    }

    .main-navigation a::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: linear-gradient(135deg, #ffd700, #ffb700);
        transform: scaleY(0);
        transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    .main-navigation a:hover,
    .main-navigation a:focus {
        background: rgba(255, 215, 0, 0.1);
        padding-left: 2rem;
        color: #ffd700;
    }

    .main-navigation a:hover::before,
    .main-navigation a:focus::before {
        transform: scaleY(1);
    }
    
    [data-theme="dark"] .main-navigation.is-open {
        background: #2d2d2dc2;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    }
    
    [data-theme="dark"] .main-navigation li {
        border-bottom-color: rgba(71, 85, 105, 0.5);
    }
    
    [data-theme="dark"] .main-navigation a {
        color: #e2e8f0;
    }
    
    [data-theme="dark"] .main-navigation a:hover,
    [data-theme="dark"] .main-navigation a:focus {
        background: rgba(255, 215, 0, 0.15);
        color: #ffd700;
    }

    .main-navigation a::after,
    .main-navigation li::after {
        display: none;
    }

    /* Force single column layout and hide sidebar completely */
    .front-layout {
        grid-template-columns: 1fr !important;
        display: grid !important;
    }
    
    .single-layout {
        grid-template-columns: 1fr !important;
        display: grid !important;
    }
    
    .posts-grid {
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Hide sidebar on tablets and below */
    .theory-sidebar,
    .sidebar {
        display: none;
    }
}

@media (max-width: 640px) {
    /* First card in Latest News - smaller title and limited excerpt */
    .posts-grid .post-card.horizontal-card:first-child .card-title {
        font-size: 1.35rem !important;
    }
    
    .posts-grid .post-card.horizontal-card:first-child .card-title a {
        font-size: 1.35rem !important;
    }
    
    .posts-grid .post-card.horizontal-card:first-child .post-card-excerpt {
        display: -webkit-box !important;
        -webkit-line-clamp: 6 !important;
        line-clamp: 6 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* Shorten all post-card excerpts on homepage */
    .post-card-excerpt {
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    .container { padding: 0 1rem; }
    .wrap { padding: 0 1rem; }
    .site-header { padding: 1rem 0; }
    .site-header-inner { gap: 0.75rem; }
    .top-headlines { padding: 16px 0 10px; }
    .top-headlines .wrap { padding: 0 1rem; }
    .top-headlines .headlines-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        overflow: hidden;
        padding: 0;
    }
    .top-headlines .headline-item {
        width: 100%;
        min-width: 0;
    }
    .top-headlines .headline-item:nth-of-type(n+3) {
        display: none;
    }
    .top-headlines .headline-thumb img { height: 140px; }
    .front-hero .front-hero-card { border-radius: 16px; margin: 0; }
    .front-hero .wrap { padding: 28px 20px 90px; }
    .hero-title { 
        font-size: 1.6rem; 
        margin-bottom: 10px;
        line-height: 1.15;
    }
    .hero-subtitle { 
        font-size: 1.05rem;
        margin-bottom: 20px;
        line-height: 1.45;
    }
    .hero-cta {
        font-size: 1rem;
        padding: 11px 20px;
    }
    .front-layout { gap: 2rem; padding: 0; }
    .news-main { display: grid; gap: 1.25rem; padding: 0; }
    .post-card {
        border-radius: 16px;
        box-shadow: 0 8px 24px rgba(15,23,42,0.12);
    }
    
    /* Force proper card layout for horizontal cards on mobile */
    .posts-grid .post-card.horizontal-card,
    article.post-card.horizontal-card {
        border-radius: 12px !important;
        box-shadow: 0 8px 20px rgba(26, 26, 26, 0.15), 0 2px 6px rgba(26, 26, 26, 0.08) !important;
        border: none !important;
        background: var(--white) !important;
        margin-bottom: 20px !important;
    }
    
    .post-card-thumb img {
        height: 190px;
        border-radius: 16px 16px 0 0;
    }
    
    /* Ensure image spans full width with no rounded corners on sides */
    .posts-grid .post-card.horizontal-card .post-card-thumb img,
    article.post-card.horizontal-card .post-card-thumb img {
        height: 200px !important;
        border-radius: 12px 12px 0 0 !important;
        width: 100% !important;
    }
    
    .post-card-body { padding: 18px 20px; }
    
    /* Ensure proper padding for horizontal card body on mobile */
    .posts-grid .post-card.horizontal-card .post-card-body,
    article.post-card.horizontal-card .post-card-body {
        padding: 16px 16px 18px 16px !important;
    }
    
    .post-card .card-title { font-size: 1.15rem; }
    
    /* Better title sizing for horizontal cards on mobile */
    .posts-grid .post-card.horizontal-card .card-title,
    article.post-card.horizontal-card .card-title {
        font-size: 1.15rem !important;
        line-height: 1.4 !important;
        margin-bottom: 10px !important;
    }
    
    .post-card .post-card-excerpt { font-size: 0.98rem; }
    
    /* Better excerpt sizing - limit to 4 lines on mobile */
    .posts-grid .post-card.horizontal-card .post-card-excerpt,
    article.post-card.horizontal-card .post-card-excerpt {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        color: #6b7280 !important;
        margin-bottom: 12px !important;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Style the read more button */
    .posts-grid .post-card.horizontal-card .read-more-btn,
    article.post-card.horizontal-card .read-more-btn {
        display: inline-block !important;
        padding: 10px 20px !important;
        background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%) !important;
        color: #2a2a2a !important;
        border-radius: 24px !important;
        text-decoration: none !important;
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        margin-top: 8px !important;
        box-shadow: 0 3px 10px rgba(255, 215, 0, 0.2) !important;
        transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
    }
    
    .posts-grid .post-card.horizontal-card .read-more-btn:hover,
    article.post-card.horizontal-card .read-more-btn:hover {
        transform: scale(1.05) translateY(-2px) !important;
        box-shadow: 0 5px 16px rgba(255, 215, 0, 0.4) !important;
    }
    
    /* Smaller meta text */
    .posts-grid .post-card.horizontal-card .post-meta,
    article.post-card.horizontal-card .post-meta {
        font-size: 0.7rem !important;
        margin-bottom: 8px !important;
    }
    
    /* Smaller author info */
    .posts-grid .post-card.horizontal-card .author-avatar,
    article.post-card.horizontal-card .author-avatar {
        width: 35px !important;
        height: 35px !important;
    }
    
    .posts-grid .post-card.horizontal-card .author-name,
    article.post-card.horizontal-card .author-name {
        font-size: 0.9rem !important;
    }
    
    .posts-grid .post-card.horizontal-card .post-author-info,
    article.post-card.horizontal-card .post-author-info {
        margin-bottom: 10px !important;
    }
    
    .post-card.featured-card .post-card-thumb img,
    .post-card.post-card-featured .post-card-thumb img { height: 260px !important; }
    .posts-grid {
        gap: 0 !important;
    }
    .section-heading { font-size: 1.4rem; margin: 24px 0 16px; padding: 0; text-align: left; }
    .theory-sidebar { margin-top: 2rem; padding: 0; }
    .menu-toggle { padding: 9px 10px; }
    .main-navigation { right: -20px; left: -20px; border-radius: 24px; }
    .main-navigation ul { padding: 18px 24px 22px; }
    
    /* Single post article page mobile formatting */
    .single-post .entry-content {
        font-size: 1.25rem;
        line-height: 1.8;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    .single-post .entry-content p {
        font-size: 1.25rem;
        line-height: 1.8;
        margin-bottom: 1.2rem;
    }
    
    .single-post .entry-content h1,
    .single-post .entry-content h2,
    .single-post .entry-content h3 {
        font-size: 1.4rem;
        line-height: 1.4;
        margin-top: 1.5rem;
        margin-bottom: 1rem;
    }
    
    .single-post .entry-content img,
    .single-post .entry-content figure img {
        border-radius: 12px;
        margin: 1.5rem 0;
        max-width: 100%;
        height: auto;
    }
    
    .single-post .entry-header {
        margin-bottom: 2rem;
    }
    
    .entry-title {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
    }
    
    .theory-container {
        padding: 1.5rem;
        margin: 2rem 0;
    }

    /* Archive page mobile styles */
    .archive-header {
        padding: 2rem 0 1.5rem;
        margin-bottom: 1.5rem;
    }

    .archive-title {
        font-size: 1.75rem;
        line-height: 1.2;
    }

    .archive-description {
        font-size: 1.1rem;
        padding: 0 1rem;
    }

    /* Pagination mobile styles */
    .pagination-wrapper {
        margin: 2rem 0 1.5rem;
        padding: 1.5rem 0;
    }

    .page-numbers {
        min-width: 38px;
        height: 38px;
        padding: 0 10px;
        font-size: 1rem;
    }

    .page-numbers.prev,
    .page-numbers.next {
        padding: 0 12px;
        font-size: 1rem;
    }

    .nav-links {
        gap: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .animate-init,
    .animate-in {
        opacity: 1 !important;
        transform: none !important;
    }
}

.theory-container h2 {
    color: var(--primary-color);
    font-size: 2.25rem;
    margin-bottom: 2.5rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.theory-container h2 i {
    color: var(--secondary-color);
}

.theory-option {
    background: rgba(255, 215, 0, 0.08);
    padding: 2.5rem;
    margin: 2rem 0;
    border-radius: 12px;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
    border: 1px solid rgba(255, 215, 0, 0.18);
    
    
}

.theory-option:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

.theory-option:hover::before {
    opacity: 0.15;
}

.theory-option:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 30px rgba(255,51,102,0.2);
    border-color: var(--accent-color);
}

.theory-option.active {
    border-color: var(--accent-color);
    background: rgba(0,255,204,0.1);
    box-shadow: 0 0 20px rgba(0,255,204,0.2);
}

.theory-option h3 {
    color: var(--primary-color);
    margin-bottom: 1.25rem;
    font-size: 1.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: var(--transition);
}

.theory-option:hover h3 {
    color: var(--accent-color);
}

[data-theme="dark"] .theory-option {
    background: rgba(255, 215, 0, 0.1);
    border-color: rgba(255, 215, 0, 0.3);
}

[data-theme="dark"] .theory-option:hover {
    background: rgba(255, 215, 0, 0.15);
    border-color: #ffd700;
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.2);
}

[data-theme="dark"] .theory-option h3 {
    color: #e2e8f0;
}

[data-theme="dark"] .theory-option:hover h3 {
    color: #ffd700;
}

[data-theme="dark"] .theory-option.active {
    border-color: #ffd700;
    background: rgba(255, 215, 0, 0.2);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

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

.post-card {
    display: block !important;
    border-radius: 10px;
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--section-bg);
    box-shadow: var(--box-shadow);
}

.post-card-thumb img {
    width: 100% !important;
    height: 300px !important;
    object-fit: cover !important;
    display: block;
}

.post-card-body {
    padding: 18px !important;
}

/* Ensure full-width cards look good on very wide screens */
.posts-grid .post-card { max-width: 100%; }

/* Center cards with a comfortable max-width on larger screens */
@media (min-width: 800px) {
    .posts-grid .post-card {
        max-width: 980px;
        margin-left: auto;
        margin-right: auto;
    }
}

.theory-option h3 i {
    color: var(--accent-color);
    font-size: 1.125rem;
}

.theory-option p {
    line-height: 1.8;
    font-size: 1.25rem;
    color: var(--secondary-color);
    margin-bottom: 1.5rem;
}

/* Theory Stats */
.theory-stats {
    display: flex;
    gap: 2rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--light-bg);
}

.theory-votes,
.theory-comments {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--secondary-color);
    font-size: 1.1rem;
    font-weight: 500;
    transition: var(--transition);
}

.theory-votes i,
.theory-comments i {
    color: var(--accent-color);
    transition: var(--transition);
}

.theory-option:hover .theory-votes,
.theory-option:hover .theory-comments {
    color: var(--accent-color);
}

.theory-option.active {
    border: 2px solid var(--accent-color);
    background-color: var(--light-bg);
}

/* Article Audio Player */
.article-audio-player {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    border-radius: 50px;
    margin: 24px 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 215, 0, 0.3);
}

.audio-play-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid #ffd700;
    color: #ffd700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(255, 215, 0, 0.3);
}

.audio-play-btn:hover {
    background: linear-gradient(135deg, #ffd700, #ffb700);
    color: #2a2a2a;
    transform: scale(1.1) translateY(-2px);
    box-shadow: 0 5px 16px rgba(255, 215, 0, 0.4);
}

.audio-play-btn svg {
    margin-left: 2px;
}

.audio-time {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    min-width: 42px;
    text-align: center;
}

.audio-progress {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.audio-progress-fill {
    height: 100%;
    background: white;
    border-radius: 3px;
    width: 0%;
    transition: width 0.1s linear;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

.audio-speed-btn {
    padding: 6px 12px;
    background: transparent;
    border: 2px solid #ffd700;
    border-radius: 20px;
    font-size: 1rem;
    font-weight: 700;
    color: #ffd700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    min-width: 48px;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.2);
}

.audio-speed-btn:hover {
    background: linear-gradient(135deg, #ffd700, #ffb700);
    color: #2a2a2a;
    transform: scale(1.05) translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

@media (max-width: 768px) {
    .article-audio-player {
        padding: 12px 16px;
        gap: 8px;
    }
    
    .audio-play-btn {
        width: 38px;
        height: 38px;
    }
    
    .audio-time {
        font-size: 0.75rem;
        min-width: 38px;
    }
    
    .audio-speed-btn {
        font-size: 0.75rem;
        padding: 5px 10px;
        min-width: 42px;
    }
}

/* Comments Section */
.comments-section {
    background: rgba(255, 255, 255, 0.08);
    padding: 3.5rem;
    margin-top: 4rem;
    border-radius: 15px;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.18);
    
    
}

.comments-title {
    font-size: 2em;
    color: var(--primary-color);
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 3px solid var(--accent-color);
}

.theory-prefix {
    background: var(--dark-bg);
    color: white;
    padding: 1.5rem;
    margin: 2rem 0;
    border-radius: 10px;
    border-left: 4px solid var(--accent-color);
    font-size: 1.1em;
    box-shadow: var(--box-shadow);
}

/* Comment Form */
#commentform {
    margin-top: 2rem;
}

#commentform label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--primary-color);
    font-weight: 600;
}

#commentform input[type="text"],
#commentform input[type="email"],
#commentform textarea {
    width: 100%;
    padding: 1.5rem;
    border: 2px solid #eee;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-family: var(--body-font);
    transition: border-color 0.3s ease;
}

#commentform input[type="text"]:focus,
#commentform input[type="email"]:focus,
#commentform textarea:focus {
    border-color: var(--accent-color);
    outline: none;
}

#commentform input[type="submit"] {
    background: transparent !important;
    color: #ffd700 !important;
    border: 2px solid #ffd700;
    padding: 1rem 2rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -webkit-appearance: none;
    appearance: none;
}

#commentform input[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
    background: linear-gradient(135deg, #ffd700, #ffb700) !important;
    color: #2a2a2a !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        padding: 0 1rem;
    }
    
    .site-title {
        font-size: 2.25rem;
    }
    
    .theory-container {
        margin: 2rem -1rem;
        padding: 2rem 1rem;
    }
    
    .theory-option {
        padding: 1.5rem;
    }
    
    .entry-title {
        font-size: 2.25rem;
    }
    
    .main-navigation ul {
        flex-direction: column;
        gap: 0;
    }
    
    .main-navigation li {
        width: 100%;
        text-align: center;
    }
}

.article-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 2.5rem;
}

.comments-section {
    background: var(--light-bg);
    padding: 2.5rem;
    margin-top: 2rem;
}

/* ==========================================
   ENHANCED ANIMATIONS & INTERACTIONS
   ========================================== */

/* Scroll Reveal Animations */
.reveal-element {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s var(--ease-out), transform 0.8s var(--ease-out);
    transition-delay: calc(var(--animation-order, 0) * 0.05s);
}

.reveal-element.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Card Hover Effects */
.post-card:not(.horizontal-card),
.headline-item {
    transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease;
}

.post-card:hover:not(.horizontal-card),
.headline-item:hover {
    box-shadow: 0 20px 48px rgba(26, 26, 26, 0.15);
}

[data-theme="dark"] .post-card:hover:not(.horizontal-card),
[data-theme="dark"] .headline-item:hover {
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 215, 0, 0.3);
}

/* Image Zoom Container */
.post-card-thumb,
.headline-thumb {
    overflow: hidden;
    border-radius: inherit;
}

/* Ripple Effect */
.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    transform: scale(0);
    animation: ripple-animation 0.6s ease-out;
    pointer-events: none;
}

@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Skeleton Loading */
.skeleton-loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

img.loaded {
    animation: fade-in 0.4s ease-in;
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Pull to Refresh */
.pull-to-refresh {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    background: var(--accent-color);
    color: white;
    padding: 12px 24px;
    border-radius: 0 0 12px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    z-index: 9999;
    opacity: 0;
    transition: transform 0.3s var(--ease-out), opacity 0.3s ease;
}

.pull-to-refresh .pull-icon {
    font-size: 20px;
    transition: transform 0.3s ease;
}

.pull-to-refresh.ready .pull-icon {
    transform: rotate(180deg);
}

.pull-to-refresh.refreshing .pull-icon {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ==========================================
   READING PROGRESS BAR
   ========================================== */

.reading-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(0, 0, 0, 0.05);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.reading-progress-bar.active {
    opacity: 1;
}

.reading-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-color), #6366f1);
    width: 0%;
    transition: width 0.1s ease;
}

/* ==========================================
   TOAST NOTIFICATIONS
   ========================================== */

.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.toast {
    background: rgba(255, 255, 255, 0.85);
    
    
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #1a1a1a;
    padding: 16px 20px;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(26, 26, 26, 0.2),
                0 0 0 1px rgba(255, 255, 255, 0.2) inset;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 300px;
    max-width: 400px;
    transform: translateX(calc(100% + 24px));
    opacity: 0;
    transition: transform 0.3s var(--ease-out), opacity 0.3s ease;
    pointer-events: auto;
}

.toast.show {
    transform: translateX(0);
    opacity: 1;
}

.toast-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
}

.toast-success .toast-icon {
    background: #10b981;
    color: white;
}

.toast-error .toast-icon {
    background: #ef4444;
    color: white;
}

.toast-warning .toast-icon {
    background: #f59e0b;
    color: white;
}

.toast-info .toast-icon {
    background: var(--accent-color);
    color: white;
}

.toast-message {
    flex: 1;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
}

/* Dark mode toast notifications */
[data-theme="dark"] .toast {
    background: rgba(26, 26, 26, 0.95);
    
    
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e2e8f0;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

[data-theme="dark"] .toast-message {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.toast-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--secondary-color);
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.toast-close:hover {
    color: var(--text-color);
}

@media (max-width: 640px) {
    .toast-container {
        bottom: 16px;
        right: 16px;
        left: 16px;
    }
    
    .toast {
        min-width: auto;
        max-width: none;
    }
}

/* ==========================================
   BOOKMARK BUTTON - DISABLED
   ========================================== */

/* Bookmark functionality has been disabled
.bookmark-btn {
    background: transparent !important;
    border: 1px solid var(--secondary-color);
    color: var(--secondary-color) !important;
    padding: 8px 16px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    margin-left: 12px;
    -webkit-appearance: none;
    appearance: none;
}

.bookmark-btn:hover {
    border-color: #ffd700;
    color: #ffd700 !important;
    background: rgba(255, 215, 0, 0.1) !important;
    transform: translateY(-1px);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.bookmark-btn.bookmarked {
    background: rgba(255, 215, 0, 0.2) !important;
    border-color: #ffd700;
    color: #ffd700 !important;
}

[data-theme="dark"] .bookmark-btn {
    border-color: #94a3b8;
    color: #94a3b8 !important;
}

[data-theme="dark"] .bookmark-btn:hover {
    border-color: #ffd700;
    color: #ffd700 !important;
    background: rgba(255, 215, 0, 0.15) !important;
}

[data-theme="dark"] .bookmark-btn.bookmarked {
    background: rgba(255, 215, 0, 0.25) !important;
    border-color: #ffd700;
    color: #ffd700 !important;
}

.bookmark-btn.bookmarked svg {
    fill: white;
}

.bookmark-btn svg {
    width: 16px;
    height: 16px;
    transition: fill 0.2s ease;
}

.bookmark-btn-small {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    
    
    z-index: 2;
}

.bookmark-btn-small svg {
    width: 18px;
    height: 18px;
}

.bookmark-btn-small .bookmark-text {
    display: none;
}
*/

/* ==========================================
   SHARE BUTTONS
   ========================================== */

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

.share-btn {
    background: var(--light-bg) !important;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: var(--text-color) !important;
    padding: 8px 14px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -webkit-appearance: none;
    appearance: none;
}

.share-btn:hover {
    background: rgba(255, 215, 0, 0.1) !important;
    border-color: #ffd700;
    color: #ffd700 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.2);
}

[data-theme="dark"] .share-btn {
    background: rgba(45, 45, 45, 0.8) !important;
    border-color: rgba(148, 163, 184, 0.3);
    color: #cbd5e1 !important;
}

[data-theme="dark"] .share-btn:hover {
    background: rgba(255, 215, 0, 0.15) !important;
    border-color: #ffd700;
    color: #ffd700 !important;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

.share-btn svg {
    width: 16px;
    height: 16px;
}

/* Floating Share Buttons */
.floating-share {
    position: fixed;
    left: 24px;
    top: 50%;
    transform: translateY(-50%) translateX(-100px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 100;
    transition: transform 0.3s var(--ease-out);
}

.floating-share.visible {
    transform: translateY(-50%) translateX(0);
}

.share-btn-floating {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: white !important;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -webkit-appearance: none;
    appearance: none;
}

.share-btn-floating:hover {
    background: rgba(255, 215, 0, 0.15);
    border-color: #ffd700;
    color: #ffd700;
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.3);
}

.share-btn-floating svg {
    stroke: currentColor;
}

@media (max-width: 900px) {
    .floating-share {
        display: none;
    }
}

/* ==========================================
   LIVE SEARCH SUGGESTIONS
   ========================================== */

.search-suggestions {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: white;
    border-radius: 12px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15);
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.search-suggestions.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.search-section {
    padding: 12px 0;
}

.search-section + .search-section {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.search-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--secondary-color);
    padding: 8px 16px;
}

.search-suggestion {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: var(--text-color);
    text-decoration: none;
    transition: background 0.15s ease;
    cursor: pointer;
}

.search-suggestion:hover,
.search-suggestion.selected {
    background: var(--light-bg);
}

.search-suggestion svg {
    flex-shrink: 0;
    color: var(--secondary-color);
}

.suggestion-content {
    flex: 1;
    min-width: 0;
}

.suggestion-title {
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.suggestion-title mark {
    background: rgba(255, 215, 0, 0.2);
    color: #ffd700;
    font-weight: 700;
}

.suggestion-type {
    font-size: 12px;
    color: var(--secondary-color);
    text-transform: capitalize;
    margin-top: 2px;
}

.search-no-results {
    padding: 24px 16px;
    text-align: center;
    color: var(--secondary-color);
}

.search-view-all {
    display: block;
    padding: 12px 16px;
    text-align: center;
    color: var(--accent-color);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    transition: background 0.15s ease;
}

.search-view-all:hover {
    background: var(--light-bg);
}

[data-theme="dark"] .search-view-all {
    color: #ffd700;
}

[data-theme="dark"] .search-view-all:hover {
    background: rgba(255, 215, 0, 0.1);
}

[data-theme="dark"] .suggestion-title mark {
    background: rgba(255, 215, 0, 0.25);
    color: #ffd700;
}

/* ==========================================
   ARTICLE REACTIONS
   ========================================== */

.reaction-bar {
    background: var(--light-bg);
    border-radius: 12px;
    padding: 20px 2rem;
    margin: 32px 0;
}

[data-theme="dark"] .reaction-bar {
    background: rgba(36, 36, 36, 0.7);
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.reaction-prompt {
    font-size: 14px;
    font-weight: 600;
    color: var(--secondary-color);
    margin-bottom: 16px;
    text-align: center;
}

.reactions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.reaction-btn {
    background: white;
    border: 2px solid rgba(0, 0, 0, 0.08);
    border-radius: 50px;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.reaction-btn:hover {
    border-color: #ffd700;
    background: rgba(255, 215, 0, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

[data-theme="dark"] .reaction-btn {
    background: rgba(45, 45, 45, 0.8);
    border-color: rgba(148, 163, 184, 0.3);
}

[data-theme="dark"] .reaction-btn:hover {
    background: rgba(255, 215, 0, 0.15);
    border-color: #ffd700;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

.reaction-btn.active {
    background: rgba(255, 215, 0, 0.2);
    border-color: #ffd700;
    color: #ffd700;
}

.reaction-btn.reacted {
    animation: reaction-pop 0.6s var(--ease-out);
}

@keyframes reaction-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.reaction-emoji {
    font-size: 20px;
    line-height: 1;
}

.reaction-count {
    font-size: 13px;
    font-weight: 700;
    min-width: 20px;
    text-align: center;
    display: none;
}

.reaction-btn.active .reaction-count {
    color: white;
}

@media (max-width: 640px) {
    .reaction-btn {
        padding: 8px 14px;
    }
    
    .reaction-emoji {
        font-size: 18px;
    }
    
    .reaction-count {
        font-size: 12px;
    }
}

/* ==========================================
   ENHANCED TYPOGRAPHY
   ========================================== */

.entry-content > p:first-of-type::first-letter {
    float: left;
    font-size: 4.5em;
    line-height: 0.85;
    margin: 0.1em 0.1em 0 0;
    font-weight: 700;
    color: var(--accent-color);
}

.entry-content blockquote {
    border-left: 4px solid var(--accent-color);
    padding-left: 24px;
    margin: 32px 0;
    font-size: 1.15em;
    font-style: italic;
    color: var(--secondary-color);
    position: relative;
}

.entry-content blockquote::before {
    content: '"';
    font-size: 4em;
    position: absolute;
    left: -12px;
    top: -20px;
    color: var(--accent-color);
    opacity: 0.2;
    font-family: Georgia, serif;
}

/* ==========================================
   DARK MODE ADJUSTMENTS
   ========================================== */

[data-theme="dark"] .toast {
    background: #242424;
    color: #e2e8f0;
}

[data-theme="dark"] .search-suggestions {
    background: #242424;
}

[data-theme="dark"] .reaction-bar {
    background: #1a1a1a;
}

[data-theme="dark"] .reaction-btn {
    background: #242424;
    border-color: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
}

[data-theme="dark"] .bookmark-btn {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #94a3b8 !important;
}

/* ==========================================
   MOBILE BOTTOM NAVIGATION BAR
   ========================================== */

.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 12px;
    left: 12px;
    right: 12px;
    background: rgba(26, 26, 26, 0.85);


    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 12px 8px max(12px, calc(8px + env(safe-area-inset-bottom)));
    z-index: 1000;
    border-radius: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
                0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    transition: transform 0.3s ease;
}

.mobile-bottom-nav--hidden {
    transform: translateY(calc(100% + 24px + env(safe-area-inset-bottom, 0px)));
}

.mobile-bottom-nav::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 215, 0, 0.3) 50%, transparent 100%);
    border-radius: 24px 24px 0 0;
}

@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    body {
        padding-bottom: 90px;
    }
}

.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 14px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.6);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    position: relative;
    min-width: 64px;
    border-radius: 16px;
}

.mobile-nav-item svg {
    width: 26px;
    height: 26px;
    stroke-width: 2;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.mobile-nav-item span {
    font-size: 0.7rem;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.mobile-nav-item:hover,
.mobile-nav-item.active {
    color: #ffd700;
    background: rgba(255, 215, 0, 0.15);
}

.mobile-nav-item:hover svg,
.mobile-nav-item.active svg {
    transform: translateY(-2px) scale(1.1);
}

.mobile-nav-item.active::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 3px;
    background: linear-gradient(90deg, #ffd700, #ffb700);
    border-radius: 3px 3px 0 0;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

.mobile-nav-item:active {
    transform: scale(0.92);
}

[data-theme="dark"] .mobile-bottom-nav {
    background: rgba(26, 26, 26, 0.9);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .mobile-nav-item {
    color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .mobile-nav-item:hover,
[data-theme="dark"] .mobile-nav-item.active {
    color: #ffd700;
    background: rgba(255, 215, 0, 0.2);
}

/* Mobile nav button styling (chat + theme inherit .mobile-nav-item) */
.mobile-nav-chat-btn,
.mobile-nav-theme-btn {
    background: none;
    border: none;
    box-shadow: none;
    outline: none;
    cursor: pointer;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}

.mobile-nav-chat-btn:hover,
.mobile-nav-chat-btn:focus,
.mobile-nav-chat-btn:focus-visible,
.mobile-nav-chat-btn:active,
.mobile-nav-theme-btn:hover,
.mobile-nav-theme-btn:focus,
.mobile-nav-theme-btn:focus-visible,
.mobile-nav-theme-btn:active {
    background: rgba(255, 215, 0, 0.15) !important;
    box-shadow: none !important;
    transform: none !important;
    outline: none !important;
}

.mobile-nav-chat-btn::before,
.mobile-nav-theme-btn::before {
    display: none !important;
}

/* Mobile theme button: sun shown in dark mode, moon in light mode */
.mobile-nav-sun-icon { display: none; }
.mobile-nav-moon-icon { display: block; }

[data-theme="dark"] .mobile-nav-sun-icon { display: block; }
[data-theme="dark"] .mobile-nav-moon-icon { display: none; }

/* With 7 items, reduce padding so they fit smaller screens */
@media (max-width: 768px) {
    .mobile-nav-item {
        flex: 1;
        min-width: 0;
        padding: 10px 6px;
    }
    .mobile-nav-item span {
        font-size: 0.62rem;
    }
}

@media (max-width: 380px) {
    .mobile-nav-item {
        padding: 8px 4px;
    }
    .mobile-nav-item svg {
        width: 20px;
        height: 20px;
    }
}

/* ==========================================
   MOBILE SEARCH MODAL
   ========================================== */

.mobile-search-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--card-bg);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.mobile-search-modal.active {
    transform: translateY(0);
}

.mobile-search-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--card-bg);
    position: sticky;
    top: 0;
    z-index: 10;
}

.mobile-search-input-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--section-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 10px 12px;
}

.mobile-search-input-wrapper .search-icon {
    color: var(--secondary-color);
    flex-shrink: 0;
}

#mobileSearchInput {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 1.125rem;
    color: var(--text-color);
    outline: none;
}

#mobileSearchInput::placeholder {
    color: var(--secondary-color);
}

.search-clear-btn {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.search-clear-btn:hover {
    color: var(--text-color);
}

.search-close-btn {
    background: none;
    border: none;
    color: var(--accent-color);
    font-size: 1.125rem;
    font-weight: 500;
    cursor: pointer;
    padding: 8px 12px;
    transition: opacity 0.2s ease;
}

.search-close-btn:hover {
    opacity: 0.8;
}

.mobile-search-results {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.search-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    color: var(--secondary-color);
}

.search-placeholder svg {
    margin-bottom: 1rem;
    opacity: 0.5;
}

.search-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 2rem;
}

.search-loading .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}

.search-error,
.search-no-results {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--secondary-color);
}

.search-results-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.search-results-header {
    font-size: 1.05rem;
    color: var(--secondary-color);
    margin-bottom: 8px;
    font-weight: 500;
}

.search-result-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--section-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}

.search-result-item:hover {
    background: var(--card-bg);
    border-color: var(--accent-color);
    transform: translateX(4px);
}

.search-result-thumb {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
}

.search-result-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-result-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.search-result-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-color);
    line-height: 1.3;
}

.search-result-excerpt {
    font-size: 1rem;
    color: var(--secondary-color);
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-result-date {
    font-size: 0.75rem;
    color: var(--secondary-color);
    margin-top: auto;
}

[data-theme="dark"] .mobile-search-modal {
    background: #1a1a1a;
}

[data-theme="dark"] .mobile-search-header {
    background: #1a1a1a;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .mobile-search-input-wrapper {
    background: rgba(36, 36, 36, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .search-result-item {
    background: rgba(36, 36, 36, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .search-result-item:hover {
    background: rgba(36, 36, 36, 0.8);
}

[data-theme="dark"] .share-btn {
    background: #242424 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #e2e8f0 !important;
}
/* ========================================
   2026 MOBILE & TABLET OPTIMIZATIONS
   ======================================== */

/* Mobile Phones (320px - 768px) */
@media (max-width: 768px) {
    /* Increase touch targets for better usability */
    .post-card,
    .headline-item,
    .headline-item-vertical,
    button,
    .menu-toggle,
    .trending-pill,
    a[role="button"] {
        min-height: 44px; /* Apple's recommended minimum */
        padding: 1.25rem;
    }
    
    /* Better touch feedback */
    .post-card:active {
        transform: scale(0.98);
        opacity: 0.95;
        transition: var(--transition-fast);
    }
    
    /* Ensure text remains readable on active state */
    .post-card:active .card-title,
    .post-card:active .post-card-excerpt {
        color: var(--primary-color);
    }
    
    [data-theme="dark"] .post-card:active .card-title,
    [data-theme="dark"] .post-card:active .post-card-excerpt {
        color: #ffffff;
    }
    
    /* Better button feedback */
    button:active,
    .read-more:active {
        transform: scale(0.96);
        transition: var(--transition-fast);
    }
    
    /* Navigation improvements */
    .main-navigation a {
        padding: 1rem !important;
        font-size: 1.125rem !important;
        display: flex;
        align-items: center;
        min-height: 48px;
    }
    
    /* Trending pills - larger for easier tapping */
    .trending-pill {
        font-size: 1rem;
        padding: 0.625rem 1rem;
        min-height: 40px;
    }
    
    /* Improve spacing for mobile */
    .container,
    .wrap {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Stack layouts vertically */
    .front-layout,
    .single-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    /* Full-width cards on mobile */
    .post-card {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .post-card-thumb {
        width: 100%;
        height: auto;
    }
    
    .post-card-thumb img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        border-radius: var(--radius-md);
    }
    
    /* Improve form inputs for mobile */
    input[type="text"],
    input[type="email"],
    input[type="search"],
    textarea,
    select {
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 14px 16px;
        border-radius: var(--radius-md);
    }
    
    /* Better modal/overlay handling */
    .mobile-search-modal,
    .menu-overlay {
        position: fixed;
        inset: 0;
        z-index: 9999;
        overscroll-behavior: contain;
    }
}

/* Tablets (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .container,
    .wrap {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    /* Hybrid layout for tablets */
    .front-layout,
    .single-layout {
        grid-template-columns: 1fr 280px;
        gap: 2rem;
    }
    
    /* Optimize card sizes for tablets */
    .post-card-thumb img {
        height: 180px;
    }
    
    /* Better use of tablet screen space */
    .theory-news-headlines {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 1rem;
    }
}

/* Large Tablets & Small Laptops (1024px - 1280px) */
@media (min-width: 1025px) and (max-width: 1280px) {
    .container {
        max-width: 1024px;
    }
    
    .front-layout,
    .single-layout {
        grid-template-columns: 1fr 300px;
    }
}

/* ==========================================
   MODERN CONTAINER QUERIES (2026)
   ========================================== */

/* Container query support for component-level responsiveness */
@supports (container-type: inline-size) {
    .post-card-container {
        container-type: inline-size;
        container-name: post-card;
    }
    
    /* Adjust card layout based on container width */
    @container post-card (max-width: 400px) {
        .post-card {
            flex-direction: column;
        }
        
        .post-card-thumb {
            width: 100%;
        }
    }
    
    @container post-card (min-width: 401px) {
        .post-card {
            flex-direction: row;
        }
        
        .post-card-thumb {
            flex: 0 0 200px;
        }
    }
}

/* ==========================================
   LANDSCAPE MODE OPTIMIZATIONS
   ========================================== */

@media (max-width: 968px) and (orientation: landscape) {
    /* Optimize for landscape phones */
    body {
        padding-bottom: 60px;
    }
    
    .mobile-bottom-nav {
        padding: 8px 8px max(8px, calc(8px + env(safe-area-inset-bottom)));
    }
    
    .mobile-nav-item {
        padding: 8px 12px;
        gap: 2px;
    }
    
    .mobile-nav-item span {
        font-size: 0.65rem;
    }
    
    .mobile-nav-item svg {
        width: 22px;
        height: 22px;
    }
}

/* ==========================================
   DEVICE-SPECIFIC OPTIMIZATIONS
   ========================================== */

/* iPhone SE / Small phones (320px - 375px) */
@media (max-width: 375px) {
    :root {
        --container-padding: 1rem;
    }
    
    .post-card {
        padding: 1rem;
    }
    
    .hero-title {
        font-size: clamp(1.5rem, 5vw, 2rem);
    }
    
    /* Compact trending bar */
    .trending-pill {
        font-size: 0.875rem;
        padding: 0.5rem 0.875rem;
    }
}

/* iPhone 12/13/14 Pro Max / Large phones (414px - 428px) */
@media (min-width: 414px) and (max-width: 428px) {
    /* Optimize for larger phone screens */
    .theory-news-headlines {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
}

/* iPad Mini / Small tablets (744px - 834px) */
@media (min-width: 744px) and (max-width: 834px) {
    .front-layout,
    .single-layout {
        grid-template-columns: 1fr 260px;
    }
    
    .theory-news-headlines {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* iPad Pro / Large tablets (1024px - 1366px) */
@media (min-width: 1024px) and (max-width: 1366px) {
    .container {
        max-width: 960px;
    }
    
    .theory-news-headlines {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==========================================
   SAFE AREA INSETS (for notched devices)
   ========================================== */

@supports (padding: max(0px)) {
    .mobile-bottom-nav {
        padding-bottom: max(12px, calc(12px + env(safe-area-inset-bottom)));
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }
}

/* ==========================================
   HIGH DPI / RETINA DISPLAYS
   ========================================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Sharper borders on retina displays */
    .post-card,
    .headline-item,
    .headline-item-vertical {
        border-width: 0.5px;
    }
}

/* ============================================
   2026 PERFORMANCE OPTIMIZATIONS & POLISH
   ============================================ */

/* Smooth scroll behavior with modern support */
html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    
    /* Modern 2026: Better scrollbar customization */
    scrollbar-gutter: stable;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    /* Disable parallax effects */
    * {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}

/* GPU acceleration for smooth animations */
.post-card,
.headline-item,
.headline-item-vertical,
.hero-cta,
.menu-toggle,
.theme-toggle {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Optimize images for modern displays */
img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Enhanced focus states for accessibility (WCAG AAA) */
*:focus-visible {
    outline: 3px solid var(--accent-color);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
    box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.2);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--accent-color);
    outline-offset: 2px;
}

/* Skip to main content link for screen readers */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--accent-color);
    color: #1a1a1a;
    padding: 12px 24px;
    text-decoration: none;
    font-weight: 700;
    z-index: 10000;
    border-radius: 0 0 var(--radius-md) 0;
}

.skip-to-content:focus {
    top: 0;
}

/* Improved text selection */
::selection {
    background-color: rgba(255, 215, 0, 0.35);
    color: var(--primary-color);
    text-shadow: none;
}

::-moz-selection {
    background-color: rgba(255, 215, 0, 0.35);
    color: var(--primary-color);
    text-shadow: none;
}

[data-theme="dark"] ::selection {
    background-color: rgba(255, 215, 0, 0.45);
    color: #ffffff;
}

[data-theme="dark"] ::-moz-selection {
    background-color: rgba(255, 215, 0, 0.45);
    color: #ffffff;
}

/* Modern custom scrollbar (2026 style) */
::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}

::-webkit-scrollbar-track {
    background: var(--light-bg);
    border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #ffd700, #ffb700);
    border-radius: var(--radius-sm);
    border: 3px solid var(--light-bg);
    transition: var(--transition);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, var(--accent-hover), #ffd700);
    border-width: 2px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #1a1a1a;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    border-color: #1a1a1a;
    background: linear-gradient(135deg, #ffd700, #ffb700);
}

/* Modern loading states with shimmer */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.loading {
    animation: shimmer 2s infinite linear;
    background: linear-gradient(
        90deg,
        var(--light-bg) 0%,
        var(--card-bg) 50%,
        var(--light-bg) 100%
    );
    background-size: 1000px 100%;
}

/* Enhanced dark mode glow effects */
[data-theme="dark"] .hero-cta,
[data-theme="dark"] .menu-toggle {
    box-shadow:
        0 4px 16px rgba(255, 215, 0, 0.3),
        0 0 32px rgba(255, 215, 0, 0.1),
        0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}

[data-theme="dark"] .hero-cta:hover,
[data-theme="dark"] .menu-toggle:hover {
    box-shadow:
        0 8px 28px rgba(255, 215, 0, 0.5),
        0 0 48px rgba(255, 215, 0, 0.2),
        0 0 0 2px rgba(255, 255, 255, 0.3) inset;
}

/* Subtle attention animation */
@keyframes subtle-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.88;
    }
}

/* Print styles for better document printing */
@media print {
    /* Hide navigation and interactive elements */
    .site-header,
    .site-footer,
    .trending-bar,
    .theory-sidebar,
    .menu-toggle,
    .theme-toggle,
    .hero-cta,
    .mobile-bottom-nav,
    .share-buttons,
    .floating-share,
    .mobile-search-modal {
        display: none !important;
    }

    /* Optimize for print */
    body {
        background: white !important;
        color: black !important;
        font-size: 12pt;
        line-height: 1.5;
    }

    .post-card,
    .headline-item {
        break-inside: avoid;
        page-break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #e0e0e0 !important;
    }
    
    /* Show article URLs after links */
    a[href]:after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        color: #666;
    }
    
    /* Remove link URLs for navigation */
    nav a[href]:after,
    .menu a[href]:after {
        content: "";
    }
    
    /* Ensure images fit */
    img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }
}

/* ==========================================
   EXPERIMENTAL 2026 FEATURES
   ========================================== */

/* Modern CSS nesting support (when available) */
@supports (selector(&)) {
    .post-card {
        & .card-title {
            transition: var(--transition);
        }

        &:hover .card-title {
            color: #d97706;
        }

        &:hover .card-title a {
            color: #d97706;
        }
    }

    [data-theme="dark"] .post-card:hover .card-title,
    [data-theme="dark"] .post-card:hover .card-title a {
        color: #f1f5f9;
    }
}

/* Modern color spaces (future-proof) */
@supports (color: oklch(0.5 0.5 180)) {
    :root {
        --accent-oklch: oklch(0.85 0.15 85);
    }
}

/* Subgrid support for advanced layouts */
@supports (grid-template-rows: subgrid) {
    .posts-grid {
        display: grid;
        grid-template-rows: subgrid;
    }
}

/* View transitions API for smooth page changes */
@supports (view-transition-name: main) {
    ::view-transition-old(main),
    ::view-transition-new(main) {
        animation-duration: 0.3s;
    }
}

/* ==========================================
   ACCESSIBILITY ENHANCEMENTS (WCAG AAA)
   ========================================== */

/* Ensure sufficient color contrast */
[data-theme="light"] {
    --text-color: #1e293b; /* 8.59:1 contrast ratio */
    --secondary-color: #475569; /* 7.54:1 contrast ratio */
}

[data-theme="dark"] {
    --text-color: #e2e8f0; /* 12.63:1 contrast ratio */
    --secondary-color: #cbd5e1; /* 14.22:1 contrast ratio */
}

/* Screen reader only content */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    * {
        border-width: 2px !important;
    }
    
    .post-card,
    .headline-item,
    button {
        border-color: currentColor !important;
    }
}

/* Forced colors mode (Windows High Contrast) */
@media (forced-colors: active) {
    .post-card,
    .headline-item,
    button {
        border: 2px solid ButtonText;
    }
    
    .theme-toggle {
        border: 2px solid ButtonText;
        forced-color-adjust: none;
    }
}

/* ==========================================
   PREMIUM FEATURES & ENHANCEMENTS (2026)
   ========================================== */

/* Scroll to top button */
.scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 72px;
    height: 72px;
    background: var(--accent-color);
    color: #0f172a;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.8);
    transition: all 0.4s var(--ease-spring);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    z-index: 9997;
}

.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.scroll-to-top:hover {
    background: #ffe45c;
    transform: translateY(-4px) scale(1.08);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
}

.scroll-to-top:active {
    transform: translateY(-2px) scale(1.04);
}

/* The icon IS the arrow — bold shaft + head, no surrounding chrome */
.scroll-to-top svg {
    width: 40px;
    height: 40px;
    stroke: #0f172a;
    stroke-width: 2.5;
    transition: transform 0.25s ease;
}

.scroll-to-top:hover svg {
    transform: translateY(-3px);
}

[data-theme="dark"] .scroll-to-top {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

/* Selection styling */
::selection {
    background: rgba(255, 215, 0, 0.3);
    color: var(--primary-color);
}

::-moz-selection {
    background: rgba(255, 215, 0, 0.3);
    color: var(--primary-color);
}

[data-theme="dark"] ::selection {
    background: rgba(255, 215, 0, 0.4);
    color: #ffffff;
}

/* Custom scrollbar (WebKit browsers) */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--light-bg);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--accent-color), #ffb700);
    border-radius: 10px;
    border: 2px solid var(--light-bg);
    transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #ffed4e, var(--accent-color));
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #2d2d2d;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    border-color: #2d2d2d;
}

/* Loading spinner */
.loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--light-bg);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 2rem auto;
}

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

/* Toast notifications */
.toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--card-bg);
    backdrop-filter: var(--glass-blur);
    padding: 16px 24px;
    border-radius: var(--radius-lg);
    box-shadow: var(--card-shadow);
    border: var(--glass-border);
    z-index: 10000;
    opacity: 0;
    transition: all 0.4s var(--ease-spring);
    min-width: 300px;
    text-align: center;
    font-weight: 600;
}

.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Badge/Pill component */
.badge,
.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: var(--font-size-sm);
    font-weight: 700;
    border-radius: var(--radius-full);
    background: rgba(255, 215, 0, 0.15);
    color: var(--accent-color);
    border: 1px solid rgba(255, 215, 0, 0.3);
    transition: all 0.3s ease;
}

.badge:hover,
.pill:hover {
    background: rgba(255, 215, 0, 0.25);
    transform: scale(1.05);
}

/* Tooltip */
.tooltip {
    position: absolute;
    background: var(--primary-color);
    color: #ffffff;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s var(--ease-out);
    z-index: 10001;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.tooltip::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: var(--primary-color);
}

.has-tooltip:hover .tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Modern focus ring */
*:focus-visible {
    outline: 3px solid rgba(255, 215, 0, 0.5);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Print styles */
@media print {
    .site-header,
    .theme-toggle,
    .scroll-to-top,
    .trending-bar,
    .site-footer,
    .theory-sidebar {
        display: none !important;
    }
    
    body {
        background: white;
        color: black;
    }
    
    .post-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    
    a {
        color: inherit;
        text-decoration: underline;
    }
    
    img {
        max-width: 100%;
        page-break-inside: avoid;
    }
}

/* ==========================================
   PERFORMANCE OPTIMIZATIONS
   ========================================== */

/* Lazy loading images */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.4s ease;
}

img[loading="lazy"].loaded {
    opacity: 1;
}

/* Intersection Observer animations */
.fade-in-observe {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s var(--ease-out),
                transform 0.8s var(--ease-out);
}

.fade-in-observe.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Content loading shimmer */
.shimmer {
    background: linear-gradient(
        90deg,
        var(--light-bg) 0%,
        rgba(226, 232, 240, 0.6) 50%,
        var(--light-bg) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}

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

/* END OF THEORY NEWS THEME v8.0 (2026 Edition) */
/* ============================================== */


/* ╔══════════════════════════════════════════════════════════════╗
   ║   PLAYER PROFILE LAYOUT  —  Mobile-First · v1.0             ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ─── Reset / Container ─────────────────────────────────────── */
.player-profile-main {
    min-height: 100vh;
    overflow-x: hidden;
}

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

/* ─── Section shared ─────────────────────────────────────────── */
.profile-section {
    padding: clamp(3.5rem, 8vw, 6rem) 0;
}

.stats-section   { background: var(--section-bg); }
.awards-section  { background: var(--light-bg); }
.gallery-section { background: var(--section-bg); }
.video-section   { background: var(--light-bg); }
.news-section    { background: var(--section-bg); }

/* ─── Section header ─────────────────────────────────────────── */
.profile-section-header {
    text-align: center;
    margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.section-eyebrow {
    display: inline-block;
    font-family: var(--header-font);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--accent-color);
    margin-bottom: 0.6rem;
}

.section-title {
    font-family: var(--header-font);
    font-size: var(--font-size-3xl);
    font-weight: 800;
    color: var(--primary-color);
    margin: 0;
    letter-spacing: -0.025em;
    line-height: 1.1;
}

/* ─── Reveal animation ───────────────────────────────────────── */
.reveal-item {
    opacity: 0;
    transform: translateY(48px);
    transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
}
.reveal-item.is-revealed {
    opacity: 1;
    transform: none;
}
.reveal-item:nth-child(1) { transition-delay: 0.05s; }
.reveal-item:nth-child(2) { transition-delay: 0.12s; }
.reveal-item:nth-child(3) { transition-delay: 0.19s; }
.reveal-item:nth-child(4) { transition-delay: 0.26s; }
.reveal-item:nth-child(5) { transition-delay: 0.33s; }
.reveal-item:nth-child(6) { transition-delay: 0.40s; }

@media (prefers-reduced-motion: reduce) {
    .reveal-item {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ════════════════════════════════════════════════════════════════
   CINEMATIC HERO
════════════════════════════════════════════════════════════════ */
.player-hero {
    position: relative;
    height: 100svh;
    min-height: 620px;
    max-height: 1200px;
    background-image: var(--hero-bg, none);
    background-color: #0f172a;
    background-size: cover;
    background-position: center 20%;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    isolation: isolate;
}

/* Multi-layer cinematic gradient */
.hero-overlay-gradient {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(0,0,0,0.10)  0%,
            rgba(0,0,0,0.05) 30%,
            rgba(0,0,0,0.50) 65%,
            rgba(0,0,0,0.88) 100%),
        linear-gradient(90deg,
            rgba(0,0,0,0.55) 0%,
            transparent 60%);
    z-index: 1;
}

/* Subtle noise texture overlay for depth */
.hero-overlay-noise {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
}

/* Team color accent bar at top */
.hero-team-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg,
        var(--team-color, #1a1a2e) 0%,
        var(--team-color-2, #ffd700) 50%,
        var(--team-color, #1a1a2e) 100%);
    z-index: 5;
}

/* Floating particles */
.hero-particles {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}
.hero-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--team-color-2, rgba(255,215,0,0.7));
    opacity: 0;
    animation: ppParticleRise var(--pp-dur, 9s) ease-in-out var(--pp-delay, 0s) infinite;
    left: var(--pp-left, 50%);
    bottom: 0;
    box-shadow: 0 0 6px 2px currentColor;
}

@keyframes ppParticleRise {
    0%   { transform: translateY(0) scale(1); opacity: 0; }
    8%   { opacity: 0.8; }
    90%  { opacity: 0.2; }
    100% { transform: translateY(-105vh) scale(0.3); opacity: 0; }
}

/* Decorative giant jersey number */
.hero-bg-number {
    position: absolute;
    right: -0.04em;
    bottom: -0.1em;
    font-family: var(--header-font);
    font-size: clamp(18rem, 38vw, 44rem);
    font-weight: 900;
    line-height: 1;
    color: rgba(255,255,255,0.03);
    pointer-events: none;
    user-select: none;
    z-index: 1;
    letter-spacing: -0.05em;
}

/* Content wrapper */
.hero-content-wrap {
    position: relative;
    z-index: 4;
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--container-padding) clamp(4.5rem, 10vw, 7rem);
}

/* Glass profile card */
.hero-glass-card {
    background: rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(28px) saturate(1.6);
    -webkit-backdrop-filter: blur(28px) saturate(1.6);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: var(--radius-2xl);
    padding: clamp(1.5rem, 4vw, 2.75rem);
    max-width: 580px;
    width: 100%;
    box-shadow:
        0 32px 80px rgba(0,0,0,0.45),
        0 0 0 1px rgba(255,255,255,0.06) inset,
        0 1px 0 rgba(255,255,255,0.12) inset;
}

/* Position badge row */
.hero-position-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.hero-number-badge {
    background: var(--team-color-2, var(--accent-color));
    color: #0f172a;
    font-family: var(--header-font);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 0.3em 0.8em;
    border-radius: var(--radius-full);
    line-height: 1;
}

.hero-pos-text,
.hero-team-text {
    font-family: var(--header-font);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
}

.hero-divider-dot {
    color: rgba(255,255,255,0.35);
    font-size: 1.1rem;
    line-height: 1;
}

/* Player name */
.hero-player-name {
    display: flex;
    flex-direction: column;
    margin: 0 0 0.65rem;
    line-height: 0.95;
    gap: 0.05em;
}

.hero-name-first {
    font-family: var(--header-font);
    font-size: clamp(2.25rem, 6vw, 3.75rem);
    font-weight: 400;
    color: rgba(255,255,255,0.85);
    letter-spacing: -0.01em;
}

.hero-name-last {
    font-family: var(--header-font);
    font-size: clamp(3rem, 8.5vw, 5.5rem);
    font-weight: 900;
    color: #ffffff;
    letter-spacing: -0.04em;
    text-shadow: 0 4px 24px rgba(0,0,0,0.4);
    line-height: 1;
}

/* Bio */
.hero-player-bio {
    font-size: var(--font-size-sm);
    color: rgba(255,255,255,0.65);
    margin: 0 0 1.5rem;
    line-height: 1.65;
    max-width: 36ch;
}

/* Quick stats row inside card */
.hero-quick-stats {
    display: flex;
    align-items: stretch;
    margin-bottom: 1.75rem;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: rgba(255,255,255,0.05);
}

.hero-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.875rem 0.5rem;
    gap: 0.25rem;
}

.hero-stat-sep {
    width: 1px;
    background: rgba(255,255,255,0.12);
    margin: 0.5rem 0;
    flex-shrink: 0;
}

.hero-stat-value {
    font-family: var(--header-font);
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 800;
    color: var(--team-color-2, var(--accent-color));
    line-height: 1;
}

.hero-stat-label {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    text-align: center;
    line-height: 1.3;
}

/* CTA buttons */
.hero-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.btn-hero-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--team-color-2, var(--accent-color));
    color: #0f172a;
    font-family: var(--header-font);
    font-size: var(--font-size-sm);
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 0.8em 1.8em;
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: transform 0.2s var(--ease-out), box-shadow 0.2s ease, background 0.2s ease;
    box-shadow: 0 4px 18px rgba(255,215,0,0.3);
}
.btn-hero-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(255,215,0,0.45);
    background: #fff;
    color: #0f172a;
}

.btn-hero-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: rgba(255,255,255,0.85);
    font-family: var(--header-font);
    font-size: var(--font-size-sm);
    font-weight: 600;
    padding: 0.8em 1.8em;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255,255,255,0.28);
    text-decoration: none;
    backdrop-filter: blur(8px);
    transition: var(--transition-fast);
}
.btn-hero-ghost:hover {
    background: rgba(255,255,255,0.14);
    transform: translateY(-2px);
    border-color: rgba(255,255,255,0.5);
    color: #fff;
}

/* Scroll cue */
.hero-scroll-cue {
    position: absolute;
    bottom: 1.75rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    pointer-events: none;
}

.scroll-cue-text {
    font-size: 0.6rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
}

.scroll-cue-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.4), transparent);
    animation: scrollCuePulse 2s ease-in-out infinite;
}

@keyframes scrollCuePulse {
    0%, 100% { transform: scaleY(1); opacity: 0.6; }
    50%       { transform: scaleY(0.6); opacity: 1; }
}

/* ════════════════════════════════════════════════════════════════
   CAREER STATS
════════════════════════════════════════════════════════════════ */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

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

.stat-card {
    position: relative;
    background: var(--card-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: var(--radius-2xl);
    box-shadow: var(--card-shadow);
    padding: clamp(1.5rem, 4vw, 2.25rem) clamp(1rem, 3vw, 1.75rem);
    text-align: center;
    overflow: hidden;
    transition: transform 0.35s var(--ease-out), box-shadow 0.35s ease;
    cursor: default;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
    border-radius: 0 0 var(--radius-full) var(--radius-full);
}

.stat-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--hover-shadow);
}

.stat-card-glow {
    position: absolute;
    top: -60%;
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(255,215,0,0.12), transparent 70%);
    pointer-events: none;
    transition: opacity 0.4s ease;
    opacity: 0;
}
.stat-card:hover .stat-card-glow { opacity: 1; }

.stat-card-icon {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    display: block;
    margin-bottom: 0.65rem;
    transition: transform 0.4s var(--ease-spring);
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
}
.stat-card:hover .stat-card-icon {
    transform: scale(1.2) rotate(-5deg);
}

.stat-card-value {
    display: block;
    font-family: var(--header-font);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 900;
    color: var(--primary-color);
    line-height: 1;
    margin-bottom: 0.4rem;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

.stat-card-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--secondary-color);
    margin-bottom: 1rem;
}

.stat-progress {
    height: 4px;
    background: var(--border-color);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.stat-progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--accent-color), var(--color-sky));
    border-radius: var(--radius-full);
    transition: width 1.6s var(--ease-out);
}

/* ════════════════════════════════════════════════════════════════
   TROPHY CASE
════════════════════════════════════════════════════════════════ */
.awards-shelf {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    justify-content: center;
}

.award-card {
    position: relative;
    background: var(--card-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: var(--radius-2xl);
    box-shadow: var(--card-shadow);
    width: clamp(130px, 22vw, 190px);
    padding: clamp(1.5rem, 3vw, 2rem) clamp(1rem, 2vw, 1.5rem);
    text-align: center;
    overflow: hidden;
    cursor: default;
    transition: transform 0.35s var(--ease-spring), box-shadow 0.35s ease;
}

.award-card:hover {
    transform: translateY(-10px) scale(1.04);
    box-shadow: var(--hover-shadow);
}

.award-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0.22) 50%,
        transparent 100%);
    transform: skewX(-18deg);
    animation: awardShine 5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes awardShine {
    0%   { left: -100%; opacity: 0; }
    45%  { opacity: 1; }
    55%  { left: 160%; opacity: 0; }
    100% { left: 160%; opacity: 0; }
}

.award-icon {
    font-size: clamp(2.25rem, 5vw, 3rem);
    display: block;
    margin-bottom: 0.75rem;
    filter: drop-shadow(0 4px 14px rgba(255,215,0,0.5));
    transition: transform 0.4s var(--ease-spring), filter 0.4s ease;
}
.award-card:hover .award-icon {
    transform: scale(1.2) rotate(-8deg);
    filter: drop-shadow(0 8px 22px rgba(255,215,0,0.75));
}

.award-name {
    font-family: var(--header-font);
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.3;
}

.award-glow {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 80px;
    background: radial-gradient(circle, rgba(255,215,0,0.2), transparent 70%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.award-card:hover .award-glow { opacity: 1; }

/* ════════════════════════════════════════════════════════════════
   PHOTO GALLERY
════════════════════════════════════════════════════════════════ */
.gallery-mosaic {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: clamp(140px, 25vw, 240px);
    gap: var(--space-sm);
}

@media (min-width: 640px) {
    .gallery-mosaic {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: clamp(160px, 22vw, 260px);
    }
    /* Feature first & fourth items */
    .gallery-cell-1 { grid-column: span 2; grid-row: span 2; }
    .gallery-cell-4 { grid-column: span 2; }
}

@media (min-width: 1024px) {
    .gallery-mosaic {
        grid-auto-rows: clamp(180px, 18vw, 280px);
    }
}

.gallery-cell {
    border-radius: var(--radius-xl);
    overflow: hidden;
    height: 100%;
}

.gallery-img-btn {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: zoom-in;
    overflow: hidden;
    border-radius: inherit;
}

.gallery-img-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.65s var(--ease-out);
}
.gallery-img-btn:hover img,
.gallery-img-btn:focus-visible img {
    transform: scale(1.08);
}

.gallery-cell-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}
.gallery-img-btn:hover .gallery-cell-overlay,
.gallery-img-btn:focus-visible .gallery-cell-overlay {
    background: rgba(0,0,0,0.38);
}

.gallery-cell-overlay svg {
    color: #fff;
    opacity: 0;
    transform: scale(0.75);
    transition: opacity 0.3s ease, transform 0.3s var(--ease-spring);
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(8px);
    border-radius: var(--radius-full);
    padding: 0.65rem;
    border: 1px solid rgba(255,255,255,0.25);
}
.gallery-img-btn:hover .gallery-cell-overlay svg,
.gallery-img-btn:focus-visible .gallery-cell-overlay svg {
    opacity: 1;
    transform: scale(1);
}

/* ─── Lightbox ───────────────────────────────────────────────── */
.pp-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pp-lightbox[hidden] { display: none; }

.pp-lb-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.93);
    backdrop-filter: blur(14px);
    cursor: pointer;
}

.pp-lb-stage {
    position: relative;
    z-index: 1;
    max-width: min(92vw, 1100px);
    max-height: 88vh;
    animation: lbReveal 0.3s var(--ease-out);
}

@keyframes lbReveal {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}

.pp-lb-img {
    display: block;
    max-width: min(92vw, 1100px);
    max-height: 88vh;
    object-fit: contain;
    border-radius: var(--radius-xl);
    box-shadow: 0 30px 90px rgba(0,0,0,0.8);
}

.pp-lb-btn {
    position: absolute;
    z-index: 2;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--radius-full);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s var(--ease-spring);
    line-height: 1;
}
.pp-lb-btn:hover { background: rgba(255,255,255,0.22); transform: scale(1.12); }
.pp-lb-btn:active { transform: scale(0.96); }

.pp-lb-close {
    top: 1.25rem;
    right: 1.25rem;
    width: 48px;
    height: 48px;
}
.pp-lb-prev {
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    font-size: 2rem;
}
.pp-lb-next {
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    font-size: 2rem;
}
.pp-lb-prev:hover { transform: translateY(-50%) scale(1.12); }
.pp-lb-next:hover { transform: translateY(-50%) scale(1.12); }

/* ════════════════════════════════════════════════════════════════
   VIDEO SECTION
════════════════════════════════════════════════════════════════ */
.video-card {
    max-width: 920px;
    margin: 0 auto;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(0,0,0,0.22);
    border: var(--glass-border);
}

.video-embed-frame {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    background: #000;
}
.video-embed-frame iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: 0;
}

/* ════════════════════════════════════════════════════════════════
   LATEST NEWS
════════════════════════════════════════════════════════════════ */
.profile-news-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

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

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

.pnews-card {
    background: var(--card-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: var(--radius-2xl);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    transition: transform 0.35s var(--ease-out), box-shadow 0.35s ease;
    display: flex;
    flex-direction: column;
}

.pnews-card:hover {
    transform: translateY(-7px);
    box-shadow: var(--hover-shadow);
}

.pnews-thumb {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--light-bg);
    text-decoration: none;
}
.pnews-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.55s var(--ease-out);
}
.pnews-card:hover .pnews-thumb img { transform: scale(1.07); }

.pnews-thumb-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 55%, rgba(0,0,0,0.3) 100%);
}

.pnews-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--light-bg), var(--border-color));
    border-radius: 0;
}
.pnews-thumb-placeholder span {
    font-family: var(--header-font);
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--secondary-color);
    opacity: 0.4;
}

.pnews-body {
    padding: clamp(1rem, 3vw, 1.5rem);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.pnews-meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.pnews-date {
    font-size: 0.7rem;
    color: var(--secondary-color);
    font-weight: 500;
}

.pnews-read-time {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-color);
    background: rgba(255, 215, 0, 0.1);
    padding: 0.2em 0.65em;
    border-radius: var(--radius-full);
}

.pnews-title {
    font-family: var(--header-font);
    font-size: var(--font-size-base);
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 0.5rem;
}
.pnews-title a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s ease;
}
.pnews-title a:hover { color: var(--accent-color); }

.pnews-excerpt {
    font-size: var(--font-size-sm);
    color: var(--secondary-color);
    line-height: 1.65;
    margin: 0 0 1rem;
    flex: 1;
}

.pnews-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--header-font);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-color);
    text-decoration: none;
    letter-spacing: 0.04em;
    transition: gap 0.25s ease, color 0.2s ease;
    margin-top: auto;
}
.pnews-link svg {
    transition: transform 0.25s var(--ease-out);
    flex-shrink: 0;
}
.pnews-link:hover { gap: 0.55rem; }
.pnews-link:hover svg { transform: translateX(3px); }

/* ─── Dark mode overrides for profile layout ─────────────────── */
[data-theme="dark"] .hero-glass-card {
    background: rgba(0,0,0,0.55);
    border-color: rgba(255,255,255,0.1);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .hero-glass-card {
        background: rgba(0,0,0,0.55);
        border-color: rgba(255,255,255,0.1);
    }
}

[data-theme="dark"] .hero-overlay-gradient {
    background:
        linear-gradient(180deg,
            rgba(0,0,0,0.15)  0%,
            rgba(0,0,0,0.08) 30%,
            rgba(0,0,0,0.65) 65%,
            rgba(0,0,0,0.93) 100%),
        linear-gradient(90deg, rgba(0,0,0,0.65) 0%, transparent 60%);
}

/* ─── Mobile tweaks ──────────────────────────────────────────── */
@media (max-width: 480px) {
    .hero-glass-card {
        background: rgba(0,0,0,0.52);
    }

    .hero-player-name {
        gap: 0;
    }

    .hero-actions {
        flex-direction: column;
    }

    .btn-hero-primary,
    .btn-hero-ghost {
        text-align: center;
        justify-content: center;
    }

    .awards-shelf {
        gap: var(--space-sm);
    }

    .award-card {
        width: calc(50% - var(--space-sm) / 2);
    }

    .gallery-mosaic {
        grid-auto-rows: clamp(120px, 38vw, 200px);
    }
}

/* ─── Print / reduced-motion ─────────────────────────────────── */
@media print {
    .player-hero { height: auto; padding: 2rem 0; }
    .hero-overlay-gradient, .hero-particles, .hero-bg-number { display: none; }
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  PLAYER PROFILE HEADER  — transparent → glass on scroll     ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* Override the existing site-header when on the profile */
.pp-site-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    transition: background 0.4s var(--ease-out), box-shadow 0.4s ease, backdrop-filter 0.4s ease !important;
    will-change: background;
}

.pp-site-header.pp-header--scrolled {
    background: rgba(10, 10, 15, 0.82) !important;
    backdrop-filter: blur(22px) saturate(1.5) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.5) !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    box-shadow: 0 4px 30px rgba(0,0,0,0.35) !important;
}

[data-theme="light"] .pp-site-header.pp-header--scrolled {
    background: rgba(255, 255, 255, 0.9) !important;
    border-bottom-color: rgba(0,0,0,0.06) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08) !important;
}

/* Accent line */
.pp-header-accent {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--team-color, #1a1a2e) 0%,
        var(--team-color-2, #ffd700) 50%,
        var(--team-color, #1a1a2e) 100%);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.pp-site-header.pp-header--scrolled .pp-header-accent {
    opacity: 1;
}

/* Inner layout */
.pp-header-inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    height: 68px;
    overflow: hidden;
    padding: 0 var(--container-padding);
    max-width: var(--container-width);
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* ─── Logo ───────────────────────────────────────────────────── */
.pp-header-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    flex-shrink: 0;
}

.pp-logo-num {
    font-family: var(--header-font);
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--team-color-2, var(--accent-color));
    line-height: 1;
    letter-spacing: -0.04em;
    text-shadow: 0 2px 12px rgba(255,215,0,0.3);
}

.pp-logo-wordmark {
    font-family: var(--header-font);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: rgba(255,255,255,0.9);
    line-height: 1;
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
}

[data-theme="light"] .pp-logo-wordmark { color: var(--primary-color); }

.pp-logo-img {
    height: 36px;
    width: auto;
    object-fit: contain;
}

/* Custom logo uploaded via Customizer → Site Identity */
.pp-header-logo--custom {
    max-height: 48px;
}
.pp-header-logo--custom .custom-logo-link {
    display: flex;
    align-items: center;
    height: 100%;
}
.pp-header-logo--custom .custom-logo {
    max-width: 160px !important;
    max-height: 48px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
}

/* Light/dark logo swap */
.logo-dark  { display: none; }
.logo-light { display: block; }
[data-theme="light"] .logo-dark  { display: block; }
[data-theme="light"] .logo-light { display: none; }

/* ─── Desktop Nav ────────────────────────────────────────────── */
.pp-header-nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

.pp-nav-menu {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pp-nav-menu li a {
    display: inline-block;
    font-family: var(--header-font);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    padding: 0.5em 0.85em;
    border-radius: var(--radius-full);
    transition: background 0.2s ease, color 0.2s ease;
}
.pp-nav-menu li a:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

[data-theme="light"] .pp-nav-menu li a {
    color: var(--text-color);
}
[data-theme="light"] .pp-nav-menu li a:hover {
    background: rgba(0,0,0,0.06);
    color: var(--primary-color);
}

/* Active nav item */
.pp-nav-menu li.current-menu-item a,
.pp-nav-menu li.current_page_item a {
    background: rgba(255,215,0,0.15);
    color: var(--accent-color);
}

/* ─── Header Action Buttons ──────────────────────────────────── */
.pp-header-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.pp-hdr-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--radius-full);
    color: rgba(255,255,255,0.85);
    padding: 0.45em 0.9em;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    backdrop-filter: blur(8px);
    white-space: nowrap;
}
.pp-hdr-btn:hover {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.3);
    color: #fff;
}

[data-theme="light"] .pp-hdr-btn {
    background: rgba(0,0,0,0.05);
    border-color: rgba(0,0,0,0.1);
    color: var(--text-color);
}
[data-theme="light"] .pp-hdr-btn:hover {
    background: rgba(0,0,0,0.1);
}

.pp-hdr-btn-label {
    font-family: var(--header-font);
}

/* Sun/moon icon swap */
.nav-sun-icon { display: block; }
.nav-moon-icon { display: none; }
[data-theme="dark"] .nav-sun-icon { display: none; }
[data-theme="dark"] .nav-moon-icon { display: block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .nav-sun-icon { display: none; }
    :root:not([data-theme="light"]) .nav-moon-icon { display: block; }
}

/* ─── Hamburger ──────────────────────────────────────────────── */
.pp-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--radius-md);
    padding: 0 10px;
    cursor: pointer;
    transition: background 0.2s ease;
}
.pp-hamburger:hover { background: rgba(255,255,255,0.18); }

.pp-ham-bar {
    display: block;
    width: 100%;
    height: 2px;
    background: rgba(255,255,255,0.9);
    border-radius: 2px;
    transition: transform 0.3s var(--ease-out), opacity 0.3s ease;
    transform-origin: center;
}

[data-theme="light"] .pp-ham-bar { background: var(--text-color); }

/* X animation */
.pp-hamburger.is-open .pp-ham-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.pp-hamburger.is-open .pp-ham-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.pp-hamburger.is-open .pp-ham-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─── Mobile Drawer ──────────────────────────────────────────── */
.pp-mobile-drawer {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(8, 8, 14, 0.96);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    transform: translateY(-110%);
    opacity: 0;
    transition: transform 0.4s var(--ease-out), opacity 0.35s ease;
    pointer-events: none;
    z-index: 800;
}
[data-theme="light"] .pp-mobile-drawer {
    background: rgba(255,255,255,0.97);
    border-bottom-color: rgba(0,0,0,0.08);
}

.pp-mobile-drawer.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
}

body.pp-drawer-open { overflow: hidden; }

.pp-mobile-nav {
    list-style: none;
    margin: 0;
    padding: 1rem var(--container-padding) 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.pp-mobile-nav li a {
    display: block;
    font-family: var(--header-font);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    padding: 0.75em 1em;
    border-radius: var(--radius-md);
    transition: background 0.2s ease, color 0.2s ease;
}
.pp-mobile-nav li a:hover {
    background: rgba(255,215,0,0.1);
    color: var(--accent-color);
}
[data-theme="light"] .pp-mobile-nav li a { color: var(--text-color); }
[data-theme="light"] .pp-mobile-nav li a:hover {
    background: rgba(0,0,0,0.05);
    color: var(--primary-color);
}

/* Show hamburger, hide desktop nav on mobile */
@media (max-width: 900px) {
    .pp-header-nav { display: none; }
    .pp-hamburger  { display: flex; }
    .pp-hdr-btn-label { display: none; }
}

/* Ensure #content doesn't sit behind fixed header */
.site-content {
    padding-top: 68px;
}
/* Front page hero bleeds under the header — reset the padding */
.player-profile-main + .site-content,
.player-profile-main ~ .site-content,
body:has(.player-profile-main) .site-content {
    padding-top: 0;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  PLAYER PROFILE FOOTER                                       ║
   ╚══════════════════════════════════════════════════════════════╝ */
.pp-footer {
    background: #0a0a0f;
    color: rgba(255,255,255,0.75);
    position: relative;
}

[data-theme="light"] .pp-footer {
    background: #0f172a;
}

.pp-footer-divider {
    height: 5px;
    background: linear-gradient(90deg,
        var(--team-color, #1a1a2e) 0%,
        var(--team-color-2, #ffd700) 50%,
        var(--team-color, #1a1a2e) 100%);
}

/* Profile block */
.pp-footer-profile {
    padding: clamp(3rem, 7vw, 5rem) 0 clamp(2rem, 5vw, 3rem);
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.pp-footer-profile-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    text-align: center;
}

.pp-footer-identity {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.pp-footer-num {
    font-family: var(--header-font);
    font-size: clamp(3.5rem, 10vw, 6rem);
    font-weight: 900;
    line-height: 1;
    color: rgba(255,255,255,0.06);
    letter-spacing: -0.05em;
    pointer-events: none;
    user-select: none;
}

.pp-footer-nameblock {
    text-align: left;
}

.pp-footer-player-name {
    font-family: var(--header-font);
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 800;
    color: #fff;
    margin: 0 0 0.2rem;
    letter-spacing: -0.02em;
}

.pp-footer-player-meta {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--team-color-2, var(--accent-color));
    margin: 0;
}

.pp-footer-tagline {
    font-size: var(--font-size-sm);
    color: rgba(255,255,255,0.5);
    max-width: 44ch;
    text-align: center;
    margin: 0;
    line-height: 1.65;
}

/* Social icons */
.pp-footer-social {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.pp-footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.65);
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s var(--ease-spring), border-color 0.25s ease;
    text-decoration: none;
}
.pp-footer-social a svg { width: 18px; height: 18px; }
.pp-footer-social a:hover {
    background: var(--team-color-2, var(--accent-color));
    color: #0f172a;
    border-color: transparent;
    transform: translateY(-4px);
}

/* Footer nav */
.pp-footer-nav-row {
    padding: clamp(1.5rem, 3vw, 2rem) 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.pp-footer-nav-inner {
    display: flex;
    justify-content: center;
}

.pp-footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: center;
}
.pp-footer-nav li a {
    font-family: var(--header-font);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    text-decoration: none;
    padding: 0.3em 0.5em;
    border-radius: var(--radius-sm);
    transition: color 0.2s ease, background 0.2s ease;
}
.pp-footer-nav li a:hover {
    color: var(--team-color-2, var(--accent-color));
    background: rgba(255,255,255,0.05);
}

/* Copyright bar */
.pp-footer-meta {
    padding: clamp(1rem, 2.5vw, 1.5rem) 0;
}
.pp-footer-meta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.pp-footer-copy,
.pp-footer-credit {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.3);
    margin: 0;
}

/* Back to Top — frosted glass, big bold up-arrow, identical on every breakpoint */
.pp-back-top {
    position: fixed;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 5.5rem);
    right: 1.5rem;
    z-index: 800;
    width: 72px;
    height: 72px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04));
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.22);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 8px 28px rgba(0,0,0,0.28),
        inset 0 1px 0 rgba(255,255,255,0.28),
        inset 0 -1px 0 rgba(0,0,0,0.12);
    opacity: 0;
    transform: translateY(10px) scale(0.92);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    pointer-events: none;
}
.pp-back-top svg {
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0;
    stroke: #0f172a;
    filter: drop-shadow(0 1px 1px rgba(255,255,255,0.4));
    transition: transform 0.25s ease;
}
.pp-back-top.pp-back-top--visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}
.pp-back-top:hover {
    background: linear-gradient(135deg, rgba(255,255,255,0.28), rgba(255,255,255,0.1));
    border-color: rgba(255,255,255,0.4);
    transform: translateY(-4px) scale(1.06);
    box-shadow:
        0 14px 36px rgba(0,0,0,0.32),
        inset 0 1px 0 rgba(255,255,255,0.4),
        inset 0 -1px 0 rgba(0,0,0,0.12);
}
.pp-back-top:hover svg {
    transform: translateY(-3px);
}
.pp-back-top:active {
    transform: translateY(-1px) scale(0.96);
}

@media (min-width: 768px) {
    .pp-back-top { bottom: 2rem; }
}

/* Light mode — lighter frosted tint, same dark icon for contrast */
[data-theme="light"] .pp-back-top {
    background: linear-gradient(135deg, rgba(255,255,255,0.6), rgba(255,255,255,0.28));
    border-color: rgba(15,23,42,0.12);
    box-shadow:
        0 8px 28px rgba(15,23,42,0.14),
        inset 0 1px 0 rgba(255,255,255,0.65),
        inset 0 -1px 0 rgba(15,23,42,0.05);
}
[data-theme="light"] .pp-back-top:hover {
    background: linear-gradient(135deg, rgba(255,255,255,0.75), rgba(255,255,255,0.4));
    border-color: rgba(15,23,42,0.2);
    box-shadow:
        0 14px 36px rgba(15,23,42,0.18),
        inset 0 1px 0 rgba(255,255,255,0.75),
        inset 0 -1px 0 rgba(15,23,42,0.05);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .pp-back-top {
        background: linear-gradient(135deg, rgba(255,255,255,0.6), rgba(255,255,255,0.28));
        border-color: rgba(15,23,42,0.12);
        box-shadow:
            0 8px 28px rgba(15,23,42,0.14),
            inset 0 1px 0 rgba(255,255,255,0.65),
            inset 0 -1px 0 rgba(15,23,42,0.05);
    }
    :root:not([data-theme="dark"]) .pp-back-top:hover {
        background: linear-gradient(135deg, rgba(255,255,255,0.75), rgba(255,255,255,0.4));
        border-color: rgba(15,23,42,0.2);
    }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  BIO SECTION                                                  ║
   ╚══════════════════════════════════════════════════════════════╝ */
.bio-section {
    background: var(--light-bg);
    overflow: hidden;
}

.bio-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

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

@media (min-width: 1100px) {
    .bio-grid {
        grid-template-columns: 440px 1fr;
    }
}

/* Portrait */
.bio-portrait-col { display: flex; justify-content: center; }

.bio-portrait-wrap {
    position: relative;
    width: min(340px, 85vw);
    flex-shrink: 0;
}

.bio-portrait-img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: top center;
    border-radius: var(--radius-2xl);
    display: block;
    box-shadow: 0 30px 70px rgba(0,0,0,0.25);
}

.bio-portrait-placeholder {
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-2xl);
    background: linear-gradient(135deg,
        var(--team-color, #1a1a2e) 0%,
        var(--team-color-2, #ffd700) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.bio-portrait-placeholder span {
    font-family: var(--header-font);
    font-size: clamp(5rem, 15vw, 9rem);
    font-weight: 900;
    color: rgba(255,255,255,0.15);
}

.bio-portrait-badge {
    position: absolute;
    bottom: -1rem;
    right: -0.75rem;
    background: var(--team-color-2, var(--accent-color));
    color: #0f172a;
    border-radius: var(--radius-xl);
    padding: 0.6rem 1rem;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.bio-badge-pos {
    display: block;
    font-family: var(--header-font);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 0.2em;
}
.bio-badge-num {
    display: block;
    font-family: var(--header-font);
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
}

/* Bio text */
.bio-body {
    color: var(--text-color);
    font-size: var(--font-size-base);
    line-height: 1.8;
    margin-bottom: 1.5rem;
}
.bio-body p { margin: 0 0 1em; }

.bio-quote {
    background: linear-gradient(135deg,
        rgba(255,215,0,0.08),
        rgba(255,215,0,0.04));
    border-left: 4px solid var(--team-color-2, var(--accent-color));
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    padding: 1.25rem 1.5rem;
    margin: 0 0 1.5rem;
}
.bio-quote p {
    font-family: var(--header-font);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--primary-color);
    font-style: italic;
    line-height: 1.5;
    margin: 0 0 0.5rem;
}
.bio-quote cite {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--secondary-color);
    font-style: normal;
    text-transform: uppercase;
}

.bio-highlights {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.bio-highlights li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: var(--font-size-sm);
    color: var(--text-color);
    line-height: 1.55;
}
.bio-highlights li::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--team-color-2, var(--accent-color));
    margin-top: 0.4em;
    flex-shrink: 0;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  VIDEO GALLERY                                                ║
   ╚══════════════════════════════════════════════════════════════╝ */
.video-gallery-section { background: var(--light-bg); }

.video-gallery-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

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

/* Single video gets full width */
.video-gallery-grid.video-count-1 {
    grid-template-columns: 1fr;
    max-width: 860px;
    margin: 0 auto;
}

.vg-card {
    background: var(--card-bg);
    border: var(--glass-border);
    border-radius: var(--radius-2xl);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    transition: transform 0.35s var(--ease-out), box-shadow 0.35s ease;
}
.vg-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--hover-shadow);
}

.vg-embed-wrap {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    background: #000;
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}
.vg-embed-wrap iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: 0;
}

.vg-card-footer {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.9rem 1.1rem;
}

.vg-play-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--team-color-2, var(--accent-color));
    color: #0f172a;
    flex-shrink: 0;
}

.vg-title {
    font-family: var(--header-font);
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--primary-color);
    margin: 0;
    line-height: 1.3;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  BLOG POSTS SECTION                                           ║
   ╚══════════════════════════════════════════════════════════════╝ */
.blog-section { background: var(--section-bg); }

.blog-posts-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.blog-post-card {
    display: grid;
    grid-template-columns: 1fr;
    background: var(--card-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: var(--radius-2xl);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease;
    align-items: stretch;
}

@media (min-width: 560px) {
    .blog-post-card {
        grid-template-columns: 200px 1fr auto;
    }
}

@media (min-width: 768px) {
    .blog-post-card {
        grid-template-columns: 260px 1fr auto;
    }
}

.blog-post-card:hover {
    transform: translateX(6px);
    box-shadow: var(--hover-shadow);
}

.blog-card-img {
    display: block;
    overflow: hidden;
    min-height: 200px;
    background: var(--light-bg);
}

@media (min-width: 560px) {
    .blog-card-img {
        min-height: auto;
    }
}

.blog-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.55s var(--ease-out);
}
.blog-post-card:hover .blog-card-img img {
    transform: scale(1.06);
}

.blog-card-body {
    padding: clamp(1.25rem, 3vw, 1.75rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.4rem;
}

.blog-card-cat {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--team-color-2, var(--accent-color));
    background: rgba(255,215,0,0.1);
    padding: 0.2em 0.7em;
    border-radius: var(--radius-full);
    margin-bottom: 0.1rem;
    width: fit-content;
}

.blog-card-title {
    font-family: var(--header-font);
    font-size: var(--font-size-lg);
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
    letter-spacing: -0.01em;
}
.blog-card-title a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s ease;
}
.blog-card-title a:hover { color: var(--accent-color); }

.blog-card-excerpt {
    font-size: var(--font-size-sm);
    color: var(--secondary-color);
    line-height: 1.65;
    margin: 0;
}

.blog-card-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    color: var(--secondary-color);
    font-weight: 500;
}

.blog-card-sep { opacity: 0.4; }

/* Arrow column */
.blog-card-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    color: var(--secondary-color);
    text-decoration: none;
    transition: color 0.2s ease, background 0.2s ease;
    flex-shrink: 0;
    border-left: var(--glass-border);
}
.blog-card-arrow:hover {
    color: var(--accent-color);
    background: rgba(255,215,0,0.06);
}

@media (max-width: 559px) {
    .blog-card-arrow { display: none; }
}

/* View All button */
.blog-view-all {
    text-align: center;
    margin-top: var(--space-lg);
}

.btn-view-all {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--header-font);
    font-size: var(--font-size-sm);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--primary-color);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-full);
    padding: 0.8em 2em;
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.btn-view-all:hover {
    border-color: var(--accent-color);
    background: var(--accent-color);
    color: #0f172a;
}

/* ─── Ensure front-page hero bleeds to top under the fixed header ─── */
.player-profile-main .player-hero {
    margin-top: -68px;
    padding-top: 68px;
}

/* ═══════════════════════════════════════════════════════════════════
   BADOSA-STYLE ENHANCEMENTS
   Image-background sections · Feature strip · Cinematic bio split
   Section alternation · Enhanced animations
   ═══════════════════════════════════════════════════════════════════ */

/* ── Slide-in reveal animations for split sections ── */
@keyframes slideFromLeft {
    from { transform: translateX(-50px); opacity: 0; }
    to   { transform: translateX(0);     opacity: 1; }
}
@keyframes slideFromRight {
    from { transform: translateX(50px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
@keyframes scaleIn {
    from { transform: scale(0.93); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}
@keyframes fstripFloat {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.25; }
    50%       { transform: translateY(-22px) scale(1.2); opacity: 0.55; }
}

.reveal-left  { opacity: 0; }
.reveal-right { opacity: 0; }
.reveal-left.is-revealed  { animation: slideFromLeft  0.75s cubic-bezier(0.22,1,0.36,1) both; }
.reveal-right.is-revealed { animation: slideFromRight 0.75s cubic-bezier(0.22,1,0.36,1) both; }

@media (prefers-reduced-motion: reduce) {
    .reveal-left, .reveal-right { opacity: 1 !important; animation: none !important; }
}

/* ══════════════════════════════════════
   STATS SECTION — dark bg image support
   ══════════════════════════════════════ */
.stats-section:not(.stats-has-bg) {
    background: #111;
}

.stats-has-bg {
    position: relative;
    background: var(--stats-bg) center / cover no-repeat;
    background-attachment: fixed;
}
@media (max-width: 768px) {
    .stats-has-bg { background-attachment: scroll; }
}
.stats-has-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg,
        rgba(0,0,0,0.9) 0%,
        rgba(0,0,0,0.7) 60%,
        rgba(0,0,0,0.82) 100%);
    z-index: 0;
}
.stats-has-bg .profile-container  { position: relative; z-index: 1; }
.stats-has-bg .section-eyebrow    { color: var(--team-color-2, #ffd700); }
.stats-has-bg .section-title      { color: #fff; }
.stats-has-bg .stat-card {
    background: rgba(255,255,255,0.07) !important;
    border-color: rgba(255,255,255,0.14) !important;
    backdrop-filter: blur(18px) saturate(1.4);
}
.stats-has-bg .stat-card-value,
.stats-has-bg .stat-card-label { color: #fff; }
.stats-has-bg .stat-card-icon  { filter: brightness(1.3); }

/* ══════════════════════════════════════
   AWARDS SECTION — bg image or dark gradient
   ══════════════════════════════════════ */
.awards-section {
    background: linear-gradient(165deg, #111 0%, #181818 50%, #0f0f0f 100%);
    position: relative;
    overflow: hidden;
}
.awards-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 0%,
        rgba(255,185,0,0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.awards-section .profile-container { position: relative; z-index: 1; }

.awards-has-bg {
    background: var(--awards-bg) center / cover no-repeat !important;
    background-attachment: fixed !important;
}
@media (max-width: 768px) {
    .awards-has-bg { background-attachment: scroll !important; }
}
.awards-has-bg::before {
    background: linear-gradient(165deg,
        rgba(0,0,0,0.82) 0%,
        rgba(0,0,0,0.68) 50%,
        rgba(0,0,0,0.78) 100%) !important;
}
.awards-has-bg .section-eyebrow { color: var(--team-color-2, #ffd700); }
.awards-has-bg .section-title   { color: #fff; }
.awards-has-bg .award-card {
    background: rgba(255,255,255,0.07) !important;
    border-color: rgba(255,255,255,0.12) !important;
    backdrop-filter: blur(14px);
}
.awards-has-bg .award-name { color: #fff; }

/* ══════════════════════════════════════
   FEATURE STRIP
   Full-bleed image + giant pull quote
   ══════════════════════════════════════ */
.feature-strip {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--feature-bg, linear-gradient(135deg, var(--team-color, #1a1a2e) 0%, #000 100%))
                center / cover no-repeat;
    background-attachment: fixed;
}
@media (max-width: 768px) {
    .feature-strip { background-attachment: scroll; min-height: 50vh; }
}
.feature-strip--gradient {
    background: linear-gradient(135deg,
        var(--team-color, #1a1a2e) 0%,
        color-mix(in srgb, var(--team-color, #1a1a2e) 40%, #000) 100%) !important;
}

.feature-strip-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0,0,0,0.25) 0%,
        rgba(0,0,0,0.62) 50%,
        rgba(0,0,0,0.5)  100%
    );
    z-index: 0;
}

/* Floating particles inside the strip */
.feature-strip-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.fstrip-particle {
    position: absolute;
    bottom: -10%;
    left: calc(var(--fp-left, 50%) * 1%);
    width: clamp(4px, 0.8vw, 10px);
    height: clamp(4px, 0.8vw, 10px);
    border-radius: 50%;
    background: var(--team-color-2, #ffd700);
    opacity: 0.2;
    animation: fstripFloat calc(5s + var(--fp-dur, 3) * 1s) ease-in-out
               calc(var(--fp-delay, 0) * 1s) infinite;
}

.feature-strip-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: clamp(4rem, 10vw, 7rem) clamp(1.5rem, 6vw, 4rem);
    max-width: 960px;
    margin: 0 auto;
}

.feature-strip-eyebrow {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--team-color-2, #ffd700);
    margin-bottom: 1.75rem;
    opacity: 0.85;
}

.feature-strip-quote {
    /* Reset ALL global blockquote styles */
    margin: 0 0 2.5rem;
    padding: 0;
    border: none !important;
    border-left: none !important;
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    font-style: normal !important;
}
.feature-strip-quote p {
    font-family: var(--header-font, sans-serif);
    font-size: clamp(1.65rem, 5.5vw, 3.8rem);
    font-weight: 800;
    line-height: 1.15;
    color: #fff !important;
    letter-spacing: -0.02em;
    font-style: normal;
    quotes: '\201C' '\201D';
    margin: 0;
}
.feature-strip-quote p::before {
    content: open-quote;
    color: var(--team-color-2, #ffd700);
    display: inline;
    margin-right: 0.06em;
}
.feature-strip-quote p::after {
    content: close-quote;
    color: var(--team-color-2, #ffd700);
    display: inline;
    margin-left: 0.06em;
}

.feature-strip-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    border-bottom: 1.5px solid rgba(255,255,255,0.3);
    padding-bottom: 0.25em;
    transition: color 0.25s ease, border-color 0.25s ease, gap 0.25s ease;
}
.feature-strip-cta:hover {
    color: var(--team-color-2, #ffd700);
    border-color: var(--team-color-2, #ffd700);
    gap: 0.85rem;
}

/* ══════════════════════════════════════
   BIO SECTION — cinematic split layout
   ══════════════════════════════════════ */
.bio-cinematic {
    padding: 0 !important;
    overflow: hidden;
    min-height: 620px;
}

.bio-cinema-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 680px;
}

/* Left: portrait as full-bleed bg */
.bio-cinema-img {
    position: relative;
    background: var(--portrait-url,
        linear-gradient(145deg, var(--team-color, #1a1a2e) 0%, #000 100%))
        center top / cover no-repeat;
    overflow: hidden;
    min-height: 480px;
    border-radius: 0 var(--radius-2xl) var(--radius-2xl) 0;
}

@media (max-width: 900px) {
    .bio-cinema-img {
        border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    }
}
.bio-cinema-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, var(--team-color, #1a1a2e) 0%, #000 100%);
}
.bio-cinema-placeholder span {
    font-family: var(--header-font, sans-serif);
    font-size: clamp(5rem, 18vw, 14rem);
    font-weight: 900;
    color: rgba(255,255,255,0.07);
    line-height: 1;
    user-select: none;
}
/* Gradient fade to right so the content panel joins seamlessly */
.bio-cinema-img-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        transparent 55%,
        rgba(10,10,22,0.6) 80%,
        rgba(10,10,22,0.95) 100%
    );
    pointer-events: none;
}
/* Tag overlay at bottom-left of image */
.bio-cinema-tag {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.bio-cinema-pos {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.8);
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(8px);
    padding: 0.3em 0.9em;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
}
.bio-cinema-num {
    font-family: var(--header-font, sans-serif);
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--team-color-2, #ffd700);
    text-shadow: 0 0 12px rgba(255,215,0,0.4);
}

/* Right: dark content panel */
.bio-cinema-content {
    background: #0d0d0d;
    padding: clamp(3rem, 6vw, 5rem) clamp(2rem, 5vw, 4rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
}
.bio-cinema-content .section-eyebrow     { color: var(--team-color-2, #ffd700); }
.bio-cinema-content .section-title       { color: #fff; }
.bio-cinema-content .bio-body p          { color: rgba(255,255,255,0.75); line-height: 1.8; }
.bio-cinema-content .bio-quote           {
    border-left-color: var(--team-color-2, #ffd700);
    color: rgba(255,255,255,0.85);
}
.bio-cinema-content .bio-quote cite      { color: rgba(255,255,255,0.45); }
.bio-cinema-content .bio-highlights      { margin-top: 1.5rem; }
.bio-cinema-content .bio-highlights li   { color: rgba(255,255,255,0.8); }
.bio-cinema-content .bio-highlights li::before { background: var(--team-color-2, #ffd700); }

@media (max-width: 900px) {
    .bio-cinema-wrap { grid-template-columns: 1fr; }
    .bio-cinema-img  { min-height: 340px; }
    .bio-cinema-img-fade {
        background: linear-gradient(to bottom, transparent 60%, rgba(10,10,22,0.9) 100%);
    }
    .bio-cinema-content { padding: 2.5rem 1.75rem; }
}

/* ══════════════════════════════════════
   VIDEO SECTION — full-bleed layout
   ══════════════════════════════════════ */
.video-gallery-section {
    padding: 0 !important;
}
.video-gallery-section:not(.video-has-bg) {
    background: #0a0a0a;
}
.video-has-bg {
    position: relative;
    background: var(--video-bg) center / cover no-repeat;
    background-attachment: fixed;
}
@media (max-width: 768px) {
    .video-has-bg { background-attachment: scroll; }
}
.video-has-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.86);
    z-index: 0;
}
.video-has-bg .vg-heading-wrap,
.video-has-bg .vg-fullbleed-grid { position: relative; z-index: 1; }
.video-has-bg .section-eyebrow { color: var(--team-color-2, #ffd700); }
.video-has-bg .section-title   { color: #fff; }

/* ── Looping MP4 used as the section background (instead of a static
   image) — render via <video class="section-video-bg"> since CSS
   background-image can't display video files.                       */
.video-bg-is-video {
    position: relative;
    overflow: hidden;
}
.video-bg-is-video::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.78);
    z-index: 1;
}
.video-bg-is-video .vg-heading-wrap,
.video-bg-is-video .vg-fullbleed-grid { position: relative; z-index: 2; }
.video-bg-is-video .section-eyebrow { color: var(--team-color-2, #ffd700); }
.video-bg-is-video .section-title   { color: #fff; }

/* Heading block — contained, centred */
.vg-heading-wrap {
    padding: var(--space-xl) var(--space-lg) var(--space-md);
    text-align: center;
    max-width: 1400px;
    margin: 0 auto;
}

/* Full-bleed grid */
.vg-fullbleed-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    background: transparent;
}

/* 2+ videos: side by side */
@media (min-width: 640px) {
    .vg-fullbleed-grid.video-count-2,
    .vg-fullbleed-grid.video-count-3,
    .vg-fullbleed-grid.video-count-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 3 videos: first spans full width */
.vg-fullbleed-grid.video-count-3 .vg-fw-item:first-child {
    grid-column: 1 / -1;
}

/* Video item */
.vg-fw-item { position: relative; background: #000; }

/* 16:9 responsive embed */
.vg-fw-item .vg-embed-wrap {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    background: #000;
    border-radius: var(--radius-xl);
}
.vg-fw-item .vg-embed-wrap iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: 0;
    display: block;
}

/* Title caption overlaid at bottom */
.vg-fw-footer {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);
    color: rgba(255,255,255,0.85);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    pointer-events: none;
}
.vg-fw-footer svg { flex-shrink: 0; opacity: 0.7; }

/* ══════════════════════════════════════
   NEWS SECTION — subtle dark bg
   ══════════════════════════════════════ */
.news-section {
    background: #111;
}

/* ══════════════════════════════════════
   SECTION TITLE — more impactful sizing
   ══════════════════════════════════════ */
.section-title {
    font-size: clamp(2rem, 5vw, 3.2rem) !important;
    letter-spacing: -0.025em !important;
}

/* ══════════════════════════════════════
   GALLERY SECTION — slightly lighter bg
   ══════════════════════════════════════ */
.gallery-section {
    background: linear-gradient(180deg, #111 0%, #0d0d0d 100%);
}

/* ══════════════════════════════════════
   STAT / AWARD CARDS — hover lift
   ══════════════════════════════════════ */
.stat-card {
    transition: transform 0.35s cubic-bezier(0.22,1,0.36,1),
                box-shadow 0.35s ease !important;
}
.stat-card:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 0 24px 48px rgba(0,0,0,0.4), 0 0 0 1px var(--team-color-2, #ffd700) !important;
}
.award-card {
    transition: transform 0.35s cubic-bezier(0.22,1,0.36,1),
                box-shadow 0.35s ease !important;
}
.award-card:hover {
    transform: translateY(-10px) rotate(-1deg) !important;
}

/* ══════════════════════════════════════
   NEWS CARD — hover lift + colour line
   ══════════════════════════════════════ */
.pnews-card {
    transition: transform 0.3s cubic-bezier(0.22,1,0.36,1),
                box-shadow 0.3s ease !important;
}
.pnews-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.35) !important;
}
.pnews-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--team-color, #1a1a2e), var(--team-color-2, #ffd700));
    border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}
.pnews-card:hover::after { transform: scaleX(1); }

/* ══════════════════════════════════════
   BLOG CARD — hover underline CTA
   ══════════════════════════════════════ */
.blog-post-card {
    transition: transform 0.3s cubic-bezier(0.22,1,0.36,1),
                box-shadow 0.3s ease !important;
}
.blog-post-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 36px rgba(0,0,0,0.3) !important;
}

/* ══════════════════════════════════════
   SECTION — stagger children reveal
   ══════════════════════════════════════ */
.stats-grid .reveal-item:nth-child(1) { animation-delay: 0.05s; }
.stats-grid .reveal-item:nth-child(2) { animation-delay: 0.13s; }
.stats-grid .reveal-item:nth-child(3) { animation-delay: 0.21s; }
.stats-grid .reveal-item:nth-child(4) { animation-delay: 0.29s; }

.awards-shelf .reveal-item:nth-child(1) { animation-delay: 0.0s; }
.awards-shelf .reveal-item:nth-child(2) { animation-delay: 0.1s; }
.awards-shelf .reveal-item:nth-child(3) { animation-delay: 0.2s; }
.awards-shelf .reveal-item:nth-child(4) { animation-delay: 0.3s; }

.profile-news-grid .reveal-item:nth-child(1) { animation-delay: 0.04s; }
.profile-news-grid .reveal-item:nth-child(2) { animation-delay: 0.12s; }
.profile-news-grid .reveal-item:nth-child(3) { animation-delay: 0.20s; }
.profile-news-grid .reveal-item:nth-child(4) { animation-delay: 0.28s; }
.profile-news-grid .reveal-item:nth-child(5) { animation-delay: 0.36s; }
.profile-news-grid .reveal-item:nth-child(6) { animation-delay: 0.44s; }

.blog-posts-list .reveal-item:nth-child(1) { animation-delay: 0.05s; }
.blog-posts-list .reveal-item:nth-child(2) { animation-delay: 0.13s; }
.blog-posts-list .reveal-item:nth-child(3) { animation-delay: 0.21s; }
.blog-posts-list .reveal-item:nth-child(4) { animation-delay: 0.29s; }
.blog-posts-list .reveal-item:nth-child(5) { animation-delay: 0.37s; }

/* ══════════════════════════════════════════════════════
   SOCIAL FEED SECTION
   ══════════════════════════════════════════════════════ */
.social-feed-section {
    background: #0d0d0d;
}

/* Two-column or single-column grid */
.social-feed-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    align-items: start;
}
@media (min-width: 860px) {
    .social-feed-grid--two {
        grid-template-columns: 1fr 1fr;
    }
}

/* Individual platform panel */
.social-feed-panel {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-2xl, 1.25rem);
    overflow: hidden;
}

/* Panel header bar */
.social-feed-panel-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    background: rgba(255,255,255,0.03);
}
.social-feed-panel-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: rgba(255,255,255,0.7);
}
.social-feed-panel-header span {
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(255,255,255,0.75);
    letter-spacing: 0.02em;
    flex: 1;
}
.social-feed-follow-btn {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--team-color-2, #ffd700);
    text-decoration: none;
    border: 1px solid var(--team-color-2, #ffd700);
    border-radius: 999px;
    padding: 0.25em 0.9em;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}
.social-feed-follow-btn:hover {
    background: var(--team-color-2, #ffd700);
    color: #0f0f0f;
}

/* Twitter-specific panel */
.social-feed-panel--twitter .social-feed-panel-icon { color: #fff; }

/* Instagram-specific panel */
.social-feed-panel--instagram .social-feed-panel-icon {
    color: #e1306c;
}

/* Embed wrapper — scrollable, max-height so it doesn't go crazy */
.social-feed-embed-wrap {
    max-height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.social-feed-embed-wrap::-webkit-scrollbar { width: 4px; }
.social-feed-embed-wrap::-webkit-scrollbar-track { background: transparent; }
.social-feed-embed-wrap::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.12);
    border-radius: 2px;
}

/* Twitter timeline iframe override */
.social-feed-embed-wrap .twitter-timeline,
.social-feed-embed-wrap iframe[src*="twitter"],
.social-feed-embed-wrap iframe[src*="x.com"] {
    width: 100% !important;
    border: none !important;
    display: block;
}

/* Instagram plugin overrides (Smash Balloon etc.) */
.social-feed-embed-wrap .sbi_feed_num_manager,
.social-feed-embed-wrap #sb_instagram { padding: 0 !important; }

/* Instagram follow CTA — shown when no plugin is configured */
.social-feed-ig-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem 2rem;
    text-align: center;
    color: rgba(255,255,255,0.55);
}
.social-feed-ig-cta svg { opacity: 0.35; }
.social-feed-ig-cta p {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.6);
    margin: 0;
}
.social-feed-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    border-bottom: 1.5px solid rgba(255,255,255,0.25);
    padding-bottom: 0.15em;
    transition: color 0.2s, border-color 0.2s;
}
.social-feed-cta-link:hover {
    color: var(--team-color-2, #ffd700);
    border-color: var(--team-color-2, #ffd700);
}
.social-feed-ig-hint {
    font-size: 0.7rem !important;
    color: rgba(255,255,255,0.3) !important;
    max-width: 320px;
    line-height: 1.6;
}
.social-feed-ig-hint code {
    background: rgba(255,255,255,0.08);
    padding: 0.1em 0.4em;
    border-radius: 4px;
    font-size: 0.85em;
}

/* ══════════════════════════════════════════════════════
   CLEAN INTERACTIONS
   No tap highlights · outline only for keyboard focus
   ══════════════════════════════════════════════════════ */

/* Remove iOS/Android blue flash on tap */
* { -webkit-tap-highlight-color: transparent; }

/* Keep focus ring for keyboard users, remove for mouse/touch */
:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* Remove default button outline on all buttons */
button { outline: none; }
button:focus-visible {
    outline: 2px solid var(--team-color-2, #ffd700);
    outline-offset: 2px;
}

/* Mobile: remove any lingering ring on nav links */
@media (hover: none) {
    a:focus,
    button:focus { outline: none; }
    a:focus-visible,
    button:focus-visible {
        outline: 2px solid var(--team-color-2, #ffd700);
        outline-offset: 2px;
    }
}

/* Mobile bottom nav — remove active press ring */
.mobile-nav-item { -webkit-tap-highlight-color: transparent; }
.mobile-nav-item:focus { outline: none; }

/* Header action buttons — clean on mobile */
.pp-hdr-btn:focus,
.pp-hamburger:focus { outline: none; }
.pp-hdr-btn:focus-visible,
.pp-hamburger:focus-visible {
    outline: 2px solid var(--team-color-2, #ffd700);
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION TEXT CONTRAST — DARK MODE ONLY
   Scoped to :root:not([data-theme="light"]) so white text and glass
   cards only apply when the user is in dark mode (system or explicit).
   In light mode the sections get light backgrounds (see block below)
   and natural CSS-variable text colours take over.
═══════════════════════════════════════════════════════════════════ */

/* ── Section headings ───────────────────────────────────────────── */
:root:not([data-theme="light"]) .awards-section .section-title,
:root:not([data-theme="light"]) .gallery-section .section-title,
:root:not([data-theme="light"]) .news-section .section-title,
:root:not([data-theme="light"]) .social-feed-section .section-title,
:root:not([data-theme="light"]) .video-gallery-section .section-title {
    color: #fff !important;
}

:root:not([data-theme="light"]) .awards-section .section-eyebrow,
:root:not([data-theme="light"]) .gallery-section .section-eyebrow,
:root:not([data-theme="light"]) .news-section .section-eyebrow,
:root:not([data-theme="light"]) .social-feed-section .section-eyebrow,
:root:not([data-theme="light"]) .video-gallery-section .section-eyebrow {
    color: var(--team-color-2, #ffd700) !important;
}

/* ── Bio blockquote paragraph ───────────────────────────────────── */
:root:not([data-theme="light"]) .bio-cinema-content .bio-quote p {
    color: rgba(255,255,255,0.88) !important;
}

/* ── Award cards — glass on dark gradient ───────────────────────── */
:root:not([data-theme="light"]) .awards-section:not(.awards-has-bg):not(.awards-has-video) .award-card {
    background: rgba(255,255,255,0.07) !important;
    border-color: rgba(255,255,255,0.12) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}
:root:not([data-theme="light"]) .awards-section:not(.awards-has-bg):not(.awards-has-video) .award-name {
    color: #fff !important;
}

/* ── News cards — glass on dark section ─────────────────────────── */
:root:not([data-theme="light"]) .news-section .pnews-card {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.09) !important;
}
:root:not([data-theme="light"]) .news-section .pnews-title a       { color: #fff !important; }
:root:not([data-theme="light"]) .news-section .pnews-title a:hover { color: var(--team-color-2, #ffd700) !important; }
:root:not([data-theme="light"]) .news-section .pnews-excerpt       { color: rgba(255,255,255,0.62) !important; }
:root:not([data-theme="light"]) .news-section .pnews-date          { color: rgba(255,255,255,0.45) !important; }
:root:not([data-theme="light"]) .news-section .pnews-read-time     {
    background: rgba(255,215,0,0.15) !important;
    color: var(--team-color-2, #ffd700) !important;
}
:root:not([data-theme="light"]) .news-section .pnews-thumb-placeholder { background: rgba(255,255,255,0.05) !important; }
:root:not([data-theme="light"]) .news-section .pnews-link          { color: var(--team-color-2, #ffd700) !important; }

/* ── Stats cards — subtle shadow to lift from background ────────── */
.stats-section .stat-card {
    box-shadow: 0 4px 24px rgba(0,0,0,0.07), 0 0 0 1px rgba(15,23,42,0.07) !important;
}

/* ── Header nav over dark hero ───────────────────────────────────── */
[data-theme="light"] .pp-site-header:not(.pp-header--scrolled) .pp-nav-menu li a {
    color: rgba(255,255,255,0.9) !important;
}
[data-theme="light"] .pp-site-header:not(.pp-header--scrolled) .pp-logo-wordmark {
    color: rgba(255,255,255,0.9) !important;
}
[data-theme="light"] .pp-site-header:not(.pp-header--scrolled) .pp-hdr-btn {
    color: rgba(255,255,255,0.8) !important;
    border-color: rgba(255,255,255,0.2) !important;
    background: rgba(255,255,255,0.1) !important;
}
[data-theme="light"] .pp-site-header:not(.pp-header--scrolled) .pp-ham-bar {
    background: rgba(255,255,255,0.9) !important;
}
[data-theme="light"] .pp-site-header.pp-header--scrolled .pp-nav-menu li a {
    color: var(--text-color) !important;
}
[data-theme="light"] .pp-site-header.pp-header--scrolled .pp-logo-wordmark {
    color: var(--primary-color) !important;
}
[data-theme="light"] .pp-site-header.pp-header--scrolled .pp-hdr-btn {
    color: var(--text-color) !important;
    border-color: rgba(0,0,0,0.1) !important;
    background: rgba(0,0,0,0.05) !important;
}
[data-theme="light"] .pp-site-header.pp-header--scrolled .pp-ham-bar {
    background: var(--primary-color) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LIGHT MODE — SECTION BACKGROUNDS
   Replaces every hardcoded dark section background so the page looks
   correct when the user (or their system) is in light mode.
   Two selectors per rule: one for explicit [data-theme="light"] toggle,
   one for system-preference light with no override set.
═══════════════════════════════════════════════════════════════════ */

/* Stats */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .stats-section:not(.stats-has-bg):not(.stats-has-video) { background: #f1f5f9 !important; }
}
[data-theme="light"] .stats-section:not(.stats-has-bg):not(.stats-has-video) { background: #f1f5f9 !important; }

/* Awards / Trophy Case */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .awards-section:not(.awards-has-bg):not(.awards-has-video) {
        background: #f8fafc !important;
    }
    :root:not([data-theme="dark"]) .awards-section:not(.awards-has-bg):not(.awards-has-video)::before { display: none; }
}
[data-theme="light"] .awards-section:not(.awards-has-bg):not(.awards-has-video) { background: #f8fafc !important; }
[data-theme="light"] .awards-section:not(.awards-has-bg):not(.awards-has-video)::before { display: none; }

/* Gallery */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .gallery-section { background: #f8fafc !important; }
}
[data-theme="light"] .gallery-section { background: #f8fafc !important; }

/* News */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .news-section { background: #f1f5f9 !important; }
}
[data-theme="light"] .news-section { background: #f1f5f9 !important; }

/* Social feed */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .social-feed-section { background: #ffffff !important; }
}
[data-theme="light"] .social-feed-section { background: #ffffff !important; }

/* Video gallery */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .video-gallery-section:not(.video-has-bg) { background: #e8edf2 !important; }
}
[data-theme="light"] .video-gallery-section:not(.video-has-bg) { background: #e8edf2 !important; }

/* Bio cinematic content panel */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .bio-cinema-content { background: #ffffff !important; color: var(--text-color); }
    :root:not([data-theme="dark"]) .bio-cinema-content .section-title,
    :root:not([data-theme="dark"]) .bio-cinema-content .section-eyebrow,
    :root:not([data-theme="dark"]) .bio-cinema-content .bio-body,
    :root:not([data-theme="dark"]) .bio-cinema-content .bio-body p,
    :root:not([data-theme="dark"]) .bio-cinema-content .bio-highlights li { color: var(--text-color) !important; }
    :root:not([data-theme="dark"]) .bio-cinema-content .bio-quote p { color: var(--text-color) !important; }
    :root:not([data-theme="dark"]) .bio-cinema-content .bio-quote cite { color: var(--text-muted) !important; }
    /* Fade the portrait image toward white to blend with white content panel */
    :root:not([data-theme="dark"]) .bio-cinema-img-fade {
        background: linear-gradient(to right, transparent 50%, rgba(255,255,255,0.7) 78%, rgba(255,255,255,0.97) 100%);
    }
}
[data-theme="light"] .bio-cinema-content { background: #ffffff !important; color: var(--text-color); }
[data-theme="light"] .bio-cinema-content .section-title,
[data-theme="light"] .bio-cinema-content .section-eyebrow,
[data-theme="light"] .bio-cinema-content .bio-body,
[data-theme="light"] .bio-cinema-content .bio-body p,
[data-theme="light"] .bio-cinema-content .bio-highlights li { color: var(--text-color) !important; }
[data-theme="light"] .bio-cinema-content .bio-quote p   { color: var(--text-color) !important; }
[data-theme="light"] .bio-cinema-content .bio-quote cite { color: var(--text-muted) !important; }
[data-theme="light"] .bio-cinema-img-fade {
    background: linear-gradient(to right, transparent 50%, rgba(255,255,255,0.7) 78%, rgba(255,255,255,0.97) 100%);
}

/* ═══════════════════════════════════════════════════════════════════
   GRAIN / NOISE TEXTURE — site-wide film grain effect
   Extends the hero's existing .hero-overlay-noise treatment to all
   profile sections so the entire page has the same cinematic grain.
   Uses ::after pseudo-elements with pointer-events:none so all
   mouse/touch interactions pass straight through.
═══════════════════════════════════════════════════════════════════ */

/* Shared noise SVG data URI — fractalNoise, slightly coarser than the
   hero's 0.9 frequency to give a more visible grain on flat surfaces  */
:root {
    --noise-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch' result='noise'/%3E%3CfeColorMatrix in='noise' type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3.2' intercept='-1.1'/%3E%3CfeFuncG type='linear' slope='3.2' intercept='-1.1'/%3E%3CfeFuncB type='linear' slope='3.2' intercept='-1.1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Global cinematic grain — one fixed overlay across the whole
   viewport so every background and image carries the same film-grain
   texture as the hero photo, including pages/elements with no
   element-specific noise rule of their own. Sits above ordinary
   section content (z-index 0-9) but below interactive UI like the
   header, modals, and lightbox (z-index 100+) so controls stay crisp
   and clickable — pointer-events:none lets all input pass through. */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image: var(--noise-tile);
    background-repeat: repeat;
    background-size: 110px 110px;
    opacity: 0.18;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 50;
}

/* ── Section base: needs position:relative for absolute ::after ───── */
.profile-section,
.bio-cinematic,
.video-gallery-section {
    position: relative;
}

/* ── Noise overlay on all profile sections ──────────────────────────
   z-index: 9 puts it on top of section content; pointer-events:none
   means all clicks, hovers and touches fall through to real elements.
   At 0.045 opacity the grain is subtle — visible on dark, like fine
   paper texture on light.                                            */
.profile-section::after,
.bio-cinematic::after,
.video-gallery-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--noise-tile);
    background-repeat: repeat;
    background-size: 180px 180px;
    opacity: 0.045;
    pointer-events: none;
    z-index: 9;
}

/* ── Feature strip — has inner overlay div, so ::after is safe ─────── */
.feature-strip::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--noise-tile);
    background-repeat: repeat;
    background-size: 180px 180px;
    opacity: 0.04;
    pointer-events: none;
    z-index: 9;
}

/* ── Header glass — subtle grain on the scrolled glass header ──────── */
.pp-site-header.pp-header--scrolled::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--noise-tile);
    background-repeat: repeat;
    background-size: 150px 150px;
    opacity: 0.025;
    pointer-events: none;
    z-index: -1;
}

/* ── Hero: update inline noise div to match the same grain frequency ─ */
.hero-overlay-noise {
    background-image: var(--noise-tile);
    background-size: 180px 180px;
    opacity: 0.05;
}

/* ═══════════════════════════════════════════════════════════════════
   IMAGE NOISE / GRAIN OVERLAY
   Plain opacity approach — same technique as the section grain that
   is already visible. mix-blend-mode: soft-light was too subtle with
   the SVG turbulence output, so we use a flat opacity overlay instead.
   pointer-events: none means all hover/click interactions work normally.
═══════════════════════════════════════════════════════════════════ */

/* ── Player gallery photos ────────────────────────────────────── */
.gallery-img-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--noise-tile);
    background-repeat: repeat;
    background-size: 180px 180px;
    opacity: 0.1;
    pointer-events: none;
    z-index: 1;
}
/* Zoom-icon overlay stays above the grain */
.gallery-cell-overlay {
    position: relative;
    z-index: 2;
}

/* ── News card thumbnails ─────────────────────────────────────── */
.pnews-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--noise-tile);
    background-repeat: repeat;
    background-size: 180px 180px;
    opacity: 0.1;
    pointer-events: none;
    z-index: 1;
}
.pnews-thumb-scrim {
    position: relative;
    z-index: 2;
}

/* ── Bio portrait (background-image div) ─────────────────────── */
.bio-cinema-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--noise-tile);
    background-repeat: repeat;
    background-size: 180px 180px;
    opacity: 0.08;
    pointer-events: none;
    z-index: 1;
}
.bio-cinema-img-fade,
.bio-cinema-tag {
    position: relative;
    z-index: 2;
}

/* ── General post-card thumbnails (::after is taken by hover scrim) */
.post-card-thumb {
    position: relative;
}
.post-card-thumb::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--noise-tile);
    background-repeat: repeat;
    background-size: 180px 180px;
    opacity: 0.1;
    pointer-events: none;
    z-index: 1;
}

/* ── Headline / featured post thumbnails ─────────────────────── */
.post-thumbnail {
    position: relative;
}
.post-thumbnail::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--noise-tile);
    background-repeat: repeat;
    background-size: 180px 180px;
    opacity: 0.1;
    pointer-events: none;
    z-index: 1;
}

/* ── Lightbox full-size image ─────────────────────────────────── */
.pp-lb-stage {
    position: relative;
}
.pp-lb-stage::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--noise-tile);
    background-repeat: repeat;
    background-size: 180px 180px;
    opacity: 0.08;
    pointer-events: none;
    z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION VIDEO BACKGROUNDS
   Looping MP4 video used as a full-bleed background for hero, stats,
   and awards sections. The video sits at z-index 0; all overlays and
   content layers stack above it.
═══════════════════════════════════════════════════════════════════ */

/* ── Shared video element ─────────────────────────────────────── */
.section-video-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    pointer-events: none;
    display: block;
}

/* ── Hero with video ──────────────────────────────────────────── */
.hero-has-video {
    position: relative;
    overflow: hidden;
    /* CSS background-image stays as fallback — video layers on top */
}
/* All hero children already use absolute positioning with their own
   z-index; the gradient/noise overlays render above the video at z:1 */
.hero-has-video .hero-overlay-gradient,
.hero-has-video .hero-overlay-noise,
.hero-has-video .hero-team-bar,
.hero-has-video .hero-particles,
.hero-has-video .hero-bg-number,
.hero-has-video .hero-content-wrap,
.hero-has-video .hero-scroll-cue {
    position: relative;
    z-index: 1;
}

/* ── Stats section with video ─────────────────────────────────── */
.stats-has-video {
    position: relative;
    overflow: hidden;
}
.stats-has-video::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg,
        rgba(0,0,0,0.72) 0%,
        rgba(0,0,0,0.58) 50%,
        rgba(0,0,0,0.78) 100%);
    z-index: 1;
    pointer-events: none;
}
.stats-has-video .profile-container { position: relative; z-index: 2; }
.stats-has-video .section-eyebrow   { color: var(--team-color-2, #ffd700); }
.stats-has-video .section-title     { color: #fff; }
.stats-has-video .stat-card {
    background: rgba(255,255,255,0.07) !important;
    border-color: rgba(255,255,255,0.14) !important;
    backdrop-filter: blur(18px) saturate(1.4);
}
.stats-has-video .stat-card-value,
.stats-has-video .stat-card-label { color: #fff; }
.stats-has-video .stat-card-icon  { filter: brightness(1.3); }

/* ── Awards/Trophy section with video ─────────────────────────── */
.awards-has-video {
    position: relative;
    overflow: hidden;
}
.awards-has-video::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(165deg,
        rgba(0,0,0,0.82) 0%,
        rgba(0,0,0,0.65) 50%,
        rgba(0,0,0,0.78) 100%);
    z-index: 1;
    pointer-events: none;
}
.awards-has-video .profile-container { position: relative; z-index: 2; }
.awards-has-video .section-eyebrow   { color: var(--team-color-2, #ffd700); }
.awards-has-video .section-title     { color: #fff; }
.awards-has-video .award-card {
    background: rgba(255,255,255,0.07) !important;
    border-color: rgba(255,255,255,0.12) !important;
    backdrop-filter: blur(12px);
}
.awards-has-video .award-name { color: #fff !important; }