/* ==========================================================================
   Charles and Lois Home — Responsive layer
   Base CSS and components.css are written mobile-first. This file only adds
   or adjusts rules at larger breakpoints — it should never need to "undo"
   mobile styling if the base rules are written correctly.

   Breakpoints used across the project:
     480px  — large phones
     768px  — tablets
     1024px — small desktop / nav switch point
     1280px — full desktop
   ========================================================================== */

/* ---- Tablet: 768px+ ---- */
@media (min-width: 768px) {
  .site-footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

/* ---- Desktop nav switch: 1024px+ ----
   Below this width the site uses the mobile menu; above it, the full
   horizontal nav takes over and the mobile trigger/panel are hidden. */
@media (min-width: 1024px) {
  .nav-desktop {
    display: block;
  }

  .site-header__cta {
    display: inline-flex;
  }

  .nav-toggle {
    display: none;
  }

  .nav-mobile {
    display: none;
  }

  .brand__logo {
    height: 60px;
  }
}

/* ---- Large desktop: 1280px+ ---- */
@media (min-width: 1280px) {
  :root {
    --header-height: 92px;
  }
}