/* od-menu8-custom-solutions-1-0-0.css -- nav menu 8 "Custom Solutions" flyout (2026-10-22)
   Bill round-2 item 1, principal-approved Option A (Marketing/jobs/2026-10-12-orient-display-seo-audit/
   mocks/menu8-consolidation/PROPOSAL.md). Loaded AFTER od-style (enqueue block in functions.php,
   dependency `od-style`). A NEW file on purpose: od-style-1-0-* is not bumped.

   Every rule keys on a CSS CLASS set on the menu item (Appearance > Menus "CSS Classes", written by
   scripts/bill_batch12_menu_20261022.py), never on a menu-item id. Production ids differ at cutover
   gate G4; class-keyed rules carry over with no remap.
     od-mm-solutions  on the top item (was 8055 "Custom Products", now "Custom Solutions")
     od-mm-sep        on the first item of the industries block and of the actions block
     od-mm-cta        on "Talk to an Engineer"

   1. Width. od-style-1-0-62.css (pass 2, 2026-08-18) forces the grid-era
        #mega-menu-wrap-main-menu #mega-menu-main-menu > li#mega-menu-item-8055 > ul.mega-sub-menu
        { width:auto; left:0; right:0 !important }
      which squeezes a FLYOUT to ~175px. That selector carries three ids, and an id can only be beaten
      by ids, so the override below adds two :not(#...) id bumps (the od-style -61 :not(#od-61)
      idiom): four ids beat three, !important vs !important, regardless of source order.
   2. Two hairline dividers (not headings): technologies | industries | actions.
   3. The "Talk to an Engineer" blue-arrow call-to-action, class-keyed (od-style keeps an id-keyed
      copy for 454541; the two agree, this one survives an id change).

   Rollback: remove this file + the enqueue block in functions.php (scripts/bill_batch12_menu_20261022.py
   --css-revert-write) and purge. */

@media (min-width: 1025px) {
  /* 1. flyout width, panel inset */
  #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-flyout.od-mm-solutions:not(#od-m8-a):not(#od-m8-b) > ul.mega-sub-menu {
    width: 250px !important;
    left: 0 !important;
    right: auto !important;
    padding: 10px 0 !important;
  }

  /* 2. dividers */
  #mega-menu-wrap-main-menu #mega-menu-main-menu > li.od-mm-solutions > ul.mega-sub-menu > li.mega-menu-item.od-mm-sep {
    border-top: 1px solid #e6e6e6;
    margin-top: 6px !important;
    padding-top: 6px !important;
  }

  /* 3. call-to-action link */
  #mega-menu-wrap-main-menu #mega-menu-main-menu li.mega-menu-item.od-mm-cta > a.mega-menu-link {
    text-transform: none !important;
    font-weight: 700 !important;
    color: rgba(0, 61, 216, 0.98) !important;
  }
  #mega-menu-wrap-main-menu #mega-menu-main-menu li.mega-menu-item.od-mm-cta > a.mega-menu-link:hover {
    color: #1a7d2e !important;
  }
  #mega-menu-wrap-main-menu #mega-menu-main-menu li.mega-menu-item.od-mm-cta > a.mega-menu-link::after {
    content: " \2192";
    font-weight: 700;
  }
}

@media (max-width: 1024px) {
  /* mobile accordion: the same two dividers, inside the open panel */
  #mega-menu-wrap-main-menu #mega-menu-main-menu li.od-mm-solutions > ul.mega-sub-menu > li.mega-menu-item.od-mm-sep {
    border-top: 1px solid #444;
  }
}