/* ===========================================================
   MEGA MENU (fallback) — styles the primary nav dropdowns.
   Only use this if you do not have your own megamenu.css.
   Loads after components.css, so it wins the cascade.
=========================================================== */
.mega-nav__list {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin: 0;
  padding: 0;
}
.mega-nav__item { position: relative; }

.mega-nav__item > a,
.mega-nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--sp-2) 0;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text);
  background: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}
.mega-nav__item > a:hover,
.mega-nav__trigger:hover,
.has-dropdown.is-open > .mega-nav__trigger { color: var(--color-primary); }

/* small caret after dropdown triggers */
.mega-nav__trigger::after {
  content: '';
  border: 4px solid transparent;
  border-top-color: currentColor;
  border-bottom: 0;
  transition: transform .2s var(--ease);
}
.has-dropdown.is-open > .mega-nav__trigger::after,
.has-dropdown:hover > .mega-nav__trigger::after { transform: rotate(180deg); }

.mega-nav__flame { font-size: 0.95em; }

/* the dropdown itself */
.mega-nav__panel {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 120;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  padding: var(--sp-2);
  background: var(--color-bg-off);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
/* invisible bridge so the panel doesn't close while the mouse crosses the gap */
.mega-nav__panel::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }

.has-dropdown:hover > .mega-nav__panel,
.has-dropdown:focus-within > .mega-nav__panel,
.has-dropdown.is-open > .mega-nav__panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.mega-nav__panel a {
  display: block;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
}
.mega-nav__panel a::after { display: none; }   /* no underline animation inside panels */
.mega-nav__panel a:hover { background: var(--wash-sage); color: var(--color-primary); }

/* Mobile drawer groups */
.mdrawer-group summary { cursor: pointer; padding: var(--sp-3) 0; font-weight: 600; }
.mdrawer-sublink { display: block; padding: 8px 0 8px var(--sp-4); font-size: var(--fs-sm); color: var(--color-text-muted); }