:root {
            --color-bg-primary: #0f1210;
            --color-bg-secondary: #171c18;
            --color-bg-tertiary: #1f2620;

            --color-text-primary: #e8e6dd;
            --color-text-secondary: #b8c0ab;
            --color-text-muted: #8a9478;

            --color-accent-primary: #3d9a5c;
            --color-accent-secondary: #4db36d;
            --color-accent-tertiary: #5ecc7e;

            --color-highlight: #f59f3d;
            --color-highlight-soft: #e8740c;

            --color-border: #2d3628;

            --color-shadow: rgba(0, 0, 0, 0.3);
            --color-shadow-strong: rgba(0, 0, 0, 0.5);
            
            --font-display: 'Fraunces', Georgia, serif;
            --font-body: 'DM Sans', system-ui, sans-serif;
            
            --space-xs: clamp(0.25rem, 0.5vw, 0.5rem);
            --space-sm: clamp(0.5rem, 1vw, 0.75rem);
            --space-md: clamp(1rem, 2vw, 1.5rem);
            --space-lg: clamp(1.5rem, 3vw, 2.5rem);
            --space-xl: clamp(2rem, 5vw, 4rem);
            --space-2xl: clamp(3rem, 8vw, 6rem);
            
            --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
            --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
            --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
            --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
            --text-xl: clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem);
            --text-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
            --text-3xl: clamp(1.875rem, 1.4rem + 2.5vw, 3rem);
            --text-4xl: clamp(2.25rem, 1.6rem + 3.5vw, 4rem);
            
            --radius-sm: 4px;
            --radius-md: 8px;
            --radius-lg: 16px;
            
            --transition-fast: 150ms ease;
            --transition-base: 250ms ease;
            --transition-slow: 400ms ease;
            
            --max-width-content: 720px;
            --max-width-wide: 1200px;
        }

        

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

        html {
            scroll-behavior: smooth;
            -webkit-text-size-adjust: 100%;
        }

        body {
            font-family: var(--font-body);
            font-size: var(--text-base);
            line-height: 1.7;
            color: var(--color-text-primary);
            background-color: var(--color-bg-primary);
            background-image: 
                radial-gradient(ellipse at 0% 0%, var(--color-accent-primary) 0%, transparent 50%),
                radial-gradient(ellipse at 100% 100%, var(--color-accent-secondary) 0%, transparent 40%);
            background-attachment: fixed;
            background-size: 100% 100%;
            min-height: 100vh;
        }

        body::before {
            content: '';
            position: fixed;
            inset: 0;
            background: var(--color-bg-primary);
            opacity: 0.97;
            z-index: -1;
        }

        ::selection {
            background-color: var(--color-accent-primary);
            color: var(--color-bg-primary);
        }

        :focus-visible {
            outline: 3px solid var(--color-highlight);
            outline-offset: 3px;
        }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 100;
            background: linear-gradient(to bottom, var(--color-bg-primary) 0%, var(--color-bg-primary) 70%, transparent 100%);
            padding: var(--space-md) 0;
            pointer-events: none;
        }

        main {
            max-width: var(--max-width-content);
            margin: 0 auto;
            padding: var(--space-lg) var(--space-md) var(--space-2xl);
        }

        footer {
            border-top: 1px solid var(--color-border);
            padding: var(--space-xl) var(--space-md);
            margin-top: var(--space-2xl);
            background: var(--color-bg-secondary);
        }

        /* Typography Hierarchy */
        h1, h2, h3, h4, h5, h6 {
            font-family: var(--font-display);
            font-weight: 700;
            line-height: 1.2;
            color: var(--color-text-primary);
            text-wrap: balance;
        }

        h1 {
            font-size: var(--text-4xl);
            font-weight: 800;
            letter-spacing: -0.03em;
            margin-bottom: var(--space-lg);
            background: linear-gradient(135deg, var(--color-text-primary) 0%, var(--color-accent-primary) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        
            h1 {
                background: linear-gradient(135deg, var(--color-text-primary) 0%, var(--color-accent-tertiary) 100%);
                -webkit-background-clip: text;
                background-clip: text;
            }
        

        h2 {
            font-size: var(--text-3xl);
            margin-top: var(--space-2xl);
            margin-bottom: var(--space-lg);
            padding-top: var(--space-lg);
            border-top: 3px solid var(--color-accent-primary);
            position: relative;
        }

        h2::before {
            content: '';
            position: absolute;
            top: -3px;
            left: 0;
            width: 60px;
            height: 3px;
            background: var(--color-highlight);
        }

        h3 {
            font-size: var(--text-2xl);
            margin-top: var(--space-xl);
            margin-bottom: var(--space-md);
            color: var(--color-accent-primary);
        }

     
            h3 {
                color: var(--color-accent-tertiary);
            }
        

        h4 {
            font-size: var(--text-xl);
            margin-top: var(--space-lg);
            margin-bottom: var(--space-sm);
        }

        p {
            margin-bottom: var(--space-md);
            color: var(--color-text-secondary);
        }

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

        /* Lead paragraph after h1 */
        h1 + p {
            font-size: var(--text-lg);
            color: var(--color-text-muted);
            font-style: italic;
            font-family: var(--font-display);
            font-weight: 500;
            line-height: 1.6;
            margin-bottom: var(--space-xl);
        }

        strong {
            font-weight: 700;
            color: var(--color-text-primary);
        }

        em {
            font-style: italic;
            font-family: var(--font-display);
            font-weight: 500;
        }

        a {
            color: var(--color-accent-primary);
            text-decoration: underline;
            text-decoration-thickness: 2px;
            text-underline-offset: 3px;
            transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
        }

        a:hover {
            color: var(--color-highlight);
            text-decoration-color: var(--color-highlight-soft);
        }

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

        /* Lists */
        ul, ol {
            margin: var(--space-md) 0 var(--space-lg);
            padding-left: var(--space-lg);
        }

        li {
            margin-bottom: var(--space-sm);
            color: var(--color-text-secondary);
            padding-left: var(--space-xs);
        }

        li::marker {
            color: var(--color-accent-primary);
            font-weight: 700;
        }

     
            li::marker {
                color: var(--color-accent-tertiary);
            }
        

        ul li {
            list-style-type: square;
        }

        ol {
            counter-reset: list-counter;
        }

        ol li {
            counter-increment: list-counter;
        }

        /* Nested lists */
        li > ul, li > ol {
            margin-top: var(--space-sm);
            margin-bottom: var(--space-sm);
        }

        /* Blockquote */
        blockquote {
            margin: var(--space-xl) 0;
            padding: var(--space-lg);
            background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-tertiary) 100%);
            border-left: 4px solid var(--color-accent-primary);
            border-radius: 0 var(--radius-md) var(--radius-md) 0;
            position: relative;
            overflow: hidden;
        }

        blockquote::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 100px;
            height: 100px;
            background: radial-gradient(circle at top right, var(--color-accent-primary), transparent 70%);
            opacity: 0.1;
        }

        blockquote p {
            font-family: var(--font-display);
            font-style: italic;
            font-size: var(--text-lg);
            color: var(--color-text-primary);
            margin: 0;
        }

        blockquote cite {
            display: block;
            margin-top: var(--space-md);
            font-family: var(--font-body);
            font-style: normal;
            font-size: var(--text-sm);
            color: var(--color-text-muted);
        }

        blockquote cite::before {
            content: '— ';
        }

        /* Figures and Images */
        figure {
            margin: var(--space-xl) 0;
            position: relative;
        }

        figure img,
        .hero-image,
        .article-image {
            width: 100%;
            height: auto;
            border-radius: var(--radius-lg);
            box-shadow: 
                0 4px 6px var(--color-shadow),
                0 12px 24px var(--color-shadow-strong);
            transition: transform var(--transition-slow), box-shadow var(--transition-slow);
        }

        figure:hover img,
        .hero-image:hover,
        .article-image:hover {
            transform: translateY(-4px);
            box-shadow: 
                0 8px 12px var(--color-shadow),
                0 24px 48px var(--color-shadow-strong);
        }

        .hero-image {
            margin: var(--space-lg) 0 var(--space-xl);
            aspect-ratio: 16 / 9;
            object-fit: cover;
            border: 1px solid var(--color-border);
        }

        .article-image {
            margin: var(--space-md) 0;
            border: 1px solid var(--color-border);
        }

        figcaption {
            margin-top: var(--space-sm);
            font-size: var(--text-sm);
            color: var(--color-text-muted);
            text-align: center;
            font-style: italic;
        }

        /* Table of Contents styling */
        nav[aria-label="Inhoudsopgave"] {
            background: var(--color-bg-secondary);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            padding: var(--space-lg);
            margin: var(--space-xl) 0;
        }

        nav[aria-label="Inhoudsopgave"] ol {
            margin: 0;
            padding-left: var(--space-md);
        }

        nav[aria-label="Inhoudsopgave"] li {
            margin-bottom: var(--space-xs);
        }

        nav[aria-label="Inhoudsopgave"] a {
            text-decoration: none;
            color: var(--color-text-secondary);
            transition: color var(--transition-fast), padding-left var(--transition-fast);
            display: inline-block;
        }

        nav[aria-label="Inhoudsopgave"] a:hover {
            color: var(--color-accent-primary);
            padding-left: var(--space-xs);
        }

        /* Code and technical elements */
        code {
            font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
            font-size: 0.9em;
            background: var(--color-bg-tertiary);
            padding: 0.15em 0.4em;
            border-radius: var(--radius-sm);
            border: 1px solid var(--color-border);
        }

        pre {
            background: var(--color-bg-tertiary);
            padding: var(--space-md);
            border-radius: var(--radius-md);
            overflow-x: auto;
            border: 1px solid var(--color-border);
            margin: var(--space-lg) 0;
        }

        pre code {
            background: none;
            padding: 0;
            border: none;
        }

        /* Horizontal rule */
        hr {
            border: none;
            height: 3px;
            background: linear-gradient(90deg, var(--color-accent-primary), var(--color-highlight), var(--color-accent-secondary));
            margin: var(--space-2xl) 0;
            border-radius: 2px;
        }

        /* Tables */
        table {
            width: 100%;
            border-collapse: collapse;
            margin: var(--space-lg) 0;
            font-size: var(--text-sm);
        }

        th, td {
            padding: var(--space-sm) var(--space-md);
            text-align: left;
            border-bottom: 1px solid var(--color-border);
        }

        th {
            background: var(--color-bg-secondary);
            font-weight: 700;
            color: var(--color-text-primary);
        }

        tr:hover td {
            background: var(--color-bg-secondary);
        }

        /* FAQ Section styling */
        h2 + p strong:first-child,
        h3 + p strong:first-child {
            color: var(--color-accent-primary);
        }

   
            h2 + p strong:first-child,
            h3 + p strong:first-child {
                color: var(--color-accent-tertiary);
            }
        

        /* Accent box for important information */
        aside, .info-box {
            background: linear-gradient(135deg, var(--color-accent-primary) 0%, var(--color-accent-secondary) 100%);
            color: var(--color-bg-primary);
            padding: var(--space-lg);
            border-radius: var(--radius-lg);
            margin: var(--space-xl) 0;
        }

        aside p, .info-box p {
            color: inherit;
            opacity: 0.95;
        }

        aside strong, .info-box strong {
            color: inherit;
        }

        /* Print styles */
        @media print {
            body {
                background: white;
                color: black;
            }
            
            header, footer {
                display: none;
            }
            
            main {
                max-width: none;
                padding: 0;
            }
            
            h1, h2, h3 {
                break-after: avoid;
            }
            
            figure, blockquote {
                break-inside: avoid;
            }
        }

        /* Responsive adjustments */
        @media (max-width: 600px) {
            h2 {
                padding-top: var(--space-md);
            }
            
            blockquote {
                padding: var(--space-md);
                margin-left: calc(var(--space-md) * -1);
                margin-right: calc(var(--space-md) * -1);
                border-radius: 0;
            }
            
            figure {
                margin-left: calc(var(--space-md) * -1);
                margin-right: calc(var(--space-md) * -1);
            }
            
            figure img,
            .hero-image,
            .article-image {
                border-radius: 0;
            }
        }

        /* Large screens - wider content area */
        @media (min-width: 1200px) {
            main {
                max-width: var(--max-width-content);
            }
            
            figure {
                margin-left: calc((var(--max-width-wide) - var(--max-width-content)) / -4);
                margin-right: calc((var(--max-width-wide) - var(--max-width-content)) / -4);
            }
        }

        /* Animation for elements entering viewport */
        @media (prefers-reduced-motion: no-preference) {
            h2, h3, figure, blockquote {
                animation: fadeSlideIn 0.6s ease backwards;
            }
            
            @keyframes fadeSlideIn {
                from {
                    opacity: 0;
                    transform: translateY(20px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
        }

        /* Live indicator animation - thematic element */
        .live-indicator {
            display: inline-flex;
            align-items: center;
            gap: var(--space-xs);
            font-size: var(--text-xs);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--color-highlight);
        }

        .live-indicator::before {
            content: '';
            width: 8px;
            height: 8px;
            background: var(--color-highlight);
            border-radius: 50%;
            animation: pulse 1.5s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% {
                opacity: 1;
                transform: scale(1);
            }
            50% {
                opacity: 0.5;
                transform: scale(1.2);
            }
        }

        /* Skip link for accessibility */
        .skip-link {
            position: absolute;
            top: -100px;
            left: var(--space-md);
            background: var(--color-accent-primary);
            color: var(--color-bg-primary);
            padding: var(--space-sm) var(--space-md);
            border-radius: var(--radius-md);
            z-index: 1000;
            transition: top var(--transition-fast);
        }

        .skip-link:focus {
            top: var(--space-md);
        }

        /* Images Styles for Live Wedden op Voetbal Article */

.hero-image {
    width: 100%;
    margin: var(--space-lg, 1.5rem) 0 var(--space-xl, 2rem);
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-lg, 16px);
    border: 1px solid var(--color-border, #d4d1c4);
    box-shadow: 
        0 4px 6px var(--color-shadow, rgba(26, 31, 22, 0.08)),
        0 12px 24px var(--color-shadow-strong, rgba(26, 31, 22, 0.15));
    transition: transform 400ms ease, box-shadow 400ms ease;
}

.hero-image:hover {
    transform: translateY(-4px);
    box-shadow: 
        0 8px 12px var(--color-shadow, rgba(26, 31, 22, 0.08)),
        0 24px 48px var(--color-shadow-strong, rgba(26, 31, 22, 0.15));
}

.article-image {
    width: 100%;
    margin: var(--space-lg, 1.5rem) 0;
    height: auto;
    border-radius: var(--radius-lg, 16px);
    border: 1px solid var(--color-border, #d4d1c4);
    box-shadow: 
        0 4px 6px var(--color-shadow, rgba(26, 31, 22, 0.08)),
        0 12px 24px var(--color-shadow-strong, rgba(26, 31, 22, 0.15));
    transition: transform 400ms ease, box-shadow 400ms ease;
}

.article-image:hover {
    transform: translateY(-4px);
    box-shadow: 
        0 8px 12px var(--color-shadow, rgba(26, 31, 22, 0.08)),
        0 24px 48px var(--color-shadow-strong, rgba(26, 31, 22, 0.15));
}

/* Footer Content */
.footer-content {
    max-width: 720px;
    margin: 0 auto;
}

.footer-content p {
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-muted, #6b7360);
    line-height: 1.6;
}

.footer-content strong {
    color: var(--color-text-primary, #1a1f16);
}

.footer-content a {
    color: var(--color-accent-primary, #1e5631);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.footer-content a:hover {
    color: var(--color-highlight, #e8740c);
}

/* Dark mode adjustments */

    .hero-image,
    .article-image {
        border-color: var(--color-border, #2d3628);
    }
    
    .footer-content p {
        color: var(--color-text-muted, #8a9478);
    }
    
    .footer-content strong {
        color: var(--color-text-primary, #e8e6dd);
    }
    
    .footer-content a {
        color: var(--color-accent-tertiary, #5ecc7e);
    }


/* Responsive adjustments */
@media (max-width: 600px) {
    .hero-image,
    .article-image {
        border-radius: 0;
        margin-left: calc(var(--space-md, 1rem) * -1);
        margin-right: calc(var(--space-md, 1rem) * -1);
        width: calc(100% + var(--space-md, 1rem) * 2);
    }
}

/* =========================================
   CYBER-BLADE SIDEBAR MENU (Desktop > 1024px)
   ========================================= */

@media (min-width: 1024px) {

    /* 1. The Main Container - The "Blade" Handle */
    .site-header {
        position: fixed;
        top: 50%;
        left: 0;
        transform: translateY(-50%); /* Center vertically on screen */
        width: 60px; /* Collapsed width - skinny! */
        height: auto;
        min-height: 400px; /* Height of the blade */
        padding: 0; /* Remove default padding */
        
        background: rgba(15, 18, 16, 0.9); /* Dark semi-transparent bg */
        backdrop-filter: blur(10px); /* Glass effect */
        
        /* Neon Edge on the right */
        border-right: 3px solid var(--color-accent-primary);
        box-shadow: 
            5px 0 25px -5px var(--color-accent-primary), /* Green glow */
            inset -2px 0 10px rgba(0,0,0,0.5);
            
        border-radius: 0 30px 30px 0; /* Rounded edge on right */
        z-index: 1000;
        overflow: hidden; /* Hide content when closed */
        
        /* The springy animation */
        transition: width 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), background 0.3s ease;
        pointer-events: auto;
    }

    /* The visual cue "MENU" text when collapsed */
    .site-header::after {
        content: 'MENU';
        position: absolute;
        top: 50%;
        left: 50%;
        /* Rotate text 90deg to sit vertically */
        transform: translate(-50%, -50%) rotate(-90deg); 
        font-family: var(--font-display);
        font-weight: 800;
        letter-spacing: 6px;
        color: var(--color-accent-primary);
        text-shadow: 0 0 10px var(--color-accent-primary);
        pointer-events: none;
        white-space: nowrap;
        transition: opacity 0.3s ease, transform 0.5s ease;
    }

    /* 2. Hover State - UNLEASH THE BLADE */
    .site-header:hover {
        width: 320px; /* Expanded width */
        background: var(--color-bg-secondary);
        border-right-color: var(--color-highlight); /* Change neon color on hover */
        box-shadow: 
            10px 0 40px -10px var(--color-highlight), /* Orange glow */
            inset -2px 0 10px rgba(0,0,0,0.5);
    }

    /* Hide the vertical "MENU" text on hover */
    .site-header:hover::after {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(-90deg) scale(0.8);
    }

    /* 3. Positioning the Navigation Links */
    .top-navigation-bar {
        height: 100%;
        display: flex;
        align-items: center;
    }

    .site-nav--desktop {
        width: 100%;
        padding: 40px 0 40px 80px; /* Push links past the collapsed area */
        opacity: 0; /* Hidden initially */
        transform: translateX(-30px); /* Start slightly to the left */
        transition: all 0.4s ease 0s; /* Quick hide on mouseout */
    }

    /* Show links with delay on hover */
    .site-header:hover .site-nav--desktop {
        opacity: 1;
        transform: translateX(0);
        transition-delay: 0.2s; /* Wait for blade to expand first */
    }

    .site-nav--desktop .menu-desktop {
        display: flex;
        flex-direction: column; /* Stack links vertically */
        gap: 25px;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    /* 4. Link Styling */
    .site-nav--desktop a {
        font-family: var(--font-display);
        font-size: var(--text-lg);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: var(--color-text-primary);
        text-decoration: none;
        white-space: nowrap;
        position: relative;
        display: inline-block;
        transition: color 0.3s ease;
    }

    /* Cyber-glitch hover effect for links */
    .site-nav--desktop a::before {
        content: '';
        position: absolute;
        top: 50%;
        left: -20px;
        width: 10px;
        height: 10px;
        background: var(--color-highlight);
        transform: translateY(-50%) scale(0);
        border-radius: 50%;
        box-shadow: 0 0 10px var(--color-highlight);
        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        opacity: 0;
    }

    .site-nav--desktop a:hover {
        color: var(--color-highlight);
        text-shadow: 0 0 15px var(--color-highlight-soft);
        transform: translateX(10px); /* Move link slightly right */
    }

    .site-nav--desktop a:hover::before {
        transform: translateY(-50%) scale(1);
        opacity: 1;
    }
    /* Remove green square bullets from the desktop menu */
    .site-nav--desktop .menu-desktop li {
        list-style: none;
        list-style-type: none;
    }
}

/* =========================================
   MOBILE MENU - HOLOGRAPHIC HUD (FINAL WORKING VERSION)
   ========================================= */

@media (max-width: 1023px) {

    /* --- 1. BURGER BUTTON STYLES --- */
    .mobile-controls {
        display: block;
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 2001;
        pointer-events: auto;
    }

    .burger {
        width: 50px;
        height: 50px;
        background: rgba(15, 18, 16, 0.8);
        border: 1px solid var(--color-border);
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 6px;
        cursor: pointer;
        backdrop-filter: blur(4px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        transition: all 0.3s ease;
    }

    .burger span {
        display: block;
        width: 24px;
        height: 2px;
        background-color: var(--color-text-primary);
        border-radius: 2px;
        transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    /* Active Burger State (X shape) */
    .burger.is-active {
        border-color: var(--color-highlight);
        box-shadow: 0 0 15px var(--color-highlight-soft);
    }

    .burger.is-active span:nth-child(1) { transform: translateY(8px) rotate(45deg); background-color: var(--color-highlight); }
    .burger.is-active span:nth-child(2) { opacity: 0; transform: translateX(-10px); }
    .burger.is-active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); background-color: var(--color-highlight); }


    /* --- 2. MENU CONTAINER (Dark Glass & Grid) --- */
    #mobile-menu {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100vh;
        
        background-color: var(--color-bg-primary);
        
        background-size: 40px 40px;
        
        z-index: 2000;
        
        /* Start Hidden */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    #mobile-menu .mobile-menu__inner {
        width: 100%;
        max-width: 100%;
        padding: 20px;
    }

    /* OPEN STATE (Force Visibility) */
    #mobile-menu.is-open {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }


    /* --- 3. LINKS & ANIMATION --- */
    #mobile-menu ul {
        list-style: none;
        margin: 0;
        padding: 0;
        text-align: center;
    }

    /* List Items: Start slightly down and invisible */
    #mobile-menu li {
        display: block;
        opacity: 0; 
        transform: translateY(30px);
        margin-bottom: 25px;
        transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    /* List Items: When open, become visible and float up */
    #mobile-menu.is-open li {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    /* Stagger Delays (The "One by One" effect) */
    #mobile-menu.is-open li:nth-child(1) { transition-delay: 0.1s; }
    #mobile-menu.is-open li:nth-child(2) { transition-delay: 0.15s; }
    #mobile-menu.is-open li:nth-child(3) { transition-delay: 0.2s; }
    #mobile-menu.is-open li:nth-child(4) { transition-delay: 0.25s; }
    #mobile-menu.is-open li:nth-child(5) { transition-delay: 0.3s; }
    #mobile-menu.is-open li:nth-child(6) { transition-delay: 0.35s; }


    /* --- 4. TYPOGRAPHY --- */
    #mobile-menu a {
        font-family: var(--font-display);
        font-size: 2.5rem; /* Big text */
        font-weight: 800;
        color: var(--color-text-primary); /* Ensure visible color */
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: -0.02em;
        position: relative;
        display: inline-block;
        transition: color 0.3s ease;
    }

    #mobile-menu a:hover {
        color: var(--color-highlight);
    }
    
    /* Cleanup old overlay if present */
    .mobile-menu-overlay { display: none !important; }
}

/* =========================================
   MOBILE MENU FONT SIZE FIX
   ========================================= */

@media (max-width: 1023px) {
    /* Делаем шрифт меньше (было 2.5rem, ставим 1.5rem) */
    #mobile-menu a {
        font-size: 1.5rem !important; /* ~24px */
        letter-spacing: 0.05em; /* Чуть добавим воздуха буквам */
    }

    /* Уменьшаем расстояние между пунктами, чтобы не было дыр */
    #mobile-menu li {
        margin-bottom: 15px !important; 
    }
}

/* =========================================
   NEW 4-COLUMN FOOTER STYLES
   ========================================= */

.site-footer {
    background-color: #0a0d0b; /* Very dark background */
    border-top: 1px solid var(--color-border);
    padding: 60px 20px 20px;
    margin-top: 60px;
    font-size: 0.9rem;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    /* Create 4 equal columns on desktop */
    grid-template-columns: repeat(4, 1fr); 
    gap: 40px;
    padding-bottom: 60px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Column Headings - Gold/Yellow Style */
.footer-heading {
    font-family: var(--font-display);
    color: #e8bd0c; /* Gold color like reference */
    font-size: 1.25rem;
    margin-bottom: 24px;
    font-weight: 700;
    text-transform: capitalize;
}

/* Lists Reset */
.footer-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.footer-list li {
    margin-bottom: 14px;
    color: #b0b0b0; /* Light grey text */
    line-height: 1.6;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    list-style: none !important;
}

/* Links in footer */
.footer-list a {
    color: #e8e6dd;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-list a:hover {
    color: var(--color-highlight); /* Orange hover */
    text-decoration: underline;
}

/* Specific Style for "Warnings" Column (Red accents) */
.warning-list li span {
    color: #ff4d4d; /* Red warning mark */
    font-weight: bold;
}

.warning-list li {
    font-size: 0.85rem;
}

.warning-list a {
    color: #ff4d4d; /* Red links for help */
    font-weight: 600;
}

/* Copyright Bar */
.footer-copyright {
    text-align: center;
    padding-top: 30px;
    color: #666;
    font-size: 0.8rem;
}

/* Responsive: Stack on Mobile */
@media (max-width: 900px) {
    .footer-container {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
    }
}

@media (max-width: 600px) {
    .footer-container {
        grid-template-columns: 1fr; /* 1 column on mobile */
        gap: 40px;
        text-align: center;
    }
    
    .footer-list li {
        justify-content: center; /* Center align list items on mobile */
    }
}

/* =========================================
   404 ERROR PAGE STYLES - VAR THEME
   ========================================= */

.error-404-container {
    min-height: 70vh; /* Occupy most of the screen */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: radial-gradient(circle at center, rgba(30, 86, 49, 0.15) 0%, transparent 70%);
    padding: 40px 20px;
}

.error-content {
    max-width: 600px;
    position: relative;
    z-index: 1;
}

/* 1. Glitchy 404 Number */
.error-code {
    font-family: var(--font-display);
    font-size: clamp(6rem, 15vw, 12rem); /* Massive text */
    font-weight: 800;
    line-height: 1;
    margin: 0;
    color: var(--color-bg-primary); /* Dark text */
    /* Stroke effect for the number */
    -webkit-text-stroke: 2px var(--color-highlight);
    position: relative;
    display: inline-block;
}

/* The Glitch Effect layers */
.error-code::before,
.error-code::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-bg-primary);
}

.error-code::before {
    left: 2px;
    text-shadow: -1px 0 #ff00c1;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim 5s infinite linear alternate-reverse;
}

.error-code::after {
    left: -2px;
    text-shadow: -1px 0 #00fff9;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim2 5s infinite linear alternate-reverse;
}

/* 2. Text Content */
.error-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    color: var(--color-highlight); /* Orange alert color */
    margin-top: -20px;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.error-message {
    font-size: 1.2rem;
    color: var(--color-text-secondary);
    margin-bottom: 40px;
}

/* 3. Search Form Styling within 404 */
.error-search {
    margin-bottom: 40px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.error-search input[type="search"] {
    width: 100%;
    padding: 15px 20px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    border-radius: 30px;
    outline: none;
    transition: border-color 0.3s ease;
}

.error-search input[type="search"]:focus {
    border-color: var(--color-accent-primary);
}

/* 4. Button Style */
.btn-home {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 40px;
    background: var(--color-accent-primary);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(30, 86, 49, 0.4);
}

.btn-home:hover {
    background: var(--color-highlight);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(232, 116, 12, 0.4);
    color: #fff;
    text-decoration: none;
}

/* Glitch Animations */
@keyframes glitch-anim {
    0% { clip: rect(31px, 9999px, 94px, 0); transform: skew(0.85deg); }
    5% { clip: rect(70px, 9999px, 71px, 0); transform: skew(0.85deg); }
    10% { clip: rect(29px, 9999px, 83px, 0); transform: skew(0.06deg); }
    15% { clip: rect(10px, 9999px, 92px, 0); transform: skew(0.24deg); }
    20% { clip: rect(6px, 9999px, 5px, 0); transform: skew(0.08deg); }
    25% { clip: rect(50px, 9999px, 99px, 0); transform: skew(0.79deg); }
    30% { clip: rect(93px, 9999px, 20px, 0); transform: skew(0.27deg); }
    35% { clip: rect(11px, 9999px, 23px, 0); transform: skew(0.12deg); }
    40% { clip: rect(73px, 9999px, 4px, 0); transform: skew(0.88deg); }
    45% { clip: rect(65px, 9999px, 7px, 0); transform: skew(0.66deg); }
    50% { clip: rect(62px, 9999px, 2px, 0); transform: skew(0.21deg); }
    55% { clip: rect(79px, 9999px, 46px, 0); transform: skew(0.03deg); }
    60% { clip: rect(25px, 9999px, 5px, 0); transform: skew(0.84deg); }
    65% { clip: rect(92px, 9999px, 51px, 0); transform: skew(0.13deg); }
    70% { clip: rect(8px, 9999px, 49px, 0); transform: skew(0.22deg); }
    75% { clip: rect(78px, 9999px, 81px, 0); transform: skew(0.97deg); }
    80% { clip: rect(27px, 9999px, 71px, 0); transform: skew(0.25deg); }
    85% { clip: rect(81px, 9999px, 99px, 0); transform: skew(0.04deg); }
    90% { clip: rect(48px, 9999px, 16px, 0); transform: skew(0.64deg); }
    95% { clip: rect(3px, 9999px, 12px, 0); transform: skew(0.25deg); }
    100% { clip: rect(44px, 9999px, 59px, 0); transform: skew(0.93deg); }
}

@keyframes glitch-anim2 {
    0% { clip: rect(65px, 9999px, 100px, 0); transform: skew(0.5deg); }
    5% { clip: rect(56px, 9999px, 90px, 0); transform: skew(0.5deg); }
    10% { clip: rect(3px, 9999px, 80px, 0); transform: skew(0.5deg); }
    /* (Упрощенная версия для второй тени) */
    100% { clip: rect(20px, 9999px, 60px, 0); transform: skew(0.5deg); }
}

/* Hide the search submit button completely */
.search-submit {
    display: none;
}

#crumbs {
    padding: 10px 0;
    margin-bottom: 20px;
    font-size: 14px;
    color: #666;
    text-align: center; 
}

#crumbs a {
    text-decoration: none;
    color: #0073aa; 
}

#crumbs a:hover {
    text-decoration: underline;
}

#crumbs .current {
    font-weight: bold;
    color: rgb(255, 255, 255);
}

.articles-main{
    max-width: 900px;
}