/**
 * CPL Theme Engine — Header styles (header-template + SVG logo + customizer)
 * Self-contained: no dependency on cpl-cplthm-social-icons.
 */

/** Custom Header And Footer CSS start **/

/*
 * CPL-WEBSITE-HEADER-PLUGIN-INDEPENDENCE-1A
 *
 * Elementor may place the CPL Header widget inside a flex container whose
 * cross-axis alignment is not stretch. The header must own its full-width
 * layout and must never depend on CSS from an unrelated Elementor widget.
 */
.elementor-widget-cplthm_header_template {
  width: 100%;
  max-width: 100%;
  align-self: stretch;
  flex-basis: 100%;
}

.elementor-widget-cplthm_header_template>.elementor-widget-container {
  width: 100%;
  max-width: 100%;
}

.elementor-widget-cplthm_header_template .cplthm-header-template,
.elementor-widget-cplthm_header_template .cplthm-header-template .main-header {
  width: 100%;
  max-width: 100%;
}

/*
 * CPL-HEADER-ELEMENTOR-EDITOR-EMPTY-OVERLAY-FIX-1A
 *
 * Elementor marks the CPL Header as .elementor-widget-empty in the Header
 * Template editor and paints a grey fill + 2px editable outline. Override
 * only that widget, only under confirmed editor ancestors
 * (body.elementor-editor-active + .elementor-edit-area-active). Frontend
 * pages never receive body.elementor-editor-active, so these rules are inert
 * outside the editor. Do not hide overlays/edit handles.
 *
 * CPL-HEADER-ELEMENTOR-EDITOR-BG-1C: skip this wipe on the Headers CPT editor
 * (body.cplthm-editing-header) so Menu Style / Advanced black (or any) header
 * background is not forced transparent over the green canvas.
 */
body.elementor-editor-active:not(.cplthm-editing-header)
.elementor-widget-cplthm_header_template.elementor-widget-empty,
body.elementor-editor-active:not(.cplthm-editing-header)
.elementor-element.elementor-widget-cplthm_header_template.elementor-widget-empty {
  background-color: transparent !important;
  background: transparent !important;
}

body.elementor-editor-active
.elementor-edit-area-active
.elementor-widget-cplthm_header_template.elementor-element-editable,
body.elementor-editor-active
.elementor-edit-area-active
.elementor-widget-cplthm_header_template.elementor-element-editable:hover {
  box-shadow: none !important;
}

/*
 * CPL-HEADER-ELEMENTOR-CONTAINER-FLOW-FIX-1B
 *
 * Frontend: .cpl-header .main-header is position:absolute (theme.css) so the
 * header overlays the hero and contributes no in-flow height. In the Elementor
 * Header Template editor that collapses the parent .e-con and shows the large
 * “Drag widget here” empty view. Restore only .main-header to normal flow
 * under body.elementor-editor-active.cplthm-editing-header (Headers CPT only).
 * Page/home editors keep absolute overlay like the frontend. Also neutralize
 * .sticky-bar’s fixed positioning if JS applies it in the preview.
 * Frontend is unchanged.
 */
body.elementor-editor-active.cplthm-editing-header
.elementor-widget-cplthm_header_template .main-header {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
}

body.elementor-editor-active.cplthm-editing-header
.elementor-widget-cplthm_header_template .main-header.sticky-bar,
body.elementor-editor-active.cplthm-editing-header
.elementor-widget-cplthm_header_template .sticky-bar {
  position: relative !important;
  top: auto !important;
  left: auto !important;
}

/*
 * CPL-MEGA-MENU-ELEMENTOR-EDITOR-PREVIEW-1B
 *
 * Headers CPT editor only. Keep normal :hover mega behavior (do not force open).
 * In the editor, .main-header is position:relative and Elementor ancestors often
 * use overflow:hidden + header-tall height, which clips the absolute mega panel
 * so only the first grid row (or nothing) is visible. Unclip ancestors and raise
 * the open mega above editor chrome. Frontend is unchanged.
 */
@media (min-width: 1200px) {
  body.elementor-editor-active.cplthm-editing-header,
  body.elementor-editor-preview.cplthm-editing-header,
  body.elementor-editor-active.cplthm-editing-header .elementor,
  body.elementor-editor-preview.cplthm-editing-header .elementor,
  body.elementor-editor-active.cplthm-editing-header .elementor-section,
  body.elementor-editor-preview.cplthm-editing-header .elementor-section,
  body.elementor-editor-active.cplthm-editing-header .elementor-container,
  body.elementor-editor-preview.cplthm-editing-header .elementor-container,
  body.elementor-editor-active.cplthm-editing-header .elementor-widget-wrap,
  body.elementor-editor-preview.cplthm-editing-header .elementor-widget-wrap,
  body.elementor-editor-active.cplthm-editing-header .e-con,
  body.elementor-editor-preview.cplthm-editing-header .e-con,
  body.elementor-editor-active.cplthm-editing-header .e-con-inner,
  body.elementor-editor-preview.cplthm-editing-header .e-con-inner,
  body.elementor-editor-active.cplthm-editing-header
  .elementor-widget-cplthm_header_template,
  body.elementor-editor-preview.cplthm-editing-header
  .elementor-widget-cplthm_header_template,
  body.elementor-editor-active.cplthm-editing-header
  .elementor-widget-cplthm_header_template > .elementor-widget-container,
  body.elementor-editor-preview.cplthm-editing-header
  .elementor-widget-cplthm_header_template > .elementor-widget-container,
  body.elementor-editor-active.cplthm-editing-header
  .elementor-widget-cplthm_header_template .cplthm-header-template,
  body.elementor-editor-preview.cplthm-editing-header
  .elementor-widget-cplthm_header_template .cplthm-header-template,
  body.elementor-editor-active.cplthm-editing-header
  .elementor-widget-cplthm_header_template .main-header,
  body.elementor-editor-preview.cplthm-editing-header
  .elementor-widget-cplthm_header_template .main-header,
  body.elementor-editor-active.cplthm-editing-header
  .elementor-widget-cplthm_header_template .main-navigation,
  body.elementor-editor-preview.cplthm-editing-header
  .elementor-widget-cplthm_header_template .main-navigation,
  body.elementor-editor-active.cplthm-editing-header
  .elementor-widget-cplthm_header_template .main-menu,
  body.elementor-editor-preview.cplthm-editing-header
  .elementor-widget-cplthm_header_template .main-menu {
    overflow: visible !important;
  }

  body.elementor-editor-active.cplthm-editing-header
  .elementor-widget-cplthm_header_template
  .main-menu > ul > li.mega:hover > ul.sub-menu,
  body.elementor-editor-active.cplthm-editing-header
  .elementor-widget-cplthm_header_template
  .main-menu > ul > li.mega:focus-within > ul.sub-menu,
  body.elementor-editor-preview.cplthm-editing-header
  .elementor-widget-cplthm_header_template
  .main-menu > ul > li.mega:hover > ul.sub-menu,
  body.elementor-editor-preview.cplthm-editing-header
  .elementor-widget-cplthm_header_template
  .main-menu > ul > li.mega:focus-within > ul.sub-menu,
  body.elementor-editor-active.cplthm-editing-header
  .elementor-widget-cplthm_header_template
  .main-menu > ul:has(> li.mega:hover) > li.mega > ul.sub-menu,
  body.elementor-editor-active.cplthm-editing-header
  .elementor-widget-cplthm_header_template
  .main-menu > ul:has(> li.mega:focus-within) > li.mega > ul.sub-menu,
  body.elementor-editor-preview.cplthm-editing-header
  .elementor-widget-cplthm_header_template
  .main-menu > ul:has(> li.mega:hover) > li.mega > ul.sub-menu,
  body.elementor-editor-preview.cplthm-editing-header
  .elementor-widget-cplthm_header_template
  .main-menu > ul:has(> li.mega:focus-within) > li.mega > ul.sub-menu {
    z-index: 9999;
  }
}

/*
 * Header Template control: header_slider_placement
 * - over (default / .cpl-header--over-slider): theme absolute overlay
 * - top (.cpl-header--on-top): in-flow above slider (editor + frontend)
 * #sticky-header stays fixed on desktop (appearance via .sticky-bar); do not
 * force it back to relative here. Non-sticky on-top headers still use relative.
 * When on top, clear overlay-header height so hero/slider does not double-offset.
 */
.cpl-header.cpl-header--on-top .main-header:not(#sticky-header):not(.sticky-bar),
.elementor-widget-cplthm_header_template .cpl-header.cpl-header--on-top .main-header:not(#sticky-header):not(.sticky-bar) {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
}

body:has(.cpl-header.cpl-header--on-top) {
  --cpl-overlay-header-height: 0px;
}

/*
 * CPL-HEADER-ELEMENTOR-EDITOR-BG-1C
 *
 * Green on canvas html/body only while editing a CPL Headers CPT in Elementor.
 * Do not set (or force transparent) backgrounds on .main-header, the header
 * widget, or Elementor sections — those keep the colors set in Elementor
 * (e.g. black). If the header is transparent, this body green shows through.
 */
 cplthm-header-template,
 .elementor-widget-cplthm_header_template {
  background-color: #ffffff;
 }
/* html:has(body.elementor-editor-active.cplthm-editing-header),
html:has(body.elementor-editor-preview.cplthm-editing-header),
html body.elementor-editor-active.cplthm-editing-header,
html body.elementor-editor-preview.cplthm-editing-header {
  background-color: green !important;
} */

@media (min-width: 1200px) {
  .elementor-widget-cplthm_header_template .cplthm-header-template .main-header .main-navigation {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
  }

  .elementor-widget-cplthm_header_template .cplthm-header-template .main-header .logo-area {
    flex: 0 0 auto;
  }

  .elementor-widget-cplthm_header_template .cplthm-header-template .main-header .main-menu.nav-menu {
    flex: 1 1 auto;
    min-width: 0;
  }

  .elementor-widget-cplthm_header_template .cplthm-header-template .main-header .main-menu.nav-menu>ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
  }

  .elementor-widget-cplthm_header_template .cplthm-header-template .main-header .header-cta-button {
    flex: 0 0 auto;
  }
}

/*
 * CPL-HEADER-1199-VERTICAL-STABILITY-1B
 * Below xl, CTA/menu hide and the flex navbar would shrink (~51.7px),
 * shifting the centered logo/hamburger up. Keep the row at desktop height.
 */
@media (max-width: 1199.98px) {
  .main-header .navbar.main-navigation {
    min-height: 60px;
  }
}

.cplthm-header-template-one .button.header-cta-button {
  margin-right: 228px;
}

.cplthm-header-template-two .button.header-cta-button {
  margin-right: 87px;
}

@media screen and (min-width: 1200px) and (max-width: 1447px) {
  .cplthm-header-template-one .button.header-cta-button {
    margin-right: 50px;
  }

  .cplthm-header-template-two .button.header-cta-button {
    margin-right: 10px;
  }
}

.tp-header .main-header.header-fluid .nav-menu {
  margin-right: 0px;
}

/*
 * CPL-RESPONSIVE-CONTAINER-ALIGNMENT-1C — header ↔ hero edge lock (after theme).
 * Uses --cpl-shell-inset from breadcrumb-hero.css; fallbacks mirror that system.
 */
body .elementor-widget-cplthm_header_template .main-header,
body .cplthm-header-template .main-header,
body #sticky-header.main-header {
  padding-left: var(--cpl-shell-inset, max(0.75rem, calc((100vw - 1200px) / 2))) !important;
  padding-right: var(--cpl-shell-inset, max(0.75rem, calc((100vw - 1200px) / 2))) !important;
  box-sizing: border-box;
}

body .main-slider-wrap .slider-caption,
body .main-slider-wrap .slider-caption.cpl-slider-caption--top_inside,
body .main-slider-wrap .slider-caption.cpl-slider-caption--bottom_inside,
body .main-slider-wrap .slider-caption.cpl-slider-caption--none {
  padding-left: var(--cpl-shell-inset, max(0.75rem, calc((100vw - 1200px) / 2))) !important;
  padding-right: var(--cpl-shell-inset, max(0.75rem, calc((100vw - 1200px) / 2))) !important;
}

@media (max-width: 1199.98px) {
  body .container,
  body .container-sm,
  body .container-md,
  body .container-lg {
    max-width: var(--cpl-page-container-max, 1200px);
  }

  body .elementor-section.elementor-section-boxed>.elementor-container {
    max-width: var(--cpl-page-container-max, 1200px);
  }
}

@media (min-width: 1200px) {
  body .container,
  body .container-sm,
  body .container-md,
  body .container-lg,
  body .elementor-section.elementor-section-boxed>.elementor-container {
    max-width: min(
      var(--cpl-page-container-max, 1200px),
      calc(100vw - 2 * var(--cpl-desktop-gutter, 30px))
    );
  }
}

.elementor-widget-cplthm_header_template .main-header>.container,
.cplthm-header-template .main-header>.container,
#sticky-header>.container {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.elementor-widget-cplthm_header_template .main-header .navbar,
.cplthm-header-template .main-header .navbar {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.elementor-widget-cplthm_header_template .main-header .logo-area,
.elementor-widget-cplthm_header_template .main-header .header-cta-button {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ---- Inline SVG logo (ported from cpl-cplthm-social-icons) ---- */
.cplthm-header-template .site-branding .cpl-inline-svg svg,
.cplthm-header-template-three .site-branding .cpl-inline-svg svg {
  display: block;
  max-width: 100%;
  height: auto;
}

.tp-menu-wrapper .mobile-logo .cpl-inline-svg svg {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

.cpl-logo-mode-svg {
  position: relative;
}

/* Hide only the injected CSS-var block (not the logo's own SVG <style>). */
.cpl-inline-svg style#cpl-svg-vars,
.cpl-logo-mode-svg style#cpl-svg-vars,
a.custom-logo-link style#cpl-svg-vars {
  display: none !important;
}

a.custom-logo-link .cpl-inline-svg svg,
.custom-logo-link .cpl-inline-svg svg,
.site-branding .custom-logo-link .cpl-inline-svg svg {
  display: block;
  max-width: 100%;
  height: auto;
}

body.customize-preview a.custom-logo-link {
  position: relative;
}

body.customize-preview .customize-partial-edit-shortcut-custom_logo {
  transform: translate(12px, -12px);
}

body.customize-preview .customize-partial-edit-shortcut-custom_logo button {
  width: 18px;
  height: 18px;
  line-height: 18px;
}