:root {
  --mega-panel-card-bg-color: var(--card-background-color);
  --nav-item-bg-hover: var(--card-background-color);
  --nav-link-bg-hover: var(--gray-200);
}
[data-theme-style="dark"] {
  --mega-panel-card-bg-color: var(--body-background-color);
  --nav-item-bg-hover: var(--card-background-color);
}

.navbar-left {
  flex: 1 1;
  display: flex;
  justify-content: flex-start;
}

/* .navbar-collapse (bootstrap) sets flex-grow:1 unconditionally - harmless
   for a typical single nav row, but this layout centers nav-center between
   two equally-growing siblings (navbar-left/nav-end below), so it must stay
   non-growing at lg+ or it eats the space meant to keep it centered. Below
   lg, growth doesn't matter since flex-basis:100% (from the same bootstrap
   class) already forces it onto its own full-width wrapped row. */
@media (min-width: 992px) {
  .nav-center {
    flex-grow: 0;
  }
}

/* trigger buttons (Products/Resources/Company) only make sense as a
   hover/click dropdown — below lg the panel is shown fully expanded
   instead, so the triggers (and the items that live only in this row:
   Plan, notifications) are hidden rather than duplicated elsewhere */
.nav-center > .mega-nav {
  display: none;
}

@media (min-width: 992px) {
  .nav-center > .mega-nav {
    display: flex;
  }
}

.nav-end {
  flex: 1 1;
  display: flex;
  justify-content: flex-end;
}

/* below lg, nav-center (the collapse) sits between navbar-left and nav-end
   in source order; once expanded it's a full-width block, so with flex-wrap
   nav-end would wrap onto a line below it (sign-in/close ending up at the
   bottom of the expanded menu). Reordering keeps navbar-left + nav-end on
   the first row and pushes nav-center onto its own row below. At lg+ this
   is unset, so source order (left, center, end) drives the centering above. */
@media (max-width: 991.98px) {
  .nav-end {
    order: 2;
  }

  .nav-center {
    order: 3;
  }
}


/* megamenu */




/* wrapper holds nav + panel so the panel can be positioned under the
   nav links (not the brand) and so we can track mouse over the whole area */
.mega-wrapper {
  position: relative;
}

.mega-nav {
  display: flex;
  gap: .25rem;
}

.mega-nav .nav-link {
  color: var(--body-color-muted);
  padding: .45rem .85rem;
  border-radius: 6px;
  font-size: .9rem;
  font-weight: 300;
  transition: color .15s ease, background-color .15s ease;
}

.mega-nav button.nav-link {
  background: none;
  border: 0;
  appearance: none;
  font-family: inherit;
  line-height: inherit;
}

.mega-nav .nav-link.cta {
  color: var(--dark);
  background: var(--nav-item-bg-hover);
}

.mega-nav .nav-link.cta:hover {
  color: var(--dark);
  background: var(--gray-200);
}



.mega-nav .nav-link:hover,
.mega-nav .nav-link.active {
  color: var(--body-color);
  background: var(--nav-item-bg-hover);
}

/* === Panel === */
/* .mega-panel is the hoverable hit-area: it touches the nav row with no
   margin and bridges the visual gap with padding instead, so padding
   (unlike margin) still counts as "inside the element" for mouseenter/
   mouseleave - the pointer never crosses a dead zone on its way down,
   no matter how slowly it moves. */
/* default: always the hoverable dropdown, anchored under the nav row, with
   JS crossfading one .mega-content at a time (see mega-menu.js). This is
   what the account menu (.nav-end) uses at every breakpoint. */
.mega-panel {
  position: absolute;
  top: 100%;
  left: 0;
  width: 200px;
  padding-top: .6rem;
  opacity: 0;
  pointer-events: none;
  z-index: 50;
}

@media (min-width: 992px) {
  .mega-panel {
    width: 480px;
  }
}

.mega-panel.open {
  opacity: 1;
  pointer-events: auto;
}

.mega-panel--right {
  left: auto;
  right: 0;
}

/* the actual visible card - background/shadow/clipping live here so the
   padding-top bridge above stays transparent */
.mega-panel-card {
  position: relative;
  background: var(--mega-panel-card-bg-color);
  border: 1px solid var(--body-border-color);
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .2);
  overflow: hidden;
  height: 0;
}

/* each menu's content is stacked absolutely so the panel height can be
   driven explicitly by JS while contents crossfade over one another */
.mega-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1.25rem;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

.mega-content.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: .06s;
}

.mega-content.leaving {
  opacity: 0;
  transform: translateY(-6px);
  transition-delay: 0s;
}

/* === Mobile override: only the Products/Resources/Company panel
   (.nav-center) turns into a static, always-expanded stack below lg - it's
   the body of the navbar collapse, not a hover dropdown there. The account
   menu (.nav-end) is untouched and keeps the dropdown behavior above. */
@media (max-width: 991px) {
  .nav-center .mega-panel {
    position: static;
    width: 100%;
    padding-top: 0;
    opacity: 1;
    pointer-events: auto;
  }

  .nav-center .mega-panel-card {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    /* !important: the desktop dropdown JS (mega-menu.js) sets an inline
       px height on open/close (panelCard.style.height) - that inline
       style outlives a resize down to mobile (e.g. the cursor merely
       passing over "Products" while dragging the window narrower is
       enough to leave height:0px behind), and a plain class rule can't
       beat an inline style. Without this the card collapses to whatever
       height JS last set, clipping the always-expanded mobile list. */
    height: auto !important;
  }

  .nav-center .mega-content {
    position: static;
    width: 100%;
    padding: 1.5rem 0;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    /* this is a static, always-visible stack here, not the JS-driven
       crossfade - killing the transition stops the opacity/transform
       reset from animating (and the layout from settling mid-animation)
       at the exact moment the viewport crosses the breakpoint */
    transition: none;
  }

  .nav-center .mega-content + .mega-content {
    border-top: 1px solid var(--body-border-color);
  }

  .nav-center .mega-content::before {
    content: attr(data-mobile-title);
    display: block;
    font-size: 1.05rem;
    font-family: 'Zalando Sans Expanded',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-weight: 500;
    margin-bottom: .85rem;
  }
}

.mega-col-title {
  display: block;
  color: var(--body-color-muted);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .5rem;
}

.mega-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mega-col li + li {
  margin-top: .15rem;
}

.mega-col a {
  display: block;
  color: var(--body-color);
  font-size: .88rem;
  padding: .4rem .5rem;
  border-radius: 6px;
  text-decoration: none;
  transition: background-color .15s ease;
}

.mega-col a:hover {
  background: var(--nav-link-bg-hover);
}

.mega-col a.active {
  background: var(--primary);
  color: #fff;
}

.placeholder-hero {
  color: var(--body-color-muted);
}