/* ==========================================================================
   seo-fixes.css
   Visual-preservation layer for semantic heading corrections.

   The theme sizes headings by TAG (h1 56px ... h5 15px, h6 11px), so
   re-tagging an element for a correct document outline would change how it
   looks. Each rule below restores the ORIGINAL tag's metrics to the element
   that was re-tagged, so the rendered page is unchanged.

   Load order: after libs.css and theme.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero slide heading: <h1 class="heading-title-bold"> -> <h2 ... seo-as-h1>
      Only ONE h1 per page is allowed; slide 2+ of the hero carousel become h2.
      .heading-title-bold already sets font-size with !important, so size is
      unaffected. Colour and the slider transition were tag-bound - mirror them.
   -------------------------------------------------------------------------- */
.bg-dark h2.seo-as-h1,
.bg-graydark h2.seo-as-h1,
.bg-primary h2.seo-as-h1,
.image-bg h2.seo-as-h1,
.color-white h2.seo-as-h1 { color: #fff; }

.image-bg.bg-light h2.seo-as-h1 { color: #28262b; }

.main-slider h2.seo-as-h1 {
  -webkit-transition: all .6s ease-in-out 400ms;
  -moz-transition: all .6s ease-in-out 400ms;
  -o-transition: all .6s ease-in-out 400ms;
  transition: all .6s ease-in-out 400ms;
}
.main-slider .item-content.slide-up h2.seo-as-h1 {
  opacity: 0;
  -webkit-transform: translate3d(0, 80px, 0);
  -moz-transform: translate3d(0, 80px, 0);
  transform: translate3d(0, 80px, 0);
}
.main-slider .item-content.zoom-out h2.seo-as-h1 {
  opacity: 0;
  -webkit-transform: scale3d(.3, .3, .3);
  transform: scale3d(.3, .3, .3);
}
.main-slider .item-content.zoom-in h2.seo-as-h1 {
  opacity: 0;
  -webkit-transform: scale3d(1.7, 1.7, 1.7);
  transform: scale3d(1.7, 1.7, 1.7);
}
.main-slider .active .item-content.slide-up h2.seo-as-h1 {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.main-slider .active .item-content.zoom-out h2.seo-as-h1,
.main-slider .active .item-content.zoom-in h2.seo-as-h1 {
  opacity: 1;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
}

/* --------------------------------------------------------------------------
   2. Section headings: <h5 class="widgettitle"> -> <h2>/<h3 ... seo-as-h5>
      and the bare <h5> sub-headings on the app pages.

      SPECIFICITY NOTE: the class is repeated (.seo-as-h5.seo-as-h5) purely to
      raise specificity to (0,2,0). The theme carries rules such as
      `.md-content h1, .md-content h2, .md-content h3, .md-content h4` at
      (0,1,1) that never applied to an <h5> but DO apply once the element
      becomes an <h2> - inside the "Free Quote" modal that turned a 15px
      heading into 49px. Doubling the class beats those without !important.
      Margin utilities are escalated one step further so they still win.
   -------------------------------------------------------------------------- */
.seo-as-h5.seo-as-h5 {
  font-size: 15px;
  line-height: 24px;
  font-weight: 400;
  font-family: Montserrat, Arial, Helvetica, sans-serif;
  margin-top: 0;
}
/* Only the bare (non-.widgettitle) conversions need the h5 bottom margin back;
   .widgettitle supplies its own 30px, and .mb0/.mb8 must keep winning. */
.seo-as-h5.seo-as-h5:not(.widgettitle) { margin-bottom: 12px; }
.seo-as-h5.seo-as-h5.mt24 { margin-top: 24px; }
.seo-as-h5.seo-as-h5.mt50 { margin-top: 50px; }
/* .bg-dark h1..h6 { color:#fff } was tag-bound. */
.bg-dark .seo-as-h5,
.bg-graydark .seo-as-h5,
.bg-primary .seo-as-h5,
.image-bg .seo-as-h5,
.color-white .seo-as-h5 { color: #fff; }

/* --------------------------------------------------------------------------
   3. Footer copyright: <h5 class="fade-75"> -> <p>
      A copyright notice is not a heading; it was adding a spurious entry to
      every page outline. Measured: it renders 15px/24px, not the 11px that
      `.footer-basic h5` suggests - so do not "restore" 11px here.
   -------------------------------------------------------------------------- */
p.seo-copy {
  font-family: Montserrat, Arial, Helvetica, sans-serif;
  text-rendering: optimizeLegibility;
  margin-bottom: 12px;
}
/* `.footer-basic h5 { font-size:11px }` lives inside @media (max-width:480px),
   which is why the copyright is 15px on desktop but 11px on a phone. Mirror
   the media query exactly rather than the rule alone. */
@media (max-width: 480px) {
  .footer-basic p.seo-copy { font-size: 11px; }
}

/* --------------------------------------------------------------------------
   4. Listing titles / team names: <h4> -> <h2>/<h3 ... seo-as-h4>
      Theme h4 is 24px/32px desktop, 18px/26px at <=767px.
      .mx-text sets font-size:20px!important and line-height:1.2 (= 24px),
      so it needs its own rule or the base line-height would win on order.
   -------------------------------------------------------------------------- */
.seo-as-h4.seo-as-h4 {
  font-size: 24px;
  line-height: 32px;
  margin-top: 0;
  margin-bottom: 15px;
}
.seo-as-h4.seo-as-h4.mx-text { line-height: 1.2; }
.seo-as-h4.seo-as-h4.mb8 { margin-bottom: 8px; }
@media all and (max-width: 767px) {
  .seo-as-h4.seo-as-h4 { font-size: 18px; line-height: 26px; }
  .seo-as-h4.seo-as-h4.mx-text { line-height: 1.2; }
}

/* --------------------------------------------------------------------------
   5. Grid categories: <h6> -> <h3>/<h4>, carrying the theme's own .h6 class.
      Stated at (0,1,1) so it also outranks `.md-content h2/h3/h4`.
      Weight is deliberately not set: the theme's shared
      `h1..h6 { font-weight:400 }` already applies to the new tag.
   -------------------------------------------------------------------------- */
h2.h6, h3.h6, h4.h6 {
  font-size: 11px;
  line-height: 20px;
  margin-top: 0;
}
@media all and (max-width: 767px) {
  h2.h6, h3.h6, h4.h6 { font-size: 12px; line-height: 24px; }
}

/* --------------------------------------------------------------------------
   6. Restore `.mb0` where a re-tagged element now collides with an
      !important theme rule.

      theme.css carries, inside @media (max-width:1024px) and (max-width:767px):
        .md-content h1, .md-content h2, .md-content h3, .md-content h4
          { margin-bottom: 20px/10px !important }
      That is !important at (0,1,1), so it outranks `.mb0 { ... !important }`
      at (0,1,0). An <h5> was never in that selector list, so .mb0 used to win.
      Stated at (0,3,0) !important so .mb0 keeps winning as it did before.
   -------------------------------------------------------------------------- */
.seo-as-h5.seo-as-h5.mb0 { margin-bottom: 0 !important; }
.seo-as-h4.seo-as-h4.mb0 { margin-bottom: 0 !important; }