/* mobile-fixes.css — correções de layout (telemóvel) e menu
   Coloque este ficheiro DEPOIS do CSS principal. */

html, body { overflow-x: hidden; }
img, video, iframe { max-width: 100%; height: auto; }
table { max-width: 100%; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
pre, code { white-space: pre-wrap; word-break: break-word; }

/* Evitar 100vw a criar scroll horizontal em alguns browsers */
[class*="container"], .content-wrap { max-width: 1100px; width: min(1100px, calc(100% - 32px)); margin-left: auto; margin-right: auto; }

/* Menu mobile robusto */
@media (max-width: 900px) {
  .header-container { flex-wrap: wrap; gap: 12px; }
  .logo-area { flex: 1 1 auto; }
  .menu-toggle { display: inline-flex; }

  /* Por defeito o menu fica escondido no mobile */
  #menu { display: none; width: 100%; flex-direction: column; gap: 8px; padding: 10px 0; }

  /* Abre quando o botão tem aria-expanded=true e o nav vem a seguir */
  .menu-toggle[aria-expanded="true"] + #menu { display: flex; }

  #menu a { padding: 10px 12px; border-radius: 12px; }

  /* Hero e grelhas para 1 coluna */
  .hero-container { display: block; }
  .hero-left { width: 100%; }
  .slider-container { width: 100%; margin-top: 16px; }

  .about-blocks, .services-grid, .contact-container { grid-template-columns: 1fr !important; }
  .about-block, .service-card { width: 100%; }

  /* Tipografia */
  h1 { font-size: clamp(1.55rem, 5.2vw, 2.1rem); line-height: 1.15; }
  h2 { font-size: clamp(1.25rem, 4.6vw, 1.6rem); }
}