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

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

/* Target the main menu container */
/* College header text styling */


/* Responsive adjustments */
@media (max-width: 768px) {
  .region-header {
    display: flex;
    flex-direction: column;
    text-align: center;
}
  .college-name {
    font-size: 1.5rem;
    }
    .district-line {
    font-size: 1.3rem;
    }
  .college-affiliation {
    font-size: .7rem;
  }

}
@media (max-width: 991px) {
    .region-we-mega-menu {
        padding: 36px 15px 15px 15px !important;
    }
    .search-block-form form#search-block-form {
    display: flex;
    }
  }

.navbar-we-mega-menu .span12 {
  padding: 10px;
}
ul.clearfix.menu {
  padding-right: 14px;
}
.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;
}

.navbar-we-mega-menu .we-mega-menu-ul.nav-tabs {
  display: flex !important;
  justify-content: space-between;   /* Evenly distribute space between items */
  align-items: center;
  flex-wrap: nowrap;
  /* padding: 10 0px;                  */
  /* gap: 5px;                      */
}

/* Show submenu on hover */
.we-mega-menu-ul .we-mega-menu-li.dropdown-menu:hover > .we-mega-menu-submenu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Basic styling for dropdowns */
.we-mega-menu-submenu {
  background: #333; /* Dark background like your header */
  border: 1px solid #444;
  border-top: none;
  padding: 15px;
  min-width: 200px; /* Minimum width */
  box-shadow: 0 6px 12px rgba(0,0,0,0.3);
  z-index: 1000;
}

/* Style submenu links */
.we-mega-menu-submenu .we-mega-menu-subul > li > a {
  color: #fff !important;
  padding: 8px 15px;
  display: block;
}
.we-mega-menu-submenu .we-mega-menu-subul > li > a:hover {
  background: #0074bd; /* Blue accent */
  color: #fff !important;
}

/* If you want full-width dropdowns for some menus */
.we-mega-menu-submenu.full-width {
  width: 100vw !important;
  left: 50% !important;
  transform: translateX(-50%);
}
/* Make main menu items spread out and less compressed */
.we-mega-menu-ul.nav-tabs {
  display: flex;
  justify-content: space-around; /* Or space-between for edges */
  flex-wrap: nowrap; /* Keep in one row; use wrap if okay with multi-line on small screens */
  /* padding: 0 20px; */
}
.we-mega-menu-ul>.we-mega-menu-li>a,.we-mega-menu-ul>.we-mega-menu-li>span {
        font-size: 0.8rem !important;
        padding: 0 20px !important;
    }
@media (max-width: 768px) {
.we-mega-menu-li > a {
         border-bottom: 0px !important;
    }
}
  .we-mega-menu-ul .dropdown-menu>a:after,.we-mega-menu-ul .dropdown-menu>a:before,.we-mega-menu-ul .dropdown-menu>span:after,.we-mega-menu-ul .dropdown-menu>span:before {
        right: -0.0625rem !important;
    }
.we-mega-menu-ul>.we-mega-menu-li>a,.we-mega-menu-ul>.we-mega-menu-li>span {
    padding:0px;
}
div#block-mytheme-welcometogujaratartsandcommercecollegekathlal {
    margin-left: 18px;
}