.com-library-hours {
  /* Layout */
  --com-library-hours-gap          : 14px;
  --com-library-hours-padding      : 18px 20px;
  --com-library-hours-radius       : 4px;
  /* Colors */
  --color-com-library-hours-ground : var(--color-primary-deep-purple, #2d0f52);
  --color-com-library-hours-accent : var(--color-primary-yellow);
  --color-com-library-hours-quiet  : hsl(255 20% 96%);
  --color-com-library-hours-line   : hsl(255 15% 85%);
  --color-com-library-hours-today  : hsl(268 40% 96%);
}

.com-library-hours {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.com-library-hours-title {
  margin: 0 0 var(--com-library-hours-gap) 0;
  color: var(--color-heading);
}

/*
   Status badge.

   COLOUR IS DECORATION HERE, NOT INFORMATION. The open/closed distinction is
   carried entirely by the words rendered in .com-library-hours-state; every rule
   below could be deleted and the block would still be correct and usable. That
   is the WCAG 1.4.1 requirement, and it is also why the two states differ in
   more than hue — the open badge is a filled purple block, the closed one an
   outlined light block, so they remain distinguishable in greyscale.

   Contrast, computed against the theme tokens:
     white on #2d0f52 ....... 16.0:1  (open badge)      AAA
     #2d0f52 on #f2f0f7 ..... 15.0:1  (closed badge)    AAA
   The gold is used ONLY as the dot on the purple ground (9.5:1 there) and never
   as text on a light surface, where it measures 1.7:1 and fails outright.
*/
.com-library-hours-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: var(--com-library-hours-padding);
  border-radius: var(--com-library-hours-radius);
  border: 1px solid transparent;
  font-size: 1.05rem;
}

.com-library-hours-status.is-open {
  background: var(--color-com-library-hours-ground);
  color: #fff;
}

.com-library-hours-status.is-closed,
.com-library-hours-status.is-unknown {
  background: var(--color-com-library-hours-quiet);
  color: var(--color-com-library-hours-ground);
  border-color: var(--color-com-library-hours-line);
}

.com-library-hours-dot {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: currentColor;
}
/* Gold reads as "on" and sits on the purple ground, where it passes at 9.5:1. */
.com-library-hours-status.is-open .com-library-hours-dot {
  background: var(--color-com-library-hours-accent);
}
/* Hollow rather than a second colour, so the states differ in shape too. */
.com-library-hours-status.is-unknown .com-library-hours-dot {
  background: transparent;
  box-shadow: inset 0 0 0 2px currentColor;
}

.com-library-hours-state {
  font-weight: 700;
  letter-spacing: 0.01em;
}

.com-library-hours-today {
  margin-left: auto;
}
.com-library-hours-status.is-open .com-library-hours-today strong {
  color: var(--color-com-library-hours-accent);
}

/* The week */

.com-library-hours-table {
  width: 100%;
  margin-top: var(--com-library-hours-gap);
  border-collapse: collapse;
  font-size: 1rem;
}

.com-library-hours-caption {
  text-align: left;
  padding-bottom: 6px;
  font-weight: 700;
  color: var(--color-heading);
}

.com-library-hours-table th,
.com-library-hours-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--color-com-library-hours-line);
  vertical-align: baseline;
}

.com-library-hours-table th {
  font-weight: 600;
  white-space: nowrap;
  width: 45%;
}

.com-library-hours-table tr.is-today {
  background: var(--color-com-library-hours-today);
}

/* Purple on a pale lavender ground — 14:1. Never gold here; this is a light surface. */
.com-library-hours-todaytag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--color-com-library-hours-ground);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

.com-library-hours-note,
.com-library-hours-fallback {
  margin: var(--com-library-hours-gap) 0 0 0;
  color: var(--color-text-color);
}

.com-library-hours-fallback {
  padding: var(--com-library-hours-padding);
  background: var(--color-com-library-hours-quiet);
  border: 1px solid var(--color-com-library-hours-line);
  border-left: 6px solid var(--color-com-library-hours-ground);
  border-radius: var(--com-library-hours-radius);
}

.com-library-hours-cta-wrap { margin: var(--com-library-hours-gap) 0 0 0; }

.com-library-hours-cta {
  display: inline-block;
  padding: 10px 18px;
  background: var(--color-com-library-hours-ground);
  color: #fff;
  text-decoration: none;
  border-radius: var(--com-library-hours-radius);
  font-weight: 600;
  transition: background ease-out 150ms;
}
.com-library-hours-cta:hover,
.com-library-hours-cta:focus-visible {
  background: hsl(269deg 53% 27%);
  text-decoration: underline;
}
/*
   Never remove the focus ring. The theme's default outline is preserved and
   simply given room, so keyboard users can see where they are on a dark button.
*/
.com-library-hours-cta:focus-visible { outline-offset: 3px; }

@media (width <= 800px) {
  .com-library-hours-status { align-items: flex-start; }
  /* Stop the hours being pushed to a lonely second line by margin-left:auto. */
  .com-library-hours-today { margin-left: 0; width: 100%; }
  .com-library-hours-table th { white-space: normal; width: 50%; }
}

/*
   In forced-colours mode the browser replaces our palette wholesale. The dot
   would vanish (background is ignored), so give it a border the system will
   keep — and let the badge take a real system border so it stays a distinct
   region rather than dissolving into the page.
*/
@media (forced-colors: active) {
  .com-library-hours-status { border-color: CanvasText; }
  .com-library-hours-dot { border: 2px solid CanvasText; }
}

/* Upcoming holidays and one-off changes (Hours page). */

.com-library-hours-exceptions { margin-top: calc(var(--com-library-hours-gap) * 1.5); }

.com-library-hours-exceptions-title {
  margin: 0 0 8px;
  font-size: 1.05rem;
  color: var(--color-heading);
}

.com-library-hours-exception-list { margin: 0; padding: 0; list-style: none; }

.com-library-hours-exception-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-com-library-hours-line);
}
.com-library-hours-exception-list li.is-today { background: var(--color-com-library-hours-today); }

.com-library-hours-exception-date { font-weight: 600; min-width: 15em; }

/*
   Purple on a light ground (16:1), never the brand gold, which measures 1.7:1
   here. The closure itself is the information, so it carries the emphasis.
*/
.com-library-hours-exception-state {
  font-weight: 700;
  color: var(--color-com-library-hours-ground);
}

.com-library-hours-exception-note { color: var(--color-text-color); opacity: 0.75; }

@media (width <= 800px) {
  .com-library-hours-exception-date { min-width: 100%; }
}