/* ════════════════════════════════
   GLOBAL RESPONSIVE OVERRIDES
════════════════════════════════ */

/* Apply box-sizing globally to prevent padding from expanding widths */
*, *::before, *::after {
  box-sizing: border-box !important;
}

/* Ensure images, videos, and iframes don't overflow */
img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* Tablet & Smaller Desktop Adjustments */
@media (max-width: 1024px) {
  /* Reduce huge paddings on hero/sections */
  .page-hero, .hero {
    padding: 4rem 2rem !important;
  }
  
  /* Make sure container classes have breathing room */
  .container, .inner-wrap, [class*="inner"] {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

/* Mobile Devices (Smartphones) */
@media (max-width: 768px) {
  /* Convert generic flex rows to columns */
  .flex-row, .grid {
    flex-wrap: wrap !important;
  }
  
  /* Fix specific components that are side-by-side */
  .footer-main > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
  }
  
  .contact-inner, .about-inner, .stats-bar-inner, .ph-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
  }
  
  /* Fix navbar logo on mobile */
  .nav-logo-text {
    white-space: nowrap !important;
  }
  .nav-logo-name {
    font-size: 0.85rem !important;
  }
  .nav-logo-name span {
    font-size: 0.75rem !important;
  }
  .nav-logo-sub {
    font-size: 0.75rem !important;
  }

  /* Prevent text from overflowing */
  p, h1, h2, h3, h4, h5, h6 {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  /* Scale down huge typography */
  h1 {
    font-size: 2rem !important;
    line-height: 1.2 !important;
  }
  h2 {
    font-size: 1.75rem !important;
    line-height: 1.3 !important;
  }
  h3 {
    font-size: 1.5rem !important;
  }
  
  /* Reduce padding on general sections */
  section, .section {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  
  /* Form inputs should be 100% */
  input, textarea, select {
    max-width: 100% !important;
    width: 100% !important;
  }
  
  /* Override any fixed widths */
  
  /* For tables that might overflow horizontally */
  table, .table-container {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* Small Phones (iPhone SE, etc.) */
@media (max-width: 480px) {
  .page-hero, .hero {
    padding: 3rem 1rem !important;
  }
  
  h1 {
    font-size: 1.75rem !important;
  }
  h2 {
    font-size: 1.5rem !important;
  }
  
  .btn, button:not(.hamburger), .submit-btn, [class*="btn"] {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    margin-bottom: 1rem !important;
  }
}