/ * Lists */
li {
	margin-top: .5em;
	list-style-type: none;
}

li.keep {
	margin-top: -.2em;
}
li.selected {font-weight: bold;}

/* Links: keep link color consistent across states */
a:hover, a:active, a:visited, a:link  {color:black;}

a:hover, a:active {
	text-decoration: underline;
	text-decoration-style: dotted;
}

/* Typography: base font sizing for body and tables */
body, body table {font-size: 14px;}


/* === Calendar Layout === */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(3, auto);
    column-gap: 5em;
    row-gap: 2.5em;
    justify-content: start;
    margin: 0 0 3em 0;
}
.calendar-month { margin: 0 0 1.5em 0; width:auto; }
/* Hide pre-start months on screen */
.hidden-month {
    display: none;
}
@media (max-width:1024px){
    .calendar-grid {
        grid-template-columns: 1fr;
        gap: 1.5em;
    }
    .hidden-mobile-month {
        display: none;
    }
}
.calendar-month td{padding:0;}
.calendar-month td .day-number{margin:0 auto;position:relative;top:0.1em;}
.calendar-month caption {
    text-align: center;
    font-weight: bold;
    margin-bottom: .5em;
    font-size: 1.2em;
    color: var(--accent)
}
.calendar-month caption .caption-year {
      display: none;
}


.legend {
    margin: 0;
    font-size: 1em;
    flex-shrink: 0;
}

.legend td {
    width: auto;
    padding: 0.0em 0.2em;
    text-align: left;  /* left align all text in legend */
}

td.label {
    padding-right: 2.5em;
}

.legend td:first-child {
    padding-left: 0;
    padding-right: 0;
}

.legend .day-number {
    top: 0;
    box-sizing: border-box;
}

/* Per-year legends are print-only */
.legend-print {
    display: none;
}

  @media (max-width: 1024px) {
      .calendar-month caption .caption-year {
          display: inline;
      }
  }

  @media print {
      .calendar-month {
          margin: 0 0 0.6em 0;
          width: auto;
          page-break-inside: avoid;
      }
      .hidden-month {
          display: table !important;
      }
      .hidden-mobile-month {
          display: table !important;
      }
  }
.calendar-month th{text-align:center;font-weight:normal;padding:4px;}
.calendar-month td{width:14.28%;height:38px;text-align:center;vertical-align:middle;position:relative; border:1px solid white; padding:0.15em;}
.day-number { display: flex; justify-content: center; align-items: center; width: 2em; height: 2em; position: relative; top: 0.1em; font-weight: normal; }
.nsd .day-number { background-color: var(--accent); color: white; border-radius: 50%; }
.holiday .day-number { background-color: var(--accent); color: white; border-radius: 0%; }
.nsd-designated .day-number {
    color: var(--accent);
    border-radius: 0;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid  var(--accent);
}

.nsd-designated .day-number::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--accent);
    border-radius: 50%;
    z-index: 0;
    border: none;
}

.nsd-designated .day-number span {
    position: relative;
    z-index: 1;
    color: white;
}



.sunday .day-number { background-color: rgba(0,0,0,0.25); color: white; border-radius: 50%; }

.year-break {
    page-break-before: always;
}

.arrow { font-weight: bold; text-decoration: none; }
@media print { .arrow { display: none; } }

.year-header {
    font-size: 2em;
    font-weight: bold;
    margin: 1em 0;
    color: black;
}
.year-header a.arrow {
    color: var(--accent);
    font-weight: bold;
    text-decoration: none;
}

@media print {
    .calendar-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: 0.7em;
        row-gap: 1.6em !important;
        justify-content: space-between;
        align-items: start;
        align-content: start;
        grid-auto-rows: min-content;
        margin: 0;
        width: 100%;
    }
    .calendar-month {
        margin: 0 0 1.25em 0 !important;
        width: fit-content;
        max-width: 100%;
        justify-self: center;
        page-break-inside: avoid;
    }
    .calendar-month caption {
        text-align: center;
        font-size: 1.05em;
        font-weight: bold;
        margin-bottom: 0.35em;
        color: var(--accent);
    }

    .year-header {
        margin: 0 0 0.25em 0 !important;
        font-size: 1.4em !important;
    }

    .legend {
        margin: 0 !important;
        font-size: 0.9em !important;
    }
    table.legend {
        display: block !important;
        margin: 0 0 1.9em 0 !important;
    }

    /* Print: hide the single top legend; per-year legends will be inserted for each year */
    #legend-top {
        display: none !important;
    }

    /* Print: ensure per-year legends show and have spacing */
    table.legend.legend-print {
        display: block !important;
        margin: 0 0 1.9em 0 !important;
    }

    /* Print: add top breathing room on pages after a year-break (legend is the first element on the new page) */
    .year-break + table.legend.legend-print {
        margin-top: 0.25in !important;
    }

    .calendar-month th {
        padding: 1px !important;
        font-size: 0.85em !important;
        line-height: 1 !important;
    }

    .calendar-month td {
        height: 22px !important;
        padding: 0 !important;
    }

    .day-number {
        width: 1.45em !important;
        height: 1.45em !important;
        font-size: 0.85em !important;
        top: 0 !important;
    }

    .nsd .day-number {
        color: white !important;
        border-radius: 50% !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .holiday .day-number {
        color: white !important;
        border-radius: 0 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .nsd-designated .day-number {
        color: var(--accent) !important;
        border-radius: 0 !important;
        position: relative !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        border: 2px solid  var(--accent) !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .nsd-designated .day-number::before {
        background-color: var(--accent) !important;
        border-radius: 50% !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .year-break { page-break-before: always; }
}


@media screen and (min-width: 1025px) {
    body {
        margin-left: 6em;
    }
}

@media screen and (max-width: 1024px) {
    body {
        margin-left: 1em;
        margin-right: 1em;
    }
}

@media print {
    body {
        margin: 0.25in 0.35in !important;
        width: auto !important;
        max-width: none !important;
        text-align: left;
        font-size: 11pt !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    @page {
        margin: 0.25in 0.35in;
    }
    .legend {
        font-size: 1em; /* keep legend font size unchanged */
    }
}

/* Mobile print: tighten slightly to avoid 1-line/page spill */
@media print and (max-width: 1024px) {
    @page {
        margin: 0.25in 0.35in;
    }

    .calendar-grid {
        row-gap: 1.25em !important;
    }

    table.legend {
        margin: 0 0 1.4em 0 !important;
    }

    .calendar-month {
        margin: 0 0 0.9em 0 !important;
    }

    .calendar-month td {
        height: 19px !important;
    }

    .year-break + table.legend.legend-print {
        margin-top: 0.24in !important;
    }
}