/* =========================================================================
   THUNDERBIRD — Branded Webform Styling (Drupal 10 / Webspark · UDS)
   -------------------------------------------------------------------------
   Lead palette : Thunderbird Blue (#002e5f) + Thunderbird Gold (#ffc627)
   Approach     : a branded layer on top of ASU Webspark / Unity (UDS).
                  Honors the existing Bootstrap flex grid; does not replace it.
   Scope        : every rule is namespaced under .tbird-form so nothing
                  bleeds into other UDS components on the page.

   HOW IT LOADS
   Ships with the Thunderbird subtheme as css/webform-branding.css, attached
   via the `webform-branding` library on webform render. While migrating off
   the CSS Asset Injector, confirm only one copy is loading — a duplicate
   will double every !important and make specificity debugging miserable.

   HOW TO OPT A FORM IN
   Webform → Settings → Form → "Form CSS classes" (Attributes):
     add  ->  tbird-form
   Optional surfaces, add alongside as needed:
     tbird-form--bare    strips the contained card; renders inline
     tbird-form--dark    over a dark hero / video
     tbird-form--scrim   (with --dark) adds a translucent navy backdrop

   To theme ALL webforms instead of opting in per form, find/replace
   ".tbird-form" -> ".uds-form" (note: applies to every UDS webform).
   ========================================================================= */


/* ---- 1. Design tokens --------------------------------------------------- */
.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 (links / accents only) */
  --tb-twilight:    #0179b7;
  --tb-dawn:        #c0ddea;
  --tb-jade:        #78be20;

  /* Derived UI tokens */
  --tb-blue-700:    #00224a;   /* deepen on press            */
  --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;   /* swap into --required-color below for red dots */

  --tb-required:    var(--tb-gold);  /* required marker color; set to var(--tb-error) for classic red */
  --tb-radius:      0;          /* sharp corners, matching the rest of the site */
  --tb-gap:         1.25rem;
  --tb-focus-ring:  0 0 0 3px rgba(255, 198, 39, .55);  /* gold halo */
  --tb-ease:        160ms cubic-bezier(.4, 0, .2, 1);

  /* Contained, centered card. !important defeats the UDS
     `form.webform-submission-form` max-width that was overriding this. */
  max-width: 720px !important;
  margin-inline: auto !important;
  padding: 2rem clamp(1.25rem, 4vw, 2.25rem);
  background: var(--tb-white);
  border: 1px solid #d7dce3;
  border-radius: 0;             /* sharp outline */
  box-shadow: 0 1px 3px rgba(0, 46, 95, .05);
  color: var(--tb-text);
}

/* Robust containment: two classes outrank the single-class UDS form-width
   rule regardless of load order, and this matches whether `tbird-form`
   sits on the <form> itself or on a wrapper around it. If the form is
   still full-width after this, the class isn't on the form/its wrapper —
   check the Webform "Form CSS classes" setting. */
.tbird-form.webform-submission-form,
.tbird-form .webform-submission-form,
.tbird-form.tbird-form {
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: 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;             /* graceful wrap on narrow screens */
  margin: 0;                   /* gap handles spacing; clear UDS gutters */
}
.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 .form-label,
.tbird-form label {
  display: block;
  margin-bottom: .4rem;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.3;
  letter-spacing: .005em;
  color: var(--tb-label);
}

/* Recolor & shrink the UDS filled-dot indicator.
   Required is also conveyed programmatically (required / aria-required),
   so this marker is decorative — safe to keep gold. */
.tbird-form .uds-field-required {
  color: var(--tb-required);
  width: .5em;
  height: .5em;
  margin-left: .25em;
  vertical-align: .12em;
}


/* ---- 4. Inputs, selects, textareas ------------------------------------- */
.tbird-form .form-control,
.tbird-form input[type="text"],
.tbird-form input[type="email"],
.tbird-form input[type="tel"],
.tbird-form input[type="number"],
.tbird-form input[type="url"],
.tbird-form input[type="date"],
.tbird-form input[type="password"],
.tbird-form select,
.tbird-form textarea {
  width: 100%;
  min-height: 48px;            /* generous touch / 508 target */
  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);
  border-radius: var(--tb-radius);
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--tb-ease), box-shadow var(--tb-ease),
              background-color var(--tb-ease);
}

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

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

/* Focus — Thunderbird Blue border + gold halo (high-visibility, WCAG AA) */
.tbird-form .form-control:focus,
.tbird-form input:focus,
.tbird-form select:focus,
.tbird-form textarea:focus {
  outline: none;
  border-color: var(--tb-blue);
  box-shadow: var(--tb-focus-ring);
  background-color: var(--tb-white);
}

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

/* Custom select caret — Thunderbird Blue chevron */
.tbird-form select,
.tbird-form .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 .webform-consent-text,
.tbird-form .js-form-type-webform-markup p {
  max-width: none !important;   /* defeat the UDS paragraph readability cap */
  width: 100%;
  margin: var(--tb-gap) 0 0;
  font-size: .8rem;
  line-height: 1.55;
  color: var(--tb-muted);
}
.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 .form-actions,
.tbird-form #edit-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;   /* button sits under the fields — not stranded right */
  gap: var(--tb-gap);
  margin-top: var(--tb-gap);
}
/* No captcha yet, so the button aligns left under the form.
   When reCAPTCHA is added, switch to space-between (captcha left, button right):
     .tbird-form .form-actions { justify-content: space-between; }
   Other options: center | flex-end. For a full-width CTA, uncomment:
     .tbird-form .form-actions .webform-button--submit,
     .tbird-form .form-actions input[type="submit"] { width: 100%; } */
.tbird-form .captcha,
.tbird-form .g-recaptcha { margin-top: var(--tb-gap); }


/* ---- 7. Submit button — mirrors the UDS `.btn` box model -------------- */
/* Geometry, type metrics, sizing and transition are copied from ASU's
   `.btn` / Bootstrap token block verbatim. Only the palette differs:
   Thunderbird Twilight Blue instead of the UDS default.

     UDS token / rule        value replicated here
     --bs-btn-padding-y/x    1rem 2rem
     --bs-btn-font-size      1rem
     .btn font-weight        700
     --bs-btn-line-height    1rem
     --bs-btn-border-width   1px
     --bs-btn-border-radius  400rem
     .btn transition         .03s ease-in-out
     .btn width              max-content !important

   SELECTOR SHAPE — READ BEFORE SIMPLIFYING
   The `form.tbird-form.tbird-form :is(input, button)` prefix looks
   redundant and isn't. It exists to outrank this rule, which sets a
   gray/black hover with !important and was winning:

     body.toolbar-icon-10 form .js-form-submit.form-submit.btn-blue:hover

   That selector scores 5 classes + 2 elements; a plain
   `.tbird-form .js-form-submit.form-submit.btn-blue:hover` scores 5 + 0,
   so !important on both sides resolves to the theme. Repeating
   `.tbird-form` and qualifying `form` / `input` buys the two element
   units plus a class of headroom. If that upstream rule ever goes away,
   collapse this back to a single `.tbird-form` prefix.

   Padding is the one knob you're likely to touch. 1rem 2rem is ASU's
   own value; .6rem 1.5rem is the restrained variant.                    */
form.tbird-form.tbird-form :is(input, button).btn.js-form-submit.form-submit,
form.tbird-form.tbird-form :is(input, button).btn.webform-button--submit {
  position: relative;
  display: inline-block;
  width: -moz-max-content !important;
  width: max-content !important;
  padding: 1rem 2rem !important;
  border: 1px solid var(--tb-twilight) !important;
  border-radius: 400rem !important;
  background: var(--tb-twilight) !important;
  background-color: 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;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  box-shadow: none !important;
  opacity: 1;
  transition: .03s ease-in-out;
}

/* Hover / press — hold the palette still so the only thing that changes
   is scale. `font-weight` is restated because the upstream hover rule
   drops it to 500, which reflows the label width mid-hover.

   Note: `.03s ease-in-out` above is ASU's transition, and at 30ms the
   grow reads as an instant snap rather than a glide. For the smoother
   version, swap the base transition line for:
     transition: transform var(--tb-ease),
                 background-color .15s ease-in-out, border-color .15s ease-in-out;
   Or drop `transform: scale(1.04)` for a pure UDS-native button.        */
form.tbird-form.tbird-form :is(input, button).btn.js-form-submit.form-submit:is(:hover, :active),
form.tbird-form.tbird-form :is(input, button).btn.webform-button--submit:is(:hover, :active) {
  background: var(--tb-twilight) !important;
  background-color: 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);
}

/* Keyboard focus — gold halo, matching the input fields. Kept in its own
   rule so the ring isn't cancelled by the `box-shadow: none` above. */
form.tbird-form.tbird-form :is(input, button).btn.js-form-submit.form-submit:focus-visible,
form.tbird-form.tbird-form :is(input, button).btn.webform-button--submit:focus-visible {
  outline: none;
  background: var(--tb-twilight) !important;
  background-color: var(--tb-twilight) !important;
  border-color: var(--tb-twilight) !important;
  color: #fff !important;
  box-shadow: var(--tb-focus-ring) !important;
}

/* Disabled — UDS `--bs-btn-disabled-opacity: 0.5`. Must come after the
   hover rule to win the tie on equal specificity, otherwise a button
   disabled mid-AJAX-submit still grows and looks clickable. */
form.tbird-form.tbird-form :is(input, button).btn.js-form-submit.form-submit:is(:disabled, [disabled]),
form.tbird-form.tbird-form :is(input, button).btn.webform-button--submit:is(:disabled, [disabled]) {
  opacity: .5;
  transform: none;
  cursor: not-allowed;
}


/* ---- 8. Validation / error states -------------------------------------- */
.tbird-form input.error,
.tbird-form select.error,
.tbird-form textarea.error,
.tbird-form .form-item--error input,
.tbird-form [aria-invalid="true"] {
  border-color: var(--tb-error);
  box-shadow: 0 0 0 3px rgba(179, 38, 30, .15);
}
.tbird-form .form-item--error-message,
.tbird-form .error-message,
.tbird-form .messages--error {
  margin-top: .4rem;
  font-size: .85rem;
  color: var(--tb-error);
}


/* ---- 9. Title inside the form box ------------------------------------- */
/* Add an HTML markup element at the top of the webform:
   <h2 class="tbird-form__title">Request more information</h2>
   The high specificity + !important force the size down over the theme's
   large display h2. Adjust font-size to taste — it's a one-number change. */
.tbird-form h2.tbird-form__title,
.tbird-form .tbird-form__title,
.tbird-form h2,
.tbird-form .webform-title {
  display: block;
  width: 100%;                       /* span the full width of the box */
  margin: 0 0 1.5rem !important;
  padding-bottom: .65rem;
  font-size: 2.5rem !important;     /* ~28px; was the theme's ~70px */
  line-height: 1.2 !important;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--tb-blue);
  border-bottom: 2px solid var(--tb-gold);   /* header rule; delete this line for no underline */
}

/* Want the underline to reach the card edges instead of the text column?
   Add to the rule above:
     margin-left: clamp(-2.25rem, -4vw, -1.25rem) !important;
     margin-right: clamp(-2.25rem, -4vw, -1.25rem) !important;
     padding-left: clamp(1.25rem, 4vw, 2.25rem);
     padding-right: clamp(1.25rem, 4vw, 2.25rem);                          */

/* Optional gold-banner treatment (like the ASU Law reference). Use:
   <h2 class="tbird-form__title tbird-form__title--banner">…</h2>        */
.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 --------------------------------------------- */
/* Opt OUT of the contained card (renders inline — no border / bg / padding) */
.tbird-form--bare {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}


/* ---- 11. Dark / inverse variant (over hero / video) -------------------- */
/* Fields stay near-white for legibility over motion; chrome flips light. */
.tbird-form--dark {
  --tb-label:        #ffffff;
  --tb-text:         #1a1d22;            /* text inside the light fields */
  --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;               /* drop the white card over a hero */
  border-color: transparent;
  box-shadow: none;
}
.tbird-form--dark h2,
.tbird-form--dark .webform-title { color: var(--tb-white); }
.tbird-form--dark .webform-consent-text,
.tbird-form--dark .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 input:focus,
.tbird-form--dark select:focus,
.tbird-form--dark textarea:focus { border-color: var(--tb-gold); }

/* Translucent navy backdrop so a busy video doesn't fight the form */
.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 .form-actions,
  .tbird-form #edit-actions { justify-content: stretch; }
  /* !important is required here — it has to outrank the
     `width: max-content !important` that UDS's .btn sets and that
     section 7 replicates. Delete this whole rule if you'd rather the
     button stay max-content on phones, like a stock ASU button. */
  .tbird-form input[type="submit"],
  .tbird-form .webform-button--submit,
  .tbird-form .btn.btn-primary { width: 100% !important; }
}

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