:root {
            /* Color Palette - Inspired by horse racing, betting tables, and Dutch sports */
            --color-primary: #3d8b5a;       /* Lighter green for visibility on dark */
            --color-primary-light: #4ea96f;
            --color-primary-dark: #2d6b44;  /* Used for header backgrounds */
            
            --color-accent: #dbb84a;        /* Gold */
            --color-accent-light: #e8ca6d;
            --color-accent-dark: #c9a227;
            
            --color-secondary: #a0522d;
            --color-secondary-light: #b0633e;
            
            /* Text Colors (Light text for dark theme) */
            --color-text: #e8e6e1;          /* Main text (off-white) */
            --color-text-secondary: #b8b5ad; /* Subtitles (light grey) */
            --color-text-muted: #8a8780;    /* Muted text */
            --color-text-inverse: #1a1a1a;  /* Dark text (for buttons/badges) */
            
            /* Background Colors (Dark) */
            --color-bg: #121212;            /* Main page background */
            --color-bg-alt: #1e1e1e;        /* Alternating sections */
            --color-bg-card: #252525;       /* Card/Menu background */
            --color-bg-dark: #0a0a0a;       /* Footer/Deep background */
            
            /* Semantic Colors */
            --color-success: #4caf50;
            --color-warning: #ffb74d;
            --color-info: #42a5f5;
            
            /* Shadows (Adjusted for dark mode) */
            --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
            --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
            --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
            --shadow-accent: 0 4px 16px rgba(219, 184, 74, 0.15);
            
            /* Typography */
            --font-heading: 'Georgia', 'Times New Roman', serif;
            --font-body: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
            --font-mono: 'Consolas', 'Monaco', monospace;
            
            /* Spacing */
            --space-xs: 0.25rem;
            --space-sm: 0.5rem;
            --space-md: 1rem;
            --space-lg: 1.5rem;
            --space-xl: 2rem;
            --space-2xl: 3rem;
            --space-3xl: 4rem;
            
            /* Layout */
            --content-width: 72ch;
            --content-width-wide: 90ch;
            
            /* Transitions */
            --transition-fast: 150ms ease;
            --transition-base: 250ms ease;
            --transition-slow: 400ms ease;
            
            /* Borders */
            --radius-sm: 4px;
            --radius-md: 8px;
            --radius-lg: 12px;
        }

        

        /* Reset & Base */
        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

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

        body {
            font-family: var(--font-body);
            font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
            line-height: 1.7;
            color: var(--color-text);
            background: var(--color-bg);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* Focus Styles for Accessibility */
        :focus {
            outline: 3px solid var(--color-accent);
            outline-offset: 2px;
        }

        :focus:not(:focus-visible) {
            outline: none;
        }

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

        /* Selection */
        ::selection {
            background: var(--color-accent);
            color: var(--color-primary-dark);
        }

        /* Header */
        .site-header {
            background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
            min-height: 4px;
        }

        /* Main Content */
        main {
            flex: 1;
            width: 100%;
            max-width: var(--content-width-wide);
            margin: 0 auto;
            padding: var(--space-xl) var(--space-md);
        }

        @media (min-width: 768px) {
            main {
                padding: var(--space-3xl) var(--space-xl);
            }
        }

        /* Article Styling */
        article {
            max-width: var(--content-width);
            margin: 0 auto;
        }

        /* Headings */
        h1, h2, h3, h4, h5, h6 {
            font-family: var(--font-heading);
            font-weight: 700;
            line-height: 1.25;
            color: var(--color-text);
            letter-spacing: -0.02em;
        }

        h1 {
            font-size: clamp(2rem, 1.5rem + 2.5vw, 3.25rem);
            margin-bottom: var(--space-lg);
            color: var(--color-primary-dark);
            position: relative;
            padding-bottom: var(--space-lg);
        }

       

        @media (prefers-color-scheme: dark) {
            h1 {
                color: var(--color-accent);
            }
        }

        h2 {
            font-size: clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem);
            margin-top: var(--space-3xl);
            margin-bottom: var(--space-lg);
            color: var(--color-primary);
            padding-left: var(--space-md);
            border-left: 4px solid var(--color-accent);
        }

        @media (prefers-color-scheme: dark) {
            h2 {
                color: var(--color-primary-light);
            }
        }

        h3 {
            font-size: clamp(1.25rem, 1.1rem + 0.75vw, 1.625rem);
            margin-top: var(--space-2xl);
            margin-bottom: var(--space-md);
            color: var(--color-secondary);
        }

        @media (prefers-color-scheme: dark) {
            h3 {
                color: var(--color-secondary-light);
            }
        }

        /* Paragraphs */
        p {
            margin-bottom: var(--space-lg);
            text-align: left;
            hyphens: auto;
        }

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

        /* Links */
        a {
            color: var(--color-primary);
            text-decoration: underline;
            text-decoration-thickness: 1px;
            text-underline-offset: 3px;
            transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
        }

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

        @media (prefers-color-scheme: dark) {
            a {
                color: var(--color-accent);
            }
            a:hover {
                color: var(--color-accent-light);
            }
        }

        /* Strong & Emphasis */
        strong {
            font-weight: 700;
            color: var(--color-text);
        }

        em {
            font-style: italic;
            color: var(--color-text-secondary);
        }

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

        li {
            margin-bottom: var(--space-sm);
            padding-left: var(--space-sm);
        }

       

        /* 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) var(--space-xl);
            background: linear-gradient(135deg, var(--color-bg-alt) 0%, var(--color-bg-card) 100%);
            border-left: 4px solid var(--color-accent);
            border-radius: 0 var(--radius-md) var(--radius-md) 0;
            font-style: italic;
            color: var(--color-text-secondary);
            box-shadow: var(--shadow-sm);
            position: relative;
        }

        blockquote::before {
            content: '\201C';
            position: absolute;
            top: -10px;
            left: 15px;
            font-size: 4rem;
            font-family: var(--font-heading);
            color: var(--color-accent);
            opacity: 0.3;
            line-height: 1;
        }

        blockquote p {
            margin-bottom: var(--space-sm);
        }

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

        /* Figures & Images */
        figure {
            margin: var(--space-2xl) 0;
            padding: 0;
        }

        figure img,
        .hero-image,
        .article-image {
            width: 100%;
            height: auto;
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-md);
            transition: transform var(--transition-base), box-shadow var(--transition-base);
        }

        figure img:hover,
        .article-image:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }

        .hero-image {
            margin: 0 calc(-1 * var(--space-md)) var(--space-2xl);
            width: calc(100% + 2 * var(--space-md));
            max-width: none;
            border-radius: 0;
            box-shadow: var(--shadow-lg);
        }

        @media (min-width: 768px) {
            .hero-image {
                margin: 0 0 var(--space-3xl);
                width: 100%;
                border-radius: var(--radius-lg);
            }
        }

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

        /* Tables */
        table {
            width: 100%;
            margin: var(--space-xl) 0;
            border-collapse: collapse;
            font-size: 0.9375rem;
            box-shadow: var(--shadow-sm);
            border-radius: var(--radius-md);
            overflow: hidden;
        }

        thead {
            background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
            color: var(--color-text-inverse);
        }

        th {
            padding: var(--space-md) var(--space-lg);
            text-align: left;
            font-weight: 600;
            font-family: var(--font-heading);
        }

        td {
            padding: var(--space-md) var(--space-lg);
            border-bottom: 1px solid var(--color-bg-alt);
        }

        tbody tr {
            background: var(--color-bg-card);
            transition: background var(--transition-fast);
        }

        tbody tr:hover {
            background: var(--color-bg-alt);
        }

        tbody tr:last-child td {
            border-bottom: none;
        }

        /* Code */
        code {
            font-family: var(--font-mono);
            font-size: 0.875em;
            padding: var(--space-xs) var(--space-sm);
            background: var(--color-bg-alt);
            border-radius: var(--radius-sm);
            color: var(--color-secondary);
        }

        pre {
            margin: var(--space-xl) 0;
            padding: var(--space-lg);
            background: var(--color-bg-dark);
            border-radius: var(--radius-md);
            overflow-x: auto;
            box-shadow: var(--shadow-md);
        }

        pre code {
            padding: 0;
            background: none;
            color: var(--color-text-inverse);
            font-size: 0.875rem;
            line-height: 1.6;
        }

        /* Horizontal Rule */
        hr {
            margin: var(--space-3xl) auto;
            border: none;
            height: 2px;
            width: 60%;
            background: linear-gradient(90deg, transparent 0%, var(--color-accent) 50%, transparent 100%);
        }

        /* Special Content Blocks */
        .info-box {
            margin: var(--space-xl) 0;
            padding: var(--space-lg);
            background: linear-gradient(135deg, rgba(21, 101, 192, 0.08) 0%, rgba(21, 101, 192, 0.04) 100%);
            border-left: 4px solid var(--color-info);
            border-radius: 0 var(--radius-md) var(--radius-md) 0;
        }

        .warning-box {
            margin: var(--space-xl) 0;
            padding: var(--space-lg);
            background: linear-gradient(135deg, rgba(201, 162, 39, 0.12) 0%, rgba(201, 162, 39, 0.06) 100%);
            border-left: 4px solid var(--color-warning);
            border-radius: 0 var(--radius-md) var(--radius-md) 0;
        }

        .success-box {
            margin: var(--space-xl) 0;
            padding: var(--space-lg);
            background: linear-gradient(135deg, rgba(46, 125, 50, 0.08) 0%, rgba(46, 125, 50, 0.04) 100%);
            border-left: 4px solid var(--color-success);
            border-radius: 0 var(--radius-md) var(--radius-md) 0;
        }

        /* FAQ Styling */
        details {
            margin: var(--space-md) 0;
            padding: var(--space-lg);
            background: var(--color-bg-card);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-sm);
            transition: box-shadow var(--transition-base);
        }

        details:hover {
            box-shadow: var(--shadow-md);
        }

        details[open] {
            box-shadow: var(--shadow-md);
        }

        summary {
            font-weight: 600;
            color: var(--color-primary);
            cursor: pointer;
            padding: var(--space-sm) 0;
            list-style: none;
            display: flex;
            align-items: center;
            gap: var(--space-sm);
        }

        summary::-webkit-details-marker {
            display: none;
        }

        summary::before {
            content: '\25B6';
            font-size: 0.75em;
            color: var(--color-accent);
            transition: transform var(--transition-fast);
        }

        details[open] summary::before {
            transform: rotate(90deg);
        }

        details > *:not(summary) {
            margin-top: var(--space-md);
        }

        /* Table of Contents */
        nav[aria-label="Inhoudsopgave"] {
            margin: var(--space-2xl) 0;
            padding: var(--space-lg);
            background: var(--color-bg-card);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-sm);
            border: 1px solid var(--color-bg-alt);
        }

        nav[aria-label="Inhoudsopgave"] ul {
            list-style: none;
            padding-left: 0;
            margin-bottom: 0;
        }

        nav[aria-label="Inhoudsopgave"] li {
            padding: var(--space-sm) 0;
            border-bottom: 1px solid var(--color-bg-alt);
        }

        nav[aria-label="Inhoudsopgave"] li:last-child {
            border-bottom: none;
        }

        nav[aria-label="Inhoudsopgave"] a {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            text-decoration: none;
            color: var(--color-text);
            padding: var(--space-xs);
            border-radius: var(--radius-sm);
            transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
        }

        nav[aria-label="Inhoudsopgave"] a::before {
            content: '\2192';
            color: var(--color-accent);
            font-weight: 700;
            opacity: 0;
            transform: translateX(-10px);
            transition: opacity var(--transition-fast), transform var(--transition-fast);
        }

        nav[aria-label="Inhoudsopgave"] a:hover {
            background: var(--color-bg-alt);
            color: var(--color-primary);
        }

        nav[aria-label="Inhoudsopgave"] a:hover::before {
            opacity: 1;
            transform: translateX(0);
        }

        /* Footer */
        footer {
            background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
            min-height: 4px;
            margin-top: auto;
        }

        /* Print Styles */
        @media print {
            body {
                background: white;
                color: black;
                font-size: 11pt;
                line-height: 1.5;
            }

            main {
                max-width: 100%;
                padding: 0;
            }

            h1, h2, h3 {
                page-break-after: avoid;
                color: black;
            }

            h1::after {
                display: none;
            }

            h2 {
                border-left-color: #333;
            }

            a {
                color: black;
                text-decoration: underline;
            }

            figure img,
            .hero-image,
            .article-image {
                box-shadow: none;
                border: 1px solid #ddd;
            }

            blockquote {
                border-left-color: #333;
                background: #f5f5f5;
                box-shadow: none;
            }

            details {
                box-shadow: none;
                border: 1px solid #ddd;
            }
        }

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

            html {
                scroll-behavior: auto;
            }
        }

        /* High Contrast Mode */
        @media (prefers-contrast: high) {
            :root {
                --shadow-sm: none;
                --shadow-md: none;
                --shadow-lg: none;
            }

            h1::after,
            h2 {
                border-width: 3px;
            }

            blockquote,
            details,
            nav[aria-label="Inhoudsopgave"] {
                border: 2px solid currentColor;
            }
        }

        /* Footer Disclaimer Styles */
        footer {
            background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
            padding: var(--space-xl) var(--space-md);
            margin-top: var(--space-3xl);
        }
        
        .footer-disclaimer {
            max-width: var(--content-width);
            margin: 0 auto;
            color: var(--color-text-inverse);
            font-size: 0.875rem;
            line-height: 1.6;
        }
        
        .footer-disclaimer p {
            margin: 0;
        }
        
        .footer-disclaimer a {
            color: var(--color-accent-light);
        }
        
        .footer-disclaimer a:hover {
            color: var(--color-accent);
        }
        
        /* Hero Image Styles */
img.hero-image {
    width: 100%;
    height: auto;
    margin: 0 0 2rem;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(26, 71, 42, 0.16);
    display: block;
}

/* Article Image Styles */
img.article-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 2rem 0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(26, 71, 42, 0.12);
    display: block;
}

/* Hover effect for article images */
img.article-image:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(26, 71, 42, 0.16);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    img.hero-image,
    img.article-image {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    }
    
    img.article-image:hover {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    }
}

/* Print styles */
@media print {
    img.hero-image,
    img.article-image {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}


/* =========================================
   Option 1: Elegant Minimalist Menu (Centered)
   ========================================= */

@media (min-width: 768px) {
    
    /* Container Alignment */
    .top-navigation-bar {
        display: flex;
        justify-content: center; /* CHANGED: Centers the menu items */
        align-items: center;
        width: 100%;
    }

    /* List Layout */
    .site-nav--desktop ul {
        display: flex;
        gap: var(--space-xl); /* Generous spacing between items */
        list-style: none;
        margin: 0;
        padding: 0;
    }

    /* Link Styling */
    .site-nav--desktop a {
        position: relative;
        color: #ffffff;
        font-family: var(--font-heading); /* Using your serif font */
        font-weight: 700;
        font-size: 1.1rem;
        text-decoration: none;
        padding: 5px 0;
        letter-spacing: 0.5px;
        transition: color 0.3s ease;
    }

    /* Hover Color */
    .site-nav--desktop a:hover {
        color: var(--color-accent); /* Gold color on hover */
    }

    /* The Animated Underline */
    .site-nav--desktop a::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 2px;
        bottom: 0;
        left: 0;
        background-color: var(--color-accent);
        
        /* Animation Logic */
        transform: scaleX(0);
        transform-origin: bottom right;
        transition: transform 0.3s ease-out;
    }

    /* Trigger Animation on Hover */
    .site-nav--desktop a:hover::after {
        transform: scaleX(1);
        transform-origin: bottom left;
    }
}

body.home .menu-item-home,
body.home li.current-menu-item.menu-item-home {
  display: none !important;
}

/* =========================================
   Mobile Menu: Premium Slide-out (YOUR DESIGN + FIXED BURGER)
   ========================================= */

@media (max-width: 767px) {
    
    /* 1. CRITICAL FIX: Hide Desktop Menu & Align Right */
    .site-nav--desktop, 
    .menu-desktop {
        display: none !important;
    }

    .top-navigation-bar {
        display: flex !important;
        width: 100% !important;
        justify-content: flex-end !important; 
        align-items: center !important;       
        
        min-height: 70px;  
        padding-right: 25px; 
        box-sizing: border-box;
    }

    .mobile-controls {
        width: auto !important; 
        display: block !important;
        margin-left: auto !important;
    }

    /* 2. BURGER BUTTON FIX (This makes it lines, not dots) */
    .burger {
        width: 35px;        /* Fix width */
        height: 24px;       /* Fix height */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background: transparent;
        border: none;
        padding: 0;
        cursor: pointer;
        z-index: 1001;
    }

    .burger span {
        display: block;
        width: 100%;        /* Stretch full width */
        height: 3px;        /* Visible thickness */
        background-color: #ffffff;
        border-radius: 3px;
        transition: all 0.3s ease;
    }

    /* Burger Animation (X shape) */
    .burger.is-active span:nth-child(1) {
        transform: translateY(10.5px) rotate(45deg);
    }
    .burger.is-active span:nth-child(2) {
        opacity: 0;
    }
    .burger.is-active span:nth-child(3) {
        transform: translateY(-10.5px) rotate(-45deg);
    }

    /* 3. YOUR ORIGINAL MENU STYLES (Restored) */
    
    /* Dark Overlay Backdrop */
    .mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(3px);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease;
        z-index: 998;
    }

    .mobile-menu-overlay.is-active {
        opacity: 1;
        visibility: visible;
    }

    /* The Slide-out Panel */
    .mobile-menu {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 280px;
        background-color: var(--color-bg-dark, #1a1a1a);
        box-shadow: -5px 0 30px rgba(0,0,0,0.3);
        z-index: 999;
        
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        
        display: flex;
        flex-direction: column;
        padding: 80px 30px 30px; /* Added top padding so links don't overlap burger */
    }

    .mobile-menu.is-open {
        transform: translateX(0);
        display: flex !important;
    }

    /* We don't need the close button inside because we have the main burger */
    .mobile-menu__close {
    position: absolute;
    top: 20px;
    right: 25px;
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 2.5rem;
    font-weight: 300;
    cursor: pointer;
    z-index: 1005;
    line-height: 1;
    padding: 5px;
    transition: color 0.3s ease, transform 0.3s ease;
}

/* Add hover effect using the theme's accent color */
.mobile-menu__close:hover {
    color: var(--color-accent);
    transform: scale(1.1);
}

    /* Links Styling */
    .mobile-menu__inner ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .mobile-menu__inner li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .mobile-menu__inner a {
        display: block;
        padding: 15px 0;
        font-family: var(--font-heading);
        font-size: 1.1rem;
        color: #ffb4b4;
        text-decoration: none;
        transition: padding-left 0.2s ease, color 0.2s ease;
    }

    .mobile-menu__inner a:hover {
        color: var(--color-accent);
        padding-left: 10px;
    }
}

/* =========================================
   NEW FOOTER STYLES (4-Column Layout)
   ========================================= */

/* 1. Main Footer Wrapper */
.site-footer {
    background-color: #121212; /* Very dark grey/black background like reference */
    color: #b3b3b3; /* Light grey text for readability */
    padding: 60px 20px 20px;
    font-size: 0.9rem;
    margin-top: auto; /* Pushes footer to bottom */
    border-top: 4px solid var(--color-accent); /* Golden top border */
}

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

/* 3. Column Headings */
.footer-heading {
    color: var(--color-accent); /* Gold color */
    font-family: var(--font-heading);
    font-size: 1.1rem;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}

/* 4. Lists Styling */
.footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-list li {
    margin-bottom: 12px;
    line-height: 1.5;
    padding-left: 0; /* Reset global padding */
}

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

.footer-list a:hover {
    color: var(--color-accent); /* Gold on hover */
    text-decoration: underline;
}

/* 5. Special Styles for Warning List (Column 1) */
.icon-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ff6b6b; /* Reddish tint for warnings */
}

.warning-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    border: 1px solid #ff6b6b;
    border-radius: 50%;
    font-size: 12px;
    font-weight: bold;
    flex-shrink: 0;
}

/* 6. Copyright Bar */
.footer-copyright {
    text-align: center;
    padding-top: 20px;
    font-size: 0.85rem;
    color: rgb(255, 255, 255);
}

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

@media (max-width: 600px) {
    .footer-inner {
        grid-template-columns: 1fr; /* 1 column on mobile phones */
        gap: 30px;
    }
    
    .site-footer {
        padding-top: 40px;
        text-align: left; /* Keep left alignment for readability */
    }
}

/* =========================================
   404 Page Styling
   ========================================= */

/* 1. Main Container centering */
.error-404-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 60vh; /* Takes up most of the screen height */
    padding: var(--space-xl) var(--space-md);
    text-align: center;
    background-color: var(--color-bg); /* Matches site background */
}

.error-404-content {
    max-width: 600px;
    width: 100%;
}

/* 2. The Big "404" Number */
.error-code {
    font-family: var(--font-heading);
    font-size: clamp(6rem, 15vw, 10rem); /* Responsive giant text */
    font-weight: 900;
    line-height: 1;
    margin: 0 0 var(--space-md);
    
    /* Gold Gradient Text Effect */
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.9;
}

/* 3. Headline styling */
.error-title {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    color: #e76d6d;
    margin-bottom: var(--space-md);
    border: none; /* Remove default h2 border if any */
    padding: 0;
}

/* 4. Description Text */
.error-text {
    font-size: 1.1rem;
    color: var(--color-text-secondary); /* Grey text */
    margin-bottom: var(--space-xl);
    line-height: 1.6;
}

/* 5. "Back to Home" Button */
.btn-404 {
    display: inline-block;
    padding: 12px 32px;
    background-color: var(--color-accent);
    color: var(--color-bg-dark);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(201, 162, 39, 0.2);
}

.btn-404:hover {
    background-color: var(--color-accent-light);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(201, 162, 39, 0.3);
    color: var(--color-bg-dark);
}

/* Mobile adjustments */
@media (max-width: 767px) {
    .error-code {
        font-size: 5rem;
    }
}

.footer-copyright p {
    text-align: center; /* Center the copyright text */
    margin: 0 auto; /* Ensure the paragraph block itself is centered */
}

.footer-copyright {
    width: 100%; /* Make sure the container takes full width */
    display: flex; /* Use flexbox for reliable centering */
    justify-content: center; /* Center content horizontally */
}