/* Responsive fixes for keralanurses.com. Loaded after styles.css. */

html, body {
  overflow-x: hidden;
}

img, svg {
  max-width: 100%;
}

/* Long words, such as the domain name, never push the page sideways */
h1, h2, h3, h4, h5, h6, p, code, a {
  overflow-wrap: anywhere;
}

/* A fixed background is janky or blank on phone browsers */
@media (max-width: 991.98px), (hover: none) {
  .hero-wrap .hero-bg {
    background-attachment: scroll;
  }
}

/* Modals stay inside the screen and scroll on their own */
.modal-dialog {
  max-width: min(500px, calc(100vw - 1rem));
}

.modal-body {
  overflow-wrap: anywhere;
}

/* Fingers need bigger targets than a mouse */
.modal-header .close {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

@media (max-width: 575.98px) {
  .text-19 {
    font-size: clamp(1.4rem, 8.5vw, 3rem) !important;
    line-height: 1.2;
  }

  .text-14 {
    font-size: clamp(1.75rem, 9vw, 2.5rem) !important;
  }

  .hero-content h3 {
    font-size: 1.25rem;
    line-height: 1.6;
  }

  .hero-content .btn-xl {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 0.5rem auto 0;
    padding: 0.9rem 1rem;
    white-space: normal;
  }

  .hero-content .text-4 {
    margin-left: 0;
    margin-right: 0;
  }
}

/* Malayalam words are long and wide: size them to fit one line on phones */
@media (max-width: 575.98px) {
  html[lang="ml"] .hero-content h1 {
    font-size: clamp(1.5rem, 8vw, 2rem) !important;
    overflow-wrap: normal;
  }

  html[lang="ml"] .hero-content h3 .text-9 {
    font-size: clamp(1.1rem, 5.8vw, 1.4rem) !important;
    overflow-wrap: normal;
  }
}