:root {
            /* Color Palette - Football/Sports Theme */
            color-scheme: dark;

            /* Color Palette - ALWAYS DARK */
            --color-primary: #3da856;
            --color-primary-dark: #2d8a42;
            --color-primary-light: #4fc46a;

            --color-secondary: #4a7eb8;
            --color-secondary-light: #6a9fd4;

            --color-accent: #e6c555;
            --color-accent-hover: #f0d87a;

            /* Neutral Colors - DARK */
            --color-bg: #121212;
            --color-bg-alt: #1a1f1a;
            --color-surface: #1e1e1e;

            --color-text: #e8e8e8;
            --color-text-muted: #a0a0a0;
            --color-text-light: #888888;

            --color-border: #3a3a3a;
            --color-border-light: #2a2a2a;

            /* 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(61, 168, 86, 0.25);

            /* Typography */
            --font-heading: 'Georgia', 'Times New Roman', serif;
            --font-body: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
            --line-height-tight: 1.3;
            --line-height-normal: 1.7;
            --line-height-relaxed: 1.85;

            /* Spacing */
            --space-xs: 0.25rem;
            --space-sm: 0.5rem;
            --space-md: 1rem;
            --space-lg: 1.5rem;
            --space-xl: 2.5rem;
            --space-2xl: 4rem;

            /* Layout */
            --content-width: 72ch;
            --content-wide: 90ch;

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

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

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

        body {
            font-family: var(--font-body);
            font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
            line-height: var(--line-height-normal);
            color: var(--color-text);
            background: var(--color-bg);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

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

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

        /* Skip Link */
        .skip-link {
            position: absolute;
            top: -100%;
            left: var(--space-md);
            padding: var(--space-sm) var(--space-md);
            background: var(--color-primary);
            color: white;
            text-decoration: none;
            font-weight: 600;
            border-radius: 0 0 4px 4px;
            z-index: 1000;
            transition: top var(--transition-fast);
        }

        .skip-link:focus {
            top: 0;
        }

        /* Header */
        header {
            min-height: 1px;
        }

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

        /* Article Styles */
        article {
            background: var(--color-surface);
            border-radius: 8px;
            box-shadow: var(--shadow-md);
            padding: clamp(var(--space-lg), 5vw, var(--space-2xl));
            position: relative;
        }

        article::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--color-primary), var(--color-accent), var(--color-secondary));
            border-radius: 8px 8px 0 0;
        }

        /* Typography */
        h1, h2, h3, h4, h5, h6 {
            font-family: var(--font-heading);
            line-height: var(--line-height-tight);
            color: var(--color-text);
            font-weight: 700;
        }

        h1 {
            font-size: clamp(1.875rem, 1.5rem + 1.875vw, 3rem);
            margin-bottom: var(--space-lg);
            letter-spacing: -0.02em;
            background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 50%, var(--color-secondary) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        @media (prefers-color-scheme: dark) {
            h1 {
                background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-accent) 50%, var(--color-secondary-light) 100%);
                -webkit-background-clip: text;
                background-clip: text;
            }
        }

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

      

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

        @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-lg);
            margin-bottom: var(--space-sm);
        }

        p {
            margin-bottom: var(--space-md);
            line-height: var(--line-height-relaxed);
            max-width: var(--content-width);
            margin-left: auto;
            margin-right: auto;
        }

        /* 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-primary-light);
            text-decoration-color: var(--color-accent);
        }

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

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

        li {
            margin-bottom: var(--space-sm);
            line-height: var(--line-height-normal);
            position: relative;
        }

        ul li::marker {
            color: var(--color-primary);
        }

        ol li::marker {
            color: var(--color-primary);
            font-weight: 600;
        }

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

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

        em, i {
            font-style: italic;
        }

        /* 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-surface) 100%);
            border-left: 4px solid var(--color-primary);
            border-radius: 0 8px 8px 0;
            font-style: italic;
            position: relative;
            max-width: var(--content-width);
        }

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

        blockquote p {
            margin-bottom: 0;
        }

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

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

        .hero-image {
            width: 100%;
            max-height: 450px;
            object-fit: cover;
            border-radius: 8px;
            box-shadow: var(--shadow-lg);
            margin-bottom: var(--space-lg);
        }

        .article-image {
            width: 100%;
            height: auto;
            border-radius: 6px;
            box-shadow: var(--shadow-md);
            transition: transform var(--transition-normal), box-shadow var(--transition-normal);
        }

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

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

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

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

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

        nav[aria-label="Indice"] a {
            display: inline-block;
            padding: var(--space-xs) var(--space-sm);
            color: var(--color-text);
            text-decoration: none;
            border-radius: 4px;
            transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
        }

        nav[aria-label="Indice"] a:hover {
            background: var(--color-primary);
            color: white;
            transform: translateX(4px);
        }

        /* FAQ Section */
        .faq-item {
            margin-bottom: var(--space-lg);
            padding-bottom: var(--space-lg);
            border-bottom: 1px solid var(--color-border-light);
        }

        .faq-item:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }

        /* Code/Technical */
        code {
            font-family: 'Consolas', 'Monaco', monospace;
            background: var(--color-bg-alt);
            padding: 0.15em 0.4em;
            border-radius: 4px;
            font-size: 0.9em;
            border: 1px solid var(--color-border-light);
        }

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

        /* Disclaimer/Warning Box */
        .disclaimer {
            background: linear-gradient(135deg, var(--color-bg-alt), var(--color-surface));
            border: 1px solid var(--color-accent);
            border-left: 4px solid var(--color-accent);
            border-radius: 0 8px 8px 0;
            padding: var(--space-md) var(--space-lg);
            margin: var(--space-xl) 0;
            font-size: 0.95rem;
        }

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

        /* Footer */
        footer {
            min-height: 1px;
        }

        /* Responsive Adjustments */
        @media (max-width: 768px) {
            main {
                padding: var(--space-md) var(--space-sm) var(--space-xl);
            }

            article {
                padding: var(--space-md);
                border-radius: 0;
            }

            article::before {
                border-radius: 0;
            }

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

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

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

            blockquote::before {
                font-size: 2.5rem;
                top: -5px;
                left: 10px;
            }

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

        @media (max-width: 480px) {
            ul, ol {
                padding-left: var(--space-md);
            }

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

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

            article {
                box-shadow: none;
                padding: 0;
            }

            article::before {
                display: none;
            }

            h1, h2, h3 {
                color: black;
                -webkit-text-fill-color: black;
                background: none;
            }

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

            nav[aria-label="Indice"] {
                border: 1px solid #ccc;
            }
        }

        /* =========================================
   HEADER: Broadcast Sport Style
   ========================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #111; 
    border-bottom: 3px solid var(--color-primary, #1a5f2a);
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    width: 100%;
}

.top-navigation-bar {
    max-width: var(--content-wide, 1200px);
    margin: 0 auto;
    display: flex;
    justify-content: center; 
    align-items: center;
    height: 70px;
    padding: 0 20px;
}

.site-nav--desktop {
    display: none;
    height: 100%;
}

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

    .menu-desktop {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
        height: 100%;
        align-items: center;
    }

    .menu-desktop li {
        position: relative;
        height: 100%;
        display: flex;
        align-items: center;
        margin: 0 5px;
    }

   
    .menu-desktop li:not(:last-child)::after {
        content: '';
        position: absolute;
        right: -6px;
        top: 30%;
        height: 40%;
        width: 1px;
        background: rgba(255, 255, 255, 0.15);
        transform: skewX(-20deg);
    }

    .menu-desktop a {
        position: relative;
        display: flex;
        align-items: center;
        padding: 0 20px;
        height: 60%; 
        color: #e0e0e0;
        font-family: var(--font-heading, sans-serif);
        font-weight: 700;
        font-size: 0.95rem;
        text-transform: uppercase;
        text-decoration: none;
        letter-spacing: 0.5px;
        transition: all 0.3s ease;
        
        overflow: hidden; 
        
        transform: skewX(-15deg);
        border-radius: 2px;
    }


    .menu-desktop a {
        
           transform: none; 
    }

    .menu-desktop a::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--color-primary, #1a5f2a);
        
        transform: translateX(-110%) skewX(-20deg);
        transition: transform 0.3s cubic-bezier(0.2, 0.0, 0.2, 1);
        z-index: -1;
        opacity: 0.8;
    }

    .menu-desktop a:hover {
        color: white;
    }
    
    .menu-desktop a:hover::before {
        transform: translateX(0) skewX(-20deg);
    }

    .menu-desktop .current-menu-item a {
        color: var(--color-accent, #d4af37);
    }
    
    .menu-desktop .current-menu-item::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: var(--color-accent, #d4af37);
        box-shadow: 0 -2px 8px rgba(212, 175, 55, 0.5);
    }
}

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


/* =========================================
   MOBILE MENU: "Starting Lineup" Style
   ========================================= */

/* Base Overlay - Full Screen */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 20, 15, 0.96); /* Deep dark green/black, almost opaque */
    backdrop-filter: blur(10px);        /* Modern blur effect */
    z-index: 9999;
    
    /* Flex alignment to center content */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    /* Hidden state */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Active State (Triggered by JS) */
.mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Close Button (Top Right) */
.mobile-menu__close {
    position: absolute;
    top: 25px;
    right: 25px;
    background: none;
    border: none;
    color: var(--color-surface, #fff);
    font-size: 2.5rem;
    cursor: pointer;
    transition: transform 0.3s ease, color 0.3s ease;
    z-index: 10000;
}

.mobile-menu__close:hover {
    color: var(--color-accent, #d4af37);
    transform: rotate(90deg);
}

/* Menu Container */
.mobile-menu__inner {
    width: 100%;
    max-width: 400px;
    padding: 0 20px;
}

/* List Reset */
.menu-mobile {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

/* List Items - The Animation Stage */
.menu-mobile li {
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(30px) skewX(-10deg); /* Start lower and skewed */
    transition: all 0.4s ease;
}

/* Staggered Animation: Items fly in one by one when menu opens */
.mobile-menu.is-open .menu-mobile li {
    opacity: 1;
    transform: translateY(0) skewX(-10deg);
}

/* Delays for each item to create the "Cascade" effect */
.mobile-menu.is-open .menu-mobile li:nth-child(1) { transition-delay: 0.1s; }
.mobile-menu.is-open .menu-mobile li:nth-child(2) { transition-delay: 0.15s; }
.mobile-menu.is-open .menu-mobile li:nth-child(3) { transition-delay: 0.2s; }
.mobile-menu.is-open .menu-mobile li:nth-child(4) { transition-delay: 0.25s; }
.mobile-menu.is-open .menu-mobile li:nth-child(5) { transition-delay: 0.3s; }
.mobile-menu.is-open .menu-mobile li:nth-child(6) { transition-delay: 0.35s; }

/* Links Styling */
.menu-mobile a {
    display: inline-block;
    font-family: var(--font-heading, 'Georgia', serif);
    font-size: 2.2rem; /* Big Typography */
    font-weight: 700;
    color: transparent; /* For stroke effect */
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.6); /* Outline text */
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.3s ease;
    position: relative;
}

/* Active/Hover State */
.menu-mobile a:hover,
.menu-mobile .current-menu-item a {
    color: #fff; /* Fill the text */
    -webkit-text-stroke: 0px;
    text-shadow: 0 0 20px rgba(26, 95, 42, 0.8); /* Green Glow */
    transform: scale(1.1);
}

/* Decorative Underline on Hover */
.menu-mobile a::after {
    content: '';
    display: block;
    width: 0;
    height: 4px;
    background: var(--color-accent, #d4af37);
    margin: 5px auto 0;
    transition: width 0.3s ease;
    box-shadow: 0 0 10px var(--color-accent, #d4af37);
}

.menu-mobile a:hover::after,
.menu-mobile .current-menu-item a::after {
    width: 100%;
}

/* Remove Overlay for Desktop (Safety check) */
@media (min-width: 992px) {
    .mobile-menu,
    .mobile-menu-overlay {
        display: none !important;
    }
}
/* =========================================
   MOBILE BURGER BUTTON: "Tactical Style"
   ========================================= */

/* 1. Positioning - Push to the right */
.mobile-controls {
    margin-left: auto; /* This pushes the element to the far right in Flexbox */
    display: flex;
    align-items: center;
    padding-right: 0px; /* Spacing from the edge */
    margin-right: -5px;
}

/* 2. Button Reset & Base Style */
.burger {
    appearance: none;
    border: none;
    background: transparent;
    cursor: pointer;
    width: 50px;       /* Touch target size */
    height: 50px;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end; /* Align lines to the right */
    gap: 6px; /* Space between lines */
    position: relative;
    z-index: 1001;
    transition: transform 0.3s ease;
}

/* 3. The Lines (Spans) */
.burger span {
    display: block;
    height: 3px;       /* Line thickness */
    background-color: #fff;
    border-radius: 4px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* 4. "Tactical" Asymmetry (Uneven lines) */
.burger span:nth-child(1) {
    width: 35px; /* Longest */
}

.burger span:nth-child(2) {
    width: 25px; /* Medium */
    background-color: var(--color-accent, #d4af37); /* Gold accent in the middle */
}

.burger span:nth-child(3) {
    width: 15px; /* Shortest */
}

/* 5. Hover Effects (The "Ready" State) */
.burger:hover span {
    width: 35px; /* All expand to full width */
    background-color: var(--color-accent, #d4af37); /* All turn gold */
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.6); /* Gold glow */
}

/* 6. Active/Open State (Transform into X) 
   Note: Since you have a separate close button inside the menu, 
   we can just hide this or make it look "pressed" */
.burger.is-active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 6px);
    width: 35px;
    background-color: var(--color-accent, #d4af37);
}

.burger.is-active span:nth-child(2) {
    opacity: 0;
    transform: translateX(10px);
}

.burger.is-active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -6px);
    width: 35px;
    background-color: var(--color-accent, #d4af37);
}

/* 7. Hide on Desktop (Safety Check) */
@media (min-width: 992px) {
    .mobile-controls {
        display: none;
    }
}

/* =========================================
   FOOTER STYLE (Compact & Wide)
   ========================================= */

/* 1. Main Footer Container */
.site-footer {
    background-color: #0d0d0d; /* Slightly darker */
    color: #a0a0a0;
    padding: 40px 0 0 0; /* Reduced top padding */
    font-size: 0.85rem; /* Smaller font for compact look */
    border-top: 3px solid var(--color-primary, #1a5f2a);
}

.footer-container {
    max-width: 1400px; /* Wider container just for footer to let text breathe */
    width: 95%;
    margin: 0 auto;
}

/* 2. The Grid System - SMART COLUMNS */
.footer-grid {
    display: grid;
    /* Key Fix: "2fr 1fr 1fr 1fr" 
       First column (text) gets 2 shares of space, others get 1.
       This prevents the text from wrapping too much.
    */
    grid-template-columns: 1.8fr 1fr 1fr 1fr; 
    gap: 30px;
    margin-bottom: 40px;
    align-items: start; /* Align content to top */
}

/* 3. Column Headings */
.footer-heading {
    color: var(--color-accent, #d4af37);
    font-family: var(--font-heading, serif);
    font-size: 1.1rem; /* Slightly smaller heading */
    font-weight: 700;
    margin-bottom: 15px; /* Reduced space below heading */
    position: relative;
    padding-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footer-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 25px;
    height: 2px;
    background-color: var(--color-primary, #1a5f2a);
}

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

.footer-list li {
    margin-bottom: 6px; /* Much tighter spacing */
    line-height: 1.4;
    position: relative;
    padding-left: 0;
}

/* Links */
.footer-list a {
    color: #a0a0a0;
    text-decoration: none;
    transition: color 0.2s ease;
    display: inline-block; /* Fixes hover glitches */
}

.footer-list a:hover {
    color: #fff;
    transform: translateX(2px); /* Micro interaction */
}

/* Special Styling for Column 1 (Warnings) */
.list-danger li {
    padding-left: 15px; /* Indent for bullets */
    margin-bottom: 8px; /* Little more space for text blocks */
    color: #888;
}

.list-danger li::before {
    content: '•';
    color: #c92a2a; /* Darker red, less aggressive */
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.2em;
    line-height: 1.2;
}

/* 5. Copyright Bar */
.footer-bottom {
    width: 100vw; 
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    
    background: #080808; 
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 25px 0;
    text-align: center;
    font-size: 0.75rem;
    color: rgb(255, 255, 255);
    margin-top: 40px; 
}

/* =========================================
   RESPONSIVE FOOTER
   ========================================= */
@media (max-width: 992px) {
    .footer-grid {
        /* On tablets: 2 columns */
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
    
    /* First column spans full width on tablet to read better */
    .footer-col:first-child {
        grid-column: 1 / -1; 
        margin-bottom: 10px;
    }
}

@media (max-width: 600px) {
    .footer-grid {
        /* On mobile: 1 column */
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .footer-col:first-child {
        grid-column: auto; /* Reset */
    }
}

/* =========================================
   HEADER LAYOUT & LOGO (EXTREME LEFT FIX)
   ========================================= */

.top-navigation-bar {
    display: flex;
    align-items: center;
    justify-content: space-between; 
    position: relative; 
    height: 70px; 
    padding: 0 15px 0 0; 
    width: 100%;
    max-width: 100%;
}

.site-branding {
    z-index: 20; 
    flex-shrink: 0; 
    
    margin-left: 55px; 
    
    margin-right: 30px; 
    padding-left: 0;
}

.site-branding a {
    text-decoration: none;
    font-family: var(--font-heading, serif); 
    font-size: 1.5rem; 
    font-weight: 800;  
    letter-spacing: -0.5px;
    text-transform: uppercase;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    gap: 4px; 
    padding: 10px; 
}

.site-branding a:hover {
    opacity: 0.8;
}

.brand-white {
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.brand-gold {
    color: var(--color-accent, #d4af37);
    position: relative;
}

.brand-gold::after {
    content: '.';
    color: var(--color-primary, #1a5f2a);
    margin-left: 2px;
}


@media (min-width: 1300px) {
    .site-nav--desktop {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: auto;
    }
}

@media (min-width: 992px) and (max-width: 1299px) {
    .site-nav--desktop {
        position: static;
        transform: none;
        margin-left: 0; 
    }
}

@media (max-width: 991px) {
    .site-branding a {
        font-size: 1.25rem;
    }
    
    .mobile-controls {
        margin-left: auto;
    }
    
    .site-branding {
        margin-left: 5px;
    }
}

/* =========================================
   PAGE 404: "VAR / OFFSIDE" STYLE
   ========================================= */

.error-404 {
    min-height: 80vh; 
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0b0f0b; 
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 40px 20px;
}

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

.page-title {
    font-family: var(--font-heading, serif);
    font-size: clamp(6rem, 15vw, 12rem); 
    line-height: 1;
    margin: 0;
    font-weight: 800;
    color: transparent;
    -webkit-text-stroke: 2px var(--color-accent, #d4af37); 
    position: relative;
    display: inline-block;
}

.page-title::before {
    content: '404';
    position: absolute;
    top: 0;
    left: 0;
    color: rgba(26, 95, 42, 0.2); 
    z-index: -1;
    transform: translate(10px, 10px);
}

.var-check {
    display: inline-block;
    background: #000;
    border: 1px solid rgba(255,255,255,0.2);
    padding: 5px 15px;
    margin: 20px 0;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    letter-spacing: 2px;
    color: #fff;
    transform: skewX(-10deg); 
}

.var-check .status {
    color: #ff3333; 
    animation: blink 1.5s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.error-message {
    color: #a0a0a0;
    font-size: 1.2rem;
    margin-bottom: 40px;
    line-height: 1.6;
}

.error-icon svg {
    width: 60px;
    height: 60px;
    margin-bottom: -20px;
    opacity: 0.8;
}

.btn-home {
    display: inline-block;
    padding: 15px 40px;
    background: var(--color-primary, #1a5f2a);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(26, 95, 42, 0.4);
    border: 1px solid rgba(255,255,255,0.1);
}

.btn-home:hover {
    background: var(--color-primary-light, #2d8a42);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(26, 95, 42, 0.6);
    color: #fff;
}

.tactical-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    opacity: 0.05;
    background-image: 
        linear-gradient(rgba(255,255,255,0.3) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.3) 1px, transparent 1px);
    background-size: 100px 100px;
    pointer-events: none;
}

.tactical-bg::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    border: 2px solid #fff;
    border-radius: 50%;
}


/* Guide style */
		.guides-list {margin: 40px 0;}
		.guide-item {display: flex; gap: 30px; padding: 30px 0; border-bottom: 1px solid #eaeaea;}
		.guide-item:last-child {border-bottom: none;}
		/* Thumbnail styles */
		.guide-thumbnail {flex: 0 0 200px;}
		.guide-thumbnail a {display: block; text-decoration: none;}
		.guide-thumbnail img {width: 100%; height: auto; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: transform 0.3s ease;}
		.guide-thumbnail a:hover img {transform: scale(1.03);}
		/* Content styles */
		.guide-content {flex: 1; min-width: 0;}
		.guide-header {display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px; gap: 20px;}
		.guide-title {margin: 0; font-size: 1.5em; line-height: 1.3;}
		.guide-title a {text-decoration: none;  transition: color 0.2s ease;}
		.guide-title a:hover {}
		.guide-meta {flex-shrink: 0; font-size: 0.9em;white-space: nowrap;}
		.guide-excerpt { line-height: 1.7; font-size: 1em;}
		/* Pagination style */
		.guides-pagination {margin: 60px 0 40px; text-align: center;}
		.guides-pagination .page-numbers {display: inline-block; padding: 10px 18px; margin: 0 4px; border: 1px solid #ddd; border-radius: 6px; text-decoration: none; color: #333; transition: all 0.2s ease; font-size: 0.95em;}
		.guides-pagination .page-numbers.current {background-color: #0073aa; color: white; border-color: #0073aa;}
		.guides-pagination .page-numbers:hover:not(.current) {background-color: #f8f8f8; border-color: #0073aa; color: #0073aa;}
		@media (max-width: 768px) {
			.guide-item {flex-direction: column; gap: 20px;}
			.guide-thumbnail {flex: 0 0 auto; max-width: 100%;}
			.guide-thumbnail img {max-width: 100%; border-radius: 6px;}
			.guide-header {flex-direction: column; gap: 10px;}
			.guide-meta {white-space: normal;}
			.guides-pagination .page-numbers {padding: 8px 14px; margin: 0 2px;}
		}
		@media (max-width: 480px) {
			.guide-item {padding: 25px 0;}
			.guide-title {font-size: 1.3em;}
			.guides-pagination .page-numbers {padding: 6px 12px; font-size: 0.9em;}
		}


.content-header img {max-width: 100%;}

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