/* ======================================= */
/* === STYLING FOR WE-MEGAMENU CLASSES === */
/* ======================================= */

/* --- 1. BASE MENU BAR STYLING --- */

/* Target the main menu container */
.navbar-we-mega-menu {
  /* Inherit background from the header/region, but setting it explicitly helps */
  background: #181d37 !important; /* This dark blue is a good match for your header banner */
  border: none;
  border-radius: 0;
  margin-bottom: 0;
  min-height: auto;
  /* NEW: Use flex for overall alignment of menu and search */
  display: flex;
  align-items: center;
}

/* Ensure the main UL is centered, like your old menu */
.we-mega-menu-ul.nav {
    display: flex;
    justify-content: center; /* Center align the main menu items! */
    width: 100%;
    padding: 0;
    margin: 0;
}


/* --- 2. MAIN MENU ITEM (LI) STYLING --- */

.we-mega-menu-li {
    list-style: none;
    position: relative;
    margin: 0;
    padding: 0;
}

/* --- 3. MAIN MENU LINK (A) STYLING --- */

.we-mega-menu-li > a {
    display: block;
    padding: 10px 15px;
    font-size: 14px;
    color: #fff !important; /* White text */
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease;
    /* Remove default background/border added by some themes/modules */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    line-height: 20px;
}

/* Add the subtle border only between menu items (if desired) */
.we-mega-menu-li:not(:last-child) > a {
     border-right: 1px solid rgba(255, 255, 255, 0.2);
}

/* --- 4. HOVER & ACTIVE STATES FOR MAIN MENU --- */

.we-mega-menu-li:hover > a,
/* *** FIX 1: REMOVE EXTRA BACKGROUND COLOR / BOX *** */
/* Target the 'active' classes on the LI and set the background to transparent.
   The specific blue box you see is likely from the LI itself. */
.we-mega-menu-li.active,
.we-mega-menu-li.active-trail {
    background: transparent !important; /* Forces the removal of the background on the parent LI */
}

/* Re-apply the hover/active color ONLY to the anchor tag (A) */
.we-mega-menu-li.active > a,
.we-mega-menu-li.active-trail > a {
    background: #004080 !important; /* Navy hover/active background on the link itself */
    color: #fff !important;
}


/* --- 5. DROPDOWN (SUBMENU) STYLING --- */

.we-mega-menu-submenu {
    background: #181d37 !important;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25) !important;
    padding: 5px 0;
    z-index: 1000;
}

.we-mega-menu-submenu-inner {
    padding: 0;
}

.we-mega-menu-submenu .subul {
    padding: 0;
    margin: 0;
}

/* --- 6. SUBMENU LINK STYLING --- */

.we-mega-menu-submenu .subul .we-mega-menu-li > a {
    display: block;
    padding: 10px 15px;
    font-size: 14px;
    color: #fff !important;
    text-decoration: none;
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: background 0.3s ease, color 0.3s ease;
}

.we-mega-menu-submenu .subul .we-mega-menu-li:last-child > a {
    border-bottom: none;
}

.we-mega-menu-submenu .subul .we-mega-menu-li > a:hover {
    background: #2a3f65 !important;
    color: #ffffff !important;
}


/* --- 7. DROPDOWN ARROW STYLING --- */

.we-mega-menu-li.dropdown-menu > a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.we-mega-menu-li.dropdown-menu > a::after {
    content: "▼";
    font-size: 10px;
    line-height: 1;
    color: #fff;
    transition: transform 0.3s ease;
}

.we-mega-menu-li.dropdown-menu:hover > a::after {
    transform: rotate(180deg);
}

/* --- 9. HIDE MOBILE TOGGLE (HAMBURGER) ICON ON DESKTOP --- */
/* *** FIX 2: HIDE MOBILE MENU ICON *** */
.region-we-mega-menu .navbar-toggle.collapsed {
    display: none; /* Hides the hamburger menu icon on desktop */
}


/* --- 10. SEARCH BOX ALIGNMENT (from previous step) --- */

.navbar-we-mega-menu .container-fluid {
    flex-grow: 1;
}

.navbar-we-mega-menu input[type="search"],
.navbar-we-mega-menu .form-control {
    height: 38px;
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid #ccc;
    box-shadow: none;
    font-size: 14px;
    width: 150px;
}

.navbar-we-mega-menu .form-submit,
.navbar-we-mega-menu button[type="submit"] {
    background-color: #ff9900;
    color: #fff;
    border: none;
    height: 38px;
    padding: 0 10px;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-left: -1px;
}

.navbar-we-mega-menu .form-submit:hover,
.navbar-we-mega-menu button[type="submit"]:hover {
    background-color: #e68a00;
}


/* --- 8. MOBILE/COLLAPSE STYLING --- */

@media (max-width: 768px) {
    /* *** REVEAL MOBILE MENU ICON ON MOBILE SCREENS *** */
    .region-we-mega-menu .navbar-toggle.collapsed {
        display: block; /* Shows the hamburger menu icon on mobile */
        /* You might need to add styling here to position it correctly on mobile */
    }

    .we-mega-menu-ul.nav {
        flex-direction: column;
        align-items: flex-start;
        display: block;
    }
    .we-mega-menu-li {
        width: 100%;
        border-right: none !important;
    }
    .we-mega-menu-li > a {
        border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    }
    .we-mega-menu-submenu {
        position: relative !important;
        width: 100% !important;
        box-shadow: none !important;
        padding: 0;
        border-radius: 0;
    }
    .we-mega-menu-submenu .subul .we-mega-menu-li > a {
        padding-left: 30px;
    }
}
a.we-mega-menu-li {
    padding: 5px !important;
}

div#block-mytheme-search-form-narrow {
    padding: 10px;
}