/* 1. Kill the legacy clearfix on the main navbar container */
.x-navbar .x-container.max.width::before,
.x-navbar .x-container.max.width::after {
  display: none !important;
}

/* 2. Turn the main navbar container into a Flex-Wrap Grid */
.x-navbar .x-container.max.width {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important; /* Starts items on the left */
}

/* 3. The Logo - Top Left */
.x-navbar .x-brand {
  flex: 0 0 auto !important; /* Prevents squishing */
  margin: 20px 0 !important; /* Gives top/bottom breathing room */
}

/* 4. The Search Bar - Top Right */
.deltrex-header-search-wrapper {
  flex: 1 1 auto !important;
  margin-left: auto !important; /* This automatically pushes it all the way to the right! */
  margin-top: 20px !important;
  margin-bottom: 20px !important;
  margin-left: 2rem !important;
}
.deltrex-header-search-wrapper input[type=search],
.deltrex-header-search-wrapper input[type=text].search-field,
.deltrex-header-search-wrapper .search-query {
  border-radius: 20px !important;
  padding: 10px 20px 10px 45px !important;
  border: 1px solid #cccccc !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  margin-bottom: 0 !important;
}

/* 5. The Desktop Navigation - Force to Row 2 */
.x-nav-wrap.desktop {
  flex: 1 1 100% !important; /* 100% width forces it to drop below the logo/search */
  display: flex !important;
  justify-content: center !important; /* Centers your menu links */
}

/* 6. Mobile Responsive Adjustments */
@media (max-width: 979px) { /* X Theme's default mobile breakpoint */
  .x-navbar .x-brand {
    margin-left: auto !important;
    margin-right: auto !important; /* Centers logo on mobile */
  }
  .deltrex-header-search-wrapper {
    margin-left: 0 !important;
    flex: 1 1 100% !important; /* Full width search on mobile */
    max-width: 100% !important;
    order: 3; /* Pushes search bar below the mobile hamburger menu if needed */
  }
}
/* 5. The Desktop Navigation - Force to Row 2 & Spread Evenly */
.x-nav-wrap.desktop {
  flex: 1 1 100% !important; /* Still forces the navigation to the bottom row */
  display: block !important; /* Resets this so the UL can take over flex duties */
  margin-bottom: 50px !important;
}

/* Target the actual list to spread the links edge-to-edge */
.x-nav-wrap.desktop .x-nav {
  display: flex !important;
  flex-direction: row !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  /* This is the magic property that distributes them evenly from left to right */
  justify-content: space-between !important;
}

/* Ensure the individual list items don't stretch weirdly */
.x-nav-wrap.desktop .x-nav > li {
  flex: 0 1 auto;
}

/* 6. Mobile Responsive Adjustments */
@media (max-width: 979px) { /* X Theme's default mobile breakpoint */
  /* Kill the desktop nav so it doesn't double up */
  .x-nav-wrap.desktop {
    display: none !important;
  }
  /* Make sure the mobile hamburger button displays correctly */
  .x-btn-navbar {
    display: block !important;
    margin: 20px 0 20px auto !important; /* Pushes it to the right */
  }
  /* Center the logo */
  .x-navbar .x-brand {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Force the search bar to the bottom row, full width */
  .deltrex-header-search-wrapper {
    flex: 1 1 100% !important;
    max-width: 98% !important;
    order: 3; /* Drops it below the logo and mobile button */
    margin: 0 auto !important;
  }
  .x-content, .x-text, .x-text-content {
    padding: 10px !important;
  }
}
/* 7. Mobile Menu Full-Width & Brand Styling */
.x-nav-wrap.mobile {
  /* Use Deltrex's dark crimson red for the background */
  background-color: #9e181e !important;
  width: 100% !important;
  margin-top: 15px !important;
  margin-bottom: 25px !important;
  overflow: hidden !important;
}

.x-nav-wrap.mobile .x-nav {
  margin: 0 !important;
  padding: 0 !important;
}

/* Force the list items to expand edge-to-edge */
.x-nav-wrap.mobile .x-nav > li {
  width: 100% !important;
  border: none !important; /* Kill X Theme's default box borders */
  margin: 0 !important;
}

/* Style the actual clickable links */
.x-nav-wrap.mobile .x-nav > li > a {
  display: block !important;
  width: 100% !important;
  padding: 16px 20px !important; /* Generous padding for touch targets */
  color: #ffffff !important; /* White text for contrast against red */
  background-color: transparent !important;
  text-align: left !important;
  font-size: 18px !important;
  border: none !important;
  /* Adds a subtle semi-transparent divider between items */
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

/* Remove the divider line on the final item for a clean finish */
.x-nav-wrap.mobile .x-nav > li:last-child > a {
  border-bottom: none !important;
}

/* Hide X Theme's default dropdown arrows to perfectly match your clean sample */
.x-nav-wrap.mobile .x-nav > li > a > span > i {
  display: none !important;
}

.x-btn-navbar {
  /* Container Styling */
  background-color: #9e181e !important;
  width: 55px !important;
  height: 55px !important;
  border-radius: 2px !important;
  margin-right: 25px !important; /* Pulls it away from the right edge */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  padding: 0 !important;
  /* Smooth hover state */
}
.x-btn-navbar:hover, .x-btn-navbar:focus {
  background-color: rgb(122.5802197802, 18.6197802198, 23.2747252747) !important;
  box-shadow: none !important;
  outline: 0 !important;
}
.x-btn-navbar {
  /* Hijack the <i> tag to become our middle line */
}
.x-btn-navbar i.x-icon-bars {
  display: block !important;
  width: 26px !important;
  height: 3px !important;
  background-color: #ffffff !important;
  position: relative !important;
  transition: all 200ms cubic-bezier(0.7, 0, 0, 0.7) !important;
  /* Top Line (Overrides the default FontAwesome icon!) */
}
.x-btn-navbar i.x-icon-bars::before {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  width: 26px !important;
  height: 3px !important;
  background-color: #ffffff !important;
  top: -8px !important;
  left: 0 !important;
  transition: all 200ms cubic-bezier(0.7, 0, 0, 0.7) !important;
}
.x-btn-navbar i.x-icon-bars {
  /* Bottom Line */
}
.x-btn-navbar i.x-icon-bars::after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  width: 26px !important;
  height: 3px !important;
  background-color: #ffffff !important;
  bottom: -8px !important;
  left: 0 !important;
  transition: all 200ms cubic-bezier(0.7, 0, 0, 0.7) !important;
}

/* Animation State: When the menu is OPEN (not collapsed) */
.x-btn-navbar:not(.collapsed) i.x-icon-bars {
  /* Hide the middle line */
  background-color: transparent !important;
  /* Animate Top Line to \ */
}
.x-btn-navbar:not(.collapsed) i.x-icon-bars::before {
  top: 0 !important;
  transform: rotate(45deg) !important;
}
.x-btn-navbar:not(.collapsed) i.x-icon-bars {
  /* Animate Bottom Line to / */
}
.x-btn-navbar:not(.collapsed) i.x-icon-bars::after {
  bottom: 0 !important;
  transform: rotate(-45deg) !important;
}

/* Hide the mobile hamburger button on desktop screens */
@media (min-width: 980px) {
  .x-btn-navbar {
    display: none !important;
  }
}

/*# sourceMappingURL=style.css.map */