/* Drupal 11 port: rules that map the D7 theme's selectors onto D11 markup. */

/* D7 helper classes used in templates */
.element-invisible { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); overflow: hidden; height: 1px; }
.element-invisible.element-focusable:active, .element-invisible.element-focusable:focus { position: static !important; clip: auto; overflow: visible; height: auto; }

/* Contact webform: same look as D7 #webform-client-form-3 */
.webform-submission-contact-form { max-width: 700px; margin: 0 auto; }
.webform-submission-contact-form .form-item { margin-bottom: 10px; }
.webform-submission-contact-form label { width: 200px; display: inline-block; text-align: right; margin-right: 15px; }
.webform-submission-contact-form label.form-required::after { content: " *"; color: #b94a48; }
.webform-submission-contact-form input[type=text],
.webform-submission-contact-form input[type=email] { max-width: 250px; }
.webform-submission-contact-form .form-item-message { vertical-align: text-top; }
.webform-submission-contact-form .form-item-message label { margin-right: 14px; vertical-align: top; }
.webform-submission-contact-form .form-item-message > label + div,
.webform-submission-contact-form .form-item-message textarea { display: inline-block; max-width: 450px; vertical-align: top; }
.webform-submission-contact-form .form-actions { background: none; border: 0; padding: 0; margin: 0; }
.webform-submission-contact-form .form-actions .form-submit {
  margin: 20px auto 0; display: block;
  font-family: 'Oswald', sans-serif; background: #3a3a3a; color: #fff;
  box-shadow: none; text-shadow: none; text-transform: uppercase;
  border: 1px solid #3a3a3a; border-radius: 4px; padding: 4px 12px; font-size: 14px; line-height: 20px;
}
.webform-submission-contact-form .form-actions .form-submit:hover { background-color: #e5e5e5; color: #3a3a3a; }
#node-3 .webform-confirmation { text-align: center; }

/* Status messages (Bootstrap 2 alerts) */
.messages { margin: 20px 0; }

/* Local tasks (admin only) */
ul.tabs.primary { margin: 90px 0 0; }

@media (max-width: 768px) {
  .webform-submission-contact-form label { width: 100%; text-align: left; }
}

/* Image CAPTCHA: stacked layout like the D7 form (image, label, input, help) */
.webform-submission-contact-form .captcha label { width: auto; display: block; text-align: left; margin: 6px 0 4px; }
.webform-submission-contact-form .captcha .form-item { margin-bottom: 4px; }
.webform-submission-contact-form .captcha img { display: block; }