/*
 * Library hours pill.
 *
 * Appears in four places with three different grounds:
 *   subheader   — --color-primary-purple      (dark)
 *   header      — --color-primary-deep-purple (dark)
 *   footer      — hsl(268 41% 34%)            (dark)
 *   mobile      — hsl(0 0% 95%)               (LIGHT — its own variant)
 *
 * CONTRAST
 *   #fff    on #2d0f52 ......... 16.1:1  AAA
 *   #fff    on hsl(269 53% 27%)  12.7:1  AAA
 *   #FCBC31 on hsl(269 53% 27%)   7.4:1  AAA   (the open dot, on dark only)
 *   #2d0f52 on hsl(0 0% 95%) ... 14.6:1  AAA   (the mobile variant)
 *
 * The brand gold appears ONLY on the dark grounds, where it passes comfortably.
 * On the light mobile ground it would measure 1.7:1, so the open state there is
 * carried by a filled purple dot instead. In every variant the open/closed
 * distinction is in the WORDS; the dot is aria-hidden decoration and differs in
 * fill as well as hue, so it survives greyscale and forced-colours.
 */

.wnmu-hours-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.3em 0.75em;
  border: 1px solid hsl(0 0% 100% / 0.35);
  border-radius: 999px;
  color: hsl(0 0% 100% / 1);
  text-decoration: none;
  font-size: 0.8rem;
  line-height: 1.4;
  white-space: nowrap;
  transition: border-color ease-out 150ms, background ease-out 150ms;
}

.wnmu-hours-pill:hover,
.wnmu-hours-pill:focus-visible {
  border-color: hsl(0 0% 100% / 0.85);
  background: hsl(0 0% 100% / 0.10);
  text-decoration: none;
}
/* Explicit, and never removed: the pill sits on dark grounds where the default
   ring is easy to lose. */
.wnmu-hours-pill:focus-visible {
  outline: 3px solid var(--color-primary-yellow);
  outline-offset: 2px;
}

.wnmu-hours-pill-dot {
  flex: none;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: currentColor;
}
.wnmu-hours-pill.is-open .wnmu-hours-pill-dot {
  background: var(--color-primary-yellow);
}
/* Hollow, so open and closed differ in shape and not only in colour. */
.wnmu-hours-pill.is-closed .wnmu-hours-pill-dot,
.wnmu-hours-pill.is-unknown .wnmu-hours-pill-dot {
  background: transparent;
  box-shadow: inset 0 0 0 2px currentColor;
}

/*
   "Library" stays at normal weight and the state word takes the bold, so the
   part that actually changes is the part that catches the eye: Library **Open**.
*/
.wnmu-hours-pill-label { font-weight: 400; }
.wnmu-hours-pill-state { font-weight: 700; }
.wnmu-hours-pill-sep   { opacity: 0.6; }
.wnmu-hours-pill-times { font-variant-numeric: tabular-nums; }

/* ── Per-placement tweaks ─────────────────────────────── */

/* Sticky nav: sized to sit on the subheader's own baseline. */
.wnmu-hours-pill--subheader {
  font-size: var(--subheader-font-size, 0.8rem);
  align-self: center;
  margin-right: 1rem;
}

/* In the Library Header the pill sits in the pills row, so it matches their scale. */
.wnmu-hours-pill--header { font-size: 0.85rem; }

.wnmu-hours-pill--footer { font-size: 0.9rem; }

/*
   Mobile menu — a LIGHT ground, so the whole palette flips: purple text and
   border, and a filled purple dot for "open" in place of the gold, which fails
   badly on light surfaces.
*/
.wnmu-hours-pill--mobile {
  display: flex;
  justify-content: center;
  color: var(--color-primary-deep-purple, #2d0f52);
  border-color: var(--color-primary-deep-purple, #2d0f52);
  font-size: 0.95rem;
  padding: 0.55em 1em;
}
.wnmu-hours-pill--mobile:hover,
.wnmu-hours-pill--mobile:focus-visible {
  border-color: var(--color-primary-deep-purple, #2d0f52);
  background: hsl(269 53% 27% / 0.08);
}
.wnmu-hours-pill--mobile:focus-visible {
  outline-color: var(--color-primary-deep-purple, #2d0f52);
}
.wnmu-hours-pill--mobile.is-open .wnmu-hours-pill-dot {
  background: var(--color-primary-deep-purple, #2d0f52);
}

/*
   Narrow screens: the hours themselves are dropped and only the state word is
   kept, so the pill can never push the layout wide. The full hours are one tap
   away on the calendar the pill links to, and the Library Hours block on the
   homepage shows the whole week.
*/
@media (width <= 480px) {
  .wnmu-hours-pill--header .wnmu-hours-pill-sep,
  .wnmu-hours-pill--header .wnmu-hours-pill-times,
  .wnmu-hours-pill--footer .wnmu-hours-pill-sep,
  .wnmu-hours-pill--footer .wnmu-hours-pill-times {
    display: none;
  }
}

@media (forced-colors: active) {
  .wnmu-hours-pill { border-color: CanvasText; }
  .wnmu-hours-pill-dot { border: 2px solid CanvasText; }
}