/* ==========================================================================
   Findry — Responsive rules (mobile-first refinements)
   Base styles in style.css assume mobile. These layer up for larger screens
   and tune a few components down for small screens.
   Breakpoints: <576 mobile · 576–991 tablet · 992+ desktop · 1200+ large
   ========================================================================== */

/* ---------- Small screens (<576px) ---------- */
@media (max-width: 575.98px) {
  .section { padding: var(--space-7) 0; }

  .hero { padding: var(--space-7) 0; }
  .hero-title { font-size: 2rem; }

  .search-shell { flex-direction: column; border-radius: var(--radius-md); }
  .search-shell .btn { width: 100%; justify-content: center; }

  .stat-strip { gap: var(--space-5); }

  .newsletter { padding: var(--space-5); }
  .newsletter-form { flex-direction: column; }
  .newsletter-form .btn { width: 100%; justify-content: center; }

  .toolbar { flex-direction: column; align-items: stretch; }

  .tool-card-actions { flex-wrap: wrap; }
  .tool-card-actions .btn { flex: 1 1 100%; }
  .fav-btn { flex: 0 0 100% !important; width: 100%; }

  .section-head { flex-direction: column; align-items: start; }

  .detail-hero { padding: var(--space-5); }
}

/* ---------- Tablet and below (<992px) ---------- */
@media (max-width: 991.98px) {
  /* Mobile nav: stack links, add breathing room */
  .navbar-collapse {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-top: var(--space-3);
    padding: var(--space-3);
    box-shadow: var(--shadow-md);
  }
  .navbar-nav .nav-link { padding: 0.65rem 0.85rem; }
  .header-cta { margin-top: var(--space-2); }
  .header-cta .btn { width: 100%; justify-content: center; }

  /* Filters become a top panel instead of a sticky sidebar */
  .filter-panel { position: static; margin-bottom: var(--space-5); }
  .toc { position: static; margin-bottom: var(--space-5); }
}

/* ---------- Desktop (>=992px) ---------- */
@media (min-width: 992px) {
  .navbar-nav .nav-link { font-size: var(--fs-sm); }
}

/* ---------- Large desktop (>=1200px) ---------- */
@media (min-width: 1200px) {
  .hero { padding: 5.5rem 0; }
  .container-xxl { max-width: 1240px; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .site-footer, .newsletter, .filter-panel, .tool-card-actions,
  .fav-btn, .btn { display: none !important; }
  body { background: #fff; }
}