/* ********************************* */
/* HERO SECTION                      */
/* ********************************* */

.hero-img--contact {
  background-image: linear-gradient(
      to right,
      transparent,
      var(--colour--black--transparency-highest),
      var(--colour--black--transparency-medium)
    ),
    url(/pages/contact/images/contact_hero.webp);

  background-size: cover;
}

.hero-container--contact {
  /* In relation to the parent size */
  right: 10rem;
  top: 29rem;
}

.hero-container-inner--contact {
  display: flex;
  flex-direction: column;

  width: 100%;
}

.heading-primary--contact {
  align-self: flex-end;
}

/* ********************************* */
/* CONTACT BOX                       */
/* ********************************* */

.section-contact {
  margin-bottom: 12.8rem;
}

/* Outer Box */
.contact-box {
  display: flex;
  flex-direction: column;
  align-items: center;

  background-color: var(--colour--primary);
  border-radius: var(--border-radius--box);
  box-shadow: 0 20px 30px 0 var(--shadow--darkest);
  padding: 5.6rem;
  transition: all 0.4s;
}

.contact-box:hover {
  transform: scale(1.05);
}

.heading-secondary--contact {
  color: var(--colour--primary-tint-white);
  font-size: 5.2rem;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing--large);

  margin-bottom: 6.4rem;
}

.grid--contact {
  column-gap: 6.4rem;
  row-gap: 4.8rem;
}

/* Contact Header: Icon and Heading */

.contact-header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contact-icon {
  width: 4.8rem;
  height: 4.8rem;

  padding: 1.2rem;
  background-color: var(--colour--primary-tint-white);
  border-radius: var(--border-radius--round);

  margin-bottom: 3.2rem;
}

.contact-heading {
  color: var(--colour--primary-tint-white);
  font-size: 3.6rem;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing--small);
}

/* Contact Body: Fields with Text (including links) or Address */

.contact-body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contact-field {
  margin-bottom: 3.2rem;
}

.contact-text {
  display: flex;
  justify-content: center;

  color: var(--colour--primary-tint-lightest);
  text-decoration: none;
  font-size: 2.4rem;
  line-height: var(--line-height--small);
}

span.contact-text {
  color: var(--colour--primary-tint-white);
  font-weight: var(--font-weight--medium-bold);
  margin-bottom: 1.2rem;
}

.contact-text p {
  font-style: normal;
}

.contact-link,
.contact-link:link,
.contact-link:visited {
  text-decoration: none;
  color: var(--colour--primary-tint-lightest);

  transition: all 0.3s;
}

.contact-link:hover,
.contact-link:active {
  color: var(--colour--primary-tint-light);
}

.contact-link:focus {
  outline: none;
  box-shadow: 0 0 0 0.4rem var(--shadow--white);
}

.contact-address {
  text-align: center;
  line-height: var(--line-height--small-medium);

  margin-bottom: 2.4rem;
}

/* Grid Locations for the Contact Headers and Body */

.contact-header--email {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.contact-header--location {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}

.contact-body--phone {
  grid-column: 1 / 2;
}

.contact-body--email {
  grid-column: 2 / 3;
}

.contact-body--location {
  grid-column: 3 / 4;
}

/* ********************************* */
/* FORM BOX                          */
/* ********************************* */

.section-form .container--global {
  padding-top: 0;
  border-top: none;
}

.section-form {
  margin-bottom: 12.8rem;
}

/* Outer Box */
.form-box {
  display: flex;
  flex-direction: column;
  align-items: left;

  background-color: var(--colour--white);
  border-radius: var(--border-radius--box);
  border: 1px solid var(--colour--grey-lightest);
  box-shadow: 0 20px 30px 0 var(--shadow--darkest);
  padding: 5.6rem;
}

.heading-secondary--form {
  align-self: center;

  color: var(--colour--primary-shade-darkest);
  text-transform: uppercase;
  font-size: 5.2rem;
  letter-spacing: var(--letter-spacing--large);

  margin-bottom: 6.4rem;
}

.form-box *:focus {
  outline: none;
  box-shadow: 0 0 0 0.4rem var(--colour--primary--transparency-low);
}

.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 3.2rem;
  row-gap: 2.4rem;
}

/* The label is above the input */
.form label {
  display: block;
  font-size: 2rem;
  margin-bottom: 1.2rem;
}

.form input,
.form textarea,
.form select {
  width: 100%;
  padding: 1.2rem;
  font-size: 1.8rem;
  font-family: inherit;
  color: inherit;

  border: 1px solid var(--colour--primary-tint-lightest);
  border-radius: var(--border-radius--button);
  box-shadow: 0 1px 2px var(--shadow--light);
}

/* The placeholder is an example of what should be in the input */
.form input::placeholder,
.form textarea::placeholder {
  color: var(--colour--grey-light);
}

/* Comment box should be bigger than other inputs: 2 columns wide */
.commentBox {
  grid-column: 1 / 3;
}

/* Height of the comment input */
#comment {
  height: 12.8rem;
}

.button--form,
.button--form:link,
.button--form:visited {
  background-color: var(--colour--primary);
  color: var(--colour--primary-tint-white);
  text-transform: uppercase;

  align-self: end;

  padding: 1.2rem 3.2rem;
}

.button--form:hover,
.button--form:visited {
  background-color: var(--colour--primary-shade-light);
}

.button--form:focus {
  outline: none;
  box-shadow: 0 0 0 0.4rem var(--colour--primary--transparency-high);
}

/* ********************************* */
/* THANK YOU PAGE                    */
/* ********************************* */

/* Border has been removed from the section container using .container-noBorder--global.  
   However here, add a border to the section itself, so that it covers the whole 
   width for this page. */
.section-thanks {
  border-top: 1.5px solid var(--colour--grey-lightest);

  padding-top: 6.4rem;
  margin-bottom: 6.4rem;
}

.thanks-message {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.heading-secondary--thanks {
  font-size: 6.2rem;
  text-transform: uppercase;
}

.thanks-text {
  font-size: 2.4rem;
  line-height: var(--line-height--paragraph-default);
}

.button-home,
.button-home:link,
.button-home:visited {
  text-transform: uppercase;
  background-color: var(--colour--primary);
  color: var(--colour--primary-tint-white);
  letter-spacing: var(--letter-spacing--small);

  margin-top: 4.8rem;
}

.button-home:hover,
.button-home:active {
  background-color: var(--colour--primary-shade-lightest);
}