/* ============================================================
   responsive.css — Multipurpose Finance
   Mobile/tablet overrides. Loaded after style.css, before
   accessibility.css.
   RULE: nothing in this file may change rendering at >=1200px,
   except §1 which only styles selectors that never matched
   before (scroll utility, redesigned popup, -lg navbar shim).
   ============================================================ */

/* ---------- §1 All widths (parity-safe: new selectors only) ---------- */

/* shim: style.css:266 targets .navbar-expand-md; the nav class tier changed to -lg */
.navbar.navbar-expand-lg.navbar-dark {
   padding: 0;
}

/* horizontal-scroll utility for wide tables */
.table-scroll-x {
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
}

/* the misnamed "scroll" wrapper only had overflow-y; add the missing axis */
.fi-table-scroll {
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
}

/* notice popup (restructured out of its own HTML document; was broken at all widths) */
.custom-modal .modal-dialog {
   max-width: 560px;
}
.custom-modal .modal-content {
   border: none;
   border-radius: 8px;
   overflow: hidden;
   box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
}
.custom-modal .modal-body {
   padding: 0;
   max-height: 90vh;
   overflow-y: auto;
}
.custom-modal .modal-body img {
   width: 100%;
   height: auto;
   display: block;
}
.custom-modal .close {
   position: absolute;
   top: 8px;
   right: 8px;
   z-index: 5;
   width: 32px;
   height: 32px;
   background: #fff;
   opacity: .9;
   border-radius: 50%;
   font-size: 22px;
   line-height: 1;
}
.custom-modal .close:hover {
   opacity: 1;
}
.custom-modal .popup-actions {
   padding: 8px;
   background: #fff;
   border-top: 1px solid #eee;
   text-align: center;
}
.custom-modal .btn-skip-all {
   display: inline-block;   /* theme forces button{display:block}, which defeats text-align */
   border: 1px solid #384474;
   background: #fff;
   color: #384474;
   font-size: 13px;
   padding: 5px 18px;
   border-radius: 4px;
   cursor: pointer;
   transition: background .2s, color .2s;
}
.custom-modal .btn-skip-all:hover {
   background: #384474;
   color: #fff;
}

/* ---------- §2 <=991.98px (collapse tier + tablet band) ---------- */
@media (max-width: 991.98px) {

   /* --- hamburger toggler: kill the right:-340px/bottom:75px hack --- */
   .navbar .navbar-toggler {
      position: static;
      right: auto;
      bottom: auto;
      margin: 8px 0 8px auto;
      padding: 6px 12px;
      background: #384474;
      border: none;
      border-radius: 6px;
   }
   .navbar .navbar-toggler .navbar-toggler-icon {
      background: none;
      width: auto;
      height: auto;
   }
   .navbar .navbar-toggler .fa-bars {
      color: #fff;
      font-size: 20px;
   }

   /* --- collapsed menu panel --- */
   .mobileview {
      width: 100%;
   }
   #navbarCollapse {
      max-height: calc(100vh - 90px);
      overflow-y: auto;
   }
   #navbarCollapse .sf-menu {
      margin: 0;
      float: none;
      width: 100%;
      max-width: none;
   }
   #navbarCollapse .sf-menu > li {
      float: none;
      display: block;
      margin: 0;
      border-bottom: 1px solid #eef0f5;
   }
   #navbarCollapse .main-nav li > a {
      display: block;
      padding: 12px 10px;
   }
   /* neutralize superfish/hover submenus; the accordion is class-driven (li.rs-open) */
   #navbarCollapse .sf-menu li ul {
      position: static !important;
      display: none !important;
      top: auto;
      left: 0;
      width: 100%;
      min-width: 0;
      box-shadow: none;
      opacity: 1 !important;
   }
   #navbarCollapse .sf-menu li.rs-open > ul {
      display: block !important;
   }
   #navbarCollapse .sf-menu ul ul {
      padding-left: 16px;
   }

   /* keep the header in normal flow so the open panel pushes content
      (matches existing <=767 behavior from style.css) */
   .stickey {
      position: static;
   }

   /* --- topbar: stack the two columns --- */
   .top-header {
      height: auto;
      padding: 4px 0;
   }
   .top-header .col-md-4,
   .top-header .col-md-8 {
      flex: 0 0 100%;
      max-width: 100%;
   }
   .breaking-box {
      display: flex;
      align-items: center;
   }
   .breaking-box marquee {
      width: auto;
      flex: 1 1 auto;
      min-width: 0;
   }
   /* style.css:104 floats it with margin-right:-48px — the overlap bug */
   .breaking-box a.viewall {
      float: none;
      margin: 0 0 0 10px;
      white-space: nowrap;
   }
   .header-top-right {
      float: none !important;
      text-align: left !important;
   }

   /* --- tablet-band fixed widths --- */
   .fi-table-scroll {
      width: 100%;
   }
   .base-rate-table {
      width: 100%;
   }
   .newemi {
      width: 70%;
   }
   .pagi {
      width: auto;
   }

   /* --- CMS (CKEditor) content guard: wide tables scroll, media shrinks --- */
   .samelay table,
   .samelayout table {
      display: block;
      width: 100% !important;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
   }
   .samelay img,
   .samelayout img {
      max-width: 100%;
      height: auto;
   }
   .samelay iframe,
   .samelayout iframe {
      max-width: 100%;
   }

   /* --- branch cards: bare iframe sits directly in a .row (negative gutters) --- */
   .branches-box .row {
      margin-left: 0;
      margin-right: 0;
   }
   .branches-box iframe {
      max-width: 100%;
   }

   /* --- typography tier --- */
   h1 { font-size: 34px; }
   h2 { font-size: 27px; }
   h3 { font-size: 24px; }
   h4 { font-size: 21px; }
   .quotation-mark { font-size: 70px; }
}

/* ---------- §3 <=767.98px (phones) ---------- */
@media (max-width: 767.98px) {

   /* topbar: compact flowing link list (dates are d-none below md).
      Direct-child selectors only — must not hit the nested ul.dropdown-menu */
   .header-top-right > ul {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 2px 8px;
      padding-left: 0;
      margin-bottom: 4px;
   }
   .header-top-right > ul > li {
      margin: 0;
   }

   /* hero slider: fluid height instead of hard 500px / bare auto */
   .banner img {
      height: 52vw;
      max-height: 320px;
      min-height: 160px;
      object-fit: cover;
   }
   .banner .carousel-caption {
      display: none;
   }

   /* inner-page banner title: centered, no left:32% clipping */
   .banner-text {
      left: 0;
      right: 0;
      width: 100%;
      padding: 10px 15px;
   }

   /* services slick cards: wide logo images shrink to fit, never crop text */
   .service-slider img {
      width: 100%;
      height: 180px;
      object-fit: contain;
      background: #fff;
   }
   .service-slider .slick-slide {
      overflow: hidden;
   }

   /* tables breathe on small screens */
   .fi-table thead tr th,
   .fi-table tbody td,
   .fi-table tbody th {
      padding: 8px 10px;
   }

   /* contact page map */
   .map iframe {
      height: 300px;
   }

   /* typography tier */
   h1 { font-size: 28px; }
   h2 { font-size: 24px; }
   h3 { font-size: 21px; }
   h4 { font-size: 19px; }
   h5 { font-size: 17px; }
   .blog-wrap h3 { font-size: 24px; }
   .quotation-mark { font-size: 50px; }
}

/* ---------- §4 <=575.98px (small phones) ---------- */
@media (max-width: 575.98px) {
   .custom-modal .modal-dialog {
      margin: .5rem auto;
   }
   .newticker .news p {
      font-size: 12px;
   }
   /* product tabs: three equal tabs, no two-line wrap */
   .producttab nav a {
      width: auto;
      flex: 1 1 0;
      font-size: 11px;
      padding: 8px 4px;
      white-space: nowrap;
   }
}