/* Smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
}
body {
  font-family: 'Manrope', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Common UI Component Styles --- */

/* Hidden checkbox for interactive elements */
#mobile-menu-toggle,
.faq-item input[type="checkbox"] {
  display: none;
}

/* Expandable content (initially hidden) */
#mobile-menu,
.faq-item-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out, opacity 0.3s ease-out;
  opacity: 0;
}

/* --- Mobile Menu Specific CSS --- */
#mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 40;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s ease;
}

#mobile-menu-toggle:checked ~ #mobile-menu-overlay {
  visibility: visible;
  opacity: 1;
}

#mobile-menu-toggle:checked ~ div > header > div > div > div:last-child > label > svg.menu-icon {
  display: none; /* Hide menu icon when open */
}

#mobile-menu-toggle:checked ~ div > header > div > div > div:last-child > label > svg.close-icon {
  display: block; /* Show close icon when open */
}

#mobile-menu-toggle:checked ~ div > header > div.md\:hidden#mobile-menu {
  max-height: 500px; /* Adjust as needed for content height */
  opacity: 1;
}

#mobile-menu a {
  display: block; /* Make links block level */
  width: 100%; /* Make links take full width */
  padding: 1rem; /* Add padding for touch targets */
}

/* --- FAQ Accordion Specific CSS --- */
.faq-item input[type="checkbox"]:checked ~ .faq-item-answer {
  max-height: 300px; /* Adjust as needed for answer height */
  opacity: 1;
}

.faq-item input[type="checkbox"]:checked ~ label .arrow-icon {
  transform: rotate(180deg);
}

/* Accessibility: Remove hover effects on touch devices for better accessibility */
@media (hover: none) {
  a:hover, button:hover, .hover\:text-orange-500:hover, .hover\:bg-orange-600:hover,
  .hover\:shadow-orange-500\/50:hover, .hover\:-translate-y-0\.5:hover,
  .hover\:scale-105:hover, .hover\:shadow-orange-200:hover,
  .hover\:shadow-2xl:hover, .hover\:ring-orange-300:hover,
  .hover\:border-orange-500:hover, .hover\:bg-orange-50:hover {
    transform: none !important;
    box-shadow: none !important;
    background-color: initial !important;
    color: initial !important;
  }
}