/* ===== 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}
}