/* ==========================================
   Umami Web Design — Custom Styles
   Supplements Tailwind CSS CDN
   ========================================== */

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

/* Header shadow on scroll */
.header-scrolled {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.08);
}

/* FAQ accordion animation */
.faq-content {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-content.open {
  max-height: 500px;
}

.faq-chevron {
  transition: transform 0.3s ease;
}

.faq-chevron.rotated {
  transform: rotate(180deg);
}

/* Mobile menu transition */
#mobile-menu {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}

#mobile-menu.open {
  max-height: 400px;
}

/* CTA button pulse */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 4px 14px 0 rgba(0, 180, 216, 0.25);
  }
  50% {
    box-shadow: 0 4px 24px 0 rgba(0, 180, 216, 0.4);
  }
}

.cta-pulse {
  animation: pulse-glow 3s ease-in-out infinite;
}

/* Service card hover lift */
.group:hover {
  transform: translateY(-2px);
}

/* Focus styles for accessibility */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #00B4D8;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Selection color */
::selection {
  background-color: rgba(0, 180, 216, 0.15);
  color: inherit;
}