@tailwind base;
@tailwind components;
@tailwind utilities;

.wm-mobile-card-root {
  position: relative !important;
}

.wm-mobile-envelope {
  position: absolute !important;
  top: 0.875rem !important;
  right: 0.875rem !important;
  z-index: 50 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

.wm-mobile-title-pad {
  padding-right: 3rem !important;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

@media (max-width: 640px) {
  .wm-unanswered-hero-img {
    object-position: center 18% !important;
  }
}

/*
  Windmill-inspired structure + Sparkleclean-inspired light accent.
  Dark mode is intentionally untouched.
*/
html:not(.dark) {
  --wm-light-page: #eef7f1;
  --wm-light-surface: #f7fcf9;
  --wm-light-panel: #f1f8f3;
  --wm-light-muted: #e7f1ea;
  --wm-light-border-strong: #bdd4c7;
  --wm-light-border: #cfe2d6;
  --wm-light-border-soft: #e2eee6;
  --wm-accent-50: #ecfdf5;
  --wm-accent-100: #ccfbf1;
  --wm-accent-200: #99f6e4;
  --wm-accent-400: #2dd4bf;
  --wm-accent-500: #14b8a6;
  --wm-accent-600: #0d9488;
  --wm-accent-700: #0f766e;
  --wm-accent-800: #115e59;
  --wm-accent-900: #134e4a;
}

html:not(.dark) body {
  background-color: var(--wm-light-page);
  color: #24262d;
}

html:not(.dark) .bg-white {
  background-color: var(--wm-light-surface) !important;
}

html:not(.dark) .wm-question-card {
  background-color: #f6fff4 !important
}

html:not(.dark) .wm-ask-card {
  background-color: #f6fff4 !important
}

html:not(.dark) .bg-white\/95 {
  background-color: rgb(247 252 249 / 0.95) !important;
}

html:not(.dark) .bg-white\/90 {
  background-color: rgb(247 252 249 / 0.9) !important;
}

html:not(.dark) .bg-gray-50 {
  background-color: var(--wm-light-panel) !important;
}

html:not(.dark) .bg-gray-100 {
  background-color: var(--wm-light-muted) !important;
}

html:not(.dark) .bg-gray-200 {
  background-color: #d5e6da !important;
}

html:not(.dark) .border-gray-100 {
  border-color: var(--wm-light-border-soft) !important;
}

html:not(.dark) .border-gray-200 {
  border-color: var(--wm-light-border) !important;
}

html:not(.dark) .border-gray-300 {
  border-color: var(--wm-light-border-strong) !important;
}

html:not(.dark) .text-gray-900 {
  color: #282a30eb !important;
}

html:not(.dark) .text-gray-800 {
  color: #2b2e36 !important;
}

html:not(.dark) .text-gray-700 {
  color: #24262d !important;
}

html:not(.dark) .text-gray-600 {
  color: #4c4f52 !important;
}

html:not(.dark) .text-gray-500 {
  color: #64748b !important;
}

html:not(.dark) .placeholder-gray-500::placeholder {
  color: #64748b !important;
}

html:not(.dark) .placeholder-gray-600::placeholder {
  color: #4c4f52 !important;
}

html:not(.dark) .bg-blue-50 {
  background-color: var(--wm-accent-50) !important;
}

html:not(.dark) .bg-blue-500 {
  background-color: var(--wm-accent-500) !important;
}

html:not(.dark) .bg-blue-600 {
  background-color: var(--wm-accent-600) !important;
}

html:not(.dark) .bg-blue-700 {
  background-color: var(--wm-accent-700) !important;
}

html:not(.dark) .bg-blue-900 {
  background-color: var(--wm-accent-900) !important;
}

html:not(.dark) .bg-indigo-600 {
  background-color: var(--wm-accent-600) !important;
}

html:not(.dark) .bg-indigo-700 {
  background-color: var(--wm-accent-700) !important;
}

html:not(.dark) .text-blue-200 {
  color: var(--wm-accent-100) !important;
}

html:not(.dark) .text-blue-300 {
  color: var(--wm-accent-200) !important;
}

html:not(.dark) .text-blue-400 {
  color: var(--wm-accent-400) !important;
}

html:not(.dark) .text-blue-600 {
  color: #095ecb !important;
}

html:not(.dark) .text-blue-700 {
  color: #106ee7 !important;
}

html:not(.dark) .text-blue-800 {
  color: var(--wm-accent-800) !important;
}

html:not(.dark) .text-blue-900 {
  color: var(--wm-accent-900) !important;
}

.wm-cta-get-help {
  background-color: #fff;
  color: #4338ca;
}

html:not(.dark) .border-blue-200 {
  border-color: var(--wm-accent-200) !important;
}

html:not(.dark) .border-blue-400 {
  border-color: var(--wm-accent-400) !important;
}

html:not(.dark) .border-blue-500 {
  border-color: var(--wm-accent-500) !important;
}

html:not(.dark) .border-blue-600 {
  border-color: var(--wm-accent-600) !important;
}

html:not(.dark) .border-blue-800 {
  border-color: var(--wm-accent-800) !important;
}

html:not(.dark) .bg-sky-50 {
  background-color: var(--wm-accent-50) !important;
}

html:not(.dark) .bg-sky-400 {
  background-color: var(--wm-accent-400) !important;
}

html:not(.dark) .bg-sky-500 {
  background-color: var(--wm-accent-500) !important;
}

html:not(.dark) .bg-sky-600 {
  background-color: var(--wm-accent-600) !important;
}

html:not(.dark) .text-sky-300 {
  color: var(--wm-accent-200) !important;
}

html:not(.dark) .text-sky-700 {
  color: var(--wm-accent-700) !important;
}

html:not(.dark) .ring-sky-400 {
  --tw-ring-color: var(--wm-accent-400) !important;
}

html:not(.dark) .hover\:bg-blue-600:hover {
  background-color: var(--wm-accent-600) !important;
}

html:not(.dark) .hover\:bg-blue-700:hover {
  background-color: var(--wm-accent-700) !important;
}

html:not(.dark) .hover\:bg-indigo-600:hover {
  background-color: var(--wm-accent-600) !important;
}

html:not(.dark) .hover\:bg-indigo-700:hover {
  background-color: var(--wm-accent-700) !important;
}

html:not(.dark) .hover\:text-blue-700:hover {
  color: var(--wm-accent-700) !important;
}

html:not(.dark) .focus\:border-blue-400:focus {
  border-color: var(--wm-accent-400) !important;
}

html:not(.dark) .focus\:border-blue-500:focus {
  border-color: var(--wm-accent-500) !important;
}

html:not(.dark) .focus\:ring-blue-400:focus {
  --tw-ring-color: var(--wm-accent-400) !important;
}

html:not(.dark) .focus\:ring-blue-500:focus {
  --tw-ring-color: var(--wm-accent-500) !important;
}

html:not(.dark) .focus\:ring-indigo-500:focus {
  --tw-ring-color: var(--wm-accent-500) !important;
}

html:not(.dark) .from-blue-900 {
  --tw-gradient-from: var(--wm-accent-900) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(19 78 74 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

html:not(.dark) .to-blue-200 {
  --tw-gradient-to: var(--wm-accent-200) var(--tw-gradient-to-position) !important;
}

/* Windmill-style focus utilities used throughout the templates */
.focus\:shadow-outline-purple:focus {
  box-shadow: 0 0 0 3px rgb(20 184 166 / 0.38);
}

.focus\:shadow-outline-gray:focus {
  box-shadow: 0 0 0 3px rgb(213 214 215 / 0.45);
}

html.dark .dark\:focus\:shadow-outline-gray:focus {
  box-shadow: 0 0 0 3px rgb(213 214 215 / 0.45);
}