.faq-section {
    padding: var(--spacing-xl) 0; /* Adjust padding as needed */
    background-color: var(--color-background-light); /* Or white, or a light gray */
    color: var(--color-text-dark); /* Ensure text is readable on light background */
}
.faq-page-title {
    font-family: var(--font-heading-primary);
    font-size: 3.5em;
    text-align: center;
    margin-bottom: var(--spacing-md);
    color: var(--color-sapphire-blue-dark);
    padding-top: 50px;
}
.faq-intro-text {
    font-family: var(--font-body);
    font-size: 1.1em;
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--spacing-xl) auto;
    line-height: 1.6;
    color: var(--color-text-dark);
}
.faq-list {
    max-width: 900px;
    margin: 0 auto;
    border-top: 1px solid var(--color-border-light); /* Subtle line above first item */
}
.faq-item {
    border-bottom: 1px solid var(--color-border-light);
    margin-bottom: 0; /* Remove default margins */
}
.faq-question {
    display: block; /* Makes the entire summary area clickable */
    font-family: var(--font-heading-secondary);
    font-size: 1.3em;
    font-weight: 600;
    padding: var(--spacing-md) var(--spacing-sm);
    cursor: pointer;
    color: var(--color-sapphire-blue); /* A nice darker blue for questions */
    position: relative;
    padding-right: 40px; /* Space for the arrow icon */
    transition: color 0.2s ease;
}
.faq-question:hover {
    color: var(--color-accent-gold); /* Highlight on hover */
}
/* Custom arrow icon for details/summary */
.faq-question::marker, /* Hide default marker in some browsers */
.faq-question::-webkit-details-marker { /* Hide default marker in Webkit */
    display: none;
}
.faq-question::after {
    content: '>'; /* Plus icon when closed */
    position: absolute;
    right: var(--spacing-sm);
    top: 50%;
    transform: translateY(-50%) rotate(90deg); /* Rotate for plus icon */
    font-size: 2em;
    line-height: 1;
    color: var(--color-sapphire-blue-dark);
    font-weight: bold;
    transition: transform 0.2s ease;
}
details[open] .faq-answer {
    max-height: 500px; /* Adjust as needed for your content */
    padding: 0 var(--spacing-sm) var(--spacing-md) var(--spacing-sm); /* Padding when open */
}
details[open] .faq-question::after {
    transform: translateY(-50%) rotate(-90deg);
}
.faq-answer {
    font-family: var(--font-body);
    font-size: 1em;
    line-height: 1.6;
    /* 
    padding: 0 var(--spacing-sm) var(--spacing-md) var(--spacing-sm);
    */
    max-height: 0; /* Hidden by default when not open */
    overflow: hidden; /* Hide content that overflows max-height */
    padding: 0 var(--spacing-sm); /* Padding when closed */
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
    color: var(--color-text-dark); /* Main text color */
    /* Ensure a smooth transition if browser supports animating height on details */
    overflow: hidden;
    /* max-height: 0; /* Not needed directly with details/summary, but good for custom js accordions */
    /* transition: max-height 0.3s ease-out, padding 0.3s ease-out; */
}
.faq-answer a {
    color: var(--color-accent-gold);
    text-decoration: none;
    font-weight: 500;
}
.faq-answer a:hover {
    text-decoration: underline;
}
/* Responsive adjustments for FAQ page */
@media (max-width: 768px) {
    .faq-page-title {
        font-size: 2.5em;
    }
    .faq-intro-text {
        font-size: 1em;
        margin-left: var(--spacing-sm);
        margin-right: var(--spacing-sm);
    }
    .faq-question {
        font-size: 1.1em;
        padding: var(--spacing-sm) 35px var(--spacing-sm) var(--spacing-sm);
    }
    .faq-question::after {
        font-size: 1.5em;
        right: var(--spacing-sm);
    }
    .faq-answer {
        font-size: 0.95em;
        padding: 0 var(--spacing-sm) var(--spacing-sm) var(--spacing-sm);
    }
}