/* Mega menu panel.
   Sits inside the dark site-header but renders as a light surface.
   Position: absolute below the header__inner row. */

.mega-menu {
  /* Restore light palette inside the dark header scope. */
  --color-foreground: var(--on-light-foreground);
  --color-muted-foreground: var(--on-light-muted-foreground);
  --color-border: var(--on-light-border);
  --color-accent: var(--on-light-accent);
  --color-accent-foreground: var(--on-light-accent-foreground);
  --color-primary: var(--on-light-primary);
  --color-primary-foreground: var(--on-light-primary-foreground);

  /* Force a fully opaque surface so hero content never reads through. */
  --mega-surface: #ffffff;

  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 60;
  background: var(--mega-surface);
  color: var(--color-foreground);
  border-top: 1px solid var(--on-light-border);
  box-shadow:
    0 1px 0 rgb(16 17 20 / 4%),
    0 28px 56px -16px rgb(16 17 20 / 22%);
  padding-block: 1.75rem 2rem;
}

.mega-menu__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

.mega-menu__col {
  min-width: 0;
  padding-inline: 1.75rem;
  border-right: 1px solid var(--color-border);
}
.mega-menu__col:first-child { padding-inline-start: 0; }
.mega-menu__col:last-child {
  padding-inline-end: 0;
  border-right: 0;
}

/* --- Slim variant: shadcn-style dropdown --------------------------
   Default mode. Renders as a narrow card anchored directly under its
   trigger <li> (which carries position: relative). Full 3-column
   variant stays available via ?mega=full for stakeholder previews. */
.mega-menu--slim {
  /* Override the base .mega-menu absolute stretch (left:0;right:0). */
  left: 0;
  right: auto;
  top: calc(100% + 0.5rem);
  width: 19rem;
  padding: 0;
  border: 1px solid var(--on-light-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgb(16 17 20 / 2%),
    0 4px 6px -2px rgb(16 17 20 / 6%),
    0 16px 40px -12px rgb(16 17 20 / 22%);
}

/* Subtle pointer bridge so the cursor can travel from the trigger down
   into the card without tripping the mouseleave gap. */
.mega-menu--slim::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.5rem;
  height: 0.5rem;
}

.mega-menu--slim .mega-menu__grid {
  display: block;
  max-width: none;
  padding-inline: 0;
}
.mega-menu--slim .mega-menu__col {
  padding-inline: 0;
  border-right: 0;
}

/* Muted header bar across the top of the dropdown. */
.mega-menu--slim .mega-menu__heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.625rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.14em;
  color: var(--color-muted-foreground);
  margin: 0;
  padding: 0.625rem 0.875rem;
  background: color-mix(in oklch, var(--on-light-foreground) 3%, transparent);
  border-bottom: 1px solid var(--on-light-border);
  border-radius: 0;
}
.mega-menu--slim .mega-menu__heading::before {
  content: "";
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 999px;
  background: var(--brand-teal);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--brand-teal) 18%, transparent);
  flex-shrink: 0;
}

/* Rows span the full card width and stack with hairline dividers
   between them. No inner padding, no corner radius on the link, so the
   hover wash reaches edge to edge. */
.mega-menu--slim .mega-menu__items {
  gap: 0;
  padding: 0;
}
.mega-menu--slim .mega-menu__item { margin: 0; }
.mega-menu--slim .mega-menu__item + .mega-menu__item {
  border-top: 1px solid color-mix(in oklch, var(--on-light-border) 55%, transparent);
}

.mega-menu--slim .mega-menu__link {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem 0.875rem;
  gap: 0.75rem;
  border-radius: 0;
  position: relative;
}
/* shadcn-style trailing chevron that fades in on hover/focus. */
.mega-menu--slim .mega-menu__link::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  margin-left: auto;
  align-self: center;
  border-top: 1.5px solid currentcolor;
  border-right: 1.5px solid currentcolor;
  transform: rotate(45deg) translateX(-2px);
  color: var(--color-muted-foreground);
  opacity: 0;
  transition:
    opacity var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}
.mega-menu--slim .mega-menu__link:hover::after,
.mega-menu--slim .mega-menu__link:focus-visible::after {
  opacity: 1;
  transform: rotate(45deg) translateX(0);
  color: var(--brand-teal);
}

/* Slim items are simple label rows - no icon, no description - so they
   match the footer column links. */
.mega-menu--slim .mega-menu__icon,
.mega-menu--slim .mega-menu__desc { display: none; }
.mega-menu--slim .mega-menu__text {
  flex: 1;
  min-width: 0;
}
.mega-menu--slim .mega-menu__title {
  font-size: var(--fs-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-muted-foreground);
  transition: color var(--dur-fast) var(--ease);
}
.mega-menu--slim .mega-menu__link:hover .mega-menu__title,
.mega-menu--slim .mega-menu__link:focus-visible .mega-menu__title {
  color: var(--color-foreground);
}

.mega-menu__heading {
  font-size: 0.6875rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 0.875rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border);
}

.mega-menu__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.mega-menu__item { margin: 0; }

.mega-menu__link {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-md);
  color: var(--color-foreground);
  transition:
    background var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}
.mega-menu__link:hover,
.mega-menu__link:focus-visible {
  background: var(--color-accent);
  color: var(--color-foreground);
  outline: none;
}

.mega-menu__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--brand-teal) 8%, transparent);
  color: var(--brand-teal);
  border: 1px solid color-mix(in oklch, var(--brand-teal) 14%, transparent);
  margin-top: 0.125rem;
  transition:
    background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}
.mega-menu__link:hover .mega-menu__icon,
.mega-menu__link:focus-visible .mega-menu__icon {
  background: color-mix(in oklch, var(--brand-teal) 16%, transparent);
  border-color: color-mix(in oklch, var(--brand-teal) 28%, transparent);
}

.mega-menu__text {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  min-width: 0;
}

.mega-menu__title {
  font-size: var(--fs-sm);
  font-weight: var(--font-weight-display);
  color: var(--color-foreground);
  letter-spacing: -0.01em;
  line-height: var(--lh-tight);
  transition: color var(--dur-fast) var(--ease);
}
.mega-menu__link:hover .mega-menu__title,
.mega-menu__link:focus-visible .mega-menu__title {
  color: var(--brand-teal);
}

.mega-menu__desc {
  font-size: var(--fs-xs);
  color: var(--color-muted-foreground);
  line-height: var(--lh-snug);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

@media (max-width: 960px) {
  /* Mega menus hide on mobile; nav falls back to the mobile panel */
  .mega-menu { display: none; }
}