/* Cabecalho proprio do Amigo Secreto (paginas/amigo-secreto/_menu.php).
 *
 * Camada 3 (componente): serve a landing e a todas as telas do Amigo
 * Secreto. Substitui o menu_parcial.php so' nessas telas; o resto do site
 * continua com lv-nav.css. Depende de lv-tokens.css.
 *
 * Duas larguras: a partir de 900px, links em texto e o avatar; abaixo,
 * uma barra de 56px com icones de 44px e o menu (≡). A altura da barra e'
 * --lv-asc-altura, no <body>, porque a pagina (lv-amigo-secreto.css) prende
 * as abas do grupo logo abaixo dela.
 *
 * z-index 500, o mesmo do lv-nav: acima do conteudo e das abas (5), ABAIXO
 * da barra de aviso de incidente (600), cujo painel "Entenda" desce por cima
 * do cabecalho, e muito abaixo do banner de cookies (1040), dos modais, do
 * Localizador em tela cheia (99992) e da caixa de aviso (1000000).
 */

.lv-as-corpo { --lv-asc-altura: 68px; }
/* A faixa do grupo (computador) faz parte do cabecalho preso: as abas e a
   rolagem ate' um cartao descontam a altura dela (lv-amigo-secreto.css). */
.lv-as-corpo-grupo, .lv-as-corpo-guia { --lv-asc-faixa: 52px; }

.lv-asc {
  /* Tokens locais: branco sobre o degrade da marca e o "vidro" dos botoes. */
  --lv-asc-texto: #fff;
  --lv-asc-vidro: rgba(255, 255, 255, .24);
  --lv-asc-vidro-forte: rgba(255, 255, 255, .36);
  position: sticky; top: 0; z-index: 500;
  background: var(--lv-barra); color: var(--lv-asc-texto);
  box-shadow: 0 1px 0 rgba(26, 26, 46, .06);
}
.lv-asc-barra {
  max-width: var(--lv-largura); margin: 0 auto; padding: 0 32px;
  height: var(--lv-asc-altura); display: flex; align-items: center; gap: 16px;
}

.lv-asc-marca { display: flex; align-items: center; gap: 10px; flex: none; color: var(--lv-asc-texto); text-decoration: none; }
/* Uma logo so' (Logo_amigo_secreto.png, texto branco ja' no desenho), decisao do dono de 19-20/10/2026; de volta ao PNG em 20/10/2026.
   A partir de 900px (21/10/2026) entra a mesma marca na horizontal, com o nome
   em texto: no PNG de 44px, "By Lista Virtual" saia com 5px. No celular, o PNG. */
.lv-asc-marca img { display: none; height: 36px; width: auto; }
/* O <picture> da logo (_menu.php) nao e' caixa, e os <source> dele tambem
   nao: sem isto cada um vira item do flex mesmo com a <img> escondida, e o
   gap empurra a marca 10px por item. */
.lv-asc-marca picture { display: contents; }
.lv-asc-marca source { display: none; }
.lv-asc-marca-larga { display: flex; align-items: center; gap: 11px; }
.lv-asc-marca-icone { display: block; width: 42px; height: 42px; flex: none; filter: drop-shadow(0 2px 6px rgba(96, 38, 92, .18)); }
/* "Amigo" / "Secreto  by Lista Virtual", em Inter bold (Google Fonts, so' o
   700), sem sombra no texto: pedido do dono de 21/10/2026. */
.lv-asc-marca-nome {
  display: grid; font-family: 'Inter', var(--lv-font-display); font-weight: 700; font-size: 21px; line-height: 1.02;
  letter-spacing: -.01em; color: var(--lv-asc-texto); white-space: nowrap;
}
.lv-asc-marca-by { margin-left: 6px; font-size: 12.5px; letter-spacing: 0; }

/* Voltar e nome do grupo NA BARRA: so' no celular (bloco @media). No
   computador eles moram na faixa do grupo, embaixo da barra. */
.lv-asc-voltar, .lv-asc-titulo { display: none; }
.lv-asc-voltar { align-items: center; justify-content: center; flex: none; color: var(--lv-asc-texto); text-decoration: none; }
.lv-asc-titulo {
  min-width: 0; flex: 1; font-family: var(--lv-font-display); font-weight: 800; font-size: 18px; color: var(--lv-asc-texto);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Faixa do grupo (computador, opcao C do dono, 21/10/2026): presa com a barra,
   "< Meus amigos secretos | [nome]", alinhada a marca. #8e3fa3 sobre branco: 6,4:1. */
.lv-asc-faixa { background: var(--lv-surface); border-bottom: 1px solid var(--lv-line); box-shadow: 0 4px 12px -8px rgba(26, 26, 46, .18); }
.lv-asc-faixa-dentro {
  max-width: var(--lv-largura); margin: 0 auto; padding: 0 32px; height: var(--lv-asc-faixa);
  display: flex; align-items: center; gap: 14px;
}
.lv-asc-faixa-voltar {
  display: inline-flex; align-items: center; gap: 2px; flex: none; margin-left: -4px;
  color: var(--lv-accent-texto); text-decoration: none; font-family: var(--lv-font-display); font-weight: 700; font-size: 15px; white-space: nowrap;
}
.lv-asc-faixa-voltar:hover { text-decoration: underline; text-underline-offset: 4px; }
.lv-asc-faixa-voltar:focus-visible { outline: 3px solid var(--lv-accent-texto); outline-offset: 3px; border-radius: 4px; }
.lv-asc-faixa-nome {
  min-width: 0; padding-left: 14px; border-left: 1px solid var(--lv-line);
  font-family: var(--lv-font-display); font-weight: 800; font-size: 18px; line-height: 1.3; color: var(--lv-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.lv-asc-links { margin-left: auto; display: flex; align-items: center; gap: 24px; }
.lv-asc-links a {
  color: var(--lv-asc-texto); text-decoration: none; font-family: var(--lv-font-display); font-weight: 700; font-size: 16px; white-space: nowrap;
}
.lv-asc-links a:hover, .lv-asc-links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
/* Discreto: texto sublinhado, sem cara de botao (proposta, secao 2). O
   seletor duplo alcanca o "Entrar" de dentro de .lv-asc-links (0,2,1, acima
   de `.lv-asc-links a`) e o de fora, no grupo. */
.lv-asc-links a.lv-asc-entrar, .lv-asc-entrar {
  color: var(--lv-asc-texto); font-family: var(--lv-font-display); font-size: 16px; white-space: nowrap;
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; font-weight: 600;
}

.lv-asc-acoes { display: flex; align-items: center; gap: 10px; flex: none; margin-left: auto; }
.lv-asc-links + .lv-asc-acoes { margin-left: 0; }
.lv-asc-icone, .lv-asc-avatar { display: inline-grid; place-items: center; }
.lv-asc-icone, .lv-asc-avatar, .lv-asc-convidar { border: 0; cursor: pointer; text-decoration: none; font: inherit; }
.lv-asc-icone { width: 44px; height: 44px; border-radius: 14px; background: var(--lv-asc-vidro); color: var(--lv-asc-texto); }
.lv-asc-icone:hover, .lv-asc-icone[aria-expanded="true"] { background: var(--lv-asc-vidro-forte); }
.lv-asc-avatar {
  width: 44px; height: 44px; border-radius: 50%; background: var(--lv-surface); color: var(--lv-accent-texto);
  font-family: var(--lv-font-display); font-weight: 900; font-size: 18px; box-shadow: 0 2px 8px rgba(26, 26, 46, .12);
}
.lv-asc-convidar {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px;
  background: var(--lv-surface); color: var(--lv-accent-texto); font-family: var(--lv-font-display); font-weight: 800; font-size: 15px;
}
.lv-asc-convidar[hidden] { display: none; }
.lv-asc-icone:focus-visible, .lv-asc-avatar:focus-visible, .lv-asc-convidar:focus-visible,
.lv-asc-barra a:focus-visible { outline: 3px solid var(--lv-asc-texto); outline-offset: 3px; }

/* Menu (≡) e menu do perfil: cartao sob a barra, alinhado a direita. */
.lv-asc-menu {
  position: absolute; top: calc(var(--lv-asc-altura) + 6px); right: max(12px, calc((100vw - var(--lv-largura)) / 2 + 20px));
  width: min(340px, calc(100vw - 24px)); padding: 10px 0; display: grid;
  background: var(--lv-surface); color: var(--lv-ink); border-radius: 20px;
  box-shadow: 0 18px 48px rgba(26, 26, 46, .18), 0 0 0 1px rgba(26, 26, 46, .04);
}
.lv-asc-menu[hidden] { display: none; }
.lv-asc-menu a {
  display: block; padding: 13px 24px; color: var(--lv-ink); text-decoration: none;
  font-family: var(--lv-font-display); font-weight: 800; font-size: 17px;
}
.lv-asc-menu a:hover { background: var(--lv-accent-soft); }
.lv-asc-menu a:focus-visible { background: var(--lv-accent-soft); outline: 3px solid var(--lv-accent-texto); outline-offset: -3px; }
.lv-asc-menu .lv-asc-menu-fraco { font-family: var(--lv-font-text); font-weight: 500; font-size: 16px; color: var(--lv-muted); }
.lv-asc-menu hr { margin: 8px 20px; border: 0; border-top: 1px solid var(--lv-line); opacity: 1; }
.lv-asc-menu-nome { margin: 4px 24px 6px; font-family: var(--lv-font-display); font-weight: 800; font-size: 15px; color: var(--lv-muted); }

/* Com a barra de aviso de incidente (lv-aviso.css, sticky no topo), o
   cabecalho desce a altura dela. */
.lv-aviso + .lv-asc { top: var(--lv-aviso-altura); }

.lv-asc-so-estreito { display: none; }

/* Computador estreito, no grupo: os links e o "Convidar" com texto pedem
   uns 910px e ha' 836 em 900. "Convidar" fica so' com o icone ate' 1024px
   (o nome segue para leitor de tela e no title). */
@media (min-width: 900px) and (max-width: 1023.98px) {
  .lv-asc-convidar { width: 44px; padding: 0; justify-content: center; }
  .lv-asc-convidar-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@media (max-width: 899.98px) {
  .lv-as-corpo { --lv-asc-altura: 56px; }
  .lv-as-corpo-grupo { --lv-asc-faixa: 0px; }
  .lv-asc-faixa { display: none; }
  /* No Guia aberto do grupo, a faixa e' o unico caminho de volta: fica no celular. */
  .lv-as-corpo-guia .lv-asc-faixa { display: block; }
  .lv-asc-faixa-dentro { padding: 0 16px; }
  .lv-asc-barra { padding: 0 10px 0 14px; gap: 8px; }
  .lv-asc-links, .lv-asc-so-largo { display: none; }
  .lv-asc-links + .lv-asc-acoes { margin-left: auto; } /* os links somem: as acoes voltam para a direita */
  .lv-asc-acoes { gap: 8px; }
  .lv-asc-so-estreito { display: inline-grid; }
  .lv-asc-marca img { display: block; }
  .lv-asc-marca-larga { display: none; }
  /* No grupo, a barra e' so' voltar, o nome e as acoes. */
  .lv-asc-grupo .lv-asc-marca { display: none; }
  .lv-asc-titulo { display: block; }
  .lv-asc-voltar { display: inline-flex; width: 44px; height: 44px; border-radius: 14px; background: var(--lv-asc-vidro); }
  .lv-asc-titulo { font-size: 18px; }
  .lv-asc-convidar { width: 44px; padding: 0; justify-content: center; border-radius: 14px; background: var(--lv-asc-vidro); color: var(--lv-asc-texto); }
  .lv-asc-convidar-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lv-asc-menu { right: 12px; left: 12px; width: auto; }
}