/* ============================================
   Mega Menu — Desktop
   ============================================ */

.mega-menu-dropdown {
    display: none;
    position: absolute;
    background: #fff;
    width: 800px;
    padding: 0;
    z-index: 1000;
}

.mega-menu-content {
    padding: 20px;
}

/* Desktop hover — pure CSS, no JS interference */
.has-mega-menu:hover .mega-menu-dropdown {
    display: block;
}

/* Subcategories grid */
.mega-subcategories {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.mega-subcategory {
    flex: 1;
    min-width: 200px;
}

.mega-subcategory-header {
    font-weight: bold;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mega-subcategory-header a {
    color: #333;
    text-decoration: none;
}

.mega-subcategory-header a:hover {
    color: #007cba;
}

/* Products list */
.mega-products {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
}

.mega-products li {
    margin-bottom: 5px;
}

.mega-products a {
    color: #666;
    text-decoration: none;
    font-size: 14px;
    display: block;
    padding: 3px 0;
}

.mega-products a:hover {
    color: #f00;
}

/* Flat (no-subcategory) product list */
.mega-products-flat {
    columns: 3;
    column-gap: 20px;
}

/* Read more */
.read-more a {
    color: #007cba;
    text-decoration: none;
    font-weight: bold;
    font-size: 13px;
}

.read-more a:hover {
    text-decoration: underline;
}


/* ============================================
   Menu item header (link + toggle side by side)
   ============================================ */

.menu-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/* ============================================
   Toggle buttons
   ============================================ */

.menu-toggle,
.subcat-toggle {
    background: none;
    border: none;
    font-size: 18px;
    padding: 10px;
    cursor: pointer;
    color: inherit;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-toggle:hover,
.subcat-toggle:hover {
    opacity: 0.7;
}

.toggle-icon { display: inline-block; }

.menu-toggle .minus,
.subcat-toggle .minus { display: none; }

.menu-toggle[aria-expanded="true"] .plus,
.subcat-toggle[aria-expanded="true"] .plus { display: none; }

.menu-toggle[aria-expanded="true"] .minus,
.subcat-toggle[aria-expanded="true"] .minus { display: inline-block; }


/* ============================================
   Desktop — hide mobile-only controls
   ============================================ */

@media (min-width: 769px) {
    .menu-toggle,
    .subcat-toggle { display: none; }

    .menu-item-header { display: block; }
}


/* ============================================
   Tablet
   ============================================ */

@media (max-width: 1024px) and (min-width: 769px) {
    .mega-menu-dropdown { width: 600px; }
    .mega-subcategory { min-width: 150px; }
    .mega-products-flat { columns: 2; }
}


/* ============================================
   Mobile
   ============================================ */

@media (max-width: 768px) {

    /* Disable CSS hover on mobile */
    .has-mega-menu:hover .mega-menu-dropdown {
        display: none;
    }

    .mega-menu-dropdown {
        position: static;
        width: 100%;
        background: #f9f9f9;
        border: none;
        box-shadow: none;
        margin-top: 5px;
        display: none; /* JS adds .open to show */
    }

    .mega-menu-dropdown.open {
        display: block;
    }

    .mega-menu-content {
        padding: 10px;
    }

    /* Stack subcategories vertically */
    .mega-subcategories {
        flex-direction: column;
        gap: 10px;
    }

    .mega-subcategory {
        border-bottom: 1px solid #e0e0e0;
        padding-bottom: 10px;
    }

    .mega-subcategory:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    /* Products hidden until subcategory toggled */
    .mega-products {
        display: none;
        margin-top: 5px;
    }

    .mega-products.open {
        display: block;
    }

    .mega-products-flat {
        columns: 1;
        display: none; /* also controlled by .open on mobile */
    }

    .mega-products-flat.open {
        display: block;
    }

    .mega-products li {
        padding: 4px 0 4px 10px;
    }

    .mega-products a {
        font-size: 14px;
    }

    .read-more a {
        display: inline-block;
        padding: 6px 12px;
        background: #007cba;
        color: #fff;
        border-radius: 3px;
        font-size: 13px;
        text-decoration: none;
    }

    .read-more a:hover {
        background: #005a87;
    }

    .has-mega-menu {
        border-bottom: 1px solid #ddd;
    }

    .has-mega-menu:last-child {
        border-bottom: none;
    }

    .menu-toggle.active {
        background-color: rgba(0, 124, 186, 0.1);
        border-radius: 3px;
    }
}


/* ============================================
   Hamburger button
   ============================================ */

.toggle-button {
    width: 30px;
    height: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
}

.toggle-button > div {
    height: 3px;
    background: #333;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.toggle-button.active > div:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.toggle-button.active > div:nth-child(2) { opacity: 0; }
.toggle-button.active > div:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

@media (min-width: 769px) {
    .toggle-button { display: none; }
}


/* ============================================
   Nav show/hide (mobile)
   ============================================ */

#site-navigation.main-navigation { display: none; }
#site-navigation.main-navigation.open { display: block; }

@media (min-width: 769px) {
    #site-navigation.main-navigation { display: block; }
}