/*
Theme Name: Stellar Site
Author:     Stellar.Creative
Author URI: https://creative.stellarcompany.eu
Description: Ultralekki i customowy motyw do prostych stron
Version:    1.0
License:    GNU General Public License v2 or later
Text Domain: stellar-site
*/


.site-footer {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 40px;

    .footer-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 1440px;
        gap: 40px;

        .f-line {
            width: 100%;
            max-width: 900px;
            height: 3px;
            border-radius: 3px;
            background-color: var(--font-accent-color);
        }

        .logo {
            img {
                width: 475px;
                height: auto;
            }
        }

        .f-section-contact, .f-section-nota {
            display: flex;
            flex-direction: column;
            gap: 20px;

            h3.f-header-text {
                font-size: 34px;
                line-height: 55px;
                font-weight: 700;
                color: var(--font-accent-color);
                text-align: center;
            }

            .f-text {
                color: var(--font-color);
                font-size: 21px;
                line-height: 34px;
                max-width: 1000px;
                text-align: center;
                display: flex;
                flex-direction: column;

                a {
                    text-decoration: none;

                    &:hover {
                        text-decoration: underline;
                    }
                }
            }
        }

        .f-section-nota {
            padding: 20px 0px;
        }

        .f-policy-designed-by {
            color: var(--font-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            max-width: 1000px;

            span.stellar {
                display: flex;
                gap: 10px;

                a {
                    text-decoration: none;
                    display: flex;
                    align-items: center;
                    gap: 5px;
    
                    &:hover {
                        text-decoration: underline;
                    }
                }
            }
        }
    }
}

@media (max-width: 1024px) {
    .site-footer {    
        .footer-content {
            .f-line {
                max-width: 500px;
            }
    
            .f-section-contact, .f-section-nota {
                h3.f-header-text {
                    font-size: 21px;
                    line-height: 34px;
                }
    
                .f-text {
                    color: var(--font-color);
                    font-size: 13px;
                    line-height: 21px;
                    max-width: 600px;
                }
            }
    
            .f-policy-designed-by {
                max-width: 600px;

                span {
                    font-size: 13px;
                    line-height: 21px;
                }
            }
        }
    }
}

@media (max-width: 768px) {
    .site-footer {
        .footer-content {
            .logo {
                img {
                    width: 300px;
                }
            }
            .f-section-contact, .f-section-nota {
                .f-text {
                    max-width: 350px;
                }
            }
            .f-policy-designed-by {
                flex-direction: column;
                gap: 20px;
            }
        }
    }
}