/* ============================================================
   CONFIGURAÇÕES GERAIS
   ============================================================ */

/* Remove margens e espaçamentos padrão do navegador */
* {
    margin: 0;
    padding: 0;

    /* Faz width e height incluírem padding e borda */
    box-sizing: border-box;
}


/* Configura o corpo inteiro da página */
body {

    /* Cor marrom escura presente no fundo da imagem */
    background-color: #511f0d;

    /* Define uma fonte simples e parecida com a imagem */
    font-family: Arial, Helvetica, sans-serif;

    /* Garante que a página ocupe pelo menos toda a altura da tela */
    min-height: 100vh;

    /* Impede uma barra horizontal desnecessária */
    overflow-x: hidden;
}


/* ============================================================
   CABEÇALHO
   ============================================================ */
.menu {
    width: 100%;
    /* O menu ocupa toda a largura */

    height: 100px;
    /* Altura do menu */

    padding: 20px 30px;
    /* Espaçamento interno */

    display: flex;
    /* Coloca os elementos lado a lado */

    align-items: center;
    /* Centraliza verticalmente */

    justify-content: space-between;
    /* Logo fica à esquerda e botões à direita */

    position: absolute;
    /* Coloca o menu sobre a imagem */

    top: 0;
    /* Encosta o menu no topo */

    left: 0;
    /* Encosta o menu no lado esquerdo */

    z-index: 10;
    /* Faz o menu ficar acima da imagem */
}


/* Logo */
.logo img {
    width: 250px;
    /* Largura do logo */

    height: 300px;
    /* Altura do logo */

    object-fit: contain;
    /* Mantém a proporção da imagem */

    border-radius: 20px;
    /* Arredonda os cantos */

    margin-top: -100px;
    /* Move a imagem para cima */

    margin-left: -65px ;
     /* Move a imagem para a esquerda */
    
}

/* FUNDO AMARELO*/
.logo {
    width: 120px;
    height: 80px;

    /* Fundo amarelo/creme atrás da logo */
    background-color: #f3e7b5;

    /* Cantos arredondados */
    border-radius: 25px;
    
    margin-top: 50px;

   
}


/* Área dos botões */
.menu-direita {
    display: flex;
    /* Coloca os botões lado a lado */

    align-items: center;
    /* Centraliza verticalmente */

    gap: 15px;
    /* Espaço entre os botões */
}


/* Botão Comunidade */
.botao-comunidade {
    background-color: #f3e7b5;
    /* Cor creme do botão */

    color: #171717;
    /* Cor do texto */

    text-decoration: none;
    /* Remove o sublinhado */

    padding: 12px 35px;
    /* Espaçamento interno */

    border-radius: 30px;
    /* Deixa o botão arredondado */

    font-size: 16px;
    /* Tamanho da fonte */

    transition: 0.3s;
    /* Suaviza o efeito ao passar o mouse */
}


/* Efeito ao passar o mouse */
.botao-comunidade:hover {
    transform: scale(1.05);
    /* Aumenta levemente o botão */

    background-color: #fff4c7;
    /* Clareia o botão */
}


/* ===================================================== */
/* BOTÃO DO PERFIL / CADASTRO                            */
/* ===================================================== */

.perfil {
    width: 43px;
    height: 43px;

    background-color: #f3e7b5;
    color: #171717;

    text-decoration: none;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    transition: 0.3s;
}


/* Imagem do ícone dentro do círculo */
.perfil img {
    width: 45px;
    height: 45px;

    object-fit: contain;

    display: block;
}


/* Efeito ao passar o mouse */
.perfil:hover {
    transform: scale(1.05);
    background-color: #fff4c7;
}


/* Botão favoritos*/
.favoritos {
    background-color: #f3e7b5;
    /* Cor creme do botão */

    color: #171717;
    /* Cor do texto */

    text-decoration: none;
    /* Remove o sublinhado */

    padding: 12px 35px;
    /* Espaçamento interno */

    border-radius: 30px;
    /* Deixa o botão arredondado */

    font-size: 16px;
    /* Tamanho da fonte */

    transition: 0.3s;
    /* Suaviza o efeito ao passar o mouse */
}

/* Efeito ao passar o mouse */
.favoritos:hover {
    transform: scale(1.05);
    /* Aumenta levemente o botão */

    background-color: #fff4c7;
    /* Clareia o botão */
}



/* ============================================================
   CONTEÚDO PRINCIPAL
   ============================================================ */

main {

    /* Ocupa praticamente toda a largura */
    width: 100%;
}


/* Título "Comunidade DailyShape" */
h1 {

    /* Cor bege clara */
    color: #eee3bd;

    /* Fonte mais delicada */
    font-family: Georgia, serif;

    /* Tamanho do título */
    font-size: 21px;

    /* Espaçamento ao redor */
    margin: 10px 11px 12px;
}


/* ============================================================
   PESQUISA
   ============================================================ */

.pesquisa {

    /* Largura quase total */
    width: calc(100% - 22px);

    /* Altura do campo */
    height: 30px;

    /* Centraliza horizontalmente */
    margin: 0 auto 15px;

    /* Cor marrom mais clara */
    background-color: #805344;

    /* Arredonda o campo */
    border-radius: 11px;

    /* Coloca lupa e input lado a lado */
    display: flex;

    /*Move para cima */
    margin-top: 90px;

    /* Espaçamento interno */
    padding: 0 10px;
}


/* Ícone de lupa */
.lupa {

    /* Tamanho do ícone */
    font-size: 27px;

    /* Cor preta */
    color: #000;

    /* Pequeno espaço entre lupa e texto */
    margin-right: 5px;

    /* Ajusta a posição vertical */
    line-height: 1;
}


/* Campo de texto */
.pesquisa input {

    /* Faz o input ocupar todo o espaço restante */
    flex: 1;

    /* Remove borda */
    border: none;

    /* Remove o fundo padrão */
    background: transparent;

    /* Remove contorno ao clicar */
    outline: none;

    /* Tamanho da fonte */
    font-size: 13px;

    /* Cor do texto */
    color: #000;
}


/* Cor do texto de placeholder */
.pesquisa input::placeholder {

    /* Preto levemente transparente */
    color: #000;
}


/* ============================================================
   ÁREA COM IMAGEM DE FUNDO
   ============================================================ */

.area-comunidade {

    /* Largura total */
    width: 100%;

    /* Altura da área */
    min-height: 555px;

    /*
       Imagem de fundo.

       Você pode substituir "comida.jpg" pelo nome
       da imagem que quiser usar.
    */
    background-image: url("comida.jpg");

    /* Faz a imagem ocupar toda a área */
    background-size: cover;

    /* Centraliza a imagem */
    background-position: center;

    /* Impede repetição */
    background-repeat: no-repeat;

    /* Espaçamento superior */
    padding-top: 42px;

    /* Espaçamento inferior */
    padding-bottom: 15px;
}


/* ============================================================
   CAIXA AMARELA
   ============================================================ */

.caixa-amarela {

    /* Largura da caixa */
    width: 92%;

    /* Centraliza horizontalmente */
    margin: 0 auto;

    /* Cor amarela clara */
    background-color: #f2e8b1;

    /* Arredondamento dos cantos */
    border-radius: 30px;

    /* Espaçamento interno */
    padding: 20px 18px 12px;

    /* Altura mínima */
    min-height: 510px;
}


/* ============================================================
   PAINEL CINZA
   ============================================================ */

.painel {

    /* Cor cinza clara */
    background-color: #d5d5d5;

    /* Arredonda os cantos */
    border-radius: 20px;

    /* Espaçamento interno */
    padding: 10px 13px;

    /* Define a altura */
    min-height: 490px;
}


/* ============================================================
   TÍTULO DA COMUNIDADE
   ============================================================ */

.titulo-comunidade {

    /* Cor de fundo verde acinzentada */
    background-color: #b9c4ba;

    /* Cor verde do texto */
    color: #387548;

    /* Fonte serifada */
    font-family: Georgia, serif;

    /* Tamanho do texto */
    font-size: 19px;

    /* Espaçamento interno */
    padding: 6px 20px;

    /* Arredonda o título */
    border-radius: 20px;

    /* Faz o elemento ter apenas a largura necessária */
    width: fit-content;

    /* Centraliza horizontalmente */
    margin: 0 auto 8px;
}


/* ============================================================
   COMENTÁRIOS
   ============================================================ */

.comentario {

    /* Cor quase branca dos comentários */
    background-color: #faf7f2;

    /* Arredondamento */
    border-radius: 12px;

    /* Espaçamento interno */
    padding: 5px 15px;

    /* Espaçamento inferior */
    margin-bottom: 3px;

    /* Tamanho mínimo */
    min-height: 55px;
}


/* Nome do usuário */
.comentario strong {

    /* Faz o nome ficar em uma linha */
    display: block;

    /* Tamanho do nome */
    font-size: 14px;

    /* Cor preta */
    color: #111;

    /* Pequeno espaçamento inferior */
    margin-bottom: 1px;
}


/* Texto do comentário */
.comentario p {

    /* Tamanho pequeno para ficar parecido com a imagem */
    font-size: 11px;

    /* Cor preta */
    color: #111;

    /* Espaçamento inferior */
    margin-bottom: 3px;

    /* Altura das linhas */
    line-height: 1.2;
}


/* ============================================================
   CURTIDAS E INTERAÇÕES
   ============================================================ */

.interacoes {

    /* Tamanho do texto */
    font-size: 11px;

    /* Cor escura */
    color: #333;
}


/* Segundo contador */
.interacoes span {

    /* Espaçamento à esquerda */
    margin-left: 4px;
}


/* ============================================================
   LINK "VER RESPOSTAS"
   ============================================================ */

.respostas {

    /* Faz o link ocupar uma linha própria */
    display: block;

    /* Tamanho do texto */
    font-size: 8px;

    /* Cor preta */
    color: #222;

    /* Remove o sublinhado */
    text-decoration: none;

    /* Espaçamento superior */
    margin-top: 3px;
}


/* Quando passar o mouse sobre o link */
.respostas:hover {

    /* Adiciona sublinhado */
    text-decoration: underline;
}


/* ============================================================
   LINHA FINAL
   ============================================================ */

.linha {

    /* Altura da linha */
    height: 1px;

    /* Cor da linha */
    background-color: #777;

    /* Espaçamento superior */
    margin-top: 7px;

    /* Espaçamento inferior */
    margin-bottom: 8px;
}


/* ============================================================
   "VER TUDO"
   ============================================================ */

.ver-tudo {

    /* Faz o link ocupar uma linha */
    display: block;

    /* Centraliza o texto */
    text-align: center;

    /* Tamanho pequeno */
    font-size: 9px;

    /* Cor escura */
    color: #333;

    /* Remove sublinhado */
    text-decoration: none;
}


/* Adiciona sublinhado quando passar o mouse */
.ver-tudo:hover {

    text-decoration: underline;
}


/* ============================================================
   RESPONSIVIDADE
   ============================================================ */

/*
   Essas regras são aplicadas quando a tela
   tiver até 600px de largura.
*/