.calendar-container { 
    background: white; 
    padding: 10px; 
    border-radius: 8px; 
}

.month-tabs { 
    display: flex; 
    overflow-x: auto; 
    gap: 5px; 
    margin-bottom: 10px;
    padding: 10px 0; 
}

.month-tabs button {
    background-color: lightgreen; /* Button background color */
    color: black;              /* Button text color  */
    padding: 10px 20px;        /* Size: increases button height and width */
    font-size: 16px;           /* Size: increases text size */
    font-weight: bold;
    border: none;              /* Removes default browser border */
    border-radius: 4px;        /* Softens button corners */
    cursor: pointer;           /* Changes cursor to hand on hover */
    white-space: nowrap;       /* Prevents text from wrapping on mobile */
}

.month-tabs button:hover {
    color: white;
    background-color: green; /* Changes color when user hovers over it  */

}

.month-tabs button:focus {
    color: white;
    background-color: green; /* Changes color when user hovers over it  */
}

#yearDisplay {
    font-size: 24px;
    font-weight: bold;
    padding: 20px;
    text-align: center; 
}

.month-grid { 
  display: grid; 
  grid-template-columns: repeat(7, 1fr); 
  gap: 2px; 
  background: white; 
}

.day-header {
    background-color: lightgreen;
    color: black;
    font-weight: bold;
    text-align: center;
    padding: 10px 0;
    border-radius: 4px;        /* Softens button corners */
}

.day-cell { 
  background: white; 
  font-size: 20px;
  font-weight: bold;
  border: 1px solid lightgrey;
  min-height: 80px; /* Space for comments */
  padding: 5px;
  display: flex;
  flex-direction: column;
}

.comment-space { 
    flex-grow: 1; 
    font-size: 0.7em;
    color: black; 
}

.garbage-notice {
    margin-top: 20px;
    padding: 15px;
    background-color: white;
    border-left: 5px solid #28a745; /* Green accent */
    font-size: 1.1em;
    line-height: 1.5;
}

.printCalendar {
    display: flex;
    justify-content: center; /* Centers horizontally */
    margin-top: 20px;        /* Creates the gap from the grid  */
}

.printCalendar button {
    background-color: lightgreen; /* Button background color */
    color: black;              /* Button text color  */
    padding: 10px 20px;        /* Size: increases button height and width */
    font-size: 16px;           /* Size: increases text size */
    font-weight: bold;
    border: none;              /* Removes default browser border */
    border-radius: 4px;        /* Softens button corners */
    cursor: pointer;           /* Changes cursor to hand on hover */
    white-space: nowrap;       /* Prevents text from wrapping on mobile */
}

.printCalendar button:hover {
    color: white;
    background-color: green; /* Changes color when user hovers over it  */
}

 @media print {
    /* 1. Hide navigation, buttons, and headers */
    .menu-bar, .month-tabs, .title-section, button, footer {
        display: none !important;
    }

    /* 2. Reset container for paper margins */
    body, .calendar-container {
        margin: 0;
        padding: 0;
        width: 100%;
    }

    /* 3. Optimize the Grid for A4/Letter size */
    .month-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr); /* Ensure 7 columns */
        gap: 0;
        border: 1px solid #000;
    }

    .day-cell {
        border: 1px solid #eee;
        min-height: 1.2in; /* Forces a consistent box height on paper */
        page-break-inside: avoid;
    }

    /* 4. Force colors to print  */
    .day-cell span, .comment-space {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}