/** ---------------------------- //
 *  @RaidPixels
 *  CSS Custom Properties — Gold Gradient
*/

:root {
  --cp-gold-gradient: linear-gradient(106.23deg, #9C7E51 10.17%, #C6B182 40.43%, #A68657 89.83%);
  --cp-border-light: #D9DDDF;
  --cp-text-dark: #020202;
}

/** ---------------------------- //
 *  Base / Dark-mode-default Styles
*/

html,.fixed-theme--dark {

	& .elementor-kit-6 {
		--e-global-color-primary: var(--text-light);
		--e-global-color-secondary: var(--text-light);
		--e-global-color-text: #FAFAFABF;
		--e-global-color-accent: transparent;
		--e-global-color-80e00a2: #292E30;
		--e-global-color-24dd345: #9C7E51;
		--e-global-color-c026d41: #F9F9F9;
	}
    
    
	
	--color-1: #9C7E51;
    --color-1-semi-light: #F7DDA4;
    --color-1-transparent: hsl(from var(--color-1) h s l / 0.3);
    --gradient-1: linear-gradient(106deg, #9C7E51 10.17%, #F7DDA4 40.43%, #A68657 89.83%);
    --gradient-1-radial: radial-gradient(rgb(from var(--color-1) r g b / 0.25) 0%, rgb(from var(--color-1) r g b / 0.05) 50%, var(--black) 70%, var(--black));
    --border-color-box: linear-gradient(#606A7066 0 0);
    --border-color: #606A7066;
    --rp_border-color: #606A7066;
    --rp_divider-color: #292E30;
    --black: black;
    --white: white;

    --bg-muted: #0C0C0C;

    --text-light: hsl(0 0 98 / 0.75);
    --text-muted: hsl(from var(--text-light) h s l / 0.6);

    --space-xl: 120px;
    --space-l: 80px;
    --space-m: 40px;
    --space-s: 24px;
    --space-xs: 14px;

    --section-padding-y: var(--space-xl);
    --section-padding-x: 0px;
    --section-padding: var(--section-padding-y) var(--section-padding-x);

	/* Color 1 and 2 for BG Ellipsis elements that are in the background and blurry */
	--bg-ellipse-color-1: rgb(255 255 255 / 0.15);
	--bg-ellipse-color-2: rgb(255 255 255 / 0.04);

    
}

.elementor-kit-6 button.cp-theme-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  width: 56px;
  height: 56px;
  padding: 12px;
  box-sizing: border-box;
  border: none;
  background-color: rgba(2, 2, 2, 1);
  box-shadow: 0px 3.53px 35.33px 0px rgba(0, 0, 0, 1);
  transition: all .5s ease-in;
}

.cp-theme-toggle {
  display: flex;
  align-items: center;
}

.cp-theme-toggle__header .switch-separator {
  display: inline-block;
  width: 1px;
  height: 22px;
  background: #FFFFFF;
  margin-inline: 7px;
}

.cp-theme-toggle__header .icon-light img:first-of-type {
  filter: invert(100%) sepia(86%) saturate(2%) hue-rotate(46deg) brightness(115%) contrast(101%);
}

.elementor-kit-6 button.cp-theme-toggle__header {
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  padding: 0;
}

.cp-theme-toggle__header span {
  display: inline-flex;
}

.cp-theme-toggle .icon-dark {
  display: flex;
}

.cp-theme-toggle span {
  height: 100%;
}

.cp-light-mob-element {
  display: none !important;
}

.cp-hero-section {
  transition: none;
}

/* Hide in dark by default, show in light */
.cp-theme-toggle__header span img:last-of-type,
.cp-theme-toggle .icon-light {
  display: none;
}

html body,
html main {
  opacity: 0;
  animation: fadeInLight 1.5s forwards ease;
}

@keyframes fadeInLight {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/** ---------------------------- //
 *  Light Mode
 *  Targets: html:not(.dark-mode)  AND  html.light-mode
*/

:is(html:not(.dark-mode), html.light-mode) {

	--gradient-1: linear-gradient(106deg, #9C7E51 10.17%, #c5ac75 40.43%, #A68657 72.83%);
	--gradient-1-radial: radial-gradient(rgb(from var(--color-1) r g b / 0.15) 0%, rgb(from var(--color-1) r g b / 0.01) 50%, var(--black) 70%, var(--black));
	--color-1-semi-light: #64573b;

	--black: white;
    --white: black;

    --bg-muted: #fafafa; /* To Change */

    --text-light: #333333;
    --text-muted: #464646;

	--rp-border_color: #606A70;
    --rp_divider-color: #efefef;

	/* Color 1 and 2 for BG Ellipsis elements that are in the background and blurry */
	--bg-ellipse-color-1: rgb(156 126 81 / 0.15);
	--bg-ellipse-color-2: rgb(156 126 81 / 0.04);
	

  /* --- Gold gradient text --- */
  & li.menu-item a:hover,
  & h1 span,
  & h2 span,
  & h3 span,
  & p span,
  & span.elementor-heading-title,
  & .gold-text,
  & .elementor-button {
    background: var(--gradient-1);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: .3s ease-in-out;
  }

  /* --- Button overrides --- */
  & .elementor-button {
    color: var(--e-global-color-primary);
    -webkit-text-fill-color: var(--e-global-color-primary);
  }

  & .cp-mobile-menu .elementor-button::before,
  & .gold-bg {
    background: var(--gradient-1);
  }

  /* --- Theme toggle --- */
  & button.cp-theme-toggle.cp-theme-toggle.cp-theme-toggle {
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 3.53px 35.33px 0px rgba(218, 218, 218, 1);
    transition: all .5s ease-in;
  }

  & .cp-theme-toggle__header .switch-separator {
    background: rgba(2, 2, 2, 1);
  }

  & .cp-theme-toggle__header .icon-dark img {
    opacity: 0.5;
  }

  & .cp-theme-toggle__header span img:first-of-type,
  & .cp-theme-toggle .icon-dark {
    display: none;
  }

  & .cp-theme-toggle .icon-light,
  & .cp-theme-toggle__header span img:last-of-type {
    display: block;
  }

  /* --- Page fade-in --- */
  & body,
  & main {
    opacity: 0;
    animation: fadeInLight 1.5s forwards ease;
  }

  /* --- Visibility toggles --- */
  & .cp-dark-element  { display: none  !important; }
  & .cp-light-element { display: block !important; }

  /* --- Blocks --- */
  & .cp-dark-block-1 {
    background-image: none !important;
    background-color: var(--bg-muted) !important;
  }

  & .cp-dark-block-1 .elementor-element {
    border-color: rgba(198, 177, 130, 1) !important;
  }

  /* --- Image filters --- */
  & .elementor-widget-theme-site-logo img,
  & .cp-gradient img {
    filter: invert(100%);
  }

  /* --- Section backgrounds --- */
  & #cp-uber-uns {
    background-image: url(https://chris-und-partner.com/wp-content/uploads/2025/11/ex-ceo-light-bg.svg);
  }

  /* --- Mobile menu --- */
  & .cp-mobile-menu .dialog-widget-content {
    background-color: #FFFFFF !important;
  }

  /* --- Global color tokens --- */
  & .elementor-kit-6 {
    --e-global-color-primary: var(--cp-text-dark);
    --e-global-color-secondary: #464646;
    --e-global-color-text: #464646;
	/* Full White / Black Color */
	--e-global-color-c026d41: #020202;
	/* Accent Color not changed, but is var(--e-global-color-24dd345) */
    --e-global-color-accent: transparent;
    background-color: #FFFFFF;
  }

  /* --- Header --- */
  & .cp-header {
    border-bottom: 1px solid var(--cp-border-light);
    background: rgba(255, 255, 255, 0.8);
  }
  
  & .cp-header.cp-scrolled {
    background: #FFFFFF;
  }

  & .cp-color-switch-img {
    filter: grayscale(0%);
  }

  /* --- Slider --- */
  & .elementor-swiper-button svg rect {
    fill: var(--cp-border-light);
  }

  & .cp-slider .swiper-pagination-progressbar {
    background: rgba(0, 0, 0, 0.10);
  }

  & .swiper-slide:has(.cp-dark-element) {
    display: none !important;
  }

  /* --- Contact form --- */
  & .cp-contact-form {
    background-image: linear-gradient(57deg, rgba(200, 200, 197, 0.20) -24.02%, #FDFDFD 121%) !important;
  }
  & .cp-contact-form .elementor-field {
    border-color: #9C7E51 !important;
  }

  /* --- Icons --- */

	/* Make Icons darker because of the gradient that works better on dark backgrounds */ 
  & .elementor-icon svg {
	filter: brightness(0.7);
  }

  /* --- Footer --- */
  & footer .top-footer {
    background-image: none !important;
  }

  & footer {
    border-top: 1px solid var(--cp-border-light);
  }

  & footer .elementor-icon-list-item > a {
    text-decoration-color: var(--cp-text-dark) !important;
  }

  & footer .elementor-icon-list-item > a:hover {
    text-decoration: none !important;
  }

  & .bottom-footer p,
  & .bottom-footer a {
    color: #F9F9F9 !important;
  }
}

/** ---------------------------- //
 *  Light Mode — Responsive
*/

@media (min-width: 768px) {
  :is(html:not(.dark-mode), html.light-mode) .cp-hero-section {
    background-image: url(https://chris-und-partner.com/wp-content/uploads/2025/11/hero-lb-1.webp) !important;
    background-size: contain !important;
    background-position: right !important;
  }
}

@media (max-width: 767px) {
  :is(html:not(.dark-mode), html.light-mode) .cp-light-mob-element {
    display: block !important;
  }

  :is(html:not(.dark-mode), html.light-mode) .cp-dark-mob-element {
    display: none !important;
  }

  .elementor-kit-6 button.cp-theme-toggle {
    width: 40px;
    height: 40px;
    padding: 10px;
  }
}

/** ---------------------------- //
 *  Theme Lock — Force dark mode inside a container
 *  Usage: add class .cp-theme-lock-dark to any wrapper element
*/

.cp-theme-lock-dark {
  /* Re-declare dark-mode token values */
  --e-global-color-primary: #FFFFFF;
  --e-global-color-secondary: rgba(255, 255, 255, 0.75);
  --e-global-color-text: rgba(250, 250, 250, 0.75);
  --e-global-color-accent: transparent;
  background-color: #020202;
  color: #FFFFFF;
}

/* Undo any light-mode overrides for elements inside a locked container */
:is(html:not(.dark-mode), html.light-mode) .cp-theme-lock-dark li.menu-item a:hover,
:is(html:not(.dark-mode), html.light-mode) .cp-theme-lock-dark h1 span,
:is(html:not(.dark-mode), html.light-mode) .cp-theme-lock-dark h2 span,
:is(html:not(.dark-mode), html.light-mode) .cp-theme-lock-dark h3 span,
:is(html:not(.dark-mode), html.light-mode) .cp-theme-lock-dark p span,
:is(html:not(.dark-mode), html.light-mode) .cp-theme-lock-dark span.elementor-heading-title,
:is(html:not(.dark-mode), html.light-mode) .cp-theme-lock-dark .gold-text {
  background: var(--gradient-1); /* keep gold, but restore fill */
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

:is(html:not(.dark-mode), html.light-mode) .cp-theme-lock-dark .cp-dark-element {
  display: block !important;
}

:is(html:not(.dark-mode), html.light-mode) .cp-theme-lock-dark .cp-light-element {
  display: none !important;
}

:is(html:not(.dark-mode), html.light-mode) .cp-theme-lock-dark .elementor-widget-theme-site-logo img,
:is(html:not(.dark-mode), html.light-mode) .cp-theme-lock-dark .cp-gradient img {
  filter: none;
}