/*==========================================================
  Clunky Design System (CDS) v1.0
  RESET.CSS

  Purpose:
  - Establish predictable browser defaults
  - Improve accessibility
  - Improve developer experience
  - Provide a clean foundation for all pages

  Dependencies:
  - variables.css

==========================================================*/


/*==========================================================
  UNIVERSAL BOX MODEL
==========================================================*/

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


/*==========================================================
  REMOVE DEFAULT MARGINS
==========================================================*/

* {
  margin: 0;
}


/*==========================================================
  ROOT SETTINGS
==========================================================*/

html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}


/*==========================================================
  BODY FOUNDATION
==========================================================*/

body {
  min-height: 100vh;

  background: var(--color-bg);

  color: var(--color-text);

  font-family: var(--font-primary);

  font-size: var(--fs-base);

  line-height: var(--lh-body);

  text-rendering: optimizeLegibility;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  overflow-x: hidden;
}


/*==========================================================
  MAIN
==========================================================*/

main {
  display: block;
}


/*==========================================================
  MEDIA ELEMENTS
==========================================================*/

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}


/*==========================================================
  IMAGE QUALITY
==========================================================*/

img {
  height: auto;
}


/*==========================================================
  SVG DEFAULTS
==========================================================*/

svg {
  overflow: visible;
}


/*==========================================================
  FORM CONTROLS
==========================================================*/

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}


/*==========================================================
  BUTTONS
==========================================================*/

button {
  cursor: pointer;
  border: none;
  background: none;
}


/*==========================================================
  TEXTAREA
==========================================================*/

textarea {
  resize: vertical;
}


/*==========================================================
  LINKS
==========================================================*/

a {
  color: var(--color-primary);
  text-decoration: none;

  transition:
    color var(--transition-fast);
}


a:hover {
  color: var(--color-primary-dark);
}


/*==========================================================
  LISTS
==========================================================*/

ul,
ol {
  padding-left: 1.5rem;
}


li {
  margin-bottom: .4rem;
}


/*==========================================================
  TABLES
==========================================================*/

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}


/*==========================================================
  CODE
==========================================================*/

code,
pre,
kbd,
samp {
  font-family: var(--font-code);
}


/*==========================================================
  PRE
==========================================================*/

pre {
  overflow-x: auto;
}


/*==========================================================
  BLOCKQUOTE
==========================================================*/

blockquote {
  quotes: none;
}


blockquote::before,
blockquote::after {
  content: "";
}


/*==========================================================
  HR
==========================================================*/

hr {
  border: 0;

  border-top:
    1px solid var(--color-border);

  margin:
    var(--space-8) 0;
}


/*==========================================================
  DETAILS
==========================================================*/

details {
  display: block;
}


summary {
  cursor: pointer;
}


/*==========================================================
  DIALOG
==========================================================*/

dialog {
  border: none;
}


/*==========================================================
  EMBEDDED CONTENT
==========================================================*/

iframe {
  border: 0;
}


/*==========================================================
  HIDDEN ATTRIBUTE
==========================================================*/

[hidden] {
  display: none !important;
}


/*==========================================================
  FOCUS STATES
==========================================================*/

:focus-visible {

  outline:
    3px solid var(--color-primary);

  outline-offset: 3px;

  border-radius:
    var(--radius-xs);
}


/*==========================================================
  DISABLE OUTLINE WHEN NOT KEYBOARD FOCUS
==========================================================*/

:focus:not(:focus-visible) {
  outline: none;
}


/*==========================================================
  TEXT SELECTION
==========================================================*/

::selection {
  background:
    rgba(37,99,235,.18);

  color:
    var(--color-text);
}


/*==========================================================
  PLACEHOLDER
==========================================================*/

::placeholder {
  color:
    var(--color-text-muted);

  opacity: 1;
}


/*==========================================================
  SCROLLBAR
==========================================================*/

* {
  scrollbar-width: thin;

  scrollbar-color:
    var(--color-primary-light)
    var(--color-bg-alt);
}


::-webkit-scrollbar {
  width: 10px;
}


::-webkit-scrollbar-track {
  background:
    var(--color-bg-alt);
}


::-webkit-scrollbar-thumb {

  background:
    var(--color-primary-light);

  border-radius:
    var(--radius-pill);
}


::-webkit-scrollbar-thumb:hover {

  background:
    var(--color-primary);
}


/*==========================================================
  ANCHOR OFFSET
==========================================================*/

section[id] {
  scroll-margin-top:
    calc(
      var(--header-height)
      + 20px
    );
}


/*==========================================================
  TYPOGRAPHY PROTECTION
==========================================================*/

p,
li,
blockquote,
figcaption {
  overflow-wrap: break-word;
}


/*==========================================================
  LONG URLS
==========================================================*/

a,
code {
  overflow-wrap: anywhere;
}


/*==========================================================
  FIELDSETS
==========================================================*/

fieldset {
  border: none;
}


/*==========================================================
  LEGEND
==========================================================*/

legend {
  padding: 0;
}


/*==========================================================
  ADDRESS
==========================================================*/

address {
  font-style: normal;
}


/*==========================================================
  ABBR
==========================================================*/

abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}


/*==========================================================
  FIGURE
==========================================================*/

figure {
  margin: 0;
}


/*==========================================================
  STRONG
==========================================================*/

strong {
  font-weight:
    var(--fw-bold);
}


/*==========================================================
  SMALL
==========================================================*/

small {
  font-size:
    var(--fs-sm);
}


/*==========================================================
  SUB / SUP
==========================================================*/

sub,
sup {

  font-size: 75%;

  line-height: 0;

  position: relative;

  vertical-align: baseline;
}


sub {
  bottom: -.25em;
}


sup {
  top: -.5em;
}


/*==========================================================
  REDUCED MOTION
==========================================================*/

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;

    scroll-behavior:
      auto !important;
  }

}


/*==========================================================
  PRINT STYLES
==========================================================*/

@media print {

  body {
    background: white;
    color: black;
  }

  a {
    color: black;
  }

  nav,
  aside,
  footer,
  .no-print {
    display: none !important;
  }

}


/*==========================================================
  ACCESSIBILITY UTILITIES
==========================================================*/

.visually-hidden {

  position: absolute !important;

  width: 1px;
  height: 1px;

  padding: 0;
  margin: -1px;

  overflow: hidden;

  clip:
    rect(0,0,0,0);

  white-space: nowrap;

  border: 0;
}


/*==========================================================
  END
==========================================================*/