/* 
 * Mobile Optimization CSS
 * Otimizações específicas para dispositivos móveis
 * Parte do projeto de otimização do template N10 News Portal
 */

/* Ajustes gerais para mobile */
@media (max-width: 768px) {
  html {
    font-size: 15px; /* Tamanho base ligeiramente menor para mobile */
  }
  
  .container {
    padding: 1rem;
    margin: 0.5rem auto;
  }
  
  /* Melhorar espaçamento em mobile */
  h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0.75rem;
  }
  
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }
  
  /* Reduzir tamanho dos decoradores */
  h2::after, h3::after {
    width: 2.5rem;
    height: 3px;
    margin-top: 0.35rem;
  }
  
  /* Ajustar margens de parágrafos */
  p {
    margin-bottom: 1.25rem;
  }
  
  /* Melhorar visualização de botões em telas touch */
  .button, button, input[type="submit"] {
    padding: 0.85rem 1.5rem;
    min-height: 44px; /* Altura mínima para alvos touch */
    min-width: 44px; /* Largura mínima para alvos touch */
  }
}

/* Ajustes específicos para telas muito pequenas */
@media (max-width: 480px) {
  html {
    font-size: 14px;
  }
  
  .container {
    padding: 0.75rem;
    margin: 0.35rem auto;
    border-radius: 8px; /* Bordas menos arredondadas em telas pequenas */
  }
  
  /* Ajustar grid para uma coluna em telas pequenas */
  .grid, .flex-grid, [class*="grid-"] {
    grid-template-columns: 1fr !important;
  }
  
  /* Melhorar visualização de imagens */
  img {
    height: auto !important; /* Evitar distorções */
  }
  
  /* Ajustar tamanho de fontes para títulos */
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.35rem; }
  h3 { font-size: 1.2rem; }
  
  /* Melhorar espaçamento de listas */
  ul, ol {
    margin-left: 1.25rem;
    margin-bottom: 1.25rem;
  }
  
  /* Ajustar tamanho de blockquotes */
  blockquote {
    padding: 0.75rem 1rem;
    margin: 1.25rem 0;
  }
}

/* Otimizações para o header em mobile */
@media (max-width: 768px) {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
  }
  
  .header-inner {
    padding: 0.5rem 1rem;
    border-radius: 0;
  }
  
  .branding-wrapper img {
    max-height: 50px;
    width: auto;
  }
  
  /* Melhorar menu mobile */
  .menu-toggle {
    width: 44px;
    height: 44px;
  }
}

/* Otimizações para artigos em mobile */
@media (max-width: 768px) {
  .entry-header {
    padding: 0.5rem 0.75rem 1rem;
  }
  
  .entry-title {
    font-size: clamp(1.2rem, 5vw, 1.8rem);
    line-height: 1.3;
  }
  
  .entry-subtitle {
    font-size: clamp(0.9rem, 3vw, 1.1rem);
  }
  
  /* Ajustar meta dados */
  .entry-meta-top {
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
  }
  
  /* Melhorar visualização de imagens destacadas */
  .post-thumbnail img {
    border-radius: 6px;
  }
  
  /* Ajustar cards relacionados */
  .related-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
  }
  
  .related-title {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
  }
}

/* Otimizações para footer em mobile */
@media (max-width: 768px) {
  .footer-container {
    margin: 2rem auto 1rem;
    padding: 1.5rem 1rem;
  }
  
  .footer-widgets--flex {
    gap: 1.5rem;
  }
  
  .footer-widget-area, .footer-newsletter {
    padding: 1rem;
  }
  
  .footer-widget-area .widget-title, 
  .footer-newsletter .card-title {
    font-size: 1.1rem;
  }
}

/* Melhorias de acessibilidade para touch */
@media (max-width: 768px) {
  /* Aumentar área de toque para links */
  a {
    padding: 0.15rem 0;
  }
  
  /* Melhorar visualização de formulários */
  input, select, textarea {
    font-size: 16px !important; /* Evitar zoom automático em iOS */
    padding: 0.75rem !important;
    min-height: 44px;
  }
  
  /* Melhorar contraste */
  .entry-meta-top {
    color: rgba(0,0,0,0.7);
  }
}

/* Otimizações para sidebar em mobile */
@media (max-width: 768px) {
  .sidebar-primary {
    margin-top: 2rem;
    padding: 0;
  }
  
  .widget {
    margin-bottom: 1rem;
  }
  
  .widget-title {
    padding: 0.65rem 1rem;
  }
}

/* —————————————— */
/*  Carregamento lazy — */
/* —————————————— */

/* Inicialmente, todas as imagens lazy ficam transparentes */
img.lazyload,
img.lazyloading {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

/* Quando a imagem termina de carregar, fica 100% opaca */
img.lazyloaded {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

/* Placeholder (wrapper) para imagens durante o carregamento */
.image-placeholder {
  background-color: #f0f0f0;
  position: relative;
  overflow: hidden;
}

/* O shimmer em si (pseudo-elemento) */
.image-placeholder::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: placeholder-shimmer 1.5s infinite;
}

/* Assim que o wrapper ganhar .loaded, remove de vez o shimmer e o fundo */
.image-placeholder.loaded {
  background-color: transparent;
}

.image-placeholder.loaded::after {
  display: none;
}

/* Garante que a <img> sempre ocupe 100% do espaço do wrapper */
.image-placeholder img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Animação do shimmer */
@keyframes placeholder-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}