@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

footer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 40px;

    padding: 50px 50px;
    margin-top: 50px;

    background-color: var(--verde-escuro);
    color: white;
    font-weight: 300;

    .footer-container {
        display: flex;
        justify-content: space-evenly;
        gap: 50px;

        width: 100%;

        .logo-container {
            display: grid;
            grid-template-areas: 
                "logo"
                "mapa-criciuma"
                "horario-funcionamento";
            flex-direction: column;
            gap: 40px;
            
            width: max-content;
            height: min-content;
            width: 300px;
    
            .logo-criciuma{
                grid-area: logo;
                height: auto;
                width: 100%;
                max-width: 250px;
            }


            .mapa-criciuma{
                grid-area: mapa-criciuma;
                width: 100%;
                max-width: max-content;
                color: white;

            }
            .horario-funcionamento{
                grid-area: horario-funcionamento;
            }
        }

        .campo-formulario{
            border: 1px solid rgba(255, 255, 255, 0.5);
            border-radius: 10px;
            background-color: transparent;
            color: white;
            
            &:focus{
                box-shadow: 0 0 0 .25rem rgba(249, 253, 13, 0.25);
            }
            
            &::placeholder{
                color: rgba(255, 255, 255, 0.5);
            }
        }

        .botao-enviar{
            color: var(--verde-escuro);
            background-color: var(--amarelo);
            transition: var(--delay-default);

            &:hover{
                background-color: var(--amarelo-escuro);
            }
        }
    }

    .terms{
        .texto-copyright {
            text-align: center;
            font-size: 1rem;
        }
        .recaptcha-terms {
            display: block;
            text-align: center;
            font-size: 11px;
            color: #ccc;
            width: 100%;

            a {
                color: #ccc;
                text-decoration: underline;
            }
        }

    }


    hr{
        background-color: white;
        margin: 0;
    }

}


@media (max-width: 1560px) {

    footer{
        font-size: 14px;
    }
}
@media (max-width: 1400px) {

    footer{
        
        .footer-container{
    
            .lista-links-container {
                gap: 25px;

            }
        }
    }
}
@media (max-width: 1100px) {

    footer{
        align-items: center;
        
        .footer-container{
            flex-direction: column;
            row-gap: 60px;
            
            width: 100%;
            
            .logo-container {
                grid-template-areas: 
                    "logo mapa-criciuma"
                    "texto-logo mapa-criciuma"
                    "redes-sociais mapa-criciuma"
                    "horario-funcionamento mapa-criciuma";
                justify-content: space-evenly;
    
                width: 100%;
            }
    
            .lista-links-container {
                justify-content: space-evenly;

                width: 100%;

                .linha{
                    display: none;
                }
            }
        }
    }
}
@media (max-width: 768px) {

    footer{
        padding-inline: 40px;
        .footer-container {
            .lista-links-container {
                gap: 50px;
                flex-direction: column;
            }
        }
    }
}
@media (max-width: 645px) {

    footer{
        padding-inline: 40px;
        .footer-container {
            .logo-container {
                grid-template-areas: 
                    "logo"
                    "texto-logo"
                    "redes-sociais"
                    "mapa-criciuma"
                    "horario-funcionamento";
            }
        }
    }
}

@media (max-width: 425px) {


    footer{
        padding-inline: 20px;
        gap: 60px;

        .footer-container{
            row-gap: 60px;

            width: 100%;
            
            .logo-container {
                gap: 15px;
    
                width: 100%;

                h1{
                    width: 40%;
                    margin: 0;
                }
                .logo-criciuma{
                    width: 100%;
                }

                .logo-texto{
                    width: 50%;
                    
                    p{
                        font-size: 1rem;
                        width: 100%;
                    }

                    .telefone-saude, .instagram-saude {
                        display: flex;
                        align-items: center;
                        gap: 10px;

                        i{
                            font-size: 1.25rem;
                        }
                    }
                }
            }

            
            .lista-links-container {
                flex-direction: column;
                justify-content: center;
                gap: 30px;
                
                .links-categorizados, .lista-sites-oficiais-container {
                    grid-template-columns: 1fr;
                    gap: 30px;

                    .lista-links{
                        width: 100%;
    
                        summary {
                            width: 100%;
                            pointer-events: auto;
                            cursor: pointer;
    
                            padding-bottom: 10px;
    
                            border-bottom: 1px solid white;
        
                            &::marker {
                                display: auto;
                            }
                        }
    
                        h3{
                            display: flex;
                            justify-content: space-between;
                            width: 100%;
    
                            padding-bottom: 10px;
    
                            border-bottom: 1px solid white;
                            
                            .marcador-customizado{
                                display: inline-block;
                                padding-inline: 5px;
                                transition: var(--delay-default);
                            }
                            .rotacionar-marcador{
                                transform: rotate(180deg);
                            }
                        }
    
                        .esconder-links {
                            max-height: 0px;
                        }
    
                    }
                }
            }
        }
    }
}