/* FOOTER.CSS - Globalne style dla stopki */

.main-footer {
    background-color: #151312;
    border-top: 1px solid var(--color-gold);
    padding: 60px 20px 20px;
    color: var(--color-grey);
    font-size: 0.9rem;
    position: relative; /* Zapewnia poprawne pozycjonowanie */
    z-index: 10;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between; /* Przy flex: 1 w dzieciach, to działa jako fallback */
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 40px;
}

/* --- NOWA SEKCJA: Styl dla kolumn --- */
/* Ustawiamy flex: 1, aby kolumny miały równą szerokość (dzięki temu środek jest na środku).
   Następnie indywidualnie wyrównujemy tekst wewnątrz skrajnych kolumn. */
.footer-col {
    flex: 1;             /* Wymusza równą szerokość dla wszystkich 3 kolumn */
    text-align: center;  /* Domyślnie centrujemy (dla środkowej kolumny "Kontakt") */
    min-width: 250px;    
}

/* Pierwsza kolumna (Logo/Estica) - wyrównanie do lewej krawędzi */
.footer-col:first-child {
    text-align: left;
}

/* Ostatnia kolumna (Oferta) - wyrównanie do prawej krawędzi */
.footer-col:last-child {
    text-align: right;
}

.footer-col h4 {
    color: #fff;
    font-family: var(--font-headers, serif);
    font-size: 1.5rem;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.footer-logo {
    font-family: 'myFirstFont', serif !important;
    font-size: 2.5rem !important;
    color: var(--color-gold) !important;
    margin-bottom: 15px !important;
}

.footer-col p { 
    line-height: 1.8; 
    margin-bottom: 10px; 
}

.footer-link { 
    color: var(--color-grey); 
    text-decoration: none; 
    transition: color 0.3s; 
}

.footer-link:hover { 
    color: var(--color-gold); 
}

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

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

.footer-links a { 
    text-decoration: none; 
    color: var(--color-grey); 
    transition: color 0.3s; 
}

.footer-links a:hover { 
    color: var(--color-gold); 
    padding-left: 5px; 
}

.footer-bottom {
    text-align: center;
    border-top: 1px solid #333;
    padding-top: 20px;
    font-size: 0.8rem;
}

.footer-bottom a { 
    color: var(--color-gold); 
    text-decoration: none; 
}

/* Dostosowanie stopki na mniejszych ekranach */
@media screen and (max-width: 900px) {
    .footer-container { 
        flex-direction: column; 
        text-align: center; 
    }
    
    /* Na mobilu usuwamy wymuszanie równej szerokości i resetujemy wyrównanie tekstu */
    .footer-col {
        flex: auto;
        min-width: 0;
    }

    /* Ważne: na telefonie chcemy wszystko na środku, więc nadpisujemy left/right */
    .footer-col:first-child,
    .footer-col:last-child {
        text-align: center;
    }
}