/**
 * Mobile layout corrections — loaded by every shell.
 *
 * Written against measured numbers: at 390px the student dashboard was
 * stacking 112px of horizontal padding across three nested wrappers and
 * letting 500px decorative blobs hang 126px past the screen edge.
 *
 * Desktop is deliberately untouched; the padding rules only apply below 640px.
 */

/* ---- never allow a sideways scroll, on any screen ---- */
html { overflow-x: hidden; max-width: 100%; }
body { overflow-x: hidden; max-width: 100%; }

/* A decorative blur blob must never widen the page. These are positioned
   absolutely, so overflow-x:hidden on body hides the scrollbar but the element
   still pushes layout around inside a positioned ancestor. */
[class*="blur-["][class*="w-["],
.shine {
  max-width: 100vw;
  pointer-events: none;
}

@media (max-width: 640px) {

  /* ---- one gutter, not three ----------------------------------------
     The app shell owns the screen edge gutter. Inner wrappers that also
     carry px-4 / px-6 / p-6 get theirs removed so the text starts where
     the reader expects instead of 57px in. */
  #main-content,
  main.main-content {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* page-level wrappers inside the shell: drop their own side padding */
  #main-content > .max-w-7xl,
  #main-content > .max-w-6xl,
  #main-content > .max-w-5xl,
  #main-content > .max-w-4xl,
  #main-content > div > .max-w-7xl,
  main.main-content > .max-w-7xl,
  main.main-content > .max-w-6xl,
  .welcome-kit-card {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }

  /* cards and panels: 48px of inner padding is too much on a phone */
  .welcome-kit-card > div,
  #main-content .p-6,
  #main-content .p-8,
  #main-content .sm\:p-8,
  #main-content .md\:p-8,
  main.main-content .p-6,
  main.main-content .p-8 {
    padding: 16px !important;
  }

  /* rounded corners that large look wrong once the card is full-bleed */
  #main-content .rounded-\[2rem\],
  #main-content .rounded-3xl,
  .welcome-kit-card > div {
    border-radius: 18px !important;
  }

  /* ---- decorative blobs must not create width ---- */
  #main-content [class*="w-\["][class*="blur-\["] {
    width: 220px !important;
    height: 220px !important;
  }

  /* ---- readable headings: 2.5rem hero text wraps badly at 390px ---- */
  #main-content h1 { font-size: clamp(1.5rem, 7vw, 2rem) !important; line-height: 1.15 !important; }
  #main-content h2 { font-size: clamp(1.15rem, 5.4vw, 1.5rem) !important; line-height: 1.2 !important; }

  /* ---- long words / URLs must not force the page wide ---- */
  #main-content, main.main-content { overflow-wrap: anywhere; }

  /* ---- tables and code keep their own scroller rather than widening ---- */
  #main-content table,
  main.main-content table { display: block; overflow-x: auto; max-width: 100%; }

  /* ---- tap targets: measured several at 17-24px tall ---- */
  #main-content a,
  #main-content button,
  main.main-content a,
  main.main-content button,
  header button, nav button {
    min-height: 44px;
  }
  /* inline links inside prose should not become 44px tall blocks */
  #main-content p a,
  #main-content li a,
  main.main-content p a,
  main.main-content li a {
    min-height: 0;
  }
  #mobile-menu-btn { min-width: 44px; min-height: 44px; }
}

/* ============================================================
   public-site rules
   ============================================================
   Decorative blur blobs are sized in fixed pixels (w-[500px], w-96) and
   several are translated half outside their box. On a 390px screen that made
   /buymentorship scroll sideways by 250px. They are purely ornamental, so
   clamping them costs nothing visually and stops the page widening. */

/* any positioned ancestor that hosts a blob gets clipped */
section, header, main, footer { max-width: 100%; }

/* the blobs themselves: never wider than the screen, never interactive */
[class*="blur-["] {
  max-width: 100vw;
  max-height: 100vw;
  pointer-events: none;
}

@media (max-width: 640px) {
  /* a 500px ornament on a 390px screen is both invisible and harmful */
  [class*="w-\[500px\]"][class*="blur-\["],
  [class*="w-96"][class*="blur-\["],
  [class*="w-\[600px\]"][class*="blur-\["] {
    width: 200px !important;
    height: 200px !important;
  }

  /* images must never define the page width */
  img, video, iframe, svg { max-width: 100%; height: auto; }


  /* long unbroken strings (emails, URLs) must wrap */
  p, li, h1, h2, h3, h4, a, span, div { overflow-wrap: anywhere; }
}

/* ============================================================
   table scrolling, done correctly
   ============================================================
   display:block on a <table> turns it into a scroll box but drops its children
   out of table layout, so <thead>/<tr> size to their content and overflow the
   box anyway — measured 683px inside a 364px table on admin/students.

   Instead: the table's parent becomes the scroller and the table stays a real
   table. A min-width keeps columns legible; the user swipes the table sideways
   rather than the whole page moving. */
@media (max-width: 767px) {
  #main-content table,
  main.main-content table,
  .table-wrap table {
    display: table !important;
    width: 100% !important;
    min-width: 640px;              /* below this, columns become unreadable */
  }

  /* make the element that directly contains a table scroll horizontally */
  #main-content table,
  main.main-content table {
    /* the parent is styled via :has where supported (all current browsers) */
  }
  #main-content *:has(> table),
  main.main-content *:has(> table) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* a visible hint that the table can be swiped */
  #main-content *:has(> table),
  main.main-content *:has(> table) {
    scrollbar-width: thin;
  }
}

/* ============================================================
   webfont loading
   ============================================================
   Text must paint immediately in a fallback face and swap when the
   webfont lands, rather than leaving the page blank while 267KB of
   Font Awesome downloads. */
@font-face{font-family:'Font Awesome 6 Free';font-display:swap}
@font-face{font-family:'Font Awesome 6 Brands';font-display:swap}