/* ═══════════════════════════════════════════════════════
   AI Digital — Dynamic Mega Menu v9
   Layout: one flat 4-column CSS grid of "Explore All X" +
   every category (matches the reference design PDF). Each
   item gets an EXPLICIT grid-row/grid-column (inline style,
   computed in PHP) instead of relying on grid auto-placement —
   that's what lets megamenu.js push only the rows AFTER a
   hovered category down by one row slot when its .aimm-expand
   opens (grid-row set in JS), rather than auto-placement's
   grid-column:1/-1 trick, which forced trailing categories
   back to column 1 and stranded them alone in a sparse row.
   No side flyouts anymore.
   ═══════════════════════════════════════════════════════ */

/* Standalone panel */
.aimm-standalone {
    display: none;
    position: fixed;
    z-index: 999999;
    background: #fff;
    border-top: 3px solid var(--aimm-accent, #e91e8c);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 40px rgba(0,0,0,.18);
}
.aimm-standalone.aimm-open { display: block; }

/* ── Wrapper: 4-column grid ────────────────────────────── */
.aimm-wrap {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    align-items: start;
    gap: 2px 28px;
    width: auto !important;
    max-width: 1400px !important;
    background: #fff;
    font-family: inherit;
    padding: 16px 20px;
    overflow: visible !important;
    position: relative;
    z-index: 99999;
}

/* "Explore All X" is just the grid's first cell. */
.aimm-explore {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--aimm-accent, #e91e8c) !important;
    text-decoration: none !important;
    line-height: 1.3;
    padding: 8px 5px;
    border-radius: 6px;
}
.aimm-explore:hover { text-decoration: underline !important; }

.aimm-cat {
    display: flex !important;
    align-items: center;
    gap: 5px;
    box-sizing: border-box;
    padding: 8px 5px;
    font-size: 13.5px !important;
    color: #333 !important;
    text-decoration: none !important;
    border-radius: 6px;
    white-space: nowrap;
    cursor: pointer;
    line-height: 1.3;
    transition: color .2s ease, background-color .2s ease;
}
/* Hover & active: cyan text + a soft highlight box behind the item */
.aimm-cat:hover,
.aimm-cat.aimm-active {
    color: var(--aimm-hover-accent, #00bcd4) !important;
    background: var(--aimm-hover-bg, #eaf7fb) !important;
    font-weight: 600 !important;
}
.aimm-arr { font-size: 14px; color: #bbb; flex-shrink: 0; display: inline-block; transition: color .2s ease; }
.aimm-cat:hover .aimm-arr,
.aimm-cat.aimm-active .aimm-arr { color: var(--aimm-hover-accent, #00bcd4); }

/* ── Inline expand row: subcategories of the hovered category ───
   display:none removes it from the grid's flow entirely (default,
   closed state) so it costs nothing and doesn't break the 4-column
   flow. Opened via JS (adds .aimm-open, sets display:grid) — at
   that point grid-column:1/-1 forces the row break described above.
   It's ALSO its own 4-column grid, so its subcategory links flow
   the same row-major way the top-level categories do. */
.aimm-expand {
    display: none;
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px 28px;
    opacity: 0;
    background: #eef1f3;
    border-radius: 8px;
    padding: 10px 5px;
    margin: 4px 0;
    transition: opacity .18s ease;
}
.aimm-expand.aimm-open {
    display: grid;
}
.aimm-expand a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    font-size: 13px !important;
    color: #333 !important;
    text-decoration: none !important;
    white-space: nowrap;
    line-height: 1.4;
    border-radius: 6px;
    transition: color .2s ease, background-color .2s ease;
}
.aimm-expand a span { font-weight: bold; flex-shrink: 0; }
.aimm-expand a:hover {  background: var(--aimm-hover-bg, #eaf7fb); }

/* Guarantee the containing block for .megamenu-template's centering (left:50% +
   translateX(-50%), below) is always THIS specific <li> — not whatever ancestor
   the parent TheGem theme happens to make "positioned" in a given version. Two
   otherwise-identical sites running different TheGem versions (confirmed: v6.8.3
   vs v6.8.6) can resolve that centering against a different, wider ancestor, so
   the whole panel visibly shifts sideways even with byte-identical plugin files.
   Forcing it here removes that dependency entirely. */
li.aimm-has-mega {
    position: relative !important;
}

/* ── Top-level tab: unify its hover/active color with the menu's cyan accent
   used throughout the panel (category rows, arrows, subcategory links) ──── */
li.aimm-has-mega:hover > a,
li.aimm-has-mega.current-menu-item > a,
li.aimm-has-mega.current-menu-ancestor > a {
    
    transition: color .2s ease;
}

/* Position the megamenu-template with JS-measured coordinates (see
   "TheGem-native template panels" in megamenu.js) instead of CSS
   left:50%/translateX(-50%) centering. That approach depends on this
   <li> (or an ancestor) being a real containing block — but the console
   check `li.getBoundingClientRect()` returning all-zero on the live site
   shows this <li> generates no box of its own (e.g. display:contents in
   TheGem's flex nav layout), which silently breaks percentage-based
   centering against it. position:fixed + JS-computed left/top sidesteps
   that entirely, regardless of what box model the theme uses here. */
/* left/top read from custom properties (set in JS, never the `left`/`top`
   properties directly) — TheGem's own menu.js also binds a mouseenter handler
   to this same <li> that does a plain `element.style.left = '0px'`, which
   unconditionally overwrites any prior inline value (including one we set
   with !important — a plain inline set simply replaces the whole inline
   declaration, value AND importance, whichever script's handler happens to
   run last). Routing through a custom property that only we ever touch,
   consumed by a !important stylesheet rule, can't be raced that way: a
   !important stylesheet declaration always beats their plain inline `left`,
   no matter which handler runs last. */
.megamenu-template:has(.aimm-wrap) {
    width: auto !important;
    max-width: 1400px !important;
    position: fixed !important;
    left: var(--aimm-left, 0px) !important;
    top: var(--aimm-top, 0px) !important;
    z-index: 99999 !important;
    border-bottom: 4px solid var(--aimm-accent, #e91e8c) !important;
    overflow: visible !important;
}

/* Per-category nudge, by class instead of JS. .aimm-wrap carries
   "aimm-wrap-{category-slug}" (see aidigital-megamenu.php) so a specific
   category's panel can be targeted here with :has() — same trick already
   used above — and shifted with transform. transform doesn't touch the
   left/top custom properties JS sets, or the width/centering math, so it's
   a safe, simple, plain-CSS addition: change the pixel value below to taste,
   or copy the rule with a different category slug to nudge a different menu.
   To find a category's slug, check its .aimm-wrap class in DevTools. */
.megamenu-template:has(.aimm-wrap-printers-machines) {
    transform: translateX(270px) !important;
}

/* Keeping the panel on-screen for menu items near the left/right edge of the
   nav (e.g. "Printers & Machines", "Spare Parts") is handled dynamically in
   megamenu.js instead of hardcoded per-menu-item-ID pixel offsets here — see
   the "TheGem-native template panels" block there for why. */

/* Yellow rounded pointer at the top of the mega menu (covers theme's white one) */
.megamenu-template:has(.aimm-wrap)::after {
    content: "";
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 17px;
    background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='17'%3E%3Cpolygon%20points='16,3%2029,16%203,16'%20fill='%23ffffff'%20stroke='%23ffffff'%20stroke-width='4'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center bottom;
    z-index: 100002;
    pointer-events: none;
}
/* This pointer is centered on the PANEL's own box by default, so it moved
   right along with the translateX(270px) shift above — landing over "Spare
   Parts" instead of pointing back at "Printers & Machines". Pin it to the
   panel's left corner instead, same slug-based :has() targeting as the
   shift itself. Adjust the px value to taste if it still doesn't line up
   with the trigger after changing the shift amount above. */
.megamenu-template:has(.aimm-wrap-printers-machines)::after {
    left: 20px !important;
    transform: translateX(0) !important;
}

@media (max-width: 991px) { .aimm-standalone { display: none !important; } }

/* Mobile fallback submenu (see aidigital-megamenu.php) — a real, plain
   <ul class="sub-menu"> the theme's own mobile accordion toggle can expand,
   left otherwise unstyled so it inherits the theme's normal submenu look
   (same as any other menu item's dropdown, e.g. "About") rather than any of
   our desktop flyout/panel styling above. Hidden entirely above the mobile
   breakpoint so it can't show up or interfere on desktop. */
@media (min-width: 992px) {
    .aimm-mobile-submenu { display: none !important; }
}

/* Nested subcategory list (e.g. under "UV Printers") gets its own background
   so it reads as visually distinct from the top-level category list above it.
   TheGem's own menu-overlay.css has a higher-specificity !important rule —
   `li.megamenu-first-element ul { background: none !important; }` — that
   beats a plain `.aimm-mobile-submenu .sub-menu` rule regardless of load
   order (both !important, so it comes down to specificity, not source
   order). Extending their exact selector with our own class guarantees ours
   is a strict superset — always more specific, never a coin-flip on order. */
.thegem-te-menu-mobile__overlay.mobile-view .nav-menu li.megamenu-first-element ul.aimm-mobile-submenu .sub-menu,
.thegem-te-menu__overlay.desktop-view .nav-menu li.megamenu-first-element ul.aimm-mobile-submenu .sub-menu {
    background: #dcdcdc !important;
}
.aimm-mobile-submenu .sub-menu > li > a {
    color: #444 !important;
}

/* Top-level category list itself (e.g. everything under "Printers & Machines")
   gets the same background treatment — same specificity-override reasoning
   as above, since this <ul> IS the direct `li.megamenu-first-element ul`
   their rule targets. */
.thegem-te-menu-mobile__overlay.mobile-view .nav-menu li.megamenu-first-element ul.aimm-mobile-submenu,
.thegem-te-menu__overlay.desktop-view .nav-menu li.megamenu-first-element ul.aimm-mobile-submenu {
    background: #f5f5f6 !important;
    margin-top: 0 !important;
}

/* The visual "gap" between rows isn't margin/padding (there is none, rows sit
   flush against each other) — it's the theme's own 48px line-height on each
   link, tall relative to the 20px text. Shrinking it tightens the whole list. */
.aimm-mobile-submenu li > a {
    line-height: 42px !important;
    font-size: 17px !important;
}