/*
 * Free Trial Templates — Template 2 (slug: template-1)
 * Loaded on the frontend only when Template 2 (template-1) is active.
 * Scope rules with: body.bmhft-template-1
 */

/* ═══════════════════════════════════════════════════
   GLOBAL SETTINGS — edit only this block to change Template 2's font and colors
   ═══════════════════════════════════════════════════ */
body.bmhft-template-1 {
  /* Font family (used by every font rule below) */
  --site-font: 'Comic Sans MS', cursive, sans-serif;

  /* Global colors — Elementor Site Settings > Global Colors (system colors) */
  --e-global-color-primary: #C59D5F !important;
  --e-global-color-secondary: #1A1A2E !important;
  --e-global-color-text: #1E3A5F !important;
  --e-global-color-accent: #00A63E !important;
}

/* ═══════════════════════════════════════════════════
   FONT OVERRIDE — applies --site-font everywhere (no need to edit below)
   ═══════════════════════════════════════════════════ */

/* 1. Override Elementor CSS typography variables (Elementor sets them on body.elementor-kit-N) */
body.bmhft-template-1 {
  --e-global-typography-primary-font-family: var(--site-font) !important;
  --e-global-typography-secondary-font-family: var(--site-font) !important;
  --e-global-typography-text-font-family: var(--site-font) !important;
  --e-global-typography-accent-font-family: var(--site-font) !important;
}

/* 2. ID-anchored selectors — beat Elementor's :not() chain */
body.bmhft-template-1 #page h1, body.bmhft-template-1 #page h2, body.bmhft-template-1 #page h3,
body.bmhft-template-1 #page h4, body.bmhft-template-1 #page h5, body.bmhft-template-1 #page h6,
body.bmhft-template-1 #page p, body.bmhft-template-1 #page a, body.bmhft-template-1 #page li,
body.bmhft-template-1 #page td, body.bmhft-template-1 #page th,
body.bmhft-template-1 #page span, body.bmhft-template-1 #page div,
body.bmhft-template-1 #page label, body.bmhft-template-1 #page caption,
body.bmhft-template-1 #page blockquote, body.bmhft-template-1 #page pre, body.bmhft-template-1 #page code,
body.bmhft-template-1 #page input, body.bmhft-template-1 #page textarea,
body.bmhft-template-1 #page select, body.bmhft-template-1 #page button,
body.bmhft-template-1 #page .elementor-heading-title,
body.bmhft-template-1 #page .elementor-text-editor *,
body.bmhft-template-1 #page .elementor-button-text,
body.bmhft-template-1 #page .elementor-tab-title,
body.bmhft-template-1 #page .elementor-accordion-title {
  font-family: var(--site-font) !important;
}

/* 3. Body */
body.bmhft-template-1 {
  font-family: var(--site-font) !important;
}

/* 4. Restore Elementor eicons */
body.bmhft-template-1 i[class*="eicon-"],
body.bmhft-template-1 [class^="eicon-"],
body.bmhft-template-1 [class*=" eicon-"],
body.bmhft-template-1 .elementor-icon > i,
body.bmhft-template-1 .elementor-icon-box-icon > i,
body.bmhft-template-1 #page i[class*="eicon-"],
body.bmhft-template-1 #page [class^="eicon-"],
body.bmhft-template-1 #page [class*=" eicon-"] {
  font-family: eicons !important;
}

/* 5. Restore Font Awesome 5 */
body.bmhft-template-1 i.fas, body.bmhft-template-1 i.far, body.bmhft-template-1 i.fal,
body.bmhft-template-1 i.fad, body.bmhft-template-1 i[class*="fa-"],
body.bmhft-template-1 span.fas, body.bmhft-template-1 span.far,
body.bmhft-template-1 span.fal, body.bmhft-template-1 span[class*="fa-"],
body.bmhft-template-1 #page i.fas, body.bmhft-template-1 #page i.far,
body.bmhft-template-1 #page i.fal, body.bmhft-template-1 #page i[class*="fa-"],
body.bmhft-template-1 #page span.fas, body.bmhft-template-1 #page span.far,
body.bmhft-template-1 #page span.fal, body.bmhft-template-1 #page span[class*="fa-"] {
  font-family: "Font Awesome 5 Free" !important;
}
body.bmhft-template-1 i.fab, body.bmhft-template-1 span.fab,
body.bmhft-template-1 #page i.fab, body.bmhft-template-1 #page span.fab {
  font-family: "Font Awesome 5 Brands" !important;
}

/* 6. Restore Font Awesome 4 legacy */
body.bmhft-template-1 i.fa, body.bmhft-template-1 span.fa,
body.bmhft-template-1 #page i.fa, body.bmhft-template-1 #page span.fa {
  font-family: FontAwesome !important;
}

/* 7. Restore WordPress Dashicons */
body.bmhft-template-1 .dashicons, body.bmhft-template-1 [class*="dashicons-"],
body.bmhft-template-1 span.dashicons,
body.bmhft-template-1 #page .dashicons, body.bmhft-template-1 #page [class*="dashicons-"] {
  font-family: dashicons !important;
}

/* 8. Restore Swiper & Slick slider icons */
body.bmhft-template-1 .swiper-button-next::after,
body.bmhft-template-1 .swiper-button-prev::after {
  font-family: swiper-icons !important;
}
body.bmhft-template-1 .slick-prev::before,
body.bmhft-template-1 .slick-next::before {
  font-family: slick !important;
}

/* 9. Restore WP Admin Bar icons */
body.bmhft-template-1 #wpadminbar .ab-icon,
body.bmhft-template-1 #wpadminbar .ab-item::before,
body.bmhft-template-1 #wpadminbar > #wp-toolbar > #wp-admin-bar-root-default .ab-icon,
body.bmhft-template-1 .wp-admin-bar-arrow {
  font-family: dashicons !important;
}

/* 10. Angular Material mat-option dropdowns (outside #page scope)
   Extra :not() pseudo-classes boost specificity to beat
   the pre-existing Elementor :not() chain */
body.bmhft-template-1 .cdk-overlay-container mat-option,
body.bmhft-template-1 .cdk-overlay-container mat-option .mat-option-text:not(.fa):not(.fab):not(.fas):not(.far):not(.fal):not(.dashicons):not(.eicons):not(.ab-icon):not(.icon):not(.slick),
body.bmhft-template-1 .cdk-overlay-container mat-option span:not(.fa):not(.fab):not(.fas):not(.far):not(.fal):not(.dashicons):not(.eicons):not(.ab-icon):not(.icon):not(.slick),
body.bmhft-template-1 .mat-select-panel mat-option,
body.bmhft-template-1 .mat-autocomplete-panel mat-option {
  font-family: var(--site-font) !important;
}

/* 11. Fix elements outside #page (header/footer) — :not() chain beats Elementor's */
body.bmhft-template-1 h1:not(.fa):not(.fab):not(.fas):not(.far):not(.fal):not(.ab-icon):not(.dashicons):not([class*="eicon-"]):not([class^="fa-"]):not(.slick),
body.bmhft-template-1 h2:not(.fa):not(.fab):not(.fas):not(.far):not(.fal):not(.ab-icon):not(.dashicons):not([class*="eicon-"]):not([class^="fa-"]):not(.slick),
body.bmhft-template-1 h3:not(.fa):not(.fab):not(.fas):not(.far):not(.fal):not(.ab-icon):not(.dashicons):not([class*="eicon-"]):not([class^="fa-"]):not(.slick),
body.bmhft-template-1 h4:not(.fa):not(.fab):not(.fas):not(.far):not(.fal):not(.ab-icon):not(.dashicons):not([class*="eicon-"]):not([class^="fa-"]):not(.slick),
body.bmhft-template-1 h5:not(.fa):not(.fab):not(.fas):not(.far):not(.fal):not(.ab-icon):not(.dashicons):not([class*="eicon-"]):not([class^="fa-"]):not(.slick),
body.bmhft-template-1 h6:not(.fa):not(.fab):not(.fas):not(.far):not(.fal):not(.ab-icon):not(.dashicons):not([class*="eicon-"]):not([class^="fa-"]):not(.slick),
body.bmhft-template-1 p:not(.fa):not(.fab):not(.fas):not(.far):not(.fal):not(.ab-icon):not(.dashicons):not([class*="eicon-"]):not([class^="fa-"]):not(.slick),
body.bmhft-template-1 span:not(.fa):not(.fab):not(.fas):not(.far):not(.fal):not(.ab-icon):not(.dashicons):not([class*="eicon-"]):not([class^="fa-"]):not(.slick),
body.bmhft-template-1 div:not(.fa):not(.fab):not(.fas):not(.far):not(.fal):not(.ab-icon):not(.dashicons):not([class*="eicon-"]):not([class^="fa-"]):not(.slick),
body.bmhft-template-1 a:not(.fa):not(.fab):not(.fas):not(.far):not(.fal):not(.ab-icon):not(.dashicons):not([class*="eicon-"]):not([class^="fa-"]):not(.slick),
body.bmhft-template-1 li:not(.fa):not(.fab):not(.fas):not(.far):not(.fal):not(.ab-icon):not(.dashicons):not([class*="eicon-"]):not([class^="fa-"]):not(.slick),
body.bmhft-template-1 label:not(.fa):not(.fab):not(.fas):not(.far):not(.fal):not(.ab-icon):not(.dashicons):not([class*="eicon-"]):not([class^="fa-"]):not(.slick),
body.bmhft-template-1 button:not(.fa):not(.fab):not(.fas):not(.far):not(.fal):not(.ab-icon):not(.dashicons):not([class*="eicon-"]):not([class^="fa-"]):not(.slick) {
  font-family: var(--site-font) !important;
}

/* [bm_footer] Company Details shortcodes — icon + white text rows */
body.bmhft-template-1 .bmhft-company {
  color: #FFFFFF !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
}
body.bmhft-template-1 .bmhft-company--has-icon {
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 20px !important;
  padding: 0 !important;
}
body.bmhft-template-1 .bmhft-company__icon {
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1;
  /* Center the icon on the first text line (24px line − 18px icon) / 2. */
  padding-top: 3px;
}
/* Text Editor wraps shortcodes in <p>/<br> — let the rows own the spacing. */
body.bmhft-template-1 p:has(> .bmhft-company--has-icon) {
  margin: 0 !important;
}
body.bmhft-template-1 .bmhft-company--has-icon + br {
  display: none;
}
body.bmhft-template-1 .bmhft-company__icon svg {
  display: block;
}
body.bmhft-template-1 .bmhft-company__text {
  color: inherit !important;
  min-width: 0;
  overflow-wrap: anywhere;
}
body.bmhft-template-1 a.bmhft-company:hover,
body.bmhft-template-1 a.bmhft-company:focus {
  color: #FFFFFF !important;
  opacity: 0.85;
}
/* Social links — white outline icon in a soft white circle */
body.bmhft-template-1 .bmhft-company-social {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 16px 0 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.15);
  font-size: 22px !important;
  line-height: 1 !important;
  vertical-align: middle;
  transition: background-color 0.2s ease;
}
body.bmhft-template-1 .bmhft-company-social:last-child {
  margin-right: 0;
}
body.bmhft-template-1 a.bmhft-company-social:hover,
body.bmhft-template-1 a.bmhft-company-social:focus {
  background-color: rgba(255, 255, 255, 0.28);
  opacity: 1;
}
body.bmhft-template-1 .bmhft-company-social svg {
  display: block;
}
/* Shortcodes on separate lines get <br>s from the Text Editor — keep the icons in one row. */
body.bmhft-template-1 .bmhft-company-social + br {
  display: none;
}

/* Fix HFE submenu arrows — FA4 (FontAwesome) not loaded, override to FA5 */
body.bmhft-template-1 .hfe-menu-toggle.sub-arrow i.fa,
body.bmhft-template-1 .hfe-menu-toggle.sub-arrow i.fa::before {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
}

/* Header phone number ([bm_company] phone in .header-phone-number) — all screen sizes.
   Prefixed with body.bmhft-template-1 so it beats the footer .bmhft-company rules above.
   Font family comes from Branding → Typography, so none is set here. */
body.bmhft-template-1 .header-phone-number {
  display: flex !important;
  align-items: center !important;
  height: 100%;
  margin: 0 !important;
}
body.bmhft-template-1 .header-phone-number p {
  margin: 0 !important;
}
body.bmhft-template-1 .header-phone-number a.bmhft-company--phone {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #1F2937 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap;
  opacity: 1;
  transition: color .2s ease;
}
body.bmhft-template-1 .header-phone-number .bmhft-company__text {
  color: inherit !important;
  font: inherit !important;
  line-height: 1 !important;
}
body.bmhft-template-1 .header-phone-number .bmhft-company__icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding-top: 0;
  color: inherit !important;
  line-height: 0 !important;
}
body.bmhft-template-1 .header-phone-number .bmhft-company__icon svg {
  width: 16px;
  height: 16px;
  display: block;
}
body.bmhft-template-1 .header-phone-number .bmhft-company__icon svg path {
  fill: currentColor !important;
  stroke: none !important;
}
body.bmhft-template-1 .header-phone-number a.bmhft-company--phone:hover,
body.bmhft-template-1 .header-phone-number a.bmhft-company--phone:focus {
  color: #C8A165 !important;
  opacity: 1;
}

/* [bm_footer_heading] footer column titles (Products / Customer Services / Quick Links) */
.foo-products-title div,
.foo-customer-title div,
.foo-links-title div {
  color: #fff !important;
  font-size: 18px !important;
}

/* Active 2D/3D toggle + "Click 3D to explore" hint popup — primary color background */
body.bmhft-template-1 .visualizer-view-controls__toggle-group .mat-button-toggle.mat-button-toggle-checked,
body.bmhft-template-1 .visualizer-view-controls .visualizer-view-popup {
  background-color: var(--primary-color, #1f0636) !important;
  color: #fff !important;
}
body.bmhft-template-1 .visualizer-view-controls .visualizer-view-popup {
  border-color: var(--primary-color, #1f0636) !important;
}
body.bmhft-template-1 .visualizer-view-controls .visualizer-view-popup::after {
  border-top-color: var(--primary-color, #1f0636) !important;
}
body.bmhft-template-1 .visualizer-view-controls__toggle-group .mat-button-toggle.mat-button-toggle-checked .mat-icon,
body.bmhft-template-1 .visualizer-view-controls .visualizer-view-popup__text,
body.bmhft-template-1 .visualizer-view-controls .visualizer-view-popup__close::before {
  color: #fff !important;
}
body.bmhft-template-1 .visualizer-view-controls .visualizer-view-popup__text {
  padding-right: 12px;
}

/* Template 2: upward-opening HFE dropdowns on desktop only. */
@media (min-width: 1025px) {
  /* Main dropdown opens upwards. */
  body.bmhft-template-1 .hfe-nav-menu > li.menu-item-has-children > .sub-menu {
    top: auto !important;
    bottom: 100% !important;
  }

  /* Nested dropdowns open upwards. */
  body.bmhft-template-1 .hfe-nav-menu .sub-menu li.menu-item-has-children > .sub-menu {
    top: auto !important;
    bottom: 0 !important;
  }

  /* Hover state. */
  body.bmhft-template-1 .hfe-nav-menu li.menu-item-has-children:hover > .sub-menu {
    top: auto !important;
    bottom: 100% !important;
  }

  /* Prevent dropdown clipping. */
  body.bmhft-template-1 .hfe-nav-menu,
  body.bmhft-template-1 .hfe-nav-menu > li {
    overflow: visible !important;
  }
}

/* Third-level submenu: line its top up with the parent item */
body.bmhft-template-1 .hfe-nav-menu .sub-menu li.menu-item-has-children.hfe-has-submenu > .sub-menu {
    top: 0 !important;
    bottom: auto !important;
}