/* reset.css */

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

/* 2. Remove default margin and padding from most elements. */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%; /* Resets font size to allow easier scaling with `rem` or `em` */
  font: inherit; /* Makes form elements and others inherit font properties */
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

/* 3. Set core root defaults. */
html {
  line-height: 1.5; /* A sensible default line height */
  -webkit-font-smoothing: antialiased; /* Smoother text rendering on WebKit */
  -moz-osx-font-smoothing: grayscale; /* Smoother text rendering on Firefox */
  text-rendering: optimizeLegibility; /* More advanced control over text rendering */
}

/* 4. Make images and other media easier to work with. */
img, picture, video, canvas, svg {
  display: block; /* Remove bottom space under images */
  max-width: 100%; /* Makes images responsive by default */
}

/* 5. Inherit fonts for inputs and buttons. */
input, button, textarea, select {
  font: inherit;
  margin: 0; /* Ensure form elements don't have their own margins */
}

/* 6. Remove list styles (bullets/numbers) on ul, ol elements with a list role, */
/* which suggests they are used for navigation or other non-list purposes. */
/* For a more aggressive reset, you can remove these from all ul/ol: */
ul, ol {
  list-style: none;
}

/* 7. Remove default text decoration from links (you'll add it back selectively) */
a {
  text-decoration: none;
  color: inherit; /* Makes links inherit color from their parent */
}

/* 8. Reset table borders */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* 9. Improve readability of focused elements for keyboard users */
:focus-visible {
  outline: 2px solid dodgerblue; /* Or your brand color */
  outline-offset: 2px;
}

/* 10. Hidden attribute consistency */
[hidden] {
  display: none !important; /* Ensure elements with [hidden] are truly hidden */
}