/* - - - - Page layout - - - - */
.calendar-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1rem;
    font-family: "Courier New", Courier, monospace;
    color: #f4ecd8;
}

.calendar-title {
    text-align: center;
    font-size: 2.5rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #e0b64a;
    margin-bottom: 1rem;
}

/* Weekday header + day grid BOTH use 7 equal columns so they line up */
.weekday-row,
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);      /* 7 columns, each an equal fraction */
}

.weekday-row {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-bottom: 2px solid #e0b64a;
    padding-bottom: 0.5rem;
}

.calendar-grid {
    gap: 2px;
    background: #e0b64a;            /* thin gutters between squares... */
    border: 2px solid #e0b64a;      /* gold shows through gaps = printed grid lines */
}

/* Each day square */
.day-cell {
    background: #141414;              /* near-black square face */
    min-height: 110px;                  /* keeps empty squares from collapsing flat */
    padding: 0.4rem;
    position: relative;                 /* lets us pin the date number to a corner */
    overflow: hidden;                   /* filler images won't spill outside the square */
}

/* A day that has a show — warmer, more present */
.day-cell.has-show { background: #241d12; }

.show-info {
  margin-top: 0.35rem;
  font-size: 0.7rem;
  line-height: 1.25;
}

/* Venue as a solid gold "stub" — high contrast, pops off the dark square */
.show-headliner {
  display: inline-block;
  background: #e0b64a;         /* gold fill */
  color: #141414;              /* near-black text on gold = strong contrast */
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.1rem 0.3rem;       /* the padding is what makes it read as a "stub" */
}

.show-city {
  color: #f4ecd8;              /* bright cream, up from 0.85 opacity */
  margin-top: 0.2rem;
}

.day-number { font-weight: bold; opacity: 0.8; }

/* Spillover days from prev/next month */
.day-cell.inactive {
  background: #121212;      /* solid, barely above the page black — no gold bleed */
}
.day-cell.inactive .day-number {
  color: #3a3a3a;          /* dim grey number = "not this month" */
  opacity: 1;
}
/* Fade any filler that lands on a spillover cell, without fading the whole cell */
.day-cell.inactive .filler-img {
  opacity: 0.2;
}

/* ---- Arrow controls ---- */
.calendar-controls {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 1.5rem;
}

.cal-arrow {
    font-family: "Courier New", monospace;
    font-size: 3rem;
    font-weight: bold;
    line-height: 1;
    background: transparent;
    color:#e0b64a;
    border: 2px solid #e0b64a;
    padding: 0.2rem 1.2rem;
    cursor: pointer;
}

.cal-arrow:hover { background:#e0b64a; color:#141414 }

/* - - - - Modal - - - - */
.modal-overlay {
    position: fixed;
    inset: 0;                                       /* top/right/bottom/left: 0 → covers screen */
    background: rgba(0, 0, 0, 0.75);              /* dim the page behind */
    display: flex;
    align-items: center;                            /* vertical centering */
    justify-content: center;                        /* horizontal centering */
}

.modal-overlay.hidden { display: none; }            /* JS adds/removes .hidden to show/hide */

.modal-box {
    background: #141414;
    border: 3px solid #e0b64a;
    max-width: 500px;
    width: 90%;
    padding: 2rem;
    position: relative;                             /* anchors the close button */
    color: #f4ecd8;
}

.modal-close {
    position:absolute;
    top: 0.5rem;
    right: 0.75rem;
    background: none;
    border: none;
    color: #e0b64a;
    font-size: 1.5rem;
    cursor: pointer;
}

/* Empty day decorated with a filler image */
.day-cell.has-filler { position: relative; }

.filler-img {
    display: block;
    width: 100%;
    height: 70px;              /* room under the date number */
    object-fit: contain;       /* whole image shows, nothing cropped */
    margin-top: 0.35rem;
    opacity: 0.9;
}

.filler-caption {
    font-size: 0.65rem;
    text-align: center;
    color: #8a7a6a;            /* muted, so it reads caption not a headline */
    margin-top: 0.2rem;
}

/* Show squares invite a click */
.day-cell.clickable { cursor: pointer; }
.day-cell.clickable:hover { background: #241d12; }   /* slightly brighter warm tint */

/* Modal content */
.modal-date {
    color: #e0b64a;
    font-size: 1.3rem;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.modal-venue { font-size: 1.1rem; font-weight: bold; }
.modal-city  { color: #8a7a6a; margin-bottom: 1rem; }

.modal-line { margin-bottom: 0.4rem; }
.modal-line span {
    color: #e0b64a;            /* gold label, e.g. "Time:" */
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    margin-right: 0.4rem;
}