/* ============================================
   RESPONSIVE - Global overflow & centering guards
   Loaded after variables.css, before base.css
   ============================================ */

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

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

/* Flex/grid children shrink instead of forcing their parent wider */
*,
*::before,
*::after {
  min-width: 0;
}

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

input,
textarea,
select,
button {
  max-width: 100%;
}

/* Long words and URLs wrap instead of pushing the layout sideways */
h1, h2, h3, h4, h5, h6,
p, span, a, label, li, td {
  overflow-wrap: break-word;
}

section,
main,
footer,
header {
  max-width: 100%;
}

/* Honeypot stays invisible without creating horizontal scroll */
.form-honeypot {
  position: absolute;
  clip-path: inset(50%);
  width: 0.0625rem;
  height: 0.0625rem;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

/* Reaction emojis wrap on narrow screens instead of overflowing */
.reaction-picker {
  flex-wrap: wrap;
  justify-content: center;
}