/* ==========================================================================
 * NAVBAR — Royal Blue + White (usa tokens do base.css)
 * Caminho: static/css/core/header/navbar.css
 * ========================================================================== */

/* Variáveis locais (podem ser sobrescritas por tema) */
:root {
  --navbar-bg-default: var(--color-primary-600);              /* estado inicial = cor institucional */
  /* Estado FIXED: semi-transparente com blur (glass) */
  --navbar-bg-fixed:   rgba(var(--bs-primary-rgb, 28,38,127), .18);
}

/* Layout container */
.container-fluid {
  padding: 0;
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: nowrap; /* mantém itens na mesma linha */
}

/* Estado padrão (topo) — mesma cor do header móvel */
.navbar {
  position: relative;
  width: 100%;
  /* Força Bootstrap a usar nossa cor */
  --bs-navbar-bg: var(--navbar-bg-default);
  --bs-navbar-color: var(--color-neutral-0);
  --bs-navbar-hover-color: var(--color-neutral-0);
  /* Stroke sutil para links animados em fundo escuro */
  --link-stroke-color: rgba(255,255,255,.45);
  /* Gradiente padrão compartilhado com links animados (segue tokens do tema) */
  --grad-link-start: var(--color-primary-600);
  --grad-link-end:   var(--color-primary-300);

  background: var(--bs-navbar-bg);
  background-color: var(--bs-navbar-bg);
  padding: 0 10px;
  z-index: 1000;
  transform: translateY(0);
  opacity: 1;
  transition: transform .5s ease, opacity .5s ease, background-color .3s ease, background .3s ease;
  isolation: isolate; /* evita interferências de filtros atrás */
}

.navbar:not(.fixed) {
  border: 0;
  border-radius: 0 0 var(--site-shell-radius, 20px) var(--site-shell-radius, 20px);
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.08),
              -1px -1px 2px rgba(255, 255, 255, 0.6);
}

/* Garante contraste correto mesmo com utilitários padrão do Bootstrap */
.navbar.navbar-light .navbar-nav .nav-link,
.navbar.navbar-light .navbar-nav .nav-link:focus,
.navbar.navbar-light .navbar-nav .nav-link:hover,
.navbar.navbar-light .navbar-nav .nav-link.active,
.navbar.navbar-light .navbar-nav .show > .nav-link {
  color: var(--color-neutral-0) !important;
}

.navbar.navbar-light .navbar-brand,
.navbar.navbar-light .navbar-brand:focus,
.navbar.navbar-light .navbar-brand:hover {
  color: var(--color-neutral-0) !important;
}

/* Fixa no topo (ao rolar) */
.navbar.fixed {
  --bs-navbar-bg: var(--navbar-bg-fixed) !important;
  /* Força o overlay translúcido mesmo com inline background no template */
  background: var(--bs-navbar-bg) !important;
  background-color: var(--bs-navbar-bg) !important;
  position: fixed; top: 0; left: 0; width: 100%;
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
  /* Borda inferior abaulada, igual ao estado inicial de páginas que usam o preset */
  border-radius: 0 0 var(--site-shell-radius, 20px) var(--site-shell-radius, 20px);
  overflow: hidden; /* garante recorte correto dos conteúdos internos */
}

/* Animações */
@keyframes slideDown { from { transform: translateY(-100%); opacity:0; } to { transform: translateY(0); opacity:1; } }
@keyframes slideUp   { from { transform: translateY(0);     opacity:1; } to { transform: translateY(-100%); opacity:0; } }
.navbar.animate-in  { animation: slideDown .5s ease forwards; }
.navbar.animate-out { animation: slideUp   .5s ease forwards; }

/* Container de logo + CTA */
.navbar-container {
  display: flex;
  align-items: center;
  margin-left: 0;
  gap: 1rem;
  flex: 0.5 1 auto; /* ocupa o espaço central */
  min-width: 0;   /* permite encolher sem quebrar */
  white-space: nowrap; /* evita quebra para 2 linhas */
}
.navbar-brand { flex: 0 0 auto; }
.navbar-brand img,
.navbar-brand .logo {
  height: clamp(48px, 6vw, 60px); /* ajuste fluido da logo */
  width: auto;
  max-height: none;
  flex: 0 0 auto;
}

/* Contêiner do CTA */
.wrapper { position: relative; margin-left: 0; flex: 0 1 auto; min-width: 0; }
.navbar-cta { flex: 0 0 auto; }
.navbar .wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* Toggler fica no fim da linha, sem quebrar */
.navbar-toggler { margin-left: auto; flex: 0 0 auto; }

/* Toggler */
.navbar-toggler {
  border: none;
  background-color: rgba(255,255,255,.18);
  padding: 8px; border-radius: 6px; cursor: pointer;
}
.navbar-toggler .bar {
  display: block; width: 24px; height: 2px; margin: 5px auto;
  background-color: #fff; transition: all .3s ease-in-out;
}
.navbar-toggler:not(.collapsed) .bar:nth-of-type(1){ transform: translateY(7px) rotate(45deg); }
.navbar-toggler:not(.collapsed) .bar:nth-of-type(2){ opacity: 0; }
.navbar-toggler:not(.collapsed) .bar:nth-of-type(3){ transform: translateY(-7px) rotate(-45deg); }

/* Menu */
.navbar-nav {
  display: flex; align-items: center; justify-content: flex-end;
  gap: clamp(.5rem, 2vw, 1.5rem); width: 100%; flex-wrap: nowrap; white-space: nowrap;
}
.navbar-nav .nav-item {
  flex: 1 1 auto;
  min-width: 0;
}
.navbar .nav-link {
  position: relative;
  font-size: clamp(.75rem, 1.8vw, 1rem);
  padding: clamp(.5rem, 1.6vw, .8rem) clamp(.6rem, 2vw, 1rem);
  color: var(--color-neutral-0) !important;
  font-weight: 700;
}

@media (min-width: 992px) {
  .navbar > .container-fluid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
  }

  .navbar .navbar-container {
    justify-self: start;
  }

  .navbar .navbar-cta {
    grid-column: 2;
    justify-self: center;
    margin-left: 0;
  }

  .navbar .collapse.navbar-collapse {
    grid-column: 3;
    justify-self: end;
    width: 100%;
  }
}

/* Responsividade */
/* Em telas muito largas, reintroduz folga lateral se desejar */
@media (min-width: 1400px) {
  .navbar-container { margin-left: 3rem; }
}
@media (max-width: 992px) {
  .wrapper { margin-left: 0; }
  .navbar-container { margin-left: 0; }
  .navbar-brand img, .navbar-brand .logo { height: clamp(50px, 9vw, 58px); }
}
@media (max-width: 768px) { .wrapper, .navbar-container { margin-left: 1rem; } }
@media (max-width: 576px) {
  .wrapper, .navbar-container { margin-left: 0; }
  .navbar-brand img, .navbar-brand .logo { height: clamp(46px, 11vw, 54px); }
}

/* Evita quebra em telas muito estreitas (<395px): reduz levemente a logo */
@media (max-width: 395px) {
  .navbar-brand img, .navbar-brand .logo { height: clamp(42px, 14vw, 48px); }
}


@media (max-width: 375px) {
  .container-fluid {
    gap: clamp(.25rem, 4vw, .5rem);
  }

  .navbar {
    padding: 0 clamp(.35rem, 3.5vw, .65rem);
  }

  .navbar-container {
    gap: clamp(.35rem, 4vw, .6rem);
  }

  .navbar-nav {
    gap: clamp(.25rem, 4vw, .6rem);
  }

  .navbar .nav-link {
    font-size: clamp(.6rem, 3.3vw, .75rem);
    padding: clamp(.3rem, 3.4vw, .5rem) clamp(.4rem, 4.6vw, .65rem);
  }

  .navbar-brand img,
  .navbar-brand .logo {
    height: clamp(36px, 18vw, 44px);
  }

  .navbar #buttonSimulation {
    font-size: clamp(.7rem, 3.4vw, .85rem);
    padding: clamp(.35rem, 3.6vw, .55rem) clamp(.55rem, 4.8vw, .85rem);
  }

  .navbar-toggler {
    padding: clamp(.25rem, 3vw, .45rem);
  }

  .navbar-toggler .bar {
    width: clamp(18px, 7vw, 22px);
    margin: clamp(.2rem, 2.8vw, .35rem) auto;
  }
}

/* CTA shrink suave, só quando necessário */
.navbar #buttonSimulation {
  white-space: nowrap;
  font-size: clamp(.85rem, 2.2vw, 1rem);
  padding: clamp(.45rem, 1.6vw, .8rem) clamp(.8rem, 2.6vw, 1.4rem);
}

/* Ajuste do body quando fixa */
.body-shift { margin-top: 70px; }

/* Compact fixes appended: keep header items on one line and inside navbar */
.navbar > .container-fluid{ min-width: 0; }
@media (max-width: 375px){
  .navbar-brand img,
  .navbar-brand .logo{ max-width: 36vw; object-fit: contain; height: clamp(30px, 16vw, 38px); }
  .navbar-brand{ flex: 0 1 auto; }
  .wrapper{ flex: 0 1 auto; min-width: 0; }
  .navbar{ overflow: hidden; }
}

/* Micro ajustes para viewports extremamente estreitos */
@media (max-width: 320px){
  .navbar-brand img,
  .navbar-brand .logo{ max-width: 34vw; height: clamp(28px, 16vw, 34px); }
  .navbar #buttonSimulation{ max-width: 40vw; min-width: 56px; font-size: clamp(10px, 3.2vw, 12px); padding: .25rem .45rem; }
  .navbar-toggler .bar{ width: clamp(14px, 6vw, 18px); }
}
@media (max-width: 240px){
  .container-fluid{ gap: 2px; }
  .navbar{ padding: 0 4px; }
  .navbar-brand img,
  .navbar-brand .logo{ max-width: 32vw; height: clamp(24px, 15vw, 30px); }
  .navbar #buttonSimulation{ max-width: 44vw; min-width: 48px; font-size: clamp(9px, 3.2vw, 11px); padding: .2rem .4rem; letter-spacing: 0; }
}