/* Site-wide cross-browser layout – load last */

/* ── 1. Page shell ── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  height: auto;
  /* Single scroll container – avoids nested scroll on body/wrapper */
  overflow-x: hidden;
  overflow-y: scroll;
  /* omit scrollbar-gutter:stable – Chromium shrinks %-width basis (~15px) on html/body */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
body.fdic-ehl-body {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow: visible !important;
  min-height: 100vh;
  min-height: 100dvh;
}

body #wrapper,
body #wrapper.wrapper {
  position: relative;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  transform: none;
}

body > .wrapper-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}

#main_content,
main {
  width: 100%;
  max-width: 100%;
}

/* ── 2. Navigation ── */
#main-nav .d-flex,
#main-nav .row {
  min-width: 0;
  max-width: 100%;
}

/* Kill overflow-x:clip from bundled CSS – breaks Chrome/Edge/Safari layout */
#main-nav,
#main-nav .main-nav-top {
  overflow-x: visible;
}

/* Desktop nav shell – Chrome collapses .d-flex row without explicit flex + height */
@media screen and (min-width: 1151px) {
  #main-nav,
  #main-nav .main-nav-top,
  #main-nav .main-nav-top .container,
  #main-nav .container {
    overflow-x: visible !important;
    overflow-y: visible !important;
    max-width: 100%;
  }

  #main-nav .main-nav-top {
    min-height: 62px !important;
    height: auto !important;
  }

  #main-nav .pop-brand-container,
  #main-nav .d-flex.pop-brand-container,
  #main-nav .main-nav-top .d-flex {
    display: flex !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    min-height: 56px !important;
    height: auto !important;
    width: 100% !important;
  }

  #main-nav #nav-top-menu {
    display: block !important;
    min-height: 54px !important;
    height: auto !important;
    flex: 0 1 auto !important;
  }

  #main-nav .pop-brand.d-none-breakpoint-mobile {
    display: inline-block !important;
    flex: 0 0 auto !important;
  }
}

/* Union Monique Bank breakpoint – 1150px mobile/tablet nav */
@media screen and (max-width: 1150px) {
  #main-nav,
  #main-nav .main-nav-top {
    overflow-x: hidden !important;
  }

  #btn-nav-toggle,
  #nav-top-toolbar {
    display: block !important;
  }

  #main-nav .main-nav-top {
    display: none !important;
    position: absolute !important;
    width: 320px !important;
    max-width: 85vw !important;
    height: 100% !important;
    top: 0 !important;
    right: -400px !important;
    left: auto !important;
    z-index: 999 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    background: var(--pds-color-white, #fff) !important;
  }

  #main-nav.show .main-nav-top,
  #main-nav.show .main-nav-top.slideInRight {
    display: block !important;
    right: 0 !important;
  }

  #nav-top-menu {
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #main-nav.show #nav-top-menu {
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    visibility: visible !important;
    margin-top: 60px !important;
    margin-left: 10px !important;
  }

  #main-nav .main-nav-top ul li a,
  #nav-top-menu li ul li a,
  #nav-reg-lang li a,
  #nav-top-toolbar a {
    display: none !important;
  }

  #main-nav .main-nav-brand #btn-login {
    display: inline-block !important;
    position: relative !important;
    z-index: 1205 !important;
    pointer-events: auto !important;
  }

  #main-nav.show .main-nav-top ul li a,
  #main-nav.show #nav-top-menu li a,
  #main-nav.show #nav-top-toolbar a {
    display: block !important;
  }

  #main-nav.show #btn-login {
    display: inline-block !important;
  }

  #main-nav .brand-blue,
  #nav-top-toolbar.brand-blue {
    display: none !important;
  }

  #main-nav.show .brand-blue,
  #main-nav.show #nav-top-toolbar.brand-blue {
    display: block !important;
  }
}

@media screen and (min-width: 1151px) {
  #btn-nav-toggle,
  #nav-top-toolbar {
    display: none !important;
  }

  #main-nav .main-nav-top {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    right: auto !important;
    top: auto !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
  }

  #nav-top-menu {
    display: block !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    visibility: visible !important;
  }

  #main-nav .brand-blue,
  #nav-top-toolbar.brand-blue {
    display: none !important;
  }
}

/* ── 3. Containers & grid ── */
#wrapper .container-fluid {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

@media screen and (max-width: 1199px) {
  #wrapper .container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
}

#wrapper .row {
  max-width: 100%;
  min-width: 0;
}

#wrapper [class*="col-"] {
  min-width: 0;
  max-width: 100%;
}

/* ── 4. Heroes & banners ── */
#wrapper .banner-hero,
#wrapper .jumbotron,
#randomBanner,
#hero,
#jumbo-600,
#hero2 {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Photo heroes: desktop sizing only – mobile stacked layout in page-hero-fix.css */
@media screen and (min-width: 1025px) {
  #wrapper .jumbotron.jumbo-img.banner-hero:not(#randomBanner),
  #wrapper #banner-services,
  #wrapper #connect-banner {
    background-size: cover;
    background-position: center center;
  }
}

@media screen and (max-width: 767px) {
  #wrapper .container {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* ── 5. Media & tables ── */
#wrapper img,
#wrapper video,
#wrapper iframe,
#wrapper embed,
#wrapper object {
  max-width: 100%;
  height: auto;
}

#wrapper table {
  max-width: 100%;
}

@media screen and (max-width: 767px) {
  #wrapper .table-responsive,
  #wrapper table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── 6. Flex overflow (Chrome) ── */
#wrapper .d-flex,
#wrapper .d-inline-flex {
  min-width: 0;
  max-width: 100%;
}

/* ── 7. Footer – WebKit/Chrome flex fallback (aegean-footer uses legacy -webkit-box) ── */
footer.mainFooter,
footer.mainFooter .container,
footer.mainFooter .mainFooterNav__ul {
  display: block;
  width: 100%;
  max-width: 100%;
}

footer.mainFooter .mainFooterNav__ul--2colmns {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}

@media screen and (max-width: 1023px) {
  footer.mainFooter .mainFooterNav__ul--2colmns {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
  }
}

footer.mainFooter::before {
  -webkit-clip-path: none !important;
  clip-path: none !important;
}

/* ── 8. Legacy footer skin vs mainFooter ── */
body.style_cb footer.mainFooter {
  color: #ffffff !important;
}

body.style_cb footer.mainFooter::before {
  top: auto !important;
}

body.style_cb footer.mainFooter .container {
  max-width: none !important;
  width: 100% !important;
}

footer.mainFooter .copyright {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: #ffffff !important;
}

/* ── 9. Modals & overlays ── */
.modal,
.modal-dialog {
  max-width: calc(100vw - 2rem);
}

@media screen and (max-width: 575px) {
  .modal-dialog {
    margin: 0.5rem auto;
    width: calc(100% - 1rem);
  }
}

/* ── 10. CD rate table – prevent horizontal bleed on WebKit/Chrome mobile ── */
@media screen and (max-width: 767px) {
  #certificate-of-deposit table,
  #certificate-of-deposit .table,
  #certificate-of-deposit .table-responsive {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── 11. Zig-zag hero image – natural width overflows tablet viewports ──
   (legacy layout bleed; we clip it cleanly) */
@media screen and (max-width: 1150px) {
  .zig-zag .img-responsive.zig-img-full-height {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
  }
  .zig-zag,
  .zig-zag .row,
  .zig-zag [class*="col-"] {
    max-width: 100%;
    overflow-x: hidden;
  }
}

/* ── 12. Clearfix for float-based feature columns ──
   When .featured-cols falls back to display:block (no-flex mode or
   max-width:1150px), its floated children collapse the container to 0px. */
.featured-cols::after,
.featured-blocks .row::after,
#icon_menu .container::after {
  content: "";
  display: table;
  clear: both;
}

/* site-wide custom list bullets (content areas only) – CSS dots; bullet.png asset unavailable */
.feature-wrapper ul:not(.no-bullet):not(.nav):not(.dropdown-menu),
.feature-wrapper ul:not(.no-bullet):not(.nav):not(.dropdown-menu) > li,
.col-txt ul:not(.no-bullet):not(.nav):not(.dropdown-menu),
.col-txt ul:not(.no-bullet):not(.nav):not(.dropdown-menu) > li,
.text-left-imp ul:not(.no-bullet):not(.nav):not(.dropdown-menu),
.text-left-imp ul:not(.no-bullet):not(.nav):not(.dropdown-menu) > li,
.article ul:not(.no-bullet):not(.nav):not(.dropdown-menu):not(.socialNav__ul):not(.umb-footerNav__list),
.article ul:not(.no-bullet):not(.nav):not(.dropdown-menu):not(.socialNav__ul):not(.umb-footerNav__list) > li {
  list-style: none !important;
  list-style-image: none !important;
}

/* Product cards – full-width lists (override legacy inline-block shrink) */
.featured-blocks .feature-col .feature-wrapper ul:not(.no-bullet):not(.nav):not(.dropdown-menu),
.featured-blocks .feature-col .feature-benefits ul,
.featured-blocks .feature-col ul.checked,
.featured-blocks.text-center .feature-col .feature-wrapper ul:not(.no-bullet),
.featured-blocks.text-center .feature-col .feature-benefits ul,
.featured-blocks.text-center .feature-col .text-left-imp ul:not(.no-bullet),
.featured-blocks.text-center .feature-col .article ul:not(.no-bullet) {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  text-align: left !important;
  list-style: none !important;
  list-style-image: none !important;
}

.featured-blocks ul:not(.no-bullet):not(.nav):not(.dropdown-menu):not(.socialNav__ul):not(.umb-footerNav__list),
.featured-blocks ul:not(.no-bullet):not(.nav):not(.dropdown-menu):not(.socialNav__ul):not(.umb-footerNav__list) > li {
  list-style: none !important;
  list-style-image: none !important;
}
.no-bullet,
.no-bullet li,
ul.nav li,
ul.dropdown-menu li,
.socialNav__ul li,
.umb-footerNav__list li {
  list-style: none !important;
  list-style-image: none !important;
}

/* Desktop header – show l-2 submenu row on hover/focus, not only .active tab */
@media screen and (min-width: 1151px) {
  #nav-top-menu > li.dropdown:hover > ul,
  #nav-top-menu > li.dropdown:focus-within > ul,
  #nav-top-menu > li.dropdown.active > ul,
  #nav-top-menu > li.dropdown.umb-nav-open > ul {
    display: block !important;
  }

  /* Submenu row must be absolutely positioned (reference layout) */
  #nav-top-menu > li.dropdown > ul {
    position: absolute !important;
    top: 60px !important;
    left: -250px !important;
    z-index: 1201 !important;
    min-width: 535px !important;
  }

  #nav-top-menu > li.dropdown > ul > li.l-2-li {
    float: left !important;
    display: inline !important;
  }

  #nav-top-menu .m-menu.showMenu {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* About Us mega-menu – align submenu bar with container (Private Client tab removed) */
@media screen and (min-width: 1150px) {
  #nav-top-menu li.li-about ul.animated.fadeIn {
    left: -397px !important;
  }
}

/* Header utilities – search icon left of Sign in (no overlap) */
@media screen and (min-width: 1151px) {
  #main-nav .main-nav-brand .col-md-12 {
    position: relative;
    min-height: 40px;
  }

  #login-container {
    float: right !important;
    position: relative !important;
    min-height: 40px;
    z-index: 1203 !important;
  }

  #login-container #btn-login {
    position: relative !important;
    right: auto !important;
    float: none !important;
    white-space: nowrap;
    pointer-events: auto !important;
  }

  #btn-mag,
  #btn-mag.btn-mag-pos2 {
    position: absolute !important;
    right: 118px !important;
    top: 5px !important;
    z-index: 1203 !important;
    pointer-events: auto !important;
  }

  #login-container.open .dropdown-menu,
  #login-container.open #login-dropdown {
    display: block !important;
  }

  #search-module {
    z-index: 1300 !important;
  }

  /*
   * Brand row sits below the l-2 submenu (Banking / Financing / …) in the
   * layout but was painted on top, blocking clicks. Let clicks pass through
   * except on search and Sign in.
   */
  #main-nav .main-nav-brand {
    pointer-events: none;
    z-index: 1200 !important;
  }

  #main-nav .main-nav-top {
    z-index: 1202 !important;
  }

  #main-nav .main-nav-brand a,
  #main-nav .main-nav-brand #login-container,
  #main-nav .main-nav-brand #btn-mag,
  #main-nav .main-nav-brand .dropdown-menu {
    pointer-events: auto;
  }
}