/*
 * StockSkill Website Wide Mobile Responsive Layer
 * V1
 */

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

html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* Images */
img,
video,
svg,
canvas {
  max-width: 100%;
  height: auto;
}

/* Prevent accidental horizontal overflow */
section,
header,
footer,
main,
article,
aside,
nav,
div {
  max-width: 100%;
}

/* Forms */
input,
select,
textarea,
button {
  max-width: 100%;
}

input,
select,
textarea {
  font-size: 16px;
}

/* Tables */
.table-wrap,
.table-responsive,
.responsive-table,
.overflow-table {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ------------------------------------------------------------
   MOBILE
------------------------------------------------------------ */

@media (max-width: 767px) {

  body {
    font-size: 15px;
  }

  /* Main containers */
  .container,
  .content,
  .page-container,
  .main-container,
  .section-container,
  .wrapper,
  .page-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Common sections */
  section {
    width: 100%;
  }

  /* Headings */
  h1 {
    font-size: clamp(28px, 8vw, 42px);
    line-height: 1.12;
    word-break: normal;
  }

  h2 {
    font-size: clamp(24px, 6.5vw, 34px);
    line-height: 1.18;
  }

  h3 {
    font-size: clamp(20px, 5.5vw, 28px);
    line-height: 1.2;
  }

  h4 {
    font-size: 19px;
  }

  p {
    line-height: 1.6;
  }

  /* ----------------------------------------------------------
     NAVIGATION
  ---------------------------------------------------------- */

  nav {
    max-width: 100%;
  }

  nav ul {
    max-width: 100%;
  }

  /* Common flex rows */
  .row,
  .flex-row,
  .hero-row,
  .two-column,
  .two-col,
  .form-row,
  .grid-2,
  .grid-3,
  .grid-4 {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 16px !important;
  }

  /* CSS grid layouts */
  .grid,
  .cards,
  .card-grid,
  .features-grid,
  .course-grid,
  .plans-grid,
  .booking-grid {
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  /* Generic columns */
  .col,
  .column,
  .left-column,
  .right-column,
  .form-column {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }

  /* ----------------------------------------------------------
     HERO
  ---------------------------------------------------------- */

  .hero,
  .hero-section,
  .page-hero,
  .banner,
  .hero-content {
    width: 100% !important;
    max-width: 100% !important;
  }

  .hero {
    padding: 36px 18px !important;
  }

  .hero h1 {
    max-width: 100% !important;
  }

  .hero p {
    max-width: 100% !important;
  }

  /* ----------------------------------------------------------
     BOOK CLASS PAGE
  ---------------------------------------------------------- */

  .booking-container,
  .booking-wrapper,
  .booking-card,
  .book-class-container,
  .book-class-wrapper,
  .class-booking,
  .class-booking-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  .booking-card,
  .class-booking-card {
    padding: 18px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .booking-form,
  .class-form,
  .book-class-form {
    width: 100% !important;
  }

  .booking-form .form-row,
  .class-form .form-row,
  .book-class-form .form-row {
    display: flex !important;
    flex-direction: column !important;
  }

  .booking-form input,
  .booking-form select,
  .booking-form textarea,
  .class-form input,
  .class-form select,
  .class-form textarea,
  .book-class-form input,
  .book-class-form select,
  .book-class-form textarea {
    width: 100% !important;
    min-height: 48px;
  }

  /* Date/time controls */
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"] {
    width: 100% !important;
    min-height: 48px;
  }

  /* Booking buttons */
  .booking-form button,
  .class-form button,
  .book-class-form button,
  .booking-card button {
    width: 100%;
    min-height: 48px;
  }

  /* ----------------------------------------------------------
     CARDS
  ---------------------------------------------------------- */

  .card,
  .feature-card,
  .course-card,
  .plan-card,
  .service-card,
  .testimonial-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ----------------------------------------------------------
     BUTTONS
  ---------------------------------------------------------- */

  .btn,
  .button,
  a.btn,
  button {
    max-width: 100%;
  }

  /* ----------------------------------------------------------
     TABLES
  ---------------------------------------------------------- */

  table {
    width: 100%;
    min-width: 620px;
  }

  .table-wrap,
  .table-responsive,
  .responsive-table,
  .overflow-table {
    overflow-x: auto !important;
  }

  /* ----------------------------------------------------------
     MODALS
  ---------------------------------------------------------- */

  .modal,
  .modal-dialog,
  .modal-content,
  .popup,
  .dialog {
    max-width: calc(100vw - 24px) !important;
  }

  /* ----------------------------------------------------------
     FOOTER
  ---------------------------------------------------------- */

  footer {
    width: 100%;
    overflow: hidden;
  }

  footer .row,
  footer .footer-row,
  footer .footer-grid {
    display: flex !important;
    flex-direction: column !important;
  }

  /* ----------------------------------------------------------
     FLOATING BUTTONS / WHATSAPP
  ---------------------------------------------------------- */

  .whatsapp-float,
  .whatsapp-button,
  .floating-whatsapp,
  .chat-float {
    max-width: 54px;
  }

  /* ----------------------------------------------------------
     LONG WORDS / URLs
  ---------------------------------------------------------- */

  a,
  p,
  span,
  td,
  th {
    overflow-wrap: anywhere;
  }

  /* ----------------------------------------------------------
     MOBILE SPACING
  ---------------------------------------------------------- */

  .section,
  .section-padding,
  .page-section {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  /* Remove excessive desktop margins */
  .mt-large,
  .margin-large {
    margin-top: 24px !important;
  }

  .mb-large,
  .margin-bottom-large {
    margin-bottom: 24px !important;
  }

}

/* ------------------------------------------------------------
   VERY SMALL DEVICES
------------------------------------------------------------ */

@media (max-width: 380px) {

  .container,
  .content,
  .page-container,
  .section-container,
  .wrapper,
  .page-wrap {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  h1 {
    font-size: 27px;
  }

  h2 {
    font-size: 23px;
  }

  h3 {
    font-size: 19px;
  }

  .hero {
    padding: 28px 14px !important;
  }
}