/*
  MODERN CSS RESET
  Based on Josh Comeau's CSS Reset with rock-solid foundations
  https://www.joshwcomeau.com/css/custom-css-reset/

  Purpose: Remove browser inconsistencies and set sensible defaults
*/

/*
  1. Use border-box sizing for all elements
  Why: Makes width/height calculations predictable (padding/border included)
*/
*, *::before, *::after {
  box-sizing: border-box;
}

/*
  2. Remove default margins and padding
  Why: Start from zero, add spacing intentionally via utility classes
*/
* {
  margin: 0;
  padding: 0;
}

/*
  3. Set core body defaults
  Why: Smooth scrolling, minimum height to allow sticky footer
*/
html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*
  4. Make images and media responsive by default
  Why: Prevents images from overflowing containers
*/
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/*
  5. Remove default list styles
  Why: We'll style lists intentionally (navigation, footer links, etc.)
*/
ul, ol {
  list-style: none;
}

/*
  6. Inherit fonts for form elements
  Why: By default, form elements don't inherit typography
*/
input, button, textarea, select {
  font: inherit;
}

/*
  7. Remove default button styles
  Why: Allows full custom styling without fighting browser defaults
*/
button {
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
}

/*
  8. Avoid text overflow in headings and paragraphs
  Why: Long words or URLs won't break layout
*/
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/*
  9. Remove default anchor styles (we'll style intentionally)
  Why: Allows custom link styling without specificity battles
*/
a {
  text-decoration: none;
  color: inherit;
}

/*
  10. Create accessible focus states for keyboard navigation
  Why: WCAG 2.1 AA requires visible focus indicators
  Note: Components.css will add custom focus styles
*/
:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/*
  11. Remove outline for mouse users (but keep for keyboard users)
  Why: Balances aesthetics with accessibility
*/
:focus:not(:focus-visible) {
  outline: none;
}

/*
  12. Improve text rendering
  Why: Better readability, especially for light text on dark backgrounds
*/
body {
  text-rendering: optimizeSpeed;
}

h1, h2, h3, h4, h5, h6 {
  text-rendering: optimizeLegibility;
}

/*
  13. Ensure root element can be used for full-height layouts
  Why: Allows sticky footer and full-viewport sections
*/
#root, #__next {
  isolation: isolate;
}

/*
  14. Set sensible line heights for better readability
  Why: Default line-height is often too tight for body text
*/
p, li {
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
}