/* Estilos Responsivos */

/* Tablets e dispositivos menores */
@media (max-width: 992px) {
  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-social {
    grid-column: span 2;
  }

  .content-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .carousel {
    height: 400px;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* Dispositivos móveis */
@media (max-width: 768px) {
  .header .container {
    display: flex;
    align-items: center; /* Centraliza verticalmente a logo e o menu-toggle */
    justify-content: space-between; /* Garante espaço entre a logo e o menu-toggle */
  }

  .logo img {
    max-width: 80px; /* Ajusta o tamanho da logo */
    height: auto; /* Mantém a proporção da imagem */
  }

  .menu-toggle {
    display: block;
    margin-left: auto; /* Garante que o menu-toggle fique alinhado à direita */
  }

  h1 {
    font-size: 1.8rem;
  }

  .nav-desktop {
    display: none;
  }

  .menu-toggle {
    display: block;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-social {
    grid-column: auto;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .social-grid {
    flex-direction: row; /* Alinha os itens horizontalmente */
    justify-content: center; /* Centraliza os itens */
    gap: 1rem; /* Ajusta o espaçamento entre os itens */
  }

  .social-item {
    flex-direction: column; /* Mantém o ícone e o texto empilhados */
    align-items: center;
    gap: 0.25rem; /* Reduz o espaçamento entre ícone e texto */
  }

  .social-icon {
    width: 50px; /* Reduz o tamanho do ícone */
    height: 50px;
  }

  .social-icon i {
    font-size: 1.5rem; /* Ajusta o tamanho do ícone */
  }

  .social-item span {
    font-size: 0.9rem; /* Reduz o tamanho do texto */
  }

  .calendar-container {
    overflow-x: auto;
  }

  .day {
    height: 80px;
  }

  .image-row {
      flex-direction: column; /* Empilha as imagens verticalmente */
      gap: 1rem; /* Reduz o espaçamento entre as imagens */
  }

  .church-image {
      max-width: 100%; /* Garante que as imagens ocupem toda a largura disponível */
      height: auto; /* Mantém a proporção da imagem */
  }

  .contact-grid {
      display: flex;
      flex-direction: column; /* Empilha os elementos verticalmente */
      gap: 2rem; /* Espaçamento entre os elementos */
      align-items: flex-start; /* Alinha os elementos à esquerda */
      text-align: left; /* Alinha o texto à esquerda */
  }

  .contact-form-container,
  .contact-info {
      width: 100%; /* Garante que os elementos ocupem toda a largura disponível */
      max-width: 500px; /* Limita a largura máxima para evitar que fique muito largo */
      box-sizing: border-box; /* Inclui padding no tamanho total */
  }

  .contact-form-container form {
      width: 100%; /* Garante que o formulário não ultrapasse a largura */
  }

  .contact-info .info-item,
  .contact-info .schedule-item {
      text-align: left; /* Alinha o texto à esquerda */
  }

  .info-card,
  .schedule-card {
      text-align: left; /* Alinha o texto à esquerda */
  }

  .info-item {
      flex-direction: column; /* Empilha os ícones e textos */
      align-items: flex-start; /* Alinha os itens à esquerda */
      gap: 0.5rem; /* Espaçamento entre os elementos */
  }

  .info-item i {
      margin-right: 0; /* Remove o espaçamento lateral */
      margin-bottom: 0.5rem; /* Adiciona espaçamento abaixo do ícone */
  }

  .schedule-card h3 {
      font-size: 1.2rem; /* Ajusta o tamanho do título */
      margin-bottom: 0.5rem;
  }

  .schedule-item {
      margin-bottom: 1rem; /* Ajusta o espaçamento entre os itens */
  }

  input[type="date"] {
    appearance: none; /* Remove o estilo padrão do navegador */
    -webkit-appearance: none; /* Remove o estilo padrão no Safari */
    background-color: #fff; /* Define um fundo branco para o campo */
    border: 1px solid #ccc; /* Adiciona uma borda visível */
    border-radius: 4px; /* Adiciona bordas arredondadas */
    padding: 0.75rem 1rem; /* Adiciona espaçamento interno para torná-lo maior */
    font-size: 1rem; /* Ajusta o tamanho da fonte */
    color: #333; /* Define a cor do texto */
    width: 100%; /* Garante que o campo ocupe toda a largura disponível */
    box-sizing: border-box; /* Inclui padding no tamanho total */
    cursor: pointer; /* Adiciona um cursor de ponteiro para indicar interatividade */
  }

  input[type="date"]::placeholder {
    color: #aaa; /* Define a cor do texto do placeholder */
    font-size: 0.9rem; /* Ajusta o tamanho do texto do placeholder */
  }

  input[type="date"]::-webkit-calendar-picker-indicator {
    display: block;
    margin-right: 10px;
    cursor: pointer;
    opacity: 1; /* Garante que o ícone do calendário seja visível */
  }

  input[type="date"]:focus {
    border-color: #007bff; /* Altera a cor da borda ao focar */
    outline: none; /* Remove o contorno padrão */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Adiciona um efeito de foco */
  }

  /* Adiciona um ícone de calendário para indicar que é um campo de data */
  input[type="date"]::-webkit-calendar-picker-indicator {
    display: block;
    margin-right: 10px;
    cursor: pointer;
  }
}

/* Dispositivos móveis pequenos */
@media (max-width: 480px) {
  .container {
    padding: 0 15px;
  }

  h1 {
    font-size: 1.5rem;
  }

  .carousel {
    height: 250px;
  }

  .social-icons a {
    width: 35px;
    height: 35px;
  }
}