/**
 * Compatibility fixes for D11 markup vs the original D7 CSS cascade
 * (bootstrap 3.3.7 + we_get_visas style.css in the d7-aggregate-*.css files).
 * Loaded after the aggregates.
 */

/* --- D11 utility classes the D7 aggregates do not define. ---
   D7 used .element-invisible (in d7-aggregate-1.css); D11 core emits
   .visually-hidden / .hidden and no core CSS is loaded by this standalone
   theme. Same rules as core system.base. */
.visually-hidden {
  position: absolute !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  word-wrap: normal;
}
.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  position: static !important;
  overflow: visible;
  clip: auto;
  height: auto;
  width: auto;
}
.hidden {
  display: none;
}

/* D7 put .form-required on an asterisk <span> inside the label; D11 puts the
   class on the <label>/<legend> itself. Reproduce the trailing " *"
   (uncolored, as in D7 - system.theme.css was not in the D7 aggregates). */
label.form-required,
label.js-form-required,
legend.form-required .fieldset-legend,
.fieldset-legend.form-required {
  color: inherit;
}
label.form-required::after,
label.js-form-required::after,
legend.form-required .fieldset-legend::after,
.fieldset-legend.form-required::after,
.form-required > .fieldset-legend::after {
  content: " *";
}

/* --- Webform radios: D11 renders them as fieldset+legend, D7 as a plain
   label + div.form-radios. Make the fieldset invisible and lay the options
   out like bootstrap's .radio blocks. --- */
.webform-submission-form fieldset.radios--wrapper,
.webform-submission-form fieldset.js-webform-radios,
.webform-submission-form fieldset.checkboxes--wrapper {
  border: 0;
  margin: 0 0 15px;
  padding: 0;
  min-width: 0;
}
.webform-submission-form fieldset.radios--wrapper > legend,
.webform-submission-form fieldset.js-webform-radios > legend,
.webform-submission-form fieldset.checkboxes--wrapper > legend {
  display: block;
  width: auto;
  border: 0;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: 700;
  max-width: none;
  margin-bottom: 5px;
  line-height: inherit;
  color: inherit;
}
/* One option row = bootstrap .radio/.checkbox metrics. */
.form-type-radio,
.js-form-type-radio,
.form-type-checkbox,
.js-form-type-checkbox {
  position: relative;
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
  padding-left: 20px;
}
.form-type-radio input.form-radio,
.js-form-type-radio input.form-radio,
.form-type-checkbox input.form-checkbox,
.js-form-type-checkbox input.form-checkbox {
  position: absolute;
  margin-left: -20px;
  margin-top: 4px;
}
.form-type-radio label.option,
.js-form-type-radio label.option,
.form-type-checkbox label.option,
.js-form-type-checkbox label.option {
  font-weight: 400;
  margin-bottom: 0;
  cursor: pointer;
}
/* The option label must not get the required asterisk repeated. */
.form-type-radio label.option::after,
.form-type-checkbox label.option::after {
  content: none;
}

/* D7 form-actions wrapper carried .form-group (15px bottom margin). */
.form-actions {
  margin-bottom: 15px;
}

/* D11 renders type=email/number slightly taller than text inputs in some
   browsers; .form-control (added in preprocess) normalizes, keep box sizing
   consistent for the PayPal image submit too. */
input.form-image {
  border: 0;
  padding: 0;
  background: transparent;
}

/* Webform element descriptions: approximate the D7 .description look
   (help-block gray) since D11 emits .webform-element-description. */
.webform-element-description,
.form-item .description {
  display: block;
  margin-top: 5px;
  margin-bottom: 10px;
  color: #737373;
}

/* --- D11 status messages: neutral D7-ish look (no /misc icons available;
   colors from the D7 core palette). --- */
div.messages--status,
div.messages--warning,
div.messages--error {
  border: 1px solid;
  margin: 6px 0;
  padding: 10px;
}
div.messages--status { border-color: #be7; background-color: #f8fff0; color: #234600; }
div.messages--warning { border-color: #ed5; background-color: #fffce5; color: #840; }
div.messages--error { border-color: #ed541d; background-color: #fef5f1; color: #8c2e0b; }

/* D11 search results page: D7 metrics for ol.search-results (the bootstrap
   CSS resets list padding). */
ol.search-results {
  padding-left: 0;
  list-style: none;
}
ol.search-results .search-snippet-info {
  padding-left: 1em;
}

/* D11 pager -> keep it unobtrusive inside the D7 cascade (bootstrap styles
   ul.pagination; core emits ul.pager__items). */
ul.pager__items {
  display: inline-block;
  padding-left: 0;
  margin: 20px 0;
  border-radius: 4px;
  list-style: none;
}
ul.pager__items > li {
  display: inline-block;
  padding: 6px 12px;
}

/* D7 ctools jump-menu.js hid the empty Go button on load
   ($('.ctools-jump-menu-hide').hide()); no ctools JS ships in D11, so hide
   it statically - the select redirects via its own onchange. */
.ctools-jump-menu-hide {
  display: none;
}

/* Defensive: if a "Main navigation" block is ever placed in a region it
   would duplicate the hardcoded navbar menu - hide it. */
#block-menu-menu-main,
nav#block-wegetvisas-legacy-main-menu {
  display: none;
}

/* D7: the trailing .form-actions margin collapsed out of the section height
   on user/login; D11 clearfix keeps it - drop it. */
.user-login-form .form-actions { margin-bottom: 0; }

/* D7 webform radios: plain div.form-item + label + .form-radios (87px total);
   D11 wraps them in a fieldset/legend that adds ~15px - flatten it. */
.webform-submission-form fieldset.radios--wrapper { margin: 0 0 15px; padding: 0; border: 0; min-width: 0; }
.webform-submission-form fieldset.radios--wrapper > legend { display: block; width: auto; margin: 0 0 5px; padding: 0; border: 0; float: none; font-size: inherit; }
.webform-submission-form fieldset.radios--wrapper .fieldset-wrapper { margin: 0; padding: 0; }
.webform-submission-form fieldset.radios--wrapper .fieldset-wrapper .form-item { margin-top: 0; margin-bottom: 4px; }
.webform-submission-form fieldset.radios--wrapper .fieldset-wrapper .form-item:last-child { margin-bottom: 0; }

/* D7 resizable textareas on the quote form had a 9px "grippie" bar below
   (misc/grippie.png). Reproduce it visually. */
.webform-submission-webform-67-form .js-form-type-textarea textarea { margin-bottom: 0; resize: vertical; }
.webform-submission-webform-67-form .js-form-type-textarea::after { content: ""; display: block; width: 100%; height: 9px; background: #eeeeee url(/misc/grippie.png) no-repeat center 2px; border: 1px solid #ddd; border-top: 0; cursor: s-resize; box-sizing: border-box; }
/* D7: the form's trailing .form-actions margin collapsed out of the wrapper
   height (same as user/login); apply to webforms too. */
.webform-submission-webform-67-form > .form-actions { margin-bottom: 0; }