/**
 * Drupal-statusberichten (Bootstrap Barrio alert-component) in de OZK-site.
 *
 * Barrio zet de meldingen als vaste balk onderaan het scherm (components/alert/
 * alert.css: position fixed, bottom 0, z-index 9999). Twee gevolgen die hier
 * worden gerepareerd (vastgesteld 04-10-2026, inloggen op een telefoon):
 *
 * 1. De balk lag BOVEN de cookiebanner. Klaro gebruikt z-index 1000 (waas) en
 *    1001 (venster), en op schermen tot 700px staat dat venster onderaan
 *    vastgeplakt (ozk-klaro.css) - precies waar de melding ook staat. De knoppen
 *    'Noodzakelijk' en 'Prima, dat is goed' zaten dan onder de melding en waren
 *    niet aan te klikken. De melding gaat nu net onder de waas: eerst de
 *    cookiekeuze, daarna is de melding gewoon zichtbaar.
 *
 * 2. Het sluitkruisje was een los grijs icoontje van 1em op 60% dekking
 *    (messages-white.css), zonder knopvlak. Het is nu een ronde knop met een
 *    eigen vlak en volle dekking, groot genoeg voor een duim.
 *
 * 3. Sinds 10-10-2026 staat de balk BOVENAAN (verzoek Richard, bij de welkomst-
 *    melding na het inloggen) en is een succesmelding OZK-groen #28881e met witte
 *    tekst, in plaats van Bootstrap-groen op een lichte achtergrond. Bovenaan zit
 *    de balk de cookiebanner (onderaan op mobiel) ook niet meer in de weg.
 */

.alert-wrapper {
  z-index: 999;
  /* In de pagina, direct onder de kop, in plaats van zwevend over de kop heen. */
  position: relative;
  top: auto;
  bottom: auto;
  max-height: none;
  /* Ruimte tot het menu eronder (Richard 10-10-2026). */
  margin-bottom: 1rem;
}

.alert-wrapper .alert {
  padding: .75rem 3rem .75rem 1rem;
  align-items: center;
}

/* Barrio rekt het icoon op tot de hoogte van de melding (150px gemeten). */
.alert-wrapper .alert > svg {
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
}

/* De kop "Statusbericht" alleen voor schermlezers; de melding zelf zegt genoeg. */
.alert-wrapper .alert-success .alert-heading {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.alert-wrapper .alert-success {
  background-color: #28881e;
  /* Eén egaal groen: geen donkerdere accentrand links (Richard 10-10-2026). */
  border-color: #28881e;
  color: #fff;
}

/* Vinkje wit, net als de tekst (Barrio tekent het zwart). */
.alert-wrapper .alert-success > svg,
.alert-wrapper .alert-success > svg * {
  fill: #fff;
}

.alert-wrapper .alert-success a,
.alert-wrapper .alert-success .alert-heading,
.alert-wrapper .alert-success * {
  color: #fff;
}

/* Kruisje zonder eigen vlak. Barrio levert het al wit (messages-white.css), dus
   geen omkeerfilter: die maakte het juist zwart. */
.alert-wrapper .alert-success .btn-close {
  filter: none;
  /* !important: de basisregel voor .btn-close staat verderop en wint anders. */
  background-color: transparent !important;
}

.alert-wrapper .alert-success .btn-close:hover {
  background-color: transparent !important;
  opacity: .8;
}

/* Kruisje kleiner en verticaal gecentreerd in de balk (Richard 10-10-2026):
   top 50% + translateY in plaats van een vaste top, zodat het ook bij een
   melding van twee regels in het midden staat. Het klikvlak blijft 2rem (32px),
   ruim boven de 24px van WCAG 2.5.8; alleen het teken zelf is kleiner. */
.alert-wrapper .alert-dismissible .btn-close {
  top: 50%;
  right: .75rem;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  padding: 0;
  background-size: .8rem;
  background-position: center;
  background-color: rgba(60, 60, 59, .08);
  border-radius: 50%;
  opacity: 1;
  transition: background-color .15s ease;
}

.alert-wrapper .alert-dismissible .btn-close:hover {
  background-color: rgba(60, 60, 59, .18);
}

.alert-wrapper .alert-dismissible .btn-close:focus-visible {
  outline: 3px solid #006e83;
  outline-offset: 2px;
  box-shadow: none;
}