:root {
  --white: hsl(0deg 0% 90.68%);
  --gray: hsl(0, 0%, 7.5%);
  --medium-gray: hsl(0, 0%, 14%);
  --light-gray: hsl(0, 0%, 52%);
  --black: #101010;
  --light-ice-blue: hsl(190 40.15% 67%);
  --ice-blue: hsl(190, 35%, 45%);
  --transp-ice-blue: hsl(187, 28%, 49%, 60%);
  --yellow: hsl(52, 100%, 50%);
  --black-text-shadow: 3px 3px 1px var(--black), 1.15px -1.15px 1px var(--black), -1.15px 1.15px 1px var(--black), -1.15px -1.15px 1px var(--black);
  --gray-border: solid .5px #797979;
  --ice-blue-border: 1px solid var(--ice-blue);
  --transp-ice-blue-border: 1px solid var(--transp-ice-blue);
}

/* =============================
		GENERAL STYLES
============================== */

body {
  color: var(--white);
  background-color: var(--gray);
}

.body-wrapper {
  min-height: 100dvh;
  display: flex;
  flex-flow: column nowrap;
  margin-inline: auto;
}

.nav-wrapper,
main {
  display: flex;
  width: min(100%, 1100px);
  margin-inline: auto;
}

body,
form,
input,
button {
  font-family: 'Open Sans', sans-serif;
}

h1 {
  align-self: center;
  font-family: "Limelight", sans-serif;
  font-size: clamp(1.5rem, 0.5rem + 8.5vw, 3.3rem);
  text-align: center;
  text-transform: uppercase;
  text-shadow: var(--black-text-shadow);
  letter-spacing: 0.07em;
  word-spacing: .06em;
  opacity: 0.85;
  padding-top: 1.4vh;
}

p,
label,
a {
  font-weight: 320 !important;
  letter-spacing: 0.03em;
}

a:link,
a:visited {
  color: var(--light-ice-blue);
  text-decoration-line: none;
  text-transform: lowercase;
}

/* =============================
		NAVIGATION
============================== */

.nav-bar {
  background-color: var(--black);
  height: 2.5em;
  font-size: clamp(0.75rem, 0.48rem + 1.25vw, 0.95rem);
  border-bottom: var(--ice-blue-border);
  position: sticky;
  top: 0;
  z-index: 3;
  width: 100%;

  > .nav-wrapper {
    padding-inline: 4.3vw;
    gap: 0.8em;
    align-items: center;
    height: 100%;
    justify-content: end;

    > a,
    a:link {
      text-transform: lowercase;
      border-left: var(--transp-ice-blue-border);
      padding-left: 0.8em;
      padding-block: 0;

      &.current-page {
        pointer-events: none;
      }
    }

    > a:first-of-type {
      border-left-width: 0;
    }
  }

}

/* =============================
		HEADER
============================== */

header {
  background: url("../images/vista_lapl_coll.jpg") no-repeat top / cover;
  height: max(150px, 19vh);
  z-index: 0;

  > .header-text-wrapper {
    display: grid;
    /* NOTE: The 60% is causing the form to get messed up on smallest phone sizes */
    grid-template-rows: auto 68px;
    border-bottom: var(--ice-blue-border);
    height: 100%;
    backdrop-filter: contrast(.65) blur(1px) brightness(.34);
    padding-inline: 0.8em;
    padding-bottom: min(1.2vh, 1rem);
  }
}

#watchlist-page {
  header {
    height: max(100px, 13.5vh);

    > .header-text-wrapper {
      grid-template-rows: unset;
      padding-bottom: 0;
    }

    > h1 {
      letter-spacing: 0.09em;
    }
  }
}

form {
  display: flex;
  gap: 0.45em;
  flex-flow: column wrap;
  align-self: end;
  justify-self: center;
  width: 100%;
  padding-inline: 5vw;
}

#search-bar-wrapper {
  display: flex;
  background-color: var(--white);
  justify-content: space-between;
  opacity: .85;
  border: var(--ice-blue-border);
  border-radius: 8px;
  padding-inline: 0.5rem 0.2rem;
  padding-block: .0875em;

  &.fancy-focus {
    border: 2px solid var(--ice-blue);
    box-shadow: inset 0.04px 0.04px 7px var(--transp-ice-blue), inset -0.04px 0.04px 7px var(--transp-ice-blue), inset -0.04px -0.04px 7px var(--transp-ice-blue), inset 0.04px -0.04px 7px var(--transp-ice-blue);
  }

  input,
  button {
    color: var(--gray);
    background-color: unset;
    appearance: none;
    border: none;
    outline: none;
  }

  input#search-bar {
    width: 90%;
    background: none;

    &::placeholder {
      color: var(--ice-blue);
      font-weight: 500;
    }
  }

  #submit-btn:focus {
    transform: scale(1.075);
    margin-right: 0;
    color: var(--medium-gray);
    -webkit-text-stroke: 0.1px var(--white);
    text-shadow: 0.6px 0.6px 6px var(--transp-ice-blue), -0.6px 0.6px 6px var(--transp-ice-blue), -0.6px -0.6px 6px var(--transp-ice-blue), 0.6px -0.6px 6px var(--transp-ice-blue);
  }
}

#search-types {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  align-items: center;
  font-size: clamp(0.75rem, 0.53rem + 1vw, 0.9rem);
  justify-content: start;
  text-transform: lowercase;

  > .type-choice {
    display: flex;
    flex-wrap: nowrap;
  }

  & label {
    text-shadow: 1px 1px 2px black;
    text-wrap: nowrap;
  }
}

/* =============================
    MAIN
============================== */

.main {
  flex: 2 1 60vh;
  display: flex;
  flex-flow: column wrap;
  background-color: var(--black);
  padding-top: 1em;
}

.space-saver {
  color: var(--light-gray);
  width: 90vw;
  padding-bottom: 4.5vh;
  justify-content: center;

  & p {
    font-size: clamp(1rem, 0.35rem + 1.7vw, 1.2rem);
    text-wrap: balance;
    line-height: 1.55;
    width: min(420px, 80%);
    margin-top: 0.4em;
    text-align: center;
    margin-inline: auto;
  }
}

/* =============================
		ICONS & IMAGES
	============================== */

.fa-film {
  display: block;
  justify-self: center;
  font-size: 2.5em !important;
  margin-top: 1rem;
}

.fa-magnifying-glass {
  color: inherit;
  font-size: 1rem;
}

/* =============================
		MEDIA QUERIES
	============================== */

@media (width > 580px) {
  .nav-bar {
    height: 2.8em;
  }

  header {
    height: max(180px, 16vh);

    > .header-text-wrapper {
      grid-template-rows: auto 38px;
      padding-bottom: 1.5vh;

      > h1 {
        font-size: clamp(3.3rem, 8.4vw, 4.6rem);
      }
    }
  }

  body#watchlist header {
    flex-basis: 12.5rem;
  }

  form {
    flex: unset;
    flex-direction: row;
    padding-inline: 1vw;
    /* TODO: set width with a container query. */
    width: min(780px, 94%);

    > #search-bar-wrapper {
      flex: 10 1 150px;
      opacity: 0.75;
      padding-block: 0.135em;
    }

    #search-types {
      justify-content: end;
      flex-wrap: nowrap;
      flex: 1 1 220px;
    }
  }

  main {
    padding-inline: 3vw;
  }
}