/* mobile overrides for mirrored raperodent.xyz site */

/* GLOBAL MOBILE SAFETY NET */
@media (max-width: 900px) {
  /* never allow any element to exceed viewport width */
  *, *::before, *::after { max-width: 100vw !important; box-sizing: border-box !important; }
  body { overflow-x: hidden !important; }

  /* long words/strings should wrap */
  p, h1, h2, h3, h4, h5, h6, span, a, td, th {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* media should never overflow */
  img, video, canvas, svg { max-width: 100% !important; height: auto !important; }
}
/* REMOVE the scrolling meme-question strip (FOREVER ALONE / CHALLENGE ACCEPTED / etc) */
.py-12.border-y-\[6px\].border-black.overflow-hidden.relative { display: none !important; }

/* hard stop on sideways scrolling */
html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
* { max-width: 100%; }

/* make tap targets sane */
a, button { -webkit-tap-highlight-color: transparent; }
img, video, canvas { max-width: 100%; height: auto; }

/* Vite/React/Tailwind builds sometimes create giant absolutely-positioned layers */
#root { overflow-x: clip; }

/* tablet and below */
@media (max-width: 900px) {
  /* disable sticky side cards that squeeze content */
  .sticky { position: static !important; top: auto !important; }

  /* collapse multi-column grids */
  .grid { grid-template-columns: 1fr !important; }

  /* allow flex rows to wrap */
  .flex { flex-wrap: wrap !important; }
}

/* phones */
@media (max-width: 600px) {
  /* keep max containers within viewport */
  .max-w-7xl, .max-w-6xl, .max-w-2xl { max-width: 100% !important; }

  /* fixed top navbar: constrain */
  nav, .fixed.top-8 {
    left: 50% !important;
    width: calc(100% - 16px) !important;
    max-width: 100% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* hide nav link row if it overflows */
  nav .hidden.md\:flex, .hidden.md\:flex { display: none !important; }

  /* reduce giant padding utilities */
  .px-10, .px-8 { padding-left: 14px !important; padding-right: 14px !important; }
  .px-6 { padding-left: 12px !important; padding-right: 12px !important; }
  .p-12 { padding: 18px !important; }
  .p-8 { padding: 14px !important; }
  .p-6 { padding: 12px !important; }
  .pt-40 { padding-top: 88px !important; }
  .py-32 { padding-top: 72px !important; padding-bottom: 72px !important; }
  .py-24 { padding-top: 56px !important; padding-bottom: 56px !important; }

  /* headings and large text */
  h1 { font-size: clamp(44px, 17vw, 84px) !important; line-height: .85 !important; }
  h2 { font-size: clamp(30px, 10vw, 54px) !important; }
  .text-6xl { font-size: 2.2rem !important; }
  .text-5xl { font-size: 2.0rem !important; }
  .text-4xl { font-size: 1.55rem !important; }
  .text-3xl { font-size: 1.25rem !important; }
  .text-2xl { font-size: 1.08rem !important; }

  /* media/card sizing */
  .w-96 { width: 88vw !important; }

  /* fix "Origins" white card section clipping off-screen */
  .rough-border, .sketch-shadow { max-width: 100% !important; }
  .rough-border { overflow: hidden !important; }
  .mx-auto { margin-left: auto !important; margin-right: auto !important; }
  .w-full { width: 100% !important; }
  .w-80 { width: 84vw !important; }
  .md\:w-\[450px\] { width: 86vw !important; }
  .md\:h-\[450px\] { height: 86vw !important; }
  .h-80 { height: 84vw !important; }

  /* marquee/top ticker: reduce height */
  .h-10 { height: 36px !important; }

  /* calm down rotation transforms that cause overflow */
  [class*="rotate"], [class*="-rotate"] { transform: none !important; }

  /* allow long strings (CA, links) to wrap */
  .break-all { word-break: break-word !important; overflow-wrap: anywhere !important; }

  /* buttons/cta: full width */
  a.rough-border, button.rough-border { width: 100% !important; text-align: center !important; }
}

/* very small phones */
@media (max-width: 380px) {
  h1 { font-size: 40px !important; }
  .px-10, .px-8, .px-6 { padding-left: 10px !important; padding-right: 10px !important; }
}