/* NOVO CABECALHO (PC) — 2026-11-05, aprovado pelo dono em prototipo.
   Menu arredondado separado do box branco, cor do rodape, hover so troca a cor do texto, separadores "|", linha amarela acima da logo,
   mensagem do reset no topo e logo 20 px mais baixa que antes. So vale a partir de 720 px (celular nao muda).
   A logo e uma imagem a parte (img/logo-head-only.png, extraida de main-head-bg-v2.png) para o degrade do fundo continuar emendando.
   Para voltar ao cabecalho antigo: 'header_novo' => false em Connections/ad-features.php. */
@media screen and (min-width:720px){
  /* cabecalho sem contorno nem cantos: mesmo fundo do site (a logo e transparente), so a linha amarela no topo */
  html body #header-main{
    position:relative; width:750px; height:216px; margin:0 auto !important;
    background:none; /* o degrade vem do fundo do site; a logo e uma camada separada (::after) */
  }
  html body #header-main .container{position:static !important}
  /* linha amarela no topo do bloco; a mensagem do reset fica acima dela */
  html body #header-main::before{content:"";position:absolute;left:0;right:0;top:27px;height:4px;z-index:3;
    background:linear-gradient(90deg,rgba(215,174,50,0),#d7ae32 18%,#ffe08a 50%,#d7ae32 82%,rgba(215,174,50,0))}
  html body #header-main #countdown{position:absolute !important;top:0;left:15px;right:auto;z-index:4;margin:0; /* igual ao site atual: texto no topo, o recuo vem dos espacos que o script ja coloca */
    text-align:left;font-size:14px;line-height:20px;color:#fff;background:none;border:0;padding:0;white-space:nowrap}
  /* barra do menu encaixada no pe do bloco, largura total */
  html body #header-main #menu-main{position:absolute;left:17px;right:auto;top:150px;bottom:auto;width:715px !important;height:40px;margin:0 !important;
    border:0;border-radius:30px;background:linear-gradient(180deg,#002b3d 0%,#001b2a 100%); /* mesmo degrade do rodape */
    border:1px solid #556e77;box-shadow:0 6px 18px rgba(0,0,0,.25)}
  html body #header-main #menu-main-content{margin:0;height:38px;display:flex;align-items:center;justify-content:center}
  html body #header-main #menu-main ul{float:none;display:flex;align-items:center;gap:2px;margin:0;padding:0}
  html body #header-main #menu-main li{float:none;padding:0}
  /* itens: sem borda nem fundo; hover so muda a cor do texto (igual ao atual: #95a5a6) */
  html body #header-main #menu-main li a{display:block;padding:7px 15px;font-size:13.5px;letter-spacing:.2px;
    color:#fff;text-decoration:none;background:none;border:0;border-radius:999px;box-shadow:none;transition:none !important} /* hover redondo e instantaneo */
  /* hover igual ao do site atual: so a cor do texto muda (branco -> #95a5a6), sem fundo e sem transicao */
  html body #header-main #menu-main li a:hover, html body #header-main #menu-main li a:focus, html body #header-main #menu-main li a:active{color:#95a5a6;background:none;text-decoration:none;outline:0}
  /* PREMIUM: so a cor, amarelo da logo */
  /* PREMIUM: parado fica como no site atual (laranja, negrito); o botao dourado arredondado so aparece ao passar o mouse / clicar */
  html body #header-main #menu-main li a.orange2{color:#e67e22;font-weight:bold;background:none;box-shadow:none}
  html body #header-main #menu-main li a.orange2:hover, html body #header-main #menu-main li a.orange2:active, html body #header-main #menu-main li a.orange2:focus{color:#f1c40f;background:none;box-shadow:none;outline:0}
  /* conteudo branco colado no cabecalho, mesma largura */
  html body #main{width:750px;margin:0 auto !important;border-radius:0 0 12px 12px;
    box-shadow:0 22px 50px rgba(0,0,0,.35);padding-top:2px}
}

@media screen and (min-width:720px){
  /* logo sozinha (PNG transparente extraido da imagem do cabecalho), 16 px mais para baixo que antes */
  html body #header-main::after{content:"";position:absolute;left:100px;top:32px;width:550px;height:115px;z-index:1;
    background:url("/img/logo-head-only.png?v=20261105") center / 100% 100% no-repeat;pointer-events:none}
  html body #site-logo-link{top:24px !important}
}

@media screen and (min-width:720px){
  /* separador vertical (|) entre os itens do menu */
  html body #header-main #menu-main li + li{position:relative}
  html body #header-main #menu-main li + li::before{content:"";position:absolute;left:-1px;top:50%;width:1px;height:14px;margin-top:-7px;background:rgba(255,255,255,.28)}
}
/* NOVO CABECALHO (CELULAR) — 2026-11-05, aprovado pelo dono em prototipo. Mesmo visual do PC (linha amarela, logo em camada separada, menu em pilula
   na cor do rodape, hover so troca a cor do texto, itens separados por linhas), mantendo o botao "Menu" em sanfona.
   Vale para todas as paginas com o cabecalho, ate 719 px. Voltar ao antigo: 'header_novo' => false em Connections/ad-features.php. */
@media screen and (max-width:719px){
  html body #header-main{
    position:relative; background:none !important; min-height:0 !important; height:auto !important; padding:0 0 28px !important; margin:0 !important; overflow:visible;
  }
  html body #header-main .container{position:static !important}
  /* mensagem do reset no topo (igual ao atual), linha amarela logo abaixo */
  html body #header-main #countdown{top:2px;left:10px;right:10px;font-size:11px;line-height:15px;text-align:center}
  html body #header-main::before{content:"";position:absolute;left:0;right:0;top:20px;height:3px;z-index:3;
    background:linear-gradient(90deg,rgba(215,174,50,0),#d7ae32 18%,#ffe08a 50%,#d7ae32 82%,rgba(215,174,50,0))}
  /* logo como camada separada (mesma tecnica do PC), proporcional a largura da tela */
  html body #header-main::after{content:"";position:absolute;left:13.333%;width:73.333%;top:calc(26px + 2.667vw);height:15.333vw;z-index:1;
    background:url("/img/logo-head-only.png?v=20261105") center / 100% 100% no-repeat;pointer-events:none}
  html body #site-logo-link{top:22px !important;height:96px}
  /* menu: pilula na cor do rodape, contorno #556e77 */
  html body #header-main #menu-main{position:relative;top:auto;left:auto;right:auto;width:auto !important;margin:122px 10px 0 !important;z-index:5;
    background:linear-gradient(180deg,#002b3d 0%,#001b2a 100%);border:1px solid #556e77;border-radius:24px;box-shadow:0 6px 18px rgba(0,0,0,.28);overflow:hidden}
  html body #header-main #menu-main #mobile-menu-toggle{min-height:42px;color:#fff;font-size:15px}
  html body #header-main #menu-main #mobile-menu-toggle:focus, html body #header-main #menu-main #mobile-menu-toggle:active{outline:0}
  /* itens abertos: separados por linhas finas (como os "|" do PC), hover so troca a cor do texto, sem transicao */
  html body #header-main #site-menu li{border-top:1px solid rgba(255,255,255,.14)}
  html body #header-main #site-menu li a{color:#fff;background:none;transition:none !important}
  html body #header-main #site-menu li a:hover, html body #header-main #site-menu li a:focus, html body #header-main #site-menu li a:active{color:#95a5a6;text-decoration:none;outline:0}
  html body #header-main #site-menu li a.orange2{color:#e67e22;font-weight:bold}
  html body #header-main #site-menu li a.orange2:hover, html body #header-main #site-menu li a.orange2:focus, html body #header-main #site-menu li a.orange2:active{color:#f1c40f}
  /* o box branco comeca depois do menu fechado (o aberto sobrepoe o conteudo) */
  html body #main{clear:both;margin-top:0 !important}
}