:root {
            /* Primary palette - Champions League inspired */
            --color-primary: #5c6bc0;
            --color-primary-light: #7986cb;
            --color-primary-dark: #3949ab;
            --color-accent: #ffd54f;
            --color-accent-light: #ffecb3;
            --color-accent-dark: #c9a227;

            /* Neutrals (dark only) */
            --color-bg: #0f0f1a;
            --color-bg-alt: #1a1a2e;
            --color-bg-elevated: #252542;
            --color-text: #e8e8f0;
            --color-text-muted: #a0a0b8;
            --color-text-light: #6c6c88;
            --color-border: #2a2a45;
            --color-border-light: #1f1f35;

            /* Functional */
            --color-success: #2e7d32;
            --color-link: #64b5f6;
            --color-link-hover: #90caf9;

            /* Shadows (dark) */
            --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 30px rgba(0, 0, 0, 0.5);
            --shadow-accent: 0 4px 20px rgba(255, 213, 79, 0.2);

            /* Typography */
            --font-heading: 'Segoe UI', system-ui, -apple-system, sans-serif;
            --font-body: 'Georgia', 'Times New Roman', 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-wide: 90ch;
            --header-height: 4rem;

            /* Transitions */
            --transition-fast: 150ms ease;
            --transition-base: 250ms ease;
            --transition-slow: 400ms ease;

            /* Radius */
            --radius-sm: 4px;
            --radius-md: 8px;
            --radius-lg: 12px;
            --radius-xl: 20px;
        }

        *,
        *::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-visible {
            outline: 3px solid var(--color-accent);
            outline-offset: 3px;
        }

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

        /* Header */
        .site-header {
            position: sticky;
            top: 0;
            z-index: 100;
            height: var(--header-height);
            background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
            box-shadow: var(--shadow-md);
        }

        /* Navigation */
        nav {
            max-width: var(--content-wide);
            margin: 0 auto;
            padding: 0 var(--space-lg);
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        nav a {
            color: rgba(255, 255, 255, 0.9);
            text-decoration: none;
            font-family: var(--font-heading);
            font-weight: 600;
            padding: var(--space-sm) var(--space-md);
            border-radius: var(--radius-sm);
            transition: background var(--transition-fast), color var(--transition-fast);
        }

        nav a:hover {
            background: rgba(255, 255, 255, 0.15);
            color: var(--color-accent-light);
        }

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

        /* Article container */
        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-primary-dark);
            letter-spacing: -0.02em;
        }

        @media (prefers-color-scheme: dark) {
            h1, h2, h3, h4, h5, h6 {
                color: var(--color-text);
            }
        }

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

        h1::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 120px;
            height: 4px;
            background: linear-gradient(90deg, var(--color-accent) 0%, transparent 100%);
        }

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

     

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

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

        h4 {
            font-size: clamp(1.1rem, 1rem + 0.5vw, 1.375rem);
            margin-top: var(--space-xl);
            margin-bottom: var(--space-sm);
        }

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

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

        /* Links */
        a {
            color: var(--color-link);
            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-link-hover);
            text-decoration-thickness: 2px;
        }

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

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

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

        ul li {
            list-style-type: none;
            position: relative;
        }

        

        ol {
            counter-reset: item;
        }

        ol li {
            counter-increment: item;
            list-style-type: none;
        }

        ol li::before {
            content: counter(item);
            position: absolute;
            left: calc(-1 * var(--space-xl));
            width: 1.5em;
            height: 1.5em;
            background: var(--color-primary);
            color: white;
            font-family: var(--font-heading);
            font-size: 0.85em;
            font-weight: 700;
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Strong and emphasis */
        strong {
            font-weight: 700;
            color: var(--color-primary-dark);
        }

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

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

        /* Blockquotes */
        blockquote {
            margin: var(--space-xl) 0;
            padding: var(--space-lg) var(--space-xl);
            background: linear-gradient(135deg, var(--color-bg-elevated) 0%, var(--color-bg-alt) 100%);
            border-left: 4px solid var(--color-accent);
            border-radius: 0 var(--radius-md) var(--radius-md) 0;
            box-shadow: var(--shadow-sm);
            position: relative;
        }

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

        blockquote p {
            font-style: italic;
            text-align: left;
            position: relative;
            z-index: 1;
        }

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

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

        /* Figures and images */
        figure {
            margin: var(--space-2xl) 0;
        }


        .hero-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .hero-image::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 40%;
            background: linear-gradient(to top, var(--color-bg) 0%, transparent 100%);
            pointer-events: none;
        }

        .article-image {
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow-lg);
            transition: transform var(--transition-base), box-shadow var(--transition-base);
        }

        .article-image:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-accent);
        }

        .article-image img {
            width: 100%;
            height: auto;
            display: block;
        }

        figcaption {
            margin-top: var(--space-md);
            padding: var(--space-sm) var(--space-md);
            font-size: 0.9em;
            color: var(--color-text-muted);
            font-style: italic;
            text-align: center;
            border-bottom: 2px solid var(--color-border-light);
        }

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

        nav[aria-label="Table des matieres"]::before {
            content: 'Sommaire';
            display: block;
            font-family: var(--font-heading);
            font-weight: 700;
            font-size: 1.1em;
            color: var(--color-primary);
            margin-bottom: var(--space-md);
            padding-bottom: var(--space-sm);
            border-bottom: 2px solid var(--color-accent);
        }

        nav[aria-label="Table des matieres"] ul {
            margin: 0;
            padding: 0;
        }

        nav[aria-label="Table des matieres"] li {
            padding: var(--space-sm) 0;
            border-bottom: 1px solid var(--color-border-light);
        }

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

        nav[aria-label="Table des matieres"] li::before {
            display: none;
        }

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

        nav[aria-label="Table des matieres"] a::before {
            content: '';
            width: 6px;
            height: 6px;
            background: var(--color-accent);
            border-radius: 50%;
            transition: transform var(--transition-fast);
        }

        nav[aria-label="Table des matieres"] a:hover {
            background: var(--color-border-light);
            color: var(--color-primary);
            padding-left: var(--space-sm);
        }

        nav[aria-label="Table des matieres"] a:hover::before {
            transform: scale(1.5);
        }

        /* FAQ section */
        section[itemtype="https://schema.org/FAQPage"] {
            margin-top: var(--space-3xl);
            padding: var(--space-xl);
            background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
            border-radius: var(--radius-xl);
            color: white;
        }

        section[itemtype="https://schema.org/FAQPage"] h2 {
            color: white;
            border-left-color: var(--color-accent);
            margin-top: 0;
        }

        section[itemtype="https://schema.org/FAQPage"] h2::before {
            background: var(--color-accent);
        }

        details {
            background: rgba(255, 255, 255, 0.1);
            border-radius: var(--radius-md);
            margin-bottom: var(--space-md);
            overflow: hidden;
            transition: background var(--transition-fast);
        }

        details:hover {
            background: rgba(255, 255, 255, 0.15);
        }

        details[open] {
            background: rgba(255, 255, 255, 0.2);
        }

        summary {
            padding: var(--space-lg);
            cursor: pointer;
            font-family: var(--font-heading);
            font-weight: 600;
            font-size: 1.1em;
            list-style: none;
            display: flex;
            align-items: center;
            gap: var(--space-md);
        }

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

        summary::before {
            content: '+';
            width: 1.5em;
            height: 1.5em;
            background: var(--color-accent);
            color: var(--color-primary-dark);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            flex-shrink: 0;
            transition: transform var(--transition-base);
        }

        details[open] summary::before {
            content: '-';
            transform: rotate(180deg);
        }

        details p {
            padding: 0 var(--space-lg) var(--space-lg) calc(var(--space-lg) + 1.5em + var(--space-md));
            color: rgba(255, 255, 255, 0.9);
            text-align: left;
        }

        /* Horizontal rules */
        hr {
            border: none;
            height: 2px;
            background: linear-gradient(90deg, transparent 0%, var(--color-border) 20%, var(--color-border) 80%, transparent 100%);
            margin: var(--space-3xl) 0;
        }

        /* Code blocks (if needed) */
        code {
            font-family: var(--font-mono);
            font-size: 0.9em;
            background: var(--color-bg-alt);
            padding: var(--space-xs) var(--space-sm);
            border-radius: var(--radius-sm);
            border: 1px solid var(--color-border);
        }

        pre {
            background: var(--color-primary-dark);
            color: #e8e8f0;
            padding: var(--space-lg);
            border-radius: var(--radius-md);
            overflow-x: auto;
            margin: var(--space-lg) 0;
        }

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

        /* Tables */
        table {
            width: 100%;
            border-collapse: collapse;
            margin: var(--space-xl) 0;
            font-size: 0.95em;
        }

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

        th {
            background: var(--color-primary);
            color: white;
            font-family: var(--font-heading);
            font-weight: 600;
        }

        tr:nth-child(even) {
            background: var(--color-bg-alt);
        }

        tr:hover {
            background: var(--color-border-light);
        }

        /* Footer */
        footer {
            background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
            color: rgba(255, 255, 255, 0.8);
            padding: var(--space-2xl) var(--space-lg);
            margin-top: auto;
        }

        /* Utility: visually hidden but accessible */
        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }

        /* Back to top button */
        .back-to-top {
            position: fixed;
            bottom: var(--space-xl);
            right: var(--space-xl);
            width: 48px;
            height: 48px;
            background: var(--color-primary);
            color: white;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: var(--shadow-lg);
            transition: transform var(--transition-fast), background var(--transition-fast), opacity var(--transition-base);
            opacity: 0;
            pointer-events: none;
        }

        .back-to-top.visible {
            opacity: 1;
            pointer-events: auto;
        }

        .back-to-top:hover {
            background: var(--color-accent);
            transform: translateY(-4px);
        }

        .back-to-top::before {
            content: '';
            width: 12px;
            height: 12px;
            border-left: 3px solid currentColor;
            border-top: 3px solid currentColor;
            transform: rotate(45deg) translateY(2px);
        }

        /* Print styles */
        @media print {
            header, footer, .back-to-top {
                display: none;
            }

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

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

            a[href]::after {
                content: " (" attr(href) ")";
                font-size: 0.8em;
            }
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            :root {
                --space-2xl: 2rem;
                --space-3xl: 2.5rem;
            }

            main {
                padding: var(--space-xl) var(--space-md);
            }

            h2 {
                margin-top: var(--space-2xl);
            }

            h3 {
                margin-top: var(--space-xl);
            }

            blockquote {
                padding: var(--space-md) var(--space-lg);
            }

            blockquote::before {
                font-size: 3rem;
                top: -5px;
            }

            .back-to-top {
                bottom: var(--space-md);
                right: var(--space-md);
                width: 44px;
                height: 44px;
            }
        }

        @media (max-width: 480px) {
            p {
                text-align: left;
                hyphens: none;
            }

            ul, ol {
                padding-left: var(--space-lg);
            }

            nav[aria-label="Table des matieres"] {
                padding: var(--space-md);
            }

            section[itemtype="https://schema.org/FAQPage"] {
                padding: var(--space-md);
                border-radius: var(--radius-lg);
            }

            summary {
                padding: var(--space-md);
                font-size: 1em;
            }

            details p {
                padding: 0 var(--space-md) var(--space-md);
            }
        }

        /* ===========================================
   IMAGES STYLES - Paris Sportifs Ligue des Champions
   =========================================== */

/* Hero Image */
.hero-image {
    width: 100%;
    margin: 0 0 2rem;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-lg, 0 8px 30px rgba(26, 35, 126, 0.12));
}

.hero-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 1200 / 630;
}

.hero-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to top, rgba(26, 35, 126, 0.15), transparent);
    pointer-events: none;
}

/* Article Images */
.article-image {
    margin: 2rem 0;
    text-align: center;
    position: relative;
}

.article-image img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-md, 0 4px 12px rgba(26, 35, 126, 0.1));
    transition: transform var(--transition-base, 250ms ease), box-shadow var(--transition-base, 250ms ease);
}

.article-image img:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg, 0 8px 30px rgba(26, 35, 126, 0.12));
}

/* Footer Styles */
.footer-content {
    max-width: var(--content-wide, 90ch);
    margin: 0 auto;
    text-align: center;
}

.footer-content .disclaimer {
    font-size: 0.875rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
    font-family: var(--font-body, 'Georgia', 'Times New Roman', serif);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .hero-image {
        margin: 0 calc(var(--space-md, 1rem) * -1) 1.5rem;
        border-radius: 0;
    }
    
    .hero-image img {
        border-radius: 0;
    }
    
    .article-image {
        margin: 1.5rem calc(var(--space-sm, 0.5rem) * -1);
    }
    
    .article-image img {
        border-radius: var(--radius-sm, 4px);
    }
    
    .footer-content .disclaimer {
        font-size: 0.8125rem;
        padding: 0 var(--space-sm, 0.5rem);
    }
}

@media (max-width: 480px) {
    .hero-image::after {
        height: 40px;
    }
    
    .article-image {
        margin: 1.25rem 0;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .hero-image {
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    }
    
    .hero-image::after {
        background: linear-gradient(to top, rgba(15, 15, 26, 0.3), transparent);
    }
    
    .article-image img {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
    
    .article-image img:hover {
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    }
    
    .footer-content .disclaimer {
        color: rgba(255, 255, 255, 0.7);
    }
}

/* Print Styles */
@media print {
    .hero-image,
    .article-image {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    
    .hero-image img,
    .article-image img {
        box-shadow: none;
        border: 1px solid #ddd;
    }
    
    .hero-image::after {
        display: none;
    }
}

.site-header {
    background: linear-gradient(90deg, #0d1442 0%, #1a237e 100%); 
    padding: 0 20px;
    position: sticky; 
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3); 
    height: 70px; 
    display: flex;
    align-items: center;
}

.top-navigation-bar {
    width: 100%;
    max-width: 1200px; 
    margin: 0 auto;
    display: flex;
    justify-content: space-between; 
    align-items: center;
}

.site-nav--desktop .menu-desktop {
    display: flex;       
    gap: 30px;           
    list-style: none;    
    margin: 0;
    padding: 0;
}

.site-nav--desktop .menu-desktop li a {
    text-decoration: none;
    color: #ffffff;      
    font-family: 'Segoe UI', sans-serif; 
    font-weight: 700;    
    font-size: 16px;
    text-transform: uppercase; 
    letter-spacing: 1px; 
    padding: 24px 0;     
    position: relative;
    transition: color 0.3s ease;
}

.site-nav--desktop .menu-desktop li a::after {
    content: '';
    position: absolute;
    bottom: 15px; 
    left: 0;
    width: 0%;    
    height: 3px;
    background-color: #c9a227; 
    transition: width 0.3s ease; 
}

.site-nav--desktop .menu-desktop li a:hover {
    color: #c9a227; 
}

.site-nav--desktop .menu-desktop li a:hover::after {
    width: 100%; 
}

.site-nav--desktop .menu-desktop li.current-menu-item a {
    color: #c9a227;
}
.site-nav--desktop .menu-desktop li.current-menu-item a::after {
    width: 100%;
}

@media (min-width: 992px) {
    .mobile-controls, 
    .mobile-menu-overlay, 
    .mobile-menu {
        display: none !important;
    }
}

@media (max-width: 991px) {
    .site-nav--desktop {
        display: none;
    }
    .mobile-controls {
        display: block; 
    }
}

/* --- Mobile Styles Only --- */
@media (max-width: 991px) {

    /* 1. Burger Button */
    .mobile-controls {
        display: block; /* Show button */
    }

    .burger {
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 10px;
        display: flex;
        flex-direction: column;
        gap: 6px; /* Space between lines */
        z-index: 1001;
    }

    .burger span {
        display: block;
        width: 28px;
        height: 3px;
        background-color: #fff; /* White lines */
        border-radius: 3px;
        transition: all 0.3s ease; /* Smooth animation */
    }

    /* Burger to X animation (optional, if JS adds class) */
    .burger.is-active span:nth-child(1) { transform: rotate(45deg) translate(7px, 6px); }
    .burger.is-active span:nth-child(2) { opacity: 0; }
    .burger.is-active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); }

    /* 2. Off-canvas Menu Panel */
    .mobile-menu {
        position: fixed;
        top: 0;
        right: 0; /* Anchored to right */
        width: 85%; /* Panel width */
        max-width: 320px;
        height: 100vh; /* Full viewport height */
        
        /* Champions League Dark Blue Gradient */
        background: linear-gradient(160deg, #0d1442 0%, #1a237e 100%);
        box-shadow: -5px 0 30px rgba(0,0,0,0.5); /* Deep shadow */
        
        z-index: 9999; /* Top layer */
        transform: translateX(100%); /* Hidden off-screen by default */
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); /* Smooth slide-in animation */
        
        display: flex;
        flex-direction: column;
        padding-top: 80px; /* Top padding to avoid overlap with close button */
    }

    /* Active state (added by JS) */
    .mobile-menu.is-open {
        transform: translateX(0); /* Slide into view */
    }

    /* 3. Backdrop Overlay */
    .mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7); /* Dark semi-transparent bg */
        backdrop-filter: blur(4px); /* Blur effect (iOS style) */
        z-index: 9998; /* Below menu, above content */
        
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

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

    /* 4. Menu Links */
    .mobile-menu__inner ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .mobile-menu__inner ul li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* Thin separators */
        width: 100%;
    }

    .mobile-menu__inner ul li a {
        display: block;
        padding: 20px 30px;
        color: #fff; /* White text */
        font-family: 'Segoe UI', sans-serif;
        font-size: 18px;
        font-weight: 600;
        text-decoration: none;
        letter-spacing: 0.5px;
        transition: all 0.2s ease;
    }

    /* Hover/Focus Effects */
    .mobile-menu__inner ul li a:hover,
    .mobile-menu__inner ul li a:focus {
        background: rgba(255, 255, 255, 0.05); /* Light background highlight */
        color: #c9a227; /* Gold text */
        padding-left: 40px; /* Slight shift to right */
        border-left: 4px solid #c9a227; /* Gold left border */
    }

    /* 5. Close Button */
    .mobile-menu__close {
        position: absolute;
        top: 25px;
        right: 25px;
        background: none;
        border: 2px solid rgba(255,255,255,0.2); /* Circular border */
        border-radius: 50%;
        width: 40px;
        height: 40px;
        color: #fff;
        font-size: 28px;
        line-height: 1;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-menu__close:hover {
        border-color: #c9a227; /* Gold border */
        color: #c9a227;        /* Gold icon */
        transform: rotate(90deg); /* Rotate animation */
    }
}

/* --- Footer Styles --- */

/* 1. Container & Background */
.site-footer {
    background-color: #080b1f; /* Very dark blue (almost black) */
    color: #e0e0e0; /* Light grey text */
    padding: 60px 20px 30px; /* Spacious padding */
    font-family: 'Georgia', serif; /* Matching the reference serif font */
    border-top: 4px solid #c9a227; /* Gold accent line at the top */
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* 2. Grid Layout (4 Columns) */
.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
    gap: 30px; /* Space between columns */
    margin-bottom: 50px;
}

/* 3. Headings (Golden) */
.footer-heading {
    color: #c9a227; /* Gold color */
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    font-family: 'Georgia', serif; /* Explicitly serif */
    border-left: none; /* Resetting previous styles if any */
    padding-left: 0;
}

/* Remove default decorative elements from previous H4 styles if needed */
.footer-heading::before {
    display: none;
}

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

.footer-list li {
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 1.5;
    position: relative;
    padding-left: 15px; /* Space for the bullet */
    color: #cccccc;
    /* Resetting previous li styles */
    background: none !important; 
    border: none;
}

/* Red Bullets (Like in reference) */
.footer-list li::before {
    content: "•"; /* Bullet character */
    color: #e53935; /* Red warning color */
    font-weight: bold;
    font-size: 18px;
    position: absolute;
    left: 0;
    top: -2px;
    /* Resetting any gradient squares from main styles */
    width: auto; 
    height: auto; 
    background: none; 
    border-radius: 0;
    transform: none;
}

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

.footer-list a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* Special styling for "Warning" list items to look strictly regular */
.warning-list li {
    color: #cccccc;
}

/* Highlight the link in the warning column */
.warning-list a {
    color: #e57373; /* Light red for help link */
}

/* 5. Bottom Copyright Area */
.footer-divider {
    border: 0;
    height: 1px;
    background: #333; /* Dark grey line */
    margin-bottom: 30px;
}

.footer-bottom {
    text-align: center;
}

.copyright {
    font-size: 12px;
    color: rgb(255, 255, 255);
    margin: 0;
    font-family: sans-serif; /* Clean sans-serif for copyright */
}

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

@media (max-width: 600px) {
    .footer-grid {
        grid-template-columns: 1fr; /* 1 column on mobile */
        gap: 40px;
    }
    
    .site-footer {
        padding-top: 40px;
    }
}

/* --- 404 Page Styles --- */

/* 1. Main Container - Full Height & Centered */
.error-404-container {
    min-height: 70vh; /* Takes up most of the screen */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: radial-gradient(circle at center, #1a237e 0%, #0d1442 100%); /* Stadium spotlight effect */
    padding: 40px 20px;
    color: #fff;
}

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

/* 2. The Big "404" Number */
.error-code {
    font-size: clamp(80px, 15vw, 180px); /* Responsive giant text */
    font-weight: 800;
    line-height: 1;
    margin: 0;
    color: transparent;
    /* Gold Outline Text Effect */
    -webkit-text-stroke: 2px #c9a227; 
    background: linear-gradient(180deg, #ffd700 0%, #c9a227 100%);
    -webkit-background-clip: text;
    background-clip: text;
    font-family: 'Segoe UI', sans-serif; /* Your heading font */
    text-shadow: 0 10px 30px rgba(0,0,0,0.5);
    opacity: 0;
    animation: fadeInUp 0.8s ease forwards;
}

/* 3. Headlines & Text */
.error-title {
    font-size: clamp(24px, 5vw, 36px);
    color: #fff;
    margin-top: 20px;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
    animation: fadeInUp 0.8s ease forwards 0.2s; /* Delayed animation */
    opacity: 0;
}

.error-text {
    font-size: 18px;
    color: #aab2bd; /* Muted grey/blue */
    margin-bottom: 40px;
    line-height: 1.6;
    animation: fadeInUp 0.8s ease forwards 0.4s;
    opacity: 0;
}

/* 4. The Button (CTA) */
.btn-home {
    display: inline-block;
    padding: 15px 40px;
    background-color: #c9a227; /* Gold */
    color: #0d1442; /* Dark Blue Text */
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 50px; /* Pill shape */
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(201, 162, 39, 0.4); /* Gold glow */
    animation: fadeInUp 0.8s ease forwards 0.6s;
    opacity: 0;
}

.btn-home:hover {
    background-color: #fff;
    color: #0d1442;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);
}

/* 5. Search Form Styling (If used) */
.error-search {
    margin-top: 50px;
    opacity: 0;
    animation: fadeInUp 0.8s ease forwards 0.8s;
}

.error-search p {
    font-size: 14px;
    color: #6c7a89;
    margin-bottom: 10px;
}

/* Search Input Styling Override */
.error-search form {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.error-search input[type="search"] {
    padding: 12px 20px;
    border-radius: 30px;
    border: 1px solid #333;
    background: rgba(255,255,255,0.1);
    color: #fff;
    width: 100%;
    max-width: 300px;
}

/* --- Animations --- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@media (min-width: 769px) {
    .site-nav--desktop {
        display: block !important; 
    }
    .mobile-controls, 
    .mobile-menu-overlay, 
    .mobile-menu {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .site-nav--desktop {
        display: none !important;
    }
    .mobile-controls {
        display: block !important;
    }
}