/* SEO-Safe Accordion Styles for Mobile
 * Content is always in HTML, only visually hidden for UX
 * Google can crawl all content even when collapsed
 */

/* Accordion container - always visible to search engines */
.seo-accordion {
    position: relative;
}

/* Accordion content - visible in HTML, visually hidden when collapsed */
.seo-accordion-content {
    /* Content is always in DOM, just visually hidden */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    /* Ensure content is accessible to screen readers and crawlers */
    visibility: visible;
}

/* Expanded state */
.seo-accordion-content.expanded {
    max-height: 5000px; /* Large enough for most content */
    opacity: 1;
}

/* FAQ specific styles */
.faq-answer-seo {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    visibility: visible; /* Always visible to crawlers */
    padding: 0;
}

.faq-answer-seo.expanded {
    max-height: 5000px;
    opacity: 1;
    padding: inherit; /* Restore original padding when expanded */
}

/* Toggle button styles */
.accordion-toggle {
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.accordion-toggle:focus {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

/* Icon rotation */
.accordion-icon {
    transition: transform 0.3s ease;
    display: inline-block;
}

.accordion-icon.expanded {
    transform: rotate(180deg);
}

/* Ensure content is readable by screen readers */
@media (prefers-reduced-motion: reduce) {
    .seo-accordion-content,
    .faq-answer-seo {
        transition: none;
    }
}