/* ==========================================================================
   QubixLabs — Phase 2 Navigation Layer
   Dropdown menus for the primary header (desktop) and accordion groups for
   the mobile drawer. Purely additive on top of qeds.build.css — does not
   touch header position/fixed behavior (see foundation.js for that fix).
   Loaded on every page so the dropdown experience is identical site-wide.
   ========================================================================== */

/* ---- desktop dropdown trigger ------------------------------------------ */
.qx-dd-trigger {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.qx-dd-caret {
  transition: transform .25s var(--qeds-ease-standard);
  flex: none;
}
.qx-dd-caret.qx-dd-caret--open {
  transform: rotate(180deg);
}

/* ---- desktop dropdown panel --------------------------------------------- */
/* Anchored to the trigger's own wrapper (position: relative on the .relative
   div in the header markup), not to any header-wide coordinate. Panels are
   wide (min-width below) relative to a single nav pill, so centering them
   under the trigger (the old left:50%/translateX(-50%) rule) pushed half the
   panel width past the trigger's edge — for "Platform" (second item, close
   to "Home") that meant overlapping the preceding link. Left-aligning to the
   trigger keeps the panel flush with its own trigger and growing toward the
   center of the header, where there is room. The last trigger before the
   theme toggle / CTA ("Company") gets the --right modifier instead so it
   grows away from the right viewport edge. */
.qx-dd-panel {
  position: absolute;
  top: calc(100% + .6rem);
  left: 0;
  min-width: 15.5rem;
  max-width: min(20rem, calc(100vw - 2rem));
  padding: .5rem;
  border-radius: var(--qeds-radius-lg);
  background: var(--qeds-glass-solid-bg);
  backdrop-filter: blur(var(--qeds-glass-solid-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--qeds-glass-solid-blur)) saturate(160%);
  border: 1px solid var(--qeds-color-line);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.55), 0 0 0 1px rgba(34,229,216,.06);
  z-index: 60;
}
.qx-dd-panel--right {
  left: auto;
  right: 0;
}
.qx-dd-item {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .6rem .75rem;
  border-radius: var(--qeds-radius-md);
  color: var(--qeds-color-text);
  border: 1px solid transparent;
  transition: background .18s ease, color .18s ease, border-color .22s ease, box-shadow .22s ease;
}
/* Regular dropdown items pick up the same "lit border + soft glow" language
   as .qx-dd-item--featured on hover/focus, just restrained to an on-demand
   state instead of a permanent border — keeps the featured item visually
   senior while the rest of the panel still feels alive, not flat. */
.qx-dd-item:hover,
.qx-dd-item:focus-visible {
  background: linear-gradient(90deg, rgba(34,229,216,.14), rgba(59,110,245,.07));
  border-color: rgba(34,229,216,.32);
  box-shadow: inset 2px 0 0 var(--qeds-color-cyan), 0 0 22px -10px rgba(34,229,216,.55);
}
html.light .qx-dd-item:hover,
html.light .qx-dd-item:focus-visible {
  background: linear-gradient(90deg, rgba(59,110,245,.12), rgba(34,229,216,.06));
  border-color: rgba(59,110,245,.28);
  box-shadow: inset 2px 0 0 var(--qeds-color-blue), 0 0 20px -10px rgba(59,110,245,.4);
}
.qx-dd-item-title {
  font-family: var(--qeds-font-display);
  font-weight: 600;
  font-size: .85rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.qx-dd-item-desc {
  font-size: .72rem;
  color: var(--qeds-color-muted);
  line-height: 1.4;
}
.qx-dd-item--featured {
  background: linear-gradient(100deg, rgba(59,110,245,.14), rgba(34,229,216,.1));
  border-color: rgba(34,229,216,.25);
}
.qx-dd-item--featured:hover {
  background: linear-gradient(100deg, rgba(59,110,245,.2), rgba(34,229,216,.16));
  border-color: rgba(34,229,216,.5);
  box-shadow: 0 0 26px -8px rgba(34,229,216,.6);
}
html.light .qx-dd-item--featured:hover {
  box-shadow: 0 0 22px -8px rgba(59,110,245,.4);
}
.qx-dd-divider {
  height: 1px;
  margin: .35rem .25rem;
  background: var(--qeds-color-line);
}

@media (prefers-reduced-motion: reduce) {
  .qx-dd-caret {
    transition: none !important;
  }
}

/* ---- mobile accordion groups (inside the existing mobile drawer) ------- */
.qx-mob-group-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
}
.qx-mob-group-caret {
  transition: transform .25s var(--qeds-ease-standard);
  flex: none;
}
.qx-mob-group-caret.qx-mob-group-caret--open {
  transform: rotate(180deg);
}
.qx-mob-group-panel {
  padding-left: .75rem;
  border-left: 1px solid var(--qeds-color-line);
  margin-left: .75rem;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
@media (prefers-reduced-motion: reduce) {
  .qx-mob-group-caret {
    transition: none !important;
  }
}