/* ============================================================================
   ATIVE-NAVBAR.CSS
   Diretriz:
   - Base única para todas as páginas (home e internas)
   - Única diferença: transparência na HOME quando NÃO estiver navbar-scrolled
   - Sem hardcode de fonte (usa token)
   ============================================================================ */

#mainNav {
  /* Base: sempre sólido e legível */
  background-color: var(--bege-navbar);
  box-shadow: var(--shadow-soft);
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}

/* Brand */
#mainNav .navbar-brand {
  font-family: var(--fonte-ui);
  font-weight: 700;
  color: var(--text-primary);
}

/* Links (base única) */
#mainNav .navbar-nav .nav-item .nav-link {
  font-family: var(--fonte-ui);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.01em;

  color: var(--text-muted);
  position: relative;

  /* padding horizontal único (evita "colado" nas internas) */
  padding: 0.45rem 1rem;
}

#mainNav .navbar-nav .nav-item .nav-link:hover {
  color: var(--text-primary);
}

#mainNav .navbar-nav .nav-item .nav-link.active {
  color: var(--text-primary);
}

/* Underline do item ativo (mantido) */
#mainNav .navbar-nav .nav-item .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 1rem;
  right: 1rem;
  height: 2px;
  background: linear-gradient(90deg, var(--dourado), var(--cobre));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
}

#mainNav .navbar-nav .nav-item .nav-link.active::after {
  transform: scaleX(1);
}

/* ============================================================================
   Desktop: exceção única → HOME transparente somente no topo (não scrolled)
   OBS: navbar-scrolled SEMPRE vence.
   ============================================================================ */
@media (min-width: 992px) {
  body.page-home #mainNav:not(.navbar-scrolled) {
    background-color: transparent;
    box-shadow: none;
  }

  body.page-home #mainNav:not(.navbar-scrolled) .navbar-brand {
    color: var(--on-hero);
  }

  body.page-home #mainNav:not(.navbar-scrolled) .navbar-nav .nav-item .nav-link {
    color: var(--on-hero);
  }

  body.page-home #mainNav:not(.navbar-scrolled) .navbar-nav .nav-item .nav-link:hover,
  body.page-home #mainNav:not(.navbar-scrolled) .navbar-nav .nav-item .nav-link.active {
    color: var(--branco-puro);
  }

  /* underline no hero: garantir visibilidade */
  body.page-home #mainNav:not(.navbar-scrolled) .navbar-nav .nav-item .nav-link::after {
    background: linear-gradient(90deg, var(--branco-puro), var(--on-hero-muted));
  }
}

/* ============================================================================
   Mobile: ajustes de densidade (sem duplicar regras de cor)
   ============================================================================ */
@media (max-width: 991.98px) {
  #mainNav {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
  }

  #mainNav .navbar-brand img,
  #mainNav .navbar-logo {
    height: 48px;
    width: auto;
  }

  #mainNav .navbar-toggler {
    padding: 0.25rem 0.45rem;
    font-size: 1rem;
  }

  /* no mobile o padding horizontal já está ok; só reduz underline para caber melhor */
  #mainNav .navbar-nav .nav-item .nav-link::after {
    left: 0.75rem;
    right: 0.75rem;
  }
}

/* Acessibilidade */
#mainNav .navbar-nav .nav-link:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--dourado);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Logo swap (mantido se você usa) */
.navbar-logo {
  height: 70px;
  width: auto;
  transition: height 0.25s ease;
}

@media print {
  #mainNav {
    display: none;
  }
}