/**
 * FAQ Section Styles
 *
 * @package Kursai
 * @since 1.0.0
 */

/* ==========================================================================
   FAQ Section
   ========================================================================== */
.faq {
    padding: 80px 0;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='257' height='398' viewBox='0 0 257 398' fill='none'%3E%3Cpath d='M86.033 277.048L69.1885 190.071L95.2503 185.858C109.005 183.635 121.709 180.653 133.361 176.913C145.014 173.172 154.832 168.428 162.817 162.68C171.165 156.874 177.228 149.579 181.009 140.797C184.731 131.652 185.538 120.565 183.432 107.534C181.618 96.3129 177.715 87.101 171.722 79.8984C166.092 72.6371 158.762 67.5076 149.735 64.5096C140.708 61.5117 130.583 60.9196 119.362 62.7333C107.418 64.6641 97.6627 68.6551 90.098 74.7064C82.4748 80.3957 76.954 87.6023 73.5356 96.3262C70.0587 104.688 69.1979 114.299 70.9531 125.158L1.99808 136.304C-1.87437 114.644 -0.117971 94.4887 7.26727 75.838C14.6525 57.1872 26.9665 41.4541 44.2091 28.6385C61.7552 15.4025 83.7401 6.6489 110.164 2.37781C134.778 -1.60073 157.227 -0.586614 177.512 5.42017C198.101 11.0065 215.018 21.4575 228.265 36.7733C241.874 52.0306 250.639 71.7852 254.559 96.0371C258.596 121.013 256.501 142.523 248.275 160.567C240.411 178.552 227.53 193.077 209.633 204.141C192.098 215.147 170.872 222.849 145.954 227.248L150.644 266.604L86.033 277.048ZM138.883 397.204C125.49 399.369 113.807 397.172 103.832 390.613C94.1613 383.633 88.3605 374.171 86.4297 362.226C84.499 350.281 87.0526 339.654 94.0907 330.345C101.432 320.615 111.799 314.668 125.192 312.503C138.585 310.339 150.117 312.746 159.788 319.726C169.4 326.343 175.172 335.624 177.103 347.569C179.034 359.514 176.509 370.322 169.53 379.993C162.492 389.302 152.276 395.039 138.883 397.204Z' fill='%23E6E8EC' fill-opacity='0.3'/%3E%3C/svg%3E") no-repeat left bottom,
        linear-gradient(180deg, rgba(237, 237, 237, 0.20) 0%, rgba(244, 244, 244, 0.10) 100%);
}

.faq__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 60px;
    align-items: start;
}

/* ==========================================================================
   FAQ Sidebar - Table of Contents
   ========================================================================== */
.faq__sidebar {
    position: sticky;
    top: 120px;
}

.faq__sidebar-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #252a36;
    margin: 0 0 24px 0;
}

.faq__toc {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.faq__toc-item {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #777e90;
    text-decoration: none;
    padding: 10px 0 10px 16px;
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
    position: relative;
}

.faq__toc-item:hover {
    color: #252a36;
}

.faq__toc-item--active {
    color: #252a36;
    border-left-color: #ff6b35;
}

/* ==========================================================================
   FAQ Content
   ========================================================================== */
.faq__content {
    min-width: 0;
}

.faq__header {
    margin-bottom: 40px;
}

.faq__title {
    font-family: 'DM Sans', sans-serif;
    font-size: 40px;
    font-weight: 700;
    color: #252a36;
    margin: 0 0 16px 0;
    line-height: 1.2;
}

.faq__subtitle {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.9;
    color: #777e90;
    margin: 0;
    max-width: 800px;
}

/* ==========================================================================
   FAQ Accordion
   ========================================================================== */
.faq__accordion {
    display: flex;
    flex-direction: column;
}

.faq__item {
    border-bottom: 1px solid #e6e8ec;
}

.faq__item:last-child {
    border-bottom: none;
}

.faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 24px 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    gap: 20px;
}

.faq__question-text {
    font-family: 'DM Sans', sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: #252a36;
    line-height: 1.4;
}

.faq__icon {
    flex-shrink: 0;
    color: #777e90;
    transition: transform 0.3s ease;
}

.faq__item--open .faq__icon {
    transform: rotate(180deg);
}

.faq__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq__item--open .faq__answer {
    max-height: 500px;
}

.faq__answer p {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.9;
    color: #777e90;
    margin: 0;
    padding: 0 0 24px 0;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */
@media (max-width: 1024px) {
    .faq {
        padding: 60px 0;
    }

    .faq__container {
        grid-template-columns: 200px 1fr;
        gap: 40px;
    }

    .faq__title {
        font-size: 32px;
    }

    .faq__question-text {
        font-size: 18px;
    }
}

@media (max-width: 768px) {
    .faq {
        padding: 50px 0;
    }

    .faq__container {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 0 19px;
    }

    .faq__sidebar {
        position: static;
        border-bottom: 1px solid #e6e8ec;
        padding-bottom: 30px;
    }

    .faq__toc {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }

    .faq__toc-item {
        padding: 8px 16px;
        border-left: none;
        border-radius: 20px;
        background: #f3f3f3;
        font-size: 14px;
    }

    .faq__toc-item--active {
        background: #ff6b35;
        color: #ffffff;
    }

    .faq__toc-item:hover {
        background: #e6e8ec;
    }

    .faq__toc-item--active:hover {
        background: #ff6b35;
        color: #ffffff;
    }

    .faq__title {
        font-size: 28px;
    }

    .faq__question {
        padding: 20px 0;
    }

    .faq__question-text {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .faq {
        padding: 40px 0;
    }

    .faq__container {
        padding: 0 15px;
    }

    .faq__sidebar-title {
        font-size: 18px;
    }

    .faq__title {
        font-size: 24px;
    }

    .faq__subtitle {
        font-size: 14px;
    }

    .faq__question-text {
        font-size: 15px;
    }

    .faq__answer p {
        font-size: 14px;
    }
}