/* ==========================================================================
   Responsive Breakpoints — Mobile First
   ========================================================================== */

/* --- Mobile (default) --- */

.nav__list {
  display: none;
}

.nav__toggle {
  display: block;
}

.header__phone {
  display: none;
}

.mobile-cta {
  display: block;
}

/* Mobile nav open state */
.nav--open .nav__list {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  padding: var(--spacing-sm) var(--spacing-md);
  box-shadow: var(--shadow-md);
}

.nav--open .nav__toggle span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.nav--open .nav__toggle span:nth-child(2) {
  opacity: 0;
}

.nav--open .nav__toggle span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Card grids stack on mobile */
.card-grid,
.steps,
.areas,
.resource-grid,
.city-grid {
  grid-template-columns: 1fr;
}

.about-grid {
  grid-template-columns: 1fr;
}

.footer__grid {
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

.glossary-list {
  columns: 1;
}

.hero h1 {
  font-size: var(--font-size-2xl);
}

.page-header h1 {
  font-size: var(--font-size-2xl);
}

/* Add bottom padding for mobile CTA bar */
body {
  padding-bottom: 72px;
}

/* --- Tablet: 768px+ --- */
@media (min-width: 768px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .steps {
    grid-template-columns: repeat(3, 1fr);
  }

  .areas {
    grid-template-columns: repeat(2, 1fr);
  }

  .resource-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .city-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-grid {
    grid-template-columns: 1fr 2fr;
  }

  .glossary-list {
    columns: 2;
  }

  .footer__grid {
    grid-template-columns: 2fr 1fr 1fr;
  }

  .hero h1 {
    font-size: var(--font-size-3xl);
  }

  .page-header h1 {
    font-size: var(--font-size-3xl);
  }
}

/* --- Desktop: 1024px+ --- */
@media (min-width: 1024px) {
  .nav__list {
    display: flex;
  }

  .nav__toggle {
    display: none;
  }

  .header__phone {
    display: flex;
  }

  .mobile-cta {
    display: none;
  }

  body {
    padding-bottom: 0;
  }

  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .hero h1 {
    font-size: var(--font-size-4xl);
  }
}