/* ==========================================================================
   TeamTrek V5 — Category-rail dropdowns
   --------------------------------------------------------------------------
   Loaded only by index-v5.html, after css/navbar.css. index-v4.html keeps
   css/nav-v4.css and its column panels, so the two can be compared.

   Structure, taken as a pattern from hubstaff.com's Product menu and rebuilt
   on TeamTrek's own tokens:

     [ rail of categories ][ cards for the selected one ][ tinted promo ]

   with the panel full-bleed under the navbar rather than a floating card.
   Only one category's cards are in view at a time, so a menu of twenty-two
   destinations shows six.

   The shared .mega rules still drive open and close (opacity, visibility and
   the transition pair that makes the panel focusable in the same task), so
   only position, size and the panel's own furniture are restated here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The panel: full width of the window, under the navbar

   `top` is derived, not measured. .navbar__inner is --header-h tall at the
   top of the page and --header-h-scrolled once .is-scrolled shrinks it, plus
   the 1px bottom border, so a hard-coded value is right in one state and
   wrong in the other - at 77px the panel hung 12px below a scrolled navbar,
   leaving a gap the pointer fell through on the way down to it. The .625rem
   back off is the panel's own padding-top, the hover bridge.
   -------------------------------------------------------------------------- */
.mega--v5 {
  position: fixed;
  top: calc(var(--header-h) + 1px - .625rem);
  left: 0; right: 0;
  width: 100%;
}
.navbar.is-scrolled .mega--v5 { top: calc(var(--header-h-scrolled) + 1px - .625rem); }

/* Restated because .mega and .nav-item.is-open > .mega each carry their own
   translate, and a full-bleed panel must not be centred on its nav item. The
   transition list is restated with them, because `top` now animates too and
   has to run on the same curve as the navbar's own height change. */
.mega--v5 {
  transform: translate3d(0, -6px, 0);
  transition: opacity var(--dur-ui) var(--ease-brand),
              transform var(--dur-ui) var(--ease-brand),
              top var(--dur-ui) var(--ease-ui),
              visibility 0s linear var(--dur-ui);
}
.nav-item.is-open > .mega--v5 {
  transform: none;
  transition: opacity var(--dur-ui) var(--ease-brand),
              transform var(--dur-ui) var(--ease-brand),
              top var(--dur-ui) var(--ease-ui),
              visibility 0s linear 0s;
}

.megav {
  border-top: 1px solid var(--neutral-200);
  border-bottom: 1px solid var(--neutral-200);
  /* Opaque, unlike the floating panels: this one spans the window, and at
     .98 alpha the hero headline ghosted through the whole width of it. */
  background: #fff;
  box-shadow: var(--shadow-03);
}
.megav__inner {
  display: grid;
  /* 17.5rem, not 15: "Productivity Monitoring" and "Project & Task Tracking"
     wrapped to two lines at the narrower measure, which made the rail rows
     different heights and cost the column its list-like rhythm. */
  grid-template-columns: 17.5rem minmax(0, 1fr) 17rem;
  align-items: stretch;
  padding-block: 1.5rem;
  gap: 0;
}

/* --------------------------------------------------------------------------
   The rail
   The categories, as rows. The open one carries the tint and the arrow, the
   way a selected row does inside the product itself.
   -------------------------------------------------------------------------- */
.megav__rail {
  display: flex; flex-direction: column; gap: .125rem;
  padding-right: 1.5rem;
  border-right: 1px solid var(--neutral-150);
}
.megav__tab {
  display: flex; align-items: center; gap: .625rem;
  width: 100%; text-align: left;
  padding: .625rem .75rem;
  border-radius: var(--r-sm);
  font-size: .875rem; font-weight: var(--weight-semi); color: var(--neutral-700);
  transition: background-color var(--dur-micro) var(--ease-ui),
              color var(--dur-micro) var(--ease-ui);
}
.megav__tab > span {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.megav__tab-icon { flex: none; width: 16px; height: 16px; color: var(--neutral-400); }
.megav__tab-chev {
  flex: none; color: var(--neutral-300);
  opacity: 0; transform: translate3d(-4px, 0, 0);
  transition: opacity var(--dur-micro) var(--ease-ui),
              transform var(--dur-micro) var(--ease-brand);
}
.megav__tab:hover { background: var(--neutral-50); color: var(--neutral-900); }
.megav__tab:focus-visible { outline: 2px solid var(--primary-400); outline-offset: 2px; }
.megav__tab.is-on {
  background: var(--primary-50); color: var(--primary-800);
}
.megav__tab.is-on .megav__tab-icon { color: var(--primary-600); }
.megav__tab.is-on .megav__tab-chev {
  color: var(--primary-600);
  opacity: 1; transform: none;
}

/* --------------------------------------------------------------------------
   The cards for the open category
   -------------------------------------------------------------------------- */
.megav__panes { padding-inline: 2rem; min-width: 0; }
.megav__pane[hidden] { display: none; }

/* Each pane fades its own contents in, so switching categories reads as a
   change of subject rather than as a flicker. */
.megav__pane.is-on > * { animation: fadeUpSm .32s var(--ease-brand) backwards; }
.megav__pane.is-on > *:nth-child(2) { animation-delay: .03s; }
.megav__pane.is-on > *:nth-child(3) { animation-delay: .06s; }

.megav__panehead {
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: .9375rem; font-weight: var(--weight-bold); letter-spacing: -.01em;
  color: var(--neutral-900);
  transition: color var(--dur-micro) var(--ease-ui);
}
.megav__panehead:hover { color: var(--primary-700); }
.megav__panehead .icon { color: var(--primary-600); }
.megav__panedesc {
  margin-top: .1875rem; margin-bottom: 1rem;
  font-size: .8125rem; color: var(--neutral-500);
}

.megav__cards {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .25rem 1.25rem;
}
.megav__card {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .625rem;
  border-radius: var(--r-sm);
  transition: background-color var(--dur-micro) var(--ease-ui);
}
.megav__card:hover { background: var(--neutral-50); }
.megav__card:focus-visible { outline: 2px solid var(--primary-400); outline-offset: 2px; }

.megav__card-icon {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  border: 1px solid var(--neutral-200); background: #fff;
  color: var(--primary-600);
  transition: border-color var(--dur-micro) var(--ease-ui),
              background-color var(--dur-micro) var(--ease-ui);
}
.megav__card:hover .megav__card-icon {
  border-color: var(--primary-200); background: var(--primary-50);
}
.megav__card-text { min-width: 0; }
.megav__card-text b {
  display: block;
  font-size: .8125rem; font-weight: var(--weight-semi); color: var(--neutral-900);
}
.megav__card-text > span {
  display: block; margin-top: .125rem;
  font-size: .75rem; line-height: 1.45; color: var(--neutral-500);
}

/* --------------------------------------------------------------------------
   The promo column
   -------------------------------------------------------------------------- */
.megav__aside {
  display: flex; flex-direction: column; align-items: flex-start; gap: .5rem;
  padding-left: 1.75rem;
  border-left: 1px solid var(--neutral-150);
}
.megav__aside-title {
  font-size: .8125rem; font-weight: var(--weight-bold); color: var(--neutral-900);
}
.megav__aside-copy { font-size: .75rem; line-height: 1.5; color: var(--neutral-500); }
.megav__aside .link-arrow { margin-bottom: .25rem; }

.megav__promo {
  display: block; width: 100%; margin-top: auto;
  border-radius: var(--r-md);
  padding: 1rem 1.125rem;
  background: var(--brand-gradient); color: #fff;
  transition: transform var(--dur-micro) var(--ease-brand),
              box-shadow var(--dur-micro) var(--ease-ui);
}
.megav__promo:hover { transform: translate3d(0, -1px, 0); box-shadow: var(--shadow-03); }
.megav__promo-title {
  display: block;
  font-size: .9375rem; font-weight: var(--weight-bold); letter-spacing: -.015em;
}
.megav__promo-sub {
  display: block; margin-top: .1875rem;
  font-size: .75rem; color: rgba(255, 255, 255, .82);
}

/* --------------------------------------------------------------------------
   Narrower desktops
   Below 1200px the promo column is the first thing to go: it is an offer, and
   the cards are the navigation.
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .megav__inner { grid-template-columns: 16rem minmax(0, 1fr); }
  .megav__aside { display: none; }
  .megav__panes { padding-inline: 1.5rem 0; }
}

/* --------------------------------------------------------------------------
   Reduced motion: the rail still marks the open category, nothing slides
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .megav__pane.is-on > * { animation: none; }
  .megav__tab-chev { transition: none; transform: none; }
  .megav__promo:hover { transform: none; }
}