/* ═══════════════════════════════════════════════════════════
   SGF · NAVEGAÇÃO PRINCIPAL — folha única para todas as páginas
   Tudo é escopado em #main-nav para não colidir com <nav> locais
   (ex.: a sidebar do glossário). Os tokens têm fallback, então
   funciona mesmo em páginas que não declaram todas as variáveis.
   ═══════════════════════════════════════════════════════════ */

#main-nav {
  --nav-h: 64px;
  --nav-ivory:   var(--ivory, #FBF8F2);
  --nav-ivory-2: var(--ivory-2, #F4EFE4);
  --nav-ivory-3: var(--ivory-3, #EDE6D6);
  --nav-ink:     var(--ink, #1A1612);
  --nav-ink-mid: var(--ink-mid, #3D342A);
  --nav-ink-soft:var(--ink-soft, #6B5E52);
  --nav-ink-mute:var(--ink-mute, #9C9088);
  --nav-terra:   var(--terra, #C05A35);
  --nav-terra-lt:var(--terra-lt, #D97A52);
  --nav-line:    var(--line, rgba(90,70,50,0.12));
  --nav-ui:      var(--ui, var(--sans, 'Outfit', system-ui, sans-serif));
  --nav-serif:   var(--serif, var(--display, 'Source Serif 4', Georgia, serif));
  --nav-ease:    var(--ease, cubic-bezier(0.4, 0, 0.2, 1));

  position: fixed; top: 3px; left: 0; right: 0; z-index: 100;
  box-sizing: border-box;
  background: rgba(251,248,242,0.93);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--nav-line);
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; padding: 0 56px; height: var(--nav-h);
  transition: box-shadow 0.3s;
}
#main-nav.scrolled { box-shadow: 0 4px 24px rgba(28,18,12,0.08); }
#main-nav * { box-sizing: border-box; }

#main-nav .nav-logo {
  font-family: var(--nav-serif); font-size: 17px; font-weight: 700;
  color: var(--nav-ink); text-decoration: none; letter-spacing: -0.01em;
  white-space: nowrap; flex-shrink: 0;
}
#main-nav .nav-logo em { font-style: italic; color: var(--nav-terra); }

#main-nav .nav-links { display: flex; gap: 36px; list-style: none; align-items: center; margin: 0; padding: 0; }
#main-nav .nav-links a {
  font-family: var(--nav-ui); font-size: 13.5px; font-weight: 500;
  color: var(--nav-ink-soft); text-decoration: none; letter-spacing: 0.01em;
  transition: color 0.2s; position: relative; padding-bottom: 3px;
}
#main-nav .nav-links a::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: var(--nav-terra); transform: scaleX(0); transition: transform 0.25s; border-radius: 99px;
}
#main-nav .nav-links a:hover { color: var(--nav-terra); }
#main-nav .nav-links a:hover::after,
#main-nav .nav-links a.active::after { transform: scaleX(1); }
#main-nav .nav-links a.active { color: var(--nav-terra); }

#main-nav .nav-dropdown { position: relative; }
#main-nav .dropdown-toggle {
  font-family: var(--nav-ui); font-size: 13.5px; font-weight: 500;
  color: var(--nav-ink-soft); background: transparent; border: none;
  padding: 0; cursor: pointer; letter-spacing: 0.01em; line-height: 1.4;
}
#main-nav .dropdown-toggle:hover,
#main-nav .nav-dropdown.open > .dropdown-toggle { color: var(--nav-terra); }
#main-nav .dropdown-toggle::after {
  content: '▾'; margin-left: 6px; font-size: 0.8em;
  display: inline-block; vertical-align: middle; transition: transform 0.25s var(--nav-ease);
}

#main-nav .dropdown-menu {
  position: absolute; top: 100%; left: 0;
  background: var(--nav-ivory); border: 1px solid var(--nav-line); border-radius: 14px;
  box-shadow: 0 18px 40px rgba(26,22,18,0.08);
  min-width: 240px; padding: 8px 0; margin: 0; list-style: none; z-index: 20;
}
#main-nav .dropdown-menu li { list-style: none; }
#main-nav .dropdown-menu a {
  display: block; padding: 10px 18px; color: var(--nav-ink-mid); text-decoration: none;
  font-family: var(--nav-ui); font-size: 14px; font-weight: 500;
}
#main-nav .dropdown-menu a::after { display: none; }
#main-nav .dropdown-menu a:hover { background: var(--nav-ivory-2); color: var(--nav-terra); }

#main-nav .nav-links a.nav-cta {
  background: var(--nav-terra); color: #fff; padding: 8px 20px;
  border-radius: 99px; font-size: 13px;
}
#main-nav .nav-links a.nav-cta::after { display: none; }
#main-nav .nav-links a.nav-cta:hover { background: var(--nav-terra-lt); color: #fff; }

#main-nav .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; }
#main-nav .hamburger span { display: block; width: 22px; height: 2px; background: var(--nav-ink); border-radius: 2px; transition: all 0.3s; }
#main-nav .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#main-nav .hamburger.open span:nth-child(2) { opacity: 0; }
#main-nav .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─── DESKTOP: dropdown por hover, foco ou clique ─── */
@media (min-width: 961px) {
  #main-nav .dropdown-menu {
    margin-top: 12px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-6px);
    /* atraso na saída: a lista não some ao mover o mouse até ela */
    transition: opacity 0.2s var(--nav-ease) 0.18s,
                transform 0.2s var(--nav-ease) 0.18s,
                visibility 0s linear 0.38s;
  }
  /* ponte invisível entre o botão e a lista (elimina o "buraco" de hover) */
  #main-nav .dropdown-menu::before {
    content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px;
  }
  #main-nav .nav-dropdown:hover > .dropdown-menu,
  #main-nav .nav-dropdown:focus-within > .dropdown-menu,
  #main-nav .nav-dropdown.open > .dropdown-menu {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateY(0); transition-delay: 0s;
  }
  #main-nav .nav-dropdown:hover > .dropdown-toggle::after,
  #main-nav .nav-dropdown.open > .dropdown-toggle::after { transform: rotate(-180deg); }
  /* dropdowns próximos da borda abrem alinhados à direita */
  #main-nav .nav-links > li:nth-last-child(-n+3) .dropdown-menu { left: auto; right: 0; }
}

/* ─── ATÉ 1180px: respiro menor para caber a lista inteira ─── */
@media (max-width: 1180px) and (min-width: 961px) {
  #main-nav { padding: 0 28px; }
  #main-nav .nav-links { gap: 24px; }
}

/* ─── MOBILE: painel em coluna com acordeão ─── */
@media (max-width: 960px) {
  #main-nav { padding: 0 20px; }
  #main-nav .nav-links { display: none; }
  #main-nav .hamburger { display: flex; }

  #main-nav .nav-links.mobile-open {
    display: flex; flex-direction: column; align-items: stretch;
    position: fixed; top: calc(var(--nav-h) + 3px); left: 0; right: 0;
    max-height: calc(100vh - var(--nav-h) - 3px);
    max-height: calc(100dvh - var(--nav-h) - 3px);
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    background: var(--nav-ivory);
    gap: 0; padding: 4px 0 20px;
    border-top: 1px solid var(--nav-line);
    border-bottom: 1px solid var(--nav-line);
    box-shadow: 0 18px 40px rgba(28,18,12,0.12);
  }

  /* itens de largura total, mesma altura e alinhados à esquerda */
  #main-nav .nav-links.mobile-open > li { width: 100%; border-bottom: 1px solid var(--nav-line); }
  #main-nav .nav-links.mobile-open > li:last-child { border-bottom: none; padding: 18px 20px 4px; }

  #main-nav .nav-links.mobile-open > li > a,
  #main-nav .nav-links.mobile-open .dropdown-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 15px 20px; margin: 0;
    font-family: var(--nav-ui); font-size: 15px; font-weight: 500;
    color: var(--nav-ink-mid); text-align: left; line-height: 1.3;
  }
  #main-nav .nav-links.mobile-open > li > a::after { display: none; }
  #main-nav .nav-links.mobile-open > li > a.active { color: var(--nav-terra); }
  #main-nav .nav-links.mobile-open > li > a:active,
  #main-nav .nav-links.mobile-open .dropdown-toggle:active { background: var(--nav-ivory-2); }
  #main-nav .nav-links.mobile-open .dropdown-toggle::after { margin-left: 12px; font-size: 0.9em; color: var(--nav-ink-mute); }
  #main-nav .nav-links.mobile-open .nav-dropdown.open > .dropdown-toggle { color: var(--nav-terra); }
  #main-nav .nav-links.mobile-open .nav-dropdown.open > .dropdown-toggle::after { transform: rotate(-180deg); }

  /* submenu recolhido não ocupa espaço até ser aberto */
  #main-nav .nav-links.mobile-open .dropdown-menu {
    position: static; opacity: 1; visibility: visible; pointer-events: auto;
    transform: none; min-width: 0; margin: 0; padding: 0;
    background: var(--nav-ivory-2); border: none; border-radius: 0; box-shadow: none;
    max-height: 0; overflow: hidden; transition: max-height 0.32s var(--nav-ease);
  }
  #main-nav .nav-links.mobile-open .nav-dropdown.open > .dropdown-menu { max-height: 460px; }
  #main-nav .nav-links.mobile-open .dropdown-menu li + li { border-top: 1px solid rgba(90,70,50,0.07); }
  #main-nav .nav-links.mobile-open .dropdown-menu a {
    display: block; padding: 13px 20px 13px 34px; font-size: 14px; color: var(--nav-ink-soft);
  }
  #main-nav .nav-links.mobile-open .dropdown-menu a.active { color: var(--nav-terra); }
  #main-nav .nav-links.mobile-open .dropdown-menu a:hover,
  #main-nav .nav-links.mobile-open .dropdown-menu a:active { background: var(--nav-ivory-3); color: var(--nav-terra); }

  #main-nav .nav-links.mobile-open a.nav-cta {
    display: block; text-align: center; padding: 14px 20px; font-size: 14px;
  }
}

@media (max-width: 420px) {
  #main-nav { padding: 0 16px; }
  #main-nav .nav-logo { font-size: 15.5px; }
}

@media (prefers-reduced-motion: reduce) {
  #main-nav .dropdown-menu,
  #main-nav .dropdown-toggle::after,
  #main-nav .hamburger span { transition: none !important; }
}

#main-nav .dropdown-toggle.active { color: var(--nav-terra); }

@media print {
  #main-nav { display: none !important; }
}