/* ===== MEGA MENU — Standalone Override Styles ===== */
/* Load AFTER style.css — overrides old nav/mega rules */

/* === NAV CONTAINER === */
.main-nav{
    display:flex;
    align-items:center;
    flex:1;
    justify-content:center;
}

/* === HAMBURGER (hidden on desktop) === */
.nav-toggle{
    display:none;
    flex-direction:column;
    gap:5px;
    background:none;
    border:none;
    cursor:pointer;
    padding:8px;
    z-index:10001;
}
.nav-toggle span{
    display:block;
    width:24px;
    height:2px;
    background:#0B2D5C;
    border-radius:2px;
    transition:.3s;
}
.nav-toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.nav-toggle.active span:nth-child(2){opacity:0}
.nav-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* === NAV MENU LIST === */
.nav-menu{
    display:flex;
    align-items:center;
    gap:0;
    list-style:none;
    margin:0;
    padding:0;
}
.nav-menu>li{position:relative}
.nav-menu>li>a{
    display:block;
    padding:10px 18px;
    color:#0B2D5C;
    font-size:14px;
    font-weight:600;
    text-decoration:none;
    transition:color .2s;
}
.nav-menu>li>a:hover,
.nav-menu>li:hover>a{color:#F28C28}

/* === MEGA MENU DROPDOWN === */
.mega-menu{
    display:none;
    position:absolute;
    top:calc(100% + 8px);
    left:50%;
    transform:translateX(-50%);
    width:720px;
    max-width:95vw;
    background:#fff;
    border-radius:14px;
    padding:20px;
    box-shadow:0 20px 50px rgba(0,0,0,.15);
    z-index:9998;
    pointer-events:none;
    opacity:0;
    transition:opacity .22s ease, transform .22s ease;
    transform:translateX(-50%) translateY(8px);
}
.has-dropdown:hover>.mega-menu{
    display:block;
    pointer-events:auto;
    opacity:1;
    transform:translateX(-50%) translateY(0);
    animation:megaSlideDown .22s ease forwards;
}
@keyframes megaSlideDown{
    from{opacity:0;transform:translateX(-50%) translateY(8px)}
    to{opacity:1;transform:translateX(-50%) translateY(0)}
}

/* === 3-COLUMN GRID === */
.mega-menu-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

/* === WHITE PREMIUM CARD === */
.mega-card{
    position:relative;
    background:#fff;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    overflow:hidden;
    transition:transform .3s ease, box-shadow .3s ease;
}
.mega-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 45px rgba(0,0,0,.15);
}

/* === CARD IMAGE === */
.mega-card-img{
    width:100%;
    height:100px;
    overflow:hidden;
    margin-bottom:0;
}
.mega-card-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .35s ease;
}
.mega-card:hover .mega-card-img img{
    transform:scale(1.05);
}

/* === CARD BODY === */
.mega-card-body{
    padding:14px 16px 18px;
}

/* === CATEGORY TITLE === */
.mega-card-title{
    display:block;
    font-size:18px;
    font-weight:800;
    color:#0B2D5C;
    text-decoration:none;
    margin-bottom:8px;
    transition:color .2s;
}
.mega-card-title:hover{color:#F28C28}

/* === SUBCATEGORY LIST === */
.mega-sub-list{
    list-style:none;
    margin:0;
    padding:0 0 12px;
}
.mega-sub-list li{margin:0}
.mega-sub-list li a{
    display:block;
    padding:2px 0;
    color:#475569;
    font-size:14px;
    font-weight:400;
    text-decoration:none;
    line-height:1.6;
    transition:color .25s, padding-left .25s;
}
.mega-sub-list li a:hover{
    color:#F28C28;
    padding-left:6px;
}

/* === VIEW ALL BUTTON === */
.mega-view-all{
    display:inline-block;
    background:#F28C28;
    color:#fff;
    padding:8px 16px;
    border-radius:6px;
    font-size:13px;
    font-weight:700;
    text-decoration:none;
    transition:background .25s, transform .25s;
    margin-top:4px;
}
.mega-view-all:hover{
    background:#0B2D5C;
    transform:translateY(-2px);
}

/* === FOCUS STATES === */
.nav-menu a:focus{
    outline:2px solid #F28C28;
    outline-offset:2px;
    border-radius:4px;
}
.mega-card-title:focus,
.mega-sub-list a:focus,
.mega-view-all:focus{
    outline:2px solid #F28C28;
    outline-offset:2px;
}

/* === SIMPLE DROPDOWN (Brands, Knowledge Hub) === */
.dropdown-menu{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    min-width:220px;
    background:#fff;
    border-radius:12px;
    padding:8px 0;
    box-shadow:0 12px 40px rgba(0,0,0,.15);
    z-index:9999;
    list-style:none;
    margin:0;
}
.has-dropdown:hover>.dropdown-menu{
    display:block;
    animation:megaFade .25s ease;
}
.dropdown-menu>li{position:relative;width:100%}
.dropdown-menu>li>a{
    display:block;
    padding:11px 20px;
    color:#0B2D5C;
    font-size:13px;
    font-weight:500;
    text-decoration:none;
    transition:all .2s;
}
.dropdown-menu>li>a:hover{
    background:#F5F7FB;
    color:#F28C28;
    padding-left:24px;
}
.dropdown-menu a:focus{
    outline:2px solid #F28C28;
    outline-offset:-2px;
    background:#F5F7FB;
}
@keyframes megaFade{
    from{opacity:0;transform:translateY(8px)}
    to{opacity:1;transform:translateY(0)}
}

/* === TABLET (769–1024px) === */
@media(min-width:769px) and (max-width:1024px){
    .mega-menu{width:560px;padding:16px}
    .mega-menu-grid{grid-template-columns:repeat(2,1fr);gap:14px}
    .mega-card-img{height:80px}
}

/* === MOBILE (max 968px) === */
@media(max-width:968px){
    .nav-toggle{display:flex}

    .nav-menu{
        display:none;
        position:fixed;
        top:0;left:0;right:0;bottom:0;
        flex-direction:column;
        background:#fff;
        padding:80px 0 30px;
        overflow-y:auto;
        z-index:10000;
        gap:0;
    }
    .nav-menu.open{display:flex}
    .nav-menu>li>a{
        padding:14px 24px;
        font-size:16px;
        border-bottom:1px solid #F0F0F0;
    }

    /* Mega menu accordion on mobile */
    .mega-menu{
        position:static;
        width:100%;
        max-width:100%;
        background:#f8fafc;
        padding:0;
        border-radius:0;
        box-shadow:none;
        transform:none;
        display:none;
        opacity:1;
        pointer-events:auto;
        animation:none;
    }
    .has-dropdown.open>.mega-menu{display:block}
    .mega-menu-grid{grid-template-columns:1fr;gap:0}

    .mega-card{
        border-bottom:1px solid #e2e8f0;
        border-radius:0;
        box-shadow:none;
        padding-bottom:0;
        margin-bottom:0;
    }
    .mega-card:last-child{border-bottom:none}
    .mega-card-img{height:90px;border-radius:0}
    .mega-card-body{padding:12px 16px}
    .mega-card-title{font-size:16px;cursor:pointer}

    .mega-sub-list{display:none}
    .mega-card.open .mega-sub-list{display:block}
    .mega-card-title::after{
        content:'+';
        float:right;
        font-size:20px;
        font-weight:300;
        color:#94a3b8;
    }
    .mega-card.open .mega-card-title::after{content:'\2212'}

    .mega-view-all{display:none}
    .mega-card.open .mega-view-all{display:inline-block}

    /* Simple dropdown accordion on mobile */
    .dropdown-menu{
        position:static;
        box-shadow:none;
        border-radius:0;
        background:#FAFBFD;
        padding:0;
        margin:0;
        display:none;
        animation:none;
    }
    .has-dropdown.open>.dropdown-menu{display:block}
    .dropdown-menu>li>a{
        padding:12px 32px;
        font-size:14px;
        border-bottom:1px solid #F0F0F0;
    }
    .nav-menu>li.has-dropdown:not(.mega-parent)>a::after{
        content:'+';
        float:right;
        font-size:20px;
        font-weight:300;
    }
    .nav-menu>li.has-dropdown:not(.mega-parent).open>a::after{
        content:'\2212';
    }

    /* Disable hover on mobile */
    .has-dropdown:hover>.mega-menu{display:none}
    .has-dropdown:hover>.dropdown-menu{display:none}
    .has-dropdown.open:hover>.mega-menu{display:block}
    .has-dropdown.open:hover>.dropdown-menu{display:block}
}

/* ===== TWO-PANEL MEGA MENU (mm-panel system) ===== */
.mm-panel{display:flex}
.mm-p1{display:flex;flex-direction:row;width:100%}
.mm-p1>.mm-cat{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 18px;
    font-size:15px;
    font-weight:700;
    color:#0B2D5C;
    text-decoration:none;
    border-bottom:1px solid #f0f0f0;
    transition:background .2s, color .2s;
    min-width:180px;
    white-space:nowrap;
}
.mm-p1>.mm-cat:first-child{border-radius:10px 0 0 0}
.mm-p1>.mm-cat:hover,.mm-p1>.mm-cat.mm-active{
    background:#F5F7FB;
    color:#F28C28;
}
.mm-arrow{font-size:20px;margin-left:8px;color:#94a3b8;transition:color .2s}
.mm-cat.mm-active .mm-arrow{color:#F28C28}
.mm-p2{
    flex:1;
    background:#F8FAFC;
    border-left:1px solid #f0f0f0;
    border-radius:0 10px 10px 0;
    padding:10px 0;
    min-width:240px;
    max-height:400px;
    overflow-y:auto;
}
.mm-sub{
    display:none;
    flex-direction:column;
    padding:6px 0;
}
.mm-sub.active{display:flex}
.mm-sub a{
    display:block;
    padding:8px 20px;
    font-size:14px;
    font-weight:400;
    color:#475569;
    text-decoration:none;
    transition:color .25s, padding-left .25s, background .2s;
    line-height:1.6;
}
.mm-sub a:hover{
    color:#F28C28;
    padding-left:26px;
    background:rgba(242,140,40,.06);
}

/* Mobile: mm-panel accordion */
@media(max-width:968px){
    .mm-panel{flex-direction:column}
    .mm-p1{flex-direction:column}
    .mm-p1>.mm-cat{
        border-bottom:1px solid #e2e8f0;
        min-width:auto;
        padding:12px 24px;
    }
    .mm-p1>.mm-cat:first-child{border-radius:0}
    .mm-p2{
        border-left:none;
        border-top:1px solid #e2e8f0;
        background:#f1f5f9;
        border-radius:0;
        max-height:none;
        padding:0;
        display:none;
    }
    .mm-cat.mm-active+.mm-p2,
    .mm-p2.active{display:block}
    .mm-sub{padding:0}
    .mm-sub a{padding:10px 36px}
}