/* CocoaSmart — mobile responsiveness for the React landing page.
   The kit uses inline styles, so overrides need !important. */

/* ---- Tablet & below: collapse all 2-col layout grids ---- */
@media (max-width: 920px) {
  /* Hero, Solution, WhyNow, FAQ, CTA two-column grids → single column */
  #root [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* Keep small card grids (Solution capability cards, WhyNow stats) two-up */
  #root [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ---- Phones ---- */
@media (max-width: 680px) {
  /* Header: stack logo / nav / button */
  #root header > .cs-container {
    height: auto !important;
    flex-wrap: wrap;
    padding-top: 14px;
    padding-bottom: 14px;
    row-gap: 10px !important;
  }
  #root header nav {
    order: 3;
    width: 100%;
    margin-left: 0 !important;
    flex-wrap: wrap;
    gap: 18px !important;
  }

  /* Type scale */
  #root h1 { font-size: 2.35rem !important; }
  #root h2 { font-size: 1.8rem !important; }

  /* Hero floating EUDR card: keep inside the viewport */
  #root [style*="left: -22px"] {
    left: 10px !important;
    width: min(230px, 78vw) !important;
  }

  /* CTA form fields: single column */
  #root form [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Stats: keep 2-up but tighten gap */
  #root [style*="grid-template-columns: 1fr 1fr"] {
    gap: 18px !important;
  }

  /* Solution offset cards: remove stagger so columns align */
  #root [style*="margin-top: 18px"][data-reveal] { margin-top: 0 !important; }

  /* Buttons: full-width tap targets in hero/CTA rows */
  #root [style*="flex-wrap: wrap"] > a[style*="border-radius"],
  #root [style*="flex-wrap: wrap"] > button[style*="border-radius"] {
    width: 100%;
    justify-content: center;
  }

  /* Footer bottom row: stack copyright and socials */
  #root footer [style*="justify-content: space-between"] {
    justify-content: center !important;
    text-align: center;
  }
}

/* ---- Small phones ---- */
@media (max-width: 400px) {
  #root h1 { font-size: 2rem !important; }
  #root [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}