/* ===== MAKE NAVBAR BIGGER ON MOBILE ===== */
            @media (max-width: 768px) {

                /* Adjust navbar height and spacing */
                .navbar {
                    padding: 12px 16px !important;
                }

                /* Logo smaller but still prominent 
                .navbar-brand img {
                  max-height: 80px !important; 
                  width: auto; 
                }*/

                /* Hamburger menu sizing */
                .navbar-toggler {
                    width: 48px !important;
                    height: 38px !important;
                    border: none !important;
                }

                .navbar-toggler span {
                    background-color: #000;
                    display: block;
                    height: 3.5px;
                    margin: 7px 0;
                    border-radius: 3px;
                }

                /* Menu links bigger and easy to tap */
                .navbar-nav .nav-link {
                    font-size: 1.3rem !important;   /* comfortable mobile size */
                    font-weight: 600 !important;
                    padding: 14px 0 !important;
                    color: #000 !important;
                    text-transform: uppercase;
                    letter-spacing: 0.5px;
                }

                .navbar-nav .nav-link:hover {
                    color: #ef6c00 !important;
                }

                /* Side menu (when opened on small screens) */
                .side-menu {
                    padding-top: 90px !important;
                }

                .side-nav .nav-link {
                    font-size: 1.4rem !important;
                    font-weight: 600 !important;
                    padding: 14px 0 !important;
                    color: #fff !important;
                }

                .side-nav .nav-link:hover {
                    color: #ef6c00 !important;
                }

                .side-nav .nav-item {
                    margin-bottom: 10px;
                }
            }
  
/* Center the nav items nicely */
.navbar-nav.mx-lg-auto { text-align:center; }
/* Bigger search bar on mobile */
@media (max-width: 768px){
  /* let the search wrapper use full width inside the container */
  #xenav .position-relative.w-100{
    max-width: 100% !important;
  }

  /* make input taller and easier to tap */
  #siteSearchInput{
    font-size: 18px;
    padding: 14px 16px;
    border-radius: 14px;
  }

  /* optional: add a little spacing so it breathes */
  #xenav .d-flex.justify-content-center.mt-2.mb-2{
    padding-left: 6px;
    padding-right: 6px;
  }
}

/* Keep dropdown positioned under the input */
#siteSearchDropdown{
  max-height: 420px;
  overflow: auto;
}
#siteSearchDropdown.show{
  display:block; /* Bootstrap sometimes needs this depending on version */
}
#siteSearchDropdown .dropdown-item small { opacity:.75; }
#siteSearchDropdown .group-title { font-weight:700; padding:.35rem .75rem; opacity:.85; }
#siteSearchDropdown .divider { border-top:1px solid rgba(0,0,0,.08); margin:.25rem 0; }
/*.search-wrap{ max-width:520px; }*/
@media (max-width:768px){
  .search-wrap{ max-width:100% !important; }
}


/* MOBILE: stop the header from clipping the opened menu */
@media (max-width: 991.98px){

  header.site-header,
  header.site-header .container,
  header.site-header nav.navbar{
    overflow: visible !important;
  }

  header.site-header{
    position: relative !important;
    z-index: 999999 !important;
  }

  /* Make the collapse take space (push content down) instead of being clipped */
  #xenav{
    position: static !important;
    background: #fff !important;
    padding: 12px 18px !important;
    border-top: 1px solid #eee !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.12) !important;
  }

  #xenav.collapse.show{
    display: block !important;
    height: auto !important;
  }

  /* Your wrapper can break collapse height */
  #xenav > .w-100.d-flex{
    display: block !important;
  }

  #xenav .navbar-nav{
    display: block !important;
  }
}