/*
 Theme Name:   Extendable Child
 Theme URI:    https://example.com/extendable-child
 Description:  Child-Theme für das Block-Theme "Extendable" + Events-Manager-Kalender-Indikator
 Author:       Dein Name
 Author URI:   https://example.com
 Template:     extendable
 Version:      1.0.1
 Text Domain:  extendable-child
*/

/* -------------------------------------------------------
   Allgemein – (optional) kleine Utilitys
-------------------------------------------------------- */
:root {
  --emv-status-size: 10px;         /* Größe der Statuspunkte */
  --emv-status-gap: 6px;           /* Abstand zum Eventtitel */
  --emv-status-red: #d00;          /* Rot: Fahrtleiter fehlt - Event kann nicht ohne Fahrtleiter stattfinden! */
  --emv-status-green: #0a0;        /* Grün: Fahrtleiter gebucht, Event findet statt! */
}

/* -------------------------------------------------------
   Events Manager – Kalenderindikatoren
   Füge in der Event-Ausgabe einen <span class="em-calendar-status ..."></span> ein
   (siehe functions.php & Template-Anpassung)
-------------------------------------------------------- */
.em-calendar-status {
  display: inline-block;
  width: var(--emv-status-size);
  height: var(--emv-status-size);
  border-radius: 50%;
  margin-inline-end: var(--emv-status-gap);
  vertical-align: middle;
  background: var(--emv-status-red); /* Default: Rot */
  flex: 0 0 var(--emv-status-size);
}

/* Grün, wenn Fahrtleiter gebucht */
.em-calendar-status.em-status--ok {
  background: var(--emv-status-green);
}

/* Rot, wenn Fahrtleiter fehlt (explizit) */
.em-calendar-status.em-status--missing {
  background: var(--emv-status-red);
}

/* Optional: leicht größere Klickfläche neben Link */
.em-cal-event a,
.em-cal-event .event-name,
.em-calendar .event-name {
  display: inline-flex;
  align-items: center;
}

/* Wenn der Kalender Listenpunkte nutzt, Statuspunkt schön ausrichten */
.em-cal-event li > .em-calendar-status {
  margin-top: 0.05rem;
}

/* Kompakter auf sehr kleinen Displays */
@media (max-width: 480px) {
  :root {
    --emv-status-size: 9px;
    --emv-status-gap: 6px;
  }
}

/* -------------------------------------------------------
   (Optional) Legende über/unter dem Kalender
   HTML-Beispiel:
   <div class="emv-legend">
     <span class="em-calendar-status em-status--ok"></span> Fahrtleiter gebucht, Event findet statt!
     <span class="em-calendar-status em-status--missing" style="margin-left:16px;"></span> Fahrtleiter fehlt - Event kann nicht ohne Fahrtleiter stattfinden!
   </div>
-------------------------------------------------------- */
.emv-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.95rem;
}
.emv-legend .em-calendar-status {
  margin-inline-end: 8px;
}
/* Events farblich markieren – überschreibt Plugin-Inline-Styles */
.em-cal-body .em-cal-event.em-status--ok{
  background-color:#e9f7ea !important;
  border-left:4px solid var(--emv-status-green,#0a0);
  padding:.25rem .5rem;border-radius:.25rem;background-image:none !important;
}
.em-cal-body .em-cal-event.em-status--missing{
  background-color:#fbe9e9 !important;
  border-left:4px solid var(--emv-status-red,#d00);
  padding:.25rem .5rem;border-radius:.25rem;background-image:none !important;
}