/* =====================================================================
   ARE — Desktop mega-menu (labelled columns)
   ---------------------------------------------------------------------
   Turns the top-level primary-menu dropdown into a content-sized mega
   panel. Each 2nd-level menu item becomes a labelled COLUMN HEADING and
   its 3rd-level children list beneath it. Opens on hover / keyboard focus.

   SCOPE: desktop only (min-width: 1025px). Below that the existing mobile
   .nav-collapse accordion is untouched.

   The Primary menu is 3 levels deep to drive the columns:
     Top item  ->  Category (column heading, level 2)  ->  Links (level 3)
   On mobile that 3rd level is flattened back to 2 levels by
   are_flatten_mobile_menu() in functions.php, so the mobile menu is
   unchanged.
   ===================================================================== */

@media (min-width: 1025px) {

  /* Anchor the panel to the top-level item */
  .primary-menu > li.menu-item-has-children {
    position: relative;
  }

  /* ---- THE MEGA PANEL (top-level sub-menu only) ------------------- */
  .primary-menu > li.menu-item-has-children > ul.sub-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem 4rem;                 /* row-gap  column-gap */
    width: max-content;               /* sized to content            */
    max-width: min(92vw, 1120px);     /* never wider than the viewport */
    padding: 3rem 3.5rem;
    box-sizing: border-box;
    background: rgba(67, 87, 217, 0.95);   /* #4357D9 @ 95% */
    border-radius: 0 0 25px 25px;          /* rounded bottom corners */
  }

  /* Bring the panel on-screen on hover / focus. The hidden state is still
     handled by the theme's base rule (right: 9999rem; opacity: 0).       */
  .primary-menu > li.menu-item-has-children:hover > ul.sub-menu,
  .primary-menu > li.menu-item-has-children:focus-within > ul.sub-menu,
  .primary-menu > li.menu-item-has-children.focus > ul.sub-menu {
    left: 0;
    right: auto;
    top: 100%;                        /* sit directly under the nav bar   */
    opacity: 1;
    transform: translateY(0);
    z-index: 100;
  }

  /* ---- EACH 2ND-LEVEL ITEM = ONE COLUMN --------------------------- */
  .primary-menu > li > ul.sub-menu > li {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    min-width: 17rem;
    max-width: 22rem;
    margin: 0;
    padding: 0;
    border: 0;                        /* kill the inherited row borders   */
  }

  /* Column heading (the 2nd-level link) */
  .primary-menu > li > ul.sub-menu > li > a {
    display: block;
    width: 100%;
    padding: 0 0 0.7rem 0;
    margin: 0 0 0.9rem 0;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #fff;
    border-bottom: 2px solid rgba(255, 255, 255, 0.35);
  }

  .primary-menu > li > ul.sub-menu > li > a:hover {
    border-bottom-color: var(--lime, #E2E419);
    color: var(--lime, #E2E419);
  }

  /* Placeholder headings (Custom Link with href="#") are labels, not links:
     no pointer cursor and no rollover style.                              */
  .primary-menu > li > ul.sub-menu > li > a[href="#"] {
    cursor: default;
  }
  .primary-menu > li > ul.sub-menu > li > a[href="#"]:hover {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.35);
  }

  /* Hide the chevron icon on column headings — no sideways fly-out now */
  .primary-menu > li > ul.sub-menu > li.menu-item-has-children > a {
    padding-right: 0;
  }
  .primary-menu > li > ul.sub-menu .icon {
    display: none;
  }

  /* ---- 3RD-LEVEL LINKS = STATIC LIST INSIDE THE COLUMN ------------ */
  .primary-menu > li > ul.sub-menu li > ul.sub-menu {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
    opacity: 1;
    transform: none;
    background: transparent;
    padding: 0;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }

  /* keep the nested list open regardless of the theme's hover machinery  */
  .primary-menu > li > ul.sub-menu li.menu-item-has-children:hover > ul.sub-menu,
  .primary-menu > li > ul.sub-menu li.menu-item-has-children.focus > ul.sub-menu {
    right: auto;
  }

  .primary-menu > li > ul.sub-menu > li > ul.sub-menu > li {
    display: block;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 0.35rem 0;
    border: 0;
  }

  .primary-menu > li > ul.sub-menu > li > ul.sub-menu > li > a {
    display: inline-block;
    padding: 0;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid transparent;
  }

  .primary-menu > li > ul.sub-menu > li > ul.sub-menu > li > a:hover {
    color: #fff;
  }

  /* ---- Remove the single-column fly-out arrow pseudo-elements ------ */
  .primary-menu > li > ul.sub-menu ul::before,
  .primary-menu > li > ul.sub-menu ul::after {
    display: none;
  }

  /* ---- Safety: a 2nd-level item with NO children ------------------ */
  /* still renders as a tidy single-item column (heading acts as link).  */
  .primary-menu > li > ul.sub-menu > li:not(.menu-item-has-children) > a {
    border-bottom-color: transparent;
    margin-bottom: 0;
  }
}