/* === Lees meer / lees minder === */

.extra-tekst {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.6s ease, opacity 0.4s ease;
  margin-top: 10px;
}

.extra-tekst.zichtbaar {
  opacity: 1;
  max-height: 1000px;
}

.leesmeer-btn {
  background: none;
  border: none;
  color: #00404f;
  font-weight: 600;
  cursor: pointer;
  padding: 5px 0;
  transition: color 0.2s ease;
}

.leesmeer-btn:hover {
  color: #00404f;
  text-decoration: underline;
}

/* === Openingstijden details === */

.hours__summary::-webkit-details-marker,
.special-hours__summary::-webkit-details-marker {
  display: none;
}

.hours__summary,
.special-hours__summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.hours__summary:hover,
.hours__summary:focus,
.special-hours__summary:hover,
.special-hours__summary:focus {
  text-decoration: none;
  color: #c7f2ff;
  outline: none;
}

.hours__summary:focus-visible,
.special-hours__summary:focus-visible {
  text-decoration: underline;
  color: #c7f2ff;
}

.hours__content,
.special-hours__content {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.45s ease, opacity 0.3s ease;
  will-change: max-height;
}

.hours[open] .hours__content,
.special-hours[open] .special-hours__content {
  opacity: 1;
}

.hours__content,
.special-hours__content {
  margin-top: 6px;
}