/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
  Adapted for MkDocs Material compatibility
*/

/* 1. Use a more-intuitive box-sizing model (Material already handles this) */
/* Material sets box-sizing: inherit on * and box-sizing: border-box on html */

/* 2. Remove default margin (Material handles body, we extend to all elements) */
* {
  margin: 0;
}

/* 3. Enable keyword animations (only when motion is preferred) */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

/* 4. Add accessible line-height and readable font-size */
/* Material sets line-height: 1.6 on .md-typeset, we set a base accessible default */
body {
  font-size: 1rem; /* 16px - override Material's tiny 0.5rem */
  line-height: 1.5;
  /* Material already handles -webkit-font-smoothing */
}

/* 5. Improve media defaults (Material doesn't override these, so we can add them) */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 6. Inherit fonts for form controls (Material partially handles this) */
input, button, textarea, select {
  font: inherit;
}

/* 7. Avoid text overflows (Material handles overflow-wrap on .md-typeset) */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 8. Improve line wrapping (Material doesn't set text-wrap) */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/* 9. Create a root stacking context (Material uses different root elements) */
/* Skip this as Material manages its own stacking contexts */