/* Dark mode (experimental).
   Active when <html data-theme="dark">: set by the inline script in <head> from the visitor's
   saved choice (localStorage "etu-theme") or, without one, from prefers-color-scheme.
   The watercolor art stays as painted; only the paper turns to a night sky (shn_bg_b*_dark.webp,
   made from the day textures) and the art is dimmed a touch so it doesn't glare. */

html[data-theme="dark"] {
  color-scheme: dark;
  --etu-night: #0e1b30;
  --etu-night-2: #13253f;
  --etu-ink: #c8d3de;
  --etu-ink-soft: #9fb0c0;
  --etu-blue-light: #5eaee6;
  --etu-orange-light: #ff7a2e;
}

html[data-theme="dark"],
html[data-theme="dark"] body {
  background-color: var(--etu-night);
  color: var(--etu-ink);
}

/* Loader */
html[data-theme="dark"] .loader { background: var(--etu-night); }
html[data-theme="dark"] .etu-loader .etu-arc,
html[data-theme="dark"] .etu-loader .etu-bar { stroke: var(--etu-blue-light); }

/* Paper -> night sky */
html[data-theme="dark"] .painted-background { background-image: url(../images/shn_bg_b_dark.webp); background-color: var(--etu-night); }
html[data-theme="dark"] .painted-background-rev { background-image: url(../images/shn_bg_b_rev_dark.webp); background-color: var(--etu-night); }
html[data-theme="dark"] .the-overlay { background-color: rgba(14, 27, 48, 0.08); }

/* Art: a little dimmer, clouds become thin night clouds */
html[data-theme="dark"] .scene .layer > div:not(.svc-items),
html[data-theme="dark"] .svc-item-icon {
  filter: brightness(0.86) saturate(0.92);
}
html[data-theme="dark"] .thecloud-1,
html[data-theme="dark"] .thecloud-2,
html[data-theme="dark"] .theh-p-cloud-big-l,
html[data-theme="dark"] .theh-p-cloud-big-r,
html[data-theme="dark"] .theh-p-cloud-small-l {
  opacity: 0.4;
  filter: brightness(0.8) saturate(0.8);
}
/* Narrow screens outline the hero text in pale blue so it reads over the art; on the night sky use a soft dark glow instead */
html[data-theme="dark"] .wellcome-scrn-textdiv { text-shadow: 0 0 6px rgba(14, 27, 48, 0.9), 0 0 2px rgba(14, 27, 48, 0.9); }
/* Pencil-line icons and the stars/constellation are drawn in dark ink: lift them so they read on the night sky */
html[data-theme="dark"] .svc-icon-gear,
html[data-theme="dark"] .svc-item-icon[src*="o_svc_gear"],
html[data-theme="dark"] .theh-p-constellation,
html[data-theme="dark"] .theh-x-swirl1,
html[data-theme="dark"] .theh-x-swirl2 {
  filter: invert(0.85) hue-rotate(180deg) brightness(1.05);
}

/* Text */
html[data-theme="dark"] .etu-bluecolor,
html[data-theme="dark"] .color-app-development { color: var(--etu-blue-light) !important; }
html[data-theme="dark"] .etu-orangecolor { color: var(--etu-orange-light) !important; }
html[data-theme="dark"] .color-sservices { color: #d9dde8 !important; }
html[data-theme="dark"] .color-hp { color: #c38ad8 !important; }
html[data-theme="dark"] .color-consulting { color: #8cc3d8 !important; }
html[data-theme="dark"] #ourhome p,
html[data-theme="dark"] #ourhome strong,
html[data-theme="dark"] #ourhome span:not(.etu-orangecolor),
html[data-theme="dark"] #our-feature p,
html[data-theme="dark"] #our-services p { color: var(--etu-ink); }

/* Navbar (sticky white bar) and mobile menu */
html[data-theme="dark"] .bg-transparent-light.fixedmenu { background: var(--etu-night-2); }
@media (max-width: 991px) {
  html[data-theme="dark"] .navbar.menu-open {
    background: var(--etu-night) url(../images/shn_bg_b_dark.webp) 50% 0 / 100% 150% no-repeat;
    box-shadow: 0 -10px 24px -14px rgba(0, 0, 0, .8);
  }
  html[data-theme="dark"] .navbar.fixedmenu.menu-open { box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .8); }
  html[data-theme="dark"] .navbar.menu-open .navbar-collapse {
    background: linear-gradient(rgba(94, 174, 230, .4), rgba(94, 174, 230, .4)) 0 2px / 100% 1.5px no-repeat;
  }
}
html[data-theme="dark"] .fixedmenu { box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.8); }
html[data-theme="dark"] .navbar .nav-link { color: var(--etu-blue-light); }
html[data-theme="dark"] .navbar .nav-item.active .nav-link,
html[data-theme="dark"] .navbar .nav-link:hover { color: #fff; }
html[data-theme="dark"] .bg-transparent-light .navbar-toggler span,
html[data-theme="dark"] #sidemenu_toggle span { background: var(--etu-blue-light); }
html[data-theme="dark"] .navbar-brand img { filter: brightness(1.55) saturate(0.9); }

/* Client cards keep their white logo plates, just softer */
html[data-theme="dark"] #our-feature .badge { opacity: 0.92; }

/* Contact section + footer: deeper brand blue */
html[data-theme="dark"] .etu-blue-background { background-color: #0a2c4d; }
html[data-theme="dark"] .side-menu { background: #0a2c4d; }

/* Map placeholder: night version of the illustrated map */
html[data-theme="dark"] .map-consent {
  background-color: #0b1a2e;
  background-image: url("../images/map-placeholder-dark.webp?v=1");
}
html[data-theme="dark"] .map-consent.is-loaded { background: none; }
html[data-theme="dark"] .map-consent-card {
  background: rgba(14, 27, 48, 0.9);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}
html[data-theme="dark"] #map-container .map-consent-address { color: var(--etu-ink); }
html[data-theme="dark"] #map-container .map-consent-note { color: var(--etu-ink-soft); }
html[data-theme="dark"] #map-container iframe { filter: invert(0.9) hue-rotate(180deg) brightness(0.95); }

/* Contact modal */
html[data-theme="dark"] .etu-contact-modal .modal-content {
  background: var(--etu-night-2);
  border-top-color: var(--etu-blue-light);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .etu-contact-title { color: var(--etu-blue-light); }
html[data-theme="dark"] .etu-contact-heading { border-bottom-color: var(--etu-blue-light); }
html[data-theme="dark"] .etu-contact-modal .etu-contact-sub { color: var(--etu-orange-light); }
html[data-theme="dark"] .etu-field label { color: var(--etu-ink); }
html[data-theme="dark"] .etu-field input,
html[data-theme="dark"] .etu-field textarea {
  color: #e6edf3;
  background: #0e1b30;
  border-color: #2a3f5c;
}
html[data-theme="dark"] .etu-field input:focus,
html[data-theme="dark"] .etu-field textarea:focus { background: #0b1626; border-color: var(--etu-blue-light); }
html[data-theme="dark"] .etu-contact-modal .etu-form-alt,
html[data-theme="dark"] .etu-contact-done-text { color: var(--etu-ink-soft); }
html[data-theme="dark"] .etu-form-alt a,
html[data-theme="dark"] .etu-contact-done-title { color: var(--etu-blue-light); }
html[data-theme="dark"] .etu-contact-modal .contact-form-status.is-success { background: #10304f; color: var(--etu-blue-light); }

/* Theme switch (both themes): watercolor moon in day mode (go to night), sun in night mode */
.etu-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-left: 0.5rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.etu-theme-toggle img {
  display: block;
  width: 30px;
  height: 30px;
  transition: transform 0.35s cubic-bezier(.34, 1.56, .64, 1), filter 0.2s ease;
}
.etu-theme-toggle:hover img,
.etu-theme-toggle:focus-visible img { transform: rotate(-15deg) scale(1.12); }
/* no focus ring on click (keyboard focus still shows via the tilt/scale above) */
.etu-theme-toggle:focus,
.etu-theme-toggle:focus-visible,
.etu-theme-toggle:active { outline: none; box-shadow: none; }
.etu-theme-toggle .etu-theme-sun { display: none; }
html[data-theme="dark"] .etu-theme-toggle .etu-theme-moon { display: none; }
html[data-theme="dark"] .etu-theme-toggle .etu-theme-sun { display: block; filter: drop-shadow(0 0 6px rgba(255, 190, 80, 0.45)); }
html[data-theme="dark"] .etu-theme-toggle:hover .etu-theme-sun { transform: rotate(30deg) scale(1.12); }

/* Phones: sits left of the hamburger. Desktop: after the menu links. */
.navbar .etu-theme-toggle { margin-left: auto; margin-right: 0.75rem; }
@media (min-width: 992px) {
  .navbar .etu-theme-toggle { order: 3; margin-left: 1rem; margin-right: 0; }
}