/* schedule build: 2026-09-25 15:21 */
/* keep the raw Webflow output out of sight */
.hours-data, .row-center, .row-date, .row-enddate, .row-programs, .row-program, .row-tagcolors, .row-host, .row-location, .row-maplink { display:none; }
.month-label { display:none; }

.month-stack { display:flex; flex-direction:column; gap:16px;
  width:100%; max-width:680px; align-self:stretch; box-sizing:border-box; }

.month-card { background:#fff; border:1px solid #D3D1C7; border-radius:12px;
  padding:4px 20px 8px 20px; }

.month-head { font-family:inherit; font-size:23px; font-weight:600; color:#231F20;
  letter-spacing:0; line-height:1.25; padding-top:16px; padding-bottom:10px; }

/* ---- Option C row ---- */
.c-row { display:flex; flex-direction:row; gap:14px; align-items:stretch;
  padding-top:10px; padding-bottom:10px; border-top:1px solid #D3D1C7; }

.c-stripe { flex:0 0 4px; width:4px; border-radius:999px; background:#9AA0A6; }
.c-row.is-event  .c-stripe { background:#009CD6; }
.c-row.is-closed .c-stripe { background:#D92D20; }
.c-row.is-alt    .c-stripe { background:#F5C542; }

.c-body { display:flex; flex-direction:column; gap:2px; flex:1 1 auto; min-width:0; }

.c-top { display:flex; flex-direction:row; flex-wrap:wrap; gap:8px;
  align-items:center; justify-content:flex-start; }

/* Compact metadata keeps the uppercase treatment the filter chips already use. */
.c-when { font-family:inherit; font-size:14px; font-weight:700; letter-spacing:0.6px;
  color:#5F5E5A; text-transform:uppercase; line-height:1.3; }

.c-pill { flex:0 0 auto; white-space:nowrap; font-family:inherit; font-size:13px;
  font-weight:700; text-transform:uppercase; letter-spacing:0.6px; line-height:1.2;
  border-radius:999px; padding:6px 14px; color:#fff; background:#9AA0A6; }
.c-row.is-event  .c-pill { background:#0066B3; color:#fff; }
.c-row.is-closed .c-pill { background:#D92D20; color:#fff; }
.c-row.is-alt    .c-pill { background:#F5C542; color:#1A1A1A; }

.c-name { font-family:inherit; font-size:20px; font-weight:600; color:#231F20;
  line-height:1.3; margin-top:2px; }
.c-sentence { font-family:inherit; font-size:17px; font-weight:400; color:#231F20;
  line-height:1.5; }
.c-loc  { font-family:inherit; font-size:16px; font-weight:400; color:#231F20;
  line-height:1.4; }
.c-addr { font-family:inherit; font-size:15px; font-weight:400; color:#5F5E5A;
  line-height:1.4; }

/* The address is a link but not a headline: neutral ink, a quiet underline, and
   a real colour change on hover so it still reads as clickable. */
.c-addr a { color:#4A4844; text-decoration:underline;
  text-decoration-color:rgba(74,72,68,0.35); text-underline-offset:2px; }
.c-addr a:hover { color:#0066B3; text-decoration-color:#0066B3; }
.c-desc[hidden] { display:none; }
.c-more { align-self:flex-start; margin-top:4px; padding:0; border:0; background:none;
  font:inherit; font-size:16px; font-weight:600; color:#0066B3; cursor:pointer;
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.c-more:hover { color:#004E8A; }
.c-more:focus-visible { outline:2px solid #0066B3; outline-offset:2px; border-radius:3px; }

/* Keyboard users get the same affordance a mouse user gets on hover. */
.c-row a:focus-visible, .c-row button:focus-visible, .sc-chip:focus-visible,
.sc-select:focus-visible {
  outline:2px solid #0066B3; outline-offset:2px; border-radius:3px; }
.c-desc a { color:#0066B3; text-decoration:underline; text-underline-offset:2px; }
.c-desc { font-family:inherit; font-size:16px; font-weight:400; color:#231F20;
  line-height:1.6; margin-top:2px; }
.c-actions { display:flex; flex-direction:row; flex-wrap:wrap; align-items:baseline;
  gap:6px 18px; margin-top:6px; }
.c-reg  { font-size:16px; font-weight:600; color:#0066B3; text-decoration:underline;
  text-underline-offset:3px; }

/* Page-level utility line: below the hero, above the filter panel, and
   deliberately outside the filter box — it filters nothing. Same width and auto
   margins as the panel and the cards so the left edges line up.
   Quiet on purpose: smaller than the card body, regular weight, and the links
   take the sentence's own ink rather than the brand blue. They stay underlined
   so they still read as links, but at reduced contrast so they do not compete
   with the filter controls directly beneath. */
.sc-subscribe { align-self:stretch; width:100%; max-width:680px;
  margin:0 auto 18px auto; box-sizing:border-box; text-align:left;
  font-family:inherit; font-size:13.5px; font-weight:400; line-height:1.5;
  color:#5F5E5A; }
/* The three platform names must read as words inside the sentence, not as
   buttons after it. `font:inherit` alone lost to the host page's own link
   styling, which is more specific than a single class, so the selector carries
   the parent class AND the tag, and every property that could differ is stated
   outright rather than inherited. Underline is the ONLY difference from the
   surrounding text. */
.sc-subscribe a.sc-subscribe-link {
  font-family:inherit; font-size:inherit; font-weight:inherit;
  font-style:inherit; line-height:inherit; letter-spacing:inherit;
  text-transform:none; color:inherit; background:none;
  text-decoration:underline; text-decoration-color:rgba(95,94,90,0.45);
  text-decoration-thickness:1px; text-underline-offset:2px; }
/* Hover moves the underline only — never the size, weight or colour of the word. */
.sc-subscribe a.sc-subscribe-link:hover {
  color:inherit; text-decoration-color:rgba(35,31,32,0.9); }
.sc-subscribe a.sc-subscribe-link:focus-visible {
  outline:2px solid #0066B3; outline-offset:2px; border-radius:3px; }
.sc-subscribe-link { font-family:inherit; font-size:16px; font-weight:500;
  color:#5F5E5A; text-decoration:underline;
  text-decoration-color:rgba(74,72,68,0.35); text-underline-offset:3px; }
.sc-subscribe-link:hover { color:#0066B3; text-decoration-color:#0066B3; }
.sc-subscribe-link:focus-visible { outline:2px solid #0066B3; outline-offset:2px;
  border-radius:3px; }

@media (max-width:479px) {
  .c-row { gap:12px; }
  .c-when { font-size:12px; }
  .c-top { flex-direction:column; gap:6px; }
}

/* ============================================================
   TODAY'S HOURS — retyped to match the event cards: inherited
   Work Sans, #231F20 ink, the #0066B3 brand blue, #D3D1C7 borders.
   The second script still depends on every class name below.
   ============================================================ */
.status-pill { display:inline-block; flex:0 0 auto; white-space:nowrap;
  font-family:inherit; font-size:13px; font-weight:700; text-transform:uppercase;
  letter-spacing:0.6px; line-height:1.2; border-radius:999px; padding:6px 14px; }
.status-pill.is-closed  { background:#D92D20; color:#fff; }
.status-pill.is-alt     { background:#F5C542; color:#1A1A1A; }
.status-pill.is-event   { background:#0066B3; color:#fff; }
.status-pill.is-open    { background:#0A8A43; color:#fff; }
.status-pill.is-special { background:#6B7280; color:#fff; }

.hours-list { display:flex; flex-direction:column; gap:16px; width:100%;
  max-width:680px; box-sizing:border-box; }
.center-card { background:#fff; border:1px solid #D3D1C7; border-radius:12px; padding:16px 20px; }
/* align-items:flex-start, not center: a long centre name wraps to two lines and
   the pill should stay level with the first one. min-width:0 lets the name wrap
   at all — without it a flex child refuses to shrink and squashes the pill. */
.center-card-top { display:flex; flex-direction:row; gap:12px; align-items:flex-start; justify-content:space-between; }
.center-name-today { font-family:inherit; font-size:20px; font-weight:600; color:#231F20;
  line-height:1.3; min-width:0; }
.center-detail { font-family:inherit; font-size:17px; font-weight:400; color:#231F20;
  line-height:1.5; margin-top:4px; }

@media (max-width:479px) {
  .center-name-today { font-size:18px; }
  .center-detail { font-size:16px; }
  .status-pill { font-size:12px; padding:6px 12px; letter-spacing:0.6px; }
}

/* ============================================================
   Host-page defence. The home page sets text-align:center on its
   sections, and both blocks inherit it — the hours detail line and
   every Option C row drift to the middle. Pin them left wherever
   they are dropped.
   ============================================================ */
.hours-list, .hours-list *, .month-stack, .month-stack * { text-align: left; }

/* Opt-in centring. Put class "sc-center" on the wrapper that holds the block
   when it sits in a full-width section (the home page). The schedule page
   leaves it off, so its two columns stay flush left as before. */
.sc-center .hours-list, .sc-center .month-stack { margin-left:auto; margin-right:auto; }

/* ============================================================
   Filter bar. Only rendered when the Upcoming wrapper carries
   .sc-filters — the events page, not the home page teaser.
   ============================================================ */

/* ------------------------------------------------------------
   Why the cards used to change width.
   The Webflow section that hosts this feature, .lead-2.sc-filters, is
   display:flex; flex-direction:column; align-items:center. On a column flex
   container, align-items:center replaces the default stretch, so every child
   is shrink-to-fit. .upcoming-wrapper has no width of its own, so it sized to
   its content — the widest VISIBLE row. Filtering rows out narrowed the
   wrapper, and the month cards inside it followed.
   The fix is to stop the shared ancestor's children being content-sized: one
   content column, claimed explicitly, for the toolbar, the results and the
   empty state alike.
   ------------------------------------------------------------ */
.sc-filters > .sc-filterbar,
.sc-filters > .upcoming-wrapper,
.sc-filters > .sc-none {
  align-self:stretch;
  width:100%;
  max-width:680px;
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
}
.sc-filters > .upcoming-wrapper > .month-stack { width:100%; max-width:none; }

.sc-filterbar, .sc-filterbar * { text-align:left; }
/* One compact toolbar, aligned to the same column as the cards, sitting directly
   above them. Sentence case, site blue, square-ish corners — nothing about it
   should read as a separate component library. */
.sc-filterbar { width:100%; max-width:680px; align-self:stretch;
  box-sizing:border-box; margin:0 0 18px 0; padding:12px 14px;
  background:#F7F6F3; border:1px solid #E5E3DC; border-radius:8px;
  display:flex; flex-direction:column; gap:8px; }

.sc-filterrow { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }

/* Location, Program and Clear each keep their place. A control that does not
   apply is hidden with visibility, not display, so the row's geometry is the
   same in every state and nothing shifts when the type changes. */
.sc-filterrow-2 > .is-off { visibility:hidden; }
.sc-filterrow-2 .sc-select-loc  { flex:0 0 260px; width:260px; }
.sc-filterrow-2 .sc-select-prog { flex:0 0 200px; width:200px; }
.sc-filterrow-2 .sc-clear { margin-left:auto; }

.sc-chips { display:flex; flex-wrap:wrap; gap:6px; }

.sc-chip { font:inherit; font-size:14px; font-weight:500; text-transform:none;
  letter-spacing:0; line-height:1.2; padding:6px 11px; border-radius:6px;
  border:1px solid #D3D1C7; background:#fff; color:#231F20; cursor:pointer; }
.sc-chip:hover { border-color:#9AA0A6; }

/* Dropdowns match the chips: same height, same border, same corner radius. */
.sc-select { font:inherit; font-size:14px; padding:6px 9px; border-radius:6px;
  border:1px solid #D3D1C7; background:#fff; color:#231F20; max-width:100%; }


.sc-none { background:#F3F2EE; border:1px solid #D3D1C7; border-radius:12px;
  padding:16px 20px; font-size:15px; color:#5F5E5A;
  width:100%; max-width:680px; box-sizing:border-box; }

@media (max-width:479px) {
  .sc-chip { font-size:13px; padding:7px 10px; }
  .sc-filterrow-2 .sc-select-loc,
  .sc-filterrow-2 .sc-select-prog { flex:1 1 100%; width:100%; }
  .sc-filterrow-2 .sc-clear { margin-left:0; }
}

/* ---- teaser (home page): flat list, so no card wrapper to sit inside ---- */
.month-stack > .c-row:first-child { border-top:0; padding-top:0; }

/* Solid panel behind a column. Add class sc-panel in the Designer to whichever
   column needs to stay legible over a photo. */
.sc-panel { background:#F7F6F3; border:1px solid #D3D1C7; border-radius:16px;
  padding:24px; }
@media (max-width:479px) { .sc-panel { padding:16px; border-radius:12px; } }

/* ---- teaser section: one panel, centred, off the screen edges ---- */
.sc-teaser { grid-template-columns:1fr; max-width:1160px;
  margin-left:auto; margin-right:auto; }
.sc-teaser .sc-keep { width:100%; }
@media (max-width:991px) { .sc-teaser { max-width:none; margin-left:16px; margin-right:16px; } }

/* Home page cards used to change width on Read more / Show less — the same
   shrink-to-fit bug the events page had (see .sc-filters above). The home
   panel (.lead-2.sc-panel) sits in .events-section, a column flex container
   with align-items:center, so it sized to its widest visible line and opening
   a description widened it. Claim the column explicitly: full width, capped at
   the card column (680) plus panel padding. */
.events-section > .sc-panel {
  align-self:stretch;
  width:100%;
  max-width:728px;
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
}
.events-section > .sc-panel > .upcoming-wrapper { align-self:stretch; width:100%; }
.events-section .month-stack { width:100%; max-width:none; }
@media (max-width:767px) { .events-section > .sc-panel { width:calc(100% - 32px); } }

/* ============================================================
   Program tags. Every colour comes from the Monday Tags board by way of
   the CMS, so adding a tag or changing a colour needs no deploy.
   ============================================================ */
.c-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.c-top .c-tag { margin:0; }

/* Colour comes from the CMS as --tag-color; a tag with no colour set yet
   keeps the neutral pill. Nothing is listed per-code here on purpose. */
.c-tag { font-family:inherit; font-size:12px; font-weight:700; letter-spacing:0.6px; line-height:1;
  text-transform:uppercase; padding:5px 9px; border-radius:6px;
  background:var(--tag-color, #EDECE8); color:var(--tag-ink, #5F5E5A); }

/* program chips in the filter bar — outlined until selected, then filled
   in the same colour as the row tags */

/* Each axis is a labelled group, so a visitor can tell what a control is FOR
   before working out what pressing it does. Groups stack; chips inside wrap. */

/* Selected takes the site blue with white text; everything unselected stays a
   plain white control with a neutral border. One component, two states. */
.sc-chip[aria-checked="true"], .sc-chip[aria-pressed="true"] {
  background:#0066B3; border-color:#0066B3; color:#fff; font-weight:600; }


.sc-clear { font:inherit; font-size:14px; font-weight:500; color:#5F5E5A;
  background:none; border:0; padding:0; cursor:pointer; text-decoration:underline;
  text-underline-offset:3px; }
.sc-clear:hover { color:#231F20; }
.sc-clear:focus-visible { outline:2px solid #0066B3; outline-offset:2px; border-radius:3px; }

.sc-none { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.sc-none[hidden] { display:none; }


/* Today's Hours cards link to their center page. */
.center-card.is-linked { cursor: pointer; transition: background-color .12s ease; }
.center-card .center-link { color: inherit; text-decoration: none; font-weight: inherit; }
.center-card.is-linked:hover,
.center-card.is-linked:focus-within { background-color: #F7F6F3; }
.center-card.is-linked:hover .center-link { text-decoration: none; }
.center-card .center-link:focus-visible { outline: 2px solid #0066B3; outline-offset: 2px; }