/*
 * CSS Reset
 *
 * Provides a consistent baseline across all browsers by removing
 * default margins, paddings, and styling inconsistencies.
 *
 * Based on modern CSS reset best practices.
 */

/* ============================================
   BOX SIZING
   ============================================ */

/*
 * Use border-box sizing everywhere
 * This makes width/height calculations more intuitive
 * (padding and border are included in the element's total width/height)
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ============================================
   REMOVE DEFAULT SPACING
   ============================================ */

/*
 * Remove default margin and padding from all elements
 * We'll add them back deliberately in global.css
 */
* {
  margin: 0;
  padding: 0;
}

/* ============================================
   ROOT & BODY DEFAULTS
   ============================================ */

html {
  /* Smooth scrolling for anchor links */
  scroll-behavior: smooth;

  /* Prevent horizontal overflow */
  overflow-x: hidden;
}

body {
  /* Prevent horizontal overflow */
  overflow-x: hidden;

  /* Improve text rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Set default line height */
  line-height: 1.5;

  /* Minimum height to fill viewport */
  min-height: 100vh;
}

/* ============================================
   TYPOGRAPHY DEFAULTS
   ============================================ */

/*
 * Make heading font sizes consistent
 * (browsers have different default sizes)
 */
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/*
 * Remove list styles by default
 * We'll add them back when needed
 */
ul, ol {
  list-style: none;
}

/* ============================================
   LINKS
   ============================================ */

/*
 * Remove default link styles
 * We'll style them in global.css
 */
a {
  color: inherit;
  text-decoration: none;
}

/* ============================================
   BUTTONS & FORM ELEMENTS
   ============================================ */

/*
 * Make buttons and inputs inherit font
 * (By default, they don't)
 */
button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

/*
 * Remove default button styles
 */
button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

/*
 * Remove default input appearances
 */
input,
textarea,
select {
  border: none;
  background: none;
}

/*
 * Remove spinner from number inputs
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

/* ============================================
   IMAGES & MEDIA
   ============================================ */

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

/* ============================================
   TABLES
   ============================================ */

/*
 * Remove default table spacing
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/*
 * Screen reader only class
 * Hides content visually but keeps it accessible to screen readers
 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/*
 * Remove all animations and transitions for users who prefer reduced motion
 * This is important for accessibility (vestibular disorders, seizures)
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================
   UTILITY
   ============================================ */

/*
 * Remove focus outline for mouse users, keep it for keyboard users
 * (Applied via JavaScript in navigation.js)
 */
body.using-mouse *:focus {
  outline: none;
}

/*
 * Ensure focus outlines are visible for keyboard users
 */
*:focus-visible {
  outline: 2px solid var(--color-sage);
  outline-offset: 2px;
}