@use "variables";
@use "mixins" as *;
// Foundational styles
//
// Update the foundational and global aspects of the page.

* {
  box-sizing: border-box;
}

body {
  padding: 2rem var(--spacer-2);
  margin: 0;
  font-family: var(--body-font);
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
  color: var(--contrast-med);
  background-color: var(--background);
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}

.container {
  max-width: variables.$max-width;
  margin-inline: auto;
}

footer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--spacer-2);
  font-size: 0.875rem;
  border-top: 0.125rem solid var(--muted);

  .links {
    @include inline-flex;
    margin-bottom: var(--spacer);

    @media(min-width: variables.$breakpoint-md) {
      margin-bottom: 0;
    }
  }

  @media(min-width: variables.$breakpoint-md) {
    flex-direction: row;
  }
}

a {
  font-weight: inherit;
  line-height: inherit;
  color: var(--contrast-high);
  text-decoration: none;
  transition: all .2s ease-in-out;
  text-decoration-skip-ink: auto;
  text-underline-offset: .25rem;
}

body a, footer a {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--contrast-low);
  text-underline-offset: .25rem;

  // `:focus` is linked to `:hover` for basic accessibility
  &:hover,
  &:focus {
    text-decoration-color: var(--contrast-high);
  }
}

img {
  display: block;
  max-width: 100%;
  margin-bottom: var(--spacer);
  border-radius: var(--border-radius);
}

table {
  margin-bottom: var(--spacer);
  width: 100%;
  border: 0 solid var(--contrast-med-low);
  border-collapse: collapse;
}

td,
th {
  padding: .25rem .5rem;
  border-color: inherit;
  border-style: solid;
  border-width: 0;
  border-bottom-width: 1px;
}

th {
  text-align: left;
}

thead th {
  border-bottom-color: currentColor;
}

mark {
  padding: .15rem;
  background-color: var(--text-highlight-bg);
  border-radius: .125rem;
}