/* ============================================================
   NAVBAR-MEGA-V4.CSS — For Businesses dropdown: 4-column grid

   One change vs v3:
     • The For Businesses dropdown is reorganised from one long
       column into the same im-mega-grid pattern used by Individuals
       (4 categories side-by-side, full-width CTA spanning all
       columns at the bottom).

   Everything else (pill colour, dropdown morph, hover/focus, mobile)
   is inherited from v3 / v2 / v1 unchanged.

   Toggle: USE_V4_STYLES = True
   ============================================================ */

@import url("navbar-mega-v3.4ce304442121.css");

/* ---- Businesses panel: switch from flex column to mega grid ---- */
.im-mega-panel--businesses {
  display: block;
}

/* Desktop: 4 categories side-by-side, links stacked inside each */
@media (min-width: 992px) {
  .im-mega-panel--businesses .im-mega-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem 2rem;
  }

  .im-mega-panel--businesses .im-mega-cat-services {
    columns: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }
}

/* Mobile: keep category services visible (no chevron exists to toggle) */
@media (max-width: 991.98px) {
  .im-mega-panel--businesses .im-mega-cat-services {
    max-height: none;
    overflow: visible;
  }
}

/* Category header as a clickable link (Compliance Platform, Sponsor
   Licence, Hiring Routes link to their hub pages). */
.im-mega-category-link {
  text-decoration: none;
  color: var(--im-text-200);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.im-mega-category-link:hover,
.im-mega-category-link:focus-visible {
  color: var(--im-accent-200);
  border-bottom-color: var(--im-accent-200);
}

.im-mega-category-link:hover i,
.im-mega-category-link:focus-visible i {
  color: var(--im-accent-200);
}

/* CTA card spans full row + lays out horizontally */
.im-biz-cta {
  grid-column: 1 / -1;
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.im-biz-cta p {
  margin-bottom: 0;
}