/*
DOCUMENTAÇÃO DO ARQUIVO: css/components/footer.css
Rodapé compartilhado com logomarca e textos. Em telas até 600px os elementos são empilhados verticalmente.
*/
/*
==========================================================
Projeto.....: Cor & Papel
Arquivo.....: footer.css
Versão......: 0.1.0
----------------------------------------------------------
Descrição:
Estilos do rodapé principal do site.
==========================================================
*/

/* Fundo do rodapé: mesmo rosa do cabeçalho */
/* Aplica as declarações abaixo a .site-footer. */
.site-footer {
    /* Largura desejada; porcentagens dependem do espaço disponível no contêiner. */
    width: 100%;
    /* Fundo do elemento, que pode ser uma cor, imagem ou gradiente. */
    background: #FFEEF3;
    /* Borda apenas no lado indicado no nome da propriedade. */
    border-top: 1px solid #F4D5E0;
}
/* Área interna do rodapé */
/* Aplica as declarações abaixo a .footer-container. */
.footer-container {
    /* Limite máximo de largura; 100% evita ultrapassar a largura disponível. */
    max-width: 1200px;
    /* Espaço externo; com quatro valores, a ordem é cima, direita, baixo e esquerda; auto pode distribuir o espaço disponível. */
    margin: 0 auto;
    padding: 14px 20px; /* Antes: 28px */

    /* Define a organização do elemento: flex alinha itens, grid cria colunas, block ocupa uma linha e none remove do layout. */
    display: flex;
    /* Alinha os itens no eixo transversal do flex ou no eixo de bloco da grade. */
    align-items: center;
    /* Distribui os itens no eixo principal do flex ou dentro da grade. */
    justify-content: space-between;
    gap: 15px; /* Antes: 30px */
}

/* Logomarca à esquerda */
/* Aplica as declarações abaixo a .footer-logo. */
.footer-logo {
    flex: 0 1 110px; /* Antes: 220px */
}

/* Aplica as declarações abaixo a .footer-logo img. */
.footer-logo img {
    /* Define a organização do elemento: flex alinha itens, grid cria colunas, block ocupa uma linha e none remove do layout. */
    display: block;
    /* Largura desejada; porcentagens dependem do espaço disponível no contêiner. */
    width: 100%;
    max-width: 100px; /* Antes: 200px */
    /* Altura desejada; auto acompanha o conteúdo ou a proporção natural da imagem. */
    height: auto;
}

/* Escritas à direita */
/* Aplica as declarações abaixo a .footer-text. */
.footer-text {
    /* Atalho para crescimento, encolhimento e tamanho-base do item flexível. */
    flex: 1;
    /* Alinhamento horizontal do texto dentro de sua área. */
    text-align: center;
}

/* Aplica as declarações abaixo a .footer-slogan. */
.footer-slogan {
    /* Espaço externo; com quatro valores, a ordem é cima, direita, baixo e esquerda; auto pode distribuir o espaço disponível. */
    margin: 0 0 4px;
    /* Cor do texto e referência para desenhos que usam currentColor. */
    color: #7A3D53;
    font-size: 16px; /* Antes: 18px */
    /* Peso das letras; números maiores produzem traços mais fortes quando a fonte oferece esse peso. */
    font-weight: 600;
}

/* Aplica as declarações abaixo a .footer-copyright. */
.footer-copyright {
    /* Espaço externo; com quatro valores, a ordem é cima, direita, baixo e esquerda; auto pode distribuir o espaço disponível. */
    margin: 0;
    /* Cor do texto e referência para desenhos que usam currentColor. */
    color: #7A3D53;
    font-size: 12px; /* Antes: 13px */
}

/* Ajustes para celulares */
/* Condição de aplicação: (max-width: 600px). min-width e max-width delimitam a largura em pixels; hover:none identifica dispositivos sem sobrevoo. */
@media (max-width: 600px) {

    /* Aplica as declarações abaixo a .footer-container. */
.footer-container {
        /* Direção dos filhos no flex; column organiza de cima para baixo. */
        flex-direction: column;
        /* Alinhamento horizontal do texto dentro de sua área. */
        text-align: center;
        /* Espaçamento entre itens do flex ou entre linhas e colunas da grade. */
        gap: 9px;
        /* Espaço interno; dois valores indicam vertical/horizontal e quatro indicam cima/direita/baixo/esquerda. */
        padding: 12px 20px;
    }

    /* Aplica as declarações abaixo a .footer-logo. */
.footer-logo {
        /* Atalho para crescimento, encolhimento e tamanho-base do item flexível. */
        flex: none;
        width: 75px; /* Antes: 150px */
    }

    /* Aplica as declarações abaixo a .footer-text. */
.footer-text {
        /* Alinhamento horizontal do texto dentro de sua área. */
        text-align: center;
    }

    /* Aplica as declarações abaixo a .footer-slogan. */
.footer-slogan {
        /* Tamanho das letras; rem é relativo à fonte do elemento raiz. */
        font-size: 14px;
    }
}