/**
 * ============================================================================
 * PAGE SIZE SETTINGS - GLOBAL LAYOUT AND BOX MODEL CONFIGURATION
 * ============================================================================
 * This stylesheet defines fundamental page sizing and box model behavior.
 * It ensures consistent sizing across all browsers and prevents common
 * layout issues like horizontal scrolling.
 * 
 * CRITICAL FUNCTIONALITY:
 * - Resets default browser margins and padding
 * - Sets box-sizing to border-box for predictable sizing
 * - Establishes base font size (16px = 1rem)
 * - Prevents horizontal overflow/scrolling
 * - Ensures body fills viewport height
 * 
 * BOX-SIZING EXPLANATION:
 * - border-box: Width/height includes padding and border
 * - This makes sizing calculations much easier and more intuitive
 * ============================================================================
 */

/* ========================================================================== */
/* UNIVERSAL RESET - APPLY TO ALL ELEMENTS */
/* ========================================================================== */
/* Resets default browser styles and sets consistent box model */
* {
  box-sizing: border-box; /* CRITICAL: Include padding/border in width/height calculations */
  margin: 0; /* Remove all default margins */
  padding: 0; /* Remove all default padding */
}

/* ========================================================================== */
/* HTML ROOT ELEMENT - BASE SIZING AND DIMENSIONS */
/* ========================================================================== */
/* Sets the foundation for rem units and full-height layouts */
html {
  font-size: 16px; /* Base font size: 1rem = 16px */
  width: 100%; /* Full viewport width */
  height: 100%; /* Full viewport height */
}

/* ========================================================================== */
/* BODY ELEMENT - MAIN CONTENT CONTAINER */
/* ========================================================================== */
/* Ensures body fills viewport and prevents horizontal scrolling */
body {
  width: 100%; /* Full viewport width */
  min-height: 100vh; /* Minimum height = viewport height (allows growth) */
  overflow-x: hidden; /* CRITICAL: Prevent horizontal scrollbar */
}