/* ==========================================================================
   Dr. Ninad Mahale – Responsive Stylesheet (responsive.css)
   Mobile-first breakpoints layered on top of style.css
   --------------------------------------------------------------------------
   Breakpoints:
     - <= 1199px  Large tablets / small desktops
     - <= 991px   Tablets
     - <= 767px   Large phones
     - <= 575px   Small phones
   ========================================================================== */

/* Large desktops down ----------------------------------------------------- */
@media (max-width: 1199.98px) {
  .floating-card { padding: 12px 14px; }
  .fc-1 { left: -10px; }
  .fc-2 { right: -16px; }
  .cta-banner { padding: 50px 40px; }
}

/* Tablets ----------------------------------------------------------------- */
@media (max-width: 991.98px) {
  section { padding: 70px 0; }

  /* Navigation collapses */
  .site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: auto !important;
    min-height: var(--header-h) !important;
    align-items: flex-start;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    z-index: 2147483000;
  }
  .site-header.scrolled {
    height: auto !important;
    min-height: var(--header-h) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
  .navbar { padding: 12px 0; }
  .navbar .container {
    align-items: center;
    gap: 10px;
  }
  .brand {
    flex: 1 1 auto;
    max-width: calc(100% - 54px);
  }
  .brand-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .brand-name small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .navbar-toggler {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: grid !important;
    place-items: center;
    border-radius: 12px;
    background: var(--white);
    box-shadow: var(--shadow-sm);
    position: relative;
    z-index: 2;
  }
  .navbar-toggler i { display: none; }
  .navbar-toggler::before,
  .navbar-toggler::after {
    content: "";
    position: absolute;
    width: 22px;
    height: 2px;
    border-radius: 999px;
    background: var(--primary);
    transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
  }
  .navbar-toggler::before { box-shadow: 0 -7px 0 var(--primary), 0 7px 0 var(--primary); }
  .navbar-toggler::after { opacity: 0; }
  .navbar-toggler[aria-expanded="true"]::before {
    box-shadow: none;
    transform: rotate(45deg);
  }
  .navbar-toggler[aria-expanded="true"]::after {
    opacity: 1;
    transform: rotate(-45deg);
  }
  .navbar-collapse {
    flex-basis: 100%;
    position: relative;
    z-index: 1;
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 18px 22px;
    margin-top: 12px;
    max-height: calc(100vh - var(--header-h) - 20px);
    overflow-y: auto;
    box-shadow: var(--shadow-md);
  }
  .nav-link { padding: 10px 6px !important; }
  .nav-link::after { display: none; }
  .navbar .btn { margin-top: 12px; width: 100%; justify-content: center; }

  /* Hero stacks */
  .hero { text-align: center; padding-top: calc(var(--header-h) + 30px); }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-actions, .hero-trust { justify-content: center; }
  .hero-visual { margin-top: 50px; }
  .floating-card { display: none; }
  .hero-blob { opacity: 0.4; }

  /* About */
  .about-img-wrap { margin-bottom: 40px; max-width: 520px; margin-left: auto; margin-right: auto; }
  .about-badge { right: 10px; }

  /* Timeline becomes single column */
  .timeline::before { left: 22px; }
  .tl-item { width: 100%; left: 0 !important; text-align: left !important; padding: 0 0 36px 56px; }
  .tl-item .tl-dot { left: 14px !important; right: auto !important; }

  /* Service detail */
  .service-detail { padding: 34px 28px; }

  /* Emergency CTA */
  .emergency-cta { text-align: center; justify-content: center; }
}

/* Large phones ------------------------------------------------------------ */
@media (max-width: 767.98px) {
  :root { --header-h: 70px; }

  section { padding: 60px 0; }
  .section-head { margin-bottom: 44px; }

  .hero-title { font-size: 2.1rem; }
  .hero-trust { gap: 24px; }
  .hero-trust-item strong { font-size: 1.35rem; }

  .feature-card, .service-card { padding: 30px 24px; }

  .cta-banner { padding: 44px 26px; text-align: center; }
  .cta-banner .text-end { text-align: center !important; margin-top: 24px; }

  .form-card { padding: 30px 22px; }
  .availability-card { padding: 30px 24px; }

  .stat-item { margin-bottom: 26px; }

  .map-wrap iframe { height: 320px; }

  .back-to-top { bottom: 20px; right: 20px; width: 44px; height: 44px; }
  .quick-call { bottom: 20px; left: 20px; width: 48px; height: 48px; }
}

/* Small phones ------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .btn { padding: 12px 24px; font-size: 0.92rem; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; justify-content: center; }

  .brand { font-size: 1.1rem; }
  .brand-icon { width: 38px; height: 38px; }

  .section-title { font-size: 1.6rem; }

  .about-badge { position: static; display: inline-block; margin-top: 16px; }

  .service-detail { padding: 28px 20px; }
  .service-detail h3 { font-size: 1.3rem; }

  .testimonial-card { padding: 28px 22px; }

  .footer-bottom { text-align: center; }
  .footer-bottom .text-lg-end { text-align: center !important; margin-top: 10px; }
}

/* Reduced motion preference ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Permanent mobile header lock -------------------------------------------- */
@media (max-width: 991.98px) {
  body .site-header,
  body .site-header.scrolled {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    min-height: var(--header-h) !important;
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    /* translate3d + backface-visibility pin the header to its own stable
       compositor layer so it never repaints away during scroll */
    transform: translate3d(0, 0, 0) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    /* CRITICAL: backdrop-filter on a fixed element flickers / disappears on
       Android Chrome & Samsung Internet during scroll. Disable it on mobile. */
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: var(--white) !important;
    z-index: 2147483000 !important;
    box-shadow: var(--shadow-sm);
    /* No scroll-driven animation or transition may ever touch the header */
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  body .site-header .navbar {
    width: 100% !important;
    display: flex !important;
  }

  body .site-header .navbar .container {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }

  body .site-header .navbar-toggler {
    position: fixed !important;
    top: 13px !important;
    right: 14px !important;
    width: 44px !important;
    height: 44px !important;
    display: grid !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 2147483001 !important;
  }

  body .site-header .navbar-collapse {
    position: fixed !important;
    top: calc(var(--header-h) + 8px) !important;
    left: 14px !important;
    right: 14px !important;
    width: auto !important;
    max-height: calc(100vh - var(--header-h) - 24px) !important;
    overflow-y: auto !important;
    z-index: 2147483000 !important;
  }

  body .site-header .brand {
    max-width: calc(100% - 70px) !important;
  }
}