/* Alumascape — branded styling for the relay contact form.
   Scoped to form[data-relay-form] so it never affects other widgets. */

form[data-relay-form] {
  --asf-primary: #D89E1A;
  --asf-primary-dark: #b87e11;
  --asf-ink: #16163f;
  --asf-border: #d6d9e0;
  --asf-bg: #ffffff;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

form[data-relay-form] .gform_fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
}

/* Full-width rows: message + honeypot + footer */
form[data-relay-form] .gfield:nth-child(5),
form[data-relay-form] .gfield.gfield_html {
  grid-column: 1 / -1;
}

@media (max-width: 600px) {
  form[data-relay-form] .gform_fields { grid-template-columns: 1fr; }
}

form[data-relay-form] .gfield_label {
  display: block;
  font-family: "Roboto", system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .2px;
  color: var(--asf-ink);
  margin: 0 0 7px;
}

form[data-relay-form] .gfield_required_asterisk,
form[data-relay-form] .gfield_required {
  color: var(--asf-primary);
  margin-left: 3px;
}

form[data-relay-form] input[type="text"],
form[data-relay-form] input[type="tel"],
form[data-relay-form] input[type="email"],
form[data-relay-form] textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 16px;
  color: #1f2330;
  background: var(--asf-bg);
  border: 1px solid var(--asf-border);
  border-radius: 8px;
  padding: 13px 15px;
  line-height: 1.4;
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none;
  appearance: none;
}

form[data-relay-form] input::placeholder,
form[data-relay-form] textarea::placeholder { color: #9aa0ad; }

form[data-relay-form] input:focus,
form[data-relay-form] textarea:focus {
  outline: none;
  border-color: var(--asf-primary);
  box-shadow: 0 0 0 3px rgba(216, 158, 26, .18);
}

form[data-relay-form] textarea {
  min-height: 150px;
  resize: vertical;
}

form[data-relay-form] .gform_footer {
  grid-column: 1 / -1;
  margin-top: 6px;
}

form[data-relay-form] .gform_button,
form[data-relay-form] input[type="submit"] {
  display: inline-block;
  width: auto;
  font-family: "Roboto", system-ui, sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .3px;
  color: #fff;
  background: var(--asf-primary);
  border: none;
  border-radius: 8px;
  padding: 15px 38px;
  cursor: pointer;
  transition: background-color .15s ease, transform .05s ease, box-shadow .15s ease;
  box-shadow: 0 2px 8px rgba(216, 158, 26, .28);
}

form[data-relay-form] .gform_button:hover,
form[data-relay-form] input[type="submit"]:hover {
  background: var(--asf-primary-dark);
  box-shadow: 0 4px 14px rgba(216, 158, 26, .38);
}

form[data-relay-form] .gform_button:active,
form[data-relay-form] input[type="submit"]:active { transform: translateY(1px); }

form[data-relay-form] .gform_button:disabled,
form[data-relay-form] input[type="submit"]:disabled {
  opacity: .65;
  cursor: not-allowed;
  box-shadow: none;
}

/* Make the footer span the grid so the button sits full-row, left-aligned */
form[data-relay-form] .gform_footer { display: block; }

/* JS-injected status message */
form[data-relay-form] .form-message {
  grid-column: 1 / -1;
  font-family: "Roboto", system-ui, sans-serif;
}