body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;

  > main {
    flex: 1;
    align-content: center;
  }

  font-family: var(--primary-font);
  color: var(--color-text);
  background-color: var(--color-surface);
}

a {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--duration-normal) var(--ease);
}

a:hover,
a:focus-visible {
  color: var(--color-accent);
}

.content-wrapper {
  max-width: 80rem;
  margin: 0 auto;
}

@media only screen and (min-width: 0rem) {
  .primary-header {
    position: sticky;
    top: 0;
    z-index: 1000;

    padding: var(--space-s) var(--space-s-m);

    background: rgba(252, 252, 252, 0.8);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);

    transition: padding var(--duration-normal) var(--ease);

    > .content-wrapper {
      display: flex;
      align-items: center;
      justify-content: space-between;

      > .logo {
        display: flex;
        align-items: center;
        gap: 6px;

        font-family: var(--secondary-font);
        font-size: var(--step-1);
        font-weight: 600;
        line-height: 0;
        text-transform: uppercase;

        color: var(--color-text);

        text-decoration: none;

        > img {
          width: 1.2em;
          height: auto;
        }
      }

      > .hamburger {
        display: flex;
        flex-direction: column;
        gap: 4px;

        padding: 0;
        background: none;
        border: none;

        cursor: pointer;

        > .bar {
          width: 20px;
          height: 2px;

          background-color: var(--color-text);
          border-radius: 4px;

          transition:
            transform var(--duration-slow) var(--ease),
            opacity var(--duration-normal) var(--ease);
        }

        &[data-expanded="true"] {
          > .bar:nth-child(1) {
            transform: translateY(6px) rotate(45deg);
          }
          > .bar:nth-child(2) {
            opacity: 0;
          }
          > .bar:nth-child(3) {
            transform: translateY(-6px) rotate(-45deg);
          }
        }
      }

      > .nav-items-wrapper {
        position: absolute;
        top: 100%;
        left: 0;

        display: grid;
        grid-template-rows: 0fr;

        width: 100%;

        background: rgba(252, 252, 252, 0.975);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.075);

        transition: grid-template-rows var(--duration-slow) var(--ease);

        &[data-visible="true"] {
          grid-template-rows: 1fr;
        }

        > .nav-items {
          display: flex;
          flex-direction: column;

          overflow: hidden;

          > li {
            padding: var(--space-s) var(--space-s-m);
            border-top: 1px solid var(--color-divider);

            > a {
              position: relative;
              padding: var(--space-3xs) 0;

              font-size: var(--step--1);
              color: var(--color-text);
              text-decoration: none;

              transition: color var(--duration-normal) var(--ease);
            }

            > a::after {
              position: absolute;
              left: 0;
              bottom: 0;

              width: 100%;
              height: 1px;

              content: "";
              background: var(--color-accent);

              transform: scaleX(0);
              transform-origin: left bottom;
              transition: transform var(--duration-normal) var(--ease);
            }

            > a:hover,
            > a:focus-visible {
              color: var(--color-accent);
            }

            > a:hover::after,
            > a:focus-visible::after {
              transform: scaleX(1);
            }
          }
        }
      }
    }
  }
}

@media only screen and (min-width: 48rem) {
  .primary-header {
    > .content-wrapper {
      > .hamburger {
        display: none;
      }

      > .nav-items-wrapper {
        position: static;

        width: auto;

        display: block;

        box-shadow: none;
        background: none;
        grid-template-rows: none; /* override grid animation */

        transition: none;

        > .nav-items {
          display: flex;
          flex-direction: row;
          gap: var(--space-s-m);

          /* this is needed for the underline to show */
          overflow: visible;

          > li {
            border-top: none;
            padding: 0;
          }
        }
      }
    }
  }
}

.primary-header.sticking {
  padding: var(--space-xs) var(--space-s-m);
  border-bottom: 1px solid var(--color-divider);
}

/* ===== Footer ===== */

@media only screen and (min-width: 0rem) {
  .primary-footer {
    border-top: 1px solid var(--color-divider);
    padding: var(--space-l) var(--space-s-m);
    background-color: var(--color-surface);

    > .content-wrapper {
      > .grid {
        display: grid;
        gap: var(--space-m);

        > .section {
          > .heading {
            margin-bottom: var(--space-xs);

            color: var(--color-text);
            font-size: var(--step--1);
            font-weight: 600;
            text-transform: uppercase;
          }

          > .description {
            font-size: var(--step--1);
          }

          .item-list {
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: var(--space-2xs);

            font-size: var(--step--1);
            list-style: none;
          }
        }
      }

      > .footer-bottom {
        display: flex;
        margin-top: var(--space-m);
        padding-top: var(--space-s);

        border-top: 1px solid var(--color-divider);
        font-size: var(--step--2);

        > .copyright-notice {
          margin-right: auto;
        }
      }
    }
  }
}

@media only screen and (min-width: 48rem) {
  .primary-footer {
    > .content-wrapper {
      > .grid {
        display: grid;
        grid-template-columns: 1.5fr 1fr 1fr;
        column-gap: var(--space-xl);
        align-items: start;
      }
    }
  }
}