/**
 * Sleek FAQ Accordions - Stylesheet
 * Version: 1.1.0 - Distinct FAQ Style
 */

:root {
    /* --- Distinct FAQ Green Theme Color Palette --- */
    --sfa-theme-green-header-start: #28A745; /* A slightly more traditional green */
    --sfa-theme-green-header-end: #218838;   /* Darker shade for gradient */
    --sfa-theme-green-header-hover-start: #2EBF4E;
    --sfa-theme-green-header-hover-end: #28A745;
    --sfa-icon-color: #FFFFFF; /* Icon color on the header */
    --sfa-text-on-green-header: #FFFFFF;

    /* --- Inherited/Consistent Colors (can be same as content accordions or distinct) --- */
    --sfa-theme-green-dark: #137A5A; /* For links or other accents if needed */
    --sfa-theme-green-extralight: #E9F7EF; /* Lighter background for table headers etc. */
    --sfa-subtle-border-color: #A0E6D4;
    --sfa-focus-ring-green: rgba(40, 167, 69, 0.5); /* Focus ring matching new header */

    /* --- General Text & Neutral Colors --- */
    --sfa-primary-text-color: #212121;
    --sfa-secondary-text-color: #424242;
    --sfa-item-background-color: #FFFFFF;
    --sfa-main-border-color: var(--sfa-subtle-border-color);

    /* --- Typography --- */
    --sfa-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --sfa-base-font-size: 16px;
    --sfa-question-font-size: 1.1em;
    --sfa-question-font-weight: 500; /* Slightly lighter than a bold 600 */

    /* --- Spacing --- */
    --sfa-padding-large: 16px;
    --sfa-padding-answer-top-explicit: 20px;
    --sfa-padding-medium: 15px;
    --sfa-padding-small: 10px; /* Increased slightly for icon spacing */
    --sfa-item-margin-bottom: 15px;
    --sfa-border-radius: 6px; /* Slightly less rounded for a sharper FAQ look */
}

/* Responsive adjustments for larger screens */
@media (min-width: 640px) {
    :root {
        --sfa-padding-large: 24px;
        --sfa-padding-answer-top-explicit: 28px;
    }
}


/* --- Main FAQ Accordion Item --- */
.sleek-faq-accordion-item {
    background-color: var(--sfa-item-background-color);
    border: 1px solid var(--sfa-main-border-color);
    border-radius: var(--sfa-border-radius);
    margin-bottom: var(--sfa-item-margin-bottom);
    overflow: hidden;
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.07); /* Slightly adjusted shadow */
}

/* --- FAQ Question (H3) --- */
.sleek-faq-accordion-item h3.sleek-faq-accordion-question {
    margin: 0;
    padding: 0;
    font-size: var(--sfa-question-font-size);
    font-weight: normal; /* Button controls weight */
    line-height: 1.4;
}

/* --- FAQ Accordion Trigger Button (Question) --- */
.sleek-faq-accordion-item .sfa-accordion-trigger {
    display: flex;
    align-items: center;
    /* justify-content: space-between; /* Removed for left-aligned icon */
    width: 100%;
    padding: var(--sfa-padding-medium);
    background-image: linear-gradient(to bottom, var(--sfa-theme-green-header-start), var(--sfa-theme-green-header-end));
    border-style: none;
    text-align: left;
    font-family: var(--sfa-font-family);
    font-size: var(--sfa-question-font-size);
    font-weight: var(--sfa-question-font-weight);
    color: var(--sfa-text-on-green-header);
    cursor: pointer;
    transition: background-image 0.3s ease-in-out;
}

.sleek-faq-accordion-item .sfa-accordion-trigger:hover,
.sleek-faq-accordion-item .sfa-accordion-trigger:focus {
    background-image: linear-gradient(to bottom, var(--sfa-theme-green-header-hover-start), var(--sfa-theme-green-header-hover-end));
    color: var(--sfa-text-on-green-header);
}

/* Accessibility: Focus styles */
.sleek-faq-accordion-item .sfa-accordion-trigger:focus-visible {
    outline: 2px solid var(--sfa-theme-green-dark);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--sfa-focus-ring-green);
}
.sleek-faq-accordion-item .sfa-accordion-trigger:focus {
    outline: 2px solid var(--sfa-theme-green-dark);
    outline-offset: 2px;
}
.sleek-faq-accordion-item .sfa-accordion-trigger:focus:not(:focus-visible) {
    outline: none;
}


/* --- FAQ Accordion Icon (in Question Header - MOVED TO LEFT) --- */
.sfa-accordion-trigger .sfa-icon {
    display: inline-flex; /* Use flex for better centering if needed */
    align-items: center;
    justify-content: center;
    width: 1.2em; /* Slightly wider for chevrons */
    height: 1.2em;
    font-size: 0.8em; /* Adjust icon size relative to text */
    line-height: 1;
    font-weight: bold;
    color: var(--sfa-icon-color);
    transition: transform 0.25s ease-in-out;
    margin-right: var(--sfa-padding-small); /* Space between icon and question text */
    /* margin-left: 0; /* No left margin as it's the first item */
}

.sfa-accordion-trigger .sfa-icon::before {
    content: '\203A'; /* Right-pointing single angle quotation mark (›) */
    display: block; /* Helps with transform origin if rotating */
}

.sfa-accordion-trigger[aria-expanded="true"] .sfa-icon::before {
    content: '\2304'; /* Downwards arrow with corner (⌄) - or use '\25BC' for filled triangle ▼ */
    /* transform: rotate(90deg); /* If using a right-pointing arrow that needs rotation */
}
/* If you use an icon that needs rotation, uncomment and adjust:
.sfa-accordion-trigger[aria-expanded="true"] .sfa-icon {
    transform: rotate(90deg);
}
.sfa-accordion-trigger[aria-expanded="false"] .sfa-icon {
    transform: rotate(0deg);
}
*/

/* --- FAQ Accordion Answer Area --- */
.sleek-faq-accordion-answer {
    background-color: var(--sfa-item-background-color);
    color: var(--sfa-secondary-text-color);
    font-size: var(--sfa-base-font-size);
    line-height: 1.7;

    box-sizing: border-box;
    overflow: hidden;
    max-height: 0;
    padding-left: var(--sfa-padding-large);
    padding-right: var(--sfa-padding-large);
    padding-top: 0;
    padding-bottom: 0;
    border-top-width: 0;
    border-top-style: solid;
    border-top-color: transparent;
    transition: max-height 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
                padding-top 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
                padding-bottom 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
                border-top-width 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
                border-top-color 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.sleek-faq-accordion-answer.sfa-content-hidden {
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-top-width: 0 !important;
    border-top-color: transparent !important;
}

.sfa-accordion-trigger[aria-expanded="true"] + .sleek-faq-accordion-answer {
    padding-top: var(--sfa-padding-answer-top-explicit);
    padding-bottom: var(--sfa-padding-large);
    border-top-width: 1px;
    border-top-color: var(--sfa-main-border-color);
}


/* --- Styling for basic HTML elements within the answer --- */
.sleek-faq-accordion-answer > *:first-child {
    margin-top: 0;
}

.sleek-faq-accordion-answer p {
    margin-bottom: 1.2em;
}
.sleek-faq-accordion-answer p:last-child {
    margin-bottom: 0;
}

.sleek-faq-accordion-answer ul,
.sleek-faq-accordion-answer ol {
    margin-bottom: 1.2em;
    padding-left: 25px;
}
.sleek-faq-accordion-answer ul:last-child,
.sleek-faq-accordion-answer ol:last-child {
    margin-bottom: 0;
}

.sleek-faq-accordion-answer a {
    color: var(--sfa-theme-green-dark);
    text-decoration: underline;
    font-weight: 500;
}
.sleek-faq-accordion-answer a:hover {
    color: var(--sfa-theme-green-header-start); /* Use a FAQ theme green */
    text-decoration: none;
}

.sleek-faq-accordion-answer table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.2em;
    font-size: 0.95em;
}
.sleek-faq-accordion-answer table:last-child {
    margin-bottom: 0;
}

.sleek-faq-accordion-answer th,
.sleek-faq-accordion-answer td {
    border: 1px solid var(--sfa-main-border-color);
    padding: var(--sfa-padding-medium);
    text-align: left;
    vertical-align: top;
}

.sleek-faq-accordion-answer th {
    background-color: var(--sfa-theme-green-extralight);
    font-weight: 600;
    color: var(--sfa-theme-green-dark);
}