/* simple but clever Kalender – Frontend CSS
   Erbt Schriftart & Farben der Website automatisch.
   Überschreibbar via CSS-Variablen im Theme:
   --sbc-cal-primary, --sbc-cal-accent
   ------------------------------------------------------------------ */

.sbc-calendar-wrap {
    --sbc-cal-primary: var(--sbc-navy, #1a2332);
    --sbc-cal-accent:  var(--sbc-rust, #d4511e);
    --sbc-cal-border:  #e0ddd8;
    --sbc-cal-today:   rgba(212, 81, 30, .07);
}

/* ── FullCalendar overrides ──────────────────────────────────────── */
.sbc-cal-container .fc {
    /* Schriftart von der Website erben */
    font-family: inherit;
    font-size:   inherit;

    --fc-border-color:              var(--sbc-cal-border);
    --fc-today-bg-color:            var(--sbc-cal-today);
    --fc-button-bg-color:           var(--sbc-cal-primary);
    --fc-button-border-color:       var(--sbc-cal-primary);
    --fc-button-hover-bg-color:     color-mix(in srgb, var(--sbc-cal-primary) 85%, black);
    --fc-button-hover-border-color: color-mix(in srgb, var(--sbc-cal-primary) 85%, black);
    --fc-button-active-bg-color:    var(--sbc-cal-accent);
    --fc-button-active-border-color:var(--sbc-cal-accent);
    --fc-page-bg-color:             transparent;
}

/* FullCalendar setzt intern system-ui auf tieferen Elementen –
   alle Kind-Elemente auf inherit zurücksetzen damit Elementor-Schrift greift */
.sbc-cal-container .fc *,
.sbc-cal-container .fc *::before,
.sbc-cal-container .fc *::after {
    font-family: inherit;
}

/* Titel */
.sbc-cal-container .fc .fc-toolbar-title {
    font-size:      1.1em;
    font-weight:    700;
    font-family:    inherit;
    color:          var(--sbc-cal-primary);
    letter-spacing: -.01em;
}

/* Buttons */
.sbc-cal-container .fc .fc-button {
    border-radius: 999px;
    font-family:   inherit;
    font-size:     .85em;
    padding:       5px 14px;
    box-shadow:    none;
    text-transform: none;
    letter-spacing: 0;
}

/* Wochentag-Header & Tageszahlen */
.sbc-cal-container .fc .fc-col-header-cell-cushion,
.sbc-cal-container .fc .fc-daygrid-day-number {
    font-family:    inherit;
    color:          var(--sbc-cal-primary);
    text-decoration: none;
    font-size:      .85em;
}

/* ── Events ──────────────────────────────────────────────────────────
   Elementor setzt global: a, a:hover, a:visited { color: #6A4BFC }
   FullCalendar setzt backgroundColor per Inline-Style – das bleibt.
   Wir müssen nur die Textfarbe auf allen möglichen Kind-Elementen
   hart auf weiß zwingen, egal welche Elementor-Version läuft.
   ------------------------------------------------------------------ */

/* Alle <a>-Tags innerhalb des Kalenders von globalen Theme/Reset-Styles befreien.
   reset.css setzt a { color: #c36 } und global-styles setzt text-decoration-color.
   Doppelter Klassen-Selektor erhöht Spezifität über ein einfaches a { } hinaus,
   kombiniert mit !important schlägt das jede externe Regel unabhängig vom
   Ladezeitpunkt des Stylesheets. */
.sbc-calendar-wrap.sbc-calendar-wrap a,
.sbc-calendar-wrap.sbc-calendar-wrap a:link,
.sbc-calendar-wrap.sbc-calendar-wrap a:visited,
.sbc-calendar-wrap.sbc-calendar-wrap a:hover,
.sbc-calendar-wrap.sbc-calendar-wrap a:focus {
    color:                         inherit !important;
    text-decoration:               none !important;
    text-decoration-color:         inherit !important;
    -webkit-text-decoration-color: inherit !important;
}

/* Event-Block selbst */
.sbc-cal-container .fc .fc-event,
.sbc-cal-container .fc .fc-event:hover {
    border-radius:   3px;
    border:          none;
    font-family:     inherit;
    font-size:       .8em;
    padding:         2px 5px;
    cursor:          pointer;
    color:           #fff !important;
    text-decoration: none !important;
}

/* Alle Text-Kinder im Event */
.sbc-cal-container .fc .fc-event *,
.sbc-cal-container .fc .fc-event *:hover {
    color:           inherit !important;
    text-decoration: none !important;
}

/* Listenansicht */
.sbc-cal-container .fc .fc-list-event-title a,
.sbc-cal-container .fc .fc-list-event-title a:hover {
    color:           inherit !important;
    text-decoration: none !important;
}

/* Listenansicht */
.sbc-cal-container .fc .fc-list-event:hover td {
    background: rgba(0,0,0,.03);
}

/* ── Kategorie-Filter ────────────────────────────────────────────── */
.sbc-cal-filter {
    margin-bottom: 16px;
}

.sbc-cat-filter {
    display:   flex;
    flex-wrap: wrap;
    gap:       8px;
}

.sbc-cat-btn {
    display:     inline-flex;
    align-items: center;
    gap:         6px;
    padding:     5px 12px 5px 8px;
    border:      1.5px solid var(--sbc-cal-border);
    border-radius: 999px;
    background:  white;
    color:       #888;
    font-family: inherit;
    font-size:   .85em;
    cursor:      pointer;
    transition:  border-color .15s, color .15s, background .15s;
    line-height: 1;
}

.sbc-cat-btn:hover {
    border-color: var(--sbc-cal-primary);
    color:        var(--sbc-cal-primary);
}

.sbc-cat-btn.is-active {
    border-color: var(--sbc-cal-primary);
    color:        var(--sbc-cal-primary) !important;
    background:   rgba(0,0,0,.04);
    font-weight:  600;
}

/* Deaktivierter Zustand (nicht is-active) – Kategorie ausgegraut */
.sbc-cat-btn:not(.is-active) {
    border-color: var(--sbc-cal-border);
    color:        #aaa !important;
    background:   white;
    font-weight:  normal;
}

.sbc-cat-btn:not(.is-active) .sbc-cat-dot {
    opacity: .35;
}

.sbc-cat-dot {
    display:      inline-block;
    width:        9px;
    height:       9px;
    border-radius: 50%;
    flex-shrink:  0;
}

.sbc-cat-subscribe {
    margin-left: 3px;
    font-size:   .9em;
    opacity:     .45;
    text-decoration: none;
    transition:  opacity .15s;
}
.sbc-cat-subscribe:hover { opacity: 1; }

/* ── Abonnieren-Bereich ──────────────────────────────────────────── */
.sbc-cal-subscribe-wrap {
    margin-top:  16px;
    padding-top: 12px;
    border-top:  1px solid var(--sbc-cal-border);
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         8px;
    font-size:   .82em;
    color:       #888;
}

.sbc-subscribe-label {
    color: #888;
}

.sbc-subscribe-link {
    display:      inline-flex;
    align-items:  center;
    gap:          5px;
    padding:      4px 10px 4px 7px;
    border:       1.5px solid var(--sbc-cal-border);
    border-radius: 999px;
    color:        #555;
    text-decoration: none;
    font-family:  inherit;
    transition:   border-color .15s, color .15s;
}

.sbc-subscribe-link:hover {
    border-color: var(--sbc-cal-primary);
    color:        var(--sbc-cal-primary);
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .sbc-cal-container .fc .fc-toolbar {
        gap: 8px;
    }
    .sbc-cat-btn {
        font-size: .8em;
    }
}

/* ── Tag-Filter (zweite Filterreihe) ─────────────────────────────── */
.sbc-cal-tags {
    margin-bottom: 8px;
}

.sbc-tag-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.sbc-filter-label {
    font-size: 12px;
    color: #8c8f94;
    margin-right: 4px;
    font-style: italic;
}

.sbc-tag-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 6px;
    border-radius: 20px;
    border: 1.5px solid #ddd;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    opacity: 0.5;
    transition: opacity 0.15s, border-color 0.15s;
}

.sbc-tag-btn.is-active {
    opacity: 1;
    border-color: currentColor;
}

.sbc-tag-btn .sbc-cat-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}