/* =====================================================================
   Zamapunji V220 - Mobile scroll + TradingView carousel fix
   Builds on V219. Desktop remains untouched because all visual layout
   rules below are mobile/tablet scoped.
   ===================================================================== */

@media (max-width: 991.98px) {
  /* Stop mobile Safari/Chrome from treating the whole page like a forced
     100vh flex panel. This restores natural top-to-bottom scrolling so the
     header and footer are reachable with normal swipe gestures. */
  html,
  body {
    height: auto !important;
    min-height: 100% !important;
    display: block !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: auto !important;
  }
  body > .page-content,
  .page-content,
  body > div:not(#vanta-bg):not(#intro-loader):not(.custom-cursor) {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Keep sticky header visible and stable on phones. The desktop hide-on-scroll
     behaviour stays as-is above 991px. */
  .navbar,
  .navbar.hide {
    transform: none !important;
    transition: background-color .25s ease, box-shadow .25s ease !important;
    top: 0 !important;
    z-index: 1040 !important;
  }

  /* Third carousel: keep the live TradingView widget inside the mobile frame. */
  #heroCarousel .carousel-item:has(#tradingview_xauusd) {
    overflow: hidden !important;
    background: #050505 !important;
  }
  #heroCarousel .carousel-item:has(#tradingview_xauusd) > .d-flex {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    padding: 10px 0 !important;
    overflow: hidden !important;
    align-items: center !important;
  }
  #heroCarousel .carousel-item:has(#tradingview_xauusd) .container,
  #heroCarousel .carousel-item:has(#tradingview_xauusd) .container-max {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    overflow: hidden !important;
  }
  #heroCarousel .carousel-item:has(#tradingview_xauusd) h1 {
    font-size: clamp(18px, 5.4vw, 26px) !important;
    line-height: 1.1 !important;
    margin: 0 0 8px 0 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    text-align: left !important;
  }
  #tradingview_xauusd {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 210px !important;
    max-height: 210px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    border-radius: 10px !important;
  }
  #tradingview_xauusd iframe,
  #tradingview_xauusd > div,
  #tradingview_xauusd > div > div {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  /* Footer should sit in normal document flow, not as a flex-pushed panel. */
  footer {
    margin-top: 0 !important;
    flex-shrink: 0 !important;
    width: 100% !important;
  }
}

@media (max-width: 575.98px) {
  #heroCarousel .carousel-item:has(#tradingview_xauusd) .container,
  #heroCarousel .carousel-item:has(#tradingview_xauusd) .container-max {
    padding-left: 34px !important;
    padding-right: 34px !important;
  }
  #heroCarousel .carousel-item:has(#tradingview_xauusd) h1 {
    font-size: clamp(17px, 5.3vw, 22px) !important;
    margin-bottom: 6px !important;
  }
  #tradingview_xauusd {
    height: 178px !important;
    max-height: 178px !important;
  }
}

@media (max-width: 390px) {
  #heroCarousel .carousel-item:has(#tradingview_xauusd) .container,
  #heroCarousel .carousel-item:has(#tradingview_xauusd) .container-max {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
  #tradingview_xauusd {
    height: 166px !important;
    max-height: 166px !important;
  }
}