/* Hand-written additions to the compiled Tailwind styles in main.css. */

/* Header background before the page is scrolled. */
.header-translucent {
  background-color: rgb(0 0 0 / 0.75);
}

/* Entrance animations. Content stays visible when scripts don't run. */
.js [data-reveal] {
  opacity: 0;
  transform: var(--reveal-from, none);
}

.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  transition-delay: var(--reveal-delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Menu chevrons point up while their menu is open. */
[aria-expanded="true"] > .lucide-chevron-down {
  transform: rotate(180deg);
}

[data-services-dropdown]:not([hidden]),
#mobile-menu:not([hidden]) {
  animation: fade-in 0.2s ease-out;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

/* Contact form. */
[data-contact-form] input[type="checkbox"] {
  accent-color: var(--primary);
}

[data-contact-form] select:invalid,
[data-contact-form] select option[value=""] {
  color: var(--muted-foreground);
}

[data-contact-form] select option {
  color: var(--charcoal);
}

.form-status {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--forest);
}