/* ── Mythos Mobile Fixes ─────────────────────────────── */

/* Prevent any horizontal overflow site-wide */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

@media (max-width: 767px) {

  /* ── Hero heading – scale down on small screens ── */
  h1 {
    font-size: clamp(2rem, 10vw, 3rem) !important;
    line-height: 1.15 !important;
    word-break: break-word;
  }

  /* ── Terminal / code block ── */
  /* Allow the outer terminal panel to scroll rather than blow out */
  [class*="font-mono"] {
    overflow-x: auto;
    max-width: 100%;
  }

  /* Override whitespace-nowrap on command lines so they wrap on mobile */
  [class*="whitespace-nowrap"] {
    white-space: pre-wrap !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
  }

  /* ── Nav bar ── make sure it doesn't overflow */
  header, header > * {
    max-width: 100vw;
    overflow: hidden;
  }

  /* ── Buttons row in hero ── stack vertically on very small screens */
  .flex.flex-col.sm\:flex-row,
  .flex.flex-row {
    flex-wrap: wrap;
  }

  /* ── General container safety ── */
  main, section, div {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* ── Padding adjustments for small screens ── */
  .px-4 { padding-left: 1rem; padding-right: 1rem; }

  /* ── Footer grid – already stacks via md: breakpoint, but ensure it ── */
  footer {
    overflow-x: hidden;
  }
}