/**
 * Klassen die Drupal core in de markup gebruikt (geen eigen regio).
 */
.visually-hidden,
.hidden-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  word-wrap: normal;
}

.visually-hidden.focusable:focus,
.visually-hidden.focusable:active {
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.hidden {
  display: none;
}

.invisible {
  visibility: hidden;
}

/* "Naar de inhoud"-link: wordt zichtbaar zodra hij met Tab focus krijgt. */
.skip-link:focus {
  position: absolute !important;
  z-index: 100;
  inset-block-start: var(--s-2);
  inset-inline-start: var(--s-2);
  padding: var(--s-2) var(--s-4);
  background: var(--c-wit);
  color: var(--c-inkt);
}

/* ── Systeemmeldingen ──────────────────────────────── */
.messages {
  padding: var(--s-4);
  margin: 0 0 var(--s-4);
  border-inline-start: 6px solid;
  background: var(--c-wit);
  color: var(--c-inkt);
}

.messages--status { border-color: #2e7d32; }
.messages--warning { border-color: #b26a00; }
.messages--error { border-color: #b3261e; }

.messages__list {
  margin: 0;
  padding-inline-start: 1.25em;
}

/* ── Tabs voor redacteuren (Weergeven / Bewerken / Verwijderen / …) ──
 * Templates: templates/navigation/menu-local-task(s).html.twig
 * Zoals het oude verhuurthema: knoppen met een groene rand, het actieve
 * tabblad groen gevuld. Bij aanwijzen lichtgroen gevuld.
 */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-4);
}

.tabs > li {
  margin: 0;
}

.tabs > li > a {
  display: inline-flex;
  align-items: center;
  min-height: var(--klik);
  padding: 0.25rem 1rem;
  color: inherit;
  border: 1px solid var(--c-groen);
  text-decoration: none;
  transition: background-color var(--overgang), color var(--overgang);
}

/* Specifieker dan ".paneel a:hover" (panelen.css), anders wordt de tekst
   in het donkere paneel groen op groen. */
.tabs > li > a:hover,
.tabs > li > a:focus-visible {
  color: var(--c-inkt);
  background: var(--c-groen-licht);
  text-decoration: none;
}

.tabs > li.is-active > a,
.tabs > li > a.is-active {
  color: var(--c-inkt);
  background: var(--c-groen);
  border-color: var(--c-groen);
}

/* Contextuele links (potloodje) en Layout Builder moeten zich kunnen positioneren. */
.contextual-region {
  position: relative;
}

/* ── Paginering (views) ─────────────────────────────── */
.pager__items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2);
  list-style: none;
  padding: 0;
}

.pager__item a,
.pager__item.is-active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch);
  min-height: var(--touch);
  padding: 0 var(--s-2);
  border: 1px solid var(--c-groen);
  color: inherit;
  text-decoration: none;
}

.pager__item.is-active {
  background: var(--c-groen);
  color: var(--c-inkt);
}

/* Aanwijzen: lichtgroen vlak met donkere tekst. Specifieker dan
   ".paneel a:hover" (panelen.css), anders wordt de tekst groen op groen. */
.paneel .pager__item a:hover,
.paneel .pager__item a:focus-visible,
.pager__item a:hover,
.pager__item a:focus-visible {
  color: var(--c-inkt);
  background: var(--c-groen-licht);
  border-color: var(--c-groen-licht);
}

/* Huidige pagina als link: altijd donkere tekst op groen. */
.paneel .pager__item.is-active a,
.pager__item.is-active a {
  color: var(--c-inkt);
}