/**
 * MOBILE HEADER INKONSISTENZEN FIX
 * Behebt 3 kritische Header-Unterschiede auf Mobile:
 * 1. Homepage Social Icons nicht sichtbar → SICHTBAR machen
 * 2. Kontakt Header-Höhe 84px → 70px reduzieren
 * 3. Hamburger-Farbe inkonsistent → Gold (#D69E2E) überall
 *
 * Datum: 17.10.2025
 * Getestet: iPhone 12, iPhone SE, Samsung Galaxy S21
 */

/* ========================================
   FIX 1: Homepage Social Icons SICHTBAR
   ======================================== */

/* MAXIMALE SPEZIFITÄT für Homepage Share-Buttons */
@media (max-width: 991px) {
    /* Homepage spezifisch: Force Share-Buttons sichtbar */
    body header.navbar .header-share-buttons,
    body header.navbar-dark .header-share-buttons,
    body .navbar .header-share-buttons {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        order: 2 !important;
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: calc(100% - 60px) !important;
        gap: 8px !important;
        justify-content: flex-start !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        z-index: 100 !important;
    }

    /* Share-Button einzelne Buttons SICHTBAR */
    body .header-share-buttons .oyropa-share-btn,
    body .header-share-buttons a {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        max-width: 36px !important;
        max-height: 36px !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px !important;
        margin: 0 !important;
    }

    /* Share-Button SVGs SICHTBAR */
    body .header-share-buttons .oyropa-share-btn svg,
    body .header-share-buttons a svg {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 16px !important;
        height: 16px !important;
    }
}

/* ========================================
   FIX 2: Kontakt Header-Höhe auf 70px
   ======================================== */

/* ULTRA-HOHE SPEZIFITÄT: Alle Mobile Headers auf 70px */
@media (max-width: 991px) {
    /* Header selbst auf 70px fixieren */
    body header.navbar,
    body header.navbar-expand-lg,
    body header.navbar-dark,
    body header,
    html body header.navbar,
    html body header.navbar-expand-lg {
        min-height: 70px !important;
        max-height: 70px !important;
        height: 70px !important;
    }

    /* Container-Fluid Padding standardisieren */
    body header.navbar .container-fluid,
    body header.navbar-expand-lg .container-fluid,
    body header .container-fluid,
    html body header.navbar .container-fluid,
    html body header.navbar-expand-lg .container-fluid {
        padding: 12px 16px !important;
        max-height: 70px !important;
    }

    /* Verhindere Flexbox von Vergrößerung des Headers */
    body header.navbar .container-fluid,
    body header.navbar-expand-lg .container-fluid {
        display: flex !important;
        flex-wrap: wrap !important; /* GEÄNDERT: wrap für bessere Kompatibilität */
        align-items: center !important;
        justify-content: space-between !important;
    }

    /* Navbar-Brand kompakt halten */
    body header.navbar .navbar-brand,
    body header.navbar-expand-lg .navbar-brand {
        width: auto !important;
        flex: 0 0 auto !important;
        order: 1 !important;
    }

    /* Share-Buttons kompakt */
    body header.navbar .header-share-buttons,
    body header.navbar-expand-lg .header-share-buttons {
        flex: 0 0 auto !important;
        order: 2 !important;
    }

    /* Hamburger-Menü rechts */
    body header.navbar .navbar-toggler,
    body header.navbar-expand-lg .navbar-toggler {
        order: 3 !important;
        flex: 0 0 auto !important;
        margin-left: auto !important;
    }

    /* Navbar-Collapse: KORREKT Bootstrap-Verhalten erlauben */
    body header.navbar .navbar-collapse,
    body header.navbar-expand-lg .navbar-collapse {
        /* ENTFERNT: display: none !important - verhinderte Bootstrap-Toggle */
        /* Bootstrap's .collapse Klasse handhabt das Show/Hide korrekt */
        order: 4 !important;
        flex-basis: 100% !important; /* Volle Breite unter dem Header */
        width: 100% !important;
    }

    /* Navbar-Collapse wenn geöffnet (.show) */
    body header.navbar .navbar-collapse.show,
    body header.navbar-expand-lg .navbar-collapse.show {
        display: flex !important; /* Explizit sichtbar machen */
        flex-direction: column !important;
    }

    /* ========================================
       FIX 2.1: Kontakt Navy Background + Sticky
       ======================================== */

    /* Alle Headers: Navy Background + Sticky Position (einheitlich) */
    body header.navbar,
    body header.navbar-expand-lg,
    html body header.navbar,
    html body header.navbar-expand-lg {
        background-color: rgb(11, 31, 58) !important;
        position: sticky !important;
        top: 0 !important;
    }
}

/* ========================================
   FIX 3: Hamburger-Farbe Gold überall
   ======================================== */

/* Hamburger-Menü: OYROPA Gold (#D69E2E) auf ALLEN Seiten */
.navbar-toggler,
.mobile-menu-toggle,
button.navbar-toggler,
button.mobile-menu-toggle,
header .navbar-toggler,
header .mobile-menu-toggle {
    color: #D69E2E !important;
    border-color: #D69E2E !important;
}

/* Hamburger Icon Striche auch Gold */
.navbar-toggler-icon,
.mobile-menu-toggle .navbar-toggler-icon,
button.navbar-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23D69E2E' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Hamburger Hover: Etwas heller */
.navbar-toggler:hover,
.mobile-menu-toggle:hover,
button.navbar-toggler:hover {
    color: #E6A84E !important;
    border-color: #E6A84E !important;
    background-color: rgba(214, 158, 46, 0.1) !important;
}

/* ========================================
   ZUSÄTZLICHE ABSICHERUNG
   ======================================== */

/* Verhindere, dass andere CSS-Regeln die Share-Buttons verstecken */
@media (max-width: 991px) {
    .header-share-buttons,
    .header-share-buttons *,
    .header-share-buttons .oyropa-share-btn {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Force keine Transforms, die Icons verdecken könnten */
    .header-share-buttons {
        transform: none !important;
        clip-path: none !important;
        overflow: visible !important;
    }
}

/* Desktop: Keine Änderungen nötig */
@media (min-width: 992px) {
    /* Desktop-Header bleibt wie er ist */
}

/* ========================================
   DEBUGGING HILFE (Optional - kann entfernt werden)
   ======================================== */

/* Visueller Debug-Rahmen (NUR zum Testen) */
/*
@media (max-width: 991px) {
    .header-share-buttons {
        outline: 2px solid red !important;
    }
    .header-share-buttons .oyropa-share-btn {
        outline: 1px solid blue !important;
    }
}
*/