@import './variables.css';

/* ── Global ──────────────────────────────────────────── */

html,
body {
  margin: 0;
  padding: 0;
  font-family: Gill Sans, Gill Sans MT, Calibri, sans-serif;
  font-size: 18px;
  font-weight: normal;
  background-color: var(--pink);

  @media (min-width: 640px) {
    font-weight: lighter;
  }
}

/* ── Layout ──────────────────────────────────────────── */

.wrapper {
  margin: 0;

  @media (min-width: 480px) {
    margin: 45px auto 0;
    width: 340px;
  }
}

/* ── Business card ───────────────────────────────────── */

.business-card {
  padding: 15px 15px 22.5px;
  color: var(--black);
  border-radius: 2px;

  & h1,
  & h2,
  & h3 {
    margin: 0;
    font-weight: normal;
    font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
  }

  & h1 {
    font-size: 30px;
    line-height: 45px;
  }

  & h2 {
    font-size: 26px;
    line-height: 45px;
  }

  & h3 {
    font-size: 22px;
    line-height: 44px;

    @media (min-width: 640px) {
      font-size: 19px;
      line-height: 40px;
    }
  }


}

/* ── Contact links ───────────────────────────────────── */

.contact-links {
  padding: 22.5px 0;

  & ul {
    margin: 0;
    padding: 0;
    list-style: none;

    & li {
      display: inline-block;
    }
  }

  & [class^="icon-"]:before,
  & [class*=" icon-"]:before {
    margin-right: 15px;
  }

  @media (min-width: 480px) {
    padding: 7.5px 0;

    & li {
      display: block;
    }
  }

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

    &:hover,
    &:active,
    &:focus {
      color: var(--vibrant-pink);
    }
  }

  & .icon {
    font-size: 30px;
    line-height: 30px;
  }
}

/* ── Showcase ────────────────────────────────────────── */

.showcase {
  & ul {
    margin: 0;
    padding: 0;
    list-style: none;

    & li {
      margin: 15px 0;
      padding: 0;
    }
  }

  & .showcase-item {
    border-radius: 2px;
    padding: 15px;

    & h3 {
      margin: 0;
      font-weight: normal;
      font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
      font-size: 19px;
      line-height: 40px;
      position: relative;
    }

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

      &:hover,
      &:active,
      &:focus {
        color: var(--purple);

        & .title {
          text-decoration-line: underline;
          text-decoration-style: wavy;
          text-decoration-color: var(--pink);
        }

      }
    }

    & .emoji {
      font-size: 40px;
      vertical-align: top;
      position: relative;
      top: 5px;
      right: 5px;
    }

    & .title {
      font-size: 26px;
      line-height: 40px;
      vertical-align: middle;

      @media (min-width: 480px) {
        font-size: 20px;
        line-height: 22px;
        vertical-align: middle;
        position: absolute;
      }
    }

    & p {
      margin: 10px 0 20px;

      & a {
        color: var(--vibrant-pink)
      }
    }

    & img {
      width: 100%;
    }
  }
}


.showcase-item--mauve {
  background-color: var(--mauve);
}

.showcase-item--cyan {
  background-color: var(--cyan);
}

.showcase-item--green {
  background-color: var(--mint-green);
}

.showcase-item--yellow {
  background-color: var(--yellow);
}

.showcase-item--orange {
  background-color: var(--orange);
}


/* ── Accessibility ───────────────────────────────────── */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}