/*
|--------------------------------------------------------------------------
| jobimme Mobile Overflow Fix
|--------------------------------------------------------------------------
| Purpose:
| Prevent horizontal scrolling on mobile, especially jobs.php.
| Safe global CSS patch.
*/

html,
body {
  max-width: 100%;
  overflow-x: hidden !important;
}

html {
  width: 100%;
}

body {
  width: 100%;
  position: relative;
}

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

/*
| Media and embeds should never force page width.
*/
img,
svg,
video,
canvas,
iframe,
object,
embed {
  max-width: 100% !important;
}

img,
video,
canvas {
  height: auto;
}

/*
| Text should wrap instead of creating horizontal overflow.
*/
p,
h1,
h2,
h3,
h4,
h5,
h6,
a,
span,
li,
td,
th,
label,
button,
input,
textarea,
select {
  overflow-wrap: anywhere;
  word-break: normal;
}

/*
| Flex/grid children are a common cause of mobile overflow.
*/
.flex,
.grid,
[class*="flex"],
[class*="grid"] {
  min-width: 0 !important;
}

.flex > *,
.grid > *,
[class*="flex"] > *,
[class*="grid"] > * {
  min-width: 0 !important;
}

/*
| Forms should not exceed screen width.
*/
input,
select,
textarea,
button {
  max-width: 100% !important;
}

/*
| Tables and code blocks should scroll internally, not the whole page.
*/
table {
  max-width: 100% !important;
}

pre,
code {
  white-space: pre-wrap !important;
  word-break: break-word !important;
  max-width: 100% !important;
}

pre {
  overflow-x: auto;
}

/*
| Tailwind or custom max-width containers should stay inside viewport.
*/
.container,
main,
section,
header,
footer,
nav,
article,
aside,
[class*="max-w-"] {
  min-width: 0 !important;
}

/*
| Specific jobs page / card fixes.
*/
.jobs-grid,
.job-grid,
.job-list,
.jobs-list,
.job-card,
.featured-job-card,
.opportunity-card,
.company-card,
.category-card,
[class*="job-card"],
[class*="jobs"],
[class*="opportunit"] {
  min-width: 0 !important;
  max-width: 100% !important;
}

.job-card *,
.featured-job-card *,
.opportunity-card *,
[class*="job-card"] *,
[class*="opportunit"] * {
  min-width: 0 !important;
}

/*
| Prevent oversized logo/text rows from pushing the viewport.
*/
.logo-row,
.company-logo,
.company-logos,
[class*="logo"] {
  max-width: 100% !important;
}

/*
| Mobile-only stronger fixes.
*/
@media (max-width: 768px) {
  body {
    overflow-x: hidden !important;
  }

  body > * {
    max-width: 100vw !important;
  }

  .container,
  .mx-auto,
  [class*="max-w-7xl"],
  [class*="max-w-6xl"],
  [class*="max-w-5xl"],
  [class*="max-w-4xl"],
  [class*="max-w-3xl"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /*
  | Some Tailwind classes can create overflow on small screens.
  */
  .w-screen,
  [class*="w-screen"] {
    width: 100% !important;
  }

  [class*="min-w-"] {
    min-width: 0 !important;
  }

  [class*="max-w-none"] {
    max-width: 100% !important;
  }

  /*
  | Long horizontal rows should wrap on mobile.
  */
  .whitespace-nowrap,
  [class*="whitespace-nowrap"] {
    white-space: normal !important;
  }

  /*
  | Large absolute decorative elements should not create body overflow.
  */
  [class*="-left-"],
  [class*="-right-"],
  [class*="translate-x"] {
    max-width: 100vw !important;
  }

  /*
  | Job cards on mobile should stack cleanly.
  */
  .job-card,
  .featured-job-card,
  .opportunity-card,
  [class*="job-card"],
  [class*="opportunit"] {
    width: 100% !important;
  }

  /*
  | Buttons and badges should wrap instead of forcing width.
  */
  .badge,
  .tag,
  .pill,
  [class*="badge"],
  [class*="tag"],
  [class*="pill"] {
    max-width: 100% !important;
    white-space: normal !important;
  }
}

/*
| Emergency debug class used by JS fallback.
*/
.jobimme-force-no-overflow {
  max-width: 100% !important;
  overflow-x: hidden !important;
}