/* ============================================================
   ASM Header Revamp — clean flex-wrap layout (no JS, no shift)
   - Full-width header (small side gutters)
   - All 10 menu items + links unchanged (no label shortening)
   - Menu wraps naturally and stays centered/balanced
   - Loaded AFTER style.css
   ============================================================ */

/* ---- Full-width header rows ---- */
.main-header .header-top .inner-container,
.main-header .main-box {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
}

/* ---- Main row: logo | menu | badge aligned ---- */
.main-header .main-box {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 16px;
}
/* Narrow the logo box to 80px and give the freed ~200px to the menu.
   The nav-outer uses flex:1 1 auto, so it automatically absorbs the space. */
.main-header .header-lower .logo-box {
  padding: 12px 0;
  flex: 0 0 80px !important;
  width: 80px !important;
  max-width: 80px !important;
}
.main-header .header-lower .logo-box .logo,
.main-header .header-lower .logo-box .logo a { display: block; width: 80px; max-width: 80px; }
.main-header .logo img { width: 80px !important; max-width: 80px !important; height: auto; }
/* Override the theme's min-width:280px on the logo box (set at <=1699px).
   min-width beats width/max-width, so it must be explicitly reset. */
.header-style-two .header-lower .logo-box,
.main-header .header-lower .logo-box {
  min-width: 80px !important;
}
@media only screen and (max-width: 1699px) {
  .header-style-two .header-lower .logo-box {
    min-width: 80px !important;
    width: 80px !important;
    max-width: 80px !important;
    flex: 0 0 80px !important;
  }
}

.main-header .main-box .nav-outer {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
}

/* ---- Menu: flex row that wraps + centers (applies immediately) ---- */
.main-header .main-box .nav-outer .main-menu .navigation {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  justify-content: center;
  row-gap: 2px;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Remove old float + huge 70px gaps that caused ragged wrapping */
.main-header .main-box .nav-outer .main-menu .navigation > li {
  float: none !important;
  margin-right: 0 !important;
  padding: 16px 0 !important;
  display: flex !important;
  align-items: center;
}

.main-header .main-box .nav-outer .main-menu .navigation > li > a {
  padding: 0 14px !important;
  font-size: 14.5px;
  line-height: 24px;
  white-space: nowrap;
  position: relative;
}

/* Subtle separators between top-level items */
.main-header .main-box .nav-outer .main-menu .navigation > li + li > a {
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

/* Dropdown caret spacing */
.main-header .main-box .nav-outer .main-menu .navigation > li.dropdown > a {
  padding-right: 28px !important;
  margin-right: 0 !important;
}
.main-header .main-box .nav-outer .main-menu .navigation > li.dropdown > a:after {
  margin: 8px 0 0 6px;
}

/* Replace the old centered underline with one aligned to the padded link */
.main-header .main-box .nav-outer .main-menu .navigation > li:before { display: none; }
.main-header .main-box .nav-outer .main-menu .navigation > li > a:before {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: -3px;
  height: 2px; width: auto;
  transform: scaleX(0);
  transform-origin: left center;
  background-color: var(--bg-theme-color1, #14a89e);
  transition: transform 280ms ease;
}
.main-header .main-box .nav-outer .main-menu .navigation > li:hover > a:before,
.main-header .main-box .nav-outer .main-menu .navigation > li.current > a:before {
  transform: scaleX(1);
}

/* ---- BBB badge ---- */
.main-header .main-box .nav-outer .bbb-accreditation { flex: 0 0 auto; display: flex; align-items: center; }
.main-header .main-box .nav-outer .bbb-accreditation img { height: 34px; width: auto; display: block; }

/* ---- Header top bar tidy ---- */
.header-top .inner-container { align-items: center; }
.header-top .top-right { align-items: center; gap: 14px; }

/* Sticky header: apply the same clean flex-wrap so it never reverts */
.main-header .sticky-header .nav-outer .main-menu .navigation {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  justify-content: center;
  row-gap: 2px;
  margin: 0;
  padding: 0;
}
.main-header .sticky-header .nav-outer .main-menu .navigation > li {
  float: none !important;
  margin-right: 0 !important;
}

/* ---- Kill the post-load reflow ----
   The theme's script.js appends a <div class="dropdown-btn"> caret box
   inside every desktop dropdown <li> on document.ready. That box adds
   width to each item a few seconds after load and pushes the menu into a
   wider, ragged wrap. It is only needed for the mobile menu, so we give
   it zero footprint inside the desktop header-lower + sticky menus. */
.main-header .header-lower .main-menu .navigation > li > .dropdown-btn,
.main-header .sticky-header .main-menu .navigation > li > .dropdown-btn {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: absolute !important;
  pointer-events: none !important;
}

/* Below 992px the theme switches to the mobile toggler — untouched. */