body {
    margin: 0;
    /* Remove default body margin for full width header */
    max-width: 100%;
}

header {
    position: sticky;
    /* Toggles between relative and fixed positioning */
    top: 0;
    /* The point at which the element sticks to the top of the viewport */

    /* Ensures content doesn't show through */
    color: black;
    /*padding: 20px 0px;*/
    z-index: 999;
    /* Ensures the header stays on top of other elements */
    width: 100%;
}

div#header_channel {
    background-color: #9ecdc7;
    display: flex;
    justify-content: center;
    /* Centers horizontally */
    align-items: center;
    /* Centers vertically */
    padding: 1em 0;
    border-bottom: 1px solid grey;
}

select#channel_selector {
    appearance: none;
    background-color: transparent;
    border: 0;
    font-size: 30pt;
    font-weight: bold;
    text-align: center;
    font-family: sans-serif;
    user-select: none;
}

select#channel_selector:focus {
    outline: none;
}

div#header_date {
    display: flex;
    /* Arranges the items in a row */
    /*gap: 0px; */
    /* Adds space between the squares */
    overflow-x: auto;
    scrollbar-width: none;
    font-family: sans-serif;
    user-select: none;
}

/* Hide the default radio input visually but keep it accessible */
div#header_date input[type="radio"] {
    /* Use opacity: 0 instead of display: none for better screen reader accessibility */
    opacity: 0;
    position: absolute;
    pointer-events: none;
    /* Allows clicks to pass through to the label */
}

/* Style the labels to look like squares/buttons */
div#header_date label {
    display: inline-block;
    padding: 0.6em 0px;
    font-size: 14pt;
    min-width: 8ch;
    /* Adjust size as needed */
    background-color: #c2c5c5;
    /*border: 0px solid #ccc;*/
    /*border-radius: 0;*/
    /* Slight rounding for a "soft square" look, or 0 for sharp corners */
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
    /*aspect-ratio: 1 / 1;*/
    /* Keeps the label as a perfect square */
    text-align: center;
    /*line-height: 1;*/
    /* Centers text vertically if only text is used */
}

/* Style for the checked state */
div#header_date input[type="radio"]:checked+label {
    background-color: #296d68;
    /* Blue background when selected */
    /*border-color: #0056b3;*/
    color: white;
    /* White text for contrast */
}

div.program_listing {
    display: flex;
    min-height: 3.5em;
    align-items: center;
    font-family: sans-serif;
    font-size: 16pt;
    border-top: 1px solid grey;
    user-select: none;
}

div.program_listing_time {
    font-size: 12pt;
    padding: 0 0 0 1ch;
}

div.program_listing_title {
    padding: 0px 1ch;
    white-space: nowrap;
    /* Prevents text from wrapping to a new line */
    overflow: hidden;
    /* Hides any content that overflows the box */
    text-overflow: ellipsis;
    /* Displays an ellipsis (...) for clipped text (optional) */
}

/* Add hover effects 
div#header_date label:hover {
    background-color: #ddd;
}

div#header_date input[type="radio"]:checked+label:hover {
    background-color: #0056b3;
}*/