/* Padrão utilizado para restaurar as configurações padrão do navegador */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Definir cores reutilizáveis com variáveis de CSS */
:root {
  --primary-100: #9ae600;
  --primary-200: #7ccf00;
  --text: #fff;
  --text-grey-100: #a1a1a1;
  --text-grey-200: #71717b;
  --text-placeholder: #474b4c;

  font-size: 62.5% !important; /* 1rem = 10px */
}

body {
  font-family: "Space Grotesk", sans-serif !important;
  font-size: 1.6rem !important;
  color: var(--text);
}

.main {
  margin-bottom: 64px;
}

.imagem-paincipal-container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.imagem-principal {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.menu-btn {
  position: fixed;
  top: 20px;
  right: 20px;
  background-color: var(--primary-100);
  color: var(--text);
  border: none;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  z-index: 999; /* Garantir que o botão fique acima de outros elementos */
  transition: all 0.2s ease-in-out; /* Efeito de transição suave para o hover */
}

.menu-btn:hover {
  background-color: var(--primary-200);
  cursor: pointer;
}

/* O seletor > do CSS é utilizado para selecionar APENAS os elementos filhos diretos, e nenhum outro na hierarquia */
.menu-btn > svg {
  color: white;
}

.modal-menu {
  width: 50%;
  max-width: 400px;
  background-color: white;
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  padding: 24px;
}

.modal-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-menu-title {
  font-size: 2.4rem;
  font-weight: 600;
}

.modal-menu-close-span {
  font-size: 32px;
}

.modal-menu-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 32px;
}

.modal-menu-link {
  display: inline-flex;
  justify-items: center;
  align-items: center;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 1.8rem;
  font-weight: 500;
  background-color: var(--primary-200);
  color: white;
  text-decoration: none; /* Remover sublinhado padrão dos links */
  transition: all 0.2s ease-in-out; /* Efeito de transição suave para hover */
}

.modal-menu-link:hover {
  text-decoration: none; /* Não exibir sublinhado ao passar o mouse */
  color: white;
  scale: 1.02; /* Aumentar o tamanho ao passar o mouse */
}

/* Media query para o Menu */
@media (max-width: 768px) {
  .menu-btn {
    top: 16px;
    right: 16px;
    width: 48px;
    height: 48px;
    font-size: 20px;
  }
  .modal-menu {
    width: 70%;
    padding: 12px;
  }
  .modal-menu-link {
    padding: 8px 12px;
    font-size: 14px;
  }
}

.divisor {
  width: 100%;
  height: 1px;
  background-color: var(--text-grey-100);
  margin: 32px 0;
}

.receita-background {
  height: 40vh; /* 40% da altura da tela */
  position: relative;
}

.receita-background img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Garantir que a imagem cubra todo o espaço disponível */
}

/* Efeito de Overlay, para adicionar uma leve camada preta sobre a imagem de fundo 
   O seletor ::after do CSS é utilizado para criar um elemento virtual que é inserido após o conteúdo de um elemento 
*/
.receita-background::after,
.imagem-paincipal-container::after {
  content: "";
  position: absolute;
  inset: 0; /* Cobrir todo o elemento pai */
  background-color: rgba(0, 0, 0, 0.3);
}

.receita-header {
  margin-top: 32px;
}

.receita-header .titulo {
  margin-top: 2.8rem;
  font-weight: 600;
}

.receita-header .descricao {
  font-size: 1.8rem;
  display: block;
  margin: 12px 0;
}

.receita-header-badges {
  display: flex;
  flex-wrap: wrap; /* Permitir que os itens quebrem para a próxima linha se não houver espaço suficiente */
  gap: 20px;
  padding: 12px 4px;
  align-items: center;
}

.receita-header-badges .badge-item {
  display: flex;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--text-grey-100);
  border-radius: 8px;
  padding: 8px 12px;
}

.receita-header-badges .badge-titulo {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1px; /* Deixar as letras um pouco mais espaçadas para melhorar a legibilidade */
  color: var(--text-grey-200);
  font-size: 1.4rem;
}

.receita-header-badges .badge-valor {
  font-weight: 700;
}

/* Media query para a o Header da receita */
@media (max-width: 768px) {
  .receita-header-badges {
    gap: 8px;
  }
  .receita-header .descricao {
    font-size: 1.6rem;
  }
  .receita-header-badges .badge-item {
    padding: 6px 8px;
  }
  .receita-header-badges .badge-item svg {
    width: 18px;
    height: 18px;
  }
  .receita-header-badges .badge-titulo {
    font-size: 1.2rem;
  }
  .receita-header-badges .badge-valor {
    font-size: 1.4rem;
  }
}

.receita-conteudo {
  padding: 24px;
  border: 1px solid var(--text-grey-100);
  border-radius: 12px;
}

.receita-conteudo-container {
  margin-left: 12px;
  margin-top: 24px;
}

.subtitulo {
  font-size: 2rem;
}

.ingredientes-lista-item,
.modo-de-preparo-item {
  padding: 6px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.modo-de-preparo-item {
  padding: 10px 6px !important; /* Garantir que o espaçamento apenas do modo de preparo seja sobrescrito */
}

.ingredientes-check-input,
.modo-de-preparo-check-input {
  width: 22px;
  height: 22px;
  cursor: pointer;
  border: 2px solid var(--primary-200);
  border-radius: 4px;
  position: relative;
  background-color: transparent; /* Deixe o fundo transparente para mostrar a borda personalizada */
  flex-shrink: 0; /* Não deixe o checkbox encolher */
  appearance: none; /* Nenhuma aparência padrão */
}

.ingredientes-check-input:checked,
.modo-de-preparo-check-input:checked {
  background-color: var(--primary-200);
}

/* Estilizar a flecha dentro do checkbox quando estiver marcado
    A pseudo-classe ::after é usada para criar um elemento visual adicional dentro do checkbox, 
    que é posicionado e estilizado para parecer uma marca de seleção (checkmark) quando o checkbox estiver marcado.
*/
.ingredientes-check-input:checked::after,
.modo-de-preparo-check-input:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 11px;
  border: 2px solid white;
  border-top: none;
  border-left: none;
  transform: rotate(45deg); /* Rotacionar para criar a forma de checkmark */
}

.ingredientes-check-label,
.modo-de-preparo-check-label {
  font-size: 1.8rem;
  margin-bottom: 0 !important;
  cursor: pointer;
  user-select: none; /* Evitar que o texto seja selecionado ao clicar */
}

/* O + do CSS é utilizado para selecionar o elemento irmão imediatamente seguinte */
.ingredientes-check-input:checked + .ingredientes-check-label,
.modo-de-preparo-check-input:checked + .modo-de-preparo-check-label {
  text-decoration: line-through; /* Riscar a linha quando a opção estiver selecionada */
  color: var(--text-grey-200);
}

/* Media query para o Conteúdo da receita */
@media (max-width: 768px) {
  .receita-conteudo {
    padding: 12px;
  }
  .receita-conteudo-container {
    margin-left: 0;
    margin-top: 12px;
  }
  .subtitulo {
    font-size: 1.8rem;
  }
  .ingredientes-check-label,
  .modo-de-preparo-check-label {
    font-size: 1.6rem;
  }
}

.receita-imagem {
  border-radius: 6px;
  width: 300px;
  height: auto;
}

/* Media query para a imagem */
@media (max-width: 768px) {
  .receita-imagem {
    width: 200px;
  }
}