/* ---------------------------- Layout Básico ---------------------------- */

/* Tornar as imagens responsivas */
img {
  max-width: 100%;   /* Limita a largura das imagens */
  height: auto;      /* Mantém a proporção das imagens */
}

/* Ajuste básico do corpo da página */
body {
  font-size: 16px; /* Tamanho base da fonte */
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

/* ---------------------------- Flexbox para Layout ---------------------------- */

/* Container principal que usa Flexbox */
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* Itens dentro do container (ex: produtos, seções) */
.item {
  flex: 1 1 30%; /* Ocupa 30% da largura disponível */
  margin: 10px;
}

/* ---------------------------- Menu ---------------------------- */

/* Menu padrão - Flexbox */
.menu {
  display: flex;
  justify-content: space-around;
}

/* Menu hambúrguer - escondido por padrão */
.menu-hamburguer {
  display: none;
  cursor: pointer;
}

/* Exibe o menu hambúrguer em telas pequenas */
@media (max-width: 767px) {
  .menu {
    display: none; /* Esconde o menu padrão em telas pequenas */
  }

  .menu-hamburguer {
    display: block; /* Exibe o ícone do menu hambúrguer */
  }

  /* Exibe o menu ao clicar no ícone hambúrguer */
  .menu-hamburguer:checked + .menu {
    display: block;
  }
}

/* ---------------------------- Media Queries ---------------------------- */

/* Para telas de desktop (largura maior que 1200px) */
@media (min-width: 1200px) {
  .container {
    max-width: 1200px;
    margin: 0 auto; /* Centraliza o conteúdo */
  }
}

/* Para tablets em orientação paisagem (768px a 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .container {
    max-width: 90%; /* Ajusta a largura do container */
  }

  .item {
    flex: 1 1 45%; /* Ocupa 45% da largura em tablets */
  }
}

/* Para dispositivos móveis (largura até 767px) */
@media (max-width: 767px) {
  /* Ajusta o tamanho da fonte */
  body {
    font-size: 14px;
  }

  .container {
    width: 100%;
    padding: 10px;
  }

  .item {
    flex: 1 1 100%; /* Itens ocupam 100% da largura */
  }

  /* Ajuste no menu - transformando em hamburguer */
  .menu {
    display: none;  /* Esconde o menu normal */
  }

  .menu-hamburguer {
    display: block;  /* Exibe o menu hamburguer */
    font-size: 24px; /* Ajuste no tamanho do ícone */
    cursor: pointer;
  }

  /* Adicionalmente, ajuste de fontes para outros elementos */
  .header {
    font-size: 18px;
  }
}

/* Ajustes no layout para garantir boa usabilidade em dispositivos móveis */
@media (max-width: 767px) {
  .header, .footer {
    text-align: center;
  }
}

/* ---------------------------- Outras Configurações ---------------------------- */

/* Ajustes nos botões para garantir acessibilidade e boa interação */
button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

button:hover {
  background-color: #ddd;
}