/* nav.css — navbar do site (partials/header.php, comportamento em nav.js).
   Barra fixa com altura --site-nav-height (codex.css). Desktop (>=1200px):
   mega-menus em painel largo logo abaixo da barra. Mobile/tablet: botão
   hambúrguer abre uma folha em tela cheia com acordeões. Os painéis são
   position:absolute em relação à barra, então nada muda o layout da página. */

.site-nav{
  position: fixed;
  top:0; left:0; right:0;
  /* Sempre por cima de QUALQUER modal (Bootstrap usa até ~1080, .modal-backdrop global de codex.css também
     fica nessa faixa) -- mega-menu/folha mobile são descendentes desta barra, então sobem junto sem precisar
     de z-index próprio (mesma stacking context). Modal futuro nunca deve superar isso. */
  z-index: 2000;
  height: var(--site-nav-height);
  background: rgba(10,13,20,.86);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--hairline);
  transition: background .2s ease, box-shadow .2s ease;
}
.site-nav.is-scrolled{
  background: rgba(10,13,20,.95);
  box-shadow: 0 10px 30px rgba(0,0,0,.38);
}
.site-nav-spacer{ height: var(--site-nav-height); }
.site-nav-inner{
  height:100%;
  display:flex;
  align-items:center;
  gap:.75rem;
}
.site-nav .codex-brand{
  display:flex; align-items:center; gap:.6rem;
  margin-right:auto;
}
.site-nav .main-logo{ height:44px; width:auto; }

/* ---------- Botões da barra (busca, hambúrguer) ---------- */
.nav-search-btn,
.nav-burger{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-width:44px; height:44px;
  background: var(--panel-2);
  border:1px solid var(--hairline);
  border-radius:10px;
  color: var(--text);
  font-size:.88rem;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.nav-search-btn{ padding:0 .8rem; }
.nav-burger{ font-size:1.6rem; padding:0; }
.nav-search-btn:hover,
.nav-burger:hover{ border-color: var(--accent-line); color: var(--text-bright); }
.nav-search-btn:focus-visible,
.nav-burger:focus-visible,
.nav-link:focus-visible,
.nav-entry:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.nav-search-text,
.nav-kbd{ display:none; }
.nav-kbd,
.nav-palette kbd{
  font-family: var(--font-mono);
  font-size:.68rem;
  color: var(--text-dim);
  background: var(--bg);
  border:1px solid var(--hairline);
  border-radius:5px;
  padding:.1rem .4rem;
}

/* ---------- Links da barra ---------- */
.nav-primary{ list-style:none; margin:0; padding:0; }
.nav-link{
  position:relative;
  display:flex; align-items:center; gap:.4rem;
  width:100%;
  background:none; border:0;
  font-family: var(--font-body);
  font-size:.92rem;
  color: var(--text);
  padding:.7rem .9rem;
  border-radius:8px;
  text-decoration:none;
  text-align:left;
  transition: color .15s ease, background .15s ease;
}
.nav-link:hover{ color: var(--text-bright); background: rgba(255,255,255,.05); }
.nav-link.active{ color: var(--text-bright); }
.nav-chevron{ font-size:.7rem; margin-left:auto; transition: transform .2s ease; }
.nav-group.is-open > .nav-toggle{ color: var(--text-bright); background: rgba(255,255,255,.05); }
.nav-group.is-open .nav-chevron{ transform: rotate(180deg); }

/* ---------- Painéis (mega-menu / acordeão) ---------- */
.nav-mega{ display:none; }
.nav-group.is-open > .nav-mega{ display:block; }
.nav-col-title{
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: var(--text-dim);
  padding:0 .75rem .5rem;
}
.nav-entry{
  display:flex; align-items:flex-start; gap:.75rem;
  padding:.6rem .75rem;
  border-radius:10px;
  color: var(--text);
  text-decoration:none;
  transition: background .15s ease;
}
.nav-entry > i{
  flex:0 0 auto;
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  border-radius:9px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size:1rem;
  transition: background .15s ease, color .15s ease;
}
.nav-entry-text{ display:flex; flex-direction:column; min-width:0; }
.nav-entry-label{ font-size:.9rem; font-weight:500; color: var(--text-bright); }
.nav-entry-desc{ font-size:.76rem; color: var(--text-dim); line-height:1.35; }
.nav-entry:hover{ background: rgba(255,255,255,.05); color: var(--text-bright); }
.nav-entry:hover > i,
.nav-entry.active > i{ background: var(--accent); color:#0a0d14; }
.nav-entry.active{ background: var(--accent-soft); }

/* ---------- Conta ---------- */
.nav-account{ display:inline-flex; align-items:center; justify-content:center; gap:.45rem; padding:.55rem 1rem; white-space:nowrap; }

/* ---------- Desktop ---------- */
@media (min-width: 1200px){
  .nav-burger{ display:none; }
  .nav-search-text, .nav-kbd{ display:inline; }
  .nav-search-btn{ min-width:190px; justify-content:flex-start; }
  .nav-search-btn .nav-kbd{ margin-left:auto; }

  /* .nav-sheet some da árvore de layout: primary e conta viram itens
     diretos do flex da barra e ficam ordenados com a busca. */
  .nav-sheet{ display:contents; }
  .nav-primary{ order:1; display:flex; align-items:center; gap:.15rem; margin-left:auto; margin-right:auto; }
  .site-nav .codex-brand{ margin-right:0; order:0; }
  .nav-search-btn{ order:2; }
  .nav-account{ order:3; }
  .nav-link{ width:auto; }
  .nav-chevron{ margin-left:.1rem; }
  .nav-link.active::after{
    content:""; position:absolute; left:.9rem; right:.9rem; bottom:.3rem;
    height:2px; border-radius:2px; background: var(--accent);
  }

  .nav-mega{
    position:absolute; top:100%; left:0; right:0;
    background: rgba(18,21,31,.98);
    border-bottom:1px solid var(--hairline);
    box-shadow: 0 24px 50px rgba(0,0,0,.5);
    padding:1.5rem 0 1.75rem;
    animation: nav-mega-in .16s ease-out;
  }
  .nav-mega-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap:1.75rem;
    align-items:start;
  }
  /* Ferramentas tem grupos com muitos itens: a coluna do Breeding fica
     em duas colunas de itens e ocupa o dobro. */
  #nav-mega-ferramentas .nav-col:first-child{ grid-column: span 2; display:grid; grid-template-columns:1fr 1fr; column-gap:.5rem; align-content:start; }
  #nav-mega-ferramentas .nav-col:first-child .nav-col-title{ grid-column:1 / -1; }
}
@keyframes nav-mega-in{
  from{ opacity:0; transform: translateY(-6px); }
  to{ opacity:1; transform:none; }
}

/* Cortina atrás do mega-menu (só desktop). */
.nav-scrim{
  position:fixed; left:0; right:0; bottom:0;
  top: var(--site-nav-height);
  background: rgba(4,6,10,.55);
  z-index:1999; /* logo abaixo da própria barra (2000), mas ainda acima de qualquer modal */
  opacity:0; visibility:hidden;
  transition: opacity .18s ease, visibility .18s ease;
}
.nav-scrim.is-on{ opacity:1; visibility:visible; }
@media (max-width: 1199.98px){ .nav-scrim{ display:none; } }

/* ---------- Mobile / tablet: folha em tela cheia ---------- */
@media (max-width: 1199.98px){
  .site-nav .codex-brand{ margin-right:auto; }
  .nav-sheet{
    position:absolute; top:100%; left:0; right:0;
    height: calc(100vh - var(--site-nav-height));
    height: calc(100dvh - var(--site-nav-height));
    display:flex; flex-direction:column; gap:1rem;
    padding:1rem 16px 1.5rem;
    background: var(--bg);
    overflow-y:auto;
    overscroll-behavior:contain;
    visibility:hidden; opacity:0; transform: translateY(-8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .site-nav.is-sheet-open .nav-sheet{ visibility:visible; opacity:1; transform:none; }
  body.nav-lock{ overflow:hidden; }

  .nav-primary{ display:flex; flex-direction:column; gap:.25rem; }
  .nav-group{ border-bottom:1px solid var(--hairline); padding-bottom:.25rem; }
  .nav-group:last-child{ border-bottom:0; }
  .nav-link{ font-size:1rem; padding:.9rem .75rem; }
  .nav-link.active{ color: var(--accent); }
  .nav-mega{ padding:.25rem 0 .75rem; }
  .nav-col{ margin-bottom:.75rem; }
  .nav-col-title{ padding-top:.4rem; }
  .nav-entry{ padding:.7rem .6rem; }
  .nav-entry-desc{ font-size:.8rem; }
  .nav-account{ margin-top:auto; width:100%; padding:.8rem 1rem; }
}

/* ---------- Paleta de busca (Ctrl+K) ---------- */
body.nav-palette-open{ overflow:hidden; }
.nav-palette{
  position:fixed; inset:0; z-index:2001; /* acima da própria .site-nav (2000) -- cobre a barra ao abrir */
  display:flex; align-items:flex-start; justify-content:center;
  padding:12vh 16px 16px;
  /* 100vh no mobile inclui a área atrás das barras do navegador; dvh é só a parte visível. */
  height:100vh;
  height:100dvh;
}
.nav-palette[hidden]{ display:none; }
.nav-palette-backdrop{
  position:absolute; inset:0;
  background: rgba(4,6,10,.7);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.nav-palette-box{
  position:relative;
  width:100%; max-width:640px;
  max-height:calc(100vh - 12vh - 32px);
  max-height:calc(100dvh - 12dvh - 32px);
  display:flex; flex-direction:column;
  background: var(--panel);
  border:1px solid var(--hairline);
  border-radius:16px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px var(--accent-soft);
  overflow:hidden;
  animation: nav-mega-in .14s ease-out;
}
.nav-palette-field{
  display:flex; align-items:center; gap:.75rem;
  padding:.9rem 1.1rem;
  border-bottom:1px solid var(--hairline);
}
.nav-palette-field > i{ color: var(--accent); font-size:1.1rem; }
.nav-palette-field input{
  flex:1; min-width:0;
  background:none; border:0; outline:0;
  color: var(--text-bright);
  font-size:1.05rem;
}
.nav-palette-field input::placeholder{ color: var(--text-dim); }
.nav-palette-list{
  list-style:none; margin:0; padding:.5rem;
  overflow-y:auto;
}
.nav-palette-sec{
  padding:.6rem .75rem .3rem;
  font-size:.66rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color: var(--text-dim);
}
.nav-palette-item{
  display:flex; align-items:center; gap:.75rem;
  padding:.6rem .75rem;
  border-radius:10px;
  color: var(--text);
  text-decoration:none;
}
.nav-palette-item > i{
  flex:0 0 auto;
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  border-radius:9px;
  background: var(--accent-soft); color: var(--accent);
}
.nav-palette-item .nav-entry-text{ flex:1; }
.nav-palette-cat{ font-size:.7rem; color: var(--text-dim); white-space:normal; }
.nav-palette-item.is-active{ background: var(--accent-soft); color: var(--text-bright); }
.nav-palette-item.is-active > i{ background: var(--accent); color:#0a0d14; }
.nav-palette-foot{
  display:flex; gap:1.25rem;
  padding:.6rem 1.1rem;
  border-top:1px solid var(--hairline);
  font-size:.74rem; color: var(--text-dim);
}
@media (max-width: 575.98px){
  .nav-palette{ padding-top:16px; }
  .nav-palette-box{ max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); }
  .nav-palette-foot{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .nav-mega, .nav-palette-box{ animation:none; }
  .nav-sheet, .nav-scrim, .site-nav, .nav-chevron{ transition:none; }
}