/* =========================================================
   Apex Home Care NJ — responsive.css
   Breakpoints: 1080px, 960px (menu collapses), 640px (phones)
   ========================================================= */

@media (max-width: 1080px) {
  .site-nav { gap: 1.25rem; }
  .site-nav ul { gap: 1.1rem; }
  .phone-link { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 960px) {
  /* Mobile menu */
  .nav-toggle { display: block; }
  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
    padding: 1.5rem;
    background: var(--white);
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  }
  .site-nav.is-open { visibility: visible; opacity: 1; transform: none; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav ul a {
    display: block;
    padding-block: 1rem;
    border-bottom: 1px solid var(--sky-line);
    font-size: 1.2rem;
  }
  .site-nav ul a[aria-current="page"] { border-bottom-color: var(--sky-line); color: var(--green-dark); }
  .logo img { height: 52px; }
  .nav-actions { flex-direction: column; align-items: stretch; }
  .phone-link { display: block; padding: 0.5rem; text-align: center; }
  .nav-actions .btn { min-height: 56px; }

  /* Layouts collapse to one column */
  .hero-grid,
  .two-col,
  .two-col.wide-left,
  .two-col.wide-right,
  .service-detail { grid-template-columns: 1fr; }
  .hero h1 { max-width: 20ch; }
  .finder-result,
  .side-panel { position: static; min-height: 0; }

  .steps { grid-template-columns: 1fr; gap: 2rem; }
  .step { display: grid; grid-template-columns: 56px 1fr; column-gap: 1.25rem; }
  .step-num { grid-row: span 2; margin: 0; }
  .step:not(:last-child)::after {
    top: 64px;
    bottom: -1.5rem;
    left: 27px;
    right: auto;
    width: 2px;
    height: auto;
  }

  .values { grid-template-columns: 1fr; gap: 1.75rem; }
  .reviews { grid-template-columns: 1fr; }
  .review-feature { grid-row: auto; }
  .section-head-row { flex-direction: column; align-items: flex-start; }
  .cta-inner { flex-direction: column; align-items: flex-start; }
  .opening { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  :root { --header-h: 68px; }
  .logo img { height: 44px; }

  .services { grid-template-columns: 1fr; }
  .form-row,
  .check-grid { grid-template-columns: 1fr; }
  .form-row { gap: 0; }

  .hero-actions .btn,
  .cta-actions,
  .cta-actions .btn { width: 100%; }

  .day-card { padding: 1.5rem 1.25rem 1rem; }
  .day-timeline li { grid-template-columns: 1fr; gap: 0.15rem; }

  .service-detail,
  .opening,
  .finder-result,
  .side-panel { padding: 1.5rem; }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .site-header,
  .site-footer,
  .cta-band,
  .nav-toggle { display: none; }
  body { font-size: 12pt; }
}