/* A Modern CSS Reset - Based on Andy Bell's "A Modern CSS Reset" */

/* 1. Use a more intuitive box-sizing model. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2. Remove default margin and padding from common elements to avoid inconsistencies. */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
  padding: 0;
}

/* 3. Set core body defaults for better typography and rendering. */
body {
  min-height: 100vh; /* Ensure body takes at least full viewport height */
  text-rendering: optimizeLegibility; /* Improve text rendering on some systems */
  line-height: 1.5; /* Common base line height for readability */
  -webkit-font-smoothing: antialiased; /* Enable font anti-aliasing for macOS */
}

/* 4. Remove list styles on ul, ol elements with a class attribute (to preserve semantic lists). */
/* If you want to remove list styles from *all* ul/ol, remove the [class] selector. */
ul[class],
ol[class] {
  list-style: none;
}

/* 5. A elements that don't have a class get default styles removed (for example, to make a nav link look like plain text until explicitly styled). */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* 6. Make images easier to work with. */
img,
picture,
video,
canvas,
svg {
  display: block; /* Removes extra space below images */
  max-width: 100%; /* Ensures images are responsive */
}

/* 7. Inherit fonts for form controls to avoid browser inconsistencies. */
input,
button,
textarea,
select {
  font: inherit;
}

/* 8. Allow for easier text selection across different elements. */
/* This can be adjusted based on project needs. */
*:focus-visible {
  outline-offset: 3px; /* Provides a small gap around the outline */
}

/* 9. Prevent text overflows. */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* 10. Create a root stacking context for better z-index management. */
#root,
#__next {
  /* Common IDs for frameworks like React/Next.js */
  isolation: isolate;
}

/* 11. Add a responsive table default */
table {
  border-collapse: collapse;
  width: 100%;
}