/* ============================================================================
   afscherming.css - Het blok "Deze inhoud is enkel voor ..." en het label
   dat redacteurs bij afgeschermde stukken zien.
   ========================================================================= */

/* 1. Het blok voor wie de inhoud niet mag zien.                             */

.rcz-afgeschermd {
  display: flex;                    /* Slotje links, tekst rechts            */
  align-items: center;              /* Verticaal gecentreerd                 */
  gap: 1rem;                        /* Ruimte tussen slotje en tekst         */
  margin: 1.5em 0;                  /* Witruimte boven en onder              */
  padding: 1.25em 1.5em;            /* Binnenmarge                           */
  border: 2px dashed rgba(54, 33, 126, 0.6); /* Paarse stippellijn           */
  border-radius: 8px;               /* Afgeronde hoeken                      */
  background: rgba(54, 33, 126, 0.06); /* Lichtpaarse achtergrond            */
  color: rgba(54, 33, 126, 1);      /* Tekst paars                           */
}

.rcz-afgeschermd__slot {
  flex: 0 0 48px;                   /* Slotje altijd 48px breed              */
  width: 48px;                      /* Breedte                               */
  height: 48px;                     /* Hoogte                                */
}

.rcz-afgeschermd__tekst {
  margin: 0;                        /* Geen extra witruimte                  */
  font-weight: 600;                 /* Iets vetter                           */
}

.rcz-afgeschermd__tekst a {
  color: rgba(233, 91, 19, 1);      /* Links oranje                          */
  text-decoration: underline;       /* Onderstreept                          */
}

/* 2. Redacteurs en beheerders zien de afgeschermde inhoud wel, met een
      oranje stippellijn en een label.                                       */

.rcz-afgeschermd-zichtbaar {
  outline: 2px dashed rgba(233, 91, 19, 0.8); /* Oranje stippellijn          */
  outline-offset: 4px;              /* Een beetje rond de inhoud             */
}

.rcz-afgeschermd-zichtbaar::before {
  content: "\1F512  " attr(data-rcz-label); /* Slotje + label                */
  display: block;                   /* Op een eigen regel                    */
  font-size: 0.8em;                 /* Kleiner                               */
  color: rgba(233, 91, 19, 1);      /* Oranje                                */
}

.rcz-afgeschermd-melding {
  margin: 0 0 1em;                  /* Witruimte onder                       */
  padding: 0.5em 1em;               /* Binnenmarge                           */
  border-left: 4px solid rgba(233, 91, 19, 1); /* Oranje streep links        */
  background: rgba(233, 91, 19, 0.08); /* Lichtoranje achtergrond            */
  font-size: 0.9em;                 /* Iets kleiner                          */
}