/**
 * Category FAQ - Front-office CSS
 *
 * Two-column grid accordion with rounded cards.
 * Pastel lavender (closed) / soft green (open) palette.
 * Zero JavaScript dependency — native <details>/<summary>.
 *
 * @author  CategoryFaq Developer
 * @license MIT
 */

/* ================================================
   Section wrapper
   ================================================ */
.categoryfaq-section {
    max-width: 1200px;
    margin: 3rem auto;
    padding: 0 15px;
    contain: layout style;
}

.categoryfaq-title {
    font-size: 2rem;
    font-weight: 800;
    text-align: center;
    margin: 0 0 2rem;
    padding: 0;
    color: #1a1f4b;
    line-height: 1.3;
}

/* ================================================
   Two-column grid
   ================================================ */
.categoryfaq-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
    border: none;
}

/* ================================================
   Accordion card
   ================================================ */
.categoryfaq-item {
    background: #f4f5fd;
    border: none;
    border-radius: 14px;
    overflow: hidden;
    transition: background-color 0.2s ease;
}

.categoryfaq-item[open] {
    background: #eef3bc;
}

/* ================================================
   Question (summary)
   ================================================ */
.categoryfaq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    font-weight: 700;
    font-size: 0.92rem;
    color: #1a1f4b;
    line-height: 1.4;
    gap: 12px;
}

/* Remove default markers */
.categoryfaq-question::-webkit-details-marker {
    display: none;
}

.categoryfaq-question::marker {
    display: none;
    content: '';
}

.categoryfaq-question:hover {
    color: #2d3270;
}

.categoryfaq-question:focus-visible {
    outline: 2px solid #6b7cff;
    outline-offset: -2px;
    border-radius: 14px;
}

/* Question text */
.categoryfaq-question-text {
    flex: 1;
}

/* ================================================
   Chevron icon (CSS only)
   ================================================ */
.categoryfaq-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    position: relative;
    transition: transform 0.2s ease;
}

.categoryfaq-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-right: 2.5px solid #1a1f4b;
    border-bottom: 2.5px solid #1a1f4b;
    transform: translate(-50%, -65%) rotate(45deg);
    transition: transform 0.2s ease;
}

/* Open state — chevron up */
.categoryfaq-item[open] > .categoryfaq-question .categoryfaq-icon::before {
    transform: translate(-50%, -35%) rotate(-135deg);
}

/* ================================================
   Answer
   ================================================ */
.categoryfaq-answer {
    padding: 0 20px 18px;
    color: #3a3f6b;
    font-size: 0.88rem;
    line-height: 1.7;
    font-weight: 400;
}

.categoryfaq-answer p {
    margin: 0 0 0.6rem;
}

.categoryfaq-answer p:last-child {
    margin-bottom: 0;
}

.categoryfaq-answer a {
    color: #4a54c4;
    text-decoration: underline;
}

.categoryfaq-answer ul,
.categoryfaq-answer ol {
    padding-left: 1.4rem;
    margin: 0.4rem 0;
}

/* ================================================
   Responsive: single column on mobile
   ================================================ */
@media (max-width: 768px) {
    .categoryfaq-list {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .categoryfaq-title {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .categoryfaq-question {
        padding: 15px 16px;
        font-size: 0.88rem;
    }

    .categoryfaq-answer {
        padding: 0 16px 15px;
        font-size: 0.85rem;
    }
}

/* ================================================
   Print
   ================================================ */
@media print {
    .categoryfaq-list {
        display: block;
    }

    .categoryfaq-item {
        break-inside: avoid;
        background: #fff !important;
        border: 1px solid #ccc;
        margin-bottom: 8px;
    }

    .categoryfaq-icon {
        display: none;
    }
}