/* =========================================================================
   THUNDERBIRD — Branded Webform Styling (Drupal 10 / Webspark · UDS)
   -------------------------------------------------------------------------
   Lead palette : Thunderbird Blue (#002e5f) + Thunderbird Gold (#ffc627)
   Approach     : Branded layer on top of ASU Webspark / Unity (UDS).
   Scope        : Namespaced under .tbird-form to prevent style bleeding.
   ========================================================================= */

/* ---- 1. Design tokens & Container ------------------------------------- */
.tbird-form {
  /* Brand — primary */
  --tb-blue:        #002e5f; /* Thunderbird Blue */
  --tb-gold:        #ffc627; /* Thunderbird Gold */
  --tb-gray:        #999999; /* Thunderbird Gray */
  --tb-black:       #191919; /* Rich Black */
  --tb-white:       #ffffff;

  /* Brand — secondary */
  --tb-twilight:    #0179b7; /* Twilight Blue */
  --tb-dawn:        #c0ddea; /* Dawn Blue */
  --tb-jade:        #78be20; /* Jade */

  /* Brand — optional (callouts) */
  --tb-copper:      #924813; /* Copper */
  --tb-orange:      #ff7f32; /* Orange */

  /* Derived UI tokens */
  --tb-blue-700:    #00224a;
  --tb-field-bg:    #ffffff;
  --tb-field-border:#c4ccd6;
  --tb-field-hover: #8a97a8;
  --tb-label:       var(--tb-blue);
  --tb-text:        #2b2f36;
  --tb-muted:       #5b6470;
  --tb-error:       #b3261e;

  --tb-required:    var(--tb-twilight); /* Set to Twilight Blue (#0179b7) */
  --tb-radius:      0;
  --tb-gap:         1.25rem;
  --tb-focus-ring:  0 0 0 3px rgba(255, 198, 39, .55);
  --tb-ease:        160ms cubic-bezier(.4, 0, .2, 1);

  padding: 2rem clamp(1.25rem, 4vw, 2.25rem);
  background: var(--tb-white);
  border: 1px solid #d7dce3;
  border-radius: 0;
  box-shadow: 0 1px 3px rgba(0, 46, 95, .05);
  color: var(--tb-text);
}

/* Containment overrides for UDS form width */
.tbird-form,
.tbird-form.webform-submission-form,
.tbird-form .webform-submission-form {
  max-width: 720px !important;
  margin-inline: auto !important;
}

/* ---- 2. Layout: rows & fields ------------------------------------------ */
.tbird-form .webform-flexbox {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tb-gap);
}
.tbird-form .webform-flexbox + .webform-flexbox,
.tbird-form > .form-wrapper + .form-wrapper {
  margin-top: var(--tb-gap);
}
.tbird-form .webform-flex {
  flex: 1 1 240px;
  margin: 0;
}
.tbird-form .webform-flex--container { height: 100%; }
.tbird-form .form-item { margin: 0 0 var(--tb-gap); }
.tbird-form .webform-flex .form-item { margin-bottom: 0; }

/* ---- 3. Labels & required marker --------------------------------------- */
.tbird-form :is(.form-label, label) {
  display: block;
  margin-bottom: .4rem;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.3;
  letter-spacing: .005em;
  color: var(--tb-label);
}

/* Outranks upstream UDS form label svg selector */
.tbird-form :is(label, legend) :is(.uds-field-required, svg.uds-field-required),
.tbird-form :is(.uds-field-required, svg.uds-field-required) {
  color: var(--tb-required) !important;
  fill: var(--tb-required) !important;
  width: .5em;
  height: .5em;
  margin-left: .25em;
  vertical-align: .12em;
}

/* ---- 4. Inputs, selects, textareas ------------------------------------- */
.tbird-form :is(
  .form-control,
  .form-select,
  select,
  textarea,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="url"],
  input[type="date"],
  input[type="password"]
) {
  width: 100%;
  min-height: 48px;
  padding: .8rem 1rem;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--tb-text);
  background-color: var(--tb-field-bg);
  border: 1px solid var(--tb-field-border) !important;
  border-radius: var(--tb-radius);
  box-shadow: none;
  appearance: none;
  transition: border-color var(--tb-ease), box-shadow var(--tb-ease), background-color var(--tb-ease);
}

.tbird-form :is(input, textarea)::placeholder { color: #8b94a1; }

.tbird-form :is(.form-control, select, textarea):hover { 
  border-color: var(--tb-field-hover) !important; 
}

.tbird-form :is(.form-control, input, select, textarea):focus {
  outline: none;
  border-color: var(--tb-blue) !important;
  box-shadow: var(--tb-focus-ring);
  background-color: var(--tb-white);
}

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

.tbird-form :is(select, .custom-select) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23002e5f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.75rem;
}

/* ---- 5. Consent & markup text ------------------------------------------ */
.tbird-form :is(.webform-consent-text, .js-form-type-webform-markup :is(p, ol, ul, li)) {
  max-width: none !important;
  width: 100%;
  margin: 0;
  font-size: .8rem;
  line-height: 1.55;
  color: #484646;
}

.tbird-form .js-form-type-webform-markup > :is(p, ol, ul):first-child {
  margin-top: var(--tb-gap);
}

.tbird-form .js-form-type-webform-markup :is(ol, ul) {
  padding-left: 1.25rem;
}

.tbird-form .js-form-type-webform-markup li {
  margin-bottom: .35rem;
}

.tbird-form .js-form-type-webform-markup li:last-child {
  margin-bottom: 0;
}

.tbird-form a {
  color: var(--tb-twilight);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tbird-form a:hover { color: var(--tb-blue); }

/* ---- 6. Actions: reCAPTCHA + submit ------------------------------------ */
.tbird-form :is(.form-actions, #edit-actions) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--tb-gap);
  margin-top: var(--tb-gap);
}

.tbird-form :is(.captcha, .g-recaptcha) { margin-top: var(--tb-gap); }

/* ---- 7. Submit button -------------------------------------------------- */
form.tbird-form.tbird-form :is(input, button):is(.js-form-submit.form-submit, .webform-button--submit) {
  position: relative;
  display: inline-block;
  width: max-content !important;
  padding: 1rem 2rem !important;
  border: 1px solid var(--tb-twilight) !important;
  border-radius: 400rem !important;
  background: var(--tb-twilight) !important;
  color: #fff !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1rem;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  box-shadow: none !important;
  opacity: 1;
  transition: .03s ease-in-out;
}

form.tbird-form.tbird-form :is(input, button):is(.js-form-submit.form-submit, .webform-button--submit):is(:hover, :active) {
  background: var(--tb-twilight) !important;
  border-color: var(--tb-twilight) !important;
  color: #fff !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  box-shadow: none !important;
  transform: scale(1.04);
}

form.tbird-form.tbird-form :is(input, button):is(.js-form-submit.form-submit, .webform-button--submit):focus-visible {
  outline: none;
  background: var(--tb-twilight) !important;
  border-color: var(--tb-twilight) !important;
  color: #fff !important;
  box-shadow: var(--tb-focus-ring) !important;
}

form.tbird-form.tbird-form :is(input, button):is(.js-form-submit.form-submit, .webform-button--submit):is(:disabled, [disabled]) {
  opacity: .5;
  transform: none;
  cursor: not-allowed;
}

/* ---- 8. Validation / error states -------------------------------------- */
.tbird-form :is(input.error, select.error, textarea.error, .form-item--error input, [aria-invalid="true"]) {
  border-color: var(--tb-error) !important;
  box-shadow: 0 0 0 3px rgba(179, 38, 30, .15);
}

.tbird-form :is(.form-item--error-message, .error-message, .messages--error) {
  margin-top: .4rem;
  font-size: .85rem;
  color: var(--tb-error);
}

/* ---- 9. Title inside the form box ------------------------------------- */
.tbird-form :is(h2, .tbird-form__title, .webform-title) {
  display: block;
  width: 100%;
  margin: 0 0 1.5rem !important;
  padding-bottom: .65rem;
  font-size: 2.5rem !important;
  line-height: 1.2 !important;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--tb-blue);
  border-bottom: 2px solid var(--tb-gold);
}

.tbird-form__title--banner {
  display: inline-block;
  width: auto;
  padding: .3em .6em;
  border-bottom: 0;
  background: var(--tb-gold);
  color: var(--tb-blue);
}

/* ---- 10. Optional surfaces --------------------------------------------- */
.tbird-form--bare {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* ---- 11. Dark / inverse variant ---------------------------------------- */
.tbird-form--dark {
  --tb-label:        #ffffff;
  --tb-text:         #1a1d22;
  --tb-muted:        #d7dde4;
  --tb-field-bg:     rgba(255, 255, 255, .96);
  --tb-field-border: rgba(255, 255, 255, .65);
  --tb-field-hover:  #ffffff;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.tbird-form--dark :is(h2, .webform-title) { color: var(--tb-white); }
.tbird-form--dark :is(.webform-consent-text, .js-form-type-webform-markup p) { color: var(--tb-muted); }
.tbird-form--dark a { color: var(--tb-dawn); }
.tbird-form--dark a:hover { color: var(--tb-white); }
.tbird-form--dark :is(input, select, textarea):focus { border-color: var(--tb-gold) !important; }

.tbird-form--dark.tbird-form--scrim {
  padding: 2.5rem;
  background: linear-gradient(180deg, rgba(0, 34, 74, .78), rgba(0, 34, 74, .86));
  border-radius: 10px;
  backdrop-filter: blur(2px);
}

/* ---- 12. Responsive & motion ------------------------------------------- */
@media (max-width: 575.98px) {
  .tbird-form .webform-flex { flex: 1 1 100%; }
  .tbird-form :is(.form-actions, #edit-actions) { justify-content: stretch; }
  .tbird-form :is(input[type="submit"], .webform-button--submit, .btn.btn-primary) { width: 100% !important; }
}

@media (prefers-reduced-motion: reduce) {
  .tbird-form * { transition: none !important; }
  .tbird-form :is(.webform-button--submit, input[type="submit"]):hover { transform: none; }
}