/* Roopalia — site-wide responsive guard
   Loaded on every page. Prevents any element from pushing the page
   sideways on narrow screens, which is what breaks the sticky header. */

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

img, video, iframe, svg {
  max-width: 100%;
  height: auto;
}

/* decorative absolutely-positioned glows must never create scroll */
[class*="hero-glow"] {
  pointer-events: none;
  max-width: 100vw;
}

/* long words and URLs should wrap rather than stretch the layout */
p, li, td, th, h1, h2, h3, h4, .article-title, .cidx-title {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

@media (max-width: 760px) {
  /* wide tables scroll inside themselves instead of widening the page */
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  pre, code {
    overflow-x: auto;
    white-space: pre-wrap;
  }
  /* keep decorative blurs from spilling past the viewport */
  [class*="hero-glow"] {
    max-width: 90vw;
    max-height: 60vw;
  }
}