/* css/custom.css */

/* =========================================
   1. Buttons & Tags
   ========================================= */
.button {
  border-top: var(--button-border-width) solid var(--button-border-color);
  border-bottom: var(--button-border-width) solid var(--button-border-color);
  background-color: var(--button-bg);
  color: var(--button-text);
  text-align: center;
  padding: var(--button-padding);
  text-decoration: none;
  border-radius: var(--button-radius);
  font-weight: var(--button-font-weight);
  font-size: var(--button-font-size);
  transition: var(--button-transition);
  cursor: pointer;
  display: inline-block;
}
.button.is-secondary {
  background-color: var(--button-secondary-bg);
  color: var(--button-secondary-text);
}
.button.is-alternate {
  border-color: var(--button-alt-border-color);
  background-color: var(--button-alt-bg);
  color: var(--button-alt-text);
}
.button.is-secondary.is-alternate {
  background-color: var(--transparent);
  color: var(--button-text);
}
.button.is-link {
  background-color: var(--transparent);
  color: var(--button-link-text);
  border-style: none;
  padding: var(--button-link-padding);
  line-height: 1;
  text-decoration: none;
}
.button.is-link.is-alternate {
  background-color: var(--transparent);
  color: var(--button-text);
}
.button.is-small { padding: var(--button-padding-small); }
.button.is-icon { gap: .75rem; justify-content: center; align-items: center; display: flex; }
.button.is-link.is-icon { gap: .5rem; }

.button-group {
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  display: flex;
}

.tag {
  gap: .5rem;
  border: 1px solid var(--tag-border-color);
  background-color: var(--tag-bg);
  color: var(--tag-text);
  justify-content: center;
  align-items: center;
  padding: var(--tag-padding);
  font-size: var(--tag-font-size);
  font-weight: var(--tag-font-weight);
  border-radius: var(--tag-radius);
  text-decoration: none;
  display: inline-flex;
}
.tag.is-alternate {
  border-color: var(--white);
  background-color: var(--white);
  color: var(--black);
}
.tag.is-text {
  border: none;
  background-color: var(--transparent);
  padding: 0;
  display: inline-block;
}
.tag.is-text.is-alternate {
  background-color: var(--transparent);
  color: var(--white);
}


/* =========================================
   2. Form Elements
   ========================================= */
.form_form {
  gap: 1.5rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  display: grid;
}
.form_field-wrapper { position: relative; }
.form_field-label {
  margin-bottom: var(--label-margin-bottom);
  font-weight: var(--label-font-weight);
}
.form_field-label.is-alternate { color: var(--color-text-alt); }

.form_input {
  border: var(--input-border-width) solid var(--input-border-color);
  background-color: var(--input-bg);
  color: var(--input-text);
  border-radius: var(--input-radius);
  height: auto;
  min-height: var(--input-min-height);
  margin-bottom: 0;
  padding: var(--input-padding);
  font-size: var(--input-font-size);
  line-height: 1.6;
  transition: var(--input-transition);
  width: 100%;
}
.form_input:focus {
  border-color: var(--input-focus-border-color);
  outline: none;
}
.form_input::placeholder { color: var(--input-placeholder-color); }
.form_input.is-alternate {
  border-color: var(--input-alt-border-color);
  background-color: var(--input-alt-bg);
  color: var(--input-alt-text);
}
.form_input.is-alternate::placeholder { color: var(--input-alt-placeholder-color); }
.form_input.is-text-area {
  height: auto;
  min-height: var(--textarea-min-height);
  padding-top: var(--textarea-padding);
  padding-bottom: var(--textarea-padding);
  overflow: auto;
  resize: vertical;
}
.form_input.is-select-input {
  background-image: url('../images/chevron-down.svg');
  background-position: calc(100% - .75rem) center;
  background-repeat: no-repeat;
  background-size: 1rem;
  appearance: none;
  padding-right: 2.5rem;
}
.form_input.is-select-input.is-alternate {
  background-image: url('../images/chevron-down-white.svg');
}

.form_message-success {
  color: var(--form-success-text);
  background-color: var(--form-success-bg);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2.5rem;
  display: flex;
  margin-top: 1rem;
}
.form_message-error {
  color: var(--form-error-text);
  background-color: var(--form-error-bg);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  display: flex;
  margin-top: 1rem;
}


/* =========================================
   3. Icons
   ========================================= */
.icon-embed-xxsmall { width: var(--icon-xxsmall); height: var(--icon-xxsmall); flex-direction: column; justify-content: center; align-items: center; display: flex; }
.icon-embed-xsmall { width: var(--icon-xsmall); height: var(--icon-xsmall); flex-direction: column; justify-content: center; align-items: center; display: flex; }
.icon-embed-small { width: var(--icon-small); height: var(--icon-small); flex-direction: column; justify-content: center; align-items: center; display: flex; }
.icon-embed-medium { width: var(--icon-medium); height: var(--icon-medium); flex-direction: column; justify-content: center; align-items: center; display: flex; }
.icon-embed-large { width: var(--icon-large); height: var(--icon-large); flex-direction: column; justify-content: center; align-items: center; display: flex; }

.icon-1x1-xxsmall { width: var(--icon-xxsmall); height: var(--icon-xxsmall); }
.icon-1x1-xsmall { width: var(--icon-xsmall); height: var(--icon-xsmall); }
.icon-1x1-small { width: var(--icon-small); height: var(--icon-small); }
.icon-1x1-medium { width: var(--icon-medium); height: var(--icon-medium); }
.icon-1x1-large { width: var(--icon-large); height: var(--icon-large); }


/* =========================================
   4. Tagline
   ========================================= */
.text-style-tagline {
  justify-content: center;
  align-items: center;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
}

.nav_list{
  list-style-type: none;
  display:flex;
  flex-direction: row;
  gap: 1rem;
}

a{
  text-decoration: none;
}