/**
 * EventHub Calendar Buttons
 *
 * Zentrale Styles für Kalender-Buttons und Dropdowns.
 * Single-Event: Icon-Button (erbt von .eventhub-share__button)
 * Feed/Archiv: Text-Button mit Dropdown
 *
 * Überschreibbare CSS-Variablen:
 * --eventhub-color-primary       : Akzentfarbe (Hover)
 * --eventhub-color-text-muted    : Button-Textfarbe
 * --eventhub-color-border        : Rahmenfarbe
 * --eventhub-color-bg-alt        : Hover-Hintergrund
 * --eventhub-border-radius       : Eckenradius
 * --eventhub-spacing-sm/md/lg    : Abstände
 * --eventhub-dropdown-bg         : Dropdown-Hintergrund
 * --eventhub-dropdown-border     : Dropdown-Rahmen
 * --eventhub-dropdown-shadow     : Dropdown-Schatten
 *
 * @package EventHub
 * @since 1.0.0
 */

/* ==========================================================================
   EINZELSEITEN: Icon-Button mit Dropdown (erbt von Share-Buttons)
   ========================================================================== */

/* Container ist zugleich Dropdown-Wrapper */
.eventhub-calendar-links--single {
    position: relative;
    display: inline-flex;
}

/* Button-Reset: Theme-Styles überschreiben (höhere Spezifität als button-Selektoren) */
button.eventhub-share__button.eventhub-share__button--calendar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    color: var(--eventhub-color-text-muted, #666);
    background: transparent;
}

/* SVG im Kalender-Button explizit sichtbar machen */
button.eventhub-share__button--calendar .eventhub-share__icon {
    display: block;
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

/* Hover-Farbe für Kalender-Icon (passend zu anderen Share-Icons) */
button.eventhub-share__button--calendar:hover,
button.eventhub-share__button--calendar:focus {
    color: var(--eventhub-color-primary, #4da6d9);
    background: var(--eventhub-color-surface, rgba(0, 0, 0, 0.05));
}

/* ==========================================================================
   FEED/ARCHIV-CONTAINER - Layout für Text-Buttons
   ========================================================================== */

.eventhub-calendar-links--feed,
.eventhub-calendar-subscribe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--eventhub-spacing-sm, 0.5rem);
}

/* Subscribe-Container: Margin unter Überschriften */
.eventhub-calendar-subscribe {
    margin: var(--eventhub-spacing-md, 1rem) 0
        var(--eventhub-spacing-lg, 1.5rem);
}

/* Im Header-Context: kein Margin, vertikale Zentrierung */
.eventhub-events-section__header .eventhub-calendar-subscribe {
    margin: 0;
    align-self: center;
}

/* Kontext-Varianten */
.eventhub-calendar-subscribe--archive {
    justify-content: flex-end;
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.eventhub-calendar-subscribe--series,
.eventhub-calendar-subscribe--venue,
.eventhub-calendar-subscribe--organizer,
.eventhub-calendar-subscribe--category,
.eventhub-calendar-subscribe--district,
.eventhub-calendar-subscribe--tag {
    margin-top: 0;
}

/* ==========================================================================
   FEED-BUTTON - Link-Stil (kein Rahmen, dezent wie Share-Icons)
   ========================================================================== */

/* Basis-Button (für Rückwärtskompatibilität) */
.eventhub-calendar-links__button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    border: none;
    background: transparent;
    text-decoration: none;
    font: inherit;
    font-size: 0.875rem;
    color: var(--eventhub-color-text-muted, #666);
    cursor: pointer;
    transition: color 0.2s ease;
}

/* Link-Variante für Feeds (ohne Rahmen) */
.eventhub-calendar-links__button--link {
    padding: 0.375rem 0.5rem;
    margin-left: -0.5rem;
    border-radius: var(--eventhub-border-radius-sm, 4px);
}

/* Hover mit höherer Spezifität gegen Theme-Override */
button.eventhub-calendar-links__button.eventhub-calendar-links__button--link:hover,
button.eventhub-calendar-links__button.eventhub-calendar-links__button--link:focus {
    color: var(--eventhub-color-primary, #4da6d9);
    background: var(--eventhub-color-surface, #f5f5f5);
}

.eventhub-calendar-links__button:focus {
    outline: 2px solid var(--eventhub-color-primary, #4da6d9);
    outline-offset: 2px;
}

/* ==========================================================================
   BUTTON ICONS
   ========================================================================== */

.eventhub-calendar-links__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.eventhub-calendar-links__text {
    white-space: nowrap;
}

.eventhub-calendar-links__caret {
    margin-left: 0;
    opacity: 0.6;
    transition: transform 0.2s;
}

.eventhub-calendar-links__button:hover .eventhub-calendar-links__caret {
    opacity: 1;
}

/* ==========================================================================
   DROPDOWN - Container und Animation
   ========================================================================== */

/* Feed-Modus: Dropdown ist innerhalb des Containers */
.eventhub-calendar-links--feed .eventhub-calendar-links__dropdown {
    position: relative;
    display: inline-block;
}

/* Caret-Rotation für Feed-Buttons */
.eventhub-calendar-links__dropdown[data-open='true']
    .eventhub-calendar-links__caret {
    transform: rotate(180deg);
}

/* Dropdown-Menü: Setzt den Kontext für alle Items */
.eventhub-calendar-links__dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    min-width: 200px;
    margin-top: 4px;
    padding: 0.5rem 0;

    /* Variablen mit sinnvollen Fallbacks */
    background: var(--eventhub-dropdown-bg, #fff);
    border: 1px solid
        var(--eventhub-dropdown-border, var(--eventhub-color-border, #e0e0e0));
    border-radius: var(--eventhub-border-radius, 8px);
    box-shadow: var(--eventhub-dropdown-shadow, 0 4px 16px rgba(0, 0, 0, 0.12));

    /* Kontext für Items: Font/Farbe vererben */
    font: inherit;
    font-size: 0.875rem;
    color: inherit;

    /* Animation */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
}

/* Öffnen: beide Varianten (Container oder inneres Element mit data-open) */
.eventhub-calendar-links--single[data-open='true']
    .eventhub-calendar-links__dropdown-menu,
.eventhub-calendar-links__dropdown[data-open='true']
    .eventhub-calendar-links__dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ==========================================================================
   DROPDOWN HEADER - Abschnitts-Überschrift
   ========================================================================== */

.eventhub-calendar-links__dropdown-header {
    padding: 0.375rem 1rem 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--eventhub-color-text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   DROPDOWN ITEMS - Links & Buttons einheitlich
   ========================================================================== */

.eventhub-calendar-links__dropdown-item {
    /* Reset: Link/Button-Unterschiede neutralisieren */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.625rem 1rem;
    border: none;
    background: none;
    text-align: left;
    text-decoration: none;

    /* Vom Container (dropdown-menu) erben */
    font: inherit;
    color: inherit;

    /* Interaktion */
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
    white-space: nowrap;
}

/* Höhere Spezifität für text-transform (gegen Theme-Buttons) */
.eventhub-calendar-links__dropdown-menu .eventhub-calendar-links__dropdown-item,
button.eventhub-calendar-links__dropdown-item {
    text-transform: none;
}

.eventhub-calendar-links__dropdown-item:hover,
.eventhub-calendar-links__dropdown-item:focus {
    background: var(--eventhub-color-bg-alt, rgba(0, 0, 0, 0.05));
    color: var(--eventhub-color-primary, #4da6d9);
    text-decoration: none;
}

.eventhub-calendar-links__dropdown-item:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--eventhub-color-primary, #4da6d9);
}

/* Icons in Items */
.eventhub-calendar-links__dropdown-icon {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
}

/* ==========================================================================
   DROPDOWN DIVIDER - Trennlinie
   ========================================================================== */

.eventhub-calendar-links__dropdown-divider {
    height: 1px;
    margin: 0.5rem 0;
    background: var(--eventhub-color-border, #e0e0e0);
}

/* ==========================================================================
   RESPONSIVE - Kompakt auf kleinen Bildschirmen
   ========================================================================== */

@media (max-width: 480px) {
    .eventhub-calendar-links__text {
        display: none;
    }

    .eventhub-calendar-links__button {
        padding: 0.5rem;
    }

    .eventhub-calendar-links__icon {
        width: 1.2em;
        height: 1.2em;
    }
}

/* ==========================================================================
   DARK MODE - Automatische Anpassung
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    .eventhub-calendar-links__button {
        color: rgba(255, 255, 255, 0.8);
        border-color: rgba(255, 255, 255, 0.2);
    }

    .eventhub-calendar-links__button:hover,
    .eventhub-calendar-links__button:focus {
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
    }

    .eventhub-calendar-links__dropdown-menu {
        background: var(--eventhub-dropdown-bg, #2a2a2a);
        border-color: var(--eventhub-dropdown-border, #444);
    }

    .eventhub-calendar-links__dropdown-divider {
        background: rgba(255, 255, 255, 0.1);
    }
}