/* Mega Lock And Key — supplemental styles beyond Tailwind utilities */

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

:focus-visible {
  outline: 3px solid #F4C430;
  outline-offset: 2px;
}

/* Mobile slide-down nav panel */
#mobile-nav-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
#mobile-nav-panel.is-open {
  max-height: 640px;
}

/* Hamburger -> X */
.hamburger-line { transition: transform 0.25s ease, opacity 0.25s ease; }
#mobile-nav-toggle.is-active .line-1 { transform: translateY(7px) rotate(45deg); }
#mobile-nav-toggle.is-active .line-2 { opacity: 0; }
#mobile-nav-toggle.is-active .line-3 { transform: translateY(-7px) rotate(-45deg); }

/* FAQ accordion */
[data-faq-panel] {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
[data-faq-item][data-open="true"] [data-faq-trigger] .faq-chevron {
  transform: rotate(180deg);
}
.faq-chevron { transition: transform 0.25s ease; }

/* Safety call button pulse (used sparingly, once per view) */
@keyframes safety-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244, 196, 48, 0.55); }
  50% { box-shadow: 0 0 0 8px rgba(244, 196, 48, 0); }
}
.safety-pulse { animation: safety-pulse 2.4s ease-in-out infinite; }

/* Form status messages */
.form-success { color: #1a7a3c; }
.form-error { color: #9e1d20; }

/* Key-cut divider motif */
.key-divider {
  height: 10px;
  background-image: repeating-linear-gradient(90deg, #171443 0 6px, transparent 6px 14px);
  opacity: 0.15;
}

.nav-active { color: #F4C430 !important; }