/* Xav — colours come ONLY from Elementor Global Colors (Site Settings > Global Colors).
   --xc-* are aliases of --e-global-color-*; change a global colour and everything follows. */
:root{
 --xc-primary:var(--e-global-color-primary,var(--xav-primary));
 --xc-secondary:var(--e-global-color-secondary,var(--xav-dark));
 --xc-text:var(--e-global-color-text,var(--xav-text));
 --xc-accent:var(--e-global-color-accent,var(--xc-primary));
 --xc-light:var(--e-global-color-light,var(--xav-light));
 --xc-cream:var(--e-global-color-cream,var(--xc-light));
 --xc-mist:var(--e-global-color-mist,var(--xc-light));
 --xc-peach:var(--e-global-color-peach,var(--xc-accent));
 --xc-gold:var(--e-global-color-gold,var(--xc-accent));
 --xc-mint:var(--e-global-color-mint,var(--xc-primary));
 --xc-white:var(--e-global-color-white,Canvas);
}

/* Xav Colour Mode — scoped light/dark content for sections, inner sections, columns and EVERY widget.
   Text/heading/icon colours are forced (!important) so the mode works automatically even where a
   widget has its own colour in the Style tab. Buttons follow the mode too (button 1 = filled, button 2 = outline). Pickers in the panel override the defaults. */
.xav-mode-dark{--xm-head:var(--xc-white);--xm-text:color-mix(in srgb,var(--xc-white) 85%,transparent);--xm-muted:color-mix(in srgb,var(--xc-white) 62%,transparent);--xm-icon:var(--xc-peach);--xm-line:color-mix(in srgb,var(--xc-white) 18%,transparent);--xm-link:var(--xc-white);--xm-bg:var(--xc-secondary);--xm-em:var(--xc-white);--xm-b1-bg:var(--xc-white);--xm-b1-fg:var(--xc-secondary);--xm-b2-line:var(--xc-white);--xm-bh:var(--xc-accent);--xm-bh-fg:var(--xc-white)}
.xav-mode-light{--xm-head:var(--xc-secondary);--xm-text:var(--xc-text);--xm-muted:color-mix(in srgb,var(--xc-text) 75%,transparent);--xm-icon:var(--xc-primary);--xm-line:color-mix(in srgb,var(--xc-secondary) 14%,transparent);--xm-link:var(--xc-primary);--xm-bg:var(--xc-light);--xm-em:var(--xc-primary);--xm-b1-bg:var(--xc-secondary);--xm-b1-fg:var(--xc-white);--xm-b2-line:var(--xc-secondary);--xm-bh:var(--xc-accent);--xm-bh-fg:var(--xc-white)}

/* optional matching background (low specificity: a Style-tab background always wins) */
.xav-modebg-yes.xav-mode-dark,.xav-modebg-yes.xav-mode-light{background-color:var(--xm-bg)}
.xav-modebg-yes.elementor-column.xav-mode-dark>.elementor-widget-wrap,.xav-modebg-yes.elementor-column.xav-mode-light>.elementor-widget-wrap{background-color:var(--xm-bg)}
.elementor-widget.xav-modebg-yes{padding:20px 24px;border-radius:20px}

/* headings / numbers */
.xav-mode-dark .elementor-heading-title,
.xav-mode-dark .elementor-icon-box-title,
.xav-mode-dark .elementor-image-box-title,
.xav-mode-dark .elementor-testimonial-name,
.xav-mode-dark .elementor-counter-number-wrapper,
.xav-mode-dark .elementor-widget-text-editor h1,
.xav-mode-dark .elementor-widget-text-editor h2,
.xav-mode-dark .elementor-widget-text-editor h3,
.xav-mode-dark .elementor-widget-text-editor h4,
.xav-mode-light .elementor-heading-title,
.xav-mode-light .elementor-icon-box-title,
.xav-mode-light .elementor-image-box-title,
.xav-mode-light .elementor-testimonial-name,
.xav-mode-light .elementor-counter-number-wrapper,
.xav-mode-light .elementor-widget-text-editor h1,
.xav-mode-light .elementor-widget-text-editor h2,
.xav-mode-light .elementor-widget-text-editor h3,
.xav-mode-light .elementor-widget-text-editor h4{color:var(--xm-head)!important}

/* body text */
.xav-mode-dark .elementor-icon-box-description,
.xav-mode-dark .elementor-image-box-description,
.xav-mode-dark .elementor-testimonial-content,
.xav-mode-dark .elementor-icon-list-text,
.xav-mode-dark .elementor-icon-list-text a,
.xav-mode-dark .elementor-counter-title,
.xav-mode-dark .elementor-testimonial-job,
.xav-mode-dark .elementor-widget-text-editor p,
.xav-mode-dark .elementor-widget-text-editor li,
.xav-mode-dark .elementor-text-editor,
.xav-mode-dark.elementor-widget-text-editor,
.xav-mode-dark.elementor-widget-text-editor p,
.xav-mode-light .elementor-icon-box-description,
.xav-mode-light .elementor-image-box-description,
.xav-mode-light .elementor-testimonial-content,
.xav-mode-light .elementor-icon-list-text,
.xav-mode-light .elementor-icon-list-text a,
.xav-mode-light .elementor-counter-title,
.xav-mode-light .elementor-testimonial-job,
.xav-mode-light .elementor-widget-text-editor p,
.xav-mode-light .elementor-widget-text-editor li,
.xav-mode-light .elementor-text-editor,
.xav-mode-light.elementor-widget-text-editor,
.xav-mode-light.elementor-widget-text-editor p{color:var(--xm-text)!important}

.xav-mode-dark .elementor-widget-text-editor a:not(.elementor-button),
.xav-mode-light .elementor-widget-text-editor a:not(.elementor-button){color:var(--xm-link)!important}
/* icons */
.xav-mode-dark .elementor-icon,
.xav-mode-dark .elementor-icon-list-icon i,
.xav-mode-dark .elementor-icon-box-icon .elementor-icon,
.xav-mode-light .elementor-icon,
.xav-mode-light .elementor-icon-list-icon i,
.xav-mode-light .elementor-icon-box-icon .elementor-icon{color:var(--xm-icon)!important}
.xav-mode-dark .elementor-icon svg,
.xav-mode-dark .elementor-icon svg path,
.xav-mode-dark .elementor-icon-list-icon svg,
.xav-mode-dark .elementor-icon-list-icon svg path,
.xav-mode-light .elementor-icon svg,
.xav-mode-light .elementor-icon svg path,
.xav-mode-light .elementor-icon-list-icon svg,
.xav-mode-light .elementor-icon-list-icon svg path{fill:var(--xm-icon)!important}
/* dividers */
.xav-mode-dark .elementor-divider-separator,
.xav-mode-light .elementor-divider-separator{border-color:var(--xm-line)!important}

/* ===== widgets with their own surface: restyled only when the MODE IS ON THE WIDGET ITSELF ===== */
.xav-mode-dark.elementor-widget-accordion .elementor-accordion-item,.xav-mode-dark.elementor-widget-toggle .elementor-toggle-item{background:color-mix(in srgb,var(--xc-white) 7%,transparent);border-color:color-mix(in srgb,var(--xc-white) 16%,transparent)!important}
.xav-mode-dark.elementor-widget-accordion .elementor-tab-title a,.xav-mode-dark.elementor-widget-toggle .elementor-tab-title a,.xav-mode-dark.elementor-widget-tabs .elementor-tab-title{color:var(--xm-head)!important}
.xav-mode-dark.elementor-widget-accordion .elementor-tab-content,.xav-mode-dark.elementor-widget-toggle .elementor-tab-content,.xav-mode-dark.elementor-widget-tabs .elementor-tab-content{color:var(--xm-text)!important;border-color:color-mix(in srgb,var(--xc-white) 16%,transparent)}
.xav-mode-light.elementor-widget-accordion .elementor-accordion-item,.xav-mode-light.elementor-widget-toggle .elementor-toggle-item{background:var(--xc-white)}
.xav-mode-light.elementor-widget-accordion .elementor-tab-title a,.xav-mode-light.elementor-widget-toggle .elementor-tab-title a{color:var(--xm-head)!important}
.xav-mode-dark.elementor-widget-form .elementor-field-textual{background:color-mix(in srgb,var(--xc-white) 8%,transparent);border-color:color-mix(in srgb,var(--xc-white) 25%,transparent);color:var(--xm-head)}
.xav-mode-dark.elementor-widget-form label,.xav-mode-light.elementor-widget-form label{color:var(--xm-head)}
.xav-mode-light.elementor-widget-form .elementor-field-textual{background:var(--xc-white);color:var(--xm-head)}
.xav-mode-dark.elementor-widget-progress .elementor-title,.xav-mode-dark.elementor-widget-progress .elementor-progress-percentage,
.xav-mode-light.elementor-widget-progress .elementor-title,.xav-mode-light.elementor-widget-progress .elementor-progress-percentage{color:var(--xm-head)}

/* ===== italic accent text inside headings (also the gradient-clip hero accent) ===== */
.xav-mode-dark .elementor-heading-title em,.xav-mode-light .elementor-heading-title em{color:var(--xm-em)!important;-webkit-text-fill-color:var(--xm-em)!important}

/* ===== BUTTONS — follow the mode. Button 1 = filled, Button 2 = outline (auto-detected, class .xav-btn-outline) ===== */
.xav-mode-dark .elementor-button,.xav-mode-light .elementor-button{background-color:var(--xm-b1-bg)!important;color:var(--xm-b1-fg)!important;border-color:var(--xm-b1-bg)!important;fill:var(--xm-b1-fg)!important}
.xav-mode-dark .elementor-button:hover,.xav-mode-light .elementor-button:hover,.xav-mode-dark .elementor-button:focus,.xav-mode-light .elementor-button:focus{background-color:var(--xm-bh)!important;color:var(--xm-bh-fg)!important;border-color:var(--xm-bh)!important}
.xav-mode-dark .elementor-button i,.xav-mode-light .elementor-button i,.xav-mode-dark .elementor-button .elementor-button-text,.xav-mode-light .elementor-button .elementor-button-text{color:inherit!important}
.xav-mode-dark .elementor-button svg,.xav-mode-light .elementor-button svg,.xav-mode-dark .elementor-button svg path,.xav-mode-light .elementor-button svg path{fill:currentColor!important}
/* outline button */
.xav-mode-dark .xav-btn-outline .elementor-button,.xav-mode-light .xav-btn-outline .elementor-button,.xav-mode-dark.xav-btn-outline .elementor-button,.xav-mode-light.xav-btn-outline .elementor-button{background-color:transparent!important;color:var(--xm-b2-line)!important;border:2px solid var(--xm-b2-line)!important;box-shadow:none!important}
.xav-mode-dark .xav-btn-outline .elementor-button:hover,.xav-mode-light .xav-btn-outline .elementor-button:hover,.xav-mode-dark.xav-btn-outline .elementor-button:hover,.xav-mode-light.xav-btn-outline .elementor-button:hover{background-color:var(--xm-b2-line)!important;color:var(--xm-b1-fg)!important;border-color:var(--xm-b2-line)!important}