/* Miralta Mental Health — hand-maintained styles.
   site.css is the compiled Tailwind bundle from the original build (don't edit);
   put any new custom styling here. Theme colors come from the CSS variables
   defined in site.css :root (--background, --primary, --border, ...). */

/* ---------- Mobile menu ---------- */

#mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 60;
}

#mobile-menu-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

#mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 280px;
  background: hsl(var(--background));
  border-left: 1px solid hsl(var(--border));
  padding: 1.5rem;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
  z-index: 70;
}

#mobile-menu.open {
  transform: translateX(0);
}

#mobile-menu .mm-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  opacity: 0.7;
  border-radius: 0.25rem;
  padding: 0.25rem;
}

#mobile-menu .mm-close:hover {
  opacity: 1;
  background: hsl(var(--muted));
}

@media (min-width: 768px) {
  /* menu is mobile-only; never show on desktop */
  #mobile-menu,
  #mobile-menu-overlay {
    display: none;
  }
}

/* ---------- Toast (form success message) ---------- */

.site-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 100;
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  padding: 0.9rem 1.1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-size: 0.875rem;
  max-width: 340px;
  animation: site-toast-in 0.25s ease-out;
}

.site-toast.out {
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.3s ease;
}

@keyframes site-toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Native select (replaces the React combobox) ---------- */

select.service-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23777" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>');
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 1rem;
}

select.service-select:invalid,
select.service-select option[value=''] {
  color: hsl(var(--muted-foreground));
}

/* ---------- Honeypot (spam-bot trap; humans never see it) ---------- */

.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Form validation errors ---------- */

.form-error {
  color: hsl(var(--destructive));
  font-size: 0.875rem;
  margin-top: 0.25rem;
}