/* ── Footer Mobile Fix ── 
   Add this to your main.css or as a <style> block in home.html
*/

@media (max-width: 900px) {
  .footer-container {
    flex-direction: column !important;
    flex-wrap: wrap !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    gap: 2rem !important;
    align-items: stretch !important;
  }

  /* Two link columns side by side on tablet */
  .footer-section:not(.company-section) {
    flex: 1 1 45% !important;
    max-width: 50% !important;
  }

  .footer-section.company-section {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  .footer-container {
    flex-direction: column !important;
    padding-left: 1.2rem !important;
    padding-right: 1.2rem !important;
    gap: 1.5rem !important;
  }

  /* All sections full width on small mobile */
  .footer-section,
  .footer-section.company-section,
  .footer-section:not(.company-section) {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Prevent text overflow */
  .footer-container * {
    word-break: break-word;
  }

  /* Newsletter input full width */
  .newsletter-form form {
    display: flex;
    width: 100%;
  }
  .newsletter-form input[type="email"] {
    flex: 1;
    min-width: 0;
  }

  /* Action buttons stack vertically */
  .action-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .action-buttons .btn {
    text-align: center;
    width: 81%;
  }

  /* Footer bottom */
  .footer-bottom {
    text-align: center;
    padding: 1rem 1.2rem;
  }
  .footer-bottom .social-icons {
    justify-content: center !important;
    margin-top: 0.8rem;
  }
}