/* =========================================================================
   AltTune — HubSpot custom forms (.at-form)
   Follows the prototype form design (see page-contact.css .at-form-field):
   quiet steel-silver chrome, BLACK focus states, floating Material labels.
   Orange appears only where it carries meaning: required asterisk and the
   checked state of radio/checkbox controls.
   Markup: template-parts/forms/.   JS: assets/js/hubspot-forms.js.
   ========================================================================= */

.at-form {
  max-width: 560px;
  margin-inline: auto;
}

.at-form__title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--fg-1);
  margin: 0 0 6px;
}

.at-form__intro {
  color: var(--fg-2);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 22px;
}

.at-form__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Two-column rows */
.at-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 640px) {
  .at-form__row { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   Floating labels — the label rests centred inside the input and floats up
   onto the border on focus / when filled (placeholder=" " trick, no JS).
   Deliberately unhurried: ~380 ms ease.
   ---------------------------------------------------------------------- */
.at-form__field {
  position: relative;
  display: flex;
  flex-direction: column;
}

.at-form__label {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  color: var(--fg-3);
  background: #fff;
  padding: 0 4px;
  pointer-events: none;
  z-index: 1;
  transition: top 380ms cubic-bezier(.32,.72,0,1),
              transform 380ms cubic-bezier(.32,.72,0,1),
              font-size 380ms cubic-bezier(.32,.72,0,1),
              color 320ms ease,
              font-weight 320ms ease;
}

.at-form__input:focus ~ .at-form__label,
.at-form__input:not(:placeholder-shown) ~ .at-form__label {
  top: 0;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--fg-1);
}

.at-form__input:focus ~ .at-form__label {
  color: var(--rubber-black);
}

/* Textarea — resting label sits at the top, not vertically centred */
.at-form__field--message .at-form__label,
.at-form__field:has(.at-form__input--textarea) .at-form__label {
  top: 22px;
}

.at-form__input--textarea:focus ~ .at-form__label,
.at-form__input--textarea:not(:placeholder-shown) ~ .at-form__label {
  top: 0;
}

/* Required marker — the one intentional touch of orange */
.at-form__req {
  color: var(--performance-orange);
  margin-left: 2px;
}

/* -------------------------------------------------------------------------
   Inputs
   ---------------------------------------------------------------------- */
.at-form__input {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.4;
  color: var(--fg-1);
  background: #fff;
  border: 1px solid var(--steel-silver);
  border-radius: 10px;
  padding: 14px;
  width: 100%;
  transition: border-color 200ms ease;
}

.at-form__input:hover { border-color: var(--rubber-black-50); }

.at-form__input:focus {
  outline: none;
  border-color: var(--rubber-black);
  box-shadow: none;
}

.at-form__input.is-invalid {
  border-color: var(--danger);
}

/* Readonly (e.g. careers "Position applied for", filled from the openings
   list) — quiet surface, no focus ring, label still floats when filled. */
.at-form__input[readonly] {
  background: var(--steel-silver-50);
  cursor: default;
}

.at-form__input[readonly]:hover,
.at-form__input[readonly]:focus {
  border-color: var(--steel-silver);
}

.at-form__input[readonly] ~ .at-form__label {
  background: transparent;
}

.at-form__input[readonly]:focus ~ .at-form__label,
.at-form__input[readonly]:not(:placeholder-shown) ~ .at-form__label {
  background: linear-gradient(to bottom, transparent 48%, var(--steel-silver-50) 48%);
}

.at-form__input--textarea {
  resize: vertical;
  min-height: 130px;
}

.at-form__error {
  font-size: 12px;
  color: var(--danger);
  margin: 6px 0 0;
}

/* -------------------------------------------------------------------------
   Choice groups: radios / checkboxes
   ---------------------------------------------------------------------- */
.at-form__group {
  border: 0;
  padding: 2px 0 0;
  margin: 0;
}

.at-form__groupLabel {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--fg-1);
  padding: 0;
  margin-bottom: 10px;
}

.at-form__options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

.at-form__option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--fg-2);
  cursor: pointer;
  transition: color 200ms ease;
}

.at-form__option:hover { color: var(--fg-1); }

.at-form__option input {
  width: 16px;
  height: 16px;
  accent-color: var(--rubber-black);
  cursor: pointer;
}

/* -------------------------------------------------------------------------
   Attachments (.at-form__files) — quiet dashed dropzone + file chips
   ---------------------------------------------------------------------- */
.at-form__dropzone {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px dashed var(--steel-silver);
  border-radius: 10px;
  background: var(--steel-silver-50);
  color: var(--fg-2);
  cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease;
}

.at-form__dropzone:hover,
.at-form__dropzone.is-dragover {
  border-color: var(--rubber-black);
  background: #fff;
}

.at-form__dropzone svg {
  flex: none;
  color: var(--fg-3);
}

.at-form__dropzoneText {
  font-size: 13px;
  line-height: 1.5;
}

.at-form__dropzoneText strong {
  display: block;
  font-weight: 600;
  color: var(--fg-1);
  font-size: 14px;
}

.at-form__dropzone input[type="file"] {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.at-form__fileList {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.at-form__fileItem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--steel-silver);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  color: var(--fg-1);
}

.at-form__fileItem .name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.at-form__fileItem .size {
  color: var(--fg-3);
  font-size: 12px;
  flex: none;
}

.at-form__fileItem .remove {
  flex: none;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: var(--steel-silver-100);
  color: var(--fg-2);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}

.at-form__fileItem .remove:hover {
  background: var(--rubber-black);
  color: #fff;
}

.at-form.is-sent .at-form__files { display: none; }

/* -------------------------------------------------------------------------
   Status + submit
   ---------------------------------------------------------------------- */
.at-form__status {
  margin: 0;
  padding: 13px 14px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
}

.at-form__status.is-success {
  background: var(--steel-silver-100);
  color: var(--fg-1);
}

.at-form__status.is-error {
  background: #fbeae6;
  color: var(--danger);
}

/* Submit = global site button (.at-btn at-btn-primary: black, orange
   wipe-in hover). Only layout + disabled state live here. */
.at-form__submit {
  align-self: flex-start;
  margin-top: 8px;
}

.at-form__submit:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* Honeypot: visually removed, still in the accessibility-hidden DOM. */
.at-form__hp {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Once sent, hide the fields and keep the confirmation visible. */
.at-form.is-sent .at-form__field,
.at-form.is-sent .at-form__row,
.at-form.is-sent .at-form__group,
.at-form.is-sent .at-form__submit {
  display: none;
}

/* =========================================================================
   Form tabs (data-form-tabs) — segmented choice, prototype "purpose pill"
   aesthetic: quiet bordered pills, active goes solid black with an orange
   dot. Panels stay hidden until a tab is picked.
   ========================================================================= */
.at-form-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 4px 0 22px;
}

@media (max-width: 560px) {
  .at-form-tabs { grid-template-columns: 1fr; }
}

.at-form-tabs__tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid var(--steel-silver);
  background: #fff;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  color: var(--fg-1);
  cursor: pointer;
  text-align: left;
  transition: border-color 200ms ease, background 240ms ease, color 240ms ease;
}

.at-form-tabs__tab:hover { border-color: var(--rubber-black); }

.at-form-tabs__tab .dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--steel-silver);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 240ms ease;
}

.at-form-tabs__tab.is-active {
  background: var(--rubber-black);
  border-color: var(--rubber-black);
  color: #fff;
}

.at-form-tabs__tab.is-active .dot { border-color: #fff; }

.at-form-tabs__tab.is-active .dot::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--performance-orange);
}

/* -------------------------------------------------------------------------
   Cascade entrance — applied by JS when a tab panel is revealed. Each
   animatable child gets --i (its index) for the stagger.
   ---------------------------------------------------------------------- */
.at-cascade {
  opacity: 0;
  transform: translateY(14px);
}

.at-form-tabs__panel.is-in .at-cascade {
  opacity: 1;
  transform: none;
  transition: opacity 520ms cubic-bezier(.32,.72,0,1),
              transform 560ms cubic-bezier(.32,.72,0,1);
  transition-delay: calc(var(--i, 0) * 60ms);
}

@media (prefers-reduced-motion: reduce) {
  .at-cascade {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .at-form__label { transition: none !important; }
}