/* SOURCE: 
 *   Andy Bell (https://piccalil.li/blog/a-more-modern-css-reset/)
 *      1, 2, 3, 6, 7
 *
 *   Josh Comeau (https://www.joshwcomeau.com/css/custom-css-reset/)
 *      4, 5, 8
 */



/* Configurables (Be careful) */
   :root {
      --RESET__TARGET-SCREENS_MIN : 320px;
      --RESET__TARGET-SCREENS_MAX : 1920px;
   }







/* The 'de facto' reset */
   * {
      padding : 0;
   }

   *, *::before, *::after {
      box-sizing : border-box;
   }

   *:not(dialog) {
      margin : 0;
   }


/* Prevent font size inflation [1] */
   html {
      -moz-text-size-adjust    : none;
      -webkit-text-size-adjust : none;
      text-size-adjust         : none;
   }



/* Try to fit the viewport down to 320px */
   html {
      min-width:  max(100vw, var(--RESET__TARGET-SCREENS_MIN));
   }

   body {
      max-width: var(--RESET__TARGET-SCREENS_MAX);
   }

   html,
   body {
      min-height: 100vh;
      margin: 0 auto;
      width: 100%;
      height: 100%;
   }

/* Avoid text overflows [2] */
   p,
   h1,
   h2,
   h3,
   h4 {
      overflow-wrap: break-word;
   }

/* Modernize the default style for <a> elements [3] */
   /* Don't fight for specificity */
   *:where(a) {
      text-decoration-skip-ink: auto;
      color: currentColor;
   }



/* Why add bullets to lists by default? Add them iff we need them. */
   li {
      list-style: none;
   }

   ul.bulleted li {
      list-style: unset; /* TODO: verify 'unset' returns the bullets to default */
   }



/* Improve media defaults [4] */
   img,
   picture,
   video,
   canvas,
   svg {
      display: block;
      max-width: 100%;
   }



/* Inherit fonts for inputs and buttons [5] */
   input,
   button,
   textarea,
   select {
      font: inherit;
   }


/* Firefox (and possibly others) seems to have baked in width for some form elements 
   which causes issues with flex-shrink, so... */
/* Reset the baked-in width applied to form elements */
   input,
   button,
   textarea,
   select {
      width: max(3rem, 100%);
   }



/* Make sure textareas without a rows attribute are not tiny [6] */
   textarea:not([rows]) {
      min-height: 10em;
   }



/* Anything that has been anchored to should have extra scroll margin [7] */
   :target {
      scroll-margin-block: 5ex;
   }


/* 14. Create a root stacking context [8] */
   #root, #__next {
      isolation: isolate;
   }



/* Minimum support for dark mode */
   @media (prefers-color-scheme: dark) {

      body {
         color            : white;
         background-color : black;
      }

   }



/* The content body is the content that exists between the header and footer */
/* I use this as a 'mock' element, so it's using :where to keep specificity low */
   section:where([role="content-body"]) {

   }