/* Container Connect — site-wide responsive tweaks.
   Foundations live in foundations.css; this file is for layout queries
   only so responsive breakpoints don't pollute the design system. */

html, body {
  margin: 0;
  background: #0A1410;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;          /* guardrail against horizontal scroll on mobile */
}
body.cc-page { font-family: Inter, system-ui, sans-serif; }
#root { min-height: 100vh; overflow-x: hidden; }

/* Hide default focus rings; we provide sage focus on interactive elems. */
*:focus-visible { outline: 2px solid rgba(123,197,127,0.5); outline-offset: 2px; border-radius: 4px; }

a { color: inherit; }

/* Prevent long inline content (URLs, emails) from pushing layout wide */
img, svg, video { max-width: 100%; height: auto; }
input, textarea, select, button { max-width: 100%; }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #0A1410; }
::-webkit-scrollbar-thumb { background: #1F2E29; border-radius: 6px; border: 3px solid #0A1410; }
::-webkit-scrollbar-thumb:hover { background: #3A4541; }

/* ─────────────────────────────────────────────────────────────
   Responsive grids — cascading breakpoints
   1180 → tablet   · 900 → large phone  · 720 → phone  · 540 → narrow phone
   ───────────────────────────────────────────────────────────── */

@media (max-width: 1180px) {
  .cc-5col { grid-template-columns: repeat(3, 1fr) !important; }
  .cc-4col { grid-template-columns: repeat(2, 1fr) !important; }
  .cc-footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr !important; }
  .cc-footer-grid > div:nth-child(5) { grid-column: 2 / span 3; }
}

@media (max-width: 900px) {
  .cc-nav-links { display: none !important; }
  .cc-nav-cta { margin-left: auto !important; }
  .cc-nav-burger { display: inline-flex !important; margin-left: 16px !important; }
  .cc-3col { grid-template-columns: 1fr !important; }
  .cc-stat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px; }
  .cc-stat-grid > div { border-right: none !important; padding: 12px !important; }
  .cc-cta-grid { grid-template-columns: 1fr !important; }
  .cc-cta-grid > div:last-child { align-items: stretch !important; flex-direction: row !important; }
}

@media (max-width: 720px) {
  .cc-5col { grid-template-columns: repeat(2, 1fr) !important; }
  .cc-4col { grid-template-columns: 1fr !important; }
  .cc-footer-grid { grid-template-columns: 1fr 1fr !important; }
  .cc-footer-grid > div:first-child { grid-column: 1 / -1; }
  .cc-footer-grid > div:nth-child(5) { grid-column: auto; }
  .cc-browse-grid { grid-template-columns: 1fr !important; }
  .cc-browse-search { grid-template-columns: 1fr !important; }
  .cc-detail-grid { grid-template-columns: 1fr !important; }
  .cc-detail-side { position: static !important; width: auto !important; }
  .cc-founder { grid-template-columns: 1fr !important; text-align: center; }
  .cc-founder img { margin: 0 auto; }

  /* Newly covered grids ────────────────────────────────────── */
  .cc-contact-grid { grid-template-columns: 1fr !important; }   /* contact page */
  .cc-form-grid    { grid-template-columns: 1fr !important; }   /* 2-col form rows everywhere */
  .cc-step-grid    { grid-template-columns: 1fr !important; }   /* how-it-works expanded steps */

  /* Final-CTA button row — was 'flex-direction: row' at 900px which overflows narrow phones */
  .cc-cta-grid > div:last-child { flex-direction: column !important; gap: 10px !important; }

  /* Hide the desktop "Sign in" link — it's now in the mobile menu panel */
  .cc-nav-signin { display: none !important; }

  /* Pricing tier cards on For Haulers page (3-col at desktop) */
  .cc-3col > div { max-width: 100%; }
}

@media (max-width: 600px) {
  /* Hero ZIP pill — stack vertically so input gets full width.
     Otherwise "Enter your ZIP code" gets truncated to "Enter your". */
  .hero-zip-form {
    flex-direction: column !important;
    border-radius: 16px !important;
    padding: 10px !important;
    gap: 10px !important;
  }
  .hero-zip-form > div {
    width: 100%;
    padding: 12px 16px !important;
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    box-sizing: border-box;
  }
  .hero-zip-form > button,
  .hero-zip-form > a {
    width: 100% !important;
    justify-content: center !important;
  }
}

@media (max-width: 540px) {
  /* Narrow-phone specific: collapse all grids to single column */
  .cc-5col      { grid-template-columns: 1fr !important; }
  .cc-stat-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .cc-stat-grid > div + div { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 16px !important; }
  .cc-footer-grid { grid-template-columns: 1fr !important; }
  .cc-footer-grid > div { grid-column: auto !important; }

  /* Reduce card padding further */
  .cc-founder { padding: 24px !important; }
}