/*
    Welcome to our CSS file! CSS stands for "Cascading Style Sheets"
    
    CSS is like the paint and decorations for our website:
    - HTML builds the structure (like building blocks)
    - CSS makes it look pretty (like painting those blocks)
    
    Think of CSS rules like giving instructions to the computer:
    "For all buttons, make them blue and rounded"
*/

/* ========================================
   CSS VARIABLES FOR THEMING
   ======================================== */

/* Light theme colors (default) */

:root {
    --bg-primary: #f8fafc;
    --bg-secondary: #fff;
    --bg-tertiary: #f1f5f9;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --text-heading: #0f172a;
    --border-color: #e2e8f0;
    --border-light: #f1f5f9;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 5%);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%);
    --modal-overlay: rgb(0 0 0 / 50%);
    --sidebar-hover: #f8fafc;
    --button-hover: #f1f5f9;
    --accent-primary: #6366f1;
    --accent-primary-hover: #4f46e5;
    --accent-primary-light: #eef2ff;
    --accent-secondary: #ec4899;
    --accent-secondary-hover: #db2777;
    --countdown-gradient-start: #6366f1;
    --countdown-gradient-end: #ec4899;
    --help-heading: #6366f1;
    --success: #10b981;
    --warning: #f59e0b;
    --error: #ef4444;
}

/* Dark theme colors */

[data-theme="dark"] {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --text-heading: #f8fafc;
    --border-color: #334155;
    --border-light: #475569;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 50%);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 30%), 0 2px 4px -2px rgb(0 0 0 / 30%);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 30%), 0 4px 6px -4px rgb(0 0 0 / 30%);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 30%), 0 8px 10px -6px rgb(0 0 0 / 30%);
    --modal-overlay: rgb(0 0 0 / 70%);
    --sidebar-hover: #334155;
    --button-hover: #334155;
    --accent-primary: #818cf8;
    --accent-primary-hover: #6366f1;
    --accent-primary-light: #312e81;
    --accent-secondary: #f472b6;
    --accent-secondary-hover: #ec4899;
    --countdown-gradient-start: #818cf8;
    --countdown-gradient-end: #f472b6;
    --help-heading: #818cf8;
    --success: #34d399;
    --warning: #fbbf24;
    --error: #f87171;
}

/* The * selector means "select EVERYTHING on the page" */

* {
    /* Remove all default spacing that browsers add */
    margin: 0;      /* Space OUTSIDE elements */
    padding: 0;     /* Space INSIDE elements */
    
    /* This makes it easier to calculate sizes - the width includes padding and border */
    box-sizing: border-box;
}

/* Style the body - this is the whole webpage background */

body {
    /* Use the nicest fonts available on the device (different for Mac, Windows, etc.) */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    
    /* Set background and text colors using CSS variables for theming */
    background: var(--bg-primary);
    color: var(--text-primary);
    
    /* These make fonts look smoother on different operating systems */
    -webkit-font-smoothing: antialiased;          /* For Safari and Chrome */
    -moz-osx-font-smoothing: grayscale;           /* For Firefox on Mac */

    /* Make scrolling feel smooth when using touch screens like iPads */
    -webkit-overflow-scrolling: touch;
    
    /* Smooth transition when switching themes */
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Better line height for readability */
    line-height: 1.6;
}

/* The container holds all our content and centers it on the page */

.container {
    max-width: 1440px;      /* Don't get wider than 1440 pixels (keeps text readable) */
    margin: 0 auto;         /* "auto" centers the container horizontally */
    padding: 24px;          /* Add 24 pixels of space inside all sides */
    min-height: 100vh;      /* Full viewport height */
}

/* The header is the banner at the top with the title and countdown */

header {
    background: var(--bg-secondary);                /* Use theme background color */
    padding: 32px 40px;                             /* Generous padding for breathing room */
    border-radius: 16px;                            /* More rounded corners */
    box-shadow: var(--shadow-lg);                   /* Larger shadow for depth */
    margin-bottom: 24px;                            /* Space below the header */
    
    /* Flexbox makes items sit side-by-side and handles spacing automatically */
    display: flex;
    justify-content: space-between;                 /* Push items to opposite ends */
    align-items: center;                            /* Center items vertically */
    gap: 24px;                                      /* Space between items */
    flex-wrap: nowrap;                              /* Don't let items wrap to next line */
    
    /* Smooth transition when switching themes */
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Subtle border for definition */
    border: 1px solid var(--border-light);
}

/* Style just the h1 heading that's INSIDE the header */

header h1 {
    font-size: 32px;                /* Larger, bolder title */
    font-weight: 700;               /* Bold weight */
    color: var(--text-heading);     /* Use theme heading color */
    flex: 1;                        /* Take up available space */
    margin: 0;                      /* Remove default margin */
    min-width: 0;                   /* Allow shrinking if needed */
    
    /* These three properties handle text that's too long */
    overflow: hidden;               /* Hide text that doesn't fit */
    text-overflow: ellipsis;        /* Show "..." when text is cut off */
    white-space: nowrap;            /* Don't let text wrap to a new line */
    
    /* Smooth transition when switching themes */
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Letter spacing for elegance */
    letter-spacing: -0.02em;
}

/* The countdown box shows "X days until next race" */

.countdown-box {
    /* Modern gradient with vibrant colors */
    background: linear-gradient(135deg, var(--countdown-gradient-start) 0%, var(--countdown-gradient-end) 100%);
    color: #fff;                                    /* White text */
    padding: 16px 24px;                             /* More generous padding */
    border-radius: 12px;                            /* Rounded corners */
    font-size: 15px;                                /* Slightly larger text */
    font-weight: 600;                               /* Semi-bold */
    box-shadow: var(--shadow-md), 0 0 0 1px rgb(255 255 255 / 10%) inset;  /* Layered shadows */
    
    /* Transition means changes happen smoothly over time (like animation) */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 1;                                 /* Allow some shrinking if needed */
    min-width: 0;                                   /* Allow shrinking below content size */
    max-width: 600px;                               /* Allow wider countdown text */
    
    /* Add a subtle border highlight */
    border: 1px solid rgb(255 255 255 / 20%);
    
    /* Handle text overflow */
    overflow: hidden;                               /* Hide overflowing text */
    text-overflow: ellipsis;                        /* Show "..." when text is cut off */
    white-space: nowrap;                            /* Keep text on one line */
}

/* When you hover your mouse over the countdown box, it lifts up a bit! */

.countdown-box:hover {
    transform: translateY(-2px) scale(1.01);        /* Move up 2 pixels and grow slightly */
    box-shadow: var(--shadow-xl), 0 0 0 1px rgb(255 255 255 / 15%) inset;  /* Bigger shadow */
}

/* The actual text inside the countdown box */

#countdown-text {
    display: inline;                                /* Display as normal text */
    letter-spacing: 0.01em;                         /* Slight letter spacing */
}

/* ========================================
   Theme Toggle Button
   ======================================== */

/* The theme toggle button for switching between light/dark/auto themes */

.theme-toggle {
    background: var(--bg-tertiary);                 /* Tertiary background color */
    border: 2px solid var(--border-color);          /* Border using theme color */
    border-radius: 12px;                            /* Rounded but not circular */
    width: 48px;                                    /* Fixed width for touch targets */
    height: 48px;                                   /* Fixed height for touch targets */
    cursor: pointer;                                /* Show hand cursor on hover */
    display: flex;                                  /* Use flexbox for centering */
    align-items: center;                            /* Center vertically */
    justify-content: center;                        /* Center horizontally */
    font-size: 22px;                                /* Size of the emoji icon */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);  /* Smooth transitions */
    flex-shrink: 0;                                 /* Don't let this button get squished */
    box-shadow: var(--shadow-sm);                   /* Subtle shadow */
}

.theme-toggle:hover {
    background: var(--button-hover);                /* Light background on hover */
    transform: scale(1.05);                         /* Slightly grow on hover */
    box-shadow: var(--shadow-md);                   /* Deeper shadow on hover */
    border-color: var(--accent-primary);            /* Accent color border on hover */
}

.theme-toggle:active {
    transform: scale(0.98);                         /* Shrink when clicked */
}

.theme-icon {
    display: inline-block;                          /* Display as block for animations */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);  /* Smooth icon transitions */
}

/* The main-content holds the sidebar (left) and calendar (right) side-by-side */

.main-content {
    display: flex;              /* Use flexbox to put things in a row */
    gap: 24px;                  /* 24 pixels of space between sidebar and calendar */
    align-items: start;         /* Align items to top */
}

/* The sidebar is the panel on the left with the calendar checkboxes */

.sidebar {
    background: var(--bg-secondary);                /* Use theme background color */
    padding: 24px;                                  /* Space inside */
    border-radius: 16px;                            /* More rounded corners */
    box-shadow: var(--shadow-lg);                   /* Larger shadow for depth */
    min-width: 280px;                               /* At least 280 pixels wide */
    max-width: 320px;                               /* But no more than 320 pixels wide */
    height: fit-content;                            /* Only as tall as it needs to be */
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--border-light);          /* Subtle border */
    position: sticky;                               /* Stick to viewport when scrolling */
    top: 24px;                                      /* Stay 24px from top when sticky */
}

/* The h2 heading inside the sidebar */

.sidebar h2 {
    font-size: 20px;                                /* Medium-sized text */
    font-weight: 700;                               /* Bold */
    margin-bottom: 20px;                            /* Space below */
    color: var(--text-heading);                     /* Use theme heading color */
    border-bottom: 2px solid var(--accent-primary); /* Accent color line underneath */
    padding-bottom: 12px;                           /* Space between text and line */
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: -0.01em;                        /* Tight letter spacing */
}

/* The sidebar header contains the "Calendars" title and toggle button */

.sidebar-header {
    display: flex;                          /* Put items in a row */
    justify-content: space-between;         /* Push items to opposite ends */
    align-items: center;                    /* Center vertically */
    margin-bottom: 20px;                    /* Space below */
}

/* Make sure the h2 in the header doesn't have bottom margin */

.sidebar-header h2 {
    margin-bottom: 0;                       /* No space below */
    flex: 1;                                /* Take available space */
}

/* The calendar toggle button (only visible on phones to save space) */

.calendar-toggle {
    background: var(--accent-primary-light);  /* Light accent background */
    border: 2px solid var(--accent-primary);  /* Accent border */
    cursor: pointer;                        /* Show hand cursor when hovering */
    padding: 10px;                          /* Space inside button */
    border-radius: 10px;                    /* Rounded corners */
    color: var(--accent-primary);           /* Accent color */
    font-size: 18px;                        /* Text size */
    display: none;                          /* Hidden by default (only shown on phones) */
    
    /* These sizes make the button easier to tap on touchscreens */
    min-height: 48px;                       /* At least 48 pixels tall */
    min-width: 48px;                        /* At least 48 pixels wide */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;                      /* Can't select the button text */
    font-weight: 600;                       /* Semi-bold */
}

/* Media queries change styles based on screen width */

/* This one applies when screen is BIGGER than 768 pixels (tablets and computers) */
@media (width > 768px) {
    /* On big screens, ALWAYS hide the toggle button */

    .calendar-toggle {
        display: none !important;           /* !important means "definitely do this" */
    }

    /* On big screens, always show the calendar list fully expanded */

    .calendar-list {
        max-height: none !important;        /* No height limit */
        opacity: 1 !important;              /* Fully visible (1 = 100% visible) */
    }
}

/* When you hover over the toggle button, change the background */

.calendar-toggle:hover {
    background: var(--accent-primary);      /* Solid accent background */
    color: #fff;                            /* White text */
    transform: scale(1.05);                 /* Slightly grow */
}

/* When you click/press the toggle button, it shrinks slightly (gives feedback) */

.calendar-toggle:active {
    transform: scale(0.98);                 /* Shrink to 98% of normal size */
}

/* The arrow icon inside the toggle button */

.toggle-icon {
    display: inline-block;                  /* Display as a block so we can rotate it */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);  /* Smooth rotation animation */
    
    /* On mobile, start pointing right (collapsed state) */
}

/* On mobile phones (screens 768 pixels or smaller) */
@media (width <=768px) {
    /* Rotate the arrow to point right (collapsed) by default */

    .toggle-icon {
        transform: rotate(-90deg);          /* -90 degrees means rotate left (so arrow points right) */
    }

    /* When expanded, rotate the arrow to point down */

    .calendar-toggle.expanded .toggle-icon {
        transform: rotate(0deg);            /* 0 degrees = pointing down */
    }
}

/* Control buttons for select all/deselect all */

.calendar-controls {
    display: flex;                          /* Put buttons side-by-side */
    gap: 12px;                              /* Space between buttons */
    margin-bottom: 20px;                    /* Space below the buttons */
}

.control-button {
    flex: 1;                                /* Each button takes equal width */
    padding: 12px 16px;                     /* More generous padding */
    background: var(--accent-primary);      /* Primary accent background */
    color: #fff;                            /* White text */
    border: none;                           /* No border */
    border-radius: 10px;                    /* Rounded corners */
    cursor: pointer;                        /* Show hand cursor */
    font-size: 14px;                        /* Text size */
    font-weight: 600;                       /* Semi-bold */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 44px;                       /* Minimum height for touch */
    box-shadow: var(--shadow-sm);           /* Subtle shadow */
    letter-spacing: 0.01em;                 /* Slight letter spacing */
}

.control-button:hover {
    background: var(--accent-primary-hover);  /* Darker on hover */
    transform: translateY(-1px);            /* Lift up slightly */
    box-shadow: var(--shadow-md);           /* Deeper shadow */
}

.control-button:active {
    transform: translateY(0) scale(0.98);   /* Press down effect */
}

/* The calendar list contains all the checkboxes */

.calendar-list {
    display: flex;                          /* Use flexbox for layout */
    flex-direction: column;                 /* Stack items vertically (one on top of another) */
    gap: 8px;                               /* 8 pixels of space between each checkbox */
}

/* Each calendar item is one checkbox with its label */

.calendar-item {
    display: flex;                          /* Put checkbox and label side-by-side */
    align-items: center;                    /* Center items vertically */
    padding: 12px;                          /* More padding */
    border-radius: 10px;                    /* Rounded corners */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--bg-primary);          /* Subtle background */
    border: 1px solid var(--border-light);  /* Subtle border */
}

/* When you hover over a calendar item, change its background */

.calendar-item:hover {
    background: var(--button-hover);        /* Light background using theme color */
    border-color: var(--accent-primary);    /* Accent border on hover */
    transform: translateX(2px);             /* Slight slide to right */
    box-shadow: var(--shadow-sm);           /* Subtle shadow */
}

/* Style the checkboxes */

.calendar-item input[type='checkbox'] {
    width: 20px;                            /* 20 pixels wide */
    height: 20px;                           /* 20 pixels tall */
    margin-right: 12px;                     /* Space to the right */
    cursor: pointer;                        /* Show hand cursor when hovering */
    accent-color: var(--accent-primary);    /* Use accent color for checkbox */
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.calendar-item input[type='checkbox']:hover {
    transform: scale(1.1);                  /* Grow slightly on hover */
}

/* Style the labels next to checkboxes */

.calendar-item label {
    cursor: pointer;                        /* Show hand cursor (whole label is clickable) */
    flex: 1;                                /* Take available space */
    font-size: 14px;                        /* Text size */
    font-weight: 500;                       /* Medium weight */
    display: flex;                          /* Put color box and text side-by-side */
    align-items: center;                    /* Center items vertically */
    color: var(--text-primary);             /* Text color */
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* The small colored square next to each calendar name */

.calendar-color {
    width: 20px;                                /* 20 pixels wide */
    height: 20px;                               /* 20 pixels tall (makes a square) */
    border-radius: 6px;                         /* More rounded corners */
    margin-right: 10px;                         /* Space to the right */
    border: 2px solid rgb(255 255 255 / 20%);   /* Semi-transparent border */
    box-shadow: var(--shadow-sm);               /* Subtle shadow */
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.calendar-item:hover .calendar-color {
    transform: scale(1.1);                      /* Grow on hover */
}

/* The main calendar container on the right side */

.calendar-container {
    flex: 1;                                    /* Take up all remaining space */
    background: var(--bg-secondary);            /* Background using theme color */
    padding: 24px;                              /* Space inside */
    border-radius: 16px;                        /* More rounded corners */
    box-shadow: var(--shadow-lg);               /* Larger shadow for depth */
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--border-light);      /* Subtle border */
}

/* The calendar itself */

#calendar {
    max-width: 100%;                            /* Don't overflow the container */
}

/* ========================================
   FullCalendar Customization
   ======================================== */

/* FullCalendar is the library that creates our calendar
   These rules customize how it looks to match our design */

.fc {
    font-size: 14px;                            /* Text size for calendar */
    font-family: inherit;                       /* Use same font as rest of page */
    
    /* Make scrolling smooth on touch devices */
    -webkit-overflow-scrolling: touch;
}

/* Style all the blue buttons in the calendar (like "Today", "Month", "Week") */

.fc-button-primary {
    background-color: var(--accent-primary) !important;     /* Primary accent background */
    border-color: var(--accent-primary) !important;         /* Matching border */
    
    /* Make buttons easy to tap on touchscreens */
    min-height: 44px !important;                /* At least 44 pixels tall */
    
    /* Smooth animation when button changes */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    
    /* Capitalize button text (Today, Month, Week, Day) */
    text-transform: capitalize !important;
    
    /* Better button styling */
    font-weight: 600 !important;
    border-radius: 10px !important;
    padding: 10px 16px !important;
    box-shadow: var(--shadow-sm) !important;
    letter-spacing: 0.01em !important;
}

/* When you hover over a button, make it darker */

.fc-button-primary:hover {
    background-color: var(--accent-primary-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-md) !important;
}

/* When you click/press a button, press it down */

.fc-button-primary:active {
    transform: translateY(0) scale(0.98) !important;
}

/* When a button is disabled (can't click it), make it faded */

.fc-button-primary:disabled {
    opacity: 0.5;                               /* 50% transparent (faded) */
}

/* The day numbers in the calendar (1, 2, 3, etc.) */

.fc-daygrid-day-number {
    color: var(--text-secondary);               /* Text color using theme */
    font-weight: 600;                           /* Semi-bold */
    
    /* Make day numbers easier to tap on phones */
    min-height: 32px;                           /* At least 32 pixels tall */
    display: flex;                              /* Use flexbox for centering */
    align-items: center;                        /* Center vertically */
    justify-content: center;                    /* Center horizontally */
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* The day names at the top (Mon, Tue, Wed, etc.) */

.fc-col-header-cell-cushion {
    color: var(--text-secondary);               /* Text color using theme */
    font-weight: 700;                           /* Bold */
    text-transform: uppercase;                  /* Uppercase letters */
    font-size: 12px;                            /* Smaller text */
    letter-spacing: 0.05em;                     /* Spaced letters */
}

/* Style for calendar events (the colored boxes showing races) */

.fc-event {
    cursor: pointer;                            /* Show hand cursor (events are clickable) */
    border-radius: 6px !important;              /* Rounded corners */
    border: none !important;                    /* No border */
    padding: 4px 6px !important;                /* Padding */
    
    /* Add smooth animation when you touch/click an event */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    
    /* Subtle shadow for depth */
    box-shadow: 0 1px 2px rgb(0 0 0 / 10%) !important;
}

/* When you hover over an event, lift it up */

.fc-event:hover {
    transform: translateY(-1px) scale(1.02) !important;
    box-shadow: 0 4px 6px rgb(0 0 0 / 15%) !important;
    z-index: 1 !important;
}

/* When you press/click an event, press it down for feedback */

.fc-event:active {
    transform: translateY(0) scale(1) !important;
}

/* Calendar toolbar (the header with navigation) */

.fc-toolbar {
    margin-bottom: 24px !important;
    gap: 12px !important;
}

.fc-toolbar-title {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--text-heading) !important;
    letter-spacing: -0.02em !important;
}

/* Today's date highlighting */

.fc-day-today {
    background-color: var(--accent-primary-light) !important;
}

/* Calendar cells */

.fc-daygrid-day {
    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.fc-daygrid-day:hover {
    background-color: var(--bg-tertiary) !important;
}

/* ========================================
   Responsive Design - Tablets
   ======================================== */

/* "Responsive" means the website changes layout based on screen size
   This makes it work well on phones, tablets, and computers! */

/* For tablets and small laptops (screens 1024 pixels or smaller) */
@media (width <=1024px) {
    /* Reduce padding to save space */

    .container {
        padding: 20px;                          /* Less space around edges */
    }

    /* Less space between sidebar and calendar */

    .main-content {
        gap: 20px;
    }

    /* Make sidebar narrower to save space */

    .sidebar {
        min-width: 240px;
        max-width: 280px;
    }
    
    header {
        padding: 24px 32px;
    }
    
    header h1 {
        font-size: 28px;
    }
}

/* ========================================
   Responsive Design - Mobile Phones
   ======================================== */

/* For phones (screens 768 pixels or smaller) */
@media (width <=768px) {
    /* Even less padding on phones */

    .container {
        padding: 16px;
    }

    /* Stack sidebar ABOVE calendar instead of side-by-side */

    .main-content {
        flex-direction: column;                 /* "column" means stack vertically */
        gap: 20px;
    }

    /* Make sidebar full width on phones */

    .sidebar {
        max-width: 100%;                        /* Take full width available */
        min-width: 100%;
        padding: 20px;
        position: static;                       /* Remove sticky positioning on mobile */
    }

    /* Show the toggle button on mobile phones */

    .calendar-toggle {
        display: flex;                          /* Make button visible */
        align-items: center;                    /* Center content vertically */
        justify-content: center;                /* Center content horizontally */
    }

    /* Make calendar controls collapsible on mobile to save space */

    .calendar-controls {
        overflow: hidden;                       /* Hide content that doesn't fit */
        
        /* Transition creates smooth expand/collapse animation */
        transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        
        /* Start collapsed (hidden) */
        max-height: 0;                          /* No height = collapsed */
        opacity: 0;                             /* Invisible */
        margin: 0;
        padding: 0;
    }

    /* When expanded (user clicked the button), show the controls */

    .calendar-controls.expanded {
        max-height: 200px;                      /* Big enough for the buttons */
        opacity: 1;                             /* Fully visible */
        margin-bottom: 20px;                    /* Space below */
        padding: 0;
    }

    /* Make calendar list collapsible on mobile to save space */

    .calendar-list {
        overflow: hidden;                       /* Hide content that doesn't fit */
        
        /* Transition creates smooth expand/collapse animation */
        transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        
        /* Start collapsed (hidden) */
        max-height: 0;                          /* No height = collapsed */
        opacity: 0;                             /* Invisible */
        margin: 0;
        padding: 0;
    }

    /* When expanded (user clicked the button), show the list */

    .calendar-list.expanded {
        max-height: 1000px;                     /* Big enough to fit all calendars */
        opacity: 1;                             /* Fully visible */
        margin: 20px 0 0;                       /* Space above */
        padding: 0;
    }

    /* Style the sidebar header on mobile */

    .sidebar-header {
        border-bottom: 2px solid var(--accent-primary);  /* Accent line */
        padding-bottom: 12px;
        margin-bottom: 20px;
    }

    .sidebar-header h2 {
        border-bottom: none;                    /* Remove duplicate border */
        padding-bottom: 0;
    }

    /* Make checkboxes easier to tap on phones */

    .calendar-item input[type='checkbox'] {
        min-height: 48px;                       /* Bigger tap target */
        min-width: 48px;
        transform: scale(0.5);                  /* Scale down visually while maintaining tap target */
        transform-origin: left center;          /* Keep it aligned to the left */
    }

    /* Make labels easier to tap */

    .calendar-item label {
        min-height: 48px;                       /* Big tap target */
        padding: 8px 0;
        
        /* Prevent accidentally selecting text when tapping */
        user-select: none;
    }

    /* Less padding in calendar container */

    .calendar-container {
        padding: 20px;
    }

    /* Adjust header for mobile */

    header {
        padding: 20px 24px;
        gap: 16px;
        flex-wrap: wrap;                        /* Let items wrap to new line if needed */
    }

    /* Smaller title on phones */

    header h1 {
        font-size: 24px;
        white-space: normal;                    /* Allow title to wrap */
        overflow: visible;
        text-overflow: unset;
        min-width: auto;
    }

    /* Smaller countdown box on phones */

    .countdown-box {
        font-size: 13px;
        padding: 12px 16px;
        white-space: normal;                    /* Allow text to wrap */
        text-align: center;
        border-radius: 10px;
    }

    /* Make FullCalendar toolbar mobile-friendly */

    /* The toolbar has the buttons at the top of the calendar */

    .fc-toolbar {
        flex-direction: column !important;      /* Stack buttons vertically */
        gap: 12px !important;                   /* Space between rows */
    }

    /* Each group of buttons (prev/next, title, month/week/day) */

    .fc-toolbar-chunk {
        display: flex !important;
        justify-content: center !important;     /* Center buttons */
        gap: 8px !important;                    /* Small space between buttons */
    }

    /* Make all calendar buttons smaller on phones */

    .fc-button {
        padding: 10px 14px !important;
        font-size: 13px !important;
    }

    /* Space below the toolbar */

    .fc-header-toolbar {
        margin-bottom: 20px !important;
    }

    /* Make day numbers easier to read on small screens */

    .fc-daygrid-day-number {
        font-size: 14px !important;
        padding: 4px !important;
    }

    /* Make day name headers smaller */

    .fc-col-header-cell-cushion {
        padding: 10px 2px !important;
        font-size: 11px !important;
    }

    /* Make event text smaller and tighter */

    .fc-daygrid-event {
        font-size: 12px !important;
        margin: 2px 0 !important;
    }

    /* Make event titles slightly bold so they're easier to read */

    .fc-event-title {
        font-weight: 600 !important;
    }

    /* Make control buttons smaller on mobile */

    .control-button {
        padding: 10px 14px;                     /* Reduce padding */
        font-size: 13px;                        /* Smaller text */
        min-height: 40px;                       /* Smaller height while staying tappable */
    }
    
    .fc-toolbar-title {
        font-size: 20px !important;
    }
}

/* ========================================
   Responsive Design - Small Phones
   ======================================== */

/* For very small phones (screens 480 pixels or smaller) */
@media (width <=480px) {
    /* Minimal padding to save every pixel of space */

    .container {
        padding: 12px;
    }

    header {
        padding: 16px 20px;
        gap: 12px;
    }

    /* Smaller title */

    header h1 {
        font-size: 22px;
        text-align: center;                     /* Center the title */
        width: 100%;                            /* Take full width */
    }

    /* Even smaller countdown */

    .countdown-box {
        font-size: 12px;
        padding: 10px 14px;
        width: 100%;                            /* Full width */
        margin-top: 12px;                       /* Space above */
    }

    .sidebar {
        padding: 16px;
    }

    .sidebar-header h2 {
        font-size: 18px;                        /* Smaller heading */
    }

    /* Smaller toggle button */

    .calendar-toggle {
        min-height: 44px;
        min-width: 44px;
        padding: 8px;
        font-size: 16px;
    }

    .calendar-container {
        padding: 16px;
    }

    .sidebar h2 {
        font-size: 18px;
        margin-bottom: 16px;
    }

    /* Tighter spacing between checkboxes */

    .calendar-list {
        gap: 6px;
    }

    .calendar-item {
        padding: 10px;
    }

    .calendar-item label {
        font-size: 13px;                        /* Smaller text */
    }

    /* Optimize toolbar for very small screens */

    /* Let buttons wrap to multiple lines if needed */

    .fc-toolbar-chunk {
        flex-wrap: wrap !important;
    }

    /* Make buttons even smaller */

    .fc-button {
        padding: 8px 10px !important;
        font-size: 12px !important;
        min-width: 70px !important;             /* Minimum width so text fits */
    }

    /* Smaller calendar title (the month/year at top) */

    .fc-toolbar-title {
        font-size: 18px !important;
        margin: 5px 0 !important;
    }

    /* Make day numbers smaller */

    .fc-daygrid-day-number {
        font-size: 13px !important;
        padding: 2px !important;
    }

    /* Make day name headers even smaller */

    .fc-col-header-cell-cushion {
        padding: 8px 1px !important;
        font-size: 10px !important;
    }

    /* Make events very compact to fit more on screen */

    .fc-daygrid-event {
        font-size: 11px !important;
        padding: 2px 4px !important;
    }

    /* Hide event times to save space (only show event names) */

    .fc-daygrid-event .fc-event-time {
        display: none !important;               /* Hide the time completely */
    }

    /* Make control buttons stack on mobile to save horizontal space */

    .calendar-controls {
        flex-direction: column;                 /* Stack buttons vertically */
        gap: 10px;
    }

    .control-button {
        width: 100%;                            /* Full width buttons */
        padding: 8px 12px;                      /* Comfortable padding */
        font-size: 12px;                        /* Smaller text */
        min-height: 38px;                       /* Minimal height */
    }
}

/* ========================================
   Landscape Mode on Phones
   ======================================== */

/* When you turn a phone sideways (landscape orientation) */
@media (width <=768px) and (orientation: landscape) {
    /* In landscape, we have more width, so put sidebar and calendar side-by-side */

    .main-content {
        flex-direction: row;                    /* Put items in a row again */
    }

    /* Make sidebar narrower since we're in landscape */

    .sidebar {
        max-width: 250px;
        min-width: 200px;
    }

    /* Don't let header items wrap in landscape */

    header {
        flex-wrap: nowrap;
    }

    /* Keep title on one line */

    header h1 {
        white-space: nowrap;                    /* No wrapping */
        overflow: hidden;                       /* Hide overflow */
        text-overflow: ellipsis;                /* Show "..." if text is too long */
    }

    /* Keep countdown on one line */

    .countdown-box {
        white-space: nowrap;
    }
}

/* ========================================
   Help Modal
   ======================================== */

/* The help modal overlay that covers the entire screen */

.help-modal {
    display: none !important;                   /* Hidden by default - use !important to ensure it stays hidden */
    position: fixed;                        /* Fixed position (stays in place when scrolling) */
    z-index: 1000;                          /* On top of everything else */
    left: 0;
    top: 0;
    width: 100%;                            /* Full width */
    height: 100%;                           /* Full height */
    overflow: auto;                         /* Allow scrolling if content is tall */
    background-color: var(--modal-overlay); /* Semi-transparent background using theme */
    animation: fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1);  /* Smooth fade in */
}

@supports (backdrop-filter: blur(4px)) {

    .help-modal {
        backdrop-filter: blur(4px);         /* Blur the background - only if supported */
    }
}

/* Fade in animation */

@keyframes fade-in {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* When the modal is shown */

.help-modal.show {
    display: flex !important;               /* Use flexbox for centering - override the hidden state */
    align-items: center;                    /* Center vertically */
    justify-content: center;                /* Center horizontally */
}

/* The white content box inside the modal */

.help-modal-content {
    background-color: var(--bg-secondary);      /* Background using theme color */
    padding: 32px;                          /* Space inside */
    border-radius: 16px;                    /* Rounded corners */
    box-shadow: var(--shadow-xl);           /* Extra large shadow for depth */
    max-width: 640px;                       /* Don't get too wide */
    width: 90%;                             /* 90% of screen width */
    max-height: 80vh;                       /* Don't get taller than 80% of screen */
    overflow-y: auto;                       /* Allow scrolling if needed */
    position: relative;                     /* For positioning close button */
    animation: slide-in 0.3s cubic-bezier(0.4, 0, 0.2, 1);  /* Slide in animation */
    border: 1px solid var(--border-light);  /* Subtle border */
}

/* Slide in animation */

@keyframes slide-in {

    from {
        transform: translateY(-30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Close button (X) in top-right corner */

.help-modal-close {
    position: absolute;                     /* Position relative to modal-content */
    top: 20px;
    right: 24px;
    background: var(--bg-tertiary);         /* Background color */
    border: 2px solid var(--border-color);  /* Border */
    border-radius: 8px;                     /* Rounded */
    font-size: 24px;                        /* Large X */
    color: var(--text-secondary);           /* Grey color using theme */
    cursor: pointer;                        /* Hand cursor */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1;                         /* Remove extra line height */
    padding: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.help-modal-close:hover {
    color: var(--text-primary);             /* Darker on hover using theme */
    background: var(--button-hover);        /* Background on hover */
    transform: scale(1.05);                 /* Slightly grow */
    border-color: var(--accent-primary);    /* Accent border */
}

.help-modal-close:active {
    transform: scale(0.95);                 /* Shrink on click */
}

/* Modal heading */

.help-modal-content h2 {
    margin: 0 0 24px;                       /* Space below */
    color: var(--text-heading);             /* Heading color using theme */
    font-size: 28px;                        /* Large text */
    font-weight: 700;                       /* Bold */
    padding-right: 40px;                    /* Space for close button */
    letter-spacing: -0.02em;                /* Tight letter spacing */
}

/* Help sections */

.help-section {
    margin-bottom: 24px;                    /* Space between sections */
}

.help-section:last-child {
    margin-bottom: 0;                       /* No margin on last section */
}

.help-section h3 {
    color: var(--help-heading);             /* Accent color using theme */
    font-size: 18px;                        /* Medium text */
    font-weight: 600;                       /* Semi-bold */
    margin: 0 0 12px;                       /* Space below */
    border-bottom: 2px solid var(--help-heading);  /* Accent underline using theme */
    padding-bottom: 8px;
}

.help-section ul {
    list-style: none;                       /* Remove bullet points */
    padding: 0;
    margin: 0;
}

.help-section li {
    padding: 10px 0;                        /* Space above and below */
    color: var(--text-secondary);           /* Text color using theme */
    line-height: 1.6;                       /* Nice line spacing */
    font-size: 15px;                        /* Slightly larger */
}

/* Style for keyboard keys */

kbd {
    background-color: var(--button-hover);  /* Background using theme */
    border: 1px solid var(--border-color);  /* Border using theme */
    border-radius: 5px;                     /* Rounded */
    padding: 3px 8px;                       /* Space inside */
    font-family: monospace;                 /* Monospace font */
    font-size: 13px;                        /* Slightly smaller */
    box-shadow: var(--shadow-sm);           /* Subtle shadow */
    font-weight: 600;                       /* Semi-bold */
}

/* Mobile styles for help modal */

@media (width <=768px) {

    .help-modal-content {
        width: 95%;                         /* Take more width on mobile */
        padding: 24px;                      /* Less padding */
        max-height: 90vh;                   /* More height available */
    }

    .help-modal-content h2 {
        font-size: 22px;                    /* Smaller heading */
        margin-bottom: 20px;
    }

    .help-section h3 {
        font-size: 17px;                    /* Smaller subheading */
    }

    .help-section li {
        font-size: 14px;                    /* Smaller text */
    }
    
    .help-modal-close {
        top: 16px;
        right: 20px;
        width: 32px;
        height: 32px;
        font-size: 20px;
    }
}

@media (width <=480px) {

    .help-modal-content {
        padding: 20px;                      /* Even less padding */
    }

    .help-modal-content h2 {
        font-size: 20px;
    }

    .help-section h3 {
        font-size: 16px;
    }
    
    .help-modal-close {
        width: 28px;
        height: 28px;
        font-size: 18px;
    }
}

/* ========================================
   Event Details Modal
   ======================================== */

/* The event modal overlay that covers the entire screen */

.event-modal {
    display: none !important;                   /* Hidden by default */
    position: fixed;                        /* Fixed position (stays in place when scrolling) */
    z-index: 1000;                          /* On top of everything else */
    left: 0;
    top: 0;
    width: 100%;                            /* Full width */
    height: 100%;                           /* Full height */
    overflow: auto;                         /* Allow scrolling if content is tall */
    background-color: var(--modal-overlay); /* Semi-transparent background using theme */
    animation: fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1);  /* Smooth fade in */
}

@supports (backdrop-filter: blur(4px)) {

    .event-modal {
        backdrop-filter: blur(4px);         /* Blur the background - only if supported */
    }
}

/* When the modal is shown */

.event-modal.show {
    display: flex !important;               /* Use flexbox for centering */
    align-items: center;                    /* Center vertically */
    justify-content: center;                /* Center horizontally */
}

/* The content box inside the modal */

.event-modal-content {
    background-color: var(--bg-secondary);      /* Background using theme color */
    padding: 32px;                          /* Space inside */
    border-radius: 16px;                    /* Rounded corners */
    box-shadow: var(--shadow-xl);           /* Extra large shadow for depth */
    max-width: 960px;                       /* Wider modal to reduce line wrapping */
    width: 90%;                             /* 90% of screen width */
    max-height: 80vh;                       /* Don't get taller than 80% of screen */
    overflow-y: auto;                       /* Allow scrolling if needed */
    position: relative;                     /* For positioning close button */
    animation: slide-in 0.3s cubic-bezier(0.4, 0, 0.2, 1);  /* Slide in animation */
    border: 1px solid var(--border-light);  /* Subtle border */
}

/* Close button (X) in top-right corner */

.event-modal-close {
    position: absolute;                     /* Position relative to modal-content */
    top: 20px;
    right: 24px;
    background: var(--bg-tertiary);         /* Background color */
    border: 2px solid var(--border-color);  /* Border */
    border-radius: 8px;                     /* Rounded */
    font-size: 24px;                        /* Large X */
    color: var(--text-secondary);           /* Grey color using theme */
    cursor: pointer;                        /* Hand cursor */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1;                         /* Remove extra line height */
    padding: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.event-modal-close:hover {
    color: var(--text-primary);             /* Darker on hover using theme */
    background: var(--button-hover);        /* Background on hover */
    transform: scale(1.05);                 /* Slightly grow */
    border-color: var(--accent-primary);    /* Accent border */
}

.event-modal-close:active {
    transform: scale(0.95);                 /* Shrink on click */
}

/* Modal title */

.event-modal-title {
    margin: 0 0 24px;                       /* Space below */
    color: var(--text-heading);             /* Heading color using theme */
    font-size: 24px;                        /* Large text */
    font-weight: 700;                       /* Bold */
    padding-right: 40px;                    /* Space for close button */
    letter-spacing: -0.01em;                /* Tight letter spacing */
    line-height: 1.3;                       /* Better line height for wrapping */
}

/* Modal body */

.event-modal-body {
    display: flex;
    flex-direction: column;
    gap: 16px;                              /* Space between sections */
}

/* Event modal section (for each field like start, end, description) */

.event-modal-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Inline sections (for start, end, location - label and value on same line) */

.event-modal-inline {
    flex-direction: row;
    gap: 8px;
    align-items: baseline;
}

/* Hidden sections (like location or end time if not present) */

.event-modal-section.hidden {
    display: none;
}

/* Labels for each field */

.event-modal-label {
    font-weight: 700;                       /* Bold */
    color: var(--text-secondary);           /* Secondary text color */
    font-size: 13px;                        /* Small label text */
    text-transform: uppercase;              /* Uppercase */
    letter-spacing: 0.05em;                 /* Spaced letters */
}

/* Values for each field */

.event-modal-value {
    color: var(--text-primary);             /* Primary text color */
    font-size: 15px;                        /* Regular text */
    line-height: 1.6;                       /* Nice line spacing */
}

/* Special styling for description field as bullet list */

.event-modal-description {
    list-style: disc;                       /* Bullet points */
    padding-left: 20px;                     /* Indent for bullets */
    margin: 0;                              /* Remove default margin */
    color: var(--text-primary);             /* Primary text color */
    font-size: 15px;                        /* Regular text */
    line-height: 1.6;                       /* Nice line spacing */
}

.event-modal-description li {
    margin-bottom: 8px;                     /* Space between items */
    word-wrap: break-word;                  /* Break long words */
    overflow-wrap: break-word;              /* Better word breaking */
}

.event-modal-description li:last-child {
    margin-bottom: 0;                       /* No margin on last item */
}

/* Links in description */

.event-modal-description a {
    color: var(--accent-primary);           /* Use accent color */
    text-decoration: none;                  /* No underline by default */
    font-weight: 500;                       /* Medium weight */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    word-break: break-all;                  /* Break long URLs */
}

.event-modal-description a:hover {
    color: var(--accent-primary-hover);     /* Darker on hover */
    text-decoration: underline;             /* Underline on hover */
}

.event-modal-description a:active {
    opacity: 0.8;                           /* Slightly faded on click */
}

/* Map container in event modal */

.event-modal-map {
    width: 100%;                            /* Full width of modal */
    height: 400px;                          /* Fixed height for map */
    border-radius: 12px;                    /* Rounded corners */
    overflow: hidden;                       /* Clip map to rounded corners */
    border: 1px solid var(--border-color);  /* Subtle border */
    box-shadow: var(--shadow-md);           /* Medium shadow for depth */
}

/* Mobile styles for event modal */

@media (width <=768px) {

    .event-modal-content {
        width: 95%;                         /* Take more width on mobile */
        padding: 24px;                      /* Less padding */
        max-height: 90vh;                   /* More height available */
    }

    .event-modal-title {
        font-size: 20px;                    /* Smaller title */
        margin-bottom: 20px;
    }

    .event-modal-body {
        gap: 14px;                          /* Less space between sections */
    }

    .event-modal-label {
        font-size: 12px;                    /* Smaller labels */
    }

    .event-modal-value {
        font-size: 14px;                    /* Smaller values */
    }
    
    .event-modal-map {
        height: 300px;                      /* Shorter map height on mobile */
    }
    
    .event-modal-close {
        top: 16px;
        right: 20px;
        width: 32px;
        height: 32px;
        font-size: 20px;
    }
}

@media (width <=480px) {

    .event-modal-content {
        padding: 20px;                      /* Even less padding */
    }

    .event-modal-title {
        font-size: 18px;
    }

    .event-modal-label {
        font-size: 11px;
    }

    .event-modal-value {
        font-size: 13px;
    }
    
    .event-modal-map {
        height: 250px;                      /* Even shorter map on small phones */
    }
    
    .event-modal-close {
        width: 28px;
        height: 28px;
        font-size: 18px;
    }
}