/* ========================= */
/* === GLOBAL & DEFAULT ==== */
/* === (Desktop & Tablet) == */
/* ========================= */

html {
    color-scheme: light dark;
    forced-color-adjust: none !important;
}

body {
    font-family: "Times New Roman", Times, serif;
    margin: 0;
    padding: 0;
    margin-bottom: 1rem;
}

.page-wrap {
    width: 90%;
    margin: 0 auto;
    margin-top:0;
}

/* Strip the default browser margin off the seasonal navigation links */
.page-wrap > p {
    margin-top: 0;
    margin-bottom: 1rem;
}

/* Day Cards Base Layout */
.day {
    border: 1px solid #000000;
    border-radius: 0.5rem;
    padding: 0.6rem;
    min-height: 30px;
    display: block; /* Default to visible */
}

.day h3 {
    margin: 0 0 0.3rem 0;
    font-size: 0.9rem;
    font-weight: bold;
    text-align: center;
}

.day .game-details {
    font-size: 0.85rem;
    line-height: 1.2;
    text-align: center;
}

/* 7-Day Grid Setup for Larger Screens */
.calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.4rem;
}

/* Weekday Header Row for Larger Screens */
.weekday-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-weight: bold;
    margin-bottom: 0.5rem;
}


/* ========================= */
/* === MOBILE OVERRIDES ==== */
/* === (Screens under 768px) */
/* ========================= */
@media (max-width: 700px) {
    
    /* Turn the 7-column grid into a single vertical stack */
    .calendar {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    /* Hide the Sun-Sat header row completely on phones */
    .weekday-header {
        display: none !important;
    }

    /* CRITICAL FIX: Vaporize empty days so ONLY your games show up */
    .calendar .day.empty {
        display: none !important;
    }
}


/* ========================= */
/* === DAY TYPE COLORS ==== */
/* ========================= */

.one { background: orange; color: black; }
.two { background: purple; color: white; }
.thr { background: white; color: black; }
.fou { background: lime; color: black; }
.vac { background: red; color: black; font-weight: bold; }


/* ========================= */
/* === LIGHT MODE THEME === */
/* ========================= */
@media (prefers-color-scheme: light) {
    body {
        background: #ffffff;
        color: #000000;
    }

    .day {
        border-color: #000000;
    }

    a:link, a:visited, a:active {
        color: black;
        text-decoration: underline;
        font-weight: normal;
    }

    a:hover {
        color: black;
        font-weight: bold;
        text-decoration: underline;
    }
}


/* ========================= */
/* === DARK MODE THEME ==== */
/* ========================= */
@media (prefers-color-scheme: dark), (forced-colors: active) {
    body {
        background: #0d1117;
        color: #ffffff;
    }

    .day {
        border-color: #444c56;
    }

    .thr {
        background: #21262d;
        color: #ffffff;
    }

    .two {
        background: #b15eff;
        color: #000000;
    }

    a:link, a:visited, a:active {
        color: white;
        text-decoration: underline;
        font-weight: normal;
    }

    a:hover {
        color: white;
        font-weight: bold;
        text-decoration: underline;
    }
}