/* Expanding difference-blend dark mode (Darkmode.js) */

.darkmode-layer {
  position: fixed;
  pointer-events: none;
  background: #fff;
  transition-property: transform, border-radius;
  mix-blend-mode: difference;
  z-index: 1000;
}

.darkmode-layer--button {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  right: 28px;
  bottom: 28px;
  left: unset;
  top: unset;
  transform: scale(1);
}

.darkmode-layer--expanded {
  transform: scale(100);
  border-radius: 0;
}

.darkmode-layer--no-transition {
  transition: none;
}

/*
  Keep project banners above the difference layer so they never invert
  during the sweep (Owl transforms defeat isolation/filter tricks).
*/
.carousel__images.owl-carousel,
.carousel__images .owl-stage-outer,
.contact-map {
  position: relative;
  z-index: 1001;
  isolation: isolate;
}

/* Defend against darkmode.js setting .darkmode-ignore { display: inline-block } */
.carousel__images.owl-carousel.owl-loaded {
  display: block;
}

.carousel__images img,
.contact-map iframe {
  isolation: isolate;
  filter: none !important;
}

.darkmode-toggle {
  position: fixed;
  z-index: 1002;
  width: 48px;
  height: 48px;
  right: 28px;
  bottom: 28px;
  left: unset;
  top: unset;
  margin: 0;
  padding: 0;
  border: 1px solid #121111 !important;
  border-radius: 50%;
  background: #121111 !important;
  color: #fff !important;
  cursor: pointer;
  font-size: 0;
  line-height: 0;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Moon — white on black button (light mode) */
.darkmode-toggle::before {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 0;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 20px 20px !important;
  box-shadow: none !important;
  transition: opacity 0.15s ease;
}

.darkmode-toggle:hover {
  background: #2a2a2a !important;
}

.darkmode-toggle:focus-visible {
  outline: 2px solid #121111;
  outline-offset: 3px;
}

/* Keep black button + white icon in dark mode (override library --white) */
body.darkmode--activated .darkmode-toggle,
.darkmode-toggle.darkmode-toggle--white {
  background: #121111 !important;
  border-color: #fff !important;
  color: #fff !important;
}

body.darkmode--activated .darkmode-toggle:hover,
.darkmode-toggle.darkmode-toggle--white:hover {
  background: #2a2a2a !important;
}

body.darkmode--activated .darkmode-toggle:focus-visible {
  outline-color: #fff;
}

/* Sun — white on black button (dark mode) */
body.darkmode--activated .darkmode-toggle::before,
.darkmode-toggle.darkmode-toggle--white::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41'/%3E%3C/svg%3E") !important;
}

@media (prefers-reduced-motion: reduce) {
  .darkmode-layer {
    transition: none;
  }
}

@media screen and (max-width: 768px) {
  .darkmode-toggle,
  .darkmode-layer--button {
    right: 20px;
    bottom: 20px;
    width: 44px;
    height: 44px;
  }
}