/*
 * Mega-menu styling for the BuddyBoss header.
 *
 * Default BB behavior: each top-level item with children opens its own
 * floating dropdown on hover. We hide those and show a single unified
 * panel below the nav containing every parent's submenu as a column.
 *
 * The panel is built by /assets/js/bb-mega-menu.js into #primary-navbar.
 * Desktop only (≥800px) — mobile keeps BB's drawer.
 */

@media (min-width: 800px) {
    /* #primary-navbar becomes the positioning context for the panel. */
    .site-header #primary-navbar {
        position: relative;
    }

    /* Hide BB's per-item dropdowns — replaced by the unified panel. */
    .site-header #primary-navbar .primary-menu > .menu-item-has-children > .ab-submenu {
        display: none;
    }

    /* Active-item underline — BB puts a border-bottom on the full-height
       <a>, which leaves the underline glued to the bottom of the header
       (far below the text). Replace with a tight underline rendered as a
       ::after pseudo just below the text baseline. */
    .site-header #primary-navbar .primary-menu > li.current-menu-item > a,
    .site-header #primary-navbar .primary-menu > li.current_page_item > a,
    .site-header #primary-navbar .primary-menu > li.current-menu-parent > a,
    .site-header #primary-navbar .primary-menu > li.current-menu-ancestor > a {
        border-bottom-color: transparent !important;
        position: relative;
    }
    .site-header #primary-navbar .primary-menu > li.current-menu-item > a::after,
    .site-header #primary-navbar .primary-menu > li.current_page_item > a::after,
    .site-header #primary-navbar .primary-menu > li.current-menu-parent > a::after,
    .site-header #primary-navbar .primary-menu > li.current-menu-ancestor > a::after {
        content: '';
        position: absolute;
        left: 10px;
        right: 10px;
        top: calc(50% + 18px);
        height: 2px;
        background: var(--bb-header-links-hover, #FCB900);
        border-radius: 2px;
    }

    /* Unified mega panel — sits flush below the nav, full width.
       Hidden by default; shown when any part of the nav is hovered.

       Open is delayed (.bb-mega-panel:hover rule) so the menu ignores
       quick mouse passes; close is delayed slightly so moving from the
       nav row down into the panel doesn't auto-close. */
    #primary-navbar .bb-mega-panel {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        padding: 28px 32px;
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.06);
        border-radius: 0 0 14px 14px;
        box-shadow: 0 18px 40px -8px rgba(0, 0, 0, 0.15);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
        transition-delay: 120ms;   /* close grace period */
        z-index: 99;
    }

    /* Show the panel on hover of the nav OR the panel itself (so it stays
       open while the mouse is moving from nav to panel). The delay here
       fires when transitioning to visible, so quick left-right mouse moves
       across the nav (under ~350ms) never trigger the open. */
    #primary-navbar:hover .bb-mega-panel,
    #primary-navbar:focus-within .bb-mega-panel,
    #primary-navbar .bb-mega-panel:hover {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition-delay: 350ms;
    }

    /* Once the panel itself is being hovered, drop the open delay so the
       column-to-column move feels instant. */
    #primary-navbar .bb-mega-panel:hover {
        transition-delay: 0ms;
    }

    /* Column header — small mono caps matching the v3.10 mono style. */
    .bb-mega-col-h {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 11px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        font-weight: 800;
        color: var(--bb-headings-color, #1F242C);
        margin-bottom: 10px;
        padding-bottom: 8px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    /* Column list — flat list of links. */
    .bb-mega-col-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .bb-mega-col-list li {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .bb-mega-col-list a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        font-size: 14px;
        color: #1F242C;
        border-radius: 6px;
        text-decoration: none;
        line-height: 1.3;
        transition: background .15s, color .15s, padding-left .15s;
    }
    .bb-mega-col-list a:hover,
    .bb-mega-col-list a:focus {
        background: rgba(252, 185, 0, 0.12);
        color: #1F242C;
        padding-left: 14px;
    }
    .bb-mega-col-list a i,
    .bb-mega-col-list a svg {
        font-size: 16px;
        width: 16px;
        flex-shrink: 0;
        color: var(--bb-primary-color, #FCB900);
    }

    /* CTA column — Pricing + Free Trial as buttons. */
    .bb-mega-cta {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding-left: 16px;
        border-left: 1px solid rgba(0, 0, 0, 0.08);
    }
    .bb-mega-cta-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 12px 16px;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 12px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        font-weight: 800;
        border-radius: 8px;
        text-decoration: none;
        transition: background .15s, color .15s, border-color .15s, transform .15s;
    }
    .bb-mega-cta-ghost {
        background: transparent;
        color: #1F242C;
        border: 1.5px solid #1F242C;
    }
    .bb-mega-cta-ghost:hover {
        background: #1F242C;
        color: #FCB900;
    }
    .bb-mega-cta-gold {
        background: #FCB900;
        color: #1F242C;
        border: 1.5px solid #1F242C;
        box-shadow: 0 4px 12px -3px rgba(252, 185, 0, 0.35);
    }
    .bb-mega-cta-gold:hover {
        background: #1F242C;
        color: #FCB900;
        transform: translateY(-1px);
        box-shadow: 0 8px 18px -3px rgba(252, 185, 0, 0.5);
    }

    /* Columns row — actual auto-fit grid lives here, NOT on the panel,
       so the footer below stays a clean second row instead of getting
       swallowed as another auto-fit column slot. */
    .bb-mega-cols {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 8px 28px;
    }

    /* Footer row — sibling of .bb-mega-cols inside the flex-column panel.
       Right-aligns Sign In / Sign Up (or My Account / Sign Out). */
    .bb-mega-footer {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        margin-top: 18px;
        padding-top: 14px;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
    }
    .bb-mega-foot-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 9px 18px;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 11px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        font-weight: 800;
        border-radius: 8px;
        text-decoration: none;
        transition: background .15s, color .15s, border-color .15s;
    }
    .bb-mega-foot-ghost {
        background: transparent;
        color: #1F242C;
        border: 1.5px solid rgba(31, 36, 44, 0.25);
    }
    .bb-mega-foot-ghost:hover,
    .bb-mega-foot-ghost:focus {
        background: #1F242C;
        color: #FCB900;
        border-color: #1F242C;
    }
    .bb-mega-foot-solid {
        background: #1F242C;
        color: #FCB900;
        border: 1.5px solid #1F242C;
    }
    .bb-mega-foot-solid:hover,
    .bb-mega-foot-solid:focus {
        background: #FCB900;
        color: #1F242C;
        border-color: #1F242C;
    }
}