/**
 * Compatibility fixes: D11 markup differences vs the original D7 CSS.
 * Loaded after the d7-aggregate-*.css files.
 */

/* D7 put .form-required on the asterisk <span> only; D11 puts it on the
   whole <label>, so the aggregate rule ".form-required{color:#f00}" painted
   entire labels red. Restore the normal label color and re-add the D7-style
   asterisk. */
label.form-required,
label.js-form-required {
  color: inherit;
}
label.form-required::after,
label.js-form-required::after {
  content: " *";
  color: #f00;
}

/* D7 user-login block order: name, password, links, then the Log in button.
   In D11 the links list sits OUTSIDE the form after the actions - flatten the
   form with display:contents and reorder everything within the block content. */
#block-user-login .middle .content {
  display: flex;
  flex-direction: column;
}
#block-user-login .middle .content form {
  display: contents;
}
#block-user-login form .form-item-name { order: 1; }
#block-user-login form .form-item-pass { order: 2; }
#block-user-login .middle .content .item-list,
#block-user-login .middle .content ul {
  order: 3;
  list-style: none;
  margin: 0 0 0.75em 1em;
  padding: 0;
}
#block-user-login .middle .content ul li {
  list-style: none;
  margin: 0 0 0.25em 0.5em;
}
#block-user-login form .form-actions { order: 4; }

/* The D7 contact form had no Preview button. */
.contact-message-form #edit-preview {
  display: none;
}

/* D11 renders status messages with .messages--* classes; map them onto the
   original D7 message styling (colors/icons from system.messages.css). */
div.messages--status,
div.messages--warning,
div.messages--error {
  background-position: 8px 8px;
  background-repeat: no-repeat;
  border: 1px solid;
  margin: 6px 0;
  padding: 10px 10px 10px 50px;
}
div.messages--status {
  background-image: url(/misc/message-24-ok.png);
  border-color: #be7;
  background-color: #f8fff0;
  color: #234600;
}
div.messages--warning {
  background-image: url(/misc/message-24-warning.png);
  border-color: #ed5;
  background-color: #fffce5;
  color: #840;
}
div.messages--error {
  background-image: url(/misc/message-24-error.png);
  border-color: #ed541d;
  background-color: #fef5f1;
  color: #8c2e0b;
}