/**
 * Noble Site Footer Styles
 * 
 * Premium Footer für Noble Atlas - Vertrauens- und Orientierungssystem
 * 
 * @package Noble_Site_Footer
 * @since 1.0.0
 */

/* ==================== FOOTER CONTAINER ==================== */

.noble-site-footer {
    background: #01221c; /* Dunkles Emerald */
    color: #f8f5f0; /* Ivory */
    padding: 60px 0 0;
    margin-top: 0; /* Direkt nach Content, kein Abstand */
    position: relative;
    z-index: 1;
}

.noble-footer-container {
    max-width: 1600px; /* Breiter als vorher (1200px) */
    margin: 0 auto;
    padding: 0 40px; /* Mehr Padding für breiteren Footer */
}

/* ==================== FOOTER COLUMNS (Desktop: 4 Spalten) ==================== */

.noble-footer-columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin-bottom: 40px;
}

.noble-footer-column {
    display: flex;
    flex-direction: column;
}

/* Spalte 1: Marke & Haltung */
.noble-footer-column-1 {
    /* Logo und Text */
}

.noble-footer-logo {
    margin-bottom: 20px;
}

.noble-footer-logo-img {
    height: 40px;
    width: auto;
    filter: brightness(0) invert(1); /* Monochrom weiß */
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.noble-footer-logo-img:hover {
    opacity: 1;
}

.noble-footer-text {
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(248, 245, 240, 0.8);
    margin: 0;
}

/* Spalte 2-4: Links */
.noble-footer-heading {
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #f8f5f0;
    margin: 0 0 20px 0;
    text-transform: none;
    letter-spacing: 0.5px;
}

.noble-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.noble-footer-links li {
    margin-bottom: 12px;
}

.noble-footer-links a {
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    color: rgba(248, 245, 240, 0.7);
    text-decoration: none;
    transition: color 0.3s ease;
    display: inline-block;
}

.noble-footer-links a:hover {
    color: #dbc16d; /* Dezentes Gold bei Hover */
}

/* ==================== FOOTER DIVIDER ==================== */

.noble-footer-divider {
    height: 1px;
    background: rgba(219, 193, 109, 0.15); /* Gold, 15% Opacity */
    margin: 40px 0 30px 0;
    border: none;
}

/* ==================== SUB-FOOTER ==================== */

.noble-footer-sub {
    padding-bottom: 30px;
    text-align: center;
}

.noble-footer-copyright {
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    color: rgba(248, 245, 240, 0.6);
    margin: 0;
}

/* ==================== RESPONSIVE: TABLET (2 Spalten) ==================== */

@media (max-width: 1024px) {
    .noble-footer-container {
        padding: 0 30px; /* Etwas weniger Padding auf Tablet */
    }
    
    .noble-footer-columns {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    
    .noble-footer-column-1 {
        grid-column: 1 / -1; /* Spalte 1 über volle Breite */
        margin-bottom: 20px;
    }
    
    /* Tablet: Kein zusätzliches Padding nötig */
}

/* ==================== RESPONSIVE: MOBILE (1 Spalte) ==================== */

@media (max-width: 768px) {
    .noble-site-footer {
        padding: 40px 0 0;
        margin-top: 0;
    }
    
    .noble-footer-container {
        padding: 0 20px; /* Etwas mehr Padding auf Mobile */
        max-width: 100%; /* Full Width auf Mobile */
    }
    
    /* Mobile: Kein zusätzliches Padding nötig */
    
    .noble-footer-columns {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 30px;
    }
    
    /* Mobile-Reihenfolge: 1, 2, 3, 4 (bereits durch Grid-Order gegeben) */
    .noble-footer-column-1 {
        order: 1;
    }
    
    .noble-footer-column-2 {
        order: 2;
    }
    
    .noble-footer-column-3 {
        order: 3;
    }
    
    .noble-footer-column-4 {
        order: 4;
    }
    
    .noble-footer-logo-img {
        height: 32px;
    }
    
    .noble-footer-text {
        font-size: 13px;
    }
    
    .noble-footer-heading {
        font-size: 15px;
        margin-bottom: 16px;
    }
    
    .noble-footer-links a {
        font-size: 13px;
    }
    
    .noble-footer-divider {
        margin: 30px 0 20px 0;
    }
    
    .noble-footer-sub {
        padding-bottom: 20px;
    }
    
    .noble-footer-copyright {
        font-size: 12px;
    }
}

/* ==================== MOBILE BOTTOM NAV DETECTION ==================== */

/* Footer ausblenden wenn Mobile Bottom Nav vorhanden */
body:has(.mobile-bottom-nav) .noble-site-footer {
    display: none !important;
}

/* Fallback für Browser ohne :has() Support */
@media (max-width: 768px) {
    .noble-dashboard-wrapper ~ .noble-site-footer,
    body.noble-dashboard-page .noble-site-footer {
        display: none !important;
    }
}

/* ==================== DIVI THEME FOOTER HIDE ==================== */

/* Divi Theme Footer auf Frontend-Seiten ausblenden (wenn Noble Footer aktiv ist) */
body:not(.noble-dashboard-page) #main-footer,
body:not(.noble-dashboard-page) #footer-bottom,
body:not(.noble-dashboard-page) #et-footer-nav,
body:not(.noble-dashboard-page) #et-footer-area,
body:not(.noble-dashboard-page) .et-l--footer,
body:not(.noble-dashboard-page) footer:not(.noble-site-footer):not(.noble-dashboard-wrapper footer),
body:not(.noble-dashboard-page) #footer-widgets,
body:not(.noble-dashboard-page) .footer-widget,
body:not(.noble-dashboard-page) .sidebar-footer {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    line-height: 0 !important;
}

/* Divi Theme Builder Footer ausblenden */
body:not(.noble-dashboard-page) .et_pb_section.et_pb_fullwidth_section[class*="footer"]:not(.noble-site-footer),
body:not(.noble-dashboard-page) .et_pb_section[class*="footer"]:not(.noble-site-footer),
body:not(.noble-dashboard-page) .et_pb_row[class*="footer"]:not(.noble-site-footer),
body:not(.noble-dashboard-page) .et_pb_module[class*="footer"]:not(.noble-site-footer) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Leere Container zwischen Content und Footer entfernen */
body:not(.noble-dashboard-page) #main-content + #main-footer,
body:not(.noble-dashboard-page) #main-content ~ #main-footer,
body:not(.noble-dashboard-page) .et_main_area + #main-footer,
body:not(.noble-dashboard-page) .et_main_area ~ #main-footer,
body:not(.noble-dashboard-page) #page-container > #main-footer {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* Padding-Bottom für Content-Container - nur minimal für Abstand zum Footer */
/* Footer ist position: relative, daher kein großes Padding nötig */
body:not(.noble-dashboard-page) #main-content {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important; /* Footer kommt direkt nach Content */
}

body:not(.noble-dashboard-page) .et_main_area {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important; /* Footer kommt direkt nach Content */
}

body:not(.noble-dashboard-page) #page-container {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important; /* Footer kommt direkt nach Content */
}

/* Frontend Display Container - kein zusätzliches Padding nötig */
body:not(.noble-dashboard-page) .noble-frontend-archive,
body:not(.noble-dashboard-page) .noble-frontend-single,
body:not(.noble-dashboard-page) .archive-container,
body:not(.noble-dashboard-page) .noble-single-container {
    padding-bottom: 0 !important; /* Footer kommt direkt nach Content */
}

/* ==================== DASHBOARD HIDE ==================== */

/* Footer NICHT anzeigen auf Dashboard-Seiten */
body.noble-dashboard-page .noble-site-footer,
.noble-dashboard-wrapper ~ .noble-site-footer,
body:has(.noble-dashboard-wrapper) .noble-site-footer {
    display: none !important;
}

/* ==================== ACCESSIBILITY ==================== */

/* Focus States für Keyboard Navigation */
.noble-footer-links a:focus,
.noble-footer-logo a:focus {
    outline: 2px solid #dbc16d;
    outline-offset: 2px;
}

/* Screen Reader Only Text (falls benötigt) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}