/* Header logo alignment fix */
html body header #main-header .header-logo {
    padding-left: 0 !important;
}

/* Main menu hover and active styles */

/* Remove any background on hover and change underline to red */
html body header #category-menu nav ul li a:hover {
    color: #000000 !important;
    background-color: transparent !important;
}

html body header #category-menu nav ul li a:hover:after {
    content: "";
    width: 100%;
    height: 2px;
    background-color: #c71444;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

/* Active menu item - red text only, no underline */
html body header #category-menu nav ul li.active a,
html body header #category-menu nav ul li.current a,
html body header #category-menu nav ul li.active-menu-item a,
html body header #category-menu nav ul li.menu-item-active a {
    color: #c71444 !important;
}

/* Menu items with dropdowns need relative positioning */
html body header #category-menu nav ul li {
    position: relative;
}

/* Add arrow icon to menu items with dropdowns */
html body header #category-menu nav ul li.with-children > a:after,
html body header #category-menu nav ul li:has(.category-dropdown-submenu) > a:after {
    content: "\f107";
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    margin-left: 5px;
    font-size: 12px;
}

/* Override the hover underline for the arrow */
html body header #category-menu nav ul li:has(.category-dropdown-submenu) > a:hover:after {
    content: "\f107";
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    margin-left: 5px;
    font-size: 12px;
    width: auto;
    height: auto;
    background-color: transparent;
    position: static;
}

/* Dropdown submenu styles */
html body header #category-menu .category-dropdown-submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    z-index: 1000;
    padding: 10px 0;
    white-space: nowrap;
}

/* Show dropdown on hover - multiple selectors for compatibility */
html body header #category-menu nav ul li.with-children:hover .category-dropdown-submenu,
html body header #category-menu nav ul li:hover > .category-dropdown-submenu {
    display: block;
}

html body header #category-menu .category-dropdown-submenu ul.dropdown-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

html body header #category-menu .category-dropdown-submenu ul.dropdown-menu-list li {
    padding: 0;
    margin: 0;
    display: block !important;
    height: auto !important;
    width: 100%;
    flex-direction: row;
    flex: none;
}

html body header #category-menu .category-dropdown-submenu ul.dropdown-menu-list li a {
    display: block;
    padding: 8px 20px;
    color: #304c89;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    transition: background-color 0.2s ease;
    position: relative;
}

html body header #category-menu .category-dropdown-submenu ul.dropdown-menu-list li a:hover {
    background-color: #f5f5f5;
    color: #000000 !important;
}

html body header #category-menu .category-dropdown-submenu ul.dropdown-menu-list li a:hover:after {
    display: none;
}

/* Hide category menu on mobile - it's available in the mobile offcanvas menu */
@media (max-width: 1199.98px) {
    html body header #category-menu {
        display: none !important;
    }

    /* Fix mobile header heights now that category menu is hidden (saves 55px) */
    html body.header-sticky header {
        height: 145px !important; /* Was 200px, minus 55px category menu */
    }

    html body.header-sticky #master-scroll-wrapper {
        margin-top: 145px !important; /* Match header height to prevent gap */
    }
}