/*
Theme Name: LAN Support Dark Theme
Theme URI: https://example.com/
Author: Dein Name
Description: Modernes Dark Mode Theme für das LAN Support Plugin, inspiriert am ursprünglichen LAN Tool.
Version: 1.0
License: GPLv2 or later
Tags: dark, lan, support, responsive, modern
Text Domain: lan-support-dark
*/

.user-menu {
    position: relative; /* Wichtig, damit das Sub-Menü relativ hierzu positioniert wird */
}

/* Versteckt das Sub-Menü standardmässig */
.user-menu .sub-menu {
    display: none;
    position: absolute; /* Löst das Sub-Menü aus dem normalen Fluss */
    top: 100%;          /* Positioniert es direkt unter dem Hauptpunkt */
    left: 0;
    background-color: #ffffff; /* Hintergrundfarbe, an dein Theme anpassen */
    border: 1px solid #eeeeee;   /* Eine feine Border */
    list-style: none;
    padding: 0;
    margin: 0;
    min-width: 160px;   /* Mindestbreite, damit die Links Platz haben */
    z-index: 999;       /* Stellt sicher, dass das Menü über anderen Inhalten liegt */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Optional: Ein leichter Schatten */
}

/* Zeigt das Sub-Menü an, wenn man über den Hauptpunkt "user-menu" hovert */
.user-menu:hover > .sub-menu {
    display: block;
}

/* Styling für die einzelnen Links im Sub-Menü */
.user-menu .sub-menu li a {
    display: block; /* Lässt den gesamten Bereich klickbar werden */
    padding: 10px 15px;
    color: #333; /* Textfarbe, an dein Theme anpassen */
    text-decoration: none;
    white-space: nowrap; /* Verhindert unschöne Zeilenumbrüche */
}

/* Ändert die Hintergrundfarbe der Links im Sub-Menü beim Hovern */
.user-menu .sub-menu li a:hover {
    background-color: #f5f5f5; /* Hover-Farbe, an dein Theme anpassen */
}

.user-menu > a::after {
    content: '\f078'; /* Dies ist der Code für einen "chevron-down" Pfeil in Font Awesome */
    font-family: 'Font Awesome 5 Free'; /* Name der Font-Familie an deine Version anpassen (z.B. 'Font Awesome 6 Free') */
    font-weight: 900; /* Wichtig für die Darstellung des soliden Icons */
    display: inline-block;
    font-size: 10px;
    margin-left: 1em; /* Kleiner Abstand zum Text */
    vertical-align: middle;
    transition: transform 0.3s ease-in-out; /* Sorgt für die sanfte Animation */
}

/* Dreht den Pfeil, wenn man über den Menüpunkt fährt */
.user-menu:hover > a::after {
    transform: rotate(180deg); /* Dreht den Pfeil um 180 Grad nach oben */
}

.sls-event-list {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 30px;
}

.sls-event-list .sls-event-card {
    width: calc(50% - 60px);
}

.wp-block-buttons {
    gap: 30px;
}

.wp-block-buttons .wp-block-button {
    margin-right: 10px;
}

.wp-block-buttons .wp-block-button__link {
    background-color: #0073aa;
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    font-size: 14px;
    transition: 0.3s all ease;
}

.wp-block-buttons .wp-block-button:hover .wp-block-button__link {
    background-color: #005177;
}