/* ---- Mobile responsiveness (added after the initial static export; the
   design source shipped with zero @media queries / desktop only) ---- */

html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; overflow-wrap: break-word; word-break: break-word; }
img, picture { max-width: 100%; }

.nav-toggle-input { display: none; }
.nav-toggle-label {
  display: none;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  color: #EAF0F5;
  padding: 4px 2px;
  user-select: none;
}

@media (max-width: 860px) {
  [style*="max-width: 1280px"] { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="column-count"] { column-count: 1 !important; }

  /* decorative absolutely-positioned overlay cards were designed to hang off
     the edge of a wide desktop photo — pull them back inside the viewport */
  [style*="position: absolute; left: -"] { left: 12px !important; }
  [style*="position: absolute; right: -"] { right: 12px !important; }

  /* the "scrolled" mini reviews badge only ever appears via JS (which this
     static site doesn't run), so it's permanently invisible dead weight
     that was still eating flex layout width and pushing the hamburger
     onto its own line — drop it on mobile */
  header a[style*="pointer-events: none"] { display: none !important; }

  header nav { display: none !important; }
  .nav-toggle-label { display: block; margin-left: auto; }
  header:has(.nav-toggle-input:checked) nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #063863;
    padding: 10px 20px 24px;
    box-shadow: 0 18px 30px rgba(10,37,64,0.28);
  }
  header:has(.nav-toggle-input:checked) nav > * { width: 100%; }
  header:has(.nav-toggle-input:checked) nav .svc-panel {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding-top: 4px !important;
  }
  header:has(.nav-toggle-input:checked) nav .svc-panel > div {
    box-shadow: none !important;
    min-width: 0 !important;
    padding: 0 0 0 14px !important;
  }
  header > div { flex-wrap: nowrap !important; }
}

@media (max-width: 600px) {
  [style*="max-width: 1280px"] { padding-left: 16px !important; padding-right: 16px !important; }
}

/* Sticky mobile-only bottom CTA bar (New Patient Special / Call Now) */
.mobile-sticky-cta { display: none; }
@media (max-width: 860px) {
  body { padding-bottom: 64px; }
  .mobile-sticky-cta {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    box-shadow: 0 -6px 20px rgba(10,37,64,0.22);
  }
  .mobile-sticky-cta a {
    flex: 1;
    text-align: center;
    padding: 16px 8px;
    font-family: 'DM Sans', Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.01em;
  }
  .mobile-sticky-cta a.msc-book {
    background: #C99812;
    color: #063863;
  }
  .mobile-sticky-cta a.msc-call {
    background: #0A2540;
    color: #F7F4EC;
  }
}

@media (max-width: 860px) {
  [style*="font-size: 24px"] { font-size: 23px !important; }
  [style*="font-size: 26px"] { font-size: 24px !important; }
  [style*="font-size: 27px"] { font-size: 24px !important; }
  [style*="font-size: 28px"] { font-size: 24px !important; }
  [style*="font-size: 30px"] { font-size: 25px !important; }
  [style*="font-size: 32px"] { font-size: 26px !important; }
  [style*="font-size: 34px"] { font-size: 27px !important; }
  [style*="font-size: 36px"] { font-size: 28px !important; }
  [style*="font-size: 38px"] { font-size: 28px !important; }
  [style*="font-size: 40px"] { font-size: 29px !important; }
  [style*="font-size: 42px"] { font-size: 30px !important; }
  [style*="font-size: 44px"] { font-size: 31px !important; }
  [style*="font-size: 46px"] { font-size: 32px !important; }
  [style*="font-size: 50px"] { font-size: 33px !important; }
  [style*="font-size: 52px"] { font-size: 34px !important; }
  [style*="font-size: 54px"] { font-size: 35px !important; }
  [style*="font-size: 56px"] { font-size: 36px !important; }
  [style*="font-size: 58px"] { font-size: 36px !important; }
  [style*="font-size: 60px"] { font-size: 37px !important; }
  [style*="font-size: 68px"] { font-size: 40px !important; }
}