/* FAQ Page Specific Styles */

/* FAQ Icon spacing - Material Icons */
.faq-icon.material-symbols-outlined {
    margin-right: var(--spacing-md);
    font-size: var(--font-size-lg);
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

/* Legacy support for FontAwesome icons during transition */
.faq-icon:not(.material-symbols-outlined) {
    margin-right: var(--spacing-md);
    font-size: var(--font-size-lg);
}

/* FAQ specific accordion spacing */
.faq-accordion .accordion-item {
    margin-bottom: var(--spacing-lg); /* More spacing between FAQ items */
    border: var(--border-width) solid var(--border-color);
    box-shadow: var(--shadow-brutalist);
    border-radius: 0; /* Brutalist design - no rounded corners */
}

/* Make accordion buttons look like figma-button */
.accordion-button.figma-button {
    background: var(--color-white);
    color: var(--color-primary);
    border: none;
    font-family: var(--font-family);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    line-height: 1.2;
    cursor: pointer;
    box-shadow: var(--shadow-brutalist);
    text-align: left;
    width: 100%;
    display: flex;
    align-items: center;
    padding: var(--spacing-lg);
    border-radius: 0; /* Brutalist design */
    text-decoration: none;
}

.accordion-button.figma-button:hover {
    opacity: 0.9;
    background: var(--color-white);
    color: var(--color-primary);
}

.accordion-button.figma-button:focus {
    box-shadow: var(--shadow-brutalist);
    background: var(--color-white);
    color: var(--color-primary);
    border: none;
}

.accordion-button.figma-button:not(.collapsed) {
    background: var(--color-white);
    color: var(--color-primary);
    border: none;
    box-shadow: none;
}

/* Ensure icons in accordion buttons are red */
.accordion-button.figma-button .faq-icon.material-symbols-outlined {
    color: var(--color-primary);
}

/* Accordion body styling */
.accordion-body {
    padding: var(--spacing-lg);
    background: var(--color-white);
    border-top: var(--border-width) solid var(--border-color);
}

/* Coffee button styling */
.coffee-button {
    transition: transform 0.2s ease;
}

.coffee-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-brutalist);
}

/* FAQ links should use existing figma components */
.faq-link {
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    border-bottom: 2px solid var(--color-primary);
}

.faq-link:hover {
    opacity: 0.9;
}