/* Forms — Standard Bearer Co. */

label, .form-label {
  display: inline-block;
  font-family: var(--ff-ui);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--c-charcoal);
  margin-bottom: var(--sp-2);
}

input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="password"], input[type="search"], input[type="url"], input[type="date"],
select, textarea {
  width: 100%;
  font-family: var(--ff-ui);
  font-size: var(--fs-body);
  color: var(--c-charcoal);
  background: var(--c-white);
  border: 1px solid var(--c-field-gray-light);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  transition: border-color var(--transition), box-shadow var(--transition);
  appearance: none;
  -webkit-appearance: none;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--c-navy);
  box-shadow: 0 0 0 3px rgba(26,42,71,.15);
}

input::placeholder, textarea::placeholder {
  color: var(--c-field-gray);
  opacity: .8;
}

textarea { min-height: 120px; resize: vertical; }

select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%231A2A47' stroke-width='1.5'><path d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  padding-right: 36px;
}

input[type="checkbox"], input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--c-navy);
  margin-right: var(--sp-2);
  vertical-align: middle;
}

.field {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--sp-4);
}
.field--inline {
  flex-direction: row;
  align-items: center;
  gap: var(--sp-3);
}

.form-help {
  font-family: var(--ff-ui);
  font-size: var(--fs-caption);
  color: var(--c-field-gray);
  margin-top: var(--sp-2);
}

.form-error {
  font-family: var(--ff-ui);
  font-size: var(--fs-small);
  color: var(--c-red);
  margin-top: var(--sp-2);
}

input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--c-red);
}

/* search bar */
.search-form {
  display: flex;
  gap: var(--sp-2);
  align-items: stretch;
}
.search-form input[type="search"] { flex: 1; }