/* =========================================================
   PARAMUNT TECHNICAL SAFETY INSTITUTE
   Mobile Responsive Overrides
   ========================================================= */

html { overflow-x: hidden; }
body { overflow-x: hidden; }

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

/* Prevent long text/URLs from breaking the layout */
h1, h2, h3, h4, h5, h6, p, a, td, th, span {
  overflow-wrap: anywhere;
}

/* Main website navbar */
@media (max-width: 991.98px) {
  .navbar-brand {
    max-width: calc(100% - 75px);
    padding-left: 15px !important;
    padding-right: 10px !important;
  }

  .navbar-brand h6 {
    font-size: 13px;
    line-height: 1.3;
    white-space: normal;
  }

  .navbar-toggler {
    margin-right: 12px !important;
    padding: 6px 9px;
  }

  .navbar-collapse {
    background: rgba(39, 27, 111, .98);
    padding-bottom: 10px;
  }

  .navbar-nav {
    padding: 8px 15px !important;
  }

  .navbar-nav .nav-link {
    padding: 10px 5px !important;
  }

  .navbar .dropdown-menu {
    width: 100%;
    margin: 0;
  }
}

/* Home carousel */
#mainCarousel,
#mainCarousel .carousel-inner,
#mainCarousel .carousel-item {
  width: 100%;
}

#mainCarousel .carousel-item img {
  width: 100% !important;
  height: 730px !important;
  object-fit: cover;
}

@media (max-width: 767.98px) {
  #mainCarousel .carousel-item img {
    height: 280px !important;
    min-height: 220px;
  }

  #mainCarousel .carousel-caption {
    display: block !important;
    bottom: 12px;
    padding: 6px 10px;
  }

  #mainCarousel .carousel-caption h3 {
    font-size: 16px;
    margin: 0;
  }

  .container {
    max-width: 100%;
  }

  .container.mt-5 {
    margin-top: 25px !important;
  }

  .row > [class*="col-"] {
    margin-bottom: 15px;
  }
}

/* Home content two-column section */
@media (max-width: 767.98px) {
  .container .col-4,
  .container .col-md-4 {
    width: 100%;
  }

  .container .col-4 img,
  .container .col-md-4 img {
    width: 100%;
    height: auto !important;
  }

  .container .col-md-8 {
    width: 100%;
  }
}

/* Course headings and large text */
@media (max-width: 575.98px) {
  h1 { font-size: 1.65rem; }
  h2 { font-size: 1.4rem; }
  h3 { font-size: 1.2rem; }

  .py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }

  .btn {
    white-space: normal;
  }
}

/* Tables: horizontal scroll instead of breaking the page */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-responsive table {
  min-width: 650px;
}

@media (max-width: 575.98px) {
  .table-responsive table {
    font-size: 13px;
  }

  .table-responsive .btn {
    margin: 2px;
  }
}

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

@media (max-width: 767.98px) {
  .form-control,
  .form-select,
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  .contact-page-form form {
    padding-left: 0;
    padding-right: 0;
  }

  .contact-info-item {
    padding: 20px 10px;
  }

  .contact-info-text h2 {
    font-size: 18px;
  }

  .contact-info-text span {
    font-size: 14px;
  }
}

/* Safety engineering cards */
@media (max-width: 767.98px) {
  .card {
    width: 100%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 420px) {
  .card {
    max-width: 100%;
  }
}

/* Admin SB Admin 2 layout */
@media (max-width: 767.98px) {
  #wrapper {
    overflow-x: hidden;
  }

  .sidebar {
    width: 6.5rem !important;
  }

  .sidebar .nav-item .nav-link span {
    font-size: .7rem;
  }

  .topbar .dropdown .dropdown-menu {
    max-width: calc(100vw - 20px);
  }

  .container-fluid {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .h3, h1.h3 {
    font-size: 1.25rem;
  }
}

/* Custom marksheet/admin dashboard */
@media (max-width: 767.98px) {
  .marksheet-container,
  .dashboard-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .navbar-brand {
    font-size: 16px;
  }

  .card-body {
    padding: 15px !important;
  }
}

/* Small phones */
@media (max-width: 375px) {
  .navbar-brand {
    font-size: 14px;
  }

  #mainCarousel .carousel-item img {
    height: 240px !important;
  }

  .container {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* Print should remain unaffected by mobile rules */
@media print {
  html, body {
    overflow: visible !important;
  }
}