/* Overrides for the by-day version. Inherits from styles.css */

/* Day selector — the defining feature of this version */
.day-strip {
  position: sticky;
  top: 60px;
  z-index: 40;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  padding: 14px 0;
}

.day-strip-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  align-items: center;
}

.day-strip-inner::-webkit-scrollbar { display: none; }

.day-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  padding: 10px 14px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper);
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
  flex-shrink: 0;
}

.day-tab:hover { border-color: var(--ink-muted); }

.day-tab.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.day-tab .dow {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
}
.day-tab.active .dow { color: rgba(251,247,238,0.7); }

.day-tab.today .dow { color: var(--accent); }
.day-tab.active.today .dow { color: var(--accent-soft); }

.day-tab .date {
  font-family: "Source Serif 4", serif;
  font-size: 1.4rem;
  font-weight: 600;
  margin-top: 2px;
  line-height: 1;
}

.day-tab .count {
  font-size: 0.68rem;
  color: var(--ink-muted);
  margin-top: 3px;
}
.day-tab.active .count { color: rgba(251,247,238,0.55); }

/* Category jump nav inside a day */
.cat-jump {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 24px;
}

.cat-jump::-webkit-scrollbar { display: none; }

.cat-jump a {
  flex-shrink: 0;
  padding: 6px 12px;
  font-size: 0.82rem;
  color: var(--ink-soft);
  border: 1px solid transparent;
  border-radius: 999px;
  white-space: nowrap;
}

.cat-jump a:hover {
  border-color: var(--rule);
  color: var(--ink);
}

/* Day header */
.day-header {
  padding: 40px 0 20px;
  text-align: center;
}

.day-header .day-of-week {
  font-family: "Source Serif 4", serif;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--accent);
  letter-spacing: 0.04em;
}

.day-header h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  margin: 4px 0 8px;
}

.day-header .day-summary {
  color: var(--ink-soft);
  font-size: 1.02rem;
  max-width: 620px;
  margin: 0 auto;
}

.day-header .weather-line {
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}

/* Category section block — used inside a day */
.cat-section {
  padding: 36px 0;
  border-top: 1px solid var(--rule);
  scroll-margin-top: 180px;
}

.cat-section:first-of-type { border-top: none; }

.cat-section-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
}

.cat-section-head .icon {
  font-size: 1.4rem;
  line-height: 1;
}

.cat-section-head h2 {
  font-size: 1.5rem;
  margin: 0;
}

.cat-section-head .summary {
  margin-left: auto;
  color: var(--ink-muted);
  font-size: 0.88rem;
}

/* Bigger hero on home for this variant */
.hero-day {
  padding: 60px 0 40px;
  text-align: center;
}

.hero-day h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); }

.hero-day .day-card-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  max-width: 1100px;
  margin: 40px auto 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}
.hero-day .day-card-grid::-webkit-scrollbar { display: none; }

.hero-day .day-card-grid > * {
  flex: 0 0 calc((100% - 60px) / 7); /* show ~7 cards at once, more scroll behind */
  scroll-snap-align: start;
  min-width: 0;
}

@media (max-width: 800px) {
  .hero-day .day-card-grid > * {
    flex: 0 0 calc((100% - 30px) / 3);
  }
}

.day-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 18px 12px;
  text-align: center;
  transition: all 0.15s;
  cursor: pointer;
  display: block;
}

.day-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(31, 27, 22, 0.08);
  border-color: var(--accent);
}

.day-card.today {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.day-card.today:hover { box-shadow: 0 10px 22px rgba(31, 27, 22, 0.18); }

.day-card .dow {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.day-card.today .dow { color: var(--accent-soft); }

.day-card .date {
  font-family: "Source Serif 4", serif;
  font-size: 2rem;
  font-weight: 600;
  margin: 6px 0 8px;
  line-height: 1;
}

.day-card .stats {
  font-size: 0.74rem;
  color: var(--ink-muted);
  line-height: 1.5;
}
.day-card.today .stats { color: rgba(251,247,238,0.7); }

.day-card .vibe {
  margin-top: 8px;
  font-family: "Source Serif 4", serif;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--ink-soft);
  min-height: 2.4em;
}
.day-card.today .vibe { color: rgba(251,247,238,0.85); }

/* Compact list item used within categories */
.item-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  align-items: center;
}

.item-row:last-child { border-bottom: none; }

.item-row .item-name {
  font-family: "Source Serif 4", serif;
  font-size: 1.08rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.item-row .item-meta {
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin-top: 3px;
}

.item-row .item-right {
  text-align: right;
  font-size: 0.85rem;
}

.item-row .item-hours {
  font-family: "Source Serif 4", serif;
  font-weight: 600;
  color: var(--accent);
  font-size: 0.95rem;
}

.item-row .price {
  color: var(--ink-soft);
  font-size: 0.82rem;
  margin-top: 2px;
}

/* "Featured today" callout */
.featured-today {
  background: var(--ink);
  color: var(--paper);
  padding: 30px;
  border-radius: 6px;
  margin: 20px 0 30px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
}

@media (max-width: 700px) {
  .featured-today { grid-template-columns: 1fr; text-align: center; }
}

.featured-today .ft-time {
  font-family: "Source Serif 4", serif;
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--accent-soft);
  line-height: 1;
}

.featured-today .ft-body h3 {
  color: var(--paper);
  font-size: 1.4rem;
  margin: 0 0 4px;
}

.featured-today .ft-body p {
  color: rgba(251,247,238,0.75);
  margin: 0;
  font-size: 0.95rem;
}

.featured-today .ft-tag {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-soft);
  font-weight: 600;
  margin-bottom: 4px;
  display: block;
}

/* Mini-stat band for "today at a glance" */
.glance-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper);
  overflow: hidden;
  margin: 20px 0 30px;
}

@media (max-width: 700px) { .glance-band { grid-template-columns: repeat(2, 1fr); } }

.glance-band .stat {
  padding: 18px;
  border-right: 1px solid var(--rule);
  text-align: center;
}

.glance-band .stat:last-child { border-right: none; }

@media (max-width: 700px) {
  .glance-band .stat:nth-child(2) { border-right: none; }
  .glance-band .stat:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
}

.glance-band .stat .num {
  font-family: "Source Serif 4", serif;
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
}

.glance-band .stat .num .accent { color: var(--accent); }

.glance-band .stat .lbl {
  margin-top: 6px;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
}

/* Reading rhythm: section divider */
.sub-divider {
  text-align: center;
  margin: 30px 0;
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  color: var(--ink-muted);
  text-transform: uppercase;
}

.sub-divider::before,
.sub-divider::after {
  content: "—";
  margin: 0 14px;
  color: var(--rule);
}

/* Tag pills for categorization */
.tag-pill {
  display: inline-block;
  padding: 2px 8px;
  background: var(--bg-alt);
  border-radius: 999px;
  font-size: 0.7rem;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  margin-left: 6px;
}

/* Variant brand mark to differentiate the version */
.brand .version-tag {
  display: inline-block;
  margin-left: 8px;
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  background: var(--accent);
  color: var(--paper);
  padding: 2px 6px;
  border-radius: 3px;
  vertical-align: middle;
  font-family: "Inter", sans-serif;
}

/* ═════════════════════════════════════════════════════════════════════════
   EVENTS AT A GLANCE · month calendar + day-detail event cards
   ═══════════════════════════════════════════════════════════════════════ */
.events-glance-intro {
  margin: -12px 0 24px;
  color: var(--ink-muted);
  font-size: 0.95rem;
}

.events-glance-grid {
  display: grid;
  grid-template-columns: minmax(300px, 360px) 1fr;
  gap: 36px;
  align-items: start;
}

/* ── calendar ── */
.cal {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 16px;
}
.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.cal-title {
  font-family: "Source Serif 4", serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
}
.cal-nav {
  width: 36px;
  height: 36px;
  border: 1px solid var(--rule);
  background: var(--bg);
  border-radius: 6px;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.15s;
}
.cal-nav:hover:not([disabled]) { border-color: var(--accent); color: var(--accent); }
.cal-nav[disabled] { opacity: 0.3; cursor: default; }

.cal-dow-row,
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-dow {
  text-align: center;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-bottom: 6px;
}
.cal-grid { margin-top: 2px; }

.cal-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 6px;
  font-family: "Inter", sans-serif;
  font-size: 0.92rem;
  color: var(--ink-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.12s;
}
.cal-cell.empty { cursor: default; }
.cal-cell:not(.empty):hover { background: var(--bg-alt); border-color: var(--rule); }
.cal-cell .cal-num { line-height: 1; }

/* a day that has events */
.cal-cell.has-events { color: var(--ink); font-weight: 600; }
.cal-cell .cal-dot {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* today */
.cal-cell.is-today { box-shadow: inset 0 0 0 1.5px var(--accent-soft); }

/* selected day */
.cal-cell.is-selected {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.cal-cell.is-selected:hover { background: var(--ink); }
.cal-cell.is-selected .cal-dot { background: var(--accent-soft); }

/* ── day detail ── */
.cal-detail-head {
  font-family: "Source Serif 4", serif;
  font-size: 1.45rem;
  font-weight: 600;
  margin: 0 0 18px;
  color: var(--ink);
}
.cal-empty {
  color: var(--ink-muted);
  font-family: "Source Serif 4", serif;
  font-style: italic;
  font-size: 1.05rem;
  padding: 8px 0 4px;
}

.event-list { display: flex; flex-direction: column; gap: 16px; }

.event-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 18px 20px;
}
.event-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.event-title {
  margin: 0;
  font-family: "Source Serif 4", serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ink);
}
.event-type {
  flex-shrink: 0;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 3px 10px;
}
.event-meta {
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--ink-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.event-when { font-weight: 600; color: var(--ink-soft); }
.event-blurb {
  margin: 10px 0 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.5;
}
.event-foot {
  margin-top: 14px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.event-badge {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 5px 12px;
  border-radius: 999px;
}
.event-badge.free { background: rgba(47, 125, 79, 0.12); color: var(--open); }
.event-badge.ticketed { background: var(--accent-soft); color: #7a2d18; }
.event-badge.tba { background: rgba(138, 147, 136, 0.16); color: var(--ink-soft); }
.event-note { font-size: 0.8rem; color: var(--ink-muted); font-style: italic; }

/* ── collapsible event cards (day panel): uniform blocks, click for more ── */
.event-card.is-collapsible { display: flex; flex-direction: column; }
.event-card.is-collapsible .event-detail { display: none; }
.event-card.is-collapsible.is-expanded .event-detail {
  display: block;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}
.event-card.is-collapsible .event-detail .event-poster { margin-top: 0; }
.event-expand {
  margin-top: auto;
  align-self: flex-start;
  background: none;
  border: none;
  padding: 12px 0 0;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  font-family: inherit;
}
.event-expand::after { content: " \2193"; }
.event-card.is-expanded .event-expand::after { content: " \2191"; }
.event-expand:hover { text-decoration: underline; }
#day-events .event-card.is-collapsible:not(.is-expanded) { min-height: 208px; }
/* collapsed shows a clamped description; full text on expand */
.event-card.is-collapsible .event-blurb { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 10px; min-height: 2.8em; }
.event-card.is-collapsible.is-expanded .event-blurb { -webkit-line-clamp: unset; overflow: visible; min-height: 0; }
.event-card.is-collapsible .event-meta { border-bottom: 1px solid var(--rule); padding-bottom: 12px; }
.event-card.is-collapsible .event-foot { margin-top: 12px; }
.event-card.is-collapsible .event-who { margin-top: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event-card.is-collapsible.is-expanded .event-who { white-space: normal; overflow: visible; }
/* reserve 2 lines for the title so 1- and 2-line titles collapse to equal height */
.event-card.is-collapsible .event-title { min-height: 2.5em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.event-card.is-collapsible .event-meta { min-height: 2.4em; align-content: start; }
.event-card.is-collapsible .event-card-head { flex-wrap: nowrap; align-items: flex-start; }
.event-card.is-collapsible .event-title { min-width: 0; }
.event-card.is-collapsible .event-type { margin-top: 2px; }

/* ── poster art · shows the whole poster (portrait flyers letterbox softly) ── */
.event-poster {
  margin: -2px 0 14px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--bg-alt);
  border: 1px solid var(--rule);
}
.event-poster-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: contain;
  object-position: center;
}

/* ── who · host / presenter / lineup ── */
.event-who {
  margin: 10px 0 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.45;
}
.event-who-label,
.event-why-label {
  display: inline-block;
  margin-right: 8px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  vertical-align: 1px;
}

/* ── why · the "why you'd go" editorial aside ── */
.event-why {
  margin: 10px 0 0;
  padding: 9px 12px;
  border-left: 2px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 4px 4px 0;
  font-family: "Source Serif 4", serif;
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.event-why-label {
  color: var(--accent);
  font-style: normal;
}

/* ═══════════════════════════════════════════════════════════════════════
   DAILY OVERVIEW · collapsible day panel under the "What day are you here?"
   day strip. Fed by #day-detail from js/events.js. Shows the tapped day's
   events AND what's open that day (from the businesses directory).
   Collapsed by default → takes ZERO space until a day is tapped.
   ═══════════════════════════════════════════════════════════════════════ */
.day-events { display: none; padding: 4px 0 16px; }
.day-events.is-open { display: block; animation: dayExpand 0.22s ease both; }
@keyframes dayExpand {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* panel header · day title + close button */
.day-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
#day-events .cal-detail-head { font-size: 1.55rem; margin: 0; }
.day-events-close {
  flex-shrink: 0;
  font-family: "Inter", sans-serif;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  background: var(--bg-alt);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  transition: all 0.15s;
}
.day-events-close:hover { border-color: var(--accent); color: var(--accent); }

/* sub-sections (Happening / Open) */
.day-section { margin-top: 20px; }
.day-sub-head {
  font-family: "Inter", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 12px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--rule);
}
.day-sub-count { font-weight: 600; letter-spacing: 0.04em; }

/* events grid inside the panel · compact cards so more fit before scrolling */
#day-events .event-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  gap: 14px;
  align-items: start;
}
#day-events .event-poster-img { max-height: 168px; }
#day-events .cal-empty {
  margin: 0;
  padding: 14px 16px;
  background: var(--bg-alt);
  border: 1px dashed var(--rule);
  border-radius: 8px;
}

/* "what's open" · collapsible dropdown sections, one per category */
.day-open-group {
  margin-bottom: 0;
  border-bottom: 1px solid rgba(122, 132, 116, 0.18);
}
.day-open-cat {
  font-family: "Source Serif 4", serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--accent);
  margin-bottom: 4px;
}
/* when the category header is a <summary> it becomes the dropdown toggle */
details.day-open-group > summary.day-open-cat {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 11px 2px;
  user-select: none;
}
details.day-open-group > summary.day-open-cat::-webkit-details-marker { display: none; }
details.day-open-group > summary.day-open-cat::before {
  content: "\25B8";                 /* ▸ */
  color: var(--accent);
  font-size: 0.8em;
  line-height: 1;
  transition: transform 0.15s ease;
}
details.day-open-group[open] > summary.day-open-cat::before { transform: rotate(90deg); }
details.day-open-group > summary.day-open-cat:hover { color: var(--ink); }
.day-open-cat-count {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--ink-muted);
}
.day-open-body { padding: 2px 2px 14px; }

/* "SEE EVENTS" · recurring classes consolidated behind a bold callout button,
   expanding to a compact one-line-per-class list on the right of the panel */
.see-events {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin: 4px 0 10px;
}
summary.see-events-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--paper);
  background: var(--accent);
  padding: 9px 16px;
  border-radius: 999px;
  user-select: none;
  transition: background 0.15s ease;
}
summary.see-events-btn::-webkit-details-marker { display: none; }
summary.see-events-btn::after {
  content: "\25B8";                 /* ▸ */
  font-size: 0.9em;
  transition: transform 0.15s ease;
}
details.see-events[open] > summary.see-events-btn::after { transform: rotate(90deg); }
summary.see-events-btn:hover { background: #854848; }
.see-events-count { font-weight: 600; opacity: 0.85; }
.see-events-body {
  margin-top: 12px;
  width: 100%;
  max-width: 460px;
}
.see-event-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(122, 132, 116, 0.16);
  font-size: 0.9rem;
}
.see-event-row:last-child { border-bottom: none; }
.se-title { font-family: "Source Serif 4", serif; font-weight: 600; color: var(--ink); }
.se-time { color: var(--ink-muted); font-size: 0.8rem; }
.se-who { color: var(--ink-muted); font-size: 0.78rem; }
.se-price { margin-left: auto; color: var(--ink-muted); font-size: 0.8rem; }
a.se-book { color: var(--accent); font-weight: 600; font-size: 0.82rem; }
a.se-book:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .see-events { align-items: stretch; }
  .see-events-body { max-width: none; }
}
/* meal sub-labels under Food (Breakfast / Lunch / Dinner) */
.day-open-meal {
  font-family: "Inter", sans-serif;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 9px 0 2px;
}
.day-open-meal:first-of-type { margin-top: 1px; }
.day-open-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 0 22px;
}
.day-open-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(122, 132, 116, 0.16);
  font-size: 0.88rem;
}
.day-open-name { color: var(--ink); font-weight: 500; }
a.day-open-name:hover { color: var(--accent); text-decoration: underline; }
.day-open-hours {
  color: var(--ink-muted);
  font-size: 0.8rem;
  margin-left: auto;
  white-space: nowrap;
}
.day-open-now {
  flex-shrink: 0;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--open);
  background: rgba(47, 125, 79, 0.13);
  padding: 2px 7px;
  border-radius: 999px;
}
.day-open-all {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
}
.day-open-all:hover { text-decoration: underline; }

/* selected day-strip card highlight while its panel is open */
.day-card.is-active {
  box-shadow: 0 0 0 2px var(--accent);
  border-color: var(--accent);
}

@media (max-width: 640px) {
  #day-events .event-list { grid-template-columns: 1fr; }
  #day-events .cal-detail-head { font-size: 1.3rem; }
  .day-open-list { grid-template-columns: 1fr; }
}

.event-btn {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  border: 1px solid var(--rule);
  color: var(--ink);
  background: var(--bg);
  transition: all 0.15s;
}
.event-btn:hover { border-color: var(--accent); color: var(--accent); }
.event-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}
.event-btn.primary:hover { background: #9a3a22; border-color: #9a3a22; color: var(--paper); }

/* ── mobile: stack calendar over the day list, bigger tap targets ── */
@media (max-width: 760px) {
  .events-glance-grid { grid-template-columns: 1fr; gap: 28px; }
  .cal { padding: 14px; }
  .cal-cell { font-size: 1rem; border-radius: 8px; }
  .cal-detail-head { font-size: 1.3rem; }
  .event-card { padding: 16px; }
  .event-btn { padding: 10px 16px; }      /* ≥44px tall tap target */
}

/* ═══════════════════════════════════════════════════════════════════════
   COMPACT CALENDAR · scoped to the home "Planning a visit?" marquee widget.
   Tightens the whole calendar's scale so it balances the copy beside it.
   ═══════════════════════════════════════════════════════════════════════ */
#events-at-a-glance .cal { padding: 9px; max-width: 248px; }
#events-at-a-glance .cal-head { margin-bottom: 6px; }
#events-at-a-glance .cal-title { font-size: 0.86rem; }
#events-at-a-glance .cal-nav { width: 23px; height: 23px; font-size: 0.85rem; border-radius: 5px; }
#events-at-a-glance .cal-dow-row,
#events-at-a-glance .cal-grid { gap: 2px; }
#events-at-a-glance .cal-dow { font-size: 0.5rem; padding-bottom: 3px; }
#events-at-a-glance .cal-cell { font-size: 0.68rem; border-radius: 4px; }
#events-at-a-glance .cal-cell .cal-dot { bottom: 3px; width: 3.5px; height: 3.5px; }
#events-at-a-glance .cal-detail { margin-top: 12px; }
#events-at-a-glance .cal-detail-head { font-size: 0.95rem; margin-bottom: 10px; }

/* Scroll the day's events inside the widget instead of growing it tall.
   The roll bar is always-present and styled so it reads as intentional. */
#events-at-a-glance .event-list {
  gap: 10px;
  max-height: 214px;
  overflow-y: scroll;
  padding-right: 9px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--bg-alt);
}
#events-at-a-glance .event-list::-webkit-scrollbar { width: 9px; }
#events-at-a-glance .event-list::-webkit-scrollbar-track {
  background: var(--bg-alt);
  border-radius: 999px;
}
#events-at-a-glance .event-list::-webkit-scrollbar-thumb {
  background: var(--accent-soft);
  border-radius: 999px;
  border: 2px solid var(--bg-alt);
}
#events-at-a-glance .event-list::-webkit-scrollbar-thumb:hover { background: var(--accent); }
#events-at-a-glance .event-card { padding: 12px 14px; border-radius: 5px; }
#events-at-a-glance .event-title { font-size: 0.96rem; }
#events-at-a-glance .event-type { font-size: 0.54rem; padding: 2px 7px; }
#events-at-a-glance .event-meta { font-size: 0.74rem; margin-top: 4px; }
#events-at-a-glance .event-blurb { font-size: 0.82rem; margin-top: 7px; }
#events-at-a-glance .event-foot { margin-top: 10px; gap: 7px; }
#events-at-a-glance .event-badge { font-size: 0.63rem; padding: 4px 8px; }
#events-at-a-glance .event-btn { font-size: 0.73rem; padding: 6px 11px; }
/* Poster becomes a small teaser thumbnail inside the tight scroll widget. */
#events-at-a-glance .event-poster { margin: 0 0 9px; }
#events-at-a-glance .event-poster-img { max-height: 120px; object-fit: cover; object-position: center top; }
#events-at-a-glance .event-who { font-size: 0.78rem; margin-top: 7px; }
#events-at-a-glance .event-who-label,
#events-at-a-glance .event-why-label { font-size: 0.52rem; margin-right: 6px; }
#events-at-a-glance .event-why { font-size: 0.8rem; padding: 7px 9px; margin-top: 8px; }

/* On phones the marquee stacks; let the calendar use the full width again. */
@media (max-width: 800px) {
  #events-at-a-glance .cal { max-width: none; }
  #events-at-a-glance .cal-cell { font-size: 0.95rem; }
  #events-at-a-glance .event-list { max-height: 360px; }
}

/* ── Header utility · stacked bubbles (2026-07-14, per Kendall) ──────────────
   "Submit an event or correction" becomes a rounded bubble matching the Marfa
   Public Radio + live-clock chips. On desktop the three chips arrange so the
   Submit bubble stacks over the Radio bubble, with the "Right now" time bubble
   vertically centered between the two on the left. */
.submit-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.submit-pill::before {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--paper);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
}
.submit-pill:hover { border-color: var(--accent); color: var(--ink); }

@media (min-width: 701px) {
  .header-utility {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-areas:
      "time radio  search"
      "time submit search";
    align-items: center;
    column-gap: 12px;
    row-gap: 7px;
  }
  .header-utility .marfa-clock { grid-area: time;   margin-right: 0; justify-self: center; }
  .header-utility .submit-pill { grid-area: submit; justify-self: center; }
  .header-utility .marfa-radio { grid-area: radio;  margin-right: 0; justify-self: center; }
  .header-utility .search-btn  { grid-area: search; }
}

/* Keep nav labels on one line so "Plan an Event" never wraps */
nav.primary a { white-space: nowrap; }

/* Plan an Event · primary nav CTA button */
.nav-cta{background:var(--accent)!important;color:#f4f3eb!important;padding:7px 16px!important;border:1px solid var(--accent)!important;border-radius:999px!important;font-weight:600!important;line-height:1;transition:background .15s ease,border-color .15s ease;}.nav-cta:hover{background:#824747!important;border-color:#824747!important;color:#f4f3eb!important;}.nav-cta:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}