/**
 * Dark mode – overrides when body has class .ht-dark-mode
 * Toggle via Appearance → Customize → Site appearance → Enable dark mode.
 * To revert: uncheck that option and publish.
 * All sections use the same dark background for a uniform look.
 */

body.ht-dark-mode {
  --ht-primary: #60a5fa;
  --ht-primary-dark: #3b82f6;
  --ht-text: #f3f4f6;
  --ht-text-muted: #9ca3af;
  --ht-bg: #0f172a;
  --ht-bg-alt: #0f172a;
  --ht-border: #334155;
  --ht-tag-bg: rgba(59, 113, 218, 0.25);
  --ht-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
}

/* Force all sections to use the same dark background – no alternating stripes */
body.ht-dark-mode .ht-section,
body.ht-dark-mode .ht-section-alt,
body.ht-dark-mode .ht-hero,
body.ht-dark-mode .ht-hero-two {
  background: var(--ht-bg);
}

/* Hero / section placeholders */
body.ht-dark-mode .ht-hero-image-placeholder {
  background: linear-gradient(135deg, var(--ht-bg-alt) 0%, rgba(59, 113, 218, 0.2) 100%);
}

body.ht-dark-mode .ht-hero-two-image-placeholder {
  background: linear-gradient(135deg, rgba(59, 113, 218, 0.15) 0%, rgba(59, 113, 218, 0.25) 100%);
}

body.ht-dark-mode .ht-work-process-placeholder,
body.ht-dark-mode .ht-about-intro-placeholder,
body.ht-dark-mode .ht-about-vision-placeholder,
body.ht-dark-mode .ht-service-offerings-placeholder,
body.ht-dark-mode .ht-contact-info-image-placeholder {
  background: linear-gradient(135deg, var(--ht-bg-alt) 0%, rgba(59, 113, 218, 0.2) 100%);
}

/* Service card top colors – darker tints */
body.ht-dark-mode .ht-service-card-top.ht-bg-lavender {
  background: rgba(147, 51, 234, 0.25);
}
body.ht-dark-mode .ht-service-card-top.ht-bg-mint {
  background: rgba(34, 197, 94, 0.2);
}
body.ht-dark-mode .ht-service-card-top.ht-bg-blue {
  background: rgba(59, 113, 218, 0.25);
}
body.ht-dark-mode .ht-service-card-top.ht-bg-yellow {
  background: rgba(245, 158, 11, 0.2);
}
body.ht-dark-mode .ht-service-card-top.ht-bg-peach {
  background: rgba(249, 115, 22, 0.2);
}

/* Why choose us card border */
body.ht-dark-mode .ht-why-card {
  border-color: var(--ht-border);
}

/* About hero / service hero / contact hero – same dark as rest of page */
body.ht-dark-mode .ht-about-hero,
body.ht-dark-mode .ht-service-hero,
body.ht-dark-mode .ht-contact-hero {
  background: var(--ht-bg);
}

body.ht-dark-mode .ht-about-hero-bg-shape.ht-about-hero-bg-left,
body.ht-dark-mode .ht-service-hero-bg-shape.ht-service-hero-bg-left,
body.ht-dark-mode .ht-contact-hero-bg-shape.ht-contact-hero-bg-left {
  background: transparent;
}
body.ht-dark-mode .ht-about-hero-bg-shape.ht-about-hero-bg-right,
body.ht-dark-mode .ht-service-hero-bg-shape.ht-service-hero-bg-right,
body.ht-dark-mode .ht-contact-hero-bg-shape.ht-contact-hero-bg-right {
  background: transparent;
}

/* About intro / key players / service sections – no gradient shapes in dark mode */
body.ht-dark-mode .ht-about-intro-bg-shape {
  background: transparent;
}

body.ht-dark-mode .ht-about-key-players-bg-shape {
  background: transparent;
}

body.ht-dark-mode .ht-service-offerings-bg-shape,
body.ht-dark-mode .ht-service-why-bg-shape {
  background: transparent;
}

/* Footer – no decorative gradient in dark mode */
body.ht-dark-mode .ht-footer::before {
  background: transparent;
}

/* Meet team avatar border */
body.ht-dark-mode .ht-about-meet-team-avatar {
  border-color: var(--ht-border);
}

/* Contact form messages */
body.ht-dark-mode .ht-contact-message-success {
  background: rgba(34, 197, 94, 0.2);
  color: #86efac;
}
body.ht-dark-mode .ht-contact-message-error {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}

/* Focus ring on inputs */
body.ht-dark-mode .ht-contact-form input:focus,
body.ht-dark-mode .ht-contact-form textarea:focus {
  box-shadow: 0 0 0 3px rgba(59, 113, 218, 0.35);
}

/* Service why card icon backgrounds – keep subtle in dark */
body.ht-dark-mode .ht-service-why-color-purple {
  background: rgba(147, 51, 234, 0.2);
}
body.ht-dark-mode .ht-service-why-color-orange {
  background: rgba(249, 115, 22, 0.2);
}
body.ht-dark-mode .ht-service-why-color-blue {
  background: rgba(59, 113, 218, 0.2);
}
body.ht-dark-mode .ht-service-why-color-green {
  background: rgba(34, 197, 94, 0.2);
}