/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */

/* FIX: Search box styling - proper button positioning and alignment */

/* Override all search-widget input styling */
.search-widget form input[type=text],
#header .header-top .search-widget form input[type=text] {
  padding: 10px 45px 10px 10px !important;
  /* Reserve 45px space on right for button, adjust top/bottom as needed */
  min-height: 38px !important;
  box-sizing: border-box !important;
}

/* Override all search-widget button styling */
.search-widget form button[type=submit],
#header .header-top .search-widget form button[type=submit],
#header .header-nav .search-widget form button[type=submit] {
  position: absolute !important;
  background: none !important;
  border: none !important;
  bottom: 0 !important;
  right: 0 !important;
  top: 0 !important;
  /* Vertically and horizontally center the button using flexbox */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* Set explicit dimensions */
  width: 40px !important;
  height: 100% !important;
  /* Ensure button is clickable */
  cursor: pointer !important;
  padding: 0 !important;
  color: #7a7a7a !important;
  flex-shrink: 0 !important;
}

.search-widget form button[type=submit]:hover,
#header .header-top .search-widget form button[type=submit]:hover,
#header .header-nav .search-widget form button[type=submit]:hover {
  color: #2fb5d2 !important;
}

.search-widget form button[type=submit]:hover .search,
#header .header-top .search-widget form button[type=submit]:hover .search,
#header .header-nav .search-widget form button[type=submit]:hover .search {
  color: #2fb5d2 !important;
}

/* Fix material-icons inside search button */
.search-widget form button[type=submit] .material-icons,
#header .header-top .search-widget form button[type=submit] .material-icons,
#header .header-nav .search-widget form button[type=submit] .material-icons {
  margin: 0 !important;
  /* Prevent default material-icons margin */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
}

/* Hide search button text label */
.search-widget form button[type=submit] .hidden-xl-down,
#header .header-top .search-widget form button[type=submit] .hidden-xl-down,
#header .header-nav .search-widget form button[type=submit] .hidden-xl-down {
  display: none !important;
}

/* Ensure form has proper position context */
.search-widget form,
#header .header-top .search-widget form,
#header .header-nav .search-widget form {
  position: relative !important;
  display: inline-block !important;
}

/* ============================================================================
   Mega menu (bamegamenu) — fits 8 items on one line, matches production's bar height
   ============================================================================
   Two separate problems, fixed together:

   WIDTH — 8 top-level items were wrapping to a second line.
     a) The template emits an HTML comment block + newlines between every <li>,
        which renders as real whitespace between the inline-block items and eats
        width no padding value accounts for. Fixed by zeroing the parent's
        font-size (collapses that whitespace to 0) and restoring font-size on
        the items themselves.
     b) Bootstrap's .container width jumps 960px -> 1140px right at the
        992/1200px viewport boundary (see theme.css), so padding/font-size need
        enough margin to fit at the narrower tier, not just the wider one.

   HEIGHT — the bar rendered taller than production's. Measured directly via
     pixel analysis of matched screenshots (both 1920px wide, both starting at
     y=105): production's bar = 44px tall. Padding is zeroed and line-height is
     set explicitly to that measured value, rather than relying on padding+font
     math to land there indirectly.
   ============================================================================ */
#mega_menu_plus ul.mg-menu.menu-content {
  font-size: 0 !important;
  white-space: nowrap !important;
}
#mega_menu_plus ul.mg-menu.menu-content > li.mainmenu-parent {
  padding: 0 7px !important;
  border-right-width: 0 !important;
}
#mega_menu_plus ul.mg-menu.menu-content > li.mainmenu-parent > a {
  padding: 0 14px !important;
  font-size: 13px !important;
  line-height: 44px !important;
}
/* Safety net: if it's ever still a hair too wide at some viewport, scroll
   horizontally inside the bar rather than silently wrapping to a second line. */
#mega_menu_plus .mg-contener {
  overflow-x: auto !important;
}