/* =========================================================
   SASSY BELLE CANDLE CO., LLC
   CONTACT PAGE
========================================================= */


/* =========================================================
   HERO
========================================================= */

.contact-hero {

  min-height: 470px;

  padding: 90px 25px;

  display: flex;

  align-items: center;
  justify-content: center;

  text-align: center;

  background:

    radial-gradient(
      circle at 18% 30%,
      rgba(200,189,208,.55),
      transparent 30%
    ),

    radial-gradient(
      circle at 82% 70%,
      rgba(168,181,160,.55),
      transparent 30%
    ),

    var(--cream);
}


.contact-hero-content {

  max-width: 800px;
}


.contact-hero h1 {

  margin: 10px 0 20px;

  color: var(--brown);

  font-family: var(--serif);

  font-size:
    clamp(60px, 8vw, 100px);

  font-weight: 500;

  line-height: .9;
}


.contact-hero h1 em {

  display: block;

  color: var(--sage-dark);

  font-family: var(--script);

  font-size:
    clamp(72px, 8vw, 110px);

  font-weight: 400;
}


.contact-hero-content > p:last-child {

  max-width: 650px;

  margin: 20px auto;

  color: var(--brown-light);

  font-family: var(--serif);

  font-size: 20px;

  line-height: 1.5;
}


/* =========================================================
   CONTACT INFORMATION
========================================================= */

.contact-information {

  padding:
    100px 6vw;

  background: var(--ivory);
}


.contact-heading {

  max-width: 700px;

  margin:
    0 auto 55px;

  text-align: center;
}


.contact-heading h2 {

  margin:
    8px 0;

  color: var(--brown);

  font-family: var(--serif);

  font-size:
    clamp(50px, 6vw, 72px);

  font-weight: 500;

  line-height: .9;
}


.contact-heading h2 em {

  color: var(--sage-dark);

  font-family: var(--script);

  font-weight: 400;
}


/* =========================================================
   CONTACT CARDS
========================================================= */

.contact-cards {

  max-width: 1150px;

  margin: auto;

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 22px;
}


.contact-card {

  padding:
    45px 30px;

  text-align: center;

  background: var(--cream);

  border:
    1px solid
    rgba(118,91,74,.10);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}


.contact-card:hover {

  transform: translateY(-5px);

  box-shadow:
    0 15px 35px
    rgba(80,60,45,.08);
}


.contact-icon {

  width: 62px;

  height: 62px;

  margin:
    0 auto 20px;

  display: flex;

  align-items: center;
  justify-content: center;

  border:
    1px solid var(--sage);

  border-radius: 50%;

  color: var(--sage-dark);

  font-family: var(--serif);

  font-size: 24px;
}


.contact-label {

  margin-bottom: 7px;

  color: var(--mauve);

  font-family: var(--montserrat);

  font-size: 10px;

  font-weight: 600;

  letter-spacing: .18em;
}


.contact-card h3 {

  margin-bottom: 12px;

  color: var(--brown);

  font-family: var(--serif);

  font-size: 29px;

  font-weight: 500;
}


.contact-card > p:not(.contact-label) {

  margin-bottom: 18px;

  color: var(--brown-light);

  font-family: var(--serif);

  font-size: 16px;

  line-height: 1.5;
}


.contact-link {

  color: var(--brown);

  font-family: var(--serif);

  font-size: 16px;

  font-weight: 600;

  text-decoration:
    underline;

  text-decoration-color:
    var(--sage);

  text-underline-offset: 4px;
}


/* =========================================================
   CONTACT FORM
========================================================= */

.contact-form-section {

  padding:
    110px 25px;

  background: var(--cream);
}


.contact-form-intro {

  max-width: 720px;

  margin:
    0 auto 45px;

  text-align: center;
}


.contact-form-intro h2 {

  margin:
    8px 0 15px;

  color: var(--brown);

  font-family: var(--serif);

  font-size:
    clamp(50px, 6vw, 72px);

  font-weight: 500;

  line-height: .9;
}


.contact-form-intro h2 em {

  color: var(--sage-dark);

  font-family: var(--script);

  font-weight: 400;
}


.contact-form-intro > p:last-child {

  max-width: 620px;

  margin: auto;

  color: var(--brown-light);

  font-family: var(--serif);

  font-size: 18px;

  line-height: 1.5;
}


.contact-form {

  max-width: 800px;

  margin: auto;

  padding:
    50px;

  background: var(--ivory);

  border:
    1px solid
    rgba(118,91,74,.10);

  box-shadow:
    0 15px 40px
    rgba(80,60,45,.06);
}


.form-row {

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 20px;
}


.form-field {

  margin-bottom: 22px;
}


.form-field label {

  display: block;

  margin-bottom: 7px;

  color: var(--brown);

  font-family: var(--montserrat);

  font-size: 11px;

  font-weight: 600;

  letter-spacing: .08em;

  text-transform: uppercase;
}


.form-field input,
.form-field select,
.form-field textarea {

  width: 100%;

  padding:
    13px 15px;

  border:
    1px solid
    rgba(118,91,74,.25);

  border-radius: 0;

  outline: none;

  background: var(--white);

  color: var(--brown);

  font-family: var(--serif);

  font-size: 17px;

  transition:
    border-color .25s ease,
    box-shadow .25s ease;
}


.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {

  border-color:
    var(--sage-dark);

  box-shadow:
    0 0 0 3px
    rgba(168,181,160,.18);
}


.form-field textarea {

  min-height: 170px;

  resize: vertical;
}


.form-submit {

  width: 100%;

  padding:
    15px 25px;

  border:
    1px solid var(--brown);

  background: var(--brown);

  color: var(--ivory);

  font-family: var(--serif);

  font-size: 18px;

  cursor: pointer;

  transition: .25s ease;
}


.form-submit:hover {

  background:
    var(--sage-dark);

  border-color:
    var(--sage-dark);
}


/* =========================================================
   SOCIAL
========================================================= */

.social-section {

  padding:
    100px 25px;

  text-align: center;

  background: var(--lavender-light);
}


.social-section > div {

  max-width: 720px;

  margin: auto;
}


.social-section h2 {

  margin:
    8px 0 15px;

  color: var(--brown);

  font-family: var(--serif);

  font-size:
    clamp(50px, 6vw, 72px);

  font-weight: 500;

  line-height: .9;
}


.social-section h2 em {

  color: var(--sage-dark);

  font-family: var(--script);

  font-weight: 400;
}


.social-section p:not(.section-kicker) {

  margin-bottom: 28px;

  color: var(--brown-light);

  font-family: var(--serif);

  font-size: 19px;
}


.social-button {

  display: inline-block;

  padding:
    13px 28px;

  border:
    1px solid var(--brown);

  color: var(--brown);

  font-family: var(--serif);

  font-size: 16px;

  transition: .25s ease;
}


.social-button:hover {

  background: var(--brown);

  color: var(--ivory);
}


/* =========================================================
   CLOSING
========================================================= */

.contact-closing {

  padding:
    110px 25px;

  text-align: center;

  background: var(--brown);
}


.contact-closing > div {

  max-width: 800px;

  margin: auto;
}


.contact-closing .section-kicker {

  color: var(--lavender-light);
}


.contact-closing h2 {

  margin:
    10px 0 30px;

  color: var(--ivory);

  font-family: var(--serif);

  font-size:
    clamp(48px, 6vw, 76px);

  font-weight: 500;

  line-height: .9;
}


.contact-closing h2 em {

  display: block;

  color: var(--sage-light);

  font-family: var(--script);

  font-weight: 400;
}


.contact-closing .outline-button {

  display: inline-block;

  padding:
    13px 28px;

  border:
    1px solid var(--ivory);

  color: var(--ivory);

  font-family: var(--serif);

  font-size: 16px;

  transition: .25s ease;
}


.contact-closing .outline-button:hover {

  background: var(--ivory);

  color: var(--brown);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .contact-cards {

    grid-template-columns:
      1fr;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .contact-hero {

    min-height: 390px;

    padding:
      65px 20px;
  }


  .contact-hero h1 {

    font-size: 58px;
  }


  .contact-hero h1 em {

    font-size: 72px;
  }


  .contact-information {

    padding:
      75px 20px;
  }


  .contact-form-section {

    padding:
      75px 15px;
  }


  .contact-form {

    padding:
      30px 20px;
  }


  .form-row {

    grid-template-columns:
      1fr;

    gap: 0;
  }


  .social-section {

    padding:
      75px 20px;
  }


  .contact-closing {

    padding:
      80px 20px;
  }

}