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

:root {
  --primary: #339933;
  --primary-hover: #2b7f2b;
  --brand-blue: #0063e5;
  --surface: #f8fafc;
  --dark-navy: #0f172a;
  --hero-dark: #020617;
}

body {
  @apply font-sans antialiased text-slate-900;
  background: var(--surface);
}

/* Zendesk Form Customization */
.request-form input, .request-form textarea, .request-form select {
  @apply w-full rounded-2xl border-slate-200 focus:ring-4 focus:ring-primary/10 focus:border-primary px-5 py-4 transition-all !important;
}

.request-form label {
  @apply block text-sm font-black text-slate-700 mb-3 uppercase tracking-widest !important;
}

.request-form input[type="submit"] {
  @apply bg-primary text-white px-12 py-5 rounded-2xl text-lg font-black shadow-2xl shadow-primary/30 hover:scale-[1.02] active:scale-95 transition-all uppercase tracking-widest cursor-pointer border-none !important;
}

/* Search Bar Override */
#query {
  @apply w-full pl-14 pr-6 py-5 bg-white rounded-2xl border-none shadow-2xl focus:ring-4 focus:ring-slate-900/10 text-lg placeholder:text-slate-400 text-slate-900 outline-none transition-all !important;
}

.search-icon {
  @apply absolute left-5 top-1/2 -translate-y-1/2 text-slate-400 z-10 !important;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  display: inline-block;
  vertical-align: middle;
}