/*
 * Upgrade compatibility overrides
 * --------------------------------
 * Restores the rendering of the live site (WP 5.3 / Salient 11 / WPBakery 6.1 /
 * Formidable 4.x) after upgrading to WP 7.1 / Salient 18 / WPBakery 8.7 /
 * Formidable 7. Loaded last (see functions.php) so it wins over theme/plugin CSS.
 */

/* Header: Salient 18 lets #logo grow to the image height (125px) and centres it
   in the 76px bar, pushing the logo up 24px. Salient 11 kept it at bar height. */
@media only screen and (min-width: 1001px) {
  #header-outer #top #logo {
    height: 100%;
  }
}

/* Mobile container widths: Salient 11 used fixed max-widths per breakpoint;
   Salient 18 uses a percentage (--mobile-container-width). */
@media only screen and (min-width: 690px) and (max-width: 999px) {
  body { --mobile-container-width: 600px; }
}
@media only screen and (max-width: 690px) {
  body { --mobile-container-width: 320px; }
}
@media only screen and (min-width: 480px) and (max-width: 690px) {
  body { --mobile-container-width: 420px; }
}
@media only screen and (max-width: 321px) {
  body { --mobile-container-width: 300px; }
}

/* Formidable 7 lays "left label" fields out as a 150px+auto grid; the footer
   form's fields have no labels, so the inputs shrank to 150px. */
.with_frm_style .frm_form_field.frm_left_container {
  display: block;
}

/* WPBakery 6.1 removed the bottom margin of the last element in a text block;
   Salient 18's trimmed WPBakery CSS dropped it, and WPBakery 8.7 removed the
   inner .wpb_wrapper from text blocks. */
.wpb_text_column.wpb_content_element > :last-child,
.wpb_text_column > .wpb_wrapper > :last-child {
  margin-bottom: 0;
}

/* Salient 18 dims links in light-text rows (e.g. "Hire Purchase Solutions"). */
.span_12.light .wpb_text_column a:not(:hover) {
  opacity: 1;
}

/* Recent-posts tile titles on phones (Salient 11 responsive.css). */
@media only screen and (max-width: 690px) {
  .container .post .post-header h3 {
    font-size: 18px;
    line-height: 28px;
  }
}

/* Responsive heading sizes: Salient 18 rounds calculated px sizes up (ceil),
   Salient 11 output the exact values. Generated from a diff of the live and
   local salient-dynamic-styles.css; values are the live ones. */
  .toggle h3 a { font-size: 18px; line-height: 24px; }
@media only screen and (max-width:1300px) and (min-width:1000px) {
  .nectar-post-grid[data-columns="2"][data-masonry="yes"] > div:nth-of-type(3n + 1) h3 { font-size: 21.42px; }
  .row .col h3,
  .row .span_2 h3,
  .row .span_3 h3,
  .row .span_4 h3,
  .row .vc_col-sm-2 h3,
  .row .vc_col-sm-3 h3,
  .row .vc_col-sm-4 h3,
  body h3 { font-size: 15.3px; line-height: 20.4px; }
  .single-product div.product h1.product_title,
  body h2 { line-height: 27.2px; }
}
@media only screen and (max-width:690px) {
  #page-header-bg .span_6 span.subheader { font-size: 15px !important; }
  .full-width-content .nectar-recent-posts-slider .recent-post-container .inner-wrap h2,
  body .row .col.section-title h1,
  body h1,
  html body .row .col.section-title.span_12 h1 { font-size: 15.6px; line-height: 23.4px; }
  .row .col h3,
  .row .span_2 h3,
  .row .span_3 h3,
  .row .span_4 h3,
  .row .vc_col-sm-2 h3,
  .row .vc_col-sm-3 h3,
  .row .vc_col-sm-4 h3,
  body h3 { font-size: 14.4px; line-height: 19.2px; }
  .row .col h4,
  body h4 { font-size: 16.2px; line-height: 21.6px; }
  .wpb_wrapper h1.vc_custom_heading { font-size: 15.6px !important; line-height: 23.4px !important; }
  .wpb_wrapper h3.vc_custom_heading { font-size: 14.4px !important; line-height: 19.2px !important; }
}
@media only screen and (min-width:1000px) {
  .ascend .comments-section .comment-wrap.full-width-section > h3#comments,
  .blog_next_prev_buttons[data-post-header-style="default_minimal"] .col h3 { font-size: 30.6px; line-height: 38.6px; }
}
@media only screen and (min-width:1300px) {
  .nectar-post-grid[data-columns="2"][data-masonry="yes"] > div:nth-of-type(3n + 1) h3 { font-size: 25.2px; }
}
@media only screen and (min-width:1300px) and (max-width:1500px) {
  body .portfolio-items.constrain-max-cols.masonry-items .col.elastic-portfolio-item h3 { font-size: 15.3px; line-height: 20.4px; }
}

/* Client logo carousel (footer): on live the carousel script never initialises,
   so logos float in rows. Salient 18 makes the un-initialised carousel a
   non-wrapping flex row, squashing all logos onto one line. */
.row.carousel.clients:not(.finished-loading) {
  display: block;
}
body .carousel-wrap {
  margin: 0 -10px;
}

/* Salient 18 removes the 15px bottom margin of an image that is the last
   element in a column; Salient 11 kept it (product tiles, hero images). */
.row .wpb_wrapper > .img-with-aniamtion-wrap:last-child .hover-wrap {
  margin-bottom: 15px;
}

/* Header search icon: Salient 11 rendered icon-font spans inline-block,
   vertically centred, 20px line-height; Salient 18 renders them inline at 21px. */
#header-outer #top nav ul #search-btn a,
#header-outer #top nav ul #search-btn a span {
  line-height: 20px;
  height: 20px;
}
#header-outer #top nav ul #search-btn a {
  text-align: left;
}
#header-outer #top nav ul #search-btn a span[class*="icon-"] {
  display: inline-block;
  position: relative;
  vertical-align: middle;
}
@media only screen and (max-width: 999px) {
  #header-outer #top .mobile-search {
    padding: 0 8px;
  }
}

/* Single posts with a background header: Salient 11 used 60px top padding
   (Salient 18: 80px) and nudged the title down 3px. */
body.single-post.material[data-bg-header="true"] .container-wrap {
  padding-top: 60px !important;
}
.row .col.section-title h1 {
  top: 3px;
}

/* Icon element (nectar_icon): Salient 11 kept the generic 24px block margin
   and the Font Awesome -2px nudge; Salient 18 zeroes both. */
.wpb_wrapper > .nectar_icon_wrap {
  margin-bottom: 24px;
}
/* ...except inside tabs, where Salient 11's "body .tabbed div" zeroed it. */
body .tabbed .wpb_wrapper > .nectar_icon_wrap {
  margin-bottom: 0;
}
.nectar_icon_wrap i[class*="fa-"] {
  top: -2px;
}

/* Salient 11 base heading font (theme typography options override it with
   more specific selectors); without it widget titles etc. fall back to Roboto. */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Open Sans';
}
#sidebar h4 {
  font-family: 'Open Sans';
}

/* Masonry blog archives on phones (Salient 11). */
@media only screen and (max-width: 690px) {
  #ajax-content-wrap .post-area.masonry.span_9 {
    margin-bottom: 90px;
  }
}

/* Image element max-width (50% / 75%): Salient 11 limited the <img>; Salient 18
   limits a shrink-wrapped (inline-block) .inner, which makes these images
   smaller. #ajax-content-wrap beats Salient's per-element inline styles. */
#ajax-content-wrap .img-with-aniamtion-wrap[data-max-width="50%"] .inner,
#ajax-content-wrap .img-with-aniamtion-wrap[data-max-width="75%"] .inner {
  display: block;
  max-width: none;
}
#ajax-content-wrap .img-with-aniamtion-wrap[data-max-width="50%"] img {
  max-width: 50%;
  width: auto;
}
#ajax-content-wrap .img-with-aniamtion-wrap[data-max-width="75%"] img {
  max-width: 75%;
  width: auto;
}

/* Post/page header titles on phones: Salient 18 merged these selectors into
   the generic 16px h1 rule; Salient 11 kept them at 24px/30px. */
@media only screen and (max-width: 690px) {
  #page-header-bg .span_6 h1,
  body.single.single-post .row .col.section-title.span_12 h1 {
    font-size: 24px;
    line-height: 30px;
  }
}

/* Table cells: Salient 11 used 13px. */
body:not(.woocommerce-cart) .main-content td {
  font-size: 13px;
}

/* Salient 11 default font (Open Sans) on elements Salient 18 no longer
   assigns it to (buttons, widget titles, pagination, ...). Selectors are the
   live ones whose final font-family was Open Sans. */
dt,
blockquote,
#top #logo,
body:not([data-header-format="left-header"]) #top nav >ul >.megamenu >ul >li >a,
body:not([data-header-format="left-header"]) #top nav >ul >.megamenu >ul >li >ul >.has-ul >a,
body .carousel-wrap[data-full-width="true"] .carousel-heading h2,
.nectar-button,
.nectar-3d-transparent-button,
.text_on_hover.product .add_to_cart_button,
.text_on_hover.product a.added_to_cart,
body .vc_text_separator div,
.nectar-milestone .number,
body .vc_pie_chart .vc_pie_chart_value,
body .vc_pie_chart .wpb_pie_chart_heading,
.row .col.section-title h1,
.row .col.section-title span,
#page-header-bg .subheader,
.search .row .col.section-title h1,
.post.masonry-blog-item .post-meta .date span,
#infscr-loading,
#infscr-loading div,
#pagination span,
#pagination a,
#pagination .next.inactive,
#pagination .prev.inactive,
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce .container-wrap nav.woocommerce-pagination ul li span,
.container-wrap nav.woocommerce-pagination ul li span,
.post-area.standard-minimal .post .post-meta .date,
.post-area.standard-minimal .post .more-link span,
#footer-outer .widget h4,
.text-on-hover-wrap .categories a,
#slide-out-widget-area .inner .off-canvas-menu-container li a,
body[data-full-width-header="false"] #slide-out-widget-area .slide_out_area_close,
#slide-out-widget-area:not(.fullscreen):not(.fullscreen-alt) .menuwrapper li small,
#call-to-action,
#call-to-action .container a,
.comment-list .comment-author,
.comment-list .pingback .comment-body > a,
input[type=submit],
button[type=submit],
input[type="button"],
select,
body .gform_wrapper .top_label .gfield_label,
body.ascend #header-outer .cart-contents .cart-wrap span,
#slide-out-widget-area[class*="slide-out-from-right"] .off-canvas-menu-container li a {
  font-family: 'Open Sans';
}

/* Divs inside text blocks: on live they matched ".wpb_wrapper > div" (24px)
   through WPBakery 6.1's inner .wpb_wrapper, which 8.7 removed. Kept at low
   specificity so the last-child rule above and "body .tabbed div" still win. */
.wpb_text_column > div {
  margin-bottom: 24px;
}

/* Page/post header titles: Salient 11 letter-spacing. */
.row .col.section-title h1,
.row .col.section-title h2 {
  letter-spacing: -1px;
}