/* FAQ Page Specific Styles */

.faq-item {
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 1.5rem;
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-question {
    font-size: 1.3rem;
    color: var(--secondary-color);
    margin-bottom: 0.75rem;
    cursor: pointer;
    position: relative;
    padding-right: 2rem;
    transition: var(--transition);
    font-family: var(--font-title);
    font-weight: 600;
}

.faq-question:hover {
    color: var(--primary-color);
}

.faq-question::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 0;
    font-size: 1.5rem;
    color: var(--primary-color);
    transition: var(--transition);
}

.faq-item.active .faq-question::after {
    content: '−';
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-item.active .faq-answer {
    max-height: 500px;
}

.faq-answer p {
    padding-top: 0.5rem;
}

.faq-answer a {
    color: var(--primary-color);
    text-decoration: none;
}

.faq-answer a:hover {
    text-decoration: underline;
}

/* Responsive FAQ */
@media (max-width: 768px) {
    .faq-question {
        font-size: 1.1rem;
    }
}

/* Layout: sidebar + main */
.faq-layout{display:flex;gap:2rem;align-items:flex-start;padding:2rem 1rem}
.faq-sidebar{width:260px}
.faq-main{flex:1}
.faq-category.hidden{display:none}
.faq-sidebar ul{list-style:none;padding:0;margin:0}
.faq-sidebar li{margin-bottom:.5rem}
.faq-sidebar .category-link{background:none;border:0;padding:.6rem .25rem;text-align:left;width:100%;cursor:pointer;font-family:var(--font-base);font-size:1rem;border-radius:4px}
.faq-sidebar .category-link:focus{outline:2px solid var(--primary-color);outline-offset:2px}
.faq-sidebar .category-link:hover{background:rgba(0,0,0,0.03)}
.faq-sidebar .category-link.active{font-weight:700;color:var(--primary-color)}

/* Improve spacing and typography */
.faq-main h2{font-size:1.6rem;margin-bottom:1rem}
.faq-question{font-size:1.18rem;margin-bottom:.5rem;cursor:pointer}
.faq-answer p{margin:0.5rem 0 0}

/* Make faq-question focusable styling */
.faq-question:focus{outline:2px solid rgba(0,0,0,0.08);outline-offset:3px}

/* Mobile: collapse sidebar into top nav */
@media (max-width: 900px){
    .faq-layout{flex-direction:column}
    .faq-sidebar{width:100%;order:1}
    .faq-main{order:2}
}

@media (max-width:480px){
    .faq-sidebar .category-link{font-size:.95rem;padding:.5rem}
}