/* ---- Mobile Nav ---- */
.nav__mobile {
  display: none; position: fixed; top: var(--nav-h); bottom: 0;
  left: max(0px, calc((100vw - 1440px) / 2));
  right: max(0px, calc((100vw - 1440px) / 2));
  background: rgba(255,255,255,.98); z-index: 199; padding: 32px;
  flex-direction: column; gap: 6px;
}
.nav__mobile.open { display: flex; }
.nav__mobile-group {
  border-bottom: 1px solid var(--border);
  padding: 10px 0 12px;
}
.nav__mobile-heading {
  min-height: 34px;
  color: var(--text-light);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.nav__mobile-heading.active {
  color: var(--blue);
}
.nav__mobile-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
}
.nav__mobile-group .nav__mobile-link {
  border-bottom: 0;
  min-height: 42px;
  padding: 7px 0;
}
.nav__mobile-link--sub {
  font-size: .96rem;
}
.nav__mobile .nav__mobile-link:hover,
.nav__mobile .nav__mobile-link.active {
  color: var(--blue);
}
.nav__mobile .nav__mobile-link.active {
  background: transparent;
}
.nav__mobile .btn {
  width: 100%;
  justify-content: center;
  margin-top: 12px;
  min-height: 44px;
  padding: 9px 18px;
  border-bottom: 0;
  border-radius: var(--radius);
  font-size: .92rem;
  line-height: 1.2;
  overflow: visible;
}
.nav__mobile .btn--outline {
  margin-top: 24px;
  border: 2px solid var(--blue);
  color: var(--blue);
  background: transparent;
}
.nav__mobile .btn--primary {
  border: 2px solid transparent;
  color: var(--mint);
  background: var(--blue);
}
.nav__mobile .btn.btn--outline:hover {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
  transform: translateY(-2px);
}
.nav__mobile .btn.btn--primary:hover {
  color: var(--blue);
  background: var(--mint);
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(59,124,90,.35);
}
.nav__mobile .btn .nav-icon {
  opacity: .8;
  width: 13px;
  height: 13px;
}
.nav__mobile .btn:hover .nav-icon {
  opacity: 1;
}
.nav__mobile .lang-pill {
  align-self: center;
  margin-top: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-muted);
  overflow: hidden;
}
.nav__mobile .lang-pill a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  min-height: 34px;
  padding: 6px 12px;
  color: var(--text-light);
  font-size: .78rem;
  font-weight: 600;
  background: transparent;
}
.nav__mobile .lang-pill a.active {
  color: var(--blue);
  background: #fff;
  box-shadow: 0 1px 5px rgba(20,36,52,.08);
}
.nav__mobile .lang-pill a:hover:not(.active) {
  color: var(--blue);
  background: rgba(255,255,255,.55);
}

/* Campaign entry (EXPO REAL 2026), pinned to the top of the mobile menu. Explicit resets
   because it needs to win over the .nav__mobile-link base rule above it in this same file. */
.nav__mobile-link--campaign {
  justify-content: flex-start;
  gap: 10px;
  min-height: 0;
  padding: 12px 14px;
  border-bottom: 0;
  border-radius: 8px;
  background: var(--green-light);
  color: var(--blue);
  font-weight: 700;
  margin-bottom: 6px;
}

/* ---- Language switch in the top bar ----
   Lives outside .nav__actions (see buildNav in js/components.js) so that hiding the desktop
   action buttons below 1100px does not take the language switch with it. On a phone this is
   the only way to change language, and burying it behind a menu tap made it effectively
   invisible to anyone who had landed on the wrong language in the first place. */
.nav__lang {
  flex: 0 0 auto;
  margin-left: auto;
}

/* Once the desktop actions are back, the pill is just the first item in that cluster again,
   so it sits tight against them rather than pushing them to the far edge. */
@media (min-width: 1101px) {
  .nav__lang {
    margin-left: 0;
    margin-right: 2px;
  }
}

@media (max-width: 1100px) {
  /* Slightly denser next to the burger, where horizontal space is the scarce thing. */
  .nav__lang a {
    padding: 5px 9px;
    font-size: .74rem;
  }
}