/*=============================================================
  BASELOK — DEDICATED MOBILE FIX CSS
  Targets: max-width 991px (tablets + phones)
  Purpose: Fix white gaps, distortion, header overflow
=============================================================*/

/* ─────────────────────────────────────────────
   1. GLOBAL — Prevent ALL horizontal overflow
   ───────────────────────────────────────────── */
@media (max-width: 991px) {
  html,
  body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* Every block-level element: cannot be wider than viewport */
  div,
  section,
  article,
  aside,
  main,
  header,
  footer,
  nav {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Bootstrap rows create -12px negative margins which push things out */
  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Bootstrap columns: full width on mobile */
  [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* Containers stay within viewport */
  .container,
  .container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    overflow-x: hidden !important;
  }
}


/* ─────────────────────────────────────────────
   2. HEADER — Fix "Application for Credit" overflow + layout
   ───────────────────────────────────────────── */
@media (max-width: 991px) {
  /* Hide the desktop "Application for Credit" text on mobile */
  .site-description {
    display: none !important;
  }
  
  /* Fix the dynamically injected mobile credit button (from cms.js) */
  .mobile-credit-btn {
    right: 60px !important; /* Push it closer to the hamburger menu */
    font-size: 9px !important; /* Make it smaller */
    padding: 3px 6px !important;
    white-space: normal !important;
    line-height: 1.1 !important;
    max-width: 130px !important;
  }

  /* Remove any forced min-width from header (desktop hack) */
  header#masthead {
    min-width: unset !important;
    width: 100% !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 1000 !important;
  }

  /* Header inner container: must NOT clip the dropdown */
  .site-header-menu-inner,
  #site-header-menu,
  .site-header-menu {
    width: 100% !important;
    overflow: visible !important;
    position: relative !important;
  }

  /* Site navigation: flex wrap properly + acts as dropdown anchor */
  .site-navigation {
    flex-wrap: wrap !important;
    padding: 10px 0 !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    position: relative !important;
    z-index: 1001 !important;
  }

  /* Logo area: do not stretch and make logo smaller to prevent overlap */
  /* Logo area: do not stretch and make logo smaller to prevent overlap */
  .site-branding {
    flex-shrink: 0 !important;
    margin-left: -25px !important;
  }
  #logo-img {
    max-width: 125px !important;
    height: auto !important;
  }

  /* Hamburger button — push to far right, vertically centered with logo */
  .btn-show-menu-mobile.menubar {
    position: static !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    align-self: center !important;
    display: block !important;
    order: 10 !important;
  }

  /* The d-flex wrapper holding hamburger + nav */
  .site-navigation > .d-flex {
    margin-left: auto !important;
    align-items: center !important;
  }

  /* .page has overflow:hidden in main.css — override it on mobile */
  body .page {
    overflow: visible !important;
  }

  /* Hide desktop nav menu on mobile (hamburger toggles .show class via JS) */
  .main-menu {
    display: none !important;
    /* FIXED positioning — bypasses ALL parent overflow:hidden clipping */
    position: fixed !important;
    top: 60px !important;      /* approx header height — adjust if needed */
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    z-index: 99999 !important;
    background: #fff !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25) !important;
    padding: 5px 0 20px !important;
    border-top: 3px solid #c3002f !important;
  }
  .main-menu.show {
    display: block !important;
  }
  /* Menu items: full width, stacked */
  .main-menu ul.menu {
    flex-direction: column !important;
    width: 100% !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }
  .main-menu ul.menu > li {
    display: block !important;
    width: 100% !important;
    border-bottom: 1px solid #f0f0f0 !important;
    float: none !important;
    position: static !important;
  }
  .main-menu ul.menu > li > a {
    display: block !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #222d35 !important;
    white-space: normal !important;
    text-decoration: none !important;
  }
  .main-menu ul.menu > li > a:hover {
    color: #c3002f !important;
    background: #f8f8f8 !important;
  }

  /* Header row: no nowrap */
  header#masthead .site-header-menu-inner .row,
  .container-fluid > .row {
    flex-wrap: wrap !important;
  }
}


/* ─────────────────────────────────────────────
   3. BANNER / HERO SLIDER — Fix white gap + sizing
   ───────────────────────────────────────────── */
@media (max-width: 991px) {
  /* The wrapper: no absolute positioned side elements */
  .banner_slider_wrapper {
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
  }

  /* Remove the :before/:after pseudo-elements that extend 40% outside */
  .banner_slider.banner_slider_wide::before,
  .banner_slider.banner_slider_wide::after {
    display: none !important;
  }

  /* Banner slider: full width, no offset */
  .banner_slider.banner_slider_wide {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Each individual slide: shrink height for mobile */
  .banner_slider .slide,
  .slide {
    height: 60vw !important;
    min-height: 220px !important;
    max-height: 380px !important;
  }

  /* Slide headings: smaller text */
  .slide .slide__content--headings {
    width: 90% !important;
  }
  .slide .slide__content--headings h2 {
    font-size: 24px !important;
    line-height: 32px !important;
  }
  .slide .slide__content--headings > h3 {
    font-size: 13px !important;
    line-height: 20px !important;
  }
  .slide .slide__content--headings p {
    font-size: 13px !important;
  }

  /* Hide side social links and enquiry bar (absolute positioned, causes overflow) */
  .slider-social-links-wrapper,
  .slider-textarea {
    display: none !important;
  }
}


/* ─────────────────────────────────────────────
   4. ALL SLICK SLIDERS — Force single column view
   ───────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Slick track: don't allow overflow */
  .slick-track {
    display: flex !important;
  }

  /* Each slide in any slider: full width */
  .slick-slide {
    width: 100% !important;
    min-width: 100% !important;
    flex-shrink: 0 !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
  }

  /* Market serve slider (Applications icons row) */
  .market_serve_slider .slick-slide {
    width: 100% !important;
    min-width: 100% !important;
  }

  /* Slick list: hide overflow so no ghost slides visible */
  .slick-list {
    overflow: hidden !important;
  }

  /* Show slick arrows (prev/next) on mobile for usability */
  .slick_slider .slick-arrow,
  .slick-arrow {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 9 !important;
  }
}


/* ─────────────────────────────────────────────
   5. SECTION / ROW SPECIFIC FIXES
   ───────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Section padding: reduce for mobile */
  .ttm-row {
    padding: 40px 0 !important;
  }

  /* Spacing utilities used in desktop layout: reset on mobile */
  .spacing-1,
  .spacing-2,
  .spacing-3,
  .spacing-4,
  .spacing-5,
  .spacing-6,
  .spacing-7,
  .spacing-8,
  .spacing-9,
  .spacing-10 {
    padding: 20px 15px !important;
    margin: 0 !important;
  }

  /* Negative margins that cause horizontal overflow */
  [class*="ml_"],
  [class*="mr_"],
  .ml_160,
  .margin_right_minus,
  .margin_left_minus {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Force images to be responsive */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Table overflow */
  table {
    display: block !important;
    overflow-x: auto !important;
    width: 100% !important;
  }

  /* Headings: scale down for mobile */
  h1 { font-size: 28px !important; line-height: 36px !important; }
  h2 { font-size: 24px !important; line-height: 32px !important; }
  h3 { font-size: 20px !important; line-height: 28px !important; }
  h4 { font-size: 18px !important; line-height: 26px !important; }

  /* Featured icon box sections */
  .featured-icon-box {
    margin-bottom: 20px !important;
    width: 100% !important;
  }

  /* Blog/Article cards in slider: full width */
  .featured-imagebox {
    width: 100% !important;
    margin-bottom: 20px !important;
  }

  /* The vertical separator that causes overflow */
  .ttm-vertical_sep {
    display: none !important;
  }

  /* bg-layer sections with absolute positioned children */
  .bg-layer > .container > .row {
    margin: 0 !important;
  }
  .bg-layer {
    overflow: hidden !important;
  }

  /* page wrapper */
  .page {
    overflow-x: hidden !important;
    width: 100% !important;
  }
}


/* ─────────────────────────────────────────────
   6. FOOTER — Fix distorted layout
   ───────────────────────────────────────────── */
@media (max-width: 767px) {
  .footer-nav-menu {
    flex-wrap: wrap !important;
  }
  .footer-nav-menu li {
    width: 50% !important;
    margin-bottom: 5px !important;
  }
  .second-footer .copyright,
  .first-footer .widget-area {
    text-align: center !important;
  }
  .widget-area {
    margin-bottom: 30px !important;
    width: 100% !important;
  }
}