/* Forms (Contact and Careers). Loads after base.css. */

.form {
  position: relative; padding: 34px 34px 30px;
  background: var(--white); border: 2px solid var(--teal); border-radius: 18px; box-shadow: 10px 10px 0 var(--teal);
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.field > label, .field > legend, .fieldset > legend {
  font-weight: 900; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
}
.field .req { color: var(--orange); }
.field .opt { font-weight: 700; letter-spacing: 0; text-transform: none; opacity: .65; }
.field input, .field select, .field textarea {
  width: 100%; padding: .85em 1em; border: 2px solid var(--teal); border-radius: 12px;
  background: var(--paper); color: var(--teal); font: 600 1rem/1.4 var(--body);
  transition: box-shadow .15s ease, background .15s ease;
}
.field textarea { min-height: 140px; resize: vertical; }
.field select {
  appearance: none; padding-right: 2.6em; cursor: pointer;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23004750' stroke-width='2.5'/%3E%3C/svg%3E") no-repeat right 1em center;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; background: var(--white); box-shadow: 4px 4px 0 var(--orange); }
.field input::placeholder, .field textarea::placeholder { color: rgba(0, 71, 80, .5); }

/* Pill checkboxes */
.fieldset { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; }
.fieldset > legend { margin-bottom: 10px; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  display: inline-flex; align-items: center; gap: .4em; padding: .55em 1em; cursor: pointer;
  border: 2px solid var(--teal); border-radius: 999px; background: var(--paper); font-weight: 900; font-size: .88rem;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.chip span::before {
  content: ""; width: .8em; height: .8em; border: 2px solid currentColor; border-radius: 50%;
  transition: background .15s ease;
}
.chip input:checked + span { background: var(--teal); color: var(--paper); }
.chip input:checked + span::before { background: var(--sun); border-color: var(--sun); }
.chip input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 2px; }
.chip span:hover { transform: translateY(-1px); }

/* Resume drop zone */
.drop {
  position: relative; display: flex; align-items: center; gap: 16px; padding: 20px;
  border: 2px dashed var(--teal); border-radius: 14px; background: var(--paper); cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.drop:hover, .drop.is-over { background: var(--sun); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop__icon {
  flex: none; width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: 50%; background: var(--teal); color: var(--sun); font: 900 1.4rem/1 var(--body);
}
.drop__text b { display: block; font-weight: 900; }
.drop__text small { font-size: .85rem; opacity: .8; }
.drop.has-file { border-style: solid; background: var(--sea); }
.drop.has-file .drop__icon { background: var(--orange); color: var(--white); }

.form__submit { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 6px; }
.form__submit .btn[disabled] { opacity: .65; cursor: progress; transform: none; }
.form__fine { margin: 0; font-size: .85rem; opacity: .75; }
.form__error {
  margin: 0 0 16px; padding: 12px 16px; border-radius: 12px;
  background: #fde3de; border: 2px solid var(--orange); color: #8a1c0c; font-weight: 700;
}
.form__error[hidden] { display: none; }
/* honeypot: hidden from people, visible to bots */
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Success state */
.form__done { text-align: center; padding: 20px 8px 10px; }
.form__done[hidden] { display: none; }
.form__done img { width: 120px; margin: 0 auto 14px; animation: done-bounce .7s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes done-bounce { from { transform: translateY(30px) scale(.6); opacity: 0; } }
.form__done h3 { font-size: 2.2rem; margin-bottom: .6rem; }
.form__done p { margin: 0 auto; max-width: 36ch; }
.form.is-done > :not(.form__done) { display: none; }

@media (max-width: 760px) {
  .form { padding: 24px 18px 22px; box-shadow: 6px 6px 0 var(--teal); }
  .form__row { grid-template-columns: 1fr; gap: 0; }
}