/* Cabeçalho (AppHeader) e menu lateral (NavMenu) no template da Home v4 — resposta do Eduardo de
   30/09 ao item 3, com o Shift & Grow encaixado. Carregado DEPOIS do MudBlazor (App.razor), então
   uma classe basta para vencer o CSS dele. Valores de Home v4.dc.html / Favoritos v4.dc.html. */

/* ══ Cabeçalho ══ */
.ah-topo {
    --ink: #16215b; --ink-soft: #465479; --page: #f4f7fb; --line: #dbe3f0; --teal-500: #12968a; --blue-100: #e7edfb;
    /* Fixo e sempre com 64px: o recuo do conteúdo (.spark-com-topo), o topo do menu lateral e os
       elementos sticky das páginas (faixa e filtros do catálogo) contam com essa altura. */
    position: fixed; top: 0; left: 0; right: 0; z-index: 1300; height: 64px; box-sizing: border-box;
    display: flex; align-items: center; gap: 16px; padding: 0 20px;
    background: #fff; border-bottom: 1px solid var(--line);
    font-family: "Open Sans", system-ui, sans-serif; color: var(--ink);
}
.ah-topo *, .ah-topo *::before, .ah-topo *::after { box-sizing: border-box; }
.ah-topo :focus-visible { outline: 2px solid var(--teal-500); outline-offset: 2px; }
/* No /catalogo o cabeçalho fica dentro de .ct-pagina, cujas regras de link (teal, sublinhado no
   hover) vazavam para ele. Mesmo peso que as de lá e carregado depois: estas vencem. */
.ah-topo a { color: var(--ink); text-decoration: none; }
.ah-topo a:hover { color: var(--ink); text-decoration: none; }

.ah-menu { display: none; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px;
    margin-left: -8px; border: none; border-radius: 12px; background: transparent; color: var(--ink); cursor: pointer; }
.ah-menu:hover { background: var(--page); }

.ah-logo { flex: none; display: flex; align-items: center; min-height: 44px; }
.ah-logo img { height: 32px; width: auto; display: block; }

.ah-busca { flex: 1 1 280px; min-width: 0; max-width: 560px; display: flex; align-items: center; background: var(--page);
    border: 1.5px solid var(--line); border-radius: 12px; padding: 0 12px; cursor: text; }
.ah-busca-ativa { border-color: var(--teal-500); }
.ah-busca:focus-within { outline: 2px solid var(--teal-500); outline-offset: 2px; }
.ah-busca-icone { display: flex; color: var(--ink-soft); }
.ah-busca input { flex: 1; min-width: 0; border: none; background: transparent; font: inherit; font-size: 14.5px;
    color: var(--ink); padding: 0 10px; height: 42px; }
.ah-busca input:focus-visible { outline: none; }
.ah-busca input::placeholder { color: #6b7797; opacity: 1; }

.ah-links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.ah-links a { font-size: 14px; font-weight: 600; padding: 0 14px; min-height: 44px; display: inline-flex; align-items: center;
    border-radius: 999px; color: var(--ink); text-decoration: none; }
.ah-links a:hover { background: var(--page); }
.ah-links a.active { background: var(--blue-100); font-weight: 700; }

.ah-sg { flex: none; height: 42px; width: auto; display: block; }

.ah-conta { flex: none; display: flex; align-items: center; gap: 10px; }
.ah-links + .ah-sg { margin-left: 4px; }
.ah-conta form { margin: 0; }
.ah-avatar { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
    background: var(--ink); color: #fff; font-weight: 800; font-size: 16px; }
.ah-sair, .ah-entrar { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 6px;
    justify-content: center; border: none; background: transparent; cursor: pointer; border-radius: 10px;
    font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--ink); text-decoration: none; }
.ah-sair:hover, .ah-entrar:hover { background: var(--page); }

/* O FocusOnNavigate (Routes.razor) põe o foco no h1 de toda página (com tabindex="-1") para o
   leitor de tela anunciar o título; ao abrir a página direto, o navegador pintava o contorno de
   foco em volta do título (visto na Home, 30/09). O título não é interativo: sem contorno. O
   atributo no seletor dá peso para vencer as regras gerais de foco das páginas. */
h1[tabindex="-1"]:focus, h1[tabindex="-1"]:focus-visible { outline: none; }

/* Recuo do conteúdo das páginas sob o cabeçalho fixo. O MudBlazor muda esse recuo por largura
   (56px em celular retrato); o cabeçalho tem 64px sempre. */
.spark-com-topo.mud-main-content { padding-top: 64px; }

/* Entre 760 e 1099px os atalhos saem do topo (Início, Favoritos e Contato estão no menu lateral,
   que nessa faixa fica aberto): sem isso a busca encolhia até ficar inutilizável. */
@media (max-width: 1099.98px) {
    .ah-links { display: none; }
    .ah-sg { margin-left: auto; }
}

/* Abaixo de 760px: botão de menu, busca, avatar e Sair (só ícone). Os dois logos vão para o menu
   lateral -- o avatar no lugar do Shift & Grow é o pedido de 27/08, e o logo do Spark espremia a
   busca (medido: 60px de campo a 390px). */
@media (max-width: 759.98px) {
    .ah-topo { gap: 8px; padding: 0 12px; }
    .ah-menu { display: flex; }
    .ah-logo, .ah-sg { display: none; }
    .ah-busca { flex-basis: 0; }
    .ah-rotulo {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
}

/* ══ Menu lateral ══ */
.spark-drawer.spark-drawer { background: #16215b; border: 0; }
.spark-nav { display: flex; flex-direction: column; gap: 6px; min-height: 100%; padding: 20px 14px;
    font-family: "Open Sans", system-ui, sans-serif; }
.spark-nav-tagline { color: rgba(255, 255, 255, .78); font-size: 13px; line-height: 1.4; padding: 0 8px 10px; }
.spark-nav-section { color: rgba(255, 255, 255, .6); font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; padding: 14px 8px 4px; }
.spark-nav-link {
    display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 14px; border-radius: 12px;
    color: #fff; text-decoration: none; font-size: 14.5px; font-weight: 700; line-height: 1.3;
    background: rgba(255, 255, 255, .06); transition: background .15s ease;
}
.spark-nav-link:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.spark-nav-link.active { background: rgba(255, 255, 255, .18); }
.spark-nav-link:focus-visible { outline: 2px solid #7ed0c7; outline-offset: 2px; }
.spark-nav-icone, .spark-nav-link .mud-icon-root { flex: none; color: #fff; }
.spark-nav-link .mud-icon-root { font-size: 19px; }
.spark-nav-link.active .spark-nav-icone, .spark-nav-link.active .mud-icon-root { color: #7ed0c7; }
.spark-nav-footer { margin-top: auto; color: rgba(255, 255, 255, .65); font-size: 12px; line-height: 1.4;
    padding: 14px 8px 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.spark-nav-footer strong { color: #fff; display: block; }

/* Só no celular (o topo, nessa faixa, não tem os logos): cápsula branca do Spark no alto do menu,
   quem está conectado e o Shift & Grow antes do rodapé. A cápsula é o que deixa os logos legíveis
   sobre o navy. */
.spark-nav-logo, .spark-nav-user, .spark-nav-sg { display: none; }
@media (max-width: 759.98px) {
    .spark-nav-logo, .spark-nav-sg { display: flex; justify-content: center; align-items: center; background: #fff;
        border-radius: 12px; padding: 10px 14px; }
    .spark-nav-logo img { height: 26px; width: auto; display: block; }
    .spark-nav-sg { margin-top: auto; }
    .spark-nav-sg img { height: 40px; width: auto; display: block; }
    .spark-nav-sg + .spark-nav-footer { margin-top: 8px; }
    .spark-nav-user { display: block; color: rgba(255, 255, 255, .78); font-size: 13px; padding: 4px 8px 8px; }
    .spark-nav-user strong { color: #fff; display: block; }
}