/* Cabeçalho (nav) compartilhado por TODAS as páginas do site — públicas e
   admin. Fonte única de verdade pro logo, links de menu, botão de
   login/área e o menu de conta (trocar senha/sair), pra manter a mesma
   disposição em qualquer página nova sem precisar copiar/ajustar CSS.
   Depende das variáveis de cor (--navy, --gold, --white, --navy-deep) já
   definidas em :root por home.css ou admin.css — carregar este arquivo
   junto com um dos dois, não sozinho. */

header.site{
  position:sticky; top:0; z-index:50;
  background:var(--navy);
  border-bottom:3px solid var(--gold);
}
.nav{
  display:flex; align-items:center; gap:20px;
  padding:10px 24px;
  width:100%;
}
.nav-brand{display:flex; align-items:center; gap:14px; flex-shrink:0;}
.title{color:var(--white); font-size:14px; font-weight:700; letter-spacing:1px; text-transform:uppercase; white-space:nowrap;}
/* Zona do meio do cabeçalho: menu público (páginas públicas) OU barra de
   ferramentas da área logada (admin sempre; atleta quando logado) — cada
   página decide o que colocar aqui, o CSS só centraliza e permite rolagem
   horizontal se não couber (em vez de quebrar linha dentro da barra). */
.nav-center{display:flex; flex:1; justify-content:center; align-items:center; min-width:0; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin;}
.nav-center::-webkit-scrollbar{height:4px;}
.nav-center::-webkit-scrollbar-thumb{background:rgba(242,182,11,.4); border-radius:2px;}
.nav-tools{display:flex; gap:6px; flex-wrap:nowrap;}
.nav-tools[hidden]{display:none;}
.nav-tool-btn{
  background:transparent; border:1.5px solid transparent; color:var(--white);
  padding:8px 14px; border-radius:4px; font-weight:700; font-size:12px;
  text-transform:uppercase; letter-spacing:.3px; cursor:pointer; white-space:nowrap;
  text-decoration:none; font-family:inherit; display:inline-flex; align-items:center;
}
.nav-tool-btn:hover{border-color:rgba(242,182,11,.4);}
.nav-tool-btn.active{background:var(--gold); color:var(--navy-deep); border-color:var(--gold);}
.nav-tool-btn.active .notificacao-badge{border-color:var(--navy-deep); background:var(--navy-deep); color:var(--gold);}
.logo-badge{
  background:linear-gradient(180deg, #FFFDF7, #F4EFE2);
  border-radius:8px; padding:6px 14px;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
  display:inline-flex; align-items:center;
}
.nav img{height:36px; width:auto; display:block;}
.nav-links{display:flex; gap:28px; list-style:none; margin:0; padding:0;}
.nav-links[hidden]{display:none;}
.nav-links a{
  color:var(--white); text-decoration:none; font-weight:600; font-size:14px;
  letter-spacing:0.5px; text-transform:uppercase;
  border-bottom:2px solid transparent;
  padding-bottom:4px;
  transition:border-color .2s;
}
.nav-links a:hover, .nav-links a.active{border-color:var(--gold);}
.nav-actions{display:flex; align-items:center; gap:12px; flex-shrink:0;}
.nav-cta{
  background:var(--gold); color:var(--navy-deep); padding:9px 18px;
  border-radius:3px; font-weight:800; text-decoration:none;
  font-size:13px; letter-spacing:.5px; text-transform:uppercase;
  white-space:nowrap; border:none; cursor:pointer; font-family:inherit;
}
.nav-cta-ghost{
  background:transparent; color:var(--gold); border:1.5px solid rgba(242,182,11,.55);
}
.nav-cta-ghost:hover{background:rgba(242,182,11,.1);}
.nav-saudacao{color:var(--white); font-size:12px; white-space:nowrap;}
.nav-conta{display:flex; flex-direction:column; align-items:flex-end; gap:4px;}
.nav-conta-row{position:relative; display:flex; align-items:center; gap:6px;}
.nav-conta-toggle{
  background:transparent; border:1.5px solid rgba(242,182,11,.55); color:var(--gold);
  border-radius:3px; width:36px; height:40px; cursor:pointer; font-size:12px; line-height:1; padding:0;
}
.nav-conta-toggle:hover{background:rgba(242,182,11,.1);}
.nav-conta-menu{
  position:absolute; top:calc(100% + 6px); right:0; background:var(--navy-deep);
  border:1px solid rgba(242,182,11,.3); border-radius:6px; min-width:160px; padding:6px;
  display:flex; flex-direction:column; gap:2px; z-index:50; box-shadow:0 8px 24px rgba(3,20,46,.35);
}
.nav-conta-menu[hidden]{display:none;}
.nav-conta-menu button, .nav-conta-menu a{
  background:none; border:none; color:var(--white); text-align:left; padding:9px 10px;
  border-radius:4px; font-size:13px; cursor:pointer; font-family:inherit; text-decoration:none; display:block;
}
.nav-conta-menu [hidden]{display:none;}
.nav-conta-menu button:hover, .nav-conta-menu a:hover{background:rgba(242,182,11,.12); color:var(--gold);}
/* Conta dentro do painel do ☰ (celular) — criada por sessao-cabecalho.js
   só quando há sessão. No computador quem faz esse papel é o ▾. */
.nav-mobile-nome, .nav-mobile-conta{display:none;}
.nav-mobile-nome[hidden], .nav-mobile-item[hidden]{display:none;}
.burger{
  display:none; background:none; border:none; color:var(--white); font-size:24px; cursor:pointer;
  line-height:1; padding:0; width:44px; height:44px; align-items:center; justify-content:center;
}

/* Menu mobile: a mesma .nav-center (menu público OU ferramentas da área
   logada, dependendo da página) vira um painel que se abre abaixo do
   cabeçalho, controlado pelo hambúrguer — funciona em qualquer página que
   carregue este arquivo, incluindo o admin (ver assets/scripts/sessao-cabecalho.js
   pro toggle). Antes disso só existia pra .nav-links, só na Home. */
@media (max-width:900px), (max-height:520px) and (orientation:landscape) and (max-width:1000px){
  .nav{position:relative; flex-wrap:wrap; gap:10px;}
  /* Logo de celular é um símbolo mais "redondo" que o logo de desktop (que
     é bem mais largo que alto) — na mesma altura de 36px ele preenche mais
     o selo e parece maior. Reduz só aqui, onde ele é exibido. */
  .logo-badge{padding:4px 10px;}
  .nav img{height:26px;}
  .nav-center{
    display:none; flex-direction:column; align-items:stretch; gap:14px;
    position:absolute; top:100%; left:0; right:0; max-height:calc(100vh - 100%);
    overflow-x:visible; overflow-y:auto;
    background:var(--navy); border:1px solid rgba(255,255,255,.12); border-radius:0 0 6px 6px;
    box-shadow:0 18px 30px rgba(0,0,0,.2); padding:18px 20px; z-index:60;
  }
  .nav.nav-open .nav-center{display:flex;}
  .nav-links{flex-direction:column; gap:14px;}
  .nav-tools{flex-direction:column; flex-wrap:wrap; gap:8px;}
  .nav-tool-btn{width:100%; justify-content:flex-start; padding:11px 14px;}
  .nav-actions{margin-left:auto;}
  .burger{display:flex;}
  /* Um menu só no celular: o botão da área e o ▾ saem do topo e a conta
     (saudação, área, trocar senha, sair) entra no painel do ☰. */
  .nav-conta{display:none;}
  /* Nome de quem está logado ao lado do ☰ — mesmo visual do botão "Login"
     de quem não está, pra a troca ficar evidente. */
  .nav-mobile-nome{
    display:inline-flex; align-items:center; gap:6px; max-width:150px;
    background:transparent; color:var(--gold); border:1.5px solid rgba(242,182,11,.55);
    border-radius:3px; padding:8px 12px; font-family:inherit; font-size:12px; font-weight:800;
    letter-spacing:.3px; cursor:pointer;
  }
  .nav-mobile-nome svg{flex-shrink:0;}
  .nav-mobile-nome-texto{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .nav-mobile-conta{
    display:flex; flex-direction:column; gap:4px;
    border-top:1px solid rgba(255,255,255,.15); padding-top:12px;
  }
  .nav-mobile-item{
    background:none; border:none; color:var(--white); text-align:left;
    padding:11px 14px; border-radius:4px; font-size:14px; font-family:inherit;
    cursor:pointer; text-decoration:none; display:block;
  }
  .nav-mobile-item:hover{background:rgba(242,182,11,.12); color:var(--gold);}
  .nav-mobile-area{color:var(--gold); font-weight:700; text-transform:uppercase; font-size:12px; letter-spacing:.3px;}
  /* Alinha com o que estiver no painel: os botões da área logada têm recuo
     de 14px; os links do menu público (Home, Login) não têm. */
  .nav-center:has(.nav-links:not([hidden])) .nav-mobile-item{padding-left:0; padding-right:0;}
}

@media (max-width: 560px){
  .nav{padding:10px 16px;}
  .nav-actions{gap:8px;}
  .nav-cta{padding:8px 12px; font-size:11px;}
  .nav-saudacao{display:none;}
  .nav-conta-toggle{height:32px;}
}

/* Celular deitado (mesma condição do hero em home.css): a saudação
   "Olá, Nome" sempre aparece numa segunda linha abaixo do botão de conta
   (.nav-conta é column) — numa tela só 360px de altura, essa linha extra
   é o suficiente pra empurrar o hero e cortar o fim do texto/botões. Some
   aqui do mesmo jeito que já some em telas estreitas — é só um "olá", não
   essencial. */
@media (max-height:520px) and (orientation:landscape) and (max-width:1000px){
  .nav-saudacao{display:none;}
}

/* Celular deitado (mesma condição do hero em home.css), mas só nos mais
   largos (min-width abaixo): tenta manter a barra de menu horizontal, só
   bem mais compacta, em vez do hambúrguer. Em celulares deitados mais
   estreitos que isso o menu completo não cabe nem compacto, então esses
   continuam com o hambúrguer da regra anterior. */
@media (max-height:520px) and (orientation:landscape) and (min-width:820px) and (max-width:1000px){
  .nav{flex-wrap:nowrap; gap:10px; padding:8px 16px;}
  .nav-center{
    display:flex; position:static; flex-direction:row; align-items:center;
    max-height:none; background:none; border:none; box-shadow:none; padding:0;
    /* A barra de rolagem some visualmente (o menu já foi encolhido o
       suficiente pra caber quase sempre); se sobrar 1-2px de conteúdo,
       ainda dá pra rolar por toque/trackpad mesmo sem a barra aparecer. */
    scrollbar-width:none;
  }
  .nav-center::-webkit-scrollbar{display:none;}
  .nav-links{flex-direction:row; gap:14px;}
  .nav-links a{font-size:12px;}
  /* flex-wrap e width:100% do bloco geral (pensados pro menu vertical)
     precisam ser desfeitos aqui, senão cada botão pede 100% da largura e
     quebra sozinho numa linha, mesmo com flex-direction:row. */
  .nav-tools{flex-direction:row; flex-wrap:nowrap; gap:4px;}
  .nav-tool-btn{width:auto; justify-content:center; padding:7px 10px; font-size:11px;}
  .nav-actions{margin-left:0;}
  .burger{display:none;}
  /* Sem ☰ aqui: a conta volta pro botão da área + ▾. */
  .nav-conta{display:flex;}
  .nav-mobile-nome, .nav-mobile-conta{display:none;}
}

/* RODAPÉ — compartilhado por todas as páginas (públicas e admin). Só logo +
   slogan, centralizados e compactos. No computador fica fixo no fim da tela
   (sticky), sempre visível mesmo rolando; em páginas curtas o margin-top:auto
   (com o body/container em coluna flex) já o encosta no fim da tela. No
   celular volta pro fluxo normal, aparecendo só no fim do conteúdo, pra não
   roubar espaço de tela. */
footer{
  background:var(--navy-deep); color:#9AA7BC; padding:14px 0 12px; font-size:12px;
  margin-top:auto;
  position:sticky; bottom:0; z-index:40;
}
.footer-wrap{max-width:1160px; margin:0 auto; padding:0 24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; align-items:center;}
.footer-wrap .logo-badge{padding:3px 8px;}
.footer-wrap img{height:18px;}
.footer-simples{flex-direction:column; justify-content:center; text-align:center; gap:6px;}
@media (max-width:900px), (max-height:520px) and (orientation:landscape) and (max-width:1000px){
  footer{position:static;}
}