/* ==========================================================================
   Navigation — Desktop — MBA ACT
   Alert bar + Quick Links bar + Primary mega-menu + Mega-menu panels.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Site Header wrapper
   -------------------------------------------------------------------------- */
.site-header {
  position: relative;
  z-index: 1000;
  width: 100%;
}

/* --------------------------------------------------------------------------
   Alert Bar (uses .banner from banners.css, plus positioning)
   -------------------------------------------------------------------------- */
.alert-bar {
  position: relative;
  z-index: 1001;
}

/* --------------------------------------------------------------------------
   Quick Links Bar — upper nav row (brand + quick links + portals + icons)
   Figma reference: Nw2x8ncb0hP9sVqTIG6jpe node 10546:14509 (Navbar).
   White background, near-black nav text, gray quick-link labels.
   -------------------------------------------------------------------------- */
.quick-links-bar {
  display: none;
  background-color: var(--color-white);
  padding: var(--space-4) var(--space-16);
}

@media (min-width: 769px) {
  .quick-links-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
  }
}

.quick-links-bar__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.quick-links-bar__brand img {
  display: block;
  width: 298px;
  height: 55px;
}

.quick-links-bar__left,
.quick-links-bar__right {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

/* Quicklinks dropdown trigger (left group, next to Contact us) */
.quicklinks-dropdown {
  position: relative;
}

.quicklinks-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--font-family);
  font-size: var(--text-sm);
  color: var(--color-navy-light); /* #545B68 per Figma */
  cursor: pointer;
}

.quicklinks-dropdown__trigger:hover {
  color: var(--color-tangerine-dark);
}

.quicklinks-dropdown__chevron {
  font-size: 12px;
  line-height: 1;
  transition: transform 0.2s ease;
}

.quicklinks-dropdown__trigger[aria-expanded="true"] .quicklinks-dropdown__chevron {
  transform: rotate(180deg);
}

.quick-links-bar__list {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.quick-links-bar a {
  font-size: var(--text-sm);
  color: var(--color-navy-light); /* #545B68 per Figma */
  text-decoration: none;
  transition: color 0.2s ease;
}

.quick-links-bar a:hover {
  color: var(--color-tangerine-dark);
}

/* Portals dropdown — tangerine button per Figma */
.portals-dropdown {
  position: relative;
}

.portals-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background-color: var(--color-tangerine);
  border: none;
  border-radius: var(--radius-xs);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-family);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  /* Figma: white on tangerine. Design-over-AA per client. */
  color: var(--color-white);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.portals-dropdown__trigger:hover {
  background-color: var(--color-tangerine-dark);
  color: var(--color-white);
}

.portals-dropdown__icon,
.portals-dropdown__chevron {
  font-size: 16px;
  line-height: 1;
}

.portals-dropdown__chevron {
  transition: transform 0.2s ease;
}

.portals-dropdown__trigger[aria-expanded="true"] .portals-dropdown__chevron {
  transform: rotate(180deg);
}

.portals-dropdown__menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  background-color: var(--color-white);
  border: 1px solid var(--color-neutral-lighter);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2) 0;
  z-index: 1010;
}

.portals-dropdown__menu[aria-hidden="false"] {
  display: block;
}

.portals-dropdown__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.portals-dropdown__menu a {
  display: block;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-navy);
  text-decoration: none;
}

.portals-dropdown__menu a:hover {
  background-color: var(--color-neutral-lightest);
  color: var(--color-tangerine-dark);
}

/* Search + Cart icons — navy on white (was white on navy) */
.quick-links-bar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--color-navy);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

.quick-links-bar__icon:hover {
  color: var(--color-tangerine-dark);
}

/* --------------------------------------------------------------------------
   Primary Nav Bar — white background, near-black text (Figma)
   -------------------------------------------------------------------------- */
.primary-nav {
  display: none;
  background-color: var(--color-white);
  padding: 0 var(--space-16);
  border-top: 1px solid var(--color-neutral-lighter);
  border-bottom: 1px solid var(--color-neutral-lighter);
}

@media (min-width: 769px) {
  .primary-nav {
    display: flex;
    align-items: stretch;
  }
}

.primary-nav__list {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.primary-nav__item {
  /* No positioning context here on purpose: .mega-panel uses position:absolute
     with left:0 / width:100vw and must anchor to .site-header (the nearest
     positioned ancestor, relative + z-index set). Anchoring to the <li>
     instead pushes the panel off-screen on right-side items. */
}

.primary-nav__link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-family);
  font-size: var(--text-base);
  font-weight: var(--font-weight-regular);
  color: var(--color-neutral-darkest); /* #0D0B00 per Figma */
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease;
  border-bottom: 3px solid transparent;
}

.primary-nav__chevron {
  font-size: 16px; /* 16×16 per Figma */
  line-height: 1;
  transition: transform 0.2s ease;
}

.primary-nav__link[aria-expanded="true"] .primary-nav__chevron {
  transform: rotate(180deg);
}

.primary-nav__link:hover,
.primary-nav__item--active > .primary-nav__link,
.primary-nav__link[aria-expanded="true"] {
  color: var(--color-tangerine-dark);
  border-bottom-color: var(--color-tangerine);
}

.primary-nav__link:focus-visible {
  outline: 2px solid var(--color-tangerine);
  outline-offset: -2px;
}

/* --------------------------------------------------------------------------
   Mega Menu Panel — shared structure
   -------------------------------------------------------------------------- */
.mega-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100vw;
  background-color: var(--color-navy);
  box-shadow: var(--shadow-xl);
  z-index: 1005;
  padding: var(--space-8) var(--space-16);
  animation: megaPanelOpen 0.2s ease;
}

.mega-panel[aria-hidden="false"] {
  display: flex;
}

@keyframes megaPanelOpen {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Two-column layout: links left, promo tiles right */
.mega-panel__links {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-right: var(--space-8);
}

.mega-panel__link {
  display: block;
  padding: var(--space-2) 0;
  font-size: var(--text-base);
  color: var(--color-white);
  text-decoration: none;
  transition: color 0.2s ease;
}

.mega-panel__link:hover {
  color: var(--color-tangerine);
}

/* Sub-group headings (Services & Resources) */
.mega-panel__heading {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-white-60);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-4) 0 var(--space-1) 0;
  border-bottom: 1px solid var(--color-navy-light);
  margin-bottom: var(--space-1);
}

/* Training sub-panel (3-level hierarchy) */
.mega-panel__submenu-trigger {
  display: flex;
  align-items: center;
  /* No justify-content: space-between here — the trigger is a block-level
     .mega-panel__link that stretches to the full width of .mega-panel__links
     (≈800 px on 1440-viewport with flex:1). space-between pushed the chevron
     all the way to the right edge of that invisible box, away from the label.
     Default flex-start lets the chevron sit immediately after the text. */
}

.mega-panel__submenu-trigger::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  flex-shrink: 0;
  margin-left: var(--space-2);
}

/* Sub-panel (Level 2 for Training → Qualifications / Short Courses).
   Absolute-positioned so opening a subpanel does NOT grow the panel vertically
   — previously rendered inline inside .mega-panel__links, which pushed L2 items
   below it downward. When the subpanel later closed, the L2 list shifted back
   up under a stationary cursor, the cursor ended up outside the shortened panel,
   and mouseleave on .primary-nav__item triggered the whole panel to close.
   .mega-panel is already position:absolute, so it serves as the containing
   block for this overlay.
   Placed just right of the L2 list (not the far right edge) so the visual
   relationship to the hovered trigger is preserved. Promo tiles are hidden
   via :has() below, so the right column is free. */
.mega-panel__subpanel {
  display: none;
  position: absolute;
  top: var(--space-8);
  left: calc(var(--space-16) + 320px);
  width: 320px;
  flex-direction: column;
  gap: var(--space-2);
  padding-left: var(--space-6);
  border-left: 1px solid var(--color-white-10);
  z-index: 2;
}

.mega-panel__subpanel[aria-hidden="false"] {
  display: flex;
}

/* --------------------------------------------------------------------------
   Promo Tiles — in mega-menu panels
   -------------------------------------------------------------------------- */
.mega-panel__promos {
  display: flex;
  gap: var(--space-4);
  flex-shrink: 0;
  width: 480px;
}

.promo-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1;
  min-height: 200px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  text-decoration: none;
  color: var(--color-white);
}

.promo-tile__image {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.promo-tile__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Gradient overlay for text readability */
.promo-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 60%);
}

.promo-tile__content {
  position: relative;
  z-index: 2;
  padding: var(--space-4);
}

.promo-tile__title {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-1);
}

.promo-tile__desc {
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  color: var(--color-white-60);
}

a.promo-tile:hover {
  transform: scale(1.02);
  transition: transform 0.2s ease;
}

/* Services & Resources — 3-column sub-groups */
.mega-panel--services .mega-panel__links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

/* --------------------------------------------------------------------------
   Search Overlay
   -------------------------------------------------------------------------- */
.search-overlay {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: var(--color-navy);
  padding: var(--space-6) var(--space-16);
  z-index: 1006;
  box-shadow: var(--shadow-lg);
}

.search-overlay[aria-hidden="false"] {
  display: flex;
  align-items: center;
}

.search-overlay__form {
  display: flex;
  width: 100%;
  gap: var(--space-4);
}

.search-overlay__input {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-family);
  font-size: var(--text-md);
  color: var(--color-white);
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--color-white);
  outline: none;
}

.search-overlay__input::placeholder {
  color: var(--color-white-60);
}

.search-overlay__close {
  background: none;
  border: none;
  color: var(--color-white);
  cursor: pointer;
  font-size: 24px;
}