/* =======================================================
   Clearview Dental — Responsive Overrides
   Target: all viewports not already covered by style.css
   ======================================================= */

/* ─── Global: prevent horizontal overflow ───────────────
   Absolutely-positioned hero image and decorative elements
   can cause a horizontal scrollbar on narrow viewports.     */
#wrapper {
  overflow-x: hidden;
}

/* ─── Hero Section ──────────────────────────────────────
   The section has 120px padding (desktop) → 60px (≤992px)
   → 40px (≤767px) from the framework. We need a comfortable
   min-height and ensure the transparent header (70px abs)
   doesn't collide with heading text.                        */
#section-intro {
  min-height: 90vh;
}

@media (max-width: 991px) {
  #section-intro {
    min-height: 75vh;
    padding-bottom: 60px !important;
    padding-top: 100px !important;
  }
}

@media (max-width: 767px) {
  #section-intro {
    min-height: 0;
    padding-bottom: 50px !important;
    padding-top: 90px !important;
  }

  /* On small phones the flex row (button + hours) is ~300px wide.
     Bootstrap me-5 = 3rem (48px) margin, button ~175px, hours text
     ~150px — together ~373px which overflows a 360px viewport.
     Wrap and remove the fixed margin so both items sit cleanly.   */
  #section-intro .d-flex.align-items-center.pb-4 {
    flex-wrap: wrap;
    gap: 1rem;
  }

  #section-intro .btn-main.me-5 {
    margin-right: 0 !important;
  }
}

/* ─── Negative-Margin Overlap Fix ───────────────────────
   The full-width image before Testimonials uses mb-min-100
   (-100px) to visually bleed into the next section. It works
   on desktop because the testimonials section opens with a
   spacer-double (~80px) that compensates for the overlap.
   On mobile, sections are only 40px tall and any overlap
   pushes real content behind the image.                    */
@media (max-width: 767px) {
  .mb-min-100 {
    margin-bottom: 0 !important;
  }

  /* Hide the compensating spacer — without the overlap it just
     creates dead empty space at the top of Testimonials.       */
  #testimonials .spacer-double:first-child {
    display: none;
  }
}

/* ─── Info Bar (dark strip below hero) ──────────────────
   grid-divider draws vertical rule lines between columns via
   ::after pseudo-elements. They look wrong when columns stack
   vertically, so disable them below the md breakpoint.       */
@media (max-width: 767px) {
  .grid-divider > [class*="col-"]:nth-child(n + 2)::after {
    display: none !important;
  }
}

/* ─── Team Section — card caption overflow ──────────────
   The caption overlay uses .abs (position:absolute) with
   .w-100 and .start-0 .bottom-0. On very small screens the
   h4 + p text may overflow outside the card.               */
@media (max-width: 480px) {
  #team .col-lg-4 .p-2.rounded-10.m-3 h4 {
    font-size: 1rem;
  }

  #team .col-lg-4 .p-2.rounded-10.m-3 p {
    font-size: 0.8rem;
    margin-bottom: 0.25rem !important;
  }
}

/* ─── Contact CTA Banner ─────────────────────────────────
   Layout: col-md-9 (text) + col-lg-3 (button).
   Below lg the button column fills full width but keeps its
   text-lg-end alignment → button hangs left. Centre it.     */
@media (max-width: 991px) {
  #contact .col-lg-3 {
    text-align: center;
  }

  #contact .col-lg-3 .btn-main {
    display: inline-block;
  }
}

/* ─── Footer ─────────────────────────────────────────────
   col-lg-4 col-sm-6 handles 3 → 2 → 1 column reflow well.
   Add bottom spacing for the single-column (xs) layout so
   widgets don't visually bleed into each other.             */
@media (max-width: 575px) {
  footer.section-dark .col-lg-4,
  footer.section-dark .col-sm-6 {
    padding-bottom: 2rem;
  }
}

/* ─── Subfooter ─────────────────────────────────────────
   .de-flex already switches to display:block at ≤992px via
   style.css. The menu-simple <ul> still renders inline on
   narrow screens; wrap items and add breathing room.        */
@media (max-width: 767px) {
  .subfooter .menu-simple {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
  }

  .subfooter .menu-simple li::before {
    content: none;
  }
}

/* ─── Services Grid — Bootstrap already handles column reflow
   col-lg-4 col-sm-6 → 3-up at lg, 2-up at sm (576px+),
   full-width at xs (< 576px). No additional overrides needed. */

/* ─── Typography scale — very small phones ──────────────
   The framework sets h1 to 48px at ≤767px, but .fs-sm-10vw
   (class in HTML) overrides that to 10vw. On a 360px screen
   that's 36px — adequate. h2 at 36px (framework) is fine.
   No font-size overrides needed.                            */

.owl-dot > span {
  display: none !important;
}