/* ===================================
   FAQ Page Improvements & Fixes
   =================================== */

/* Header spacing fix - ensure content starts after header */
.faq-page-area,
.chy-clients-page-area,
.chy-hero-1-area,
.body-bg-1,
.chy-trusted-1-area,
.chy-services-1-area,
.chy-solutions-1-area,
.chy-research-1-area,
.qr-system-area,
.project-page-area,
.chy-price-card-1-area,
.chy-video-1-area,
.packages-page-wrapper,
.contact-page-area,
.chy-about-2-area,
.body-bg-2,
.chy-team-2-area,
.blog-page-2-area,
.blog-details-area {
  margin-top: 100px; /* Space for transparent fixed header */
}

@media (max-width: 991px) {
  .faq-page-area,
  .chy-clients-page-area,
  .chy-hero-1-area,
  .body-bg-1,
  .chy-trusted-1-area,
  .chy-services-1-area,
  .chy-solutions-1-area,
  .chy-research-1-area,
  .qr-system-area,
  .project-page-area,
  .chy-price-card-1-area,
  .chy-video-1-area,
  .packages-page-wrapper,
  .contact-page-area,
  .chy-about-2-area,
  .body-bg-2,
  .chy-team-2-area,
  .blog-page-2-area,
  .blog-details-area {
    margin-top: 80px;
  }
}

@media (max-width: 575px) {
  .faq-page-area,
  .chy-clients-page-area,
  .chy-hero-1-area,
  .body-bg-1,
  .chy-trusted-1-area,
  .chy-services-1-area,
  .chy-solutions-1-area,
  .chy-research-1-area,
  .qr-system-area,
  .project-page-area,
  .chy-price-card-1-area,
  .chy-video-1-area,
  .packages-page-wrapper,
  .contact-page-area,
  .chy-about-2-area,
  .body-bg-2,
  .chy-team-2-area,
  .blog-page-2-area,
  .blog-details-area {
    margin-top: 70px;
  }
}

/* Accordion smooth transitions */
.accordion-collapse {
  transition: height 0.35s ease;
}

/* Fix accordion button alignment */
.accordion-button {
  align-items: flex-start !important;
}

.accordion-button .faq-number {
  margin-top: 2px;
}

/* Better text wrapping for long titles */
.accordion-button .title {
  word-break: break-word;
  hyphens: auto;
}

/* Icon rotation fix */
.accordion-button .icon i {
  transition: transform 0.3s ease;
}

.accordion-button:not(.collapsed) .icon i {
  transform: rotate(45deg);
}

/* Improve accordion body readability */
.accordion-body {
  line-height: 1.9;
}

.accordion-body ul {
  list-style-position: outside;
  padding-left: 25px;
  margin-top: 12px;
  margin-bottom: 12px;
}

.accordion-body ul li {
  margin-bottom: 10px;
  padding-left: 5px;
}

.accordion-body ul li:last-child {
  margin-bottom: 0;
}

.accordion-body ol {
  list-style-position: outside;
  padding-left: 25px;
  margin-top: 12px;
  margin-bottom: 12px;
}

.accordion-body ol li {
  margin-bottom: 10px;
  padding-left: 5px;
}

/* Better spacing for paragraphs in accordion */
.accordion-body p + p {
  margin-top: 15px;
}

.accordion-body p + ul,
.accordion-body p + ol {
  margin-top: 15px;
}

.accordion-body ul + p,
.accordion-body ol + p {
  margin-top: 15px;
}

/* Category section smooth appearance */
.faq-category-section {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.faq-category-section.hidden {
  display: none;
}

/* Improve hover effects */
.accordion-item {
  will-change: transform, box-shadow;
}

.faq-pill {
  will-change: transform, background-color;
}

/* Fix for nested accordions - prevent closing parent when opening child */
.accordion-item .accordion-item {
  margin-top: 15px;
}

/* Better focus states for accessibility */
.accordion-button:focus {
  outline: 2px solid var(--chy-pr-1);
  outline-offset: 2px;
}

.faq-pill:focus {
  outline: 2px solid var(--chy-pr-1);
  outline-offset: 2px;
}

/* Loading state */
.faq-category-section.loading {
  opacity: 0.5;
  pointer-events: none;
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Fix z-index issues */
.faq-category-header {
  position: relative;
  z-index: 1;
}

.accordion-item {
  position: relative;
  z-index: 0;
}

.accordion-item:hover {
  z-index: 1;
}

/* Better mobile touch targets */
@media (max-width: 767px) {
  .accordion-button {
    min-height: 60px;
    padding: 15px 18px;
  }
  
  .faq-pill {
    min-height: 44px;
  }
}

/* Fix for iOS Safari */
@supports (-webkit-touch-callout: none) {
  .accordion-button {
    -webkit-tap-highlight-color: transparent;
  }
  
  .faq-pill {
    -webkit-tap-highlight-color: transparent;
  }
}

/* Print styles */
@media print {
  .faq-category-pills,
  .faq-cta-section {
    display: none;
  }
  
  .accordion-collapse {
    display: block !important;
    height: auto !important;
  }
  
  .accordion-button {
    pointer-events: none;
  }
  
  .accordion-item {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* Performance optimization */
.faq-page-area * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Team section color improvements */
.chy-team-2-item .main-img::after {
  background: linear-gradient(90deg, #5b00aa 0%, #7a2dd4 100%) !important;
  opacity: 0.9;
}

.chy-team-2-item:hover .main-img::after {
  background: linear-gradient(90deg, #4a0090 0%, #6b26c4 100%) !important;
  opacity: 1;
}

.chy-team-2-item .content-wrap {
  background: rgba(91, 0, 170, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(91, 0, 170, 0.2);
}

.chy-team-2-item:hover .content-wrap {
  background: rgba(91, 0, 170, 0.2);
  border-color: rgba(91, 0, 170, 0.3);
}

.chy-team-2-item .name {
  color: #ffffff !important;
  font-weight: 700;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 1.1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.5px;
}

.chy-team-2-item .bio {
  color: #ffffff !important;
  font-weight: 600;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 0.9rem;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .accordion-collapse,
  .accordion-button .icon i,
  .faq-category-section,
  .accordion-item,
  .faq-pill {
    transition: none !important;
    animation: none !important;
  }
}

