/*
=============================================================================
OYROPA MASTER NAVIGATION & READABILITY FIX
=============================================================================
Universelle Lösung für Header/Footer-Lesbarkeit auf allen OYROPA-Seiten

Probleme behoben:
- 54x white-no-shadow (Weiße Schrift ohne Schatten)
- 23x transparent-background (Transparente Buttons)
- 18x navy-on-transparent (Navy-Schrift auf transparentem Hintergrund)

Author: Claude Code for OYROPA
Date: 28.09.2025
=============================================================================
*/

/* =========== MASTER COLOR VARIABLES =========== */
:root {
    --oyropa-navy: #1A365D;
    --oyropa-gold: #D69E2E;
    --oyropa-white: #FFFFFF;
    --oyropa-light-gray: #F7FAFC;
    --oyropa-text-gray: #4A5568;
    --shadow-strong: 2px 2px 8px rgba(0,0,0,0.8);
    --shadow-medium: 1px 1px 4px rgba(0,0,0,0.6);
    --shadow-light: 1px 1px 2px rgba(0,0,0,0.4);
}

/* =========== HEADER UNIVERSAL FIXES - ULTRA HIGH SPECIFICITY =========== */
html body div header,
html body div .navbar,
html body div .navbar-dark,
html body div nav,
html body div .navigation,
html body div #header,
html body div .header,
html body div .site-header,
html body div .main-header,
html body header,
html body .navbar,
html body .navbar-dark,
html body nav,
html body .navigation,
html body #header,
html body .header,
html body .site-header,
html body .main-header {
    background: var(--oyropa-navy) !important;
    border-bottom: 3px solid var(--oyropa-gold) !important;
    min-height: 60px !important;
}

/* Header Links - ULTRA HIGH SPECIFICITY OVERRIDE */
html body div header a,
html body div header .nav-link,
html body div header .navbar-nav a,
html body div header .navbar-nav .nav-link,
html body div header .navbar-brand,
html body div .navbar a,
html body div .navbar .nav-link,
html body div .navbar .navbar-nav a,
html body div .navbar .navbar-nav .nav-link,
html body div .navbar .navbar-brand,
html body div .navbar-dark a,
html body div .navbar-dark .nav-link,
html body div .navbar-dark .navbar-nav a,
html body div .navbar-dark .navbar-nav .nav-link,
html body div .navbar-dark .navbar-brand,
html body div nav a,
html body div .navigation a,
html body div #header a,
html body div .header a,
html body div .site-header a,
html body div .main-header a,
html body header a,
html body header .nav-link,
html body header .navbar-nav a,
html body header .navbar-nav .nav-link,
html body header .navbar-brand,
html body .navbar a,
html body .navbar .nav-link,
html body .navbar .navbar-nav a,
html body .navbar .navbar-nav .nav-link,
html body .navbar .navbar-brand,
html body .navbar-dark a,
html body .navbar-dark .nav-link,
html body .navbar-dark .navbar-nav a,
html body .navbar-dark .navbar-nav .nav-link,
html body .navbar-dark .navbar-brand,
html body nav a,
html body .navigation a,
html body #header a,
html body .header a,
html body .site-header a,
html body .main-header a,
html body header a[href],
html body .navbar a[href],
html body nav a[href] {
    color: var(--oyropa-white) !important;
    text-shadow: var(--shadow-strong) !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    letter-spacing: 0.5px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.5rem 1rem !important;
}

/* Header Links Hover - MAXIMUM SPECIFICITY */
html body header a:hover,
html body header .nav-link:hover,
html body header .navbar-nav a:hover,
html body header .navbar-nav .nav-link:hover,
html body header .navbar-brand:hover,
html body .navbar a:hover,
html body .navbar .nav-link:hover,
html body .navbar .navbar-nav a:hover,
html body .navbar .navbar-nav .nav-link:hover,
html body .navbar .navbar-brand:hover,
html body .navbar-dark a:hover,
html body .navbar-dark .nav-link:hover,
html body .navbar-dark .navbar-nav a:hover,
html body .navbar-dark .navbar-nav .nav-link:hover,
html body .navbar-dark .navbar-brand:hover,
html body nav a:hover,
html body .navigation a:hover {
    color: var(--oyropa-gold) !important;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.9) !important;
    transform: translateY(-1px) !important;
}

/* Navbar Brand Spezial */
header .navbar-brand,
.navbar .navbar-brand,
.navbar-dark .navbar-brand {
    font-weight: 700 !important;
    font-size: 1.4rem !important;
    color: var(--oyropa-white) !important;
    text-shadow: var(--shadow-strong) !important;
}

/* Mobile Hamburger Menu */
.navbar-toggler,
.navbar-dark .navbar-toggler {
    border: 2px solid var(--oyropa-white) !important;
    background: var(--oyropa-navy) !important;
}

.navbar-toggler-icon,
.navbar-dark .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='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Dropdown Menus */
.dropdown-menu {
    background: var(--oyropa-navy) !important;
    border: 2px solid var(--oyropa-gold) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important;
}

.dropdown-menu a,
.dropdown-item {
    color: var(--oyropa-white) !important;
    text-shadow: var(--shadow-medium) !important;
    font-weight: 500 !important;
    padding: 0.7rem 1.2rem !important;
}

.dropdown-menu a:hover,
.dropdown-item:hover {
    background: var(--oyropa-gold) !important;
    color: var(--oyropa-navy) !important;
    text-shadow: none !important;
}

/* =========== FOOTER UNIVERSAL FIXES - MAXIMUM SPECIFICITY =========== */
html body div footer,
html body div .footer,
html body div .page-footer,
html body footer,
html body .footer,
html body .page-footer {
    background: var(--oyropa-navy) !important;
    color: var(--oyropa-white) !important;
    border-top: 3px solid var(--oyropa-gold) !important;
    padding: 2rem 0 !important;
}

/* Footer Links - MAXIMUM SPECIFICITY OVERRIDE */
html body footer a,
html body footer .footer-link,
html body footer .nav-link,
html body .footer a,
html body .page-footer a {
    color: var(--oyropa-white) !important;
    text-shadow: var(--shadow-strong) !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
    margin-bottom: 0.5rem !important;
}

/* Footer Links Hover - MAXIMUM SPECIFICITY */
html body footer a:hover,
html body footer .footer-link:hover,
html body footer .nav-link:hover,
html body .footer a:hover,
html body .page-footer a:hover {
    color: var(--oyropa-gold) !important;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.9) !important;
    transform: translateX(5px) !important;
}

/* Footer Text */
footer p,
footer .footer-text,
footer .copyright {
    color: var(--oyropa-white) !important;
    text-shadow: var(--shadow-light) !important;
    font-weight: 500 !important;
}

/* Footer Headings */
footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6 {
    color: var(--oyropa-gold) !important;
    text-shadow: var(--shadow-medium) !important;
    font-weight: 700 !important;
    margin-bottom: 1rem !important;
}

/* =========== BUTTON UNIVERSAL FIXES - MAXIMUM SPECIFICITY =========== */
/* Alle Buttons - Keine Transparenz mehr */
html body button,
html body .btn,
html body input[type="submit"],
html body input[type="button"],
html body input[type="reset"],
html body .button,
html body a.btn,
html body span.btn {
    background: var(--oyropa-navy) !important;
    color: var(--oyropa-white) !important;
    border: 2px solid var(--oyropa-navy) !important;
    padding: 0.7rem 1.5rem !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    text-shadow: var(--shadow-medium) !important;
    box-shadow: 0 4px 12px rgba(26, 54, 93, 0.3) !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    cursor: pointer !important;
    display: inline-block !important;
}

/* Button Hover - MAXIMUM SPECIFICITY */
html body button:hover,
html body .btn:hover,
html body input[type="submit"]:hover,
html body input[type="button"]:hover,
html body input[type="reset"]:hover,
html body .button:hover,
html body a.btn:hover,
html body span.btn:hover {
    background: var(--oyropa-gold) !important;
    color: var(--oyropa-navy) !important;
    border-color: var(--oyropa-gold) !important;
    text-shadow: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(214, 158, 46, 0.4) !important;
}

/* Primary Buttons */
.btn-primary,
button.primary,
.button-primary {
    background: var(--oyropa-gold) !important;
    color: var(--oyropa-navy) !important;
    border-color: var(--oyropa-gold) !important;
    text-shadow: none !important;
}

.btn-primary:hover,
button.primary:hover,
.button-primary:hover {
    background: var(--oyropa-navy) !important;
    color: var(--oyropa-white) !important;
    border-color: var(--oyropa-navy) !important;
    text-shadow: var(--shadow-medium) !important;
}

/* Secondary Buttons */
.btn-secondary,
button.secondary,
.button-secondary {
    background: transparent !important;
    color: var(--oyropa-navy) !important;
    border: 2px solid var(--oyropa-navy) !important;
    text-shadow: none !important;
}

.btn-secondary:hover,
button.secondary:hover,
.button-secondary:hover {
    background: var(--oyropa-navy) !important;
    color: var(--oyropa-white) !important;
    text-shadow: var(--shadow-medium) !important;
}

/* =========== FORM ELEMENTS =========== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
textarea,
select {
    border: 2px solid var(--oyropa-navy) !important;
    border-radius: 6px !important;
    padding: 0.7rem !important;
    font-size: 1rem !important;
    transition: all 0.3s ease !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
    border-color: var(--oyropa-gold) !important;
    box-shadow: 0 0 0 3px rgba(214, 158, 46, 0.2) !important;
    outline: none !important;
}

/* =========== MOBILE OPTIMIZATIONS - WCAG AA TOUCH TARGETS =========== */
@media (max-width: 768px) {
    /* Header Links - WCAG AA compliant */
    html body header a,
    html body header .nav-link,
    html body .navbar a,
    html body .navbar .nav-link,
    html body nav a,
    html body .navbar-nav a,
    html body .nav-item a {
        font-size: 1.2rem !important;
        padding: 1rem 1.2rem !important;
        margin: 0.3rem 0 !important;
        text-shadow: var(--shadow-strong) !important;
        min-height: 44px !important;
        min-width: 44px !important;
        display: block !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        width: auto !important;
        height: auto !important;
    }

    /* Force mobile menu visibility */
    html body .navbar-collapse,
    html body .navbar-nav,
    html body .nav {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        transform: none !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Footer Links - WCAG AA compliant */
    html body footer a,
    html body footer .footer-link {
        font-size: 1.1rem !important;
        display: block !important;
        padding: 1rem 0 !important;
        text-shadow: var(--shadow-strong) !important;
        min-height: 44px !important;
        line-height: 1.4 !important;
    }

    /* Buttons - WCAG AA compliant */
    html body button,
    html body .btn,
    html body input[type="submit"],
    html body input[type="button"] {
        min-height: 44px !important;
        min-width: 44px !important;
        font-size: 1.1rem !important;
        padding: 1rem 1.5rem !important;
        touch-action: manipulation !important;
    }

    /* Touch Targets Universal Fix - ENHANCED */
    html body a,
    html body button,
    html body .btn,
    html body input[type="submit"],
    html body input[type="button"],
    html body input[type="reset"],
    html body .clickable,
    html body .nav-link,
    html body .navbar-brand,
    html body .dropdown-toggle,
    html body .form-control,
    html body select,
    html body textarea,
    html body [role="button"],
    html body [tabindex]:not([tabindex="-1"]) {
        min-height: 44px !important;
        min-width: 44px !important;
        touch-action: manipulation !important;
        padding: 0.75rem 1rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Prevent horizontal scroll */
    html body {
        overflow-x: hidden !important;
    }

    html body * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* =========== ACCESSIBILITY IMPROVEMENTS =========== */
/* Focus States */
header a:focus,
footer a:focus,
button:focus,
.btn:focus {
    outline: 3px solid var(--oyropa-gold) !important;
    outline-offset: 2px !important;
    color: var(--oyropa-gold) !important;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    header a,
    footer a,
    button,
    .btn {
        text-shadow: 3px 3px 12px rgba(0,0,0,1) !important;
        border-width: 3px !important;
    }
}

/* =========== ADMIN LINK SPECIAL HANDLING =========== */
footer a[href*="admin"],
header a[href*="admin"] {
    color: rgba(255,255,255,0.8) !important;
    font-size: 0.9rem !important;
    text-shadow: var(--shadow-light) !important;
}

footer a[href*="admin"]:hover,
header a[href*="admin"]:hover {
    color: var(--oyropa-gold) !important;
    text-shadow: var(--shadow-medium) !important;
}

/* =========== PROFESSIONAL TEXT SPACING =========== */
header,
footer {
    letter-spacing: 0.5px !important;
    line-height: 1.6 !important;
}

/* =========== EMERGENCY OVERRIDE FOR PROBLEMATIC ELEMENTS =========== */
/* Force visibility on any remaining problematic elements */
*[style*="color: rgb(27, 54, 93)"] {
    color: var(--oyropa-white) !important;
    text-shadow: var(--shadow-strong) !important;
}

*[style*="background: transparent"],
*[style*="background-color: transparent"] {
    background: var(--oyropa-navy) !important;
    border: 2px solid var(--oyropa-navy) !important;
}

/* End of OYROPA Master Navigation Fix */