/* BD Tuition Hub — mobile-first stability overrides
   Generated as a safe layer on top of the existing Tailwind build. */

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

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

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

iframe {
  max-width: 100%;
}

.container-page {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.wrap-anywhere {
  overflow-wrap: anywhere;
  word-break: break-word;
}

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

table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

pre, code {
  max-width: 100%;
}

pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#mobile-nav-toggle:checked + label {
  position: relative;
  z-index: 60;
  background: rgb(241 245 249);
}

.mobile-menu-open-icon { display: block; }
.mobile-menu-close-icon { display: none; }

#mobile-nav-toggle:checked + label .mobile-menu-open-icon {
  display: none;
}

#mobile-nav-toggle:checked + label .mobile-menu-close-icon {
  display: block;
}

/* The mobile drawer must sit above page content and below the close button. */
#mobile-nav-toggle:checked ~ .mobile-nav-drawer {
  display: flex;
}

/* Comfortable phone sizing */
@media (max-width: 639px) {
  .container-page {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  header .container-page {
    min-height: 4rem;
  }

  main section {
    min-width: 0;
  }

  .rounded-card {
    max-width: 100%;
  }

  /* Prevent long email addresses, URLs and user content from widening cards. */
  a, p, li, h1, h2, h3, h4, h5, h6, span {
    overflow-wrap: anywhere;
  }

  /* Make the authentication placeholder/card comfortable on small screens. */
  #main-content .border-dashed {
    padding: 1.25rem;
  }

  /* Avoid oversized headings on narrow phones. */
  #main-content h1 {
    line-height: 1.15;
  }
}

@media (min-width: 640px) {
  .container-page {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .container-page {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Very narrow phones */
@media (max-width: 380px) {
  .container-page {
    padding-left: .875rem;
    padding-right: .875rem;
  }

  header .container-page {
    gap: .5rem;
  }
}