/**
 * Workarena Mega Menu Styles
 *
 * Custom mega menu panel for "Products & Brands" menu item.
 * The panel is injected via JS as <ul class="sub-menu mega-menu mega-fullwidth workarena-products-mega">
 * inside the parent <li class="has-mega-menu has-fullwidth menu-item-13248">.
 *
 * Color palette:
 *   Navy:   #1f3a5f   (text)
 *   Sage:   #8aa79b   (accent / active)
 *   Warm:   #f7f6f4   (featured card bg)
 *   Red:    #b6402a   (badge)
 */

/* ==========================================================================
   1. Mega Menu Wrapper — Visibility, Position & Transitions
   ========================================================================== */

/* The injected <ul> — hidden by default */
.workarena-products-mega {
    /* Prevent SmartMenus/other JS from toggling display */
    display: block !important;

    /* Display & positioning. JS sets exact geometry via the
       --wa-panel-* CSS vars (computed against the element's real
       offsetParent — the containing block is some higher ancestor,
       not the <li>). The values below are only pre-JS fallbacks. */
    position: absolute !important;
    top: var(--wa-panel-top, 100%);
    left: var(--wa-panel-left, 0px);
    width: var(--wa-panel-width, 100vw);
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    z-index: 99999 !important;

    /* Hidden default */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;

    /* Transitions — delay on close matches DC design */
    transition:
        opacity    0.2s ease,
        visibility 0.2s ease,
        transform  0.22s ease;
    transition-delay: 0.18s;

    /* Panel styling (!important beats .main-navigation .sub-menu) */
    background: #ffffff !important;
    box-shadow: 0 24px 40px -18px rgba(31, 58, 95, 0.22) !important;
    /* No border-top: the site header already draws the separator line,
       a second one here reads as a double line. */
}

/* Elementor's nav widget forces `left: ...px !important` on any child
   <ul> of non-first menu items (.elementor-nav-menu--layout-horizontal
   .elementor-nav-menu > li:not(:first-child) > ul). Plain inline styles
   lose to that, so the left offset is declared here with a stronger
   selector; the value itself comes from JS via --wa-panel-left. */
nav.elementor-nav-menu--main li.menu-item-13248 > ul.workarena-products-mega {
    left: var(--wa-panel-left, 0px) !important;
    /* top: var(--wa-panel-top, 100%) !important; */
    top: 52px !important;
    width: var(--wa-panel-width, 100vw) !important;
}

/* Open state: hover on the parent <li> OR JS-added .workarena-mega-open */
.has-mega-menu.menu-item-13248:hover .workarena-products-mega,
.has-mega-menu.workarena-mega-open .workarena-products-mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition-delay: 0s;
}


/* ==========================================================================
   2. Active Link Styling (chevron + underline + color)
   The live header is an Elementor Pro Nav Menu widget
   (.elementor-element-178e2b07, pointer: underline + fade) — all rules
   below are written to win over Elementor's pointer/pointer-color CSS.
   ========================================================================== */

/* Top-level nav spacing per the DC reference: 40px between items.
   The Elementor widget spaces items via its own CSS var
   (--e-nav-menu-horizontal-menu-item-margin = 31px/2 on each side of
   every link) — override the var instead of adding li margins, which
   would double up. Desktop only: the widget is hidden on tablet/mobile. */
@media (min-width: 1025px) {
    .elementor-element-178e2b07 {
        --e-nav-menu-horizontal-menu-item-margin: 20px !important;
    }
}

/* Sage underline bar on hover/open, matching the DC reference. Replaces
   Elementor's pointer underline on this item only: Elementor animates
   the same ::after (bottom:0, height:3px, #6E9B95, opacity fade), so the
   visual props carry !important. --wa-bar-bottom is set by JS to place
   the bar 14px above the bottom of the nav row, as in the DC design. */
nav.elementor-nav-menu--main li.menu-item-13248 > a.elementor-item::after,
.has-mega-menu.menu-item-13248 > a::after {
    content: "" !important;
    position: absolute !important;
    left: 0px !important;
    right: 0px !important;
    top: auto !important;
    /* bottom: var(--wa-bar-bottom, 0px) !important; */
    width: auto !important;
    height: 1px !important;
    margin: 0 !important;
    font-size: 0 !important;
    background-color: #8aa79b !important;
    border: none !important;
    border-radius: 2px;
    opacity: 1 !important;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.22s ease !important;
}

nav.elementor-nav-menu--main li.menu-item-13248:hover > a.elementor-item::after,
nav.elementor-nav-menu--main li.menu-item-13248.workarena-mega-open > a.elementor-item::after,
.has-mega-menu.menu-item-13248:hover > a::after,
.has-mega-menu.workarena-mega-open > a::after {
    transform: scaleX(1) !important;
}

/* Link color change on open */
.has-mega-menu.menu-item-13248:hover > a,
.has-mega-menu.workarena-mega-open > a {
    color: #8aa79b !important;
}

/* Chevron — we inject our own (.workarena-sub-arrow, the DC up-caret
   svg) because SmartMenus only adds its .sub-arrow to items that still
   have a submenu at its init time (we remove ours earlier). Hide
   SmartMenus' arrow on this item to avoid doubles, rotate ours:
   down when closed, up when open — same as the DC reference. */
.has-mega-menu.menu-item-13248 > a .sub-arrow {
    display: none !important;
}

.workarena-sub-arrow {
    display: inline-flex;
    margin-left: 8px;
    vertical-align: middle;
    transition: transform 0.22s ease;
    transform: rotate(180deg);
}

.has-mega-menu.menu-item-13248:hover .workarena-sub-arrow,
.has-mega-menu.workarena-mega-open .workarena-sub-arrow {
    transform: rotate(0deg);
}


/* ==========================================================================
   3. Mega Menu Panel Grid Layout
   ========================================================================== */

.workarena-mega-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.34fr) minmax(0, 0.42fr) minmax(0, 0.44fr);
    font-family: 'Poppins', Helvetica, Arial, sans-serif;
    color: #1f3a5f;
    -webkit-font-smoothing: antialiased;
    max-width: 100vw;
    overflow: hidden;
}

.workarena-mega-content {
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
}

/* ==========================================================================
   4. Links
   ========================================================================== */

.workarena-mega-link {
    display: block;
    font-size: 15px;
    font-weight: 400;
    color: #1f3a5f;
    text-decoration: none;
    line-height: 1.45;
    transition: color 0.18s ease;
}

.workarena-mega-link{
    padding:0 !important;
}
.workarena-mega-link:hover {
    color: #8aa79b;
}

/* ==========================================================================
   5. Column 1: Product Categories
   ========================================================================== */

.workarena-mega-col--categories {
    padding: 44px 48px 56px;
}

.workarena-mega-heading {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 34px;
    color: #1f3a5f;
}

/* 3-sub-column grid */
.workarena-mega-cat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 40px;
}

/* Stack of category groups within one sub-column */
.workarena-mega-cat-stack {
    display: flex;
    flex-direction: column;
    gap: 34px;
}

/* Individual category group */
.workarena-mega-cat-group {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.workarena-mega-cat-title {
    font-size: 15px;
    font-weight: 600;
    color: #1f3a5f;
    margin-bottom: 3px;
}

.workarena-mega-standalone-link {
    font-size: 15px;
    font-weight: 600;
    color: #1f3a5f;
    text-decoration: none;
    transition: color 0.18s ease;
}

.workarena-mega-standalone-link:hover {
    color: #8aa79b;
}

/* ==========================================================================
   6. Column 2: Brands
   ========================================================================== */

.workarena-mega-col--brands {
    padding: 44px 40px 56px;
    border-left: 1px solid rgba(31, 58, 95, 0.1);
}

.workarena-mega-brand-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.workarena-mega-brand-list .workarena-mega-link {
    font-size: 15px;
}

/* ==========================================================================
   7. Column 3: Featured Product
   ========================================================================== */

.workarena-mega-col--featured {
    display: block !important; /* !important: header nav CSS turns links into flex rows */
    padding: 44px 40px 56px;
    background: #f7f6f4;
    border-left: 1px solid rgba(31, 58, 95, 0.1);
    text-decoration: none;
    color: #1f3a5f;
}

.workarena-mega-col--featured:hover {
    color: #1f3a5f;
}

.workarena-mega-featured-image {
    position: relative;
    background: #ffffff;
    border-radius: 4px;
    overflow: hidden;
}

.workarena-mega-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: inline-block;
    background: #b6402a;
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 9px;
    border-radius: 3px;
    line-height: 1.4;
}

.workarena-mega-featured-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 280px;
    background: #f0efed;
    color: #999;
    font-size: 14px;
}

/* Real product image (pulled dynamically from the featured product) —
   same footprint as the placeholder, contained like the DC design. */
.workarena-mega-featured-image img.workarena-mega-featured-img {
    display: block !important;
    width: 100% !important;
    height: 280px !important;
    /* object-fit: contain !important; */
}

.workarena-mega-featured-title {
    margin-top: 18px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.45;
}

.workarena-mega-featured-subtitle {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.45;
    white-space: break-spaces;
    word-wrap: break-word;
}

/* ==========================================================================
   8. Responsive
   ========================================================================== */

@media (max-width: 1024px) {
    .workarena-mega-panel {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    }

    .workarena-mega-col--featured {
        display: none;
    }

    .workarena-mega-cat-grid {
        gap: 0 24px;
    }

    .workarena-mega-col--categories {
        padding: 32px 32px 40px;
    }

    .workarena-mega-col--brands {
        padding: 32px 24px 40px;
    }
}

@media (max-width: 768px) {
    /* On mobile, hide custom mega menu — handheld menu takes over */
    .workarena-products-mega {
        display: none !important;
    }
}