/**
 * Custom Footer Styling für Kuhn Bäckerei
 * Anpassungen für Widget-basiertes Footer-Layout
 */

/* =============================================================================
   FOOTER GRID LAYOUT - 2 Spalten mit Trennlinie
   ============================================================================= */

/* Mobile First: Standardmäßig gestapelt */
.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg, 2rem);
    align-items: start;
}

/* Desktop: 2 Spalten Layout */
@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr 2px 1fr;
        grid-template-areas:
            "info separator social";
        gap: 0;
        align-items: center; /* Vertikal zentrieren */
    }

    .footer-grid__column--info {
        grid-area: info;
        padding-right: var(--spacing-xl, 3rem);
    }

    /* Trennlinie zwischen den Spalten */
    .footer-grid__column--info::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 2px;
        background-color: #D9AA05;
    }

    .footer-grid__column--info {
        position: relative;
    }

    .footer-grid__column--social {
        grid-area: social;
        padding-left: var(--spacing-xl, 3rem);
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md, 1.5rem);
        align-self: center; /* Vertikal zum Logo zentrieren */
    }

    /* Dritte Spalte (nav) wird unter social angezeigt */
    .footer-grid__column--nav {
        display: none; /* Wird in social integriert */
    }
}

/* =============================================================================
   LINKE SPALTE: Logo & Adresse vertikal zentriert
   ============================================================================= */

.footer-grid__column--info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-lg, 2rem);
}

.footer-grid__column--info .footer-widget {
    margin: 0;
}

/* Logo Container */
.footer-grid__column--info .footer-widget:first-child {
    flex-shrink: 0;
}

.footer-grid__column--info .footer-logo-link,
.footer-grid__column--info .textwidget p:has(img) {
    margin: 0;
    line-height: 0;
}

.footer-grid__column--info img {
    display: block;
    width: 130px;
    height: auto;
}

/* Adresse Container */
.footer-grid__column--info .footer-address,
.footer-grid__column--info .textwidget {
    font-style: normal;
    line-height: 1.7;
    margin: 0;
}

.footer-grid__column--info .textwidget p {
    margin: 0;
}

.footer-grid__column--info .footer-address strong,
.footer-grid__column--info .textwidget strong {
    font-weight: 700;
    color: var(--color-text-kuhn, #333);
    display: inline; /* Geändert von block zu inline - kein Zeilenumbruch */
    margin-bottom: 0;
}

/* Entferne den Abstand nach strong im text-5 Widget */
#text-5 .textwidget strong {
    display: inline;
    margin: 0;
}

/* Entferne Abstände zwischen br-Tags in der Adresse */
#text-5 .textwidget br {
    line-height: 0;
}

/* =============================================================================
   RECHTE SPALTE: Social Media Icons & Text
   ============================================================================= */

.footer-grid__column--social {
    display: block; /* Geändert von flex zu block für bessere Kontrolle */
}

/* Social Icons und Text in einer Zeile (Block-Widgets) */
.footer-grid__column--social .widget_media_image {
    display: inline-block !important;
    margin-right: var(--spacing-sm, 1rem);
    margin-bottom: 0 !important;
    vertical-align: middle;
}

.footer-grid__column--social .widget_media_image figure {
    margin: 0;
    line-height: 0;
}

/* Social Icons Größe (Block-Widgets) */
.footer-grid__column--social .widget_media_image img {
    height: 28px !important;
    width: auto !important;
    max-height: 29px;
}

/* Social Media Text Block Widget */
.footer-grid__column--social .widget_block.widget_text {
    display: inline-block !important;
    margin-bottom: 0 !important;
    vertical-align: middle;
}

.footer-grid__column--social .widget_block.widget_text p {
    font-family: 'behind_the_nineties', sans-serif;
    font-size: 20px;
    font-weight: 500;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.2;
}

/* Legacy: text-4 und text-6 Support (klassische Widgets) */
.footer-grid__column--social > #text-4 {
    display: inline-flex !important;
    align-items: center;
    margin-right: var(--spacing-md, 1.5rem);
    margin-bottom: 0 !important;
    vertical-align: middle;
}

.footer-grid__column--social > #text-6 {
    display: inline-flex !important;
    align-items: center;
    margin-bottom: 0 !important;
    vertical-align: middle;
}

/* Social Media Icons horizontal nebeneinander (klassisch) */
#text-4 .textwidget {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 1rem);
    margin: 0;
}

#text-4 .textwidget p {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 1rem);
    margin: 0;
}

/* Icons Größe (klassisch) */
#text-4 .textwidget img {
    width: auto !important;
    display: inline-block;
    vertical-align: middle;
}

/* Facebook Icon: Höhe 29px (klassisch) */
#text-4 .textwidget img.wp-image-4179 {
    height: 29px !important;
    max-height: 29px;
}

/* Instagram Icon: 28x28px (klassisch) */
#text-4 .textwidget img.wp-image-4180 {
    height: 28px !important;
    max-height: 28px;
}

/* SVG Icons haben bereits die richtige Farbe #D9AA05 - kein Filter nötig */

#text-4 .textwidget a {
    line-height: 0;
    display: inline-flex;
    align-items: center;
}

/* Social Media Text - behind_the_nineties, uppercase, 20px, medium (klassisch) */
#text-6 .textwidget,
.footer-grid__column--social .footer-heading {
    font-family: 'behind_the_nineties', sans-serif;
    font-size: 20px;
    font-weight: 500;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.2;
}

#text-6 .textwidget p {
    margin: 0;
}

/* =============================================================================
   RECHTE SPALTE: Footer Menü horizontal
   ============================================================================= */

/* nav_menu-2 direkt unter text-4 + text-6 mit Abstand */
#nav_menu-2 {
    display: block !important;
    margin-top: var(--spacing-md, 1.5rem) !important;
    margin-bottom: 0 !important;
    clear: both; /* Stelle sicher, dass es unter den inline-flex Elementen ist */
}

.footer-grid__column--social .widget_nav_menu ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md, 1.5rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-grid__column--social .widget_nav_menu li {
    margin: 0;
    padding: 0;
}

.footer-grid__column--social .widget_nav_menu a {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-text-kuhn, #333);
    transition: color 0.3s ease;
}

.footer-grid__column--social .widget_nav_menu a:hover {
    color: #D9AA05;
}

/* =============================================================================
   WIDGET STYLING - Entferne Standard-Widget-Abstände
   ============================================================================= */

.footer-widget {
    margin-bottom: 0 !important;
}

.footer-widget .textwidget {
    margin: 0;
}

/* =============================================================================
   RESPONSIVE ANPASSUNGEN
   ============================================================================= */

@media (max-width: 767px) {
    /* Mobile: Alles gestapelt, keine Trennlinie */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl, 3rem);
    }

    .footer-grid__column--info {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding-right: 0;
    }

    .footer-grid__column--info::after {
        display: none;
    }

    .footer-grid__column--social {
        padding-left: 0;
        align-items: center;
        text-align: center;
    }

    .footer-grid__column--social > .footer-widget:nth-child(2) .textwidget {
        display: block;
        margin-left: 0;
        margin-top: var(--spacing-sm, 1rem);
    }

    .footer-grid__column--social .widget_nav_menu ul {
        justify-content: center;
    }
}