/* ==========================================================
   FERRAMENTAS FLASH — MOBILE MENU V7
   Correção isolada de responsividade do menu principal e dos
   cabeçalhos da área /guias/, sem alterar o núcleo React.
   ========================================================== */

/* Evita qualquer deslocamento horizontal provocado pelo header/editorial. */
html,
body{max-width:100%;overflow-x:hidden}
body.ff-guides{width:100%;max-width:100vw;overflow-x:hidden}
body.ff-guides .ffg-hero,
body.ff-guides .ffg-shell,
body.ff-guides .ffg-article-layout,
body.ff-guides .ffg-breadcrumb,
body.ff-guides .ffg-footer{min-width:0;max-width:100%}

@media (max-width:640px){
  /* -------------------------------------------------------
     SITE PRINCIPAL: marca em cima; Ferramentas/Favoritos/
     Guias em uma linha; busca abaixo. Não esconder mais o
     texto “Ferramentas” em telas estreitas.
     ------------------------------------------------------- */
  #ff-v12-header:not(.ff-guides-shell-header) .ff12-header-inner{
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    padding:10px 12px 11px!important;
    gap:9px!important;
  }
  #ff-v12-header:not(.ff-guides-shell-header) .ff12-brand{
    order:1!important;
    width:100%!important;
    flex:0 0 100%!important;
    min-width:0!important;
    margin:0!important;
  }
  #ff-v12-header:not(.ff-guides-shell-header) .ff12-nav{
    order:2!important;
    width:100%!important;
    flex:0 0 100%!important;
    margin:0!important;
    padding:0!important;
    gap:6px!important;
    overflow:visible!important;
    justify-content:flex-start!important;
  }
  #ff-v12-header:not(.ff-guides-shell-header) .ff16-tools{
    flex:0 1 auto!important;
  }
  #ff-v12-header:not(.ff-guides-shell-header) .ff16-tools .ff16-nav-label{
    display:inline!important;
  }
  #ff-v12-header:not(.ff-guides-shell-header) .ff12-nav-button,
  #ff-v12-header:not(.ff-guides-shell-header) .ff12-nav-link{
    min-width:0!important;
    height:38px!important;
    padding:0 9px!important;
    font-size:12px!important;
    gap:6px!important;
  }
  #ff-v12-header:not(.ff-guides-shell-header) .ff12-favorites .ff12-nav-button>span:not(.ff12-count){
    display:none!important;
  }
  #ff-v12-header:not(.ff-guides-shell-header) .ff-guides-nav-link{
    margin-left:auto!important;
    padding:0 10px!important;
  }
  #ff-v12-header:not(.ff-guides-shell-header) .ff-guides-nav-link svg{
    display:block!important;
    width:16px!important;
    height:16px!important;
  }
  #ff-v12-header:not(.ff-guides-shell-header) .ff12-search{
    order:3!important;
    width:100%!important;
    min-width:100%!important;
    max-width:none!important;
    flex:0 0 100%!important;
    margin:0!important;
  }
  #ff-v12-header:not(.ff-guides-shell-header) .ff12-mega,
  #ff-v12-header:not(.ff-guides-shell-header) .ff12-fav-popover{
    position:fixed!important;
    top:153px!important;
    left:10px!important;
    right:10px!important;
    width:auto!important;
    max-width:none!important;
    max-height:calc(100vh - 170px)!important;
    overflow:auto!important;
  }

  /* -------------------------------------------------------
     GUIAS/ARTIGOS: mesmo padrão compacto do site principal.
     O antigo menu horizontal rolável causava largura maior
     que a viewport e a página ficava deslocada lateralmente.
     ------------------------------------------------------- */
  #ff-v12-header.ff-guides-shell-header{
    width:100%!important;
    max-width:100vw!important;
    overflow:visible!important;
  }
  #ff-v12-header.ff-guides-shell-header .ff12-header-inner{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:10px 12px 11px!important;
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    gap:9px!important;
  }
  #ff-v12-header.ff-guides-shell-header .ff12-brand{
    order:1!important;
    width:100%!important;
    flex:0 0 100%!important;
    min-width:0!important;
    margin:0!important;
    gap:8px!important;
  }
  #ff-v12-header.ff-guides-shell-header .ff12-brand-mark{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    border-radius:11px!important;
  }
  #ff-v12-header.ff-guides-shell-header .ff12-brand-copy{
    min-width:0!important;
  }
  #ff-v12-header.ff-guides-shell-header .ff12-brand-copy strong{
    font-size:16px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
  #ff-v12-header.ff-guides-shell-header .ff12-brand-copy small{
    display:none!important;
  }
  #ff-v12-header.ff-guides-shell-header .ff12-nav{
    order:2!important;
    width:100%!important;
    flex:0 0 100%!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:6px!important;
    overflow:visible!important;
  }
  /* Início e Documentos ficam no desktop; no mobile mantemos
     os três atalhos essenciais: Ferramentas, Favoritos, Guias. */
  #ff-v12-header.ff-guides-shell-header .ff12-nav>a:first-child,
  #ff-v12-header.ff-guides-shell-header .ff12-nav>[data-gmenu]:nth-of-type(2){
    display:none!important;
  }
  #ff-v12-header.ff-guides-shell-header .ff12-nav-link,
  #ff-v12-header.ff-guides-shell-header .ff12-nav-button{
    height:38px!important;
    padding:0 9px!important;
    font-size:12px!important;
    gap:6px!important;
    white-space:nowrap!important;
    min-width:0!important;
  }
  #ff-v12-header.ff-guides-shell-header .ff12-nav-link.is-current{
    margin-left:auto!important;
  }
  #ff-v12-header.ff-guides-shell-header .ff12-nav-link svg,
  #ff-v12-header.ff-guides-shell-header .ff12-nav-button svg{
    width:16px!important;
    height:16px!important;
    flex:0 0 auto!important;
  }
  #ff-v12-header.ff-guides-shell-header .ff12-mega{
    position:fixed!important;
    top:107px!important;
    left:10px!important;
    right:10px!important;
    width:auto!important;
    max-width:none!important;
    max-height:calc(100vh - 125px)!important;
    overflow:auto!important;
    padding:15px!important;
  }
  #ff-v12-header.ff-guides-shell-header .ff12-mega-grid{
    grid-template-columns:1fr!important;
    gap:14px!important;
  }

  /* Conteúdo editorial nunca ultrapassa a tela. */
  body.ff-guides .ffg-hero{padding-left:16px!important;padding-right:16px!important}
  body.ff-guides .ffg-shell{padding-left:14px!important;padding-right:14px!important}
  body.ff-guides .ffg-article-layout{width:100%!important;padding-left:14px!important;padding-right:14px!important}
  body.ff-guides .ffg-article{width:100%!important;min-width:0!important;overflow-wrap:anywhere!important}
  body.ff-guides .ffg-article img,
  body.ff-guides .ffg-article video,
  body.ff-guides .ffg-article iframe{max-width:100%!important;height:auto}
  body.ff-guides .ffg-related-list,
  body.ff-guides .ffg-grid{min-width:0!important}
}

@media (max-width:390px){
  /* O rótulo Ferramentas permanece visível — não voltar ao
     estado em que aparecia somente o ícone de chave. */
  #ff-v12-header:not(.ff-guides-shell-header) .ff16-tools .ff16-nav-label{
    display:inline!important;
  }
  #ff-v12-header:not(.ff-guides-shell-header) .ff12-nav-button,
  #ff-v12-header:not(.ff-guides-shell-header) .ff12-nav-link,
  #ff-v12-header.ff-guides-shell-header .ff12-nav-button,
  #ff-v12-header.ff-guides-shell-header .ff12-nav-link{
    padding-left:7px!important;
    padding-right:7px!important;
    font-size:11.5px!important;
  }
  #ff-v12-header.ff-guides-shell-header .ff12-brand-copy strong,
  #ff-v12-header:not(.ff-guides-shell-header) .ff12-brand-copy strong{
    font-size:14px!important;
  }
}