/* Mobile nav fixes for Webflow-exported navs whose hamburger menu was broken or
   empty on small screens. Loaded site-wide from app/(site)/layout.tsx; every rule
   is scoped to a class that only exists on the affected pages. */

/* Omega family (omega, omega2, omega3, omega-in, omega-program, join-omega, elite,
   magma, buidlersconnect): every link in the menu is hidden by design, so the
   hamburger opened an empty panel. The "Visit Onboard" button is hidden at 479px
   and below, so the menu carries it there, and only there. */
.w-nav-link.nav-menu_mobile-link {
  display: none;
}
@media screen and (max-width: 479px) {
  .w-nav-link.nav-menu_mobile-link {
    display: block;
  }
}
/* Between 480px and Webflow's 991px collapse the "Visit Onboard" button is still
   in the bar, so the menu holds nothing but the copyright line. Drop the hamburger
   there rather than open an empty panel. */
/* Out-specifies Webflow's own `.w-nav[data-collapse='medium'] .w-nav-button`. */
@media screen and (min-width: 480px) and (max-width: 991px) {
  .w-nav[data-collapse] .rl_navbar2_menu-button.omega {
    display: none;
  }
}

/* Personal + business/home navs (.personal-hero_nav_fixed, .business-hero_nav_fixed —
   also travel-agencies and uk-school-fees, which share the wrapper). Same markup as
   the cards/blog nav, so it had the same phone problem: a 130px logo plus the
   Personal/Business switch left no room, the switch touched the hamburger and the
   hamburger overflowed the bar. Same trim as components/site/FloatingNav.tsx:
   pin the hamburger inside the bar, shrink the logo, tighten the switch. */
@media screen and (max-width: 479px) {
  .personal-hero_nav_fixed .personal_navbar1_component,
  .business-hero_nav_fixed .rl_navbar1_component {
    position: relative;
  }
  .personal-hero_nav_fixed .w-nav-button,
  .business-hero_nav_fixed .w-nav-button {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    padding: 0;
    margin: 0;
  }
  .personal-hero_nav_fixed .rl_menu-icon,
  .business-hero_nav_fixed .rl_menu-icon {
    margin-right: 0;
  }
  .personal-hero_nav_fixed .rl_navbar2_logo-copy,
  .business-hero_nav_fixed .rl_navbar2_logo-copy {
    width: 100px;
  }
  .personal-hero_nav_fixed .div-block-85,
  .business-hero_nav_fixed .div-block-85 {
    gap: 10px;
  }
  .personal-hero_nav_fixed .div-block-86,
  .business-hero_nav_fixed .div-block-86 {
    padding-left: 9px;
    padding-right: 9px;
  }
  /* The switch's divider gap comes from nav-hover.css; halve it, keep it centred. */
  .personal-hero_nav_fixed .div-block-84:not(:has(.div-block-86.w--current)),
  .business-hero_nav_fixed .div-block-84:not(:has(.div-block-86.w--current)) {
    column-gap: 6px;
  }
  .personal-hero_nav_fixed .div-block-84:not(:has(.div-block-86.w--current)) .div-block-86:not(:last-child)::after,
  .business-hero_nav_fixed .div-block-84:not(:has(.div-block-86.w--current)) .div-block-86:not(:last-child)::after {
    right: -3px;
  }
}

/* Dreamers pages: .navbar-2 is position:static, so Webflow's dropdown (placed at
   top:100% of the nearest positioned ancestor) opened at the bottom of the page,
   off-screen. Anchor it to the nav. */
.navbar-2.w-nav {
  position: relative;
  z-index: 100;
}