/* Variables ------------------ */
:root {
  /* spacing */
  --space-unit--s: 1.5rem;
  --base__space-unit: 2.5rem;
  --space-unit--l: 3rem;

  /* font sizing */
  --heading-1-size: 3.25;
  --heading-2-size: 2.6;
  --heading-3-size: 1.8;
  --heading-4-size: 1.2;
  --body-size: 1.1;

  /* colours */
  --color-main: #00a9c7;
  --color-highlight: #c638e5;
  --color-light: #ffffff;
  --color-dark: #000024;

  /* transition */
  --transition: 0.3s ease-in-out;
}

@media (prefers-color-scheme: light) {
  :root {
    --color-main: #007e94;
    --color-highlight: #a525c1;
  }
}

/* Layout --------------------- */
main {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

header,
section,
footer {
  margin: 0;
}

header {
  padding-bottom: var(--space-unit--l);
}

section {
  padding: var(--base__space-unit) 0;
  flex-grow: 1;
}

.content-wrapper {
  margin: 0 auto var(--base__space-unit);
  max-width: 76rem;
  padding: 0 var(--base__space-unit);
  width: 100%;
  position: relative;

  @media screen and (min-width: 75.9rem) {
    padding: 0 1rem;
  }
}

header,
footer {
  background-color: var(--color-dark);
  margin-bottom: 0;
}

/* Specific elements */
table {
  margin: var(--space-unit--l) 0;
}

@media screen and (max-width: 599px) {
  thead {
    display: none;
  }

  tr {
    display: flex;
    flex-direction: column;

    td:first-of-type {
      color: var(--color-highlight);
    }
  }
}

th {
  border-bottom: solid 2px var(--color-highlight);
  padding: var(--space-unit--s) 0;
}

hr {
  border-color: var(--color-highlight);
  margin: var(--space-unit--l) 0;
}

/* Typography ----------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-main);
  line-height: 1.5;
}

h2 {
  margin: var(--base__space-unit) 0 var(--space-unit--s);

  @media screen and (min-width: 600px) {
    font-size: calc((var(--heading-2-size) - 1 ) * 1.2vw + 1rem);
  }
}

h3 {
  margin: var(--base__space-unit) 0 0;

  @media screen and (min-width: 600px) {
    font-size: calc((var(--heading-3-size) - 1 ) * 1.2vw + 1rem);
  }
}

h4,
h5,
h6 {
  @media screen and (min-width: 600px) {
    font-size: calc((var(--heading-4-size) - 1 ) * 1.2vw + 1rem);
  }
}

p,
a,
li,
td {
  line-height: 2.75rem;
}

a,
p > a {
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--color-highlight);
  transition: var(--transition);

  &:hover,
  &:focus {
    color: var(--color-highlight);
  }
}

.micetype {
  font-size: calc((var(--body-size) - 1) * 1.2vw + 1rem);
}

header {
  @media screen and (max-width: 599px) {
    display: flex;
    flex-direction: column;
  }

  h1 {
    &:before,
    &:after {
      color: var(--color-light);

      @media screen and (max-width: 599px) {
        display: block;
      }
    }


    @media screen and (max-width: 599px) {
      padding-top: 0;
    }

    @media screen and (min-width: 600px) {
      font-size: calc((var(--heading-1-size) - 1 ) * 1.2vw + 1rem);
    }
  }

  nav a {
    text-decoration-color: transparent;

    &:hover {
      color: var(--color-light);
      text-decoration-color: var(--color-highlight);
    }
  }
}

header,
footer {
  h1,
  a, 
  p,
  nav ul li a {
    color: var(--color-light);
  }

  h3::before {
    display: none;
  }
}

/* Mobile menu ------------------ */
button {
  display: block;
  color: var(--color-light);
  border: solid 1px var(--color-light);
  border-radius: 0.5rem;
  align-self: center;
  margin: 0 0 var(--space-unit--s);

  @media screen and (min-width: 600px) {
    display: none;
  }
}

nav ul:not(.hidden) {
  @media screen and (max-width: 599px) {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
}

.hidden {
  display: none;

  @media screen and (min-width: 600px) {
    display: block;
  }
}

header nav ul li { 
  @media screen and (min-width: 600px) {
    padding-left: var(--space-unit--s);

    &:last-of-type {
      padding-right: var(--space-unit--s);
    }
  }
  
  a {
    position: relative;

    @media screen and (max-width: 599px) {
      padding: var(--space-unit--s) 0;
    }

    &::before {
      color: var(--color-highlight);
      position: absolute;
      left: 0;
      transition: var(--transition);
    }

    &:hover::before,
    &:focus::before {
      left: -12px;
      opacity: 1;
    }
  }
}