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

/* D7 put .form-required on the asterisk <span>; D11 puts it on <label>. */
label.form-required,
label.js-form-required {
  color: inherit;
}
label.form-required::after,
label.js-form-required::after {
  content: " *";
  color: #f00;
}

/* D7 login block: the links live INSIDE the form (added by
   wegocertify_legacy_form_user_login_form_alter as div.item-list, exactly the
   D7 markup). Hide D11's own duplicate list rendered after the form. */
#block-user-login .content > ul,
#block-user-login .content > .item-list:not(form .item-list) { display: none; }
/* Exact D7 metrics: ul padding-left 20px, li 21px (line-height 1.62). */
#block-user-login form .item-list { margin: 0; padding: 0; }
#block-user-login form .item-list ul { margin: 0; padding: 0 0 0 20px; list-style: disc; }
#block-user-login form .item-list li { margin: 0; padding: 0; line-height: 21px; }

/* D7: "footer{clear:both}" - the empty node footer clears floats and keeps
   the last child's bottom margin inside the article (D7 metrics). */
article.node > footer { clear: both; display: block; }

/* D7 #content contained floated media via the node's .content clearfix,
   NOT via the field item (the float must keep flowing past paragraphs AND
   past a following webform - so no clearfix on the body field itself). */
#post-content .node-page::after { content: ""; display: table; clear: both; }

/* D11 status messages -> D7 look. */
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; }

/* D7 media_wysiwyg emitted inline styles on <img> (float/margin). D11's
   filter_html strips inline style, so reproduce them by class. Values are the
   ones stored in the D7 media tokens of this site. */
/* D7 put "float:left; margin:10px" on the <img> itself (inline style); the
   .media wrapper stayed in normal flow with zero height. Reproduce exactly. */
.media-float-left img.media-element  { float: left;  margin: 10px; }
.media-float-right img.media-element { float: right; margin: 10px; }
/* Per-image margins from the D7 tokens (class added at migration time). */
.media-margin-10px img.media-element      { margin: 10px; }
.media-margin-10px-20px img.media-element { margin: 10px 20px; }
/* The empty leading <p> before the media div is restored in
   wegocertify_legacy_preprocess_field() (D7 markup); no extra offset here.
   Make sure the theme's own p:empty rule (if any) keeps its margin. */
.field-name-body p:empty { display: block; margin: 0 0 18px; }

/* D7 exposed filters: widgets float left in one row, 6.5px 13px 0 0 padding. */
.views-exposed-form .views-exposed-widgets { display: block; }
.views-exposed-form .views-exposed-widgets > .form-item,
.views-exposed-form .views-exposed-widgets > .form-actions,
.views-exposed-form .views-exposed-widgets > .form-actions > * {
  float: left; padding: 6.5px 13px 0 0; margin: 0;
}
.views-exposed-form .form-actions { padding: 0; }
.views-exposed-form .views-exposed-widgets > .form-item label { display: block; font-weight: bold; }
/* D7: each button sat in its own .views-exposed-widget (59px tall = 6.5px
   padding + 1.6em margin + 33px button); buttons were 33px like the theme's. */
.views-exposed-form .form-actions input[type=submit] { margin-top: 1.6em; height: 33px; padding: 0.4em 1em; }
.views-exposed-form .views-exposed-widgets::after { content: ""; display: table; clear: both; }

/* D7 views summary list metrics (item-list ul: no margin, 20px indent). */
.view .item-list ul.views-summary { margin: 0; padding: 0 0 0 20px; }
.view .item-list ul.views-summary li { margin: 0; padding: 0; }

/* Webform (D11) inside D7 layout: D7 webform metrics. */
.webform-submission-form .form-item,
.webform-submission-form .js-form-item { margin-top: 2px; margin-bottom: 13px; }
.webform-submission-form .form-item .form-item { margin-top: 2px; }
/* D7 textareas spanned the full content width (cols=60 -> 100% via CSS)
   and had a resize grippie bar (9px) below. */
.webform-submission-form textarea { width: 100%; box-sizing: border-box; display: block; }
/* D11 wraps the textarea in a bare <div>; D7's .form-textarea-wrapper had a
   9px resize grippie under the textarea. Reproduce it (D7: element 153px =
   textarea 101 + grippie 9 + description 21 + spacing). */
.webform-submission-form .webform-type-textarea > div:not(.description):not(.webform-element-description)::after {
  content: ""; display: block; height: 9px; background: #eee url(/misc/grippie.png) no-repeat center 2px;
  border: 1px solid #ddd; border-top: 0; cursor: s-resize; box-sizing: border-box;
}
.webform-submission-form .webform-type-textarea > div:not(.description):not(.webform-element-description) { margin-bottom: 1px; } /* D7 wrapper 4px + subpixel */
/* D7 file element: exactly 33px (label + input inline), 13px apart
   (D7 form-item margins 2/13 -> 46px pitch). */
.webform-submission-form .form-type-managed-file { height: 33px; line-height: 33px; box-sizing: content-box; margin: 0 0 13px; }
.webform-submission-form .form-type-managed-file .form-managed-file { line-height: normal; }
/* D7 printed the fieldset description ABOVE the fields (fieldset-description
   18px, margin 5px 0 13px). Moved up in the DOM by
   wegocertify_legacy_form_webform_submission_form_alter(); style it here. */
.webform-submission-form fieldset .fieldset-wrapper > .fieldset-description,
.webform-submission-form fieldset .fieldset-wrapper > .description:first-child,
.webform-submission-form fieldset .fieldset-wrapper > .webform-element-description:first-child { margin: 5px 0 13px; line-height: 18px; }
/* D7 file components: plain <input type=file>, no upload-limits description,
   no separate Upload button (auto-upload); element 33px tall. */
.webform-submission-form .form-type-managed-file .description,
.webform-submission-form .form-type-managed-file .webform-element-description,
.webform-submission-form .form-type-managed-file .form-submit { display: none; }
.webform-submission-form .form-type-managed-file .form-managed-file { display: inline-block; vertical-align: middle; }
/* D7 fieldset spacing (fieldset also carries .form-item in D11 - override). */
.webform-submission-form fieldset,
.webform-submission-form fieldset.form-item,
.webform-submission-form fieldset.js-form-item { margin: 10px 0 32px; padding: 0 0 10px; }
/* D11 renders type=email/number 2px taller than text; match D7 (24px). */
.webform-submission-form input[type=email],
.webform-submission-form input[type=number] { height: 24px; box-sizing: border-box; padding-top: 1px; padding-bottom: 1px; }