/*
Theme Name: Theory Coaches
Theme URI: https://beezloop.com/
Author: BeezLoop
Author URI: https://beezloop.com/
Description: A professional coaching profile theme with career record, achievements, and coaching history
Version: 2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: theory-coaches

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;
    background: transparent !important;
}

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

/* 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 2rem;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(0,0,0,0.12);
}
.single-post .post-thumbnail img {
    border-radius: 0;
    width: 100%;
    height: clamp(240px, 38vw, 500px);
    object-fit: cover;
    object-position: center top;
    display: block;
}
.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;
}

.single-post article {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

.single-post .entry-content {
    padding-left: 0;
    padding-right: 0;
    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;
}

[data-theme="dark"] .single-post article {
    background: transparent;
    border: none;
    box-shadow: none;
}

[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;
    padding-top: 2rem;
}

.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.1rem;
        line-height: 1.75;
        padding-left: 0;
        padding-right: 0;
    }

    .single-post .entry-content p {
        font-size: 1.1rem;
        line-height: 1.75;
        margin-bottom: 1.1rem;
    }

    .single-post .entry-content h1,
    .single-post .entry-content h2,
    .single-post .entry-content h3 {
        font-size: 1.3rem;
        line-height: 1.35;
        margin-top: 1.4rem;
        margin-bottom: 0.8rem;
    }

    .single-post .entry-content img,
    .single-post .entry-content figure img {
        border-radius: 8px;
        margin: 1rem 0;
        max-width: 100%;
        height: auto;
    }

    /* Featured image: break edge-to-edge on mobile */
    .single-post .post-thumbnail {
        margin-left: -1rem;
        margin-right: -1rem;
        margin-bottom: 1.5rem;
        border-radius: 0;
        box-shadow: none;
    }
    .single-post .post-thumbnail img {
        border-radius: 0;
        width: 100%;
        height: 56vw;
        object-fit: cover;
        object-position: center top;
    }

    /* Top spacing on mobile so image clears the fixed header */
    .single-layout {
        padding-top: 1.25rem;
    }

    .single-post .entry-header {
        margin-bottom: 1.5rem;
        padding: 0;
    }

    .entry-title {
        font-size: 1.6rem !important;
        line-height: 1.25 !important;
    }

    /* Tighten single-layout container padding on mobile */
    .single-layout.container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .single-post article {
        padding: 0;
    }
    
    .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;
    fill: currentColor;
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.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;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-bottom-nav::-webkit-scrollbar {
        display: none;
    }

    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; }

/* The bar can hold any number of menu items + Search + Theme toggle.
   Items keep a comfortable minimum size and the bar scrolls horizontally
   if they don't all fit, instead of squashing each item. */
@media (max-width: 768px) {
    .mobile-nav-item {
        flex: 0 0 auto;
        min-width: 56px;
        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(--text-color);
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.search-close-btn:hover {
    background: rgba(128,128,128,0.15);
}

.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(3, 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-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);
}

/* ════════════════════════════════════════════════════════════════
   SLIDER COMPONENT — Photo Gallery & Video Gallery
   Horizontal scroll-snap track, native touch swipe on mobile,
   arrow buttons + slide counter on larger screens.
════════════════════════════════════════════════════════════════ */
.pp-slider {
    position: relative;
}

.pp-slider-track {
    display: flex;
    gap: var(--space-sm);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 0.25rem var(--container-padding) 0.75rem;
}
.pp-slider-track::-webkit-scrollbar { display: none; }

.pp-slider-slide {
    scroll-snap-align: start;
    flex: 0 0 auto;
}

.pp-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: var(--radius-full);
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: background 0.25s ease, transform 0.2s ease;
}
.pp-slider-arrow:hover { background: rgba(0,0,0,0.75); }
.pp-slider-arrow:active { transform: translateY(-50%) scale(0.92); }
.pp-slider-prev { left: 0.75rem; }
.pp-slider-next { right: 0.75rem; }

@media (max-width: 640px) {
    .pp-slider-arrow {
        width: 36px;
        height: 36px;
        font-size: 1.3rem;
    }
    .pp-slider-prev { left: 0.4rem; }
    .pp-slider-next { right: 0.4rem; }
}

.pp-slider-counter {
    margin-top: 0.5rem;
    font-size: var(--font-size-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

/* ── Photo gallery slides ── */
.gallery-slide {
    width: 76%;
    max-width: 380px;
}
.gallery-slide .gallery-img-btn {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-xl);
}
@media (min-width: 640px) {
    .gallery-slide { width: 44%; }
}
@media (min-width: 1024px) {
    .gallery-slide { width: 30%; }
}

/* ── Video gallery slides ── */
.vg-slide {
    position: relative;
    width: 90%;
    max-width: 640px;
    background: #000;
    border-radius: var(--radius-xl);
    overflow: hidden;
}
@media (min-width: 768px) {
    .vg-slide { width: 56%; }
}
@media (min-width: 1280px) {
    .vg-slide { width: 38%; }
}

/* ─── 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);
    }
}

/* ─── 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;
    background: transparent !important;
}
.pp-header-logo--custom .custom-logo-link {
    display: flex;
    align-items: center;
    height: 100%;
    background: transparent !important;
}
.pp-header-logo--custom .custom-logo {
    max-width: 160px !important;
    max-height: 48px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    background: transparent !important;
}
.pp-header-logo--custom .pp-logo--dark-only,
.pp-header-logo--custom .pp-logo--light-only {
    background: transparent !important;
}

/* 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);
}

/* Anchor-only links (#bio, #news, etc.) share the current page URL so WordPress
   marks them current-menu-item too — reset them back to the default nav style. */
.pp-nav-menu li.current-menu-item a[href^="#"],
.pp-nav-menu li.current_page_item a[href^="#"] {
    background: transparent;
    color: rgba(255,255,255,0.8);
}
[data-theme="light"] .pp-nav-menu li.current-menu-item a[href^="#"],
[data-theme="light"] .pp-nav-menu li.current_page_item a[href^="#"] {
    color: var(--text-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;
}

.btn-bio-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2rem;
    padding: 0.75rem 1.75rem;
    background: var(--team-color-2, var(--accent-color));
    color: #0a0a0f;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 100px;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.btn-bio-cta:hover {
    opacity: 0.88;
    transform: translateY(-2px);
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  VIDEO GALLERY                                                ║
   ╚══════════════════════════════════════════════════════════════╝ */
.video-gallery-section { background: var(--light-bg); }

.vg-embed-wrap {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
}
.vg-embed-wrap iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: 0;
    display: block;
}
.vg-embed-wrap .vg-local-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
    display: block;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  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;
}

@media (max-width: 900px) {
    .bio-cinema-img {
        border-radius: 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 .pp-video-slider { 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 .pp-video-slider { 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;
}

/* 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; }
.stats-grid .reveal-item:nth-child(5) { animation-delay: 0.37s; }
.stats-grid .reveal-item:nth-child(6) { animation-delay: 0.45s; }

.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;
    }
    .social-feed-grid--multi {
        grid-template-columns: repeat(auto-fit, minmax(280px, 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;
}

/* TikTok-specific panel */
.social-feed-panel--tiktok .social-feed-panel-icon { color: #fff; }

/* Social feed panel header SVGs used via theory_social_platform_svg() */
.social-feed-panel-header svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: rgba(255,255,255,0.7);
}
.social-feed-panel--twitter .social-feed-panel-header svg  { color: #fff; }
.social-feed-panel--instagram .social-feed-panel-header svg { color: #e1306c; }

/* Extra social follow buttons row */
.social-feed-follow-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 2rem;
}
.social-feed-extra-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.25rem;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px;
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.social-feed-extra-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.social-feed-extra-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.35);
    color: #fff;
}

/* Empty state when no social URLs configured */
.social-feed-empty {
    text-align: center;
    padding: 3rem 2rem;
    color: rgba(255,255,255,0.45);
    font-size: 0.9rem;
}
.social-feed-empty strong { color: rgba(255,255,255,0.65); }

/* 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: var(--primary-color, #1a1a2e) !important;
}
[data-theme="light"] .pp-hamburger:hover {
    background: rgba(0,0,0,0.08) !important;
}

/* Dual-logo: switch between dark-mode and light-mode logos */
.pp-header-logo--dual .pp-logo--light-only { display: none; }
[data-theme="light"] .pp-header-logo--dual .pp-logo--light-only { display: block; }
[data-theme="light"] .pp-header-logo--dual .pp-logo--dark-only { display: none; }
.pp-logo--light-only { max-height: 48px; width: auto; display: block; }

[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; }


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  THEORY COACHES — "COMMAND ROOM"  v3                            ║
   ║  Midnight · Electric Teal · Sharp Geometry · Scoreboard Data    ║
   ║  Every section intentionally different from the player theme.   ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* ═══════════════════════════════════════════════════════════════════
   0. GLOBAL COACHES TOKENS + PAGE-LEVEL FIXES
   ═══════════════════════════════════════════════════════════════════ */

/* Prevent horizontal overflow — body only, NOT html (html breaks iOS scroll) */
body { overflow-x: clip; }

/* Bottom nav: fully hidden in coaches theme */
.mobile-bottom-nav { display: none !important; }

/* Floating theme-toggle bubble (the X/sun button) — completely hidden.
   The CSS base has conflicting display:none then display:flex in the same
   block, so flex wins. Force it off here with all hiding properties. */
.theme-toggle,
button.theme-toggle,
#themeToggle.theme-toggle {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Back-to-top: remove expensive backdrop-filter, fix bottom since nav is gone */
.pp-back-top {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(6,182,212,0.18) !important;
    border: 1px solid rgba(6,182,212,0.4) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
    bottom: 1.5rem !important;
}
.pp-back-top svg { stroke: var(--team-color-2, #06b6d4) !important; }

/* Bio cinema image — remove all border radius, every specificity level */
.bio-cinema-img,
.bio-cinema-img.reveal-left,
.bio-cinema-img.reveal-left.is-revealed,
.bio-cinema-img picture,
.bio-cinema-img figure,
.bio-cinema-img img,
.bio-cinema-wrap .bio-cinema-img,
.bio-cinematic .bio-cinema-img {
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
}
@media (max-width: 900px) {
    .bio-cinema-img,
    .bio-cinema-img.reveal-left,
    .bio-cinema-img.reveal-left.is-revealed {
        border-radius: 0 !important;
        -webkit-border-radius: 0 !important;
    }
}
:root {
    --coach-teal:        #06b6d4;
    --coach-teal-dim:    rgba(6,182,212,0.18);
    --coach-teal-glow:   rgba(6,182,212,0.35);
    --coach-ink:         #040810;
    --coach-ink-2:       #080f1e;
    --coach-ink-3:       #0e1729;
    --coach-line:        rgba(6,182,212,0.15);
    --coach-text-dim:    rgba(255,255,255,0.55);
    --coach-radius:      2px;
}

/* Force default customizer colors toward teal/midnight */
body {
    --accent-color: var(--team-color-2, var(--coach-teal));
}

/* ═══════════════════════════════════════════════════════════════════
   1. HERO — FULL-WIDTH CINEMATIC BANNER
      Replaces the floating glass card with a broadcast-style
      nameplate that runs edge-to-edge at the bottom of the hero.
   ═══════════════════════════════════════════════════════════════════ */

/* Hero: static teal grid overlay — no animation, no lag */
.player-hero {
    overflow: hidden !important;
}

/* Static diagonal grid — teal lines, no movement */
.player-hero::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background-image:
        linear-gradient(rgba(6,182,212,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(6,182,212,0.045) 1px, transparent 1px) !important;
    background-size: 68px 68px !important;
    transform: rotate(-10deg) scale(1.3) !important;
    z-index: 1 !important;
    pointer-events: none !important;
    animation: none !important;
}

/* Remove scan-line entirely */
.player-hero::after {
    display: none !important;
}

/* Remove floating particles entirely */
.hero-particle { display: none !important; }

/* — Content wrapper: full-width, flush to bottom — */
.player-hero .hero-content-wrap {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* — The card becomes a horizontal nameplate banner — */
.hero-glass-card {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 0 !important;
    clip-path: none !important;
    background: rgba(4,8,20,0.96) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-top: 2px solid var(--team-color-2, var(--coach-teal)) !important;
    box-shadow:
        0 -30px 90px rgba(0,0,0,0.6),
        0 -1px 0 rgba(6,182,212,0.2) inset !important;
    padding: clamp(1rem,2.5vw,1.75rem) clamp(1.5rem,5vw,5rem) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: clamp(1rem,2.5vw,2.5rem) !important;
    flex-wrap: nowrap !important;
}

/* Left: role badge stacked vertically */
.hero-position-badge {
    order: 1 !important;
    flex-shrink: 0 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.3rem !important;
    margin-bottom: 0 !important;
}
.hero-number-badge {
    border-radius: var(--coach-radius) !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.1em !important;
    padding: 0.3em 0.9em !important;
    background: var(--team-color-2, var(--coach-teal)) !important;
    color: #040810 !important;
}
.hero-pos-text,
.hero-team-text {
    font-size: 0.68rem !important;
    letter-spacing: 0.12em !important;
}
.hero-divider-dot { display: none !important; }

/* Center: Name — single line, teal last name */
.hero-player-name {
    order: 2 !important;
    flex: 1 1 0% !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 0.35em !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1 !important;
    flex-wrap: nowrap !important;
}
.hero-name-first {
    font-size: clamp(1.3rem,2.8vw,2.2rem) !important;
    font-weight: 300 !important;
    color: rgba(255,255,255,0.75) !important;
    letter-spacing: 0.01em !important;
}
.hero-name-last {
    font-size: clamp(1.5rem,3.2vw,2.6rem) !important;
    font-weight: 900 !important;
    color: var(--team-color-2, var(--coach-teal)) !important;
    letter-spacing: -0.02em !important;
    text-transform: uppercase !important;
}

/* Bio text: tucked in, muted */
.hero-player-bio {
    order: 3 !important;
    flex: 1.2 1 0% !important;
    font-size: 0.78rem !important;
    line-height: 1.5 !important;
    opacity: 0.5 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* Quick stats: horizontal with teal separator */
.hero-quick-stats {
    order: 4 !important;
    flex-shrink: 0 !important;
    gap: 0 !important;
    margin: 0 !important;
    border-left: 1px solid var(--coach-line) !important;
    border-right: 1px solid var(--coach-line) !important;
    padding: 0 clamp(0.75rem,1.5vw,1.75rem) !important;
    align-items: center !important;
}
.hero-stat {
    padding: 0 clamp(0.6rem,1.2vw,1.2rem) !important;
    align-items: center !important;
}
.hero-stat-sep {
    width: 1px !important;
    height: 2rem !important;
    background: var(--coach-line) !important;
    flex-shrink: 0 !important;
    border-radius: 0 !important;
}
.hero-stat-value {
    font-size: clamp(1.1rem,2vw,1.7rem) !important;
    font-weight: 900 !important;
    color: var(--team-color-2, var(--coach-teal)) !important;
    letter-spacing: -0.02em !important;
}
.hero-stat-label {
    font-size: 0.52rem !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}

/* Actions: stacked column on far right */
.hero-actions {
    order: 5 !important;
    flex-direction: column !important;
    gap: 0.45rem !important;
    margin: 0 !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
}
.btn-hero-primary {
    border-radius: var(--coach-radius) !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.08em !important;
    padding: 0.55rem 1.2rem !important;
    background: var(--team-color-2, var(--coach-teal)) !important;
    color: #040810 !important;
    font-weight: 700 !important;
}
.btn-hero-ghost {
    border-radius: var(--coach-radius) !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.08em !important;
    padding: 0.55rem 1.2rem !important;
    border-color: var(--coach-teal-dim) !important;
    color: var(--team-color-2, var(--coach-teal)) !important;
}

/* Scroll cue — hide, not needed with bottom banner */
.hero-scroll-cue { display: none !important; }

/* Background initials watermark: centered, very faint */
.hero-bg-number {
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 100px !important;
    font-size: clamp(14rem,32vw,46rem) !important;
    opacity: 0.025 !important;
    font-style: italic !important;
    letter-spacing: -0.06em !important;
}

/* Header teal accent line */
.pp-header-accent {
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--team-color-2, var(--coach-teal)) 40%,
        var(--team-color-2, var(--coach-teal)) 60%,
        transparent 100%
    ) !important;
    opacity: 0.7 !important;
}

/* Mobile: revert to column */
@media (max-width: 680px) {
    .hero-glass-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 1.25rem 1.25rem 1.75rem !important;
        gap: 0.75rem !important;
    }
    .hero-player-name {
        flex-wrap: wrap !important;
        white-space: normal !important;
    }
    .hero-player-bio { display: none !important; }
    .hero-quick-stats {
        border: none !important;
        padding: 0 !important;
        width: 100% !important;
    }
    .hero-actions { flex-direction: row !important; margin-left: 0 !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   2. STATS — SCOREBOARD ROWS
      Large numbers right-aligned, label left-aligned, table feel.
      Completely different from the 3-column card grid.
   ═══════════════════════════════════════════════════════════════════ */
.stats-section {
    background: #030710 !important;
}
.stats-section .section-eyebrow {
    color: var(--team-color-2, var(--coach-teal)) !important;
    letter-spacing: 0.22em !important;
}
.stats-section .section-title {
    font-style: italic !important;
}

/* Scoreboard table container */
.stats-section .stats-grid {
    display: block !important;
    max-width: 860px !important;
    margin: 0 auto !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    gap: 0 !important;
}

/* Each stat = a table row */
.stats-section .stat-card {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    padding: 1.1rem 2rem !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    gap: 1rem !important;
    position: relative !important;
    overflow: hidden !important;
    transition: background 0.15s ease !important;
    cursor: default !important;
}
.stats-section .stat-card:last-child {
    border-bottom: none !important;
}
.stats-section .stat-card:nth-child(odd) {
    background: rgba(255,255,255,0.015) !important;
}
.stats-section .stat-card:hover {
    background: var(--coach-teal-dim) !important;
    transform: none !important;
}
/* Teal accent bar on left edge on hover */
.stats-section .stat-card::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 0 !important;
    background: var(--team-color-2, var(--coach-teal)) !important;
    transition: width 0.18s ease !important;
}
.stats-section .stat-card:hover::before { width: 3px !important; }

/* Progress bar: hidden in coaches (doesn't suit data table) */
.stats-section .stat-progress { display: none !important; }
.stats-section .stat-card-glow { display: none !important; }

/* Label: left, normal weight */
.stats-section .stat-card-label {
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    color: rgba(255,255,255,0.6) !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
    text-align: left !important;
    grid-column: 1 !important;
    order: 1 !important;
}

/* Value: right-aligned, huge */
.stats-section .stat-card-value {
    font-size: clamp(2rem,4.5vw,3.5rem) !important;
    font-weight: 900 !important;
    color: var(--team-color-2, var(--coach-teal)) !important;
    letter-spacing: -0.03em !important;
    line-height: 1 !important;
    text-align: right !important;
    grid-column: 2 !important;
    order: 2 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   3. AWARDS — VERTICAL LIST WITH LEFT BORDER ACCENTS
      Horizontal list, slide-right hover — nothing like the card grid.
   ═══════════════════════════════════════════════════════════════════ */
.awards-section {
    background: #050a18 !important;
}
.awards-section .section-eyebrow {
    color: var(--team-color-2, var(--coach-teal)) !important;
    letter-spacing: 0.22em !important;
}
.awards-section .section-title {
    font-style: italic !important;
}

/* Stack into a single column */
.awards-shelf {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    max-width: 780px !important;
    margin: 0 auto !important;
}
.awards-shelf.is-centered { justify-content: flex-start !important; align-items: stretch !important; }

/* Wide horizontal award cards */
.award-card {
    min-width: 0 !important;
    max-width: none !important;
    width: 100% !important;
    border-radius: 0 3px 3px 0 !important;
    clip-path: none !important;
    padding: 1.1rem 1.75rem !important;
    text-align: left !important;
    background: rgba(255,255,255,0.025) !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    border-left: 4px solid var(--team-color-2, var(--coach-teal)) !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 1.25rem !important;
    transform: translateX(0) !important;
    transition: background 0.18s ease, transform 0.18s ease !important;
    position: relative !important;
    overflow: hidden !important;
}
.award-card:nth-child(2) { border-left-color: rgba(6,182,212,0.7) !important; }
.award-card:nth-child(3) { border-left-color: rgba(6,182,212,0.5) !important; }
.award-card:nth-child(4) { border-left-color: rgba(6,182,212,0.35) !important; }
.award-card:hover {
    background: var(--coach-teal-dim) !important;
    transform: translateX(8px) !important;
    box-shadow: none !important;
}
.award-card::before { display: none !important; }

.award-icon {
    font-size: 1.9rem !important;
    flex-shrink: 0 !important;
    filter: none !important;
    transition: none !important;
    line-height: 1 !important;
}
.award-card:hover .award-icon {
    transform: none !important;
    filter: none !important;
}
.award-name {
    flex: 1 !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    color: rgba(255,255,255,0.92) !important;
    text-align: left !important;
}
.award-shine,
.award-glow { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   4. BIO — ITALIC HEADING, DIAMOND BULLETS, TEAL QUOTE BAR
      HTML order in front-page.php is: content first, image second.
      That gives: desktop = text left / image right,
                  mobile  = text top  / image below.
      No CSS order tricks needed.
   ═══════════════════════════════════════════════════════════════════ */
.bio-section .section-title {
    font-style: italic !important;
}
.bio-cinema-content blockquote,
.bio-cinema-content .bio-quote {
    border-left: 3px solid var(--team-color-2, var(--coach-teal)) !important;
    border-radius: 0 3px 3px 0 !important;
    background: rgba(6,182,212,0.06) !important;
    padding: 1rem 1.25rem 1rem 1.5rem !important;
    margin: 1.5rem 0 !important;
}
.bio-cinema-content blockquote p,
.bio-cinema-content .bio-quote p {
    font-style: italic !important;
    color: rgba(255,255,255,0.88) !important;
}
.bio-cinema-content .bio-quote cite {
    color: var(--team-color-2, var(--coach-teal)) !important;
}

/* Diamond bullets */
.bio-highlights li {
    padding-left: 1.4rem !important;
    position: relative !important;
}
.bio-highlights li::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0.45em !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 0 !important;
    background: var(--team-color-2, var(--coach-teal)) !important;
    transform: rotate(45deg) !important;
    flex-shrink: 0 !important;
    margin-top: 0 !important;
}

/* Teal tint overlay on bio image */
.bio-cinema-img {
    position: relative !important;
}
.bio-cinema-img::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
        135deg,
        rgba(6,182,212,0.15) 0%,
        transparent 55%
    ) !important;
    pointer-events: none !important;
    z-index: 1 !important;
    border-radius: inherit !important;
}

/* BIO CTA */
.btn-bio-cta {
    border-radius: var(--coach-radius) !important;
    letter-spacing: 0.1em !important;
    background: var(--team-color-2, var(--coach-teal)) !important;
    color: #040810 !important;
    font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   5. NEWS — MAGAZINE GRID
      First article spans 2 columns for featured-story treatment.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 860px) {
    .profile-news-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .profile-news-grid .pnews-card:first-child {
        grid-column: span 2 !important;
    }
    .profile-news-grid .pnews-card:first-child .pnews-thumb {
        height: 260px !important;
    }
    .profile-news-grid .pnews-card:first-child .pnews-title {
        font-size: 1.25rem !important;
    }
}
.pnews-card       { border-radius: 3px !important; }
.pnews-thumb img  { border-radius: 3px 3px 0 0 !important; }
.pnews-link       { color: var(--team-color-2, var(--coach-teal)) !important; }

/* ═══════════════════════════════════════════════════════════════════
   6. FEATURE STRIP — ITALIC LARGE QUOTE
   ═══════════════════════════════════════════════════════════════════ */
.feature-strip-quote p {
    font-style: italic !important;
    font-size: clamp(1.4rem,3.5vw,2.4rem) !important;
    letter-spacing: -0.01em !important;
    line-height: 1.25 !important;
}
.feature-strip-cta {
    border-radius: var(--coach-radius) !important;
    background: var(--team-color-2, var(--coach-teal)) !important;
    color: #040810 !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
}

/* ═══════════════════════════════════════════════════════════════════
   7. SOCIAL LINKS
   ═══════════════════════════════════════════════════════════════════ */
.pp-social-link:hover { color: var(--team-color-2, var(--coach-teal)) !important; }

/* ═══════════════════════════════════════════════════════════════════
   8. SECTION HEADINGS — ITALIC THROUGHOUT
   ═══════════════════════════════════════════════════════════════════ */
.profile-section-header .section-title,
.gallery-section .section-title,
.video-section .section-title,
.news-section .section-title,
.social-section .section-title {
    font-style: italic !important;
    letter-spacing: -0.015em !important;
}

/* ═══════════════════════════════════════════════════════════════════
   9. GALLERY — ASYMMETRIC GRID (first image 2× wider)
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 680px) {
    .photo-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.75rem !important;
    }
    .photo-grid .gallery-img-btn:first-child {
        grid-column: span 2 !important;
    }
    .photo-grid .gallery-img-btn:first-child img {
        height: 100% !important;
        object-fit: cover !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   10. MISC — SHARP CORNERS EVERYWHERE
   ═══════════════════════════════════════════════════════════════════ */
.hero-number-badge,
.feature-strip-cta,
.btn-hero-primary,
.btn-hero-ghost,
.pnews-card,
.award-card { border-radius: var(--coach-radius) !important; }

/* Trending bar: teal highlight instead of gold */
.trending-link.is-active { color: var(--team-color-2, var(--coach-teal)) !important; }
.ticker-dot { background: var(--team-color-2, var(--coach-teal)) !important; }

/* ═══════════════════════════════════════════════════════════════════
   11. SCROLLBAR — COACHES TEAL
   ═══════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar-thumb {
    background: rgba(6,182,212,0.35) !important;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(6,182,212,0.6) !important;
}
   Strategic authority: tactical, structured, disciplined.
   Emerald green accent / deep charcoal base / angular geometry.
   ═══════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────
   HERO — TACTICAL GRID + RADAR PING ANIMATION
   · Angled playbook grid drifting diagonally
   · Radar-ping diamonds expanding from scattered points
   · Single vertical scan-line sweeping left→right
   ─────────────────────────────────────────────────────────────────── */

/* Angled playbook grid overlay */
.player-hero::before {
    content: '';
    position: absolute;
    inset: -20%;
    background-image:
        linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
    background-size: 72px 72px;
    transform: rotate(-12deg);
    animation: coachGridDrift 35s linear infinite;
    z-index: 1;
    pointer-events: none;
}
@keyframes coachGridDrift {
    0%   { background-position: 0 0; }
    100% { background-position: 72px 72px; }
}

/* Vertical scan-line sweep */
.player-hero::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        var(--team-color-2, #00c875) 35%,
        rgba(0,200,117,0.9) 50%,
        var(--team-color-2, #00c875) 65%,
        transparent 100%
    );
    opacity: 0;
    animation: coachScanLine 12s ease-in-out 1.5s infinite;
    z-index: 3;
    pointer-events: none;
    filter: blur(1px);
}
@keyframes coachScanLine {
    0%   { left: -2%;  opacity: 0; }
    8%   { opacity: 0.22; }
    88%  { opacity: 0.22; }
    100% { left: 102%; opacity: 0; }
}

/* Radar-ping diamonds — replace rising dots */
.hero-particle {
    border-radius: 0 !important;
    background: transparent !important;
    border: 1.5px solid var(--team-color-2, #00c875) !important;
    box-shadow: none !important;
    bottom: auto !important;
    top: var(--pp-top, 50%);
    width: 8px !important;
    height: 8px !important;
    opacity: 0;
    animation: coachPing var(--pp-dur, 5s) ease-out var(--pp-delay, 0s) infinite !important;
}
@keyframes coachPing {
    0%   { transform: rotate(45deg) scale(0.2); opacity: 0.95; }
    25%  { opacity: 0.6; }
    70%  { opacity: 0.15; }
    100% { transform: rotate(45deg) scale(16);  opacity: 0; }
}

/* Hero glass card: cut-corner angular shape */
.hero-glass-card {
    border-radius: 2px !important;
    clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-top: 2px solid var(--team-color-2, #00c875) !important;
    box-shadow:
        0 32px 80px rgba(0,0,0,0.55),
        0 0 40px rgba(0,200,117,0.06) inset !important;
}

/* Hero position badge: different style */
.hero-position-badge {
    background: rgba(0,200,117,0.1) !important;
    border: 1px solid rgba(0,200,117,0.3) !important;
    border-radius: 2px !important;
}
.hero-number-badge {
    background: var(--team-color-2, #00c875) !important;
    color: #050a0e !important;
    border-radius: 2px !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.12em !important;
}

/* Background watermark initials: more subtle, italic */
.hero-bg-number {
    opacity: 0.035 !important;
    font-style: italic !important;
    letter-spacing: 0.05em !important;
    right: 2% !important;
    font-size: clamp(14rem, 28vw, 36rem) !important;
}

/* Hero CTA buttons */
.btn-hero-primary {
    background: var(--team-color-2, #00c875) !important;
    color: #050a0e !important;
    border-radius: 2px !important;
}
.btn-hero-ghost {
    border-color: rgba(0,200,117,0.5) !important;
    color: var(--team-color-2, #00c875) !important;
    border-radius: 2px !important;
}

/* ───────────────────────────────────────────────────────────────────
   STATS — SCOREBOARD DATA PANEL
   Flat dark table with left accent bars, no hover-lift effect
   ─────────────────────────────────────────────────────────────────── */
.stats-section {
    background: #06090e !important;
}
.stats-section .section-eyebrow {
    color: var(--team-color-2, #00c875) !important;
    letter-spacing: 0.18em !important;
}
.stats-section .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0 !important;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 4px;
    overflow: hidden;
    max-width: 900px;
    margin: 0 auto;
}
@media (min-width: 640px) {
    .stats-section .stats-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}
.stats-section .stat-card {
    background: transparent !important;
    border: none !important;
    border-right: 1px solid rgba(255,255,255,0.06) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 2rem 1.75rem 2rem 2rem !important;
    transform: none !important;
    transition: background 0.2s ease !important;
    position: relative;
    overflow: visible;
}
.stats-section .stat-card::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important; top: 25% !important; bottom: 25% !important;
    width: 3px !important; height: auto !important;
    background: var(--team-color-2, #00c875) !important;
    border-radius: 0 2px 2px 0 !important;
    opacity: 0.8;
}
.stats-section .stat-card:hover {
    background: rgba(0,200,117,0.04) !important;
    transform: none !important;
    box-shadow: none !important;
}
.stats-section .stat-card-glow { display: none !important; }
.stats-section .stat-card-value {
    font-size: clamp(2rem, 4.5vw, 3.5rem) !important;
    color: #fff !important;
    text-shadow: none !important;
}
.stats-section .stat-card-label {
    color: rgba(255,255,255,0.45) !important;
    letter-spacing: 0.08em !important;
    font-size: 0.6rem !important;
    text-transform: uppercase !important;
}

/* ───────────────────────────────────────────────────────────────────
   AWARDS — ANGULAR BANNER CARDS
   Grid layout, sharp corners, accent top border, no glow/shine
   ─────────────────────────────────────────────────────────────────── */
.awards-section {
    background: linear-gradient(160deg, #080d14 0%, #0b1420 100%) !important;
}
.awards-section .section-eyebrow {
    color: var(--team-color-2, #00c875) !important;
}
.awards-shelf {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
    flex-wrap: unset !important;
    max-width: 860px;
    margin: 0 auto;
}
@media (min-width: 580px) {
    .awards-shelf { grid-template-columns: repeat(4, 1fr) !important; }
}
.award-card {
    width: auto !important;
    border-radius: 2px !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-top: 2px solid var(--team-color-2, #00c875) !important;
    padding: 1.5rem 1.25rem !important;
    text-align: left !important;
    background: rgba(255,255,255,0.03) !important;
    box-shadow: none !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
}
.award-card:hover {
    transform: translateY(-4px) !important;
    background: rgba(0,200,117,0.06) !important;
    box-shadow: 0 8px 24px rgba(0,200,117,0.1) !important;
}
.award-shine,
.award-glow { display: none !important; }
.award-icon {
    font-size: 1.4rem !important;
    margin-bottom: 0.5rem !important;
    display: block;
    filter: none !important;
}
.award-name {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    color: rgba(255,255,255,0.85) !important;
    line-height: 1.4 !important;
}

/* ───────────────────────────────────────────────────────────────────
   BIO — COMMAND CENTRE LAYOUT
   Left accent line, diamond bullet points, italic quote style
   ─────────────────────────────────────────────────────────────────── */
.bio-cinema-content .section-title {
    font-style: italic;
}
.bio-highlights li::before {
    border-radius: 0 !important;
    transform: rotate(45deg);
    width: 7px !important;
    height: 7px !important;
    margin-top: 0.35em !important;
    background: var(--team-color-2, #00c875) !important;
}
.bio-quote {
    border-left: 3px solid var(--team-color-2, #00c875) !important;
    border-radius: 0 !important;
    background: rgba(0,200,117,0.06) !important;
    padding-left: 1.5rem !important;
}
.bio-quote p {
    color: rgba(255,255,255,0.9) !important;
}
.bio-quote cite {
    color: var(--team-color-2, #00c875) !important;
}

/* Bio CTA button matches accent */
.btn-bio-cta {
    border-radius: 2px !important;
    letter-spacing: 0.1em !important;
}

/* ───────────────────────────────────────────────────────────────────
   FEATURE STRIP — SHARPER, GREENER
   ─────────────────────────────────────────────────────────────────── */
.feature-strip-cta {
    border-radius: 2px !important;
    background: var(--team-color-2, #00c875) !important;
    color: #050a0e !important;
}

/* ───────────────────────────────────────────────────────────────────
   SECTION EYEBROWS & TITLES — UNIFORM COACHES STYLE
   ─────────────────────────────────────────────────────────────────── */
.section-eyebrow {
    letter-spacing: 0.16em;
}
.profile-section-header .section-title {
    font-style: italic;
}

/* ───────────────────────────────────────────────────────────────────
   HEADER ACCENT LINE — EMERALD INSTEAD OF TEAM GOLD DEFAULT
   ─────────────────────────────────────────────────────────────────── */
.pp-header-accent {
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--team-color-2, #00c875) 40%,
        var(--team-color-2, #00c875) 60%,
        transparent 100%
    ) !important;
}

/* ───────────────────────────────────────────────────────────────────
   FOOTER — MOBILE FIXES (coaches theme)
   ─────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    /* Tighter horizontal padding so content doesn't clip */
    .pp-footer .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Stack number + name vertically and center both */
    .pp-footer-identity {
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.25rem !important;
        width: 100% !important;
    }

    /* Shrink the large jersey number so it doesn't push past the edge */
    .pp-footer-num {
        font-size: clamp(2.5rem, 14vw, 4rem) !important;
    }

    /* Center the name block text on mobile */
    .pp-footer-nameblock {
        text-align: center !important;
    }

    /* Prevent tagline from overflowing */
    .pp-footer-tagline {
        max-width: 100% !important;
        padding: 0 0.5rem !important;
        word-break: break-word !important;
    }

    /* Stack copyright and credit on separate lines, centered */
    .pp-footer-meta-inner {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 0.25rem !important;
    }
}

/* ───────────────────────────────────────────────────────────────────
   HERO TITLE OVERLAY — coaches theme
   Bottom-left name + position banner sitting directly on the hero image.
   Independent of the glass card; can be shown/hidden via Customizer.
   ─────────────────────────────────────────────────────────────────── */
.hero-title-overlay {
    position: absolute;
    bottom: clamp(3.5rem, 7vw, 5.5rem);
    left: clamp(1.25rem, 4vw, 3.5rem);
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    pointer-events: none;
}

.hero-overlay-subtitle {
    margin: 0;
    font-family: var(--header-font, 'Montserrat', sans-serif);
    font-size: clamp(0.6rem, 1.2vw, 0.78rem);
    font-weight: 800;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--team-color-2, #06b6d4);
    line-height: 1;
}

.hero-overlay-title {
    margin: 0;
    font-family: var(--header-font, 'Montserrat', sans-serif);
    font-size: clamp(2.2rem, 6vw, 5rem);
    font-weight: 900;
    font-style: italic;
    line-height: 0.92;
    letter-spacing: -0.03em;
    color: #fff;
    text-shadow: 0 2px 24px rgba(0,0,0,0.55);
    border-left: 4px solid var(--team-color-2, #06b6d4);
    padding-left: clamp(0.6rem, 1.5vw, 1rem);
}

@media (max-width: 680px) {
    .hero-title-overlay {
        bottom: clamp(2.5rem, 8vw, 4rem);
        left: 1rem;
    }
    .hero-overlay-title {
        font-size: clamp(1.75rem, 9vw, 2.75rem);
    }
}

/* ═══════════════════════════════════════════════════════════════════
   HERO — PARTICLES-ONLY ANIMATION  (coaches theme — final override)

   Only the radar-ping diamonds animate. Grid and scan-line are static/off.
   coachPing uses transform + opacity only — GPU compositor, no repaints.
   Paused by IntersectionObserver when hero leaves viewport.
   ════════════════════════════════════════════════════════════════════ */

/* Grid — static, no animation */
.player-hero::before {
    animation: none !important;
}

/* Scan-line off */
.player-hero::after { display: none !important; }

/* Particles on — coachPing (defined above) handles the animation */
.hero-particle {
    display: block !important;
    animation-play-state: var(--hero-anim-state, running) !important;
}

/* Isolate hero compositing layer from the rest of the page */
.player-hero {
    contain: layout paint !important;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .hero-particle { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   CONTACT SECTION — coaches theme
   ════════════════════════════════════════════════════════════════════ */
.contact-section {
    background: #080d14;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: clamp(4rem, 9vw, 7rem) 0;
    position: relative;
    overflow: hidden;
}

.contact-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 80% 50%, rgba(6,182,212,0.06) 0%, transparent 70%),
        radial-gradient(ellipse 40% 60% at 10% 80%, rgba(6,182,212,0.04) 0%, transparent 60%);
    pointer-events: none;
}

.contact-inner {
    max-width: var(--container-width, 1280px);
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 3rem);
    position: relative;
}

.contact-header {
    text-align: center;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.contact-tagline {
    font-size: var(--font-size-sm, 0.9rem);
    color: rgba(255,255,255,0.5);
    max-width: 48ch;
    margin: 0.75rem auto 0;
    line-height: 1.65;
}

/* Two-column: info left, form right */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

/* Info list */
.contact-info-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.contact-info-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(6,182,212,0.1);
    border: 1px solid rgba(6,182,212,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--team-color-2, #06b6d4);
    margin-top: 2px;
}

.contact-info-icon svg {
    width: 18px;
    height: 18px;
}

.contact-info-label {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--team-color-2, #06b6d4);
    margin: 0 0 0.2rem;
}

.contact-info-value {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    margin: 0;
    transition: color 0.2s ease;
}

a.contact-info-value:hover {
    color: #fff;
}

/* Form */
.contact-form {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.contact-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.contact-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.contact-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
}

.contact-input {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: #fff;
    font-size: 0.9rem;
    padding: 0.7em 1em;
    width: 100%;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease;
    font-family: inherit;
}

.contact-input::placeholder {
    color: rgba(255,255,255,0.2);
}

.contact-input:focus {
    border-color: var(--team-color-2, #06b6d4);
    background: rgba(6,182,212,0.05);
}

.contact-textarea {
    resize: vertical;
    min-height: 130px;
}

.contact-form-footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.contact-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--team-color-2, #06b6d4);
    color: #050a0e;
    font-family: var(--header-font, inherit);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: none;
    border-radius: 6px;
    padding: 0.75em 1.6em;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.contact-submit:hover  { opacity: 0.88; transform: translateY(-1px); }
.contact-submit:active { transform: translateY(0); }
.contact-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.contact-submit-icon { width: 15px; height: 15px; }

.contact-form-status {
    font-size: 0.82rem;
    margin: 0;
}
.contact-status--ok  { color: #4ade80; }
.contact-status--err { color: #f87171; }

/* Mobile */
@media (max-width: 760px) {
    .contact-layout {
        grid-template-columns: 1fr;
    }
    .contact-form-row {
        grid-template-columns: 1fr;
    }
    .contact-info-list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1.25rem;
    }
    .contact-info-item {
        flex: 1 1 140px;
    }
}