/* ══════════════════════════════════════════════════════════
   Venire Brasil Trading — shared NAVBAR stylesheet
   SINGLE SOURCE OF TRUTH for the navbar + mobile menu + language
   switcher. Linked by index.html, Solucoes.html and FAQ.html so the
   header can never drift out of sync again — edit it here once.
   Relies only on design tokens defined identically on every page
   (:root — --navy, --offwhite, --sand, --font-b, --font-d, --r, --rb).
   ══════════════════════════════════════════════════════════ */

/* ── Navbar ─────────────────────────────────────── */
.nav {
  position: fixed; top: 14px; left: 18px; right: 18px;
  z-index: 100;
  background: rgba(245,243,238,.96);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(27,44,71,.12);
  border-radius: var(--r);
  padding: 28px 34px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  transition: top .3s, background .3s, box-shadow .3s, padding .3s;
}
.nav.compact { top: 6px; padding: 18px 34px; background: rgba(245,243,238,.99); box-shadow: 0 6px 28px rgba(17,30,55,.09); }

/* Three equal columns keep the logo dead-center regardless of side widths */
.nav-left, .nav-right { flex: 1; display: flex; align-items: center; }
.nav-left  { justify-content: flex-start; gap: 36px; }
.nav-right { justify-content: flex-end; gap: 20px; }
.nav-logo  { flex: 1; text-decoration: none; display: flex; align-items: center; justify-content: center; }
/* Only height is set; width auto + object-fit keep the SVG's aspect ratio (never squashes) */
.nav-logo-img { height: 96px; width: auto; max-width: 100%; object-fit: contain; display: block; transition: height .3s; }
.nav.compact .nav-logo-img { height: 72px; }

.nav-links { display: flex; align-items: center; gap: 34px; list-style: none; }
.nav-links a {
  font-size: 16px; font-weight: 500;
  color: rgba(27,44,71,.6); letter-spacing: .03em;
  transition: color .2s;
}
.nav-links a:hover, .nav-links a.active { color: var(--navy); }

.nav-cta {
  display: flex; align-items: center; gap: 7px;
  padding: 14px 28px; border-radius: var(--rb);
  border: 1px solid var(--navy); background: transparent;
  color: var(--navy); font-size: 16px; font-weight: 500;
  cursor: pointer; transition: all .2s; flex-shrink: 0; text-decoration: none;
}
.nav-cta:hover { background: var(--navy); color: var(--offwhite); }

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

/* ── Mobile overlay ─────────────────────────────── */
.mob-menu {
  display: none; position: fixed; inset: 0; z-index: 99;
  background: var(--navy);
  flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.mob-menu.open { display: flex; }
.mob-menu a {
  font-family: var(--font-d); font-size: clamp(34px, 6vw, 54px);
  font-weight: 600; color: var(--offwhite);
  padding: 10px 0; transition: color .2s;
}
.mob-menu a:hover { color: var(--sand); }
.mob-menu .mob-cta {
  margin-top: 24px; padding: 15px 34px;
  background: transparent; color: var(--sand);
  border: 1.5px solid var(--sand); border-radius: var(--rb);
  font-size: 15px; font-weight: 500;
}

/* ── Language switcher ──────────────────────────── */
.lang-switcher { position: relative; }
.lang-btn { display: flex; align-items: center; gap: 7px; background: transparent; border: 1px solid rgba(27,44,71,.2); border-radius: var(--rb); padding: 11px 17px; font-family: var(--font-b); font-size: 16px; font-weight: 500; color: var(--navy); cursor: pointer; transition: border-color .2s; }
.lang-btn:hover { border-color: var(--navy); }
.lang-btn > svg:first-child { width: 17px; height: 17px; }
.lang-dropdown { position: absolute; top: calc(100% + 8px); right: 0; background: rgba(245,243,238,.98); backdrop-filter: blur(14px); border: 1px solid rgba(27,44,71,.12); border-radius: var(--r); padding: 6px; display: none; flex-direction: column; gap: 2px; min-width: 150px; box-shadow: 0 8px 24px rgba(17,30,55,.1); z-index: 101; }
.lang-dropdown.open { display: flex; }
.lang-option { background: none; border: none; padding: 10px 13px; text-align: left; font-family: var(--font-b); font-size: 15px; color: var(--navy); cursor: pointer; border-radius: var(--rb); transition: background .15s; display: flex; align-items: center; justify-content: space-between; }
.lang-option:hover { background: rgba(27,44,71,.06); }
.lang-option.active { font-weight: 600; }
.lang-option.active::after { content: '✓'; color: var(--sand); }
.mob-lang { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.mob-lang-btn { background: none; border: none; font-family: var(--font-b); font-size: 15px; font-weight: 500; color: rgba(245,243,238,.5); cursor: pointer; letter-spacing: .06em; padding: 4px 8px; transition: color .2s; }
.mob-lang-btn.active { color: var(--sand); font-weight: 600; }
.mob-lang-sep { color: rgba(245,243,238,.2); }

/* ── Responsive — burger menu ≤768px ────────────── */
@media (max-width: 768px) {
  .nav { padding: 15px 20px; }
  .nav-links { display: none; }
  .nav-right > * { display: none; }   /* keep the empty column so the logo stays centered */
  .nav-burger { display: flex; }
}
/* mobile: keep the logo at the full big size on every page and every scroll state
   (don't shrink on .compact). max-width:none stops the narrow bar from capping the
   width + letterboxing it smaller; width:auto keeps the aspect ratio (no distortion). */
@media (max-width: 768px) {
  .nav-logo-img, .nav.compact .nav-logo-img { height: 96px; max-width: none; }
}