/* Mobile responsiveness overrides - Kidz Pathshala */

/* --- Universal safety net: prevent any element from overflowing viewport --- */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

*, *:before, *:after {
  box-sizing: border-box;
}

img, figure, video, iframe, table {
  max-width: 100%;
  height: auto;
}

/* Neutralize inline fixed pixel widths on images */
img[style*="width: 466px"],
img[style*="width:466px"],
img[style*="width: 400px"],
img[style*="width:400px"],
img[style*="width: 320px"],
img[style*="width:320px"],
img[style*="width: 230px"],
img[style*="width:230px"] {
  max-width: 100% !important;
  height: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
  display: block;
}

/* --- Tablet and below --- */
@media (max-width: 991px) {
  .container {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
  }

  /* Stack two-column layouts */
  .pull-left, .pull-right {
    float: none !important;
    text-align: center;
  }

  /* Header responsive */
  .header .logo {
    text-align: center;
    margin-bottom: 10px;
  }

  .header-top {
    text-align: center;
  }

  .header-top .contact {
    display: block;
    padding: 3px 0;
    font-size: 13px;
  }

  /* Footer logo */
  .footer-bottom .pull-left,
  .footer-bottom .pull-right {
    float: none !important;
    text-align: center;
    margin-bottom: 15px;
  }

  .footer-bottom .menu ul {
    text-align: center;
    padding: 0;
  }

  .footer-bottom .menu li {
    display: inline-block;
    padding: 5px 8px;
  }

  /* Tables become scrollable horizontally instead of breaking layout */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
}

/* --- Mobile phones --- */
@media (max-width: 767px) {
  body {
    font-size: 14px;
    line-height: 1.6;
  }

  /* Reset all inline heights and widths on figures/images */
  figure, .img-box, .img-box img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 0 15px !important;
    float: none !important;
    text-align: center;
  }

  /* Hero slider sizing on mobile */
  .rev_slider_wrapper,
  .rev_slider,
  #masterslider,
  .master-slider {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Navbar: collapse properly */
  .navbar-collapse {
    max-height: none;
  }

  .mainmenu-area .navbar-nav {
    float: none;
  }

  .mainmenu-area .navbar-nav > li {
    float: none;
    display: block;
  }

  .mainmenu-area .navbar-nav > li > a {
    padding: 12px 20px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
  }

  /* Section titles */
  .section-title h2 {
    font-size: 26px;
    line-height: 1.2;
  }

  h1 { font-size: 24px; }
  h2 { font-size: 22px; }
  h3 { font-size: 20px; }
  h4 { font-size: 17px; }

  /* Branches / items: one per row */
  .col-md-4, .col-md-3, .col-md-6,
  .col-sm-6, .col-sm-4, .col-sm-3 {
    width: 100% !important;
    float: none !important;
    padding-left: 15px;
    padding-right: 15px;
  }

  /* Column items spacing */
  .item {
    margin-bottom: 25px;
  }

  /* Footer - stack address blocks */
  .footer .column {
    width: 100% !important;
    margin-bottom: 25px;
    text-align: center;
  }

  .footer .item.center {
    text-align: center;
  }

  /* Contact info */
  .contact-info, .contact-form {
    width: 100%;
    padding: 10px;
  }

  /* Buttons - full width on mobile for touch */
  .btn, .theme-btn, button[type="submit"] {
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 8px auto;
    padding: 12px 20px;
    white-space: normal;
  }

  /* Forms */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="date"],
  select,
  textarea {
    width: 100% !important;
    max-width: 100%;
    font-size: 16px; /* prevents zoom on iOS focus */
    padding: 10px;
    box-sizing: border-box;
  }

  /* Gallery grid - 2 per row on phone */
  .gallery-item,
  .filter-item {
    width: 50% !important;
    padding: 5px;
  }

  /* Maps - full width, reasonable height */
  .map-area, .map-section, #googleMap, iframe[src*="google.com/maps"] {
    width: 100% !important;
    height: 300px !important;
  }

  /* Breadcrumb wrapping */
  .breadcrumb {
    font-size: 12px;
    word-wrap: break-word;
  }

  /* Modal / popup content */
  .popup-container, .modal-dialog {
    width: 95% !important;
    max-width: 95%;
    margin: 10px auto;
  }

  /* Prevent text-heavy components from breaking */
  p, li, h4, h5, h6 {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Header logo size on mobile */
  .logo img {
    max-width: 180px !important;
    height: auto !important;
  }
}

/* --- Very small phones --- */
@media (max-width: 480px) {
  .container {
    padding-left: 10px;
    padding-right: 10px;
  }

  .section-title h2 {
    font-size: 22px;
  }

  /* Gallery - 1 per row on small phones */
  .gallery-item, .filter-item {
    width: 100% !important;
  }

  .footer .footer-upper .container,
  .footer-bottom .container {
    padding: 15px 10px;
  }
}

/* --- Accessibility: larger touch targets --- */
@media (max-width: 767px) {
  a, button {
    min-height: 36px;
  }

  .footer-bottom .menu a,
  nav a {
    padding: 10px 12px;
  }
}