/*
  Opening times ("Wanneer kun je ons bezoeken") — a notice, a Zomer/Winter/
  Schoolvakantie tab switcher (pill tabs, mirrors the agenda tabs), a weekly
  schedule per panel, an extra-info box and the "Aangepaste tijden" list.
  Tabs are progressively enhanced by assets/js/opening-times.js; without JS all
  panels show stacked.
*/

.opening-times {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}

/* ---- Tabs ---- */
.opening-times__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.opening-times__tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3xs);
  padding: var(--space-2xs) var(--space-m);
  border: 0;
  border-radius: var(--radius-pill);
  background-color: var(--color-green-pale);
  color: var(--color-text);
  font-family: var(--font-sans-serif);
  cursor: pointer;
  text-align: left;
}

.opening-times__tab[aria-selected="true"] {
  background-color: var(--color-green-strong);
  color: var(--color-white);
}

.opening-times__tab-label {
  font-weight: 700;
}

.opening-times__tab-period {
  font-size: var(--text-small);
}

/* ---- Schedule ---- */
.opening-times__schedule {
  margin: 0;
}

.opening-times__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-s);
  padding: var(--space-xs) 0;
}

.opening-times__row + .opening-times__row {
  border-top: 1px solid var(--color-border);
}

.opening-times__day {
  margin: 0;
  font-weight: 700;
  display: flex;
  gap: .5rem;
}

.opening-times__hours {
  margin: 0;
  text-align: right;
}

.opening-times__row--closed .opening-times__hours {
  /* --color-green-muted (#788f6c) is only ~3.5:1 on white — fails AA for this
     normal-size text. Use the dark green (#245c2d, ~7:1). WCAG 1.4.3. */
  color: var(--color-green-dark);
}

/* Holiday rows pair a date + name on the term side. The date is styled like a
   weekday label (bold dark text, via the .opening-times__day parent). */
.opening-times__date {
  display: inline-block;
}

.opening-times__holiday-name {
  font-weight: 400;
}

/* ---- Holidays block ---- */
.opening-times__holidays {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.opening-times__holidays-title {
  margin: 0;
  font-family: var(--font-sans-serif);
  font-size: var(--text-small);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* On mobile the holiday rows crowd: a date + a (sometimes long) name on the
   left and the status on the right, all forced onto one space-between line.
   Stack each entry instead — the date + name label on top, the status below —
   both left-aligned (the hours' right-align only made sense side-by-side). The
   weekly schedule rows stay side-by-side; they're short and read fine. */
@media (max-width: 47.999rem) {
  .opening-times__holidays .opening-times__row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3xs);
  }

  .opening-times__holidays .opening-times__hours {
    text-align: left;
  }
}