/* Correções de tela pequena do site institucional.
 *
 * Por que existe: o site publicado é um espelho (HTTrack) do CMS antigo, que
 * entregava um CABEÇALHO DIFERENTE para celular — o CSS original ainda cita
 * `header.header-mobile`, mas esse HTML nunca foi baixado, só a versão de
 * desktop. Resultado no celular: o menu inteiro aberto por cima do conteúdo e
 * blocos de largura fixa (ex.: `.content-banner`, com width = wrapper/2 = 720px)
 * estourando a tela.
 *
 * Aqui o menu de desktop é reaproveitado como menu de hambúrguer (o botão é
 * criado por mobile.js) e os blocos com largura fixa passam a caber. Os
 * `!important` são deliberados: o CSS do tema vem embutido em <style> no
 * próprio HTML de cada página e usa seletores longos.
 */

@media only screen and (max-width: 912px) {

    /* ---------- botão de hambúrguer (criado por mobile.js) ---------- */
    .js-menu-botao {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        margin-left: auto;
        background: transparent;
        border: 0;
        cursor: pointer;
        color: #fff;
        position: relative;
        z-index: 30;
    }

    /* Cabeçalho das páginas internas é claro, então o traço escurece. */
    header.header-pages .js-menu-botao,
    header.headerFixed:not(.header-home) .js-menu-botao {
        color: #222;
    }

    .js-menu-botao span,
    .js-menu-botao span::before,
    .js-menu-botao span::after {
        display: block;
        width: 24px;
        height: 2px;
        background: currentColor;
        border-radius: 2px;
        transition: transform .2s, opacity .2s;
    }

    .js-menu-botao span {
        position: relative;
    }

    .js-menu-botao span::before,
    .js-menu-botao span::after {
        content: '';
        position: absolute;
        left: 0;
    }

    .js-menu-botao span::before { top: -7px; }
    .js-menu-botao span::after  { top: 7px; }

    /* Vira um "X" com o menu aberto. */
    .js-menu-botao[aria-expanded="true"] span { background: transparent; }
    .js-menu-botao[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
    .js-menu-botao[aria-expanded="true"] span::after  { transform: translateY(-7px) rotate(-45deg); }

    /* ---------- menu ---------- */
    header #menu {
        position: static;
    }

    header #menu > ul {
        display: none !important;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #10293c;
        padding: 4px 0 !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        text-align: left;
    }

    header #menu.menu-aberto > ul {
        display: block !important;
    }

    header #menu li {
        display: block !important;
        width: 100%;
        padding: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, .07);
    }

    header #menu li:last-child {
        border-bottom: 0;
    }

    header #menu a {
        display: block;
        padding: 14px 20px !important;
        font-size: 14px !important;
        text-align: left !important;
        color: #fff !important;
        background: transparent !important;
        border-radius: 0 !important;
    }

    header #menu li:hover > a,
    header #menu li:focus-within > a {
        background: rgba(255, 255, 255, .08) !important;
        border-radius: 0 !important;
    }

    /* Submenus: empilham dentro do próprio menu, abrem no toque. */
    header #menu :is(.sub-menu, .sub-menu-info) {
        display: none !important;
        position: static !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        background: rgba(0, 0, 0, .28) !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    header #menu li.dropdown.submenu-aberto > :is(.sub-menu, .sub-menu-info) {
        display: block !important;
    }

    header #menu :is(.sub-menu, .sub-menu-info) li a {
        padding: 12px 20px 12px 36px !important;
        font-size: 13px !important;
        text-transform: none !important;
    }

    /* Sinal de + / − em quem tem submenu. */
    header #menu li.dropdown > a {
        position: relative;
        padding-right: 44px !important;
    }

    header #menu li.dropdown > a::after {
        content: '+';
        position: absolute;
        right: 18px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 18px;
        line-height: 1;
        font-weight: 700;
    }

    header #menu li.dropdown.submenu-aberto > a::after {
        content: '\2013';
    }

    /* No desktop o item "Informações" é só um ícone de barras; dentro do menu
       aberto isso não se entende, então mostra o texto. */
    header #menu li[data-icon-menu] > a i {
        display: none !important;
    }

    header #menu li[data-icon-menu] > a::before {
        content: 'Informações';
    }

    /* ---------- banner da home ---------- */
    /* Largura era calc(--wrapper-width / 2) = 720px, sem regra para celular. */
    /* Continua sobreposto ao vídeo (virar `static` joga o texto para DEPOIS
       do vídeo, que tem 100vh), só passa a usar a largura inteira. */
    .content-banner {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        max-width: 100% !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        padding: 0 18px !important;
        border-radius: 0 !important;
    }

    /* ---------- barra lateral das páginas de projeto ---------- */
    aside.aside-sig-fixed {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 24px !important;
        transform: none !important;
        border-radius: 0 !important;
    }

    /* O conteúdo dela só aparecia no :hover (opacity 0 + translateX(80px)),
       que no celular nunca acontece — ficava invisível e vazando 80px para
       fora da tela. E a "abinha" de puxar não faz sentido sem mouse. */
    aside.aside-sig-fixed :is(.aside__menu, .aside__contact) {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    aside.aside-sig-fixed::before {
        display: none !important;
    }

    aside.aside-sig-fixed nav {
        max-height: none !important;
        overflow: visible !important;
    }

    /* ---------- rede de segurança ---------- */
    img, video, iframe, table {
        max-width: 100%;
    }

    body {
        overflow-x: hidden;
    }
}