/* ------------------------------------------------------------------------
reset.css

Goals:
- Fix common CSS headaches.
- Activate future native CSS features.
- Respect user choices when possible.
- Use logical properties.

Directions:
1. If you want a centered, fixed-width site, uncomment the `main` selector.
2. If your font has large ascenders or descenders, comment out or edit the heading + `button, input, label` line-height.
3. If you want links to be the same color as text, uncomment the `currentColor` rule.
4. If you have a fixed header, comment out or adjust the `:target` selector.

Sources:
- David Bushell: https://dbushell.com/2025/09/12/css-reset/
- Josh W Comeau: https://www.joshwcomeau.com/css/custom-css-reset/
- Andy Bell: https://piccalil.li/blog/a-more-modern-css-reset/
- Kevin Powell: https://thecascade.dev/article/least-amount-of-css/
- Adam Argyle: https://nerdy.dev/6-css-snippets-every-front-end-developer-should-know-in-2025
- Kilian Valkhof: https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/
- Chris Coyier: https://frontendmasters.com/blog/the-coyier-css-starter/
- Greg Gibson: https://css-tricks.com/two-issues-styling-the-details-element-and-how-to-solve-them/
- Scott Vandehey: https://spaceninja.com/blog/2009/how-to-avoid-paragraph-gaps-when-using-superscript-and-subscript/

------------------------------------------------------------------------*/

@layer reset {
  * {
    margin: 0;
  }

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

  html {
    /* Sets starting color mode based on user's preference. */
    color-scheme: light dark;

    /* Sets responsive font resizing at root. */
    font-family: system-ui, sans-serif;
    font-size: clamp(1rem, 1rem + 0.5dvw, 2rem);
    font-synthesis: style; /* Prevent synthetic bold & italic when unavailable. */
    hanging-punctuation: first allow-end last;
    line-height: 1.4;
    word-break: break-word;

    /* Mobile Safari increases the default font-size when you switch a website from portrait to landscape. */
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;

    -webkit-font-smoothing: antialiased;
  }

  pre {
    white-space: pre-wrap;
  }

  @media (prefers-reduced-motion: no-preference) {
    html {
      interpolate-size: allow-keywords; /* Allows transitions between number values and keywords (auto). */
      & :focus-within {
        scroll-behavior: smooth;
      }
    }

    @view-transition {
      navigation: auto; /* Allows default crossfade page transitions to new page when links are clicked. */
    }

    /* Gives view-transitions the same base duration, fill mode and ease. */
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
      animation-duration: 0.6s;
      animation-fill-mode: forwards;
      animation-timing-function: var(--default-ease);
    }

    :root {
      transition:
        background-color var(--transition-speed) var(--transition-function),
        color var(--transition-speed) var(--transition-function); /* Smooth transition for toggling light and dark mode */
    }
  }

  /* TODO: Check how this works with header/footer */
  body {
    min-block-size: 100vh; /* Prevents pages shorter than the viewport height. */
  }

  img,
  figure,
  picture,
  video,
  canvas,
  svg,
  iframe {
    display: block; /* Without this, media elements are inline by default. */
    max-inline-size: 100%; /* Prevents media from overflowing container due to being "replaced elements." */
    block-size: auto;
    border-style: none;
  }

  /* TODO: Ensure this isn't already an Every Layout class */
  /* Creates centered, line-width limited layout.
main {
  margin-inline: auto;
  max-inline-size: min(70ch, 100% - 4rem);
}
 */

  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: break-word;
  }

  p {
    text-wrap: pretty;
  }

  /* TODO: Change selector to :heading when released */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    text-wrap: balance;
  }

  h1,
  h2,
  h3,
  h4,
  button,
  input,
  label {
    line-height: 1.1; /* Don't use if font has large ascenders & descenders. */
  }

  /* Prevents sup and sub from creating extra space between lines */
  sup {
    vertical-align: baseline;
    position: relative;
    bottom: 0.33em;
  }

  sub {
    vertical-align: baseline;
    position: relative;
    bottom: -0.33em;
  }

  a:not([class]) {
    /* color: currentColor; */ /* Allows links to inherit body color. Uncomment if you identify links with techniques besides color. */
    text-decoration-skip-ink: auto; /* text-decoration (like underlines) skips ascenders & descenders. */
  }

  :target {
    scroll-margin-block: 5ex; /* Adds space above the target of an anchor link. Adjust if you have a fixed header. */
  }

  ul[role="list"],
  ol[role="list"] {
    list-style: none; /* Very specific usability workaround for Safari: https://piccalil.li/blog/a-more-modern-css-reset/ */
  }

  /* TODO: Do I need this `inside` if I have the above? https://piccalil.li/links/the-coyier-css-starter/ */
  ul,
  ol {
    margin: 0;
    padding: 0;
    list-style: inside;
    ul,
    ol {
      padding-inline-start: 2ch;
    }
  }

  /* Allows form controls to inherit body font styling. */
  input,
  button,
  textarea,
  select {
    font-family: inherit;
    font-size: inherit;
  }

  textarea {
    field-sizing: content;
    min-block-size: 8lh;
    inline-size: 100%;
    max-inline-size: 100%;
  }

  textarea:not([rows]) {
    min-block-size: 10em; /* Sensible minimum height for textareas unless specified in HTML. */
  }

  input:not(
    :where(
      [type="submit"],
      [type="checkbox"],
      [type="radio"],
      [type="button"],
      [type="reset"]
    )
  ) {
    inline-size: 100%;
  }

  button,
  input:where([type="submit"], [type="reset"], [type="button"]) {
    background: CanvasText;
    color: Canvas;
    border: 1px solid transparent;
  }

  table {
    caption-side: bottom;
    border-collapse: collapse;
  }

  table td {
    font-size: 0.9em;
  }

  table td,
  table th {
    word-break: normal;
    border: 1px solid gray;
    padding: 0.5rem;
  }

  [role="region"][aria-labelledby][tabindex] {
    overflow: auto;
  }

  caption {
    font-size: 0.9em;
  }

  input:is([type="checkbox"], [type="radio"]),
  select,
  label,
  button {
    cursor: pointer; /* show the mickey mouse finger on interactive controls */
  }

  /* Sets smarter defaults for the native disclosure element */
  details summary {
    cursor: pointer;
  }

  details summary > * {
    display: inline;
  }
}