/* 
 * bjesuiter's CSS Reset, last updated 2022-12-09
 * My Github Gist: https://gist.github.com/bjesuiter/71bd3f919c9a70d0a41553fada832174
 *
 * Based on: Josh's Custom CSS Reset
 * Blogpost: https://www.joshwcomeau.com/css/custom-css-reset/
 * 
 * A css reset scss file for an app-like shell. 
 * Can be embedded into index.html to speed up app load times. 
 * But be careful with components with shadow dom / emulated shadow dom encapsulation (= default), 
 * for which global styles will not be applied
 */

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

/* 2. Remove default margin */
* {
    margin: 0;
}

/* 3. Allow percentage-based heights in the application */
html,
body {
    height: 100%;
}

/* Typographic tweaks! - 4. Add accessible line-height */
/* +bje: Line-height tweaks, but avoiding headings (bc. it produces big gaps)  */
body:where(:not(h1, h2, h3, h4, h5, h6)) {
    line-height: 1.5;
}

/* Typographic tweaks! - 5. Improve text rendering */
body {
    -webkit-font-smoothing: antialiased;

    /* Extension by bje - make body topmost parent for absolute positioning */
    position: relative;

    /* Extension by piccali.li */
    text-rendering: optimizeSpeed;
}

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

/* 7. Remove built-in form typography styles */
input,
button,
textarea,
select {
    font: inherit;
}

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

/* 9. Create a root stacking context */
#root,
#__next {
    isolation: isolate;
}

/* More CSS Reset Extensions from 
 * https://piccalil.li/blog/a-modern-css-reset/
 *
 */

/* Set core root defaults */
html:focus-within {
    scroll-behavior: smooth;
}

/* I only reset list-style where a list element has a role=["list"] attribute. 
This assists with some accessibility issues, expertly explained by Scott. */
/* bje: added a class .no-dot to indicate, that this rule is only intended for lists which have no dot before their items */
ul.no-dot[role='list'],
ol.no-dot[role='list'] {
    list-style: none;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}