/* Local Joomla 6 compatibility fixes for the restored Helix3 theme. */

/* Joomla 6 Smart Search uses a different markup from Joomla 3.
   Keep its submit action visible as an icon within the existing field. */
.mod-finder.js-finder-searchform .mod-finder__search {
  position: relative;
}

.mod-finder.js-finder-searchform .js-finder-search-query {
  padding-right: 42px;
}

.mod-finder.js-finder-searchform .mod-finder__search > .btn {
  position: absolute;
  top: 0;
  right: 0;
  display: block !important;
  width: 38px;
  height: 38px;
  padding: 0;
  color: #1e1e1e;
  background: transparent;
  border: 0;
  font-size: 0;
}

.mod-finder.js-finder-searchform .mod-finder__search > .btn::before {
  content: "\f002";
  font-family: "Font Awesome 6 Free", "FontAwesome";
  font-size: 14px;
  font-weight: 900;
}

/* Keep the review call-to-action centred below the review cards. */
#sp-bottom1 .readallreviews .sp-module-content {
  display: flex;
  justify-content: center;
}

#sp-bottom1 .readallreviews .mod-custom {
  flex: 0 0 auto;
}

/* Joomla 6 no longer adds the legacy mod_custom inner class suffixes.
   Mirror the original footer rules on the current markup. */
.sp-module.footer1_text .mod-custom {
  text-align: left;
  color: #171717;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 25.6px;
}

.sp-module.footer_logo .mod-custom img {
  object-fit: contain;
  width: 213.59px !important;
}

.sp-module.logo_greenweb .mod-custom img {
  width: 100px;
}

.sp-module.footer_contacts .mod-custom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.sp-module.footer_contacts .mod-custom > div {
  display: flex;
  margin-bottom: 10px;
}

.sp-module.footer_contacts .mod-custom span,
.sp-module.footer_contacts .mod-custom a {
  display: flex;
  align-items: center;
  text-align: left;
  color: #171717 !important;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
}

.sp-module.footer_contacts .mod-custom i {
  display: inline-block;
  width: 25px;
  height: 25px;
  margin-right: 15px;
  color: #c83736;
  font-size: 25px;
}

/* The local build includes Font Awesome Free, while the restored footer
   markup still carries the Pro/Sharp weight classes from production.  Keep
   the same glyphs using the available Free font instead of Open Sans. */
.sp-module.footer_contacts .mod-custom i.fa-location-dot,
.sp-module.footer_contacts .mod-custom i.fa-envelope,
.sp-module.footer_contacts .mod-custom i.fa-clock,
.sp-module.footer_contacts .mod-custom i.fa-phone-volume {
  font-family: "Font Awesome 6 Free", "FontAwesome" !important;
  font-style: normal;
  font-weight: 900 !important;
}

.sp-module.footer_map .mod-custom iframe {
  width: 520px !important;
  height: 300px !important;
  border: 1px solid #c83736 !important;
}

/* BreezingForms CAPTCHA: keep it visually aligned with the restored form. */
.bfQuickMode .bfElemWrap:has(> .bfCaptcha) {
  width: 240px;
  min-width: 240px;
  height: auto !important;
  min-height: 180px;
  padding: 5px;
}

.bfQuickMode .bfElemWrap:has(> .bfCaptcha) > label {
  display: block !important;
  float: none !important;
  width: auto !important;
  margin: 0 0 6px !important;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.38);
}

.bfQuickMode .bfElemWrap:has(> .bfCaptcha) .bfCaptcha {
  display: block;
  float: none;
  width: 230px;
  max-width: 100%;
  height: auto;
  margin: 0;
  white-space: nowrap;
}

.bfQuickMode .bfElemWrap:has(> .bfCaptcha) .bfCaptcha > br {
  display: none;
}

.bfQuickMode .bfElemWrap:has(> .bfCaptcha) .bfCaptcha .ff_capimg {
  display: block;
  width: 230px !important;
  max-width: 100%;
  height: 80px !important;
  margin: 0 0 8px !important;
  border: 1px solid rgba(200, 55, 54, 0.35);
  border-radius: 4px;
  box-sizing: border-box;
  object-fit: cover;
}

.bfQuickMode .bfElemWrap:has(> .bfCaptcha) .bfCaptcha #bfCaptchaEntry {
  display: inline-block !important;
  width: 188px !important;
  min-width: 0 !important;
  max-width: 188px !important;
  height: 38px;
  margin: 0 2px 0 0;
  float: none !important;
  padding: 6px 12px;
  border: 1px solid #d4d4d4;
  border-radius: 3px;
  box-sizing: border-box;
  vertical-align: top;
}

.bfQuickMode .bfElemWrap:has(> .bfCaptcha) .bfCaptcha #bfCaptchaEntry:focus {
  border-color: #c83736;
  box-shadow: 0 0 0 2px rgba(200, 55, 54, 0.12);
  outline: none;
}

.bfQuickMode .bfElemWrap:has(> .bfCaptcha) .bfCaptcha > a.ff_elem {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 38px;
  margin: 0;
  border: 1px solid #d4d4d4;
  border-radius: 3px;
  background: #fff;
  box-sizing: border-box;
  vertical-align: top;
}

.bfQuickMode .bfElemWrap:has(> .bfCaptcha) .bfCaptcha > a.ff_elem:hover {
  border-color: #c83736;
  background: #fff7f7;
}

.bfQuickMode .bfElemWrap:has(> .bfCaptcha) .bfCaptcha > a.ff_elem img {
  width: 15px;
  height: 18px;
  opacity: 0.72;
}

/* The restored Helix menu inherited the generic module arrow on every
   off-canvas link.  The toggler itself is the only indicator needed for
   items that actually contain a submenu. */
@media (max-width: 991.98px) {
  .offcanvas-menu .sandwich_mob ul.nav li > a::before {
    content: none !important;
    display: none !important;
  }

  .offcanvas-menu .sandwich_mob .offcanvas-menu-toggler {
    display: inline-block;
  }
}

/* Joomla 6 renamed the language list class, so the legacy Helix rule that
   hid the generic module arrow no longer matches the desktop language links. */
.sp-module.header_language .mod-languages__list li > a::before,
.sp-module.header_language_mob .mod-languages__list li > a::before {
  content: none !important;
  display: none !important;
}

/* Joomla 6 adds an accessible language-list label.  The legacy template did
   not ship the helper utility, so make it truly visually hidden while
   retaining the label for screen readers. */
.sp-module.header_language p.visually-hidden,
.sp-module.header_language_mob p.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* The original header uses Font Awesome icons.  The restored module still
   carries the old duotone class, but the local template only ships the Free
   font, which otherwise renders the phone as a missing-glyph square. */
.header-roof-phone-icon::before {
  content: "\f095" !important;
  font-family: "Font Awesome 6 Free", "FontAwesome" !important;
  font-size: 16px;
  font-style: normal;
  font-weight: 900 !important;
  line-height: 16px;
}

.header-roof-adres-icon::before {
  content: "\f3c5" !important;
  font-family: "Font Awesome 6 Free", "FontAwesome" !important;
  font-size: 16px;
  font-style: normal;
  font-weight: 900 !important;
  line-height: 16px;
}

/* Joomla 6 keeps the legacy search.svg in the input and also exposes a
   submit button.  Keep the original single loupe and hide the duplicate
   button in the header search modules. */
.sp-module.smartsearch .mod-finder__search > .btn,
.sp-module.smartsearch_mob .mod-finder__search > .btn {
  display: none !important;
}

@media (max-width: 992px) {
  .sp-module.footer_logo .mod-custom {
    text-align: center;
  }

  .sp-module.footer_logo .mod-custom img {
    display: inline-block;
  }

  .sp-module.footer_contacts .mod-custom {
    max-width: 470px;
    padding: 0 50px 25px;
  }

  .sp-module.footer_contacts .mod-custom > div {
    align-items: center;
    justify-content: center;
  }

  .sp-module.footer_map {
    padding: 0 31px;
  }

  .sp-module.footer_map .mod-custom iframe {
    width: 100% !important;
    height: 266px !important;
  }
}

@media (max-width: 600px) {
  .bfQuickMode .bfElemWrap:has(> .bfCaptcha) {
    width: 100%;
    min-width: 0;
    max-width: 350px;
  }

  .bfQuickMode .bfElemWrap:has(> .bfCaptcha) .bfCaptcha {
    width: 100%;
  }

  .bfQuickMode .bfElemWrap:has(> .bfCaptcha) .bfCaptcha #bfCaptchaEntry {
    width: calc(100% - 40px) !important;
    min-width: 0 !important;
    max-width: calc(100% - 40px) !important;
  }
}