/* #### CONTACT ################################################################################ */

.contact-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

main section .contact {
  display: flex;
  justify-content: center;
  box-shadow: var(--low-shadow);
  border-radius: var(--border-radius-default);
  background-color: var(--content-background);
  font-size: var(--block-20);
}

.contact-panel {
  display: flex;
  flex: 1;
  flex-grow: 1;
  flex-direction: column;
  border-right: var(--block-1) solid var(--shade-2);
  padding-right: calc(var(--border-radius-default) * 4);
  padding-left: calc(var(--border-radius-default) * 3);
}

.contact-text {
  flex-grow: 1;
  text-align: justify;
}

.contact-text p {
  margin-bottom: var(--block-16);
  line-height: var(--line-height-large);
  text-indent: var(--font-size);
}

.contact-sl {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
  gap: var(--block-4);
  border-top: var(--block-2) dotted var(--shade-2);
  padding-top: var(--block-16);
  color: var(--shade-5);
  font-weight: 200;
  font-size: var(--block-24);
  font-family: var(--font-2);
}

.content-sl:first-child {
  flex-shrink: 1;
}

.contact-sl-svg {
  transition: color 0.3s ease;
  height: var(--block-28);
  color: var(--shade-4);
}
.contact-sl-svg:hover {
  color: var(--shade-5);
}

.contact-form label:not(:first-child) {
  margin-top: var(--block-16);
}
.contact-form label {
  display: block;
  padding-bottom: var(--block-4);
  color: var(--shade-6);
  font-weight: 200;
  font-size: var(--block-20);
  font-family: var(--font-2);
}

.contact-form {
  flex: 1;
  margin-right: calc(var(--border-radius-default) * 3);
  margin-left: calc(var(--border-radius-default) * 4);
}
.contact-form form {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.contact-form button,
.contact-message-sent button {
  cursor: pointer;
  margin-top: var(--block-32);
  box-shadow: var(--low-shadow);
  border: 0;
  border: var(--block-1) solid transparent;
  border-radius: var(--border-radius-default);
  background-image: linear-gradient(to bottom, var(--shade-6), var(--shade-7));
  padding: var(--block-8);
  color: #f0ead6;
  font-weight: 200;
  font-size: var(--block-32);
  font-family: var(--font-2);
}

.contact-form button:active {
  transform: scale(0.98);
}
.contact-form button:hover,
.contact-message-sent button:hover {
  background-image: linear-gradient(to bottom, var(--shade-5), var(--shade-6));
}

.contact-form button:disabled {
  border: var(--block-1) solid var(--shade-3);
  background-image: linear-gradient(to bottom, var(--shade-2), var(--shade-1));
  color: var(--shade-3);
}
.contact-form button:disabled:hover {
  cursor: default;
}

.contact-form input[type='text'],
.contact-form input[type='email'],
.contact-form textarea {
  transition:
    color 3s ease,
    background-color 3s ease;
  border: var(--block-1) solid var(--shade-3);
  border-radius: var(--border-radius-default);
  background-color: var(--shade-1);
  padding: var(--block-8);
  width: 100%;
  color: var(--shade-6);
  font-size: var(--block-20);
  font-family: var(--font-1);
}
.contact-form input[type='text']::placeholder,
.contact-form input[type='email']::placeholder,
.contact-form textarea::placeholder {
  opacity: 1;
  color: var(--shade-3);
}
.contact-form input[type='text']:focus,
.contact-form input[type='email']:focus,
.contact-form textarea:focus {
  outline: var(--block-1) solid var(--shade-4);
}
.contact-form textarea {
  flex-grow: 1;
}

.contact-form input[type='text'].invalid,
.contact-form input[type='email'].invalid,
.contact-form textarea.invalid {
  transition:
    color 0s ease,
    background-color 0s ease;
  background-color: var(--invalid-background-color);
  color: var(--invalid-text-color);
}

.contact-form span.invalid {
  opacity: 0;
  margin-left: var(--block-8);
  color: var(--invalid-text-color);
  font-weight: 400;
}

.contact-form span.show {
  opacity: 1;
}

#contact-form > input[type='text'][placeholder='Your address'],
#contact-form > label[for='a'] {
  position: absolute;
  left: -9999px;
}

/* #### SENT ################################# */

main section .contact-sent {
  display: block;
  width: fit-content;
}

.contact-message-sent {
  text-align: center;
}

.contact-message-sent h1 {
  rotate: -2deg;
  margin-bottom: var(--block-16);
  color: var(--shade-3);
  font-weight: 200;
  font-size: var(--block-64);
  font-family: var(--font-3);
}
.contact-message-sent h1:first-of-type {
  margin-bottom: 0;
}
.contact-message-sent p {
  margin: 0 calc(var(--border-radius-default) * 2) var(--block-12)
    calc(var(--border-radius-default) * 2);
  text-align: center;
}
.contact-message-sent p:last-of-type {
  margin-bottom: var(--block-32);
}

.contact-message-sent button {
  margin-top: 0;
  margin-bottom: 0;
  font-size: var(--block-20);
}

/* ################################################################################################ */
/* ################################################################################################ */
/* ################################################################################################ */

@media screen and (max-width: 608px) {
  .contact-sl {
    flex-wrap: wrap;
    gap: var(--block-8);
    font-size: var(--block-24);
  }

  .contact-sl p {
    flex-basis: 100%;
    text-align: center;
  }
}

/* ################################################################################################ */
/* ################################################################################################ */
/* ################################################################################################ */

@media screen and (max-width: 1200px) {
  .contact {
    flex-direction: column;
  }

  .contact-panel {
    border: 0;
    padding-right: calc(var(--border-radius-default) * 2);
    padding-left: calc(var(--border-radius-default) * 2);
  }

  .contact-sl {
    justify-content: space-evenly;
    margin-bottom: var(--block-16);
    border-bottom: var(--block-2) dotted var(--shade-2);
    padding-bottom: var(--block-16);
  }

  .contact-form {
    margin: 0;
  }

  .contact-form textarea {
    height: 300px;
  }
}