/* # indica um ID e . indica uma classe */


/* Inicio Estilização do fundo do site */
html,
body {
    margin: 0;
    background-color: #ffedc8d9;
    min-height: 100%;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#background {
    overflow: auto;
    background-color: #ffedc8d9;
    text-align: center;
}

/* Fim Estilização do fundo do site */


/* Inicio Estilização do topo do site */
#topo {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 20px 30px;
    background-color: #fff7e0;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.texto-topo {
    flex: 1;
    text-align: center;
}

.texto-topo h1 {
    margin: 0 0 10px 0;
    font-size: 2.2rem;
    color: #5a3200;
    letter-spacing: 1px;
}

.texto-topo p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: #5c4a2f;
}

/* Estilização do login e cadastro */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.conteudoModal {
    background-color: #fefefe;
    margin: 10% auto;
    padding: 20px;
    width: 300px;
    border-radius: 8px;
    text-align: center;
}

.fechar {
    color: #aaa;
    float: right;
    font-size: 28px;
    cursor: pointer;
}

#botaoLogin {
    position: absolute;
    top: 10px;
    right: 10px;
}

/* Fim Estilização do topo do site */


/* Inicio Estilização do menu de navegação */
#menu {
    background-color: #f0f0f0;
    padding: 10px;
    text-align: center;
}

a {
    text-decoration: none;
    color: #2315a6;
    font-weight: bold;
    padding: 30px;
}

/* Fim Estilização do menu de navegação */


/* Inicio Estilização da seção de categorias */
.categorias {
    /* 1. Tamanho e Estilo base */
    width: 250px;
    background-color: #f5e8c7;
    border-radius: 0 15px 15px 0;
    padding: 20px;
    box-shadow: 5px 0 20px rgba(0, 0, 0, 0.2);

    /* 2. Posicionamento e Esconderijo */
    position: fixed;   
    /* Ele fica preso na tela */
    left: 0;
    top: 250px;    
    /* Ajuste para ficar abaixo do header */    
    z-index: 1000;     
    /* Garante que ele fique NA FRENTE de tudo */
    transform: translateX(-230px); 
    /* Move o menu 230px para a esquerda (sobra uma bordinha de 20px aparecendo) */
    transition: transform 0.4s ease;
     /* Animação suave ao deslizar */
    cursor: pointer;
}

/* 3. Quando passar o mouse, ele volta para a posição original */
.categorias:hover {
    transform: translateX(0);
}

/* Adicionado um aviso visual na borda que sobra */
.categorias::after {
    content: "➔"; 
    /* Uma setinha indicando que tem algo ali */
    position: absolute;
    right: 10px;
    top: 50%;
    color: #8b4513;
    font-weight: bold;
}

.categorias:hover::after {
    display: none; /* Esconde a seta quando o menu abre */
}

.categorias ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.categorias li {
    margin-bottom: 1px;
}

.categorias a {
    display: block;
    padding: 6px 10px;
    text-decoration: none;
    color: #2d2d8b;
    line-height: 1.4;
}

.categorias a:hover {
    background-color: #f3e3b3;
    border-radius: 6px;
}

.corpo-a {
    flex: 1;
    /* Faz cada card ocupar o mesmo espaço */
    min-width: 280px;
    max-width: 350px;
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    /* Garante que a imagem não saia da borda arredondada */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

.container-receitas {
    display: flex;
    flex-direction: row;
    /* Força a direção horizontal */
    justify-content: center;
    align-items: stretch;
    /* Faz com que todos os cards fiquem com a mesma altura */
    gap: 20px;
    flex-wrap: nowrap;
    /* Impede que elas pulem linha em telas grandes */
    width: 100%;
    /* Ocupa a largura disponível */
    max-width: 1200px;
    /* Não deixa espalhar demais em telas gigantes */
    margin: 20px auto;
    /* Centraliza o bloco todo na página */
}

.imagem-receita-container {
    width: 100%;
    height: 150px;
    overflow: hidden;
    /* Esconde qualquer parte da imagem que sobrar */
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    margin-bottom: 15px;
    /* Espaço entre a imagem e o título */

}


.imagem-receita-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* corta e ajusta a imagem para preencher sem distorcer */
    object-position: center;
    /* Centraliza o corte */
}

.conteudo-receita {
    padding: 20px;
    padding-top: 0;
    /* Título já tem margem, não precisa de padding extra no topo */
}

/* Fim Estilização da seção de categorias */


/* Inicio Estilização da seção de receitas */
.receitas-recentes {
    text-align: center;
    margin-top: 30px;
    margin-left: 120px;
    padding: 20px;
}

.grade-receitas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    max-width: 1000px;
    margin: 0 auto;
    flex-wrap: wrap;
    /* Permite que os cards pulem para a linha de baixo em telas menores */
}

.receita-card {
    width: 100%;
    margin: 0 auto;
    border: 2px solid #b5651d;
    border-radius: 10px;
    padding: 10px;
    background-color: #fff7e0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /*Crescimento suave da foto e da sombra*/
    cursor: pointer;
    /*mãozinha do mouse*/
}

.receita-card:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);

}

.receita-card a {
    display: block;
    margin-top: 10px;
    color: #2315a6;
    font-weight: bold;
    text-decoration: none;
    padding: 0;
}

.receita-card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
}

.receita-card h3 {
    margin-top: 10px;
    font-size: 18px;
}

/* Fim Estilização da seção de receitas */


/* Inicio Estilização do formulário */
form {
    max-width: 400px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff7e0;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Fim Estilização do formulário */

/* Inicio Estilização do sobre */

.nos-move {
    text-align: center;
    margin-top: 30px;
}

.pictures-family {
    /*display: inline-block;*/
    width: 250px;
    /*margin: 40px 40px;*/
    border: 20px groove #802424c7;
    border-radius: 10px;
    padding: 10px;
    background-color: #fff7e0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /*Crescimento suave da foto e da sombra*/
    cursor: pointer;
    /*mãozinha do mouse*/
}

.pictures-family:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);

}

.pictures-family img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
}

.fotos-container {
    display: flex;
    /* O flexbox organiza, alinha e distribui os espaços entre os elemente */
    justify-content: center;
    /* Alinha os itens horizontalmente no centro */
    align-items: center;
    /* Alinha os itens verticalmente (se houver alturas diferentes) */
    flex-wrap: wrap;
    /* Se a tela for pequena, as fotos pulam para a linha de baixo */
    gap: 20px;
    /* Cria um espaçamento uniforme entre as fotos sem precisar de margin */
    padding: 20px;
    /* Espaço interno para não encostar nas bordas da tela */
}

/* Fim Estilização do sobre */

/* Inicio Estilização das páginas de receitas */
.corpo {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff7e0;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Fim Estilização das páginas de receitas */

/* Inicio Estilização dos comentários */
#grade-comentarios {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    padding: 20px;
}

#comentarios {
    width: 100%;
    max-width: 700px;
    background-color: #fff7e0;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    text-align: left;
    border: 1px solid #e0d2b8;
}

#comentarios h2 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #5a3200;
    font-size: 1.8rem;
}

#comentarios p {
    margin-bottom: 20px;
    color: #5c4a2f;
    font-size: 1rem;
    line-height: 1.5;
}

.form-comentario {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.form-comentario input,
.form-comentario textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #c9b79c;
    border-radius: 10px;
    font-size: 1rem;
    background-color: #fffdf8;
    box-sizing: border-box;
    outline: none;
}

.form-comentario textarea {
    min-height: 140px;
    resize: vertical;
}

.form-comentario input:focus,
.form-comentario textarea:focus {
    border-color: #b5651d;
    box-shadow: 0 0 0 3px rgba(181, 101, 29, 0.15);
}

.form-comentario button {
    align-self: flex-start;
    background-color: #b5651d;
    color: white;
    border: none;
    padding: 12px 22px;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.form-comentario button:hover {
    background-color: #8f4a12;
    transform: translateY(-2px);
}

/* Fim Estilização dos comentários */

/* Inicio Estilização do rodapé */
#rodape {
    width: 100%;
    background-color: #f0f0f0;
    text-align: center;
    padding: 15px 10px;
    margin-top: auto;
}

/* Fim Estilização do rodapé */