/**
 * Atlas Forms
 */

label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-secondary);
}

input[type="search"],
input[type="email"],
input[type="text"],
input[type="number"],
textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-base);
  line-height: var(--line-height-snug);
  color: var(--color-text);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

input[type="search"]:focus,
input[type="email"]:focus,
input[type="text"]:focus,
input[type="number"]:focus,
textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgb(26 77 62 / 0.12);
  outline: none;
}

/* Hero search */
.atlas-hero__search {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  max-width: 36rem;
  margin-top: var(--space-5);
}

.atlas-hero__search-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.atlas-hero__search-input {
  flex: 1 1 12rem;
  min-width: 0;
}

.atlas-hero__search-submit {
  flex: 0 0 auto;
}

/* Newsletter */
.atlas-newsletter-cta__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  max-width: 32rem;
  margin-top: var(--space-4);
}

.atlas-newsletter-cta__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.atlas-newsletter-cta__input {
  flex: 1 1 14rem;
  min-width: 0;
}

.atlas-newsletter-cta__submit {
  flex: 0 0 auto;
}

/* Contact form */
.atlas-contact-form {
  display: grid;
  gap: var(--space-2);
}

.atlas-contact-form__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-secondary);
}

.atlas-contact-form__textarea {
  resize: vertical;
  min-height: 6rem;
}

.atlas-contact-form--footer .atlas-contact-form__submit {
  justify-self: start;
  margin-top: var(--space-1);
}
