/*
 * Ajustes de layout para celular — Brace Pharma (18/09/2026).
 * Carregado em todas as páginas pelo plugin bracepharma-react. Cobre o que
 * vive dentro de widgets HTML do Elementor (cabeçalho, áreas de atuação,
 * landing do Abrace-me) sem precisar reeditar cada widget.
 */

/* ── Cabeçalho (template Elementor #111) ─────────────────────────────────
 * No celular tudo numa linha só: logo · BraceConecta · Abrace-me · hambúrguer.
 * Botões compactos (só o logo de cada programa, rótulo minúsculo em cima). */
@media (max-width: 1024px) {
  .elementor-location-header .elementor-element-de94070 {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 10px !important;
  }
  .elementor-location-header .elementor-element-4a435af { order: 1; flex: 0 1 auto !important; width: auto !important; min-width: 0; }
  .elementor-location-header .elementor-element-4a435af img { max-width: 92px; height: auto; }
  .elementor-location-header .elementor-element-19fa6cf { order: 2; }
  .elementor-location-header .elementor-element-3e33d59 { order: 3; }
  .elementor-location-header .elementor-element-19fa6cf,
  .elementor-location-header .elementor-element-3e33d59 {
    flex: 0 0 auto !important;
    width: auto !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
  }
  .elementor-location-header .elementor-element-1e71be6 { order: 4; flex: 0 0 auto !important; width: auto !important; margin-left: 2px; }
  .elementor-location-header .elementor-element-1e71be6 .elementor-menu-toggle { padding: 9px !important; } /* alvo de toque ≥ 40px */
  .elementor-location-header .bp-hdr-btn { gap: 3px; }
  .elementor-location-header .bp-hdr-label { font-size: 9px; letter-spacing: .1px; } /* 7,5px era ilegível (auditoria 23/09) */
  .elementor-location-header .btn-brace-conecta { padding: 5px 9px !important; }
  .elementor-location-header .btn-brace-conecta img { height: 14px !important; }
}
@media (max-width: 360px) {
  .elementor-location-header .elementor-element-4a435af img { max-width: 78px; }
  .elementor-location-header .btn-brace-conecta { padding: 4px 7px !important; }
  .elementor-location-header .btn-brace-conecta img { height: 12px !important; }
}

/* ── Home: "Nossas Áreas de Atuação" — 2 colunas no celular em vez de 1 ─── */
@media (max-width: 480px) {
  #widget-areas-atuacao .cards-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  #widget-areas-atuacao .area-card { padding: 22px 10px !important; border-radius: 12px !important; }
  #widget-areas-atuacao .area-card .icon-wrapper { width: 56px !important; height: 56px !important; margin-bottom: 12px !important; }
  #widget-areas-atuacao .area-card h3, #widget-areas-atuacao .area-card .card-title { font-size: 13px !important; }
  #widget-areas-atuacao .section-title { font-size: 24px !important; }
}

/* ── Home: cards "Sou paciente / Acesso médico" ─────────────────────────── */
@media (max-width: 480px) {
  #widget-audience-cards .card { padding: 22px 18px !important; }
}

/* ── Landing do Abrace-me (página #97, widget HTML) ───────────────────────
 * O menu de links continuava visível e forçava 887px de largura; a pergunta
 * do FAQ tinha white-space:nowrap e esticava a coluna para 509px.          */
@media (max-width: 768px) {
  .am-page .am-nav-links-menu { display: none !important; }
  .am-page .am-nav-links { width: auto !important; gap: 8px !important; }
  .am-page .am-nav { gap: 8px !important; }
  .am-page .am-nav img, .am-page .am-nav-logo img { max-height: 30px; }
  .am-page .am-faq-q { white-space: normal !important; padding: 16px 18px !important; font-size: 14px !important; }
  .am-page .am-faq-items, .am-page .am-faq-item, .am-page .am-desc, .am-page .am-title { max-width: 100% !important; }
  .am-page .am-hero { min-height: 480px !important; }
  .am-page .am-hero-content h1 { font-size: 30px !important; }
  .am-page .am-cta-final-btns { flex-direction: column; }
  .am-page .am-cta-final-btns a { width: 100%; text-align: center; }
}

/* ── Segurança geral: nada deve rolar na horizontal no celular ──────────── */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; }
  img, video, iframe { max-width: 100%; }
}

/* ── Política de Privacidade: tabelas viram blocos empilhados no celular (auditoria 23/09) ── */
@media (max-width: 600px) {
  .bpl-wrap table, .bpl-wrap tbody, .bpl-wrap tr, .bpl-wrap th, .bpl-wrap td { display: block; width: 100% !important; }
  .bpl-wrap th { border-bottom: 0; padding-bottom: 4px; }
  .bpl-wrap td { padding-top: 0; }
  .bpl-wrap td, .bpl-wrap th, .bpl-wrap a { overflow-wrap: anywhere; word-break: break-word; }
}