@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,300..600;1,300..600&display=swap");

:root {
  --clr-pink-400: hsl(0, 36%, 70%);
  --clr-red-500: hsl(0, 93%, 68%);
  --clr-grey-900: hsl(0, 6%, 24%);

  --gradient-1: 135deg, hsl(0, 0%, 100%), hsl(0, 100%, 98%);
  --gradient-2: 135deg, hsl(0, 80%, 86%), hsl(0, 74%, 74%);
}

/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/
/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
  box-sizing: border-box;
  font-family: "Josefin Sans", sans-serif;
}

/* 2. Remove default margin */
*:not(dialog) {
  margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input,
button,
textarea,
select {
  font: inherit;
}

/* 8. Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

.layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;

  grid-template-areas:
    "header"
    "hero"
    "content";
}

.header {
  grid-area: header;
  padding-inline: 2.125rem;
  padding-block: 2.125rem;

  .logo {
    height: 1.275rem;
  }
}

.hero {
  grid-area: hero;

  .hero-img {
    object-fit: cover;
    width: 100%;
  }
}

.content {
  grid-area: content;

  padding: 3.5rem 2rem;

  .heading {
    font-size: 2.25rem;
    line-height: 1.1;
    letter-spacing: 0.625rem;
    text-transform: uppercase;
    text-align: center;
    color: var(--clr-grey-900);
    /* padding-inline: 2rem; */

    .highlight {
      font-weight: 300;
      color: var(--clr-pink-400);
    }
  }

  .description {
    font-size: 0.825rem;
    color: var(--clr-pink-400);
    text-align: center;
    padding-block: 1rem;
  }

  .input-container {
    --input-padding: 0.75rem;
    --button-width: 1.5rem;

    position: relative;
    margin-top: 1rem;

    .email-input {
      outline: none;
      border: 1px solid;
      border-color: hsl(from var(--clr-pink-400) h s l / 50%);
      border-radius: 100vw;

      padding-block: var(--input-padding);
      padding-inline: 1.5rem;
      padding-right: calc(25% + 2rem);
      width: 100%;
      font-size: 14px;
      color: var(--clr-grey-900);

      + .error-icon {
        position: absolute;
        top: 50%;
        right: 25%;
        transform: translateY(-50%);
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
      }

      ~ .invalid-text {
        position: absolute;
        top: 100%;
        left: 1.5rem;
        padding-block: 0.5rem;
        color: var(--clr-red-500);
        /* font-weight: bold; */
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
      }

      &.invalid {
        outline: 2px solid var(--clr-red-500);
        outline-offset: -2px;
      }

      &.invalid ~ * {
        opacity: 1;
      }

      &::placeholder {
        color: var(--clr-pink-400);
        opacity: 60%;
      }
    }

    .button {
      position: absolute;
      right: 0;
      inset-block: 0;

      border: none;
      outline: none;
      border-radius: 100vw;
      background: linear-gradient(var(--gradient-2));

      --shadow-color: hsl(from var(--clr-red-500) h s 30% / 15%);
      --shadow-hover: hsl(from var(--clr-red-500) h s 30% / 25%);

      padding-inline: var(--button-width);
      box-shadow: 0px 14px 14px 0px var(--shadow-color);
      -webkit-box-shadow: 0px 14px 14px 0px var(--shadow-color);
      -moz-box-shadow: 0px 14px 14px 0px var(--shadow-color);
      transition: all 0.3s ease;

      &:hover,
      &:focus {
        filter: brightness(125%);
        box-shadow: 0px 14px 14px 0px var(--shadow-hover);
        -webkit-box-shadow: 0px 14px 14px 0px var(--shadow-hover);
        -moz-box-shadow: 0px 14px 14px 0px var(--shadow-hover);
      }
    }
  }
}

.footer {
  position: fixed;
  bottom: 0;
  inset-inline: 0;
  padding: 1rem;
}
.attribution {
  font-size: 11px;
  text-align: center;

  a {
    color: hsl(228, 45%, 44%);
  }
}

@media (min-width: 720px) {
  .layout {
    grid-template-columns: 1fr minmax(1fr, auto);
    grid-template-rows: auto 1fr;
    height: 100vh;

    background-image:
      url("./images/bg-pattern-desktop.svg"),
      url("./images/bg-pattern-desktop.svg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    grid-template-areas:
      "header  hero"
      "content hero";

    padding-left: 9rem;

    .header {
      padding-block: 4.5rem;

      .logo {
        height: auto;
      }
    }

    .heading {
      text-align: start;
      font-size: 4rem;
      letter-spacing: 1rem;
    }

    .content {
      padding-right: 11rem;
      max-width: 800px;
    }

    .description {
      text-align: left;
      font-size: 1rem;
      padding-block: 2rem;
    }

    .input-container {
      --input-padding: 1rem;
      --button-width: 2.5rem;

      .email-input {
        background: transparent;
        font-size: 1rem;
      }
    }

    .hero-img {
      height: 100%;
    }
  }
}