/* =====================================================================
   SEVA — GLOBAL RESPONSIVE FIX
   Stops pages moving left/right on mobile + fixes the cut banner title.
   Link it on every page in <head>, AFTER responsive.css:
   <link rel="stylesheet" href="assets/css/seva-responsive-fix.css">
   Selectors start with "html body" so they win over each page's own
   inline <style> blocks, wherever those sit in the page.
   ===================================================================== */

/* ---------- 1. No sideways movement ---------- */
html, body { max-width: 100% !important; overflow-x: hidden !important; }
@supports (overflow: clip) {
    html, body { overflow-x: clip !important; }  /* keeps sticky elements working */
}
html body { position: relative; }

/* Hard stop for swiping: on touch screens the page itself can only scroll up/down
   (and pinch-zoom). Carousels and scrollable tables still swipe sideways normally. */
@media (max-width: 991px) {
    html, body { touch-action: pan-y pinch-zoom; width: 100%; }
}
html body img, html body iframe, html body video, html body svg { max-width: 100%; }
html body .header-top-area,
html body .navbar-area,
html body .page-title-area,
html body #footer { max-width: 100%; }

/* Header dropdowns: inline min-width:300px + nowrap push the page wider on phones */
@media (max-width: 991px) {
    html body .navbar-area .dropdown-menu,
    html body .navbar-area .mega-menu,
    html body .navbar-area .dropdown-submenu { max-width: 100% !important; min-width: 0 !important; }
    html body .navbar-area .dropdown-submenu,
    html body .navbar-area .dropdown-submenu a,
    html body .navbar-area .mega-column a { white-space: normal !important; }
}

/* Sections like <section class="main-container container"> whose own CSS sets
   "padding: 80px 0" lose the container side padding, so a .row inside sticks out */
html body .main-container.container { padding-left: 15px; padding-right: 15px; }
html body .main-container.container [class*="col-"] { min-width: 0; }
html body #second > .row { flex: 1 1 100%; width: 100%; min-width: 0; margin-left: 0; margin-right: 0; }

/* ---------- 1b. Other common causes on the remaining pages ---------- */

/* Anything set to 100vw is wider than the screen (it includes the scrollbar) */
html body [style*="100vw"] { width: 100% !important; max-width: 100% !important; }

/* Carousels (Owl / Slick) must clip their own slides */
html body .owl-carousel,
html body .slick-slider { max-width: 100%; }
html body .owl-carousel .owl-stage-outer,
html body .slick-list { overflow: hidden; }

/* Google Maps / YouTube / widgets with fixed width="600" etc. */
html body iframe[width] { max-width: 100% !important; }
html body [class^="elfsight-app"],
html body [class*=" elfsight-app"] { max-width: 100%; }

/* Code / long URLs / email addresses */
html body pre, html body code { white-space: pre-wrap; word-break: break-word; }
html body a[href^="mailto:"], html body a[href^="http"] { overflow-wrap: anywhere; }

@media (max-width: 767px) {
    /* Any container whose padding was set to 0 gets its side padding back,
       so Bootstrap .row (-15px margins) can't stick out */
    html body .container,
    html body .container-fluid { padding-left: 15px !important; padding-right: 15px !important; max-width: 100%; }
    html body section,
    html body .row > [class*="col-"] { max-width: 100%; min-width: 0; }

    /* Tables scroll inside themselves instead of widening the page */
    html body table { display: block; max-width: 100%; overflow-x: auto; }
}

/* Long text and links wrap instead of widening the page */
html body p, html body li, html body h1, html body h2, html body h3, html body h4 { overflow-wrap: break-word; }

/* ---------- 2. Banner title cut (centred page-item banners) ---------- */
html body .page-title-area:has(.page-item) {
    padding-top: 150px;
    padding-bottom: 120px;
    overflow: hidden;
}
html body .page-title-area .page-item { padding: 0 10px; }
html body .page-title-area .page-item h2 { line-height: 1.3; white-space: normal; }
html body .page-title-area .page-item ul li { white-space: normal; text-align: center; }

@media (min-width: 992px) and (max-width: 1199px) {
    html body .page-title-area:has(.page-item) { padding-top: 140px; padding-bottom: 100px; }
}
@media (min-width: 768px) and (max-width: 991px) {
    html body .page-title-area:has(.page-item) { padding-top: 130px; padding-bottom: 80px; }
}
@media (max-width: 991px) {
    html body .page-title-area .page-item h2 { animation: none; }   /* no slide-in pushing it off screen */
}
@media (max-width: 767px) {
    html body .page-title-area:has(.page-item) { padding-top: 110px; padding-bottom: 50px; }
    html body .page-title-area .page-item h2 { font-size: 24px; }
}
@media (max-width: 575px) {
    html body .page-title-area .page-item h2 br { display: none; }
    html body .page-title-area .page-item h2 { font-size: 22px; }
    html body .page-title-area .page-item ul li { font-size: 13px; margin: 0 2px; }
}
@media (max-width: 375px) {
    html body .page-title-area .page-item h2 { font-size: 20px; }
}

/* ---------- 3. Videos keep 16:9 on small screens ---------- */
@media (max-width: 1024px) {
    html body .small-video iframe,
    html body .video-container iframe { height: auto; aspect-ratio: 16 / 9; }
}

/* ---------- 4. Mobile text + touch ---------- */
@media (max-width: 767px) {
    html body .post-desc p,
    html body .intro-text { text-align: left; }
}
@media (max-width: 480px) {
    html body .main-container.container { padding-left: 12px; padding-right: 12px; }
}

/* ---------- 5. Appointment popup ---------- */
html body .appointment-modal { overflow-y: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 576px) {
    html body .appointment-content { margin: 40px auto; padding: 28px 20px; }
    html body .appointment-content h2 { font-size: 1.4rem; }
    html body .form-group input { font-size: 16px; }   /* stops iOS zoom on focus */
}