/* ===== NAV V2 ENHANCEMENTS ===== */

/* Scrolled state — JS adds .nav--scrolled on scroll */
.nav.nav--scrolled {
  background: rgba(23, 12, 121, 0.92) !important;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 2px 32px rgba(23,12,121,.35), 0 1px 0 rgba(255,255,255,.06);
}

/* Non-hero nav base */
.nav:not(.nav--hero) {
  background: #170C79;
  box-shadow: 0 2px 24px rgba(23,12,121,.28);
}

/* Hero nav: dark glass over hero image -- opaque enough to stay legible
   even before the scroll-triggered .nav--scrolled state kicks in */
.nav--hero {
  background: rgba(23,12,121,.82);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Thin rainbow accent line at bottom of nav */
.nav::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    #56B6C6 0%, #FF97D0 30%, #FFE14D 50%, #FF97D0 70%, #56B6C6 100%);
  background-size: 200% 100%;
  animation: nav-line-shift 6s linear infinite;
  opacity: 0.6;
}
@keyframes nav-line-shift {
  0%   { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

/* Logo text upgrade */
.nav-logo {
  gap: 12px;
  transition: opacity .2s;
}
.nav-logo:hover { opacity: .88; }
.nav-logo-text > span:first-child {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 1.37rem;
  letter-spacing: -.01em;
}
.nav-logo-sub {
  font-size: .65rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}

/* Nav links with animated underline; smooth (non-springy) teal glow + grow
   on hover — plain ease timing so the text enlarges without bouncing */
.nav-links a {
  position: relative;
  display: inline-block;
  font-size: 1.14rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: rgba(255,255,255,.95);
  text-shadow: 0 1px 3px rgba(0,0,0,.25);
  padding: 6px 2px;
  transition: color .2s ease, transform .22s ease, text-shadow .22s ease;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 100%;
  height: 2px;
  background: linear-gradient(90deg, #56B6C6, #FF97D0);
  border-radius: 2px;
  transition: right .22s cubic-bezier(.4,0,.2,1);
}
.nav-links a.active {
  color: #fff;
}
.nav-links a:hover,
.nav--hero .nav-links a:hover {
  color: #56B6C6;
  text-shadow: 0 0 12px rgba(255,255,255,.35), 0 0 24px rgba(138,203,208,.25);
  transform: scale(1.1);
}
.nav-links a:hover::after,
.nav-links a.active::after {
  right: 0;
}

/* Nav row uses the full viewport width with symmetric padding — the
   centered .container max-width made the row overflow to the right once
   the language pill became visible, skewing the whole bar. */
.nav > .container.nav-inner {
  max-width: none;
  padding: 0 32px;
}
@media (min-width: 1100px) and (max-width: 1439px) {
  .nav-links { gap: 14px; }
  .nav-links a { font-size: 1.02rem; }
  .nav .lang-select { max-width: 100px; }
}

/* CTA button enhancement — brand hot pink #FF0052, spaced off the last
   nav link so it doesn't crowd "Contact" */
.nav-cta {
  background: #FF0052 !important;
  border: none !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  margin-left: 12px;
  transition: transform .2s, box-shadow .2s, filter .2s !important;
  white-space: nowrap;
}
.nav-cta:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(255,0,82,.5) !important;
  filter: brightness(1.08) !important;
}

/* Google Translate in nav */
.nav-translate {
  display: flex;
  align-items: center;
}
/* Force the translate widget compact */
.nav-translate .goog-te-gadget {
  font-size: 0 !important;
  color: transparent !important;
}
.nav-translate .goog-te-gadget-simple {
  background: rgba(255,255,255,.1) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  color: rgba(255,255,255,.85) !important;
  font-size: 12px !important;
  font-family: inherit !important;
  white-space: nowrap;
  transition: background .18s;
}
.nav-translate .goog-te-gadget-simple:hover {
  background: rgba(255,255,255,.18) !important;
}
.nav-translate .goog-te-gadget-simple span,
.nav-translate .goog-te-menu-value span,
.nav-translate .goog-te-gadget-simple .goog-te-menu-value {
  color: rgba(255,255,255,.85) !important;
  font-size: 12px !important;
}
/* Hide the Google logo text inside widget */
.nav-translate .goog-logo-link,
.nav-translate .goog-te-gadget > span > a {
  display: none !important;
}
/* Hide the broken footer translate (element moved to nav) */
.translate-wrap { display: none !important; }

/* Hamburger button */
.nav-hamburger span {
  background: rgba(255,255,255,.85);
  transition: background .18s;
}
.nav-hamburger:hover span { background: #fff; }

/* Mobile nav improvements */
.nav-mobile {
  background: linear-gradient(160deg, #170C79 0%, #0d0847 100%);
  border-bottom: 3px solid;
  border-image: linear-gradient(90deg, #56B6C6, #FF97D0, #FFE14D) 1;
}
.nav-mobile a {
  color: rgba(255,255,255,.75);
  transition: color .18s, padding-left .18s;
  padding: 12px 24px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav-mobile a:hover {
  color: #fff;
  padding-left: 32px;
  background: rgba(255,255,255,.04);
}

/* Force logo text always visible — overrides Google Translate style injection */
.nav-logo,
.nav-logo-text,
.nav-logo-text span,
.nav-logo-text > span:first-child,
.nav-logo-sub {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.nav-logo {
  opacity: 1 !important;
  text-decoration: none;
}

/* ══ Translation widget — desktop ══════════════════════════════
   Outer wrapper: globe icon + widget, hidden on mobile so only
   the in-menu version shows on small screens.                  */
.nav-translate-wrap {
  display: none; /* hidden on mobile — translate lives in mobile menu */
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
@media (min-width: 1100px) {
  .nav-translate-wrap { display: flex; }
}

.nav-translate-label {
  font-size: .95rem;
  line-height: 1;
  pointer-events: none;
  flex-shrink: 0;
  /* emoji renders in white context naturally */
}

/* Real native <select> dropdown (classic layout) — teal pill styling,
   guaranteed visible (no iframe menu to get clipped by the fixed navbar). */
.nav-translate select.goog-te-combo {
  background: rgba(86,182,198,.18) !important;
  border: 1.5px solid #56B6C6 !important;
  border-radius: 20px !important;
  padding: 6px 14px !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: .01em !important;
  min-width: 130px;
  cursor: pointer;
  transition: background .2s, border-color .2s !important;
  -webkit-appearance: menulist;
  appearance: menulist;
}
.nav-translate select.goog-te-combo option {
  color: #170C79 !important;
  background: #fff !important;
}
.nav-translate select.goog-te-combo:hover,
.nav-translate select.goog-te-combo:focus {
  background: rgba(86,182,198,.34) !important;
  border-color: #8ACBD0 !important;
}

/* Legacy SIMPLE-layout pill (kept in case a page still initializes with it) */
.nav-translate .goog-te-gadget-simple {
  background: rgba(86,182,198,.18) !important;
  border: 1.5px solid #56B6C6 !important;
  border-radius: 20px !important;
  padding: 5px 14px 5px 10px !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: .01em !important;
  white-space: nowrap;
  transition: background .2s, border-color .2s !important;
}
.nav-translate .goog-te-gadget-simple:hover {
  background: rgba(86,182,198,.34) !important;
  border-color: #8ACBD0 !important;
}
.nav-translate .goog-te-gadget-simple span,
.nav-translate .goog-te-gadget-simple .goog-te-menu-value span {
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

/* ══ Translation widget — mobile menu row ══════════════════════ */
.nav-mobile-translate-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-wrap: wrap;
}
.nav-translate-label-mobile {
  font-size: .875rem;
  font-weight: 500;
  color: rgba(255,255,255,.75);
  flex-shrink: 0;
  letter-spacing: .01em;
}
.nav-translate--mobile {
  flex: 1;
  min-width: 130px;
}
/* Suppress Google branding text inside mobile widget */
.nav-translate--mobile .goog-te-gadget {
  font-size: 0 !important;
  color: transparent !important;
}
.nav-translate--mobile .goog-logo-link,
.nav-translate--mobile .goog-te-gadget > span > a {
  display: none !important;
}
/* Real native <select> dropdown (classic layout) — rectangular, softer */
.nav-translate--mobile select.goog-te-combo {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  border-radius: 8px !important;
  padding: 7px 10px !important;
  color: rgba(255,255,255,.9) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  white-space: nowrap;
  width: 100%;
  cursor: pointer;
  transition: background .18s !important;
  -webkit-appearance: menulist;
  appearance: menulist;
}
.nav-translate--mobile select.goog-te-combo option {
  color: #170C79 !important;
  background: #fff !important;
}
.nav-translate--mobile select.goog-te-combo:hover {
  background: rgba(255,255,255,.14) !important;
}

/* Legacy SIMPLE-layout pill (kept in case a page still initializes with it) */
.nav-translate--mobile .goog-te-gadget-simple {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  color: rgba(255,255,255,.9) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  white-space: nowrap;
  display: inline-block;
  transition: background .18s !important;
}
.nav-translate--mobile .goog-te-gadget-simple:hover {
  background: rgba(255,255,255,.14) !important;
}
.nav-translate--mobile .goog-te-gadget-simple span,
.nav-translate--mobile .goog-te-menu-value span {
  color: rgba(255,255,255,.9) !important;
  font-size: 12px !important;
}