/* ===================================================================
   GLOBAL STYLES - Include this file in ALL HTML pages
   Purpose: Prevent horizontal scrolling and ensure responsive layout
   Usage: <link rel="stylesheet" href="css/global.css">
   =================================================================== */

/* Prevent horizontal overflow at root level */
html {
  overflow-x: hidden;
  width: 100%;
}

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

/* Universal box-sizing for consistent layout */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Ensure all text elements wrap properly and never cause horizontal overflow */
h1, h2, h3, h4, h5, h6, 
p, span, div, a, button, 
input, textarea, label, select,
li, ul, ol,
td, th, table,
pre, code {
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

/* Prevent images and media from overflowing */
img, video, iframe, svg {
  max-width: 100%;
  height: auto;
}

/* Tables should be responsive */
table {
  table-layout: fixed;
  width: 100%;
}

/* Long URLs or unbreakable strings should break */
a {
  word-break: break-word;
}

/* Container elements should constrain their children */
.container, .wrapper, .content, main, section, article {
  max-width: 100%;
  overflow-x: hidden;
}