/* =========================================================
   CONTACT PAGE
   ========================================================= */


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

.contact-main {
  width: 100%;

  padding:
    0
    var(--page-padding);
}


/* =========================================================
   COMPOSITION
   ========================================================= */

.contact-layout {
  position: fixed;

  left: 50%;
  top: var(--contact-center-y, 60vh);

  /*
    Mathematical center first,
    then lift the entire composition optically upward.
  */

  transform:
    translate(
      -50%,
      calc(-50% - 3.5rem)
    );

  width:
    min(
      calc(100% - 120px),
      1180px
    );

  display: grid;

  grid-template-columns:
    220px
    minmax(500px, 560px);

  grid-template-rows:
    auto
    auto;

  justify-content: space-between;

  align-items: center;

  row-gap: clamp(20px, 2vh, 30px);
}


/* =========================================================
   LEFT — CONTACT DETAILS
   ========================================================= */

.contact-details {
  position: relative;

  grid-column: 1;
  grid-row: 1;

  /*
    Small optical correction between the details
    and the form itself.
  */

  top: -18px;

  width: fit-content;

  align-self: center;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  gap: 7px;

  color: var(--accent);

  font-size:
    clamp(
      0.50rem,
      0.46vw,
      0.58rem
    );

  font-weight: 400;

  line-height: 1.45;

  text-align: left;
}


.contact-details a,
.contact-details p {
  margin: 0;

  color: inherit;

  font: inherit;
}


.contact-details a {
  text-decoration: none;
}


.contact-details a:hover,
.contact-details a:focus-visible {
  color: var(--text);
}


/* ---------------------------------------------------------
   BUSINESS INFORMATION
   --------------------------------------------------------- */

.contact-details__business {
  margin-top: 15px;

  display: flex;
  flex-direction: column;

  gap: 3px;
}


.contact-details__business p {
  margin: 0;
}


.contact-details__cvr {
  margin-top: 10px !important;
}


/* =========================================================
   RIGHT — FORM
   ========================================================= */

.contact-form {
  position: relative;

  grid-column: 2;
  grid-row: 1;

  width: 100%;

  max-width: 560px;

  justify-self: end;

  align-self: center;
}


/* =========================================================
   CONTACT-ONLY MAILING LIST POSITION
   ========================================================= */

/*
  The shared footer signup is injected into .contact-layout on this page.
  Give it an explicit second row so it can never claim the form's grid
  position. The contact-details entrance animation remains independent.
*/
.contact-layout > .site-footer__mailing.site-footer__mailing--contact-page {
  grid-column: 1 / -1;
  grid-row: 2;

  justify-self: center;
  align-self: start;

  width: min(420px, 38vw);
  margin: 0;
}


/* =========================================================
   NAME
   ========================================================= */

.contact-form__name-label {
  margin:
    0
    0
    5px;

  color: var(--accent);

  font-size: 0.52rem;

  line-height: 1;

  text-transform: uppercase;
}


.contact-form__name-row {
  width: 100%;

  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 8px;
}


/* =========================================================
   FIELDS
   ========================================================= */

.contact-field {
  width: 100%;

  margin-bottom: 14px;
}


.contact-field label {
  display: block;

  margin-bottom: 4px;

  color: var(--accent);

  font-size:
    clamp(
      0.50rem,
      0.46vw,
      0.58rem
    );

  font-weight: 400;

  line-height: 1;

  text-transform: uppercase;
}


.contact-field input,
.contact-field select,
.contact-field textarea {
  box-sizing: border-box;

  width: 100%;

  margin: 0;

  border:
    1px solid
    rgba(17, 17, 17, 0.48);

  border-radius: 0;

  background:
    rgba(0, 0, 0, 0.012);

  color: var(--text);

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  outline: none;
}


.contact-field input,
.contact-field select {
  height: 29px;

  padding:
    4px
    6px;
}


.contact-field select {
  font-size: 0.72rem;
  cursor: pointer;
}


.contact-field textarea {
  min-height: 108px;

  padding: 7px;

  resize: vertical;
}


.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  border-color: var(--accent);
}


/* =========================================================
   SEND
   ========================================================= */

.contact-submit {
  min-width: 78px;

  margin-top: 2px;

  padding:
    11px
    20px;

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

  border-radius: 0;

  background: transparent;

  color: var(--text);

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 0.66rem;

  cursor: pointer;

  transition:
    background-color 150ms ease,
    color 150ms ease,
    border-color 150ms ease;
}


.contact-submit:hover,
.contact-submit:focus-visible {
  border-color: var(--accent);

  background: var(--accent);

  color: #ffffff;
}


/* =========================================================
   FORM STATUS
   ========================================================= */

#contact-form-status {
  position: absolute;

  left: 0;
  top: 100%;

  width: 100%;

  margin-top: 18px !important;
}


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

@media (max-width: 1050px) {

  .contact-layout {
    width:
      min(
        calc(100% - 70px),
        880px
      );

    grid-template-columns:
      190px
      minmax(430px, 500px);
  }


  .contact-form {
    max-width: 500px;
  }

}


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

@media (max-width: 700px) {

  .contact-main {
    padding:
      75px
      var(--page-padding)
      120px;
  }


  .contact-layout {
    position: static;

    width: 100%;

    transform: none;

    display: flex;
    flex-direction: column;

    align-items: stretch;

    gap: 60px;
  }


  .contact-details {
    top: 0;

    width: fit-content;

    align-self: flex-start;

    font-size: 0.62rem;
  }


  .contact-form {
    width: 100%;

    max-width: none;
  }


  .contact-layout > .site-footer__mailing.site-footer__mailing--contact-page {
    width: min(100%, 420px);
    align-self: center;
    margin-top: -24px;
  }


  .contact-form__name-row {
    grid-template-columns: 1fr;

    gap: 0;
  }


  .contact-field input,
  .contact-field select {
    height: 36px;
  }


  .contact-field textarea {
    min-height: 145px;
  }


  #contact-form-status {
    position: static;

    width: auto;

    margin-top: 18px !important;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .contact-details {
    transform: none !important;
    opacity: 1 !important;
  }

}