/*
 * /supervisao/: menu "Produtos" do cabeçalho e bloco "Produtos" do rodapé.
 *
 * Uma folha só para as nove páginas de /supervisao/ (hub, técnica, equipes,
 * gratuita, blog e posts), carregada depois do estilo.css de cada uma: usa os
 * mesmos tokens do :root de lá, sem redefinir nenhum. Sem script, o gatilho é
 * um link para o bloco "Produtos" do rodapé; o produtos.js troca o link pelo
 * botão que abre a lista.
 */

.produtos { position: relative; flex: 0 0 auto; }

/* Botão e link têm a mesma cara dos itens da .topo-nav: o "Produtos" é mais um
   item do menu, não um segundo CTA ao lado do botão vermelho. */
.produtos-gatilho {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--suave);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: color .18s ease;
}
.produtos-gatilho:hover,
.produtos-gatilho[aria-expanded="true"] { color: var(--texto); }
/* O display acima venceria o atributo hidden do navegador. */
.produtos-gatilho[hidden] { display: none; }

.produtos-seta {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .18s ease-out;
}
.produtos-botao[aria-expanded="true"] .produtos-seta { transform: rotate(180deg); }

.produtos-painel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 55;
  /* Largura do item mais longo: "Curso Manejo Comportamento-Problema" fica numa linha. */
  width: max-content;
  min-width: 300px;
  padding: 8px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  background: var(--card);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}
.produtos-painel[hidden] { display: none; }

.produtos-painel a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 10px;
  color: var(--texto);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease;
}
.produtos-painel a:hover { background: var(--card-2); color: var(--acao); }
/* Página corrente: marcada no HTML, sem estado inventado pelo script. */
.produtos-painel a[aria-current="page"] { color: var(--acao); }

/* "Cursos" é rótulo do grupo, não link: os dois cursos ficam logo abaixo. */
.produtos-grupo { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--borda); }
.produtos-rotulo {
  display: block;
  padding: 8px 12px 2px;
  color: var(--mudo);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Rodapé: o bloco "Produtos" entra como quinta coluna só onde há quatro hoje.
   Abaixo de 1041 px valem as duas e a uma coluna de cada estilo.css. */
@media (min-width: 1041px) {
  .rodape-grade { grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); }
  /* O e-mail é maior que a coluna: quebra dentro dela em vez de invadir a margem. */
  .rodape-bloco a[href^="mailto:"] { overflow-wrap: anywhere; }
}

/* Sem a .topo-nav (até 900 px), o "Produtos" encosta no CTA, à direita. */
@media (max-width: 900px) {
  .produtos { margin-left: auto; }
  .produtos ~ .topo-cta { margin-left: 0; }
}

/* Hub, técnica, equipes e gratuita têm de quatro a cinco âncoras de seção: com
   o "Produtos" elas não cabem entre 901 e 1180 px (o CTA saía da tela). Nessa
   faixa a .topo-nav sai como já sai até 900 px. O blog, com dois itens, cabe. */
@media (min-width: 701px) and (max-width: 1180px) {
  .topo-linha:has(.topo-nav > a:nth-child(4)) .topo-nav { display: none; }
  .topo-linha:has(.topo-nav > a:nth-child(4)) .produtos { margin-left: auto; }
  .topo-linha:has(.topo-nav > a:nth-child(4)) .produtos ~ .topo-cta { margin-left: 0; }
}

/* Até 700 px a marca e o CTA ocupam a linha inteira do cabeçalho (sobram uns
   11 px em 390 px): o "Produtos" desce para uma segunda linha baixa, com
   rótulo visível, e a lista abre na largura da tela. */
@media (max-width: 700px) {
  .topo-linha { flex-wrap: wrap; }
  .produtos {
    position: static;
    order: 3;
    flex: 1 0 100%;
    margin: -6px 0 0;
    border-top: 1px solid var(--borda);
  }
  .produtos ~ .topo-cta { margin-left: auto; }
  .produtos-gatilho { font-size: 13px; }
  .produtos-painel {
    top: 100%;
    left: 12px;
    right: 12px;
    width: auto;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
  }
  /* Âncoras da página não ficam sob a segunda linha do cabeçalho fixo. */
  html { scroll-padding-top: calc(var(--topo-altura) + 60px); }
}