/* =============================================================
   Mega Menu IA — Frontend CSS
   Class prefix: mmbia-
   Same valid HTML structure as hybrid v2:
     div.mmbia-nav-wrapper
       nav
         button.mmbia-nav__toggle
         ul.mmbia-nav__list
           li.mmbia-nav__item[.mmbia-has-mega][.is-open]
             button.mmbia-nav__link--has-panel  |  a.mmbia-nav__link
             div.mmbia-panel[aria-hidden]
               div.mmbia-panel__inner
               button.mmbia-panel__back
       div.mmbia-overlay                        ← outside <nav>
   ============================================================= */

:root {
    --mmbia-font:          inherit;
    --mmbia-header-h:      86px;
    --mmbia-nav-bg:        #ffffff;
    --mmbia-nav-text:      #1a1a1a;
    --mmbia-nav-hover:     var(--wp--preset--color--primary);
    --mmbia-nav-border:    rgba(0, 0, 0, 0.08);
    --mmbia-panel-bg:      #ffffff;
    --mmbia-panel-shadow:  0 12px 48px rgba(0,0,0,.11), 0 2px 8px rgba(0,0,0,.05);
    --mmbia-panel-border:  rgba(0, 0, 0, 0.08);
    --mmbia-panel-max-w:   1200px;
    --mmbia-panel-pad:     40px 32px;
    --mmbia-drawer-w:      320px;
    --mmbia-drawer-shadow: 4px 0 32px rgba(0,0,0,.13);
    --mmbia-muted:         #666666;
    --mmbia-link-radius:   5px;
    --mmbia-badge-bg:      #0055e5;
    --mmbia-badge-text:    #ffffff;
    --mmbia-ease:          cubic-bezier(0.4, 0, 0.2, 1);
    --mmbia-t-fast:        160ms;
    --mmbia-t-drawer:      300ms;
    --mmbia-z-overlay:     998;
    --mmbia-z-nav:         999;
    --mmbia-z-panel:       999;
}

.mmbia-nav-wrapper *,
.mmbia-nav-wrapper *::before,
.mmbia-nav-wrapper *::after { box-sizing: border-box; }

.mmbia-nav-wrapper { font-family: var(--mmbia-font); position: relative; }

@media screen {
    body.admin-bar {
        --mmbia-header-h: calc(64px + 52px);
    }

    @media ( max-width: 782px ) {
        body.admin-bar {
            --mmbia-header-h: calc(64px + 56px);
        }
    }
}

.mmbia-columns.is-use-case-menu,
.mmbia-columns.is-industry-menu {
  display: none;
}

.mmbia-columns.is-current-mega-menu {
  display: grid;
}

#use-case-menu.is-active,
#industry-menu.is-active{
border-right-color: var(--wp--preset--color--custom-legacy-lime)!important;
}

/* ================================================================
   HAMBURGER
   ================================================================ */
.mmbia-nav__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    padding: 0; border: none; background: none;
    cursor: pointer;
    color: var(--mmbia-nav-text);
    border-radius: 4px;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--mmbia-t-fast) var(--mmbia-ease);
}
.mmbia-nav__toggle:hover { color: var(--mmbia-nav-hover); }

.mmbia-hamburger {
    display: flex; flex-direction: column; gap: 5px;
    width: 22px; pointer-events: none;
}
.mmbia-hamburger span {
    display: block; height: 2px;
    background: currentColor; border-radius: 2px;
    transform-origin: center;
    transition:
        transform var(--mmbia-t-fast) var(--mmbia-ease),
        opacity   var(--mmbia-t-fast) var(--mmbia-ease),
        width     var(--mmbia-t-fast) var(--mmbia-ease);
}
.mmbia-hamburger span:nth-child(3) { width: 75%; }

.mmbia-nav-wrapper.is-drawer-open .mmbia-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mmbia-nav-wrapper.is-drawer-open .mmbia-hamburger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.mmbia-nav-wrapper.is-drawer-open .mmbia-hamburger span:nth-child(3) { width: 100%; transform: translateY(-7px) rotate(-45deg); }

/* ================================================================
   NAV LIST (mobile: off-screen drawer)
   ================================================================ */
.mmbia-nav__list {
    list-style: none; margin: 0; padding: 0;
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--mmbia-drawer-w); max-width: 100vw;
    height: 100dvh;
    background: var(--mmbia-nav-bg);
    box-shadow: var(--mmbia-drawer-shadow);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    z-index: var(--mmbia-z-nav);
    transform: translateX(-100%);
    transition: transform var(--mmbia-t-drawer) var(--mmbia-ease), visibility var(--mmbia-t-drawer);
    visibility: hidden;
    padding-top: calc(var(--mmbia-header-h) + 8px);
    padding-bottom: env(safe-area-inset-bottom, 24px);
}
.mmbia-nav-wrapper.is-drawer-open .mmbia-nav__list {
    transform: translateX(0); visibility: visible;
}

/* ================================================================
   OVERLAY — outside <nav>
   ================================================================ */
.mmbia-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    z-index: var(--mmbia-z-overlay);
    opacity: 0; pointer-events: none;
    transition: opacity var(--mmbia-t-fast) var(--mmbia-ease);
}
.mmbia-nav-wrapper.is-drawer-open .mmbia-overlay {
    opacity: 1; pointer-events: auto;
}

/* ================================================================
   ITEMS
   ================================================================ */
.mmbia-nav__item { border-bottom: 1px solid var(--mmbia-nav-border); }

/* ================================================================
   LINKS + PANEL TRIGGERS
   <a> for plain links, <button> for panel triggers
   ================================================================ */
.mmbia-nav__link,
.mmbia-nav__link--has-panel {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; width: 100%;
    padding: 14px 20px;
    background: none; border: none; border-radius: 0;
    color: var(--mmbia-nav-text);
    text-decoration: none;
    font-family: var(--mmbia-font); font-size: 1rem; font-weight: 500;
    line-height: 1.3; text-align: left;
    cursor: pointer;
    transition: color var(--mmbia-t-fast) var(--mmbia-ease);
}
.mmbia-nav__link:hover,
.mmbia-nav__link--has-panel:hover,
.mmbia-nav__item.is-open > .mmbia-nav__link--has-panel { color: var(--mmbia-nav-hover); }

/* Chevron */
.mmbia-chevron {
    flex-shrink: 0; display: inline-block;
    width: 20px; height: 20px; position: relative;
}
.mmbia-chevron::before,
.mmbia-chevron::after {
    content: ''; position: absolute; top: 50%;
    width: 10px; height: 1.5px;
    background: var(--wp--preset--color--primary); border-radius: 0px;
    transition: transform var(--mmbia-t-fast) var(--mmbia-ease);
}
.mmbia-chevron::before { left: 1px;  transform: translateY(-50%) rotate(-45deg); }
.mmbia-chevron::after  { left: 7px;  transform: translateY(-50%) rotate(45deg); }
.mmbia-nav__item.is-open > .mmbia-nav__link--has-panel .mmbia-chevron::before { transform: translateY(-50%) rotate(45deg); }
.mmbia-nav__item.is-open > .mmbia-nav__link--has-panel .mmbia-chevron::after  { transform: translateY(-50%) rotate(-45deg); }

/* ================================================================
   MEGA PANEL — mobile: accordion (no GSAP, pure CSS)
   Desktop: GSAP drives opacity/transform — CSS only provides initial state
   ================================================================ */
.mmbia-panel {
    /* Mobile: simple show/hide via grid trick — no GSAP needed */
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 260ms var(--mmbia-ease);
    background: #f6f6f6;
    border-top: 1px solid var(--mmbia-nav-border);
    overflow: hidden;
}
.mmbia-nav__item.is-open > .mmbia-panel {
    grid-template-rows: 1fr;
}

/*
 * Inner wrapper needed for grid-template-rows trick.
 * min-height:0 allows the row to collapse to zero.
 */
.mmbia-panel__inner-wrap {
    min-height: 0;
    overflow: hidden;
}

.mmbia-panel__inner { padding: 16px 20px 24px; }

/* Back button */
.mmbia-panel__back {
    display: flex; align-items: center; gap: 6px;
    width: 100%; padding: 10px 20px;
    background: none; border: none;
    border-bottom: 1px solid var(--mmbia-nav-border);
    color: var(--mmbia-nav-hover);
    font-family: var(--mmbia-font); font-size: .875rem; font-weight: 600;
    cursor: pointer; text-align: left;
}
.mmbia-back-arrow {
    display: inline-block; width: 16px; height: 16px;
    position: relative; flex-shrink: 0;
}
.mmbia-back-arrow::before,
.mmbia-back-arrow::after {
    content: ''; position: absolute; top: 50%; right: 1px;
    width: 7px; height: 1.5px;
    background: currentColor; border-radius: 1px;
}
.mmbia-back-arrow::before { transform: translateY(-3px) rotate(45deg);  transform-origin: right; }
.mmbia-back-arrow::after  { transform: translateY(2px)  rotate(-45deg); transform-origin: right; }

/* Alignment support inside mega panel inner container */
.mmbia-panel__inner {
    container-type: inline-size;
    position: relative;
}

.mmbia-panel__inner > .alignwide {
    width: min( var(--wp--style--global--wide-size, 1340px), 100% );
    margin-left: auto;
    margin-right: auto;
}

.mmbia-panel__inner > .alignfull {
    width: 100%;
    max-width: none;
    margin-left: calc( var(--mmbia-panel-pad-x, 32px) * -1 );
    padding-left: var(--mmbia-panel-pad-x, 32px);
    padding-right: var(--mmbia-panel-pad-x, 32px);
    width: calc( 100% + var(--mmbia-panel-pad-x, 32px) * 2 );
}

.mmbia-panel__inner > *:not(.alignwide):not(.alignfull) {
    max-width: var(--wp--style--global--content-size, 645px);
    margin-left: auto;
    margin-right: auto;
}

/* ================================================================
   DESKTOP OVERRIDES
   ================================================================ */
@media ( min-width: 960px ) {

    .mmbia-nav__toggle { display: none; }

    .mmbia-nav__list {
        position: static;
        width: auto; max-width: none; height: auto;
        background: transparent; box-shadow: none;
        overflow: visible; transform: none;
        transition: none; visibility: visible; padding: 0;
        display: flex; align-items: stretch; flex-wrap: nowrap;
    }

    .mmbia-overlay { display: none !important; }

    .mmbia-nav__item { border-bottom: none; position: static; }

    .mmbia-nav__link,
    .mmbia-nav__link--has-panel {
        padding: 8px 14px;
        font-size: .9375rem; white-space: nowrap; width: auto;
    }

    /*
     * Desktop panel: initial state for GSAP fromTo() to animate FROM.
     * GSAP drives the open/close — CSS only sets the hidden baseline.
     * clip-reveal preset needs overflow:hidden on the panel itself.
     */
    .mmbia-panel {
        display: block;          /* override grid trick — GSAP handles reveal */
        grid-template-rows: unset;
        overflow: hidden;        /* needed for clip-reveal preset */
        position: fixed;
        left: 0; right: 0;
        top: var(--mmbia-header-h);
        background: var(--mmbia-panel-bg);
        border-top: 1px solid var(--mmbia-panel-border);
        box-shadow: var(--mmbia-panel-shadow);
        z-index: var(--mmbia-z-panel);
        /* Initial hidden state — GSAP animates from here */
        opacity: 0;
        pointer-events: none;
        transform: translateY(-6px);
    }

    /* JS adds .is-open to <li> → enable pointer events while GSAP plays */
    .mmbia-nav__item.is-open > .mmbia-panel {
        pointer-events: auto;
    }

    /* :focus-within CSS-only fallback (no GSAP) */
    .mmbia-nav__item.mmbia-has-mega:focus-within > .mmbia-panel {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
        transition: opacity 180ms var(--mmbia-ease), transform 180ms var(--mmbia-ease);
    }

    .mmbia-panel__inner-wrap { min-height: unset; overflow: visible; }
    .mmbia-panel__inner { margin: 0 auto; padding: var(--mmbia-panel-pad); }
    .mmbia-panel__back  { display: none; }
}

/* ================================================================
   COLUMNS
   ================================================================ */
.mmbia-columns {
    display: grid;
    grid-template-columns: repeat(var(--mmbia-cols,3), 1fr);
    gap: var(--mmbia-gap, 32px);
}
.mmbia-columns--stack-mobile { grid-template-columns: 1fr; gap: 0; }
@media ( min-width: 960px ) {
    .mmbia-columns--stack-mobile {
        grid-template-columns: repeat(var(--mmbia-cols,3), 1fr);
        gap: var(--mmbia-gap, 32px);
    }
}
.mmbia-column {
    min-width: 0;
	width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--wp--style--block-gap, 0);
}

.mmbia-column {
    border-right: 1px solid var(--wp--preset--color--backgrop-2);
    height: 100%;
}

.mmbia-column__label {
    margin: 0 0 10px;
    font-size: .6875rem; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase;
    color: var(--mmbia-muted);
}
@media ( max-width: 959px ) {
    .mmbia-columns--stack-mobile .mmbia-column {
        padding: 12px 0; border-bottom: 1px solid var(--mmbia-nav-border);
    }
    .mmbia-columns--stack-mobile .mmbia-column:last-child { border-bottom: none; }
}

/* ================================================================
   LINK CARD
   ================================================================ */
.mmbia-link {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 10px; border-radius: var(--mmbia-link-radius);
    text-decoration: none; color: var(--mmbia-nav-text);
    transition: background var(--mmbia-t-fast) var(--mmbia-ease),
                color     var(--mmbia-t-fast) var(--mmbia-ease);
    margin-bottom: 2px;
}
.mmbia-link:last-child { margin-bottom: 0; }
a.mmbia-link:hover { background: rgba(0,85,229,.06); color: var(--mmbia-nav-hover); }

.mmbia-link__icon {
    flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px;
    color: var(--mmbia-muted); display: flex; align-items: center;
    transition: color var(--mmbia-t-fast) var(--mmbia-ease);
}
.mmbia-link__icon svg { width: 20px; height: 20px; }
a.mmbia-link:hover .mmbia-link__icon { color: var(--mmbia-nav-hover); }

.mmbia-link__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mmbia-link__label { display: flex; align-items: center; gap: 6px; font-size: .9375rem; font-weight: 500; line-height: 1.3; }
.mmbia-link__badge {
    display: inline-block; padding: 1px 6px;
    background: var(--mmbia-badge-bg); color: var(--mmbia-badge-text);
    font-size: .625rem; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
    border-radius: 100px; vertical-align: middle;
}
.mmbia-link__desc { font-size: .8125rem; color: var(--mmbia-muted); line-height: 1.45; }

/* ================================================================
   FOCUS
   ================================================================ */
.mmbia-nav__link:focus-visible,
.mmbia-nav__link--has-panel:focus-visible,
.mmbia-nav__toggle:focus-visible,
.mmbia-panel__back:focus-visible,
a.mmbia-link:focus-visible {
    outline: 2px solid var(--mmbia-nav-hover);
    outline-offset: 2px;
}

/* ================================================================
   UTILITY
   ================================================================ */
.mmbia-no-menu {
    padding: 8px 12px; border: 1px dashed #ccc;
    border-radius: 4px; font-size: .875rem; color: #666;
}