/* ==========================================================================
   STHEFANY — cabeçalho
   cabecalho.css · v0.16.0
   --------------------------------------------------------------------------
   Em repouso: gatilho da gaveta à esquerda, assinatura ao centro, ação à
   direita. Ao rolar sobra só o gatilho, flutuando sem barra — uma faixa
   escura atravessando a janela passaria por cima do papel branco em volta
   dos blocos, que é o defeito que o repouso já tinha corrigido.

   No celular sobra a marca: a navegação é a barra de abas do rodapé.
   ========================================================================== */

.sp-cabecalho {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  color: var(--sp-texto);
  padding-block: var(--sp-e-7);
  /* O cabeçalho é fixo na janela e o hero tem o recuo do bloco. Sem compensar
     aqui, o gatilho começa antes do título. */
  padding-inline: var(--sp-recuo-bloco);
  border-bottom: 1px solid transparent;
  transition: padding var(--sp-transicao), background var(--sp-transicao),
              border-color var(--sp-transicao);
}

/* Em repouso o cabeçalho não tem fundo próprio. Um degradê aqui ocuparia a
   largura da janela e pintaria por cima do papel branco em volta do bloco —
   o escurecimento que dá legibilidade ao topo vive dentro do véu do hero. */

.sp-cabecalho__interno {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-e-5);
}

/* --- gatilho da gaveta --------------------------------------------------- */

.sp-gatilho {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, currentColor 26%, transparent);
  border-radius: var(--sp-raio);
  background: transparent;
  color: inherit;
  font-size: 1.375rem;
  line-height: 0;
  cursor: pointer;
  transition: border-color var(--sp-transicao), background var(--sp-transicao),
              width var(--sp-transicao), height var(--sp-transicao);
}
.sp-gatilho:hover {
  border-color: currentColor;
  background: color-mix(in srgb, currentColor 8%, transparent);
}

/* --- marca --------------------------------------------------------------- */

.sp-marca {
  justify-self: center;
  color: var(--sp-texto);
  line-height: 0;
}

.sp-marca svg {
  height: 3.75rem;
  width: auto;
  transition: height var(--sp-transicao);
}

.marca__assinatura { display: none; }

/* --- ação ---------------------------------------------------------------- */

/* Linha, e com folga entre os itens. Enquanto havia um botão só isto podia ser
   um bloco simples — quando a lupa entrou ao lado do "Contratar" na 0.78.1 ela
   caiu para a linha de baixo, porque `sp-gatilho` é `display: grid` e grade é
   elemento de bloco. O erro não foi da lupa: era a caixa que nunca tinha
   precisado ser linha. */
.sp-cabecalho__acao {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--sp-e-3);
}

/* --- estado rolado ------------------------------------------------------- */

.sp-cabecalho[data-rolado="sim"] {
  padding-block: var(--sp-e-4);
}

.sp-cabecalho[data-rolado="sim"] .sp-marca,
.sp-cabecalho[data-rolado="sim"] .sp-cabecalho__acao { display: none; }

.sp-cabecalho[data-rolado="sim"] .sp-cabecalho__interno {
  grid-template-columns: auto;
}

/* Sem a fotografia atrás, o gatilho precisa de corpo próprio para não sumir
   sobre o papel branco. */
.sp-cabecalho[data-rolado="sim"] .sp-gatilho {
  background: rgba(11, 5, 5, .9);
  backdrop-filter: blur(10px);
  border-color: transparent;
  color: var(--sp-texto);
}
.sp-cabecalho[data-rolado="sim"] .sp-gatilho:hover {
  background: var(--sp-fundo);
}


/* --- celular e tablet ----------------------------------------------------- */

@media (max-width: 60rem) {
  .sp-cabecalho { padding-block: var(--sp-e-5); }

  .sp-cabecalho__interno { grid-template-columns: 1fr; }

  .sp-gatilho,
  .sp-cabecalho__acao { display: none; }

  .sp-marca svg,
  .sp-cabecalho[data-rolado="sim"] .sp-marca svg { height: 2.25rem; }

  /* No celular a marca é o único conteúdo do topo; ao rolar ela também sai e
     sobra a barra de abas, que já dá a navegação. */
  .sp-cabecalho[data-rolado="sim"] .sp-cabecalho__interno { grid-template-columns: 1fr; }
}


/* ==========================================================================
   Menu visível do desktop
   --------------------------------------------------------------------------
   Só acima de 60 rem. No celular e no tablet nada muda: a navegação continua
   sendo a barra de abas com a folha do "Mais", e este bloco inteiro nem entra.

   Existe porque o gatilho carregava sozinho toda a navegação e ficava fixo
   sobre a fotografia — e sobre o vídeo — em todas as telas. Com o menu
   visível, o gatilho some em repouso e volta ao rolar, quando o menu sai: o
   topo deixa de ser um botão permanente por cima do conteúdo.

   Quatro variantes em `data-menu`, comparáveis lado a lado no painel do
   protótipo. No plugin isto vira um controle do widget de cabeçalho.
   ========================================================================== */

.sp-menu { display: none; }

.sp-menu__lista {
  display: flex;
  align-items: center;
  gap: var(--sp-e-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-menu__link {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: var(--sp-fonte-texto);
  font-size: var(--sp-t-peq);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--sp-transicao), opacity var(--sp-transicao);
}
.sp-menu__link:hover { color: var(--sp-acento-claro); }
.sp-menu__link[aria-current="page"] { color: var(--sp-acento-claro); }

/* Quem cabe é decidido por consulta de mídia, e não por JavaScript de
   medição: menu que se remonta ao redimensionar entrega um desenho diferente
   em cada tela, e o cliente aprova um que talvez não seja o que ele vê. O
   "Mais" abre a gaveta, com a lista inteira, e fica visível SEMPRE que o menu
   está — mesmo quando os oito itens cabem. Ele não é só o depósito do que não
   coube: é a única porta da gaveta enquanto o gatilho está escondido, e lá
   dentro moram notícias, contato, redes e a política de privacidade. Escondê-lo
   nas telas largas deixava o painel inteiro sem porta acima de 96 rem. */
.sp-menu__extra { display: block; }

@media (min-width: 60rem) {
  .sp-cabecalho[data-menu="linha"] .sp-menu,
  .sp-cabecalho[data-menu="empilhado"] .sp-menu,
  .sp-cabecalho[data-menu="compacto"] .sp-menu { display: block; }

  /* Só o gatilho DA GAVETA sai. A lupa também é `.sp-gatilho` e continua na
     ação, à direita: esconder as duas foi o primeiro defeito desta variante. */
  .sp-cabecalho[data-menu="linha"] .sp-gatilho[data-abre-gaveta],
  .sp-cabecalho[data-menu="empilhado"] .sp-gatilho[data-abre-gaveta],
  .sp-cabecalho[data-menu="compacto"] .sp-gatilho[data-abre-gaveta] { display: none; }
}

@media (max-width: 95.99rem) {
  .sp-menu__link[data-prioridade="3"] { display: none; }
}

@media (max-width: 78rem) {
  .sp-menu__link[data-prioridade="2"] { display: none; }
  .sp-menu__lista { gap: var(--sp-e-5); }
}

/* Esconder só o link deixaria o `<li>` como caixa vazia comendo um `gap`. O
   item inteiro sai. As duas regras acima ficam como rede para navegador sem
   `:has`. */
@media (max-width: 95.99rem) { .sp-menu__lista > li:has([data-prioridade="3"]) { display: none; } }
@media (max-width: 78rem)  { .sp-menu__lista > li:has([data-prioridade="2"]) { display: none; } }

/* --- variante: em linha ------------------------------------------------------
   A do kit: marca centralizada em cima, menu centralizado logo abaixo, ação à
   direita. É a que cabe em qualquer topo, inclusive nos curtos das páginas
   internas — por isso é a variante das internas quando o menu visível está
   ligado. */

@media (min-width: 60rem) {
  .sp-cabecalho[data-menu="linha"] .sp-cabecalho__interno {
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto;
    row-gap: var(--sp-e-4);
  }
  .sp-cabecalho[data-menu="linha"] .sp-marca { grid-column: 2; grid-row: 1; }
  .sp-cabecalho[data-menu="linha"] .sp-cabecalho__acao { grid-column: 3; grid-row: 1; }
  .sp-cabecalho[data-menu="linha"] .sp-menu { grid-column: 1 / -1; grid-row: 2; }
  .sp-cabecalho[data-menu="linha"] .sp-menu__lista { justify-content: center; }
}

/* --- variante: empilhado -----------------------------------------------------
   A pilha ocupa a mesma coluna do título do hero, e por isso ela é opção de
   HOME, não do site inteiro: nos topos curtos de artista, show e post seis
   linhas empilhadas não cabem. É a variante mais próxima da marca e a que
   menos escala — as duas coisas ao mesmo tempo. */

@media (min-width: 60rem) {
  .sp-cabecalho[data-menu="empilhado"] .sp-menu__lista {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-e-3);
  }
  .sp-cabecalho[data-menu="empilhado"] .sp-cabecalho__interno { align-items: start; }
  .sp-cabecalho[data-menu="empilhado"] .sp-marca,
  .sp-cabecalho[data-menu="empilhado"] .sp-cabecalho__acao { align-self: start; }
}

/* --- variante: compacta ------------------------------------------------------
   Marca à esquerda, menu ao lado, ações à direita. Não custa uma segunda linha
   nem uma coluna do hero, aguenta os oito itens e é igual em topo alto e em
   topo curto. Perde em personalidade para a empilhada. */

@media (min-width: 60rem) {
  .sp-cabecalho[data-menu="compacto"] .sp-cabecalho__interno {
    grid-template-columns: auto 1fr auto;
    gap: var(--sp-e-7);
  }
  /* A ordem no HTML é gatilho, menu, marca, ação — a marca precisa ser
     colocada na primeira coluna à mão, senão ela cai depois do menu. */
  .sp-cabecalho[data-menu="compacto"] .sp-marca {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }
  /* `grid-row: 1` nos três não é decoração: sem ele o menu é colocado na
     coluna 2 primeiro, e a marca — que pede a coluna 1 — cai para a linha de
     baixo, porque a colocação automática não anda para trás. */
  .sp-cabecalho[data-menu="compacto"] .sp-menu {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
  }
  .sp-cabecalho[data-menu="compacto"] .sp-cabecalho__acao { grid-column: 3; grid-row: 1; }
  .sp-cabecalho[data-menu="compacto"] .sp-marca svg { height: 2.75rem; }
  .sp-cabecalho[data-menu="compacto"] .sp-menu__lista { gap: var(--sp-e-5); }
}

/* --- ao rolar, o menu sai e o gatilho volta ----------------------------------
   É o que responde ao incômodo de origem: em repouso o topo é navegação, não
   um botão pousado sobre a fotografia; ao rolar ele encolhe para o gatilho,
   como já fazia. Uma porta por vez, nunca duas. */

@media (min-width: 60rem) {
  .sp-cabecalho[data-menu][data-rolado="sim"] .sp-menu { display: none; }
  .sp-cabecalho[data-menu][data-rolado="sim"] .sp-gatilho[data-abre-gaveta] { display: grid; }
}

/* --- comportamento do topo ---------------------------------------------------
   `data-topo="esperto"`: o cabeçalho sai da tela ao rolar para BAIXO e volta ao
   rolar para CIMA. Ler esconde, procurar traz de volta.

   Não é "sumir quando a página está parada": parado é o estado normal de quem
   está lendo, e o controle desapareceria justamente para quem não sabe onde
   clicar. Some por intenção, não por tempo.

   `:focus-within` traz o topo de volta sempre — sem isso, quem navega por
   teclado dá Tab para dentro de um elemento fora da tela. */

.sp-cabecalho[data-topo="esperto"] {
  transition: transform var(--sp-transicao), padding var(--sp-transicao),
              background var(--sp-transicao), border-color var(--sp-transicao);
}

.sp-cabecalho[data-topo="esperto"][data-oculto="sim"] {
  transform: translateY(-115%);
}

.sp-cabecalho[data-topo="esperto"][data-oculto="sim"]:focus-within {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .sp-cabecalho[data-topo="esperto"] { transition: none; }
}

/* --- topo sobre superfície clara --------------------------------------------
   O cabeçalho é branco por padrão porque nasce sobre fotografia escura. Em
   página cujo topo é papel — arquivo, produto — ele precisa inverter, senão a
   marca e o gatilho ficam brancos sobre branco e somem.

   Fica no fim do arquivo de propósito: precisa vencer as regras de cor
   declaradas acima, que têm a mesma especificidade. */

.sp-cabecalho--claro,
.sp-cabecalho--claro .sp-marca { color: var(--sp-tinta); }

/* Ao rolar, o gatilho ganha corpo escuro e volta a precisar de ícone branco. */
.sp-cabecalho--claro[data-rolado="sim"] .sp-gatilho { color: var(--sp-texto); }

/* --- a barra escura, removida na 0.72.0 ------------------------------------
   Havia aqui um `--barra`: o cabeçalho ganhava corpo próprio, vidro fosco,
   borda e canto arredondado, e virava uma faixa flutuando no alto da janela.
   Ela existia por um motivo legítimo — as páginas de arquivo começavam em
   papel branco, e o cabeçalho branco sumiria sobre ele.

   O motivo deixou de existir na 0.71.0, quando essas telas ganharam
   fotografia no topo. O que sobrou foi o defeito que a barra sempre teve e
   que nenhuma quantidade de ajuste de degradê resolveu: uma faixa de 4,5 rem
   atravessando a janela, sem nada atrás para o vidro fosco desfocar, é um
   retângulo escuro pousado sobre o vazio. Vidro sobre o vazio não é vidro.

   O cabeçalho volta a ser um só, em todas as telas: transparente, branco,
   sobre a fotografia. Onde não há fotografia — produto e 404 — ele inverte a
   cor com `--claro` em vez de ganhar corpo.
   ========================================================================== */