/* ==========================================================================
   AppZoho — Responsive Rules
   Mobile-first base lives in style.css; breakpoint overrides live here.
   Breakpoints: 480 / 768 (tablet) / 1024 (desktop) / 1280 (wide)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base (mobile) — nav collapses, single-column grids
   -------------------------------------------------------------------------- */
.nav-links { display: none; }
.nav-toggle { display: inline-flex; }

.hero-grid { grid-template-columns: 1fr; }
.hero-buttons.btn-group { flex-direction: column; align-items: stretch; }

.grid-2,
.grid-3,
.grid-4 { grid-template-columns: 1fr; }

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

.legal-layout { grid-template-columns: 1fr; }
.legal-toc { position: static; }

.directory-item { flex-direction: column; align-items: flex-start; }
.directory-item-main { flex-direction: column; align-items: flex-start; text-align: left; }

.app-hero-header { flex-direction: column; align-items: flex-start; }

/* --------------------------------------------------------------------------
   ≥480px — small phones landscape / large phones
   -------------------------------------------------------------------------- */
@media (min-width: 480px) {
  .hero-buttons.btn-group { flex-direction: row; align-items: center; }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------------------------
   ≥768px — tablet
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .directory-item { flex-direction: row; align-items: center; }
  .directory-item-main { flex-direction: row; align-items: center; }
  .app-hero-header { flex-direction: row; align-items: center; }
  .legal-content h2 { font-size: var(--text-2xl); }
}

/* --------------------------------------------------------------------------
   ≥1024px — desktop
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .nav-links { display: flex; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none !important; }

  .hero-grid { grid-template-columns: 1.05fr 0.95fr; }

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

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

  .legal-layout { grid-template-columns: 240px 1fr; }
  .legal-toc { position: sticky; }
}

/* --------------------------------------------------------------------------
   ≥1280px — wide desktop
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  :root { --container-width: 1240px; }
}

/* --------------------------------------------------------------------------
   Print — legal pages should print cleanly
   -------------------------------------------------------------------------- */
@media print {
  .navbar, .site-footer, .mobile-nav, .legal-toc, .theme-toggle, .nav-toggle { display: none !important; }
  body { background: #fff; color: #000; }
  .legal-layout { grid-template-columns: 1fr; }
}