/* ============================================ FAQ ACCORDION STYLES - OnlineTranslation.ae ============================================ CRITICAL FIX: These styles were completely missing from the site, causing FAQ sections to not display properly on the homepage and service pages. ============================================ */ /* ============================================ FAQ SECTION CONTAINER ============================================ */ .faq-section { background: var(--surface-base); position: relative; } .faq-list { display: flex; flex-direction: column; gap: 1rem; margin: 0; padding: 0; list-style: none; /* Performance: Skip rendering until near viewport */ content-visibility: auto; contain-intrinsic-size: auto 500px; } /* ============================================ FAQ ITEM - CARD STYLE ============================================ */ .faq-item { background: var(--surface-base); border: 1px solid var(--border-light); border-radius: 8px; overflow: hidden; transition: all 0.3s ease; } .faq-item:hover { border-color: var(--border-medium); box-shadow: var(--shadow-sm); } /* ============================================ FAQ QUESTION BUTTON ============================================ */ .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; background: transparent; border: none; cursor: pointer; text-align: left; font-family: var(--font-primary, 'Montserrat', sans-serif); font-size: 1.05rem; font-weight: 600; color: var(--text-heading); line-height: 1.4; transition: color 0.2s ease; } .faq-question:hover { color: var(--accent-coral); } .faq-question i { flex-shrink: 0; font-size: 0.875rem; color: var(--accent-coral); transition: transform 0.3s ease; } /* ============================================ FAQ ANSWER - ACCORDION CONTENT ============================================ */ .faq-answer { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.3s ease, opacity 0.3s ease; } .faq-answer p { padding: 0 1.5rem 1.25rem 1.5rem; margin: 0; color: var(--text-body); font-size: 0.95rem; line-height: 1.7; } /* Support for multiple paragraphs */ .faq-answer p + p { padding-top: 0.5rem; } /* Support for lists inside answers */ .faq-answer ul, .faq-answer ol { padding: 0 1.5rem 0.5rem 3rem; margin: 0; color: var(--text-body); font-size: 0.95rem; } .faq-answer li { margin-bottom: 0.5rem; line-height: 1.7; } /* ============================================ OPEN STATE - Show Answer Supports both JS-toggled (.is-open) and native <details>element ([open] attribute) ============================================ */ .faq-item.is-open .faq-answer, details.faq-item[open] .faq-answer { max-height: 1000px; opacity: 1; } .faq-item.is-open .faq-question, details.faq-item[open] .faq-question { color: var(--accent-coral); } .faq-item.is-open .faq-question i, details.faq-item[open] .faq-question i { transform: rotate(180deg); } /* ============================================ ACCESSIBILITY & INTERACTION STATES ============================================ */ .faq-question:focus { outline: 2px solid var(--accent-coral); outline-offset: -2px; } .faq-question:focus-visible { outline: 2px solid var(--accent-coral); outline-offset: 2px; } .faq-question:active { background: var(--surface-raised); } /* Remove tap highlight on mobile */ .faq-question { -webkit-tap-highlight-color: transparent; } /* ============================================ DARK MODE STYLES ============================================ */ [data-theme="dark"] .faq-section, body.theme-dark .faq-section { background: var(--surface-base); } [data-theme="dark"] .faq-item, body.theme-dark .faq-item { background: var(--surface-muted); border-color: var(--border-light); } [data-theme="dark"] .faq-item:hover, body.theme-dark .faq-item:hover { border-color: var(--border-medium); } [data-theme="dark"] .faq-question, body.theme-dark .faq-question { color: var(--text-heading); } [data-theme="dark"] .faq-question:hover, body.theme-dark .faq-question:hover, [data-theme="dark"] .faq-item.is-open .faq-question, body.theme-dark .faq-item.is-open .faq-question, [data-theme="dark"] details.faq-item[open] .faq-question, body.theme-dark details.faq-item[open] .faq-question { color: var(--accent-coral); } [data-theme="dark"] .faq-question i, body.theme-dark .faq-question i { color: var(--accent-coral); } [data-theme="dark"] .faq-answer p, body.theme-dark .faq-answer p, [data-theme="dark"] .faq-answer li, body.theme-dark .faq-answer li { color: var(--text-body); } [data-theme="dark"] .faq-question:active, body.theme-dark .faq-question:active { background: var(--surface-navy); } /* ============================================ MOBILE RESPONSIVE ADJUSTMENTS ============================================ */ @media (max-width: 991px) { .faq-item { border-radius: 6px; } .faq-question { padding: 1.125rem 1.25rem; font-size: 1rem; } .faq-answer p { padding: 0 1.25rem 1.125rem 1.25rem; font-size: 0.925rem; } .faq-answer ul, .faq-answer ol { padding: 0 1.25rem 0.5rem 2.5rem; } } @media (max-width: 767px) { .faq-list { gap: 0.75rem; } .faq-question { padding: 1rem; font-size: 0.95rem; line-height: 1.5; } .faq-question i { font-size: 0.75rem; } .faq-answer p { padding: 0 1rem 1rem 1rem; font-size: 0.9rem; } .faq-answer ul, .faq-answer ol { padding: 0 1rem 0.5rem 2rem; font-size: 0.9rem; } } /* ============================================ ALTERNATIVE FAQ LAYOUTS (Optional) ============================================ */ /* Compact FAQ Style - for sidebars or tighter spaces */ /* Bordered FAQ Style */ /* Minimal FAQ Style - no borders */ /* ============================================ PRINT STYLES ============================================ */ @media print { .faq-item { page-break-inside: avoid; border: 1px solid #ddd; margin-bottom: 1rem; } .faq-answer { max-height: none !important; opacity: 1 !important; } .faq-question i { display: none; } }