/* ===========================================================
   MOBILE SAFETY LAYER — TECBORR
   Carregado por último em components/header.php, portanto vence
   o cascade em todo o site. Objetivo: garantir que nenhuma página
   role horizontalmente no celular e que nenhum conteúdo seja cortado.
   Rede de segurança que trata a causa de overflow na origem.
   =========================================================== */

/* 1) box-sizing consistente (reafirma o default do Bootstrap) */
*, *::before, *::after { box-sizing: border-box; }

/* 2) Mídia nunca estoura o container */
img, svg, video, canvas { max-width: 100%; }
img, video, canvas { height: auto; }
iframe, embed, object { max-width: 100%; }

/* 3) Quebra de palavras longas (URLs, e-mails, termos técnicos) */
h1, h2, h3, h4, h5, h6,
p, li, a, span, strong, blockquote, figcaption, dd, dt {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* ======================= MOBILE (<= 991px) ======================= */
@media (max-width: 991px) {
    /* Tabelas de conteúdo (ex.: corpo de artigos do blog) rolam dentro
       de sua própria caixa em vez de empurrar a página inteira. */
    table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Blocos de código idem */
    pre {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: pre-wrap;
        word-break: break-word;
    }
    code { overflow-wrap: anywhere; }

    /* Animações de scroll (WOW.js / animate.css): no mobile os efeitos
       de deslize horizontal (fadeInRight/fadeInLeft) deixam o elemento
       preso em translateX(±50px), empurrando o conteúdo para fora da
       tela e cortando ~34px. Neutraliza o deslize e garante que TODO
       conteúdo apareça no lugar certo, visível, sem overflow lateral. */
    .wow {
        animation: none !important;
        -webkit-animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
    }

    /* Widget de contato lateral (blog + páginas de produto): o bloco de
       texto é um flex item com min-width:auto e não encolhia, vazando
       ~177px para fora da tela e gerando scroll horizontal real. */
    .service-sidebar-contact { flex-wrap: wrap; }
    .service-sidebar-contact > div { min-width: 0; max-width: 100%; }
    .service-sidebar-contact .h4-title,
    .service-sidebar-contact > div span { overflow-wrap: anywhere; }

    /* Rede de segurança final: impede scroll lateral acidental.
       As correções específicas removem o overflow na origem; isto
       apenas garante que nada escape em navegadores antigos. */
    html, body { overflow-x: hidden; }
    body { max-width: 100%; }
}