/* FreshFuel — Responsive overrides
   Loaded last so it wins the cascade without !important.
   Component files hold the desktop-first / mobile-first base rules;
   this file only adjusts what genuinely differs per breakpoint. */

/* ---------- Mobile (< 480px) ---------- */
@media (max-width: 480px) {
  :root {
    --container-padding: 16px;
    --space-2xl: 56px;
    --space-xl: 32px;
  }

  .hero__ctas .btn {
    flex: 1;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- Tablet (481px – 767px) ---------- */
@media (min-width: 481px) and (max-width: 767px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Below desktop nav breakpoint ---------- */
@media (max-width: 1023px) {
  .menu-toolbar {
    position: static;
  }
}

/* ---------- Large desktop (>= 1440px) ---------- */
@media (min-width: 1440px) {
  :root {
    --container-padding: 40px;
  }
}

/* ---------- Prevent horizontal overflow globally ---------- */
html,
body {
  overflow-x: hidden;
}

img {
  max-width: 100%;
}