/* =============================================================
   MOBILE OVERRIDES — bhagavan-site
   Loaded after style.css. Uses !important to beat inline styles
   and high-specificity rules. Desktop untouched.
   ============================================================= */

/* ---- Hide injected mobile quote link on desktop ---- */
.mobile-quote-link {
  display: none;
}

/* ---- Prevent horizontal scroll globally ---- */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* ============================================================= */
/* TABLET + PHONE  ≤ 768px                                       */
/* ============================================================= */
@media (max-width: 768px) {

  /* Show mobile-only quote link in nav drawer */
  .mobile-quote-link {
    display: block !important;
    margin: 16px 24px 0 !important;
    padding: 13px 24px !important;
    background: #c41e3a !important;
    color: #fff !important;
    border-radius: 4px !important;
    text-align: center !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    width: calc(100% - 48px) !important;
    border-bottom: none !important;
  }

  .mobile-quote-link:hover {
    background: #a01830 !important;
    color: #fff !important;
  }

  /* ---- Overflow guard ---- */
  body {
    overflow-x: hidden !important;
  }

  /* ---- All media stays in bounds ---- */
  img, video, iframe, embed, object, picture {
    max-width: 100% !important;
    height: auto;
  }

  /* ---- Grid children must not overflow their tracks ---- */
  [style*="display: grid"] > *,
  .footer-container > *,
  .services-cards-grid > *,
  .dual-col-container > * {
    min-width: 0;
  }

  /* ================================================================
     HAMBURGER BUTTON — visible on dark header
     ================================================================ */
  #hamburger.hamburger--redesign {
    display: flex !important;
    z-index: 10000 !important;
    cursor: pointer;
    background: none !important;
    border: none !important;
    padding: 8px !important;
  }

  .hamburger span,
  #hamburger.hamburger--redesign span {
    background-color: #c41e3a !important;
    display: block !important;
    height: 2.5px !important;
    width: 28px !important;
    border-radius: 2px !important;
  }

  /* ================================================================
     MOBILE NAV DRAWER
     ================================================================ */
  #mainNav.nav--redesign {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    width: 75% !important;
    max-width: 300px !important;
    height: 100vh !important;
    background: #fff !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 72px 0 24px !important;
    gap: 0 !important;
    box-shadow: -4px 0 24px rgba(0,0,0,0.18) !important;
    transition: right 0.3s ease !important;
    z-index: 9999 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  #mainNav.nav--redesign.mobile-open {
    right: 0 !important;
  }

  #mainNav.nav--redesign a {
    color: #111 !important;
    width: 100% !important;
    padding: 14px 24px !important;
    font-size: 0.95rem !important;
    border-bottom: 1px solid #f0f0f0 !important;
    display: block !important;
    white-space: nowrap;
    overflow: visible;
  }

  #mainNav.nav--redesign a:hover,
  #mainNav.nav--redesign a.active {
    color: #c41e3a !important;
    background: #fafafa !important;
  }

  #mobileNavOverlay {
    display: none;
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 9998;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  #mobileNavOverlay.active {
    display: block;
  }

  /* ================================================================
     HOME PAGE — hide fleet section on mobile (too complex to reflow)
     ================================================================ */
  .our-fleet-section {
    display: none !important;
  }

  /* ================================================================
     COLLAPSE MULTI-COLUMN GRIDS
     ================================================================ */

  /* 2-col symmetric */
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Asymmetric 2-col */
  [style*="grid-template-columns: 1.5fr 1fr"],
  [style*="grid-template-columns: 1.2fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* 3-col grids */
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(3, minmax"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* 4-col grids → 2 col on tablet */
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* Class-based grids */
  .services-cards-grid,
  .dual-col-container {
    grid-template-columns: 1fr !important;
  }

  /* ================================================================
     ABOUT PAGE — ID-targeted grid collapses (guaranteed override)
     ================================================================ */
  #about-company-grid,
  #about-mv-grid,
  #about-capabilities-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  #about-company-grid > div,
  #about-mv-grid > div,
  #about-capabilities-grid > div {
    padding-right: 0 !important;
    min-width: 0;
  }

  /* Company info flex rows: ensure value fills remaining space */
  #about-company-grid [style*="display: flex"] > [style*="flex: 1"] {
    flex: 1 !important;
    min-width: 0;
    overflow-wrap: break-word;
  }

  /* ================================================================
     FOOTER — high-specificity fix
     body.home-redesign .footer-container has no media query
     so we must match that specificity + !important
     ================================================================ */
  body.home-redesign .footer-container,
  .footer-container {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding-top: 32px !important;
    padding-bottom: 24px !important;
  }

  /* ================================================================
     REDUCE LARGE GAPS
     ================================================================ */
  [style*="gap: 100px"] { gap: 24px !important; }
  [style*="gap: 60px"]  { gap: 20px !important; }
  [style*="gap: 50px"]  { gap: 20px !important; }
  [style*="gap: 40px"]  { gap: 16px !important; }

  /* ================================================================
     CONTAINER PADDING
     ================================================================ */
  .container,
  body.home-redesign .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ================================================================
     ABOUT PAGE — company info flex rows
     Make label wrap below value instead of squeezing
     ================================================================ */
  [style*="flex: 0 0 130px"] {
    flex: 0 0 110px !important;
    min-width: 0 !important;
    font-size: 0.78rem !important;
  }

  /* ================================================================
     TYPOGRAPHY — only break long words, not normal text
     ================================================================ */
  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }

  /* ================================================================
     FORM FIELDS
     ================================================================ */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="date"],
  input[type="file"],
  select,
  textarea {
    font-size: 16px !important;
    width: 100% !important;
  }

  /* ================================================================
     TABLES
     ================================================================ */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

}

/* ============================================================= */
/* PHONE  ≤ 480px                                                */
/* ============================================================= */
@media (max-width: 480px) {

  /* Everything single column */
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(3, minmax"],
  [style*="grid-template-columns: repeat(2, 1fr)"],
  [style*="grid-template-columns: 1fr 1fr"],
  .services-cards-grid,
  .dual-col-container {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body.home-redesign .footer-container,
  .footer-container {
    grid-template-columns: 1fr !important;
  }

  /* Tighter container */
  .container,
  body.home-redesign .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Stack about page label above value on tiny screens */
  [style*="flex: 0 0 130px"] {
    flex: none !important;
    width: 100% !important;
    margin-bottom: 2px !important;
    font-size: 0.72rem !important;
  }

}