/* D3 Homes — responsive layer.
   Inline styles on the elements below were authored for a fixed 1440px
   desktop canvas. Everything here overrides those inline styles (using
   !important, which is required to beat inline styling) at tablet and
   mobile widths so the same markup reflows instead of overflowing. */

html, body {
  overflow-x: hidden;
}

/* ---------- Fluid canvas (all breakpoints) ---------- */
.site-canvas {
  width: 100% !important;
  max-width: 1440px;
  margin: 0 auto;
}
.canvas-wrap {
  overflow-x: hidden !important;
}

/* ---------- Mobile nav toggle (hidden unless small screen) ---------- */
.nav-toggle-input { display: none; }
.nav-toggle-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 30px;
  height: 30px;
  cursor: pointer;
}
.nav-toggle-btn span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--green-dark);
  border-radius: 2px;
}

/* ================= TABLET ================= */
@media (max-width: 1024px) {
  .site-canvas > div {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  .site-nav { padding-left: 32px !important; padding-right: 32px !important; }

  /* 3- and 4-column grids -> 2 columns */
  [style*="grid-template-columns:repeat(3,minmax(0,1fr))"],
  [style*="grid-template-columns:repeat(4,minmax(0,1fr))"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ================= MOBILE ================= */
@media (max-width: 640px) {
  .site-canvas > div {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* ---- Nav: collapse to hamburger ---- */
  .site-nav {
    padding-left: 20px !important;
    padding-right: 20px !important;
    flex-wrap: wrap;
    position: relative;
  }
  .nav-toggle-btn { display: flex; }
  .site-nav > a[href="contact.html"] { display: none !important; }
  .nav-links {
    display: none !important;
    order: 4;
    width: 100%;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    padding-top: 16px;
    margin-top: 12px;
    border-top: 1px solid rgba(11,71,44,0.12);
  }
  .nav-toggle-input:checked ~ .nav-links { display: flex !important; }
  .nav-links a {
    width: 100%;
    padding: 10px 0 !important;
    font-size: 16px !important;
    border-bottom: none !important;
  }

  /* ---- Headings scale down ---- */
  h1 { font-size: clamp(28px, 8vw, 34px) !important; line-height: 1.18 !important; }
  h2 { font-size: clamp(22px, 6vw, 26px) !important; }
  h3 { font-size: clamp(17px, 5vw, 19px) !important; }

  /* ---- Grids collapse to a single column ---- */
  [style*="grid-template-columns:repeat(2,minmax(0,1fr))"],
  [style*="grid-template-columns:repeat(3,minmax(0,1fr))"],
  [style*="grid-template-columns:repeat(4,minmax(0,1fr))"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  [style*="grid-column:span 2"] { grid-column: span 1 !important; }

  /* ---- Large fixed-width flex halves -> stack full width ---- */
  [style*="flex:0 0 640px"],
  [style*="flex:0 0 620px"],
  [style*="flex:0 0 600px"],
  [style*="flex:0 0 520px"] {
    flex: 1 1 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Rows that pair a fixed-width half with an image/sidebar: stack them */
  [style*="align-items:center; gap:64px; padding:88px 64px"],
  [style*="align-items:center; gap:64px; padding:0 64px 96px"],
  [style*="padding:88px 64px; display:flex; gap:64px; align-items:center"],
  [style*="padding:32px 64px 80px; display:flex; gap:64px; align-items:flex-start"],
  [style*="padding:48px 64px 96px; display:flex; gap:56px; align-items:flex-start"] {
    flex-direction: column !important;
    gap: 32px !important;
  }

  /* Hero / story photo blocks: full width, natural height */
  [style*="width:640px; height:480px"],
  [style*="width:640px; height:420px"] {
    width: 100% !important;
    height: 260px !important;
  }

  /* Contact page: form card should not force a 640px basis */
  [style*="flex:0 0 640px; background:var(--white)"] {
    flex: 1 1 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* CTA banners: stack heading/copy above the button */
  [style*="background:var(--tan); padding:64px"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 40px 20px !important;
    text-align: left;
  }

  /* Featured / floor-plan card image height */
  [style*="height:200px; position:relative"] {
    height: 180px !important;
  }

  /* Footer bottom row wraps instead of overlapping */
  .site-canvas > div [style*="justify-content:space-between; padding-top:24px"] {
    flex-direction: column !important;
    gap: 6px !important;
  }

  /* Financing "how it works" numbered steps: let the row items not force min width */
  [style*="flex:0 0 40px"] { flex: 0 0 40px !important; }
}