/* CICRM custom overrides — fixes header spacing bugs and general polish */

/* Fix: "Apply Now" button background bleeding into the Home nav link.
   The header-button needs guaranteed right-hand spacing regardless of
   viewport width, and its own stacking context so its ::after background
   shape never paints over adjacent nav text. */
.header-layout1 .header-left .header-button,
.header-layout2 .header-left .header-button {
  margin-right: 40px !important;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.header-layout1 .main-menu,
.header-layout2 .main-menu {
  position: relative;
  z-index: 1;
  margin-left: 8px;
}

.header-layout1 .main-menu > ul > li:first-child > a,
.header-layout2 .main-menu > ul > li:first-child > a {
  padding-left: 4px;
}

/* Fix: search box and its icon button rendering as two separate rows.
   Force the search form and its wrapper onto one row with the input's
   button correctly overlaid, at every breakpoint the search form is shown. */
.header-layout1 .header-button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  flex-wrap: nowrap;
}

.header-layout1 .search-form {
  display: inline-block;
  white-space: nowrap;
  flex-shrink: 0;
}

.header-layout1 .search-form input {
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
}

.header-layout1 .search-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* General polish: tighten up header row so logo/info/nav don't crowd
   each other on medium screens */
@media (max-width: 1399px) {
  .header-layout1 .header-left .header-button,
  .header-layout2 .header-left .header-button {
    margin-right: 20px !important;
  }
}

/* Fix: hamburger menu toggle button rendering oversized on mobile/tablet,
   crowding out the logo and search icon next to it so parts of the header
   become invisible/clipped. Shrink it well before the 767px point where
   the vendor CSS used to start reducing it, and keep it modest at every
   width below the xl breakpoint where it's actually shown. */
@media (max-width: 1199.98px) {
  .header-layout1 .th-menu-toggle {
    width: 44px;
    height: 44px;
    line-height: 44px;
    font-size: 16px;
    margin-right: 0;
  }
}

@media (max-width: 575.98px) {
  .header-layout1 .th-menu-toggle {
    width: 38px;
    height: 38px;
    line-height: 38px;
    font-size: 14px;
  }
}

.header-layout1 .col-auto.ms-lg-auto .header-button {
  flex-wrap: nowrap;
  gap: 8px;
}