@import url("./reset.css");
@import url("./fonts.css");
@import url("./variables.css");
@import url("./nav.css");
@import url("./form.css");

body{
  font-family: "DM Sans", sans-serif;
  background-image: url(/img/watercolor.png);
  background-size: 100% 250px;
  background-repeat: no-repeat;
  background-color: var(--bg-main);
  color: var(--text-main);
}

.container{
  padding: 0 1rem;
}

.visually-hidden { 
  border: 0;
  padding: 0;
  margin: 0;
  position: absolute !important;
  height: 1px; 
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
  clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
  clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
  white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

h2{
  font-size: var(--typo-xl);
  margin-bottom: 1rem;
}

.tagline{
  font-size: var(--typo-md);
}

/* Intro */
.intro{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4rem;
  padding-bottom: 4rem;
  max-width: var(--max-width);
  margin: 0 auto;
}

h1{
  margin-bottom: 2rem;
}

.intro-logo{
  padding: 0 2rem 0 1rem;
}

.intro__paragraph{
  margin-top: 1rem;
  font-size: var(--typo-md);
}

.socials{
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
  gap: .5rem;
  width: 100%;
}

.social__link{
  display: flex;
  align-items: center;
  font-size: var(--typo-md);
  gap: .5rem;
  text-decoration: none;
  color: var(--text-main)
}

.social__link svg{
  fill: var(--text-main);
  width: 2rem;
  height: 2rem;
}

.social__link:hover svg{
  fill: var(--orange-main);
}

/* Events list */
.events{
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 1rem;
  list-style: none;
}

.event{
  width: 100%;
}

/* Cards */
.card{
  display: block;
  text-decoration: none;
  background-color: var(--card-bg-1);
  color: var(--text-contrasting);
  border: 1px solid var(--yellow-main);
  border-radius: 2px;
  width: 100%;
  overflow: hidden;
}

.card--2007{
  background-color: var(--card-bg-2);
}

.card--0308{
  background-color: var(--card-bg-1);
}

.card__content{
  padding: 1rem;
}

.card__date{
  padding: 1rem;
  border-bottom: 1px solid var(--yellow-main);

  font-size: var(--typo-lg);
  font-weight: 600;
}

.card__info{
  display: flex;
  justify-content: space-between;
  margin-bottom: .75rem;
}

.card__time{
  color: var(--yellow-light);
  font-size: var(--typo-xs);
  font-weight: 500;
}

.card__tags{
  list-style: none;
  padding: 0;
  display: flex;
  gap: .5rem;
}

.card__tag{
  background-color: var(--yellow-light);
  color: var(--orange-darkest);
  padding: .2rem .5rem .1rem .5rem;
  text-transform: capitalize;
  border-radius: 2px;
  font-family: "DM Sans";
  font-size: 14px;
}

.card__title{
  font-family: "Kind Avenue", serif;
  font-size: var(--typo-lg);
  line-height: 100%;
  letter-spacing: 1px;
}

.card__artist{
  font-size: var(--typo-md);
}

/* Show page */
.show-page{
  padding-top: 1rem;
  padding-bottom: 4rem;
  font-size: var(--typo-md);
}

.show__title{
  font-family: "Kind Avenue", serif;
  line-height: 100%;
  letter-spacing: 1px;
  margin-bottom: .5rem;
}

.show__artist{
  font-weight: 600;
  font-size: var(--typo-xl);
  margin-bottom: .5rem;
}

.show__time, .show__tags{
  margin-bottom: 1rem;
}

.show__links{
  display: flex;
  gap: 1rem;
  margin-bottom: 4rem;
}

.show__link-container > a{
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  background-size: contain;
}

.show__link-container--web > a{
  background-image: url(/img/icons/web.svg);
}
.show__link-container--fb > a{
  background-image: url(/img/icons/facebook.svg);
}
.show__link-container--insta > a{
  background-image: url(/img/icons/instagram.svg);
}

.show__time{
  font-weight: 600;
  font-size: var(--typo-lg);
  color: var(--green-main);
}

.show__description{
  font-size: var(--typo-md);
}

.show__description--artist{
  font-size: var(--typo-sm);
  padding-top: 1rem;
  border-top: 1px solid var(--yellow-light);
}

.show__description > p{
  margin-bottom: 1rem;
}

.show__img-container{
  margin-bottom: 2rem;
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid var(--yellow-main)
}

/* Infos */

.infos{
  padding-top: 5rem;
  max-width: var(--max-width);
  margin: 0 auto;
}

.infos-list{
  margin-top: 2rem;
  font-size: var(--typo-md);
}

.infos__element{
  margin-top: -1px;
  border-top: 1px solid var(--yellow-light);
  border-bottom: 1px solid var(--yellow-light);
}

.infos__details{
  margin: 2rem 0;
}

.infos__question{
  font-weight: 600;
}

.infos__answer{
  margin-top: 1rem;
}

/* Partners */
.partners{
  padding-top: 5rem;
  font-size: var(--typo-md);
  padding-bottom: 5rem;
}

.partners-list{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4rem;
  margin: 2rem 0;
}

.partner{
  max-width: 200px;
}

/* Footer */
footer.container{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 2rem;
  padding-bottom: 4rem;
  background-color: var(--orange-darkest);
  color: var(--text-contrasting);
}

footer .socials{
  width: auto;
}

footer .social__link{
  color: var(--text-contrasting);
}

footer .social__link svg{
  fill: var(--text-contrasting);
}

@media screen and (min-width: 740px) {
  .container{
    padding: 5rem;
  }

  /* Intro */
  .intro{
    flex-direction: row;
    align-items: start;
    font-size: var(--typo-lg);
    gap: 5rem;
    max-width: none;
  }

  .intro-logo{
    padding: 0;
  }

  .intro-text{
    max-width: var(--max-width);
  }

  .intro__paragraph--small{
    font-size: var(--typo-md);
  }
  
  .socials{
    flex-direction: row;
    margin-top: 1rem;
    gap: 2rem;
  }

  /* Events */

  .events{
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(400px, 1fr) );
    gap: 1rem;
  }

  .card__img-container{
    overflow: hidden;
  }

  .card__img, .card__img-container{
    transition: all 300ms;
  }

  .card:hover .card__img-container{
    transform: scale(.95);
    border-radius: 250px;
  }

  .card:hover .card__img{
    transform: scale(1.2);
  }

  /* Show page */

  .show-page{
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(400px, 1fr) );
    align-items: start;
    gap: 2rem;
  }

  .show__content{
    max-width: 540px;
  }

  .show__description{
    font-size: var(--typo-lg);
  }

  .show__description--artist{
    font-size: var(--typo-sm);
  }

  /* Partners */
  .partners > h2,
  .partners > p{
    max-width: var(--max-width);
    padding: 0 5rem;
    margin: 0 auto;
  }

  /* Infos */
  .infos__details{
    cursor: pointer
  }

  footer{
    align-items: center;
  }
}