/* ==========================================================================
   HEADER — SOFTWARE & SERVICES DROPDOWN PANELS
   ==========================================================================

   The theme's own submenu is a 240px column of bare links. Twelve products
   and six services described by nothing but their name is not much of a menu,
   so this restyles that same `li.menu-has-sub > ul` into a two-column panel
   carrying a title and a one-line summary each, plus a "view all" row.

   It restyles rather than replaces because the theme already owns three
   behaviours worth keeping: the caret on the parent link, the hover reveal on
   desktop, and — importantly — trigger.js clones .main-nav-menu into the
   mobile drawer and wires an accordion onto every .menu-has-sub. Building a
   separate widget would have left the mobile menu with no way in.

   Everything here is scoped under .header-style-01 so it applies to the header
   and its sticky clone, and not to the cloned .mobile-menu-list, which keeps
   the theme's plain accordion styling (see the tail of this file).

   The header sits on the dark body, so the panel is dark glass in the same
   language as news.css and projects.css rather than the theme's white card.
   ========================================================================== */

.header-style-01 .main-menu .main-menu-wrapper .main-nav-menu > li > ul.wm-mega {
  /* Azure from the monogram, as used by projects.css and news.css. */
  --mega-accent: #5fcdfb;

  left: 50%;
  translate: -50% 0;
  width: min(38rem, calc(100vw - 3rem));
  min-width: 0;
  padding: 0.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;

  background-color: #0d0d38;
  background-image:
    radial-gradient(120% 100% at 100% 0%, rgb(41 182 240 / 0.14) 0%, transparent 58%),
    radial-gradient(90% 90% at 0% 100%, rgb(59 56 235 / 0.28) 0%, transparent 62%);
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgb(4 6 24 / 0.55);

  font-family: 'Mulish', sans-serif;

  /* The theme unfolds the panel with scaleY, which squashes two-line items on
     the way in. A fade and a short lift reads better at this size; `translate`
     is a separate property from `transform`, so the centring above survives
     the animation instead of being overwritten by it. */
  transform: none;
  translate: -50% 8px;
  transition: opacity 0.2s ease, translate 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.header-style-01 .main-menu .main-menu-wrapper .main-nav-menu > li:hover > ul.wm-mega,
.header-style-01 .main-menu .main-menu-wrapper .main-nav-menu > li:focus-within > ul.wm-mega {
  opacity: 1;
  visibility: visible;
  transform: none;
  translate: -50% 0;
}

/* --- Items ----------------------------------------------------------------
   The theme styles `> ul > li > a` with a fixed 7px/20px padding and a solid
   primary-colour hover, both of which have to go for a two-line item. */

.header-style-01 .main-menu .main-menu-wrapper .main-nav-menu > li > ul.wm-mega > li {
  border: 0;
}

.header-style-01 .main-menu .main-menu-wrapper .main-nav-menu > li > ul.wm-mega > li > a.wm-mega__item {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  width: 100%;
  padding: 0.625rem 0.75rem;
  border-radius: 8px;
  line-height: 1.4;
  background-color: transparent;
  transition: background-color 0.15s ease;
}

.header-style-01 .main-menu .main-menu-wrapper .main-nav-menu > li > ul.wm-mega > li > a.wm-mega__item:hover,
.header-style-01 .main-menu .main-menu-wrapper .main-nav-menu > li > ul.wm-mega > li > a.wm-mega__item:focus-visible {
  background-color: rgb(255 255 255 / 0.07);
}

.header-style-01 .main-menu .main-menu-wrapper .main-nav-menu > li > ul.wm-mega .wm-mega__item strong {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #ffffff;
  transition: color 0.15s ease;
}

.header-style-01 .main-menu .main-menu-wrapper .main-nav-menu > li > ul.wm-mega .wm-mega__item:hover strong {
  color: var(--mega-accent);
}

.header-style-01 .main-menu .main-menu-wrapper .main-nav-menu > li > ul.wm-mega .wm-mega__item span {
  font-family: 'Roboto', sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.45;
  color: #a8afd8;
  /* Two lines at most: the summaries are trimmed in PHP, but a long word can
     still push a third line and stagger the two columns. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- View all row ---------------------------------------------------------
   Spans both columns and sits under a hairline, so it reads as the way out of
   the panel rather than as a seventh product. */

.header-style-01 .main-menu .main-menu-wrapper .main-nav-menu > li > ul.wm-mega > li.wm-mega__all {
  grid-column: 1 / -1;
  margin-top: 0.375rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgb(255 255 255 / 0.1);
}

.header-style-01 .main-menu .main-menu-wrapper .main-nav-menu > li > ul.wm-mega > li.wm-mega__all > a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: auto;
  padding: 0.375rem 0.75rem;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--mega-accent);
  background-color: transparent;
  transition: background-color 0.15s ease;
}

.header-style-01 .main-menu .main-menu-wrapper .main-nav-menu > li > ul.wm-mega > li.wm-mega__all > a:hover {
  background-color: rgb(41 182 240 / 0.12);
  color: var(--mega-accent);
}

.header-style-01 .main-menu .main-menu-wrapper .main-nav-menu > li > ul.wm-mega > li.wm-mega__all svg {
  width: 0.875em;
  height: 0.875em;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.header-style-01 .main-menu .main-menu-wrapper .main-nav-menu > li > ul.wm-mega > li.wm-mega__all > a:hover svg {
  transform: translateX(0.25rem);
}

/* --- Mobile drawer ---------------------------------------------------------
   trigger.js clones the nav into .mobile-menu-list, which is outside the
   .header-style-01 scope above, so the panel arrives there as the theme's
   plain accordion — which is the right shape for a narrow drawer. Only two
   things need saying: drop the summaries, which would treble the drawer's
   height, and give the "view all" row a little emphasis. */

.mobile-menu-list .wm-mega__item span {
  display: none;
}

.mobile-menu-list .wm-mega__item strong {
  font-weight: 400;
}

.mobile-menu-list .wm-mega__all > a {
  color: #5fcdfb;
}

.mobile-menu-list .wm-mega__all svg {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .header-style-01 .main-menu .main-menu-wrapper .main-nav-menu > li > ul.wm-mega,
  .header-style-01 .main-menu .main-menu-wrapper .main-nav-menu > li > ul.wm-mega * {
    transition-duration: 0.01ms !important;
  }
}