/* ==========================================================================
   ChronicSync — Responsive overrides
   ========================================================================== */

/* ---- Header / navigation ---- */

/* Gradually tighten nav spacing just above the collapse breakpoint instead
   of letting 8 nav items + CTA crowd the logo. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .cs-navbar .nav-link { padding: 0.55rem 0.7rem; font-size: 0.9rem; }
}

/* Below xl (1200px) the navbar collapses into the mobile menu. */
@media (max-width: 1199.98px) {
  .cs-navbar .dropdown-menu,
  .cs-mega-menu {
    /* Bootstrap forces position:static here (mobile/tablet collapsed nav),
       but a CSS transform still applies regardless of position — reset it
       or the desktop centering transform pushes this off-screen. */
    transform: none;
    left: auto;
    border: none; box-shadow: none; padding-left: 1rem; width: 100%; margin-top: 0.25rem !important;
  }
  .cs-mega-menu .row > div { margin-bottom: 0.5rem; }
  .cs-mega-menu .mega-divider { border-left: none; border-top: 1px solid var(--cs-border); padding-top: 1rem; margin-top: 0.5rem; }

  /* Comfortable touch targets (>=44px) inside the collapsed mobile menu. */
  .navbar-collapse .nav-link { padding-top: 0.85rem; padding-bottom: 0.85rem; }
  .navbar-collapse .mega-link { padding-top: 0.75rem; padding-bottom: 0.75rem; }

  .navbar-collapse { max-height: calc(100vh - 70px); overflow-y: auto; }

  .navbar-collapse .cs-cta-btn {
    width: 100%;
    justify-content: center;
    margin-top: 0.5rem;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
  }

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

@media (max-width: 991.98px) {
  .cs-hero { text-align: center; }
  .cs-hero-actions,
  .cs-hero-trust,
  .cs-value-strip { justify-content: center; }
  .cs-hero-visual { margin-top: 2.5rem; }
  .step-connector::before { display: none; }
  .cs-showcase-app { grid-template-columns: 1fr; }
  .cs-showcase-sidebar { display: none; }
}

@media (max-width: 767.98px) {
  .cs-kpi-row { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
  .cs-kpi .value { font-size: 1.15rem; }
  .cs-phone { width: 220px; }
  .cs-final-cta { text-align: center; }
  .cs-final-cta .cta-actions { justify-content: center; }
  .cs-showcase-kpis { grid-template-columns: repeat(2, 1fr); }
  .cs-benefit-illustration { margin-top: 1.25rem; }
}

@media (max-width: 575.98px) {
  .cs-hero-actions .btn,
  .cs-hero-actions .cs-btn,
  .cs-final-cta .btn,
  .cs-revenue-cta-row .cs-btn { width: 100%; margin-right: 0; }
  .cs-kpi-row { grid-template-columns: 1fr 1fr 1fr; }
  .cs-dashboard-body { padding: 1rem 0.85rem; }
  .cs-patient-row .metric-value { font-size: 0.82rem; }
  .cs-showcase-kpis { grid-template-columns: 1fr 1fr; }
  .cs-showcase-main { padding: 1rem; }
  .cs-topbar { display: none; }
}

.no-scroll-x { overflow-x: hidden; }