/* Calendar grid styles for month view
   Usage: include this stylesheet on pages that output the calendar markup used in
   `test-homilies-finder.php`.

   Provides:
   - .calendar-grid : 7-column CSS Grid for weekdays
   - .weekday-header : header cells
   - .calendar-cell : day cells (in-month / out-month presentational states)
   - .calendar-item : items (homily/feast) inside a day cell
   - .cell-date : small date badge
   - responsive rules for narrow viewports
*/
:root{
  --ff-accent: #3a7bd5;
  --ff-muted: #6c757d;
  --cell-border: rgba(230, 230, 230, 0.1);
  --item-border: #e9ecef;
}

#month-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#month-nav a {
  padding: 10px;
  font-weight: 500;
}
.current-month {
  font-size: 1.4rem;
  font-weight: 500;
}

.calendar-grid{
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: start;
  width: 100%;
  box-sizing: border-box;
}

.weekday-header{
  padding: 8px 6px;
  text-align: center;
  border: 1px solid var(--cell-border);
  font-weight: 600;
  font-size: 0.95rem;
}

.calendar-cell{
  min-height: 100%;
  border: 1px solid var(--cell-border);
  padding: 8px;
  background: var(--item-bg);
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-sizing: border-box;
}

.calendar-cell.out-month{
  background: var(--bg-outmonth);
  color: var(--ff-muted);
}

/* highlight for the current day */
.calendar-cell.today{
  border-color: #f0c36d;
  box-shadow: 0 0 0 3px rgba(240,195,109,0.08) inset;
}

.calendar-cell.today .cell-date{
  border-radius: 3px;
  padding: 2px 6px;
}

.cell-date{
  font-size: 0.95rem;
  font-weight: 500;
}

/* small liturgical week marker displayed on Sundays */
.lit-week{
  font-size: 0.75rem;
  color: var(--ff-muted);
  margin-bottom: 4px;
  padding: 0 4px;
}

/* container for multiple items in a day; use flex so items can sit side-by-side
   when there's enough width, otherwise wrap into stacked cards */
.day-items{
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  min-width: 0;
}

.calendar-item{
  display: flex;
  align-items: center;
  gap: 8px;
  border-left: 4px solid transparent; /* colour comes from item context */
  border: 1px solid var(--item-border);
  padding: 6px 8px;
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
  flex: 1 1 140px; /* let items be columns when there are two */
  min-width: 0; /* allow overflow handling */
}

/* Small circle showing liturgical colour */
.liturgical-colour-dot {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.2);
  display: inline-block;
  background: var(--lit-colour, #ccc); /* use CSS custom property from parent */
}

/* Prevent overflow at very small widths */
.month-weeks{
  max-width: 100%;
  overflow-x: auto;
}

.calendar-item a{
  display:block;
  font-size: 0.9rem;
  color: var(--ff-accent);
  text-decoration: none;
}
.calendar-item a:hover{ text-decoration: underline; }

.calendar-item .meta{
  margin-top: 4px;
  font-size: 0.8rem;
  color: var(--ff-muted);
}

/* make out-of-month cells slightly dimmer */
.calendar-cell.out-month .calendar-item{ opacity: 0.6; }

/* responsive: on narrow screens show a stacked single column with weekday labels above */
@media (max-width: 720px){
  .calendar-grid{ grid-template-columns: repeat(7, minmax(0,1fr)); gap:6px; }
  .calendar-cell{ min-height: 80px; padding:6px; }
  .calendar-item{ flex: 1 1 100%; }
}

/* print-friendly: compact layout */
@media print{
  .calendar-grid{ gap:2px; }
  .calendar-cell{ min-height: 60px; padding:4px; }
  .weekday-header{ padding:4px; }
  .calendar-item{ padding:4px; border: 1px solid #ddd; }
}