/*
 * Dentique - phone layout (screens narrower than 768px).
 * Loaded after style.css on every page. Every rule except the first one sits
 * inside the media query below, so tablet and desktop layouts are unaffected.
 */

/* Quick-contact bar: only shown on phones. */
.mobile-cta { display: none; }

@media (max-width: 767.98px) {

  body { overflow-x: hidden; padding-bottom: 64px; /* room for the call/book bar */ }
  img { max-width: 100%; } /* some content images are set wider than their column */
  .bx-wrapper .bx-pager, .bx-wrapper .bx-controls { display: none; } /* single-slide hero */

  /* ---------- Header: slim fixed bar with logo + menu button ---------- */
  .header { height: auto !important; padding-top: 64px; overflow: visible; }
  .nav,
  .nav.sticky {
    position: fixed; top: 0; left: 0; right: 0; height: 64px;
    justify-content: flex-start; align-items: center; padding: 0 16px;
    background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); animation: none;
  }
  .nav ul { flex-wrap: nowrap; height: 64px; margin: 0; padding: 0; }
  .nav ul li { display: none; }
  .nav ul li.logo { display: flex; align-items: center; }
  .nav ul li.logo a { margin: 0; }
  .nav ul li.logo img { height: 48px !important; width: auto; }
  .nav ul li.logo .white { display: inline-block !important; }
  .nav ul li.logo .black { display: none !important; }
  .nav practo\:abs_widget,
  .nav [class*="practo"] { display: none !important; } /* booking moves to the bottom bar */

  .nav-icon { top: 10px; right: 10px; width: 44px; height: 44px; padding: 13px 7px; }

  /* ---------- Full-screen menu (opened by the menu button) ---------- */
  .full-nav { padding: 20px 16px 32px; overflow-y: auto; }
  .full-nav .logo { padding: 8px 0 20px; }
  .full-nav .logo img { width: 150px; }
  .nav2 ul { width: 100%; padding: 0; margin: 0; }
  .nav2 ul li { flex: 0 0 50%; padding: 0; border-bottom-width: 6px; border-right-width: 6px; }
  .nav2 ul li a { display: block; width: 100%; padding: 14px 12px; font-size: 1.15em; }
  .full-nav .social-icons a { width: 44px; height: 44px; line-height: 36px; margin-top: 16px; }
  .nav-close { top: 12px; right: 12px; width: 44px; height: 44px; }
  .nav-close span { top: 21px; left: 7px; }

  /* ---------- Homepage hero: photo/video on top, headline below ---------- */
  .hero-spacer { display: none; }
  #contents { margin-top: 0; padding-top: 32px; } /* desktop pulls this up 400px into the spacer */
  .bx-wrapper { margin-bottom: 0; box-shadow: none; border: 0; background: none; }
  .bx-wrapper .bx-viewport { height: auto !important; }
  .bg-video { position: relative; }
  video#herovideo { display: block; width: 100%; height: 56.25vw; object-fit: cover; }
  .bg-video .social-icons { display: none; } /* same links are in the footer */
  .vidcontent { position: static; padding: 24px 16px 8px; text-align: center; }
  .vidcontent .text-left { text-align: center !important; }
  .vidcontent h1 { font-size: 2rem; letter-spacing: 1px; line-height: 1.15; color: #00897b; }
  .vidcontent p { font-size: 1.9rem; line-height: 1.2; margin-bottom: 16px; }
  #vidbtn { background: #00897b; color: #fff; padding: 12px 32px; }

  /* ---------- Services (homepage): show all as a list, no slider ---------- */
  #about-us .carousel-item {
    display: block !important; float: none; margin-right: 0;
    transform: none !important; transition: none;
  }
  #about-us .carousel-indicators,
  #about-us .carousel-control-prev,
  #about-us .carousel-control-next { display: none; }
  #about-us .carousel .row,
  #clients .carousel .row { margin-left: 0; margin-right: 0; }
  #about-us .col-md { margin-bottom: 28px; }
  #about-us .lead { padding-bottom: 1.5rem !important; }

  /* ---------- Testimonials slider: arrows below the text, not over it ---------- */
  #clients .carousel-control-prev,
  #clients .carousel-control-next { top: auto; bottom: 0; width: 44px; height: 44px; }
  #clients .carousel-control-prev { left: 0; }
  #clients .carousel-control-next { right: 0; }
  #clients .carousel-control-prev-icon,
  #clients .carousel-control-next-icon { padding: 12px; }
  #clients .col-md { margin-bottom: 24px; }

  /* ---------- Results gallery: two photos per row ---------- */
  #work .row > [class*="col-"] { flex: 0 0 50%; max-width: 50%; }
  #work img { display: block; width: 100%; }
  .img-wrapper img:hover { transform: none; }

  /* ---------- Doctors ---------- */
  #team h2 { font-size: 2rem; }
  .team-member-slider { padding-bottom: 24px; }
  .team-coverflow { margin: 0 auto; }

  /* ---------- Numbers: 2 x 2 grid ---------- */
  .numbers { padding: 48px 0 24px; background-attachment: scroll; }
  .numbers .row > [class*="col-"] { flex: 0 0 50%; max-width: 50%; margin-bottom: 24px; }
  .numbers img { width: 56px !important; }
  .numbers h3 { font-size: 1.1rem; }

  /* ---------- Services page grid ---------- */
  .container[style*="margin-top: 150px"] { margin-top: 24px !important; }

  /* ---------- Footer ---------- */
  #contact-left h2,
  #contact-right h3 { font-size: 22px; letter-spacing: 1px; }
  #map { height: 260px; margin-bottom: 24px; }
  #map iframe { height: 100%; }
  #footer-bottom { margin-top: 24px; }
  #footer-menu { float: none; text-align: center; }
  #footer-menu a { display: inline-block; padding: 10px 6px; margin: 0 4px; }
  .social-list a,
  a.social-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  .related-treatments a { display: inline-block; padding: 8px 0; }
  #phone-fax-email a { display: inline-block; padding: 8px 0; }

  /* ---------- Call / book bar ---------- */
  .mobile-cta {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: #fff; box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.12);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mobile-cta a {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 56px; padding: 4px; border-right: 1px solid #eee; text-decoration: none;
    font-family: "Roboto Condensed", sans-serif; font-size: 15px; line-height: 1.2; color: #18191d;
  }
  .mobile-cta a:last-child { border-right: 0; }
  .mobile-cta a small { font-size: 12px; color: #555; }
  .mobile-cta a .fa { font-size: 16px; margin-bottom: 2px; color: #00897b; }
  .mobile-cta a.book { background: #d40f43; color: #fff; }
  .mobile-cta a.book small,
  .mobile-cta a.book .fa { color: #fff; }
}