/* ===================================================================
   UNIVERSAL SELECTORS & BOX MODEL
   =================================================================== */

*,
*::before,
*::after {
  /*
   * THE MOST IMPORTANT RULE IN MODERN CSS
   *
   * By default, browsers use "content-box" sizing, which means:
   * - width/height only applies to content
   * - padding and borders are ADDED to the specified width/height
   *
   * Example with content-box (default):
   * div { width: 100px; padding: 10px; border: 5px solid; }
   * Total width = 100px + 20px padding + 10px borders = 130px
   *
   * With border-box:
   * Total width = exactly 100px (padding and borders fit inside)
   *
   * This makes layouts much more predictable and intuitive.
   */
  box-sizing: border-box;
}

/*
 * RESET ALL MARGINS
 *
 * Different browsers give different default margins to elements.
 * Chrome might give <h1> a 16px margin, Firefox might give 14px.
 * This creates inconsistency across browsers.
 *
 * We reset everything to 0 and add margins back intentionally.
 * This is better than trying to override each element individually.
 */
* {
  margin: 0;
}

/* ===================================================================
   ROOT ELEMENTS & DOCUMENT SETUP
   =================================================================== */

/*
 * DOCUMENT-LEVEL IMPROVEMENTS
 *
 * color-scheme: Tells browser to use system colors for form controls
 * and scrollbars. This makes your site respect dark/light mode automatically.
 *
 * line-height: Default browser line-height (usually 1.2) is too tight.
 * 1.15 provides better readability without being too loose.
 *
 * -webkit-text-size-adjust: Prevents iOS Safari from randomly making
 * text bigger when you rotate the device. 100% = keep original size.
 *
 * -moz-tab-size: When users press Tab, how wide should it be?
 * Default is usually 8 spaces, which is excessive. 4 is more reasonable.
 */
html {
  color-scheme: light dark;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
}

/*
 * BODY IMPROVEMENTS
 *
 * margin: 0 - Remove browser's default 8px margin around page
 *
 * line-height: 1.5 - Override the html line-height for body text.
 * 1.5 is considered optimal for body text readability.
 *
 * -webkit-font-smoothing: Makes fonts look better on macOS/iOS.
 * Only affects Apple devices, ignored elsewhere.
 *
 * font-family: Use the best font available on each system:
 * - system-ui: Uses whatever the OS considers its "system font"
 * - -apple-system: San Francisco on macOS/iOS
 * - 'Segoe UI': Windows 10/11 font
 * - Roboto: Android's font
 * - Falls back to generic sans-serif if none available
 */
body {
  margin: 0;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto,
               Helvetica, Arial, sans-serif, 'Apple Color Emoji',
               'Segoe UI Emoji', 'Segoe UI Symbol';
}

/* ===================================================================
   BLOCK-LEVEL ELEMENTS
   =================================================================== */

/*
 * ENSURE SEMANTIC HTML5 ELEMENTS BEHAVE AS BLOCKS
 *
 * Older browsers (especially IE) don't know these HTML5 elements
 * should be block-level. This ensures they behave consistently.
 *
 * Modern browsers already do this, but it doesn't hurt to be explicit.
 */
main,
section,
article,
aside,
header,
footer,
nav,
details,
summary {
  display: block;
}

/*
 * HORIZONTAL RULES (HR) IMPROVEMENTS
 *
 * height: 0 - By default, <hr> has unpredictable height across browsers
 * color: inherit - Makes the line color match surrounding text
 * border-top-width: 1px - Explicitly set the visible line thickness
 */
hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}

/* ===================================================================
   MEDIA ELEMENTS (IMAGES, VIDEO, ETC.)
   =================================================================== */

/*
 * RESPONSIVE MEDIA BY DEFAULT
 *
 * max-width: 100% - Never let images/video overflow their container
 * height: auto - Maintain aspect ratio when width changes
 * display: block - Remove weird spacing below images (caused by inline default)
 *
 * This prevents the common problem where images break mobile layouts
 * by being wider than the screen.
 */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ===================================================================
   FORM ELEMENTS
   =================================================================== */

/*
 * MAKE FORM CONTROLS INHERIT TYPOGRAPHY
 *
 * By default, form elements use browser/OS defaults, which often
 * look completely different from your site's font.
 *
 * font: inherit - Use the same font as surrounding text
 *
 * This makes your forms look integrated with your design,
 * rather than like alien elements dropped in.
 */
button,
input,
optgroup,
select,
textarea {
  font: inherit;
  color: inherit;
}

/*
 * BUTTON IMPROVEMENTS
 *
 * Buttons have weird defaults that make them hard to style consistently.
 * These rules make them behave more predictably.
 */
button {
  /* Remove iOS safari's weird inner shadow */
  -webkit-appearance: none;
  /* Ensure buttons can have custom backgrounds */
  background-color: transparent;
  /* Remove default border that varies by browser */
  border: 0;
  /* Make sure text can wrap in buttons */
  overflow-wrap: break-word;
}

/*
 * INPUT IMPROVEMENTS
 *
 * Remove browser-specific styling that makes inputs hard to customize.
 */
input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* ===================================================================
   TYPOGRAPHY ELEMENTS
   =================================================================== */

/*
 * BETTER TEXT WRAPPING
 *
 * overflow-wrap: break-word - If a word is too long for its container,
 * break it across lines rather than overflowing.
 *
 * This prevents long URLs or words from breaking your layout.
 *
 * Applied to headings and paragraphs where this is most likely to matter.
 */
p,
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/*
 * BETTER LIST DEFAULTS
 *
 * Remove default padding from lists, but only when they're inside
 * nav elements or have a role="list" (meaning they're UI lists,
 * not content lists).
 *
 * This prevents the common issue where navigation menus have
 * unwanted indentation.
 */
nav ul,
nav ol,
ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

/* ===================================================================
   INTERACTIVE ELEMENTS
   =================================================================== */

/*
 * LINK IMPROVEMENTS
 *
 * Remove default underlines from links, but add them back on hover/focus.
 * This gives you more control over link styling while maintaining
 * accessibility (users can still see when links are focused).
 */
a {
  text-decoration: none;
  color: inherit;
}

a:hover,
a:focus {
  text-decoration: underline;
}

/*
 * FOCUS IMPROVEMENTS
 *
 * Make focus indicators more visible and consistent across browsers.
 * This is crucial for keyboard navigation accessibility.
 */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ===================================================================
   TABLE ELEMENTS
   =================================================================== */

/*
 * BETTER TABLE DEFAULTS
 *
 * border-collapse: collapse - Remove the default spacing between table cells
 * border-spacing: 0 - Extra insurance that there's no cell spacing
 *
 * This gives you clean tables that are easier to style consistently.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* ===================================================================
   UTILITY CLASSES (OPTIONAL)
   =================================================================== */

/*
 * SCREEN READER ONLY CONTENT
 *
 * Sometimes you need content that's available to screen readers
 * but visually hidden. This is better than display: none because
 * it doesn't hide content from assistive technology.
 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}