/* ==========================================================================
   MAIN MENU: grouped Services panel + dropdown fit  (T16, 14 Oct 2026)
   --------------------------------------------------------------------------
   The Services dropdown had grown to 15 links in one 190px column (~900px
   tall), so the last items sat below the fold on laptop screens. Services is
   now a three-column panel (four labelled groups) that opens centred under
   the menu bar and is about 300px tall. On phones it stays an accordion, with
   the group labels shown as small headings.

   Markup (every page):
     <li class="vis-mega-parent"><a class="menu-item" href="#">Services</a>
       <ul class="vis-mega">
         <li class="vis-mega-col">
           <div class="vis-mega-title" id="...">Group</div>
           <ul class="vis-mega-list" aria-labelledby="..."> <li><a>..</a></li> </ul>
         </li> ...
       </ul></li>

   Group titles are <div>s on purpose: the theme's mobile script binds a
   collapse handler to `#mainmenu > li > ul > li > span`, and headings in the
   header would add to every page's heading outline.
   Loaded after style.css and scheme-vis.css on every page.

   Also here: a hover bridge so a diagonal mouse sweep from "Services" to the
   right-hand column doesn't switch to "Cyber Workforce", and a fix for the
   ISACA pages, whose two header buttons pushed "Insights" and "India" onto
   a second menu row.
   ========================================================================== */

/* ---------- Desktop (theme switches to the mobile menu at 993px) --------- */
@media (min-width: 993px) {

  /* Anchor the panel to the whole menu bar instead of the Services item,
     so it can be centred and never runs off the right edge. */
  header:not(.header-mobile) #mainmenu { position: relative; }
  header:not(.header-mobile) #mainmenu > li.vis-mega-parent { position: static; }

  header:not(.header-mobile) #mainmenu > li > ul.vis-mega {
    left: 50%;
    width: min(880px, calc(100vw - 32px));
    transform: translate(-50%, 8px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 20px 14px 14px;
    background: #fff;
    border: 1px solid rgba(8, 15, 26, .10);
    border-top: 3px solid var(--primary-color);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 18px 40px rgba(8, 15, 26, .22);
    max-height: calc(100vh - 200px);   /* safety net on very short windows */
    overflow-y: auto;
    overscroll-behavior: contain;
    text-align: left;
  }
  header:not(.header-mobile) #mainmenu > li.vis-mega-parent:hover > ul.vis-mega {
    transform: translate(-50%, 0);
  }
  /* kept as its own rule: a browser without :has() drops only this one */
  header:not(.header-mobile) #mainmenu > li.vis-mega-parent:has(:focus-visible) > ul.vis-mega {
    transform: translate(-50%, 0);
  }

  /* Hover bridge. The panel is wider than the Services item, so heading for
     the right-hand column means cutting diagonally across "Cyber Workforce"
     and "Training", which swapped the open menu half-way there. While
     Services is open, two invisible pieces of the Services link keep it open
     on that path. Both are positioned from the Services link (the theme
     makes it position:relative), so they always sit directly above the
     panel, even on pages where the menu wraps to two rows.
       ::before  the gap between the labels and the panel (the link's 25px
                 bottom padding), from under the end of "Home" across to
                 the end of Certifications. It stops before Insights and
                 India, so their real links are never covered.
       ::after   a wedge beside "Services" that also covers the lower half
                 of the "Cyber Workforce" label, tapering to nothing over
                 200px, for shallow sweeps toward the top of the right-hand
                 column.
     Moving sideways along the middle of the labels still switches menus. */
  header:not(.header-mobile) #mainmenu > li.vis-mega-parent:hover > a.menu-item::before,
  header:not(.header-mobile) #mainmenu > li.vis-mega-parent:hover > a.menu-item::after {
    content: "";
    position: absolute;
    bottom: 0;
    margin: 0;
    z-index: 11;                 /* above the neighbouring menu links */
  }
  header:not(.header-mobile) #mainmenu > li.vis-mega-parent:hover > a.menu-item::before {
    left: -30px;
    right: -420px;
    height: 25px;                /* = theme's #mainmenu a padding-bottom */
  }
  header:not(.header-mobile) #mainmenu > li.vis-mega-parent:hover > a.menu-item::after {
    left: 100%;
    width: 200px;
    top: calc(50% + 2px);
    clip-path: polygon(0 0, 100% calc(100% - 25px), 100% 100%, 0 100%);
  }

  header:not(.header-mobile) #mainmenu ul.vis-mega > li.vis-mega-col {
    display: block;
    float: none;
    min-width: 0;
    padding: 0 12px;
    border: 0;
  }
  header:not(.header-mobile) #mainmenu ul.vis-mega > li.vis-mega-col + li.vis-mega-col {
    border-left: 1px solid rgba(8, 15, 26, .07);
  }

  header:not(.header-mobile) #mainmenu ul.vis-mega .vis-mega-title {
    margin: 0 0 6px;
    padding: 0 10px 9px;
    border-bottom: 1px solid rgba(8, 15, 26, .08);
    font-family: var(--heading-font);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--secondary-color);
    white-space: nowrap;
  }
  header:not(.header-mobile) #mainmenu ul.vis-mega ul.vis-mega-list + .vis-mega-title {
    margin-top: 14px;
  }

  /* Inner lists: undo the theme's flyout rules (absolute, hidden until hover,
     190px wide, margin-left 188px). visibility:inherit keeps them hidden
     whenever the panel itself is hidden. */
  header:not(.header-mobile) #mainmenu > li > ul.vis-mega ul.vis-mega-list {
    position: static;
    visibility: inherit;
    opacity: 1;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    transform: none;
  }
  header:not(.header-mobile) #mainmenu ul.vis-mega ul.vis-mega-list li {
    display: block;
    float: none;
    border: 0;
  }
  header:not(.header-mobile) #mainmenu ul.vis-mega ul.vis-mega-list li a {
    display: block;
    width: auto;
    padding: 7px 10px;
    border: 0;
    border-radius: 6px;
    font-size: 15px;
    line-height: 1.35;
    text-align: left;
    color: #1f2937;
    background: none;
  }
  header:not(.header-mobile) #mainmenu ul.vis-mega ul.vis-mega-list li a:hover,
  header:not(.header-mobile) #mainmenu ul.vis-mega ul.vis-mega-list li a:focus-visible {
    background: rgba(var(--primary-color-rgb), .10);
    color: var(--secondary-color);
  }

  /* The other dropdowns: as wide as their longest item (190-300px) so items
     stop wrapping to two lines, and they scroll inside themselves rather
     than run off a short screen. */
  header:not(.header-mobile) #mainmenu > li > ul:not(.vis-mega) {
    width: max-content;
    min-width: 190px;
    max-width: 300px;
    max-height: calc(100vh - 200px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Keyboard: tabbing onto a top-level item opens its menu. :focus-visible
     (not :focus-within) so a mouse click doesn't pin a menu open. */
  header:not(.header-mobile) #mainmenu > li:has(:focus-visible) > ul {
    visibility: visible;
    opacity: 1;
  }
}

/* Hover-bridge strip at the theme's tighter menu spacings (scheme-vis.css
   narrows item gaps and font size below 1140/1060px), so it still stops
   short of "Insights". */
@media (min-width: 993px) and (max-width: 1139px) {
  header:not(.header-mobile) #mainmenu > li.vis-mega-parent:hover > a.menu-item::before { right: -355px; }
}
@media (min-width: 993px) and (max-width: 1059px) {
  header:not(.header-mobile) #mainmenu > li.vis-mega-parent:hover > a.menu-item::before { right: -330px; }
}

/* ISACA training pages carry a second header button ("Register", then the
   outlined "Free Consultation"). With both, the menu had no room and
   "Insights" and "India" wrapped onto a second row, underneath the
   dropdowns, at every desktop width (checked 1024-1920px). On desktop keep
   "Register" (the page's main action) and hide the outlined consultation
   button; the phone menu is unchanged. Pages with one button are untouched. */
@media (min-width: 993px) {
  header:not(.header-mobile) .menu_side_area > a.btn-main.me-2 ~ a.btn-main.btn-line {
    display: none;
  }
  header:not(.header-mobile) .menu_side_area > a.btn-main.me-2 {
    margin-right: 0 !important;  /* Bootstrap .me-2 uses !important */
  }
}

/* Panel width at the narrowest desktop sizes: still three columns, tighter. */
@media (min-width: 993px) and (max-width: 1099px) {
  header:not(.header-mobile) #mainmenu ul.vis-mega ul.vis-mega-list li a { font-size: 14.5px; padding: 6px 8px; }
  header:not(.header-mobile) #mainmenu ul.vis-mega .vis-mega-title { padding-left: 8px; padding-right: 8px; letter-spacing: .1em; }
  header:not(.header-mobile) #mainmenu ul.vis-mega > li.vis-mega-col { padding: 0 8px; }
}

/* ---------- Mobile accordion (header.header-mobile, set by designesia.js) - */
header.header-mobile #mainmenu ul.vis-mega ul.vis-mega-list {
  height: auto;          /* theme collapses every nested ul to height:0 */
  overflow: visible;
  position: static;
  margin: 0 0 4px;
  border: 0;
}
header.header-mobile #mainmenu ul.vis-mega ul.vis-mega-list li {
  padding-left: 0;       /* the group <li> already carries the theme's 40px indent */
  border-top: 0;
}
header.header-mobile #mainmenu ul.vis-mega > li.vis-mega-col {
  border-top: 0;
}
header.header-mobile #mainmenu ul.vis-mega .vis-mega-title {
  padding: 16px 15px 4px;
  font-family: var(--heading-font);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--primary-color);
}