/* =====================================================================
   MATHJAX RESPONSIVO
   =====================================================================

   Objetivo
   --------
   Padronizar a exibição das equações em todo o Fisica.net.

   Classes disponíveis
   -------------------

   .math
       • Para aproximadamente 99% das equações.
       • Não possui barra de rolagem.
       • Centraliza a equação.

   .math-mobile
       • Apenas para equações muito longas.
       • Em desktops comporta-se exatamente como .math.
       • Em celulares reduz a fonte e permite rolagem horizontal
         somente quando necessário.

   Exemplos

   <div class="math">
      \( E = mc^2 \)
   </div>

   <div class="math-mobile">
      \( ... equação muito longa ... \)
   </div>

===================================================================== */


/* ==========================================================
   EQUAÇÕES NORMAIS
   ========================================================== */

.math{

    text-align:center;
    margin:1rem auto;

}


/* ==========================================================
   EQUAÇÕES MUITO GRANDES
   ========================================================== */

.math-mobile{

    text-align:center;
    margin:1rem auto;

}


/* ==========================================================
   TABLETS E CELULARES
   ========================================================== */

@media (max-width:768px){

    .math-mobile{

        overflow-x:auto;
        overflow-y:hidden;

        /* Rolagem suave no iOS */
        -webkit-overflow-scrolling:touch;

    }

    .math-mobile mjx-container{

        display:inline-block !important;

        /* impede quebra da equação */
        white-space:nowrap;

        /* largura mínima igual ao conteúdo */
        min-width:max-content;

        /* reduz discretamente a fonte */
        font-size:.82em;

    }

}


/* ==========================================================
   SMARTPHONES
   ========================================================== */

@media (max-width:576px){

    .math-mobile mjx-container{

        font-size:.72em;

    }

}


/* ==========================================================
   SMARTPHONES MUITO ESTREITOS
   ========================================================== */

@media (max-width:400px){

    .math-mobile mjx-container{

        font-size:.62em;

    }

}