/* ==================================== */
/* 1. GLOBAL STYLES & FONTS */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap');

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

body { text-align: center; font-family: 'Figtree', sans-serif; background-color: #f9f9f9; color: #222; padding: 15px; font-size: 1rem; }

a { color: #cc0000; text-decoration: underline; }
a:hover { text-decoration: none; }

/* Typography */
h1 { margin: 0; font-size: 2.2rem; }
h2 { font-size: 1.5rem; text-align: center; color: #000; }
h3 { font-size: 1.3rem; text-align: center; color: #333; }

.paragraph-text { text-align: justify; font-weight: 400; padding-bottom: 10px; line-height: 1.6; }
.caption-text { font-style: italic; font-size: 0.9em; text-align: center; padding-bottom: 10px; color:#666; }

/* ==================================== */
/* 2. HEADER & NAVIGATION */

.site-header { position: sticky; top: 0; z-index: 1000; background-color: #cc0000; color: #fff; padding: 20px 0; margin-bottom: 20px; text-align: center; display: flex; align-items: center; justify-content: center; min-height: 80px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }

.header-link h1 { margin: 0; font-size: 2.2rem; color: #fff; background-color: transparent; padding: 0; }
.header-link { color: inherit; text-decoration: none; z-index: 1; }
.header-link:hover { text-decoration: underline; }
.header-logo { height: 150px; width: auto; margin: 0 auto; display: block; }

/* Wrapper for Controls */
.mobile-controls-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }

/* Dropdown Container */
.archive-dropdown-container { position: absolute; top: 50%; left: 20px; transform: translateY(-50%); z-index: 10; pointer-events: auto; }

/* The Header Select Box */
.archive-select { -webkit-appearance: none; -moz-appearance: none; appearance: none; font-family: 'Figtree', sans-serif; display: inline-block; width: auto; padding: 10px 40px 10px 12px; background-color: #fff; border: 2px solid #ccc; border-radius: 8px; font-size: 16px; font-weight: 700; color: #cc0000; cursor: pointer; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><text x='0' y='15' font-size='16' fill='%23cc0000'>▼</text></svg>"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; }
.archive-select:hover { border-color: #aaa; }
.archive-select:focus { outline: none; border-color: #9aa3ad; box-shadow: 0 0 0 3px rgba(26,115,232,0.15); }

/* Menu Placeholder */
#menu-container { display: none; }

/* Navigation Box */
.nav-menu-box { max-width: 450px; margin: 0 auto 15px auto; text-align: center; background-color: #fff; }

/* --- Google Ad Container --- */
.ad-row { max-width: 930px; margin: 15px auto 30px auto; display: block; text-align: center; min-height: 90px; height: auto; overflow: hidden; background-color: #ffffff; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); padding: 15px 15px; border-top: 1px solid #eee; border-left: 1px solid #eee; border-right: 1px solid #eee; border-bottom: 2px solid #eee; }
.ad-row::before { content: "SPONSORED"; display: block; font-size: 10px; color: #999; letter-spacing: 1px; margin-bottom: 15px; text-transform: uppercase; font-family: sans-serif; }

/* ==================================== */
/* 3. UNIFIED BOX STYLING (SHADOWS) */

.main-box, .nav-menu-box, .padded-box, .info-box, #league-table-container { max-width: 935px; background-color: #ffffff; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); border-top: 1px solid #eee; border-left: 1px solid #eee; border-right: 1px solid #eee; border-bottom: 2px solid #eee; padding: 15px; margin: 15px auto; }

/* Layout Containers */
.top-box { max-width: 450px; padding-bottom: 15px; }
.main-content-row { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; max-width: 966px; margin: 30px auto; }
.main-content-row > .main-box, .main-content-row > #league-table-container { flex: 1 1 450px; max-width: 450px; margin: 0; }
.padded-box { max-width: 966px; margin: 15px auto; }

/* ==================================== */
/* 4. CONTENT SECTIONS */

.season-heading { color: #cc0000; font-size: 1.5rem; }
.estimated-date h2 { font-size: 1.4rem; color: #333; margin-top: 10px; }
.estimated-date small { font-size: 1.1rem; color: #666; display: block; margin-top: 8px; }
.section-heading { font-size: 1.7rem; color: #333; margin: 15px auto 20px auto; text-align: center; }
.match-results-heading { padding: 10px 0 5px 0; color: #333; font-size: 1.3rem; }
.achievement-heading { padding: 10px 0 15px 0; color: #333; font-size: 1.3rem; }

/* Dividers */
.red-divider { border: 0; height: 2px; background: #cc0000; width: 40%; max-width: 935px; margin: 20px auto; }
.achievement-divider { background: #cc0000; width: 30%; margin: 5px auto; border: 0; height: 2px; }
.summary-divider { background: #cc0000; width: 30%; margin: 15px auto 0 auto; border: 0; height: 2px; }
.update-divider { width: 20%; margin: 0 auto 5px auto; height: 2px; background: #cc0000; border: 0; }

/* Images & SVGs */
.image-intext { width: 100%; max-width: 800px; height: auto; display: block; margin: 10px auto; border-radius: 4px; }
.formation-svg { width: 100%; max-width: 800px; height: auto; display: block; margin: 0 auto; }

/* ==================================== */
/* 5. TABLES & SORTING */

.summary-table, .league-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }

/* Sorting Arrows */
.sortable { cursor: pointer; user-select: none; }
.sortable:hover span { text-decoration: underline; }
.sortable::after { content: ' ⇅'; font-size: 1.2em; margin-left: 5px; opacity: 0.8; vertical-align: -2px; }
.sortable.sorted-asc::after, .sortable.sorted-desc::after { opacity: 1; color: #fff; }

/* Summary Table */
.summary-table th { background-color: #cc0000; color: #fff; font-weight: 700; text-align: left; padding: 4px 8px 4px 8px; }
.summary-table td { padding: 6px 5px 6px 5px; border-bottom: 1px solid #ddd; text-align: left; vertical-align: middle; }
.summary-table td:first-child { border-left: 1px solid #ddd; width: 40%; font-weight: 500; }
.summary-table td:last-child { border-right: 1px solid #ddd; }
.summary-table tbody tr:last-child td { border-bottom: 2px solid #ddd; }
.summary-table-container { width: 100%; overflow-x: auto; }

/* League Table */
.league-table th { background-color: #cc0000; color: #fff; padding: 8px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; }
.league-table td { border-bottom: 1px solid #ddd; padding: 6px 5px; text-align: center; white-space: nowrap; vertical-align: middle; }
/* LEFT Border (First Column) */
.league-table th:first-child, .league-table td:first-child { border-left: 1px solid #ddd; }

/* RIGHT Border (Last Column) */
.league-table th:last-child, .league-table td:last-child { border-right: 1px solid #ddd; }

/* Column Widths & Alignments */
.league-table .table-team-col { text-align: left; font-weight: 500; }
.league-table tr:last-child td { border-bottom: 2px solid #ddd; }
.league-table tbody tr:nth-child(4) td { border-bottom: 1px solid #cc0000; }
.league-table tbody tr:nth-child(17) td { border-bottom: 1px solid #cc0000; }

/* Logos in tables */
.team-logo-small, .league-logo { width: 25px; height: 25px; vertical-align: -7px; margin-right: 8px; object-fit: contain; }

/* Match Results List */
.update-box { padding: 15px 15px 15px 15px; margin: 0 auto 0 auto; max-width: 935px; }
.matches-list { display: flex; flex-direction: column; }
.match-entry { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 7px 5px; border-left: 1px solid #ddd; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; }
.match-entry:last-child { border-bottom: 2px solid #ddd; }
.date-subheader { background-color: #cc0000; color: #fff; padding: 8px; font-size: 0.9rem; font-weight: 700; margin-top: 5px; }
.match-note { font-style: italic; font-size: 0.9rem; padding: 10px; text-align: center; color: #666; }

.team-block { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; }
.home-team-block { justify-content: flex-end; text-align: right; }
.away-team-block { justify-content: flex-start; text-align: left; }
.score-col { font-weight: 700; display: flex; gap: 10px; justify-content: center; }

/* Win/Draw/Loss Boxes */
.medium-result-box { width: 22px; height: 22px; font-size: 0.8rem; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; }
.medium-result-box.W { background-color: #4CAF50; }
.medium-result-box.D { background-color: #9e9e9e; }
.medium-result-box.L { background-color: #f44336; }
.medium-result-box.TBC { background-color: #ccc; }

/* Dropdown Controls (GW Select) */
.update-controls { position: relative; display: flex; align-items: center; justify-content: center; min-height: 40px; margin-bottom: 10px; }
.custom-select { -webkit-appearance: none; -moz-appearance: none; appearance: none; font-family: 'Figtree', sans-serif; display: inline-block; padding: 10px 40px 10px 12px; min-width: 80px; line-height: 1.2; background-color: #fff; border: 2px solid #ccc; border-radius: 8px; font-size: 0.9rem; font-weight: 700; color: #111; cursor: pointer; position: absolute; left: 0; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><text x='0' y='15' font-size='16' fill='111'>▼</text></svg>"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; }
.custom-select:hover { border-color: #aaa; }
.custom-select:focus { outline: none; border-color: #9aa3ad; box-shadow: 0 0 0 3px rgba(26,115,232,0.15); }

/* ==================================== */
/* 6. FOOTER */

footer { margin-top: 20px; font-size: 1rem; color: #666; }
.counter-text, .copyright-text { padding: 15px 15px 0 15px; }

/* ==================================== */
/* 7. DARK MODE & THEME TOGGLE */

.theme-toggle { background-color: #1e1f20; color: #ffd700; border: 1px solid #1e1f20; border-radius: 50%; cursor: pointer; padding: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); z-index: 20; transition: all 0.3s ease; pointer-events: auto; }
.theme-toggle:hover { transform: translateY(-50%) scale(1.1); }
.theme-toggle svg { width: 20px; height: 20px; fill: currentColor; }

/* Icon Logic */
.icon-moon { display: block; }
.icon-sun { display: none; }

/* DARK MODE COLORS */
body.dark-mode { background-color: #131314 !important; color: #e3e3e3 !important; }

/* Box Overrides */
body.dark-mode .main-box, body.dark-mode .nav-menu-box, body.dark-mode .padded-box, body.dark-mode #league-table-container { background-color: #1e1f20 !important; border-color: #444746 !important; color: #e3e3e3 !important; box-shadow: none !important; border-top: 1px solid #444746 !important; border-left: 1px solid #444746 !important; border-right: 1px solid #444746 !important; border-bottom: 2px solid #444746 !important; }
body.dark-mode h2, body.dark-mode h3, body.dark-mode .section-heading, body.dark-mode .estimated-date h2, body.dark-mode .match-note, body.dark-mode .caption-text, body.dark-mode footer, body.dark-mode .counter-text, body.dark-mode .estimated-date small { color: #e3e3e3 !important; }
body.dark-mode .season-heading, body.dark-mode a { color: #e62626 !important; }
body.dark-mode .ad-row { background-color: #1e1f20 !important; border-color: #444746 !important; color: #e3e3e3 !important; box-shadow: none !important; border-top: 1px solid #444746 !important; border-left: 1px solid #444746 !important; border-right: 1px solid #444746 !important; border-bottom: 2px solid #444746 !important; }
body.dark-mode .theme-toggle { background-color: #ffffff; border-color: #ffffff; color: #ea9a00; }
body.dark-mode .icon-moon { display: none; }
body.dark-mode .icon-sun { display: block; }
body.dark-mode .nav-select, body.dark-mode .custom-select { background-color: #2d2e30 !important; border-color: #555 !important; color: #fff !important; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><text x='0' y='15' font-size='16' fill='%23ffffff'>▼</text></svg>") !important; }
body.dark-mode table td, body.dark-mode table th, body.dark-mode .match-entry { border-color: #444746 !important; }
body.dark-mode .summary-table tbody tr:last-child td, body.dark-mode .league-table tbody tr:last-child td { border-bottom-color: #444746 !important; }
body.dark-mode .team-logo-small, body.dark-mode .league-logo, body.dark-mode .header-logo, body.dark-mode .formation-svg { filter: drop-shadow(0px 0px 1px #fff); -webkit-filter: drop-shadow(0px 0px 1px #fff); }
body.dark-mode .caption-text { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ==================================== */
/* 8. MOBILE RESPONSIVE */

@media (max-width: 800px) {
    body { padding: 0; }
    
    .site-header { 
        display: flex;
        flex-direction: column; 
        height: auto; 
        padding-bottom: 15px;
        
        /* STICKY LOGIC */
        position: sticky;
        top: -70px;  
        z-index: 1000;
        background-color: #cc0000;
    }
    
    .header-link h1 { margin-bottom: 15px; }
    
    /* Ensure title is Order 1 (Top) */
    .header-link { order: 1; width: 100%; }
    
    /* Ensure Controls are Order 2 (Bottom) */
    .mobile-controls-wrapper { 
        order: 2; 
        position: static; 
        width: 100%; 
        display: flex; 
        justify-content: center; 
        align-items: center; 
        gap: 15px; 
        pointer-events: auto; 
        padding-top: 5px; /* Added a tiny bit of breathing room at the top */
    }

    .archive-dropdown-container, .theme-toggle { position: static; transform: none; }
    .theme-toggle:hover { transform: scale(1.1); }
    .main-content-row { gap: 0; padding: 0 15px; }
    .main-content-row > .main-box { max-width: 100%; width: 100%; margin: 0 0 15px 0; }
    .padded-box { margin: 15px; }
    .nav-menu-box { margin: 0 15px 15px 15px; }
    .match-entry { font-size: 0.85rem; }
    .ad-row { max-width: 100%; margin-left: 15px; margin-right: 15px; padding-left: 0; padding-right: 0; padding-top: 15px; padding-bottom: 15px; }

    /* Generic Selects */
    select, .custom-select { color: #000 !important; -webkit-text-fill-color: #000 !important; opacity: 1; }

    /* HEADER MENU OVERRIDE */
    .archive-select { color: #cc0000 !important; -webkit-text-fill-color: #cc0000 !important; }

    /* Dark Mode Adjustments */
    body.dark-mode select, body.dark-mode .custom-select { color: #fff !important; -webkit-text-fill-color: #fff !important; }
    body.dark-mode .archive-select { color: #cc0000 !important; -webkit-text-fill-color: #cc0000 !important; background-color: #fff !important; }
    body.dark-mode .ad-row { background-color: #1e1f20 !important; border-color: #444746 !important; color: #e3e3e3 !important; box-shadow: none !important; border-top: 1px solid #444746 !important; border-left: 1px solid #444746 !important; border-right: 1px solid #444746 !important; border-bottom: 2px solid #444746 !important; }
}