/**
 * Shared Loans-style 3-column nav for Join / Loans / Mortgages / Savings / Services.
 *
 * Wide desktop (>1200): absolute column chain (original Loans look).
 * Mid desktop (1000–1200): flex columns inside the panel (no promo overflow).
 */

.newColumns,
.column2,
.column3 {
  float: left;
  width: auto;
  margin-right: 32px;
}

p.newColumnTitle {
  float: left;
  width: 100%;
  max-width: 230px;
  height: 37px;
  font-size: 16px;
  line-height: 21px;
  padding-bottom: 16px;
  border-bottom: solid 1px #E5E5E5;
  font-weight: 700;
  text-transform: uppercase;
  color: #000;
}

a.newColumnBtn {
  font-weight: 700;
  font-size: 15px;
  background-color: #80BD03;
  padding: 10px 18px;
  line-height: 1.25;
  border-radius: 25px;
  color: #000;
  text-decoration: none;
  display: inline-block;
}
a.newColumnBtn:hover {
  color: #fff;
}

/* Header "Contact Us" — same pill as Apply Now / Calculate Now */
.header_wrap .top_links .header-contact {
  display: flex;
  align-items: center;
  margin-left: 8px;
}
.header_wrap .top_links .header-contact a.header-contact-btn,
.header_wrap .top_links .header-contact a.newColumnBtn {
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  background-color: #80BD03 !important;
  padding: 10px 18px !important;
  border-radius: 25px !important;
  color: #000 !important;
  text-decoration: none !important;
  display: inline-block !important;
  position: static !important;
}
.header_wrap .top_links .header-contact a.header-contact-btn:hover,
.header_wrap .top_links .header-contact a.newColumnBtn:hover {
  color: #fff !important;
}
.header_wrap .top_links .header-contact a.header-contact-btn:before,
.header_wrap .top_links .header-contact a.newColumnBtn:before {
  display: none !important;
  content: none !important;
}

/*
 * Tablet only (768–991): one row for Search + Contact Us + hamburger,
 * with even padding so items sit mid-header. Do NOT flex .header_wrap —
 * the mobile-menu lives inside it and that broke the page.
 */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header_wrap,
  .header-solid-middle-content .header_wrap,
  .mortgages .header_wrap,
  .join-now .header_wrap,
  .business-loan .header_wrap,
  .fixed .header_wrap,
  .fixed.header-solid-middle-content .header_wrap {
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    align-items: stretch !important;
  }

  .header_wrap .header_inner,
  .fixed .header_wrap .header_inner {
    width: 100% !important;
    height: auto !important;
    padding: 22px 0 !important;
    display: block !important;
    align-items: stretch !important;
  }

  .header_wrap .inner1440 {
    width: 100% !important;
    display: block !important;
  }

  .header_wrap .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
  }

  .header_wrap .header_inner .logo {
    width: auto !important;
    max-width: 28%;
    flex-shrink: 0;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
  }

  .header_wrap .header_inner .logo img {
    max-height: 56px;
    width: auto;
    display: block;
  }

  .header_wrap .header_inner .head_right {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: auto !important;
    flex: 1 1 auto !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0;
  }

  .header_wrap .header_inner .head_top {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 14px;
    width: 100% !important;
    min-width: 0;
  }

  /* Header bar search only — do NOT target .mobile-menu .search_col */
  .header_wrap .header_inner .head_top .search_col {
    margin: 0 !important;
    width: auto !important;
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-width: 0;
    max-width: 260px;
  }

  .header_wrap .header_inner .head_top .search_col form {
    display: flex !important;
    align-items: center !important;
    width: 100%;
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
  }

  .header_wrap .header_inner .head_top .search_col form label {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    width: 100%;
    white-space: nowrap;
  }

  .header_wrap .header_inner .head_top .search_col form .search-field {
    width: 100% !important;
    max-width: 170px !important;
    margin: 0 0 0 6px !important;
    flex: 1 1 auto;
  }

  .header_wrap .header_inner .top_links {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  .header_wrap .header_inner .top_links .header-contact {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  .header_wrap .header_inner .top_links .header-contact a.header-contact-btn,
  .header_wrap .header_inner .top_links .header-contact a.newColumnBtn {
    padding: 8px 16px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  .header_wrap .header_inner + .open_menu,
  .header_wrap .container > .open_menu {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 12px !important;
    align-self: center !important;
    flex-shrink: 0 !important;
  }

  .fixed .header_wrap .header_inner .head_right,
  .fixed .header_wrap .header_inner .head_top {
    margin: 0 !important;
    padding: 0 !important;
  }

  /*
   * Hamburger overlay: keep Search + nav stacked at the top.
   * (Previous unscoped .search_col { flex: 1 } stretched Search and
   * pushed the menu links to the bottom of the screen.)
   */
  .header_wrap .mobile-menu .mobile-menu-wrap {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    height: auto !important;
    max-height: calc(100vh - 90px) !important;
    margin-top: 75px !important;
    overflow-y: auto !important;
  }

  .header_wrap .mobile-menu .mobile-menu-wrap > .search_col {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 16px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .header_wrap .mobile-menu .mobile-menu-wrap > .search_col form {
    display: inline-block !important;
    width: auto !important;
    max-width: 320px;
    margin: 0 auto !important;
    text-align: left;
  }

  .header_wrap .mobile-menu .mobile-menu-wrap > .search_col form .search-field {
    width: 220px !important;
    max-width: 70% !important;
  }

  .header_wrap .mobile-menu .mega-menu-wrap,
  .header_wrap .mobile-menu .mobile-menu-wrap > .mega-menu-wrap,
  .header_wrap .mobile-menu .mobile-menu-wrap > ul {
    flex: 0 0 auto !important;
    margin-top: 0 !important;
  }
}

.newColumns {
  float: left;
  width: auto;
  min-width: 230px;
  min-height: 300px;
  position: relative;
  margin: 24px 40px 40px;
}
.newColumns ul,
.newColumns ul.savvi-nav-link-list {
  float: left !important;
  display: block !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  width: auto !important;
  min-width: 230px !important;
  position: static !important;
  left: auto !important;
  top: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
}
.newColumns ul li {
  padding-bottom: 16px !important;
  float: none !important;
  width: 100% !important;
  clear: both !important;
  background: transparent !important;
}
.newColumns ul li a {
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  color: #166938 !important;
  text-decoration: underline !important;
  background: transparent !important;
  padding: 0 !important;
}
.newColumns ul li.savvi-nav-col-title {
  padding-bottom: 0 !important;
  list-style: none !important;
}

/*
 * Default (incl. mid): columns stay in normal flow.
 * Absolute chain is ONLY for wide desktop — see min-width: 1201px below.
 */
.column2 {
  position: relative;
  top: auto;
  left: auto;
  float: left;
  width: 230px;
}
.column2 span {
  margin: 16px 0;
  font-size: 16px;
  line-height: 21px;
  color: #000;
  display: block;
  clear: both;
}

.column3 {
  position: relative;
  top: auto;
  left: auto;
  float: left;
  width: 230px;
}
.column3 img {
  margin: 16px 0;
  display: block;
  clear: both;
  width: 100%;
  max-width: 230px;
  height: auto;
  border-radius: 8px !important;
  overflow: hidden;
}
.column3 span {
  margin: 16px 0;
  font-size: 16px;
  line-height: 21px;
  color: #000;
  display: block;
  clear: both;
}
.column3 .newColumnBtn {
  margin-bottom: 8px;
}

@media only screen and (min-width: 992px) {
  /*
   * Live savvi.ie width: static LI → panel is 100% of menu wrap (3 columns fit).
   * Services steal: closed panels are display:none so they cannot sit in the
   * shared full-width layer and steal hoverIntent (Services is last in DOM).
   */
  #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.savvi-nav-enhanced.mega-menu-item,
  #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.menu-services-tab.mega-menu-item {
    position: static !important;
  }

  /*
   * menu-services-tab is listed as its own fallback (not just via
   * .savvi-nav-enhanced) because the JS 3-column enhancement can silently
   * no-op for Services — when that happens its panel is otherwise left on
   * the theme's `position:fixed !important` (style.css), which anchors it
   * to the viewport instead of the header and lets it float over/replace
   * whichever panel is legitimately open. This selector is the safety net
   * that was already in place for Join/Savings but missing for Services.
   */
  #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.savvi-nav-enhanced > ul.mega-sub-menu,
  #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.savvi-nav-enhanced.mega-menu-megamenu > ul.mega-sub-menu,
  #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.savvi-nav-enhanced.mega-menu-flyout > ul.mega-sub-menu,
  #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-flyout.menu-join-tab > ul.mega-sub-menu,
  #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-flyout.menu-savings-tab > ul.mega-sub-menu,
  #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.menu-services-tab > ul.mega-sub-menu {
    z-index: 999 !important;
    position: absolute !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    left: 0 !important;
    right: auto !important;
    top: 100% !important;
    margin: 0 !important;
    margin-top: 0 !important;
    padding: 0 0 32px 0 !important;
    background: #f1f1f1 !important;
    border: 0 !important;
    border-radius: 0 !important;
    min-height: 320px !important;
    height: auto !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  /* Closed = not in the hit layer at all */
  #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.savvi-nav-enhanced:not(.mega-toggle-on) > ul.mega-sub-menu,
  #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.menu-services-tab:not(.mega-toggle-on) > ul.mega-sub-menu {
    display: none !important;
  }

  #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.savvi-nav-enhanced.mega-toggle-on > ul.mega-sub-menu,
  #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.menu-services-tab.mega-toggle-on > ul.mega-sub-menu {
    display: block !important;
    z-index: 10050 !important;
  }

  #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.savvi-nav-enhanced > ul.mega-sub-menu > li.savvi-nav-cols-wrap {
    list-style: none !important;
    float: left !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    background: transparent !important;
    position: static !important;
  }
}

/*
 * Wide desktop ONLY (>1200): original absolute Loans-style column chain (live site).
 */
@media only screen and (min-width: 1201px) {
  #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.savvi-nav-enhanced .column2 {
    position: absolute !important;
    top: 0 !important;
    left: calc(100% + 64px) !important;
    float: left !important;
    width: 230px !important;
  }

  #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.savvi-nav-enhanced .column3 {
    position: absolute !important;
    top: 0 !important;
    left: calc(100% + 358px) !important; /* 64 + 230 + 64 */
    float: left !important;
    width: 230px !important;
  }
}

/*
 * Mid-desktop ONLY (1000–1200): keep all 3 columns on ONE row inside the
 * gray panel (Promotions must not wrap under). Wide desktop untouched.
 */
@media only screen and (min-width: 1000px) and (max-width: 1200px) {
  #mega-menu-wrap-menu-1 {
    position: relative !important;
  }

  #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.savvi-nav-enhanced > ul.mega-sub-menu,
  #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.savvi-nav-enhanced.mega-menu-megamenu > ul.mega-sub-menu,
  #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.savvi-nav-enhanced.mega-menu-flyout > ul.mega-sub-menu,
  #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.menu-services-tab > ul.mega-sub-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    padding: 20px 20px 36px !important;
    margin: 0 !important;
    margin-top: 0 !important;
    transform: none !important;
    box-shadow: rgba(0, 0, 0, 0.15) 0 3px 5px !important;
  }

  #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.savvi-nav-enhanced.mega-toggle-on > ul.mega-sub-menu,
  #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.menu-services-tab.mega-toggle-on > ul.mega-sub-menu {
    position: absolute !important;
    left: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    z-index: 10050 !important;
    transform: none !important;
    display: block !important;
  }

  #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.savvi-nav-enhanced:not(.mega-toggle-on) > ul.mega-sub-menu,
  #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.menu-services-tab:not(.mega-toggle-on) > ul.mega-sub-menu {
    display: none !important;
  }

  #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.savvi-nav-enhanced > ul.mega-sub-menu > li.savvi-nav-cols-wrap {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.savvi-nav-enhanced .newColumns {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    position: relative !important;
    box-sizing: border-box !important;
    gap: 16px;
  }

  #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.savvi-nav-enhanced .newColumns > ul,
  #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.savvi-nav-enhanced .newColumns > ul.savvi-nav-link-list,
  #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.savvi-nav-enhanced .newColumns > .column2,
  #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.savvi-nav-enhanced .newColumns > .column3 {
    position: static !important;
    float: none !important;
    left: auto !important;
    top: auto !important;
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.savvi-nav-enhanced .column3 img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }

  #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.savvi-nav-enhanced p.newColumnTitle {
    max-width: 100% !important;
    float: none !important;
    height: auto !important;
  }

  #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.savvi-nav-enhanced a.newColumnBtn {
    display: inline-block !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px 14px !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.savvi-nav-enhanced .column3 .newColumnBtn {
    margin-bottom: 8px !important;
  }

  /* Slightly tighter Contact Us in this band so header stays balanced */
  .header_wrap .top_links .header-contact a.header-contact-btn,
  .header_wrap .top_links .header-contact a.newColumnBtn {
    padding: 8px 16px !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
  }
}