/* ═══════════════════════════════════════════════════════════
   mobile/nav-site.css — Overrides mobile da navbar compartilhada
   Dolce Olive

   Carregado DEPOIS de /styles/nav-site.css, somente nas páginas que
   usam a navbar padrão (index e privacidade). Alterações aqui
   nunca afetam o layout Desktop em styles/nav-site.css.
═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* A navbar deixa de ser "fixed" no mobile — em vez de flutuar por
     cima do hero, ela passa a ocupar sua própria faixa no fluxo
     normal da página. Também trocamos o grid de 3 colunas fixas por
     um flex com quebra de linha: no grid, quando logo + links +
     carrinho + avatar não cabem juntos na largura da tela, o
     conteúdo não quebra — ele se sobrepõe. Com flex-wrap, os links
     (Cardápio / Nossa história) descem para sua própria linha assim
     que não há espaço, em vez de disputar espaço com o carrinho. */
  nav {
    position: relative;
    height: auto;
    min-height: var(--nav-h);
    padding: 12px 4%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 10px;
    column-gap: 10px;
  }

  .nav-logo { order: 1; justify-self: initial; }

  .nav-right {
    order: 2;
    justify-self: initial;
    margin-left: auto;
  }

  /* Barra de links vai para sua própria linha (largura total),
     abaixo de logo/carrinho/avatar — nunca mais sobreposta. */
  .nav-links {
    order: 3;
    flex: 1 1 100%;
    justify-self: initial;
    justify-content: center;
    max-width: 100%; min-width: 0; gap: 20px; overflow-x: auto;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { font-size: 11px; white-space: nowrap; }

  /* Carrinho: some com o texto "Carrinho" (é um nó de texto solto,
     não um elemento próprio) zerando o font-size do botão — e
     recriamos só o ícone via ::before. O contador continua visível
     porque já tem font-size próprio definido em nav-site.css. */
  .nav-cart-btn {
    font-size: 0;
    padding: 8px 10px;
    gap: 4px;
  }
  .nav-cart-btn::before {
    content: "🛒";
    font-size: 16px;
  }

  /* Usuário: mantém só o círculo com a inicial, sem nome/seta */
  .nav-user-btn { padding: 6px; gap: 0; }
  #nav-user-name,
  .u-arrow { display: none; }
}