/* src/css/faq.css
   FAQ アコーディオンブロック フロントエンド用スタイル
   PostCSS でコンパイルされ assets/css/faq.css に出力される。
*/

/* ── ベース ── */

.faq-accordion { margin: 0; }

.faq-accordion .faq-accordion-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 100%;
}

/* ── アイテム（デフォルト: 下線区切り） ── */

.faq-accordion .faq-item { border-bottom: 1px solid var(--gray_color); }

.faq-accordion .faq-item:first-child { border-top: 1px solid var(--gray_color); }

/* ── 質問ボタン ── */

.faq-accordion .faq-question {
    align-items: center;
    background: transparent;
    border: none;
    color: #333;
    cursor: pointer;
    display: flex;
    font-size: 1.1rem;
    font-weight: 600;
    justify-content: space-between;
    text-align: left;
    transition: all 0.3s ease;
    width: 100%;
}

.faq-accordion .faq-question:hover { background-color: transparent; }

.faq-accordion .faq-question[aria-expanded="true"] .faq-icon svg { transform: rotate(90deg); }

.faq-accordion .faq-icon { display: none; }

/* ── 回答エリア ── */

.faq-accordion .faq-answer {
    height: 0;
    overflow: hidden;
    transition: height 0.35s ease;
}

/* ── スタイル: bordered ── */

.faq-accordion.style-bordered .faq-item {
    border: 1px solid var(--gray_color);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.faq-accordion.style-bordered .faq-item:first-child { border-top: 1px solid var(--gray_color); }

/* ── スタイル: card ── */

.faq-accordion.style-card .faq-item {
    background: #fff;
    border: 1px solid var(--gray_color);
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 1rem;
}

.faq-accordion.style-card .faq-item:first-child { border-top: 1px solid var(--gray_color); }

.faq-accordion.style-card .faq-item .faq-question { border-radius: 12px 12px 0 0; }

@media (max-width: 768px) {
    .faq-accordion .faq-question { font-size: 1rem; }
}

/* ── カスタムスタイル（bg_blue 背景・角丸） ── */

.faq-accordion .faq-item,
.faq-accordion-editor .faq-item-editor {
    background: var(--bg_blue);
    border-radius: 10px;
}

.faq-accordion .faq-item:first-child { border-top: none; }

.faq-accordion .faq-item { border-bottom: none; }

/* ── Q ラベル付き質問 ── */

.faq-accordion .faq-question,
.faq-accordion-editor .faq-item-editor .faq-question-input {
    color: var(--main_color);
    font-weight: 700;
    min-height: 40px;
    padding: 20px 20px 20px 80px;
    position: relative;
}

.faq-accordion .faq-question:before,
.faq-accordion-editor .faq-item-editor .faq-question-input:before {
    background-color: var(--main_color);
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0MCI+PHBhdGggZD0iTTI0LjI2LDI3LjQyYy0uNjIuMzgtMS4zLjY4LTIuMDIuOS0uNzIuMjItMS40OS4zMi0yLjMuMzItMS4yNSwwLTIuMzgtLjI1LTMuNC0uNzQtMS4wMi0uNS0xLjg5LTEuMTQtMi42Mi0xLjk0LS43My0uOC0xLjI5LTEuNzItMS42OS0yLjc2LS40LTEuMDQtLjYtMi4xLS42LTMuMTlzLjIxLTIuMjIuNjQtMy4yNmMuNDItMS4wNCwxLjAxLTEuOTYsMS43NS0yLjc2Ljc0LS44LDEuNjMtMS40NCwyLjY1LTEuOTEsMS4wMi0uNDcsMi4xNC0uNzEsMy4zNC0uNzFzMi4zNi4yNSwzLjM3Ljc2YzEuMDIuNSwxLjg4LDEuMTYsMi42LDEuOTguNzIuODIsMS4yOCwxLjc0LDEuNjgsMi43OC40LDEuMDQuNiwyLjEuNiwzLjE3cy0uMiwyLjE2LS41OSwzLjE3Yy0uMzksMS4wMS0uOTQsMS45LTEuNjQsMi42OWwyLjMzLDIuNjJoLTMuMTJsLS45OC0xLjFaTTE5Ljk2LDI1LjcxYy40MywwLC44NC0uMDUsMS4yMS0uMTYuMzgtLjEuNzItLjI0LDEuMDQtLjQybC0yLjU5LTIuOTNoMy4xMmwxLjE4LDEuMzJjLjMyLS41MS41Ny0xLjA3Ljc0LTEuNjguMTgtLjYxLjI2LTEuMjIuMjYtMS44NSwwLS43NC0uMTItMS40NS0uMzUtMi4xNHMtLjU2LTEuMzAtLjk4LTEuODJjLS40Mi0uNTMtLjk0LS45NS0xLjU2LTEuMjctLjYyLS4zMi0xLjMxLS40OC0yLjA4LS40OHMtMS41MS4xNi0yLjE0LjQ5Yy0uNjIuMzMtMS4xNC43Ni0xLjU2LDEuMzEtLjQyLjU0LS43MywxLjE2LS45NSwxLjg0LS4yMi42OC0uMzIsMS4zNy0uMzIsMi4wOHMuMTEsMS40NS4zNCwyLjE0LjU1LDEuMzAuOTcsMS44MmMuNDIuNTMuOTQuOTUsMS41NiwxLjI3LjYyLjMyLDEuMzIuNDgsMi4xLjQ4WiIgZmlsbD0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIwIi8+PC9zdmc+Cg==");
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 50%;
    content: "";
    height: 40px;
    left: 20px;
    position: absolute;
    top: 12px;
    width: 40px;
}

/* ── 開閉インジケーター（十字→横線） ── */

.faq-question-text {
    flex: 1;
    margin-right: 0;
    padding-right: 40px;
    position: relative;
}

.faq-question-text:before,
.faq-question-text:after {
    background: var(--main_color);
    content: "";
    height: 2px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
}

.faq-question-text:after {
    transform: translateY(-50%) rotate(90deg);
    transition: transform 0.3s ease;
}

[aria-expanded="true"] .faq-question-text:after { transform: translateY(-50%); }

/* ── A ラベル付き回答 ── */

.faq-accordion .faq-answer-content,
.faq-accordion-editor .faq-item-editor .faq-item-content {
    color: var(--black_color);
    line-height: 1.8;
    padding: 16px 20px 20px 80px;
    position: relative;
}

.faq-accordion .faq-answer-content:before,
.faq-accordion-editor .faq-item-editor .faq-item-content:before {
    align-items: center;
    background-color: #fff;
    border: 2px solid var(--main_color);
    border-radius: 50%;
    color: var(--main_color);
    content: "A";
    display: flex;
    font-size: 20px;
    font-weight: 700;
    height: 40px;
    justify-content: center;
    left: 20px;
    line-height: 1;
    position: absolute;
    top: 14px;
    width: 40px;
}

/* ── 回答内リンク ── */

.faq-accordion .faq-answer-content a,
.faq-accordion-editor .faq-item-editor .faq-item-content a {
    color: var(--accent_color, #0073aa);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: opacity 0.2s;
}

.faq-accordion .faq-answer-content a:hover,
.faq-accordion-editor .faq-item-editor .faq-item-content a:hover { opacity: 0.75; }

/* ── エディター内表示（faq-accordion-editor） ── */

.faq-accordion-editor .faq-item-editor .faq-item-header {
    align-items: center;
    flex-direction: row-reverse;
}

.faq-accordion-editor .faq-item-editor .faq-question-input { color: var(--main_color); }

.faq-accordion-editor .faq-item-editor .remove-faq-button { margin-top: 0; position: relative; }

.faq-accordion-editor .faq-item-editor .remove-faq-button:after {
    bottom: -16px;
    color: var(--text_gray);
    content: "削除";
    font-size: 12px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    white-space: nowrap;
}

.faq-accordion-editor .faq-item-editor .faq-toggle-button { margin-top: 0; }

/* ── FAQ セット参照ブロック エディター表示 ── */

.faq-set-ref-editor .faq-set-ref-selected {
    align-items: center;
    background: #f0f9ff;
    border: 2px solid #93c5fd;
    border-radius: 8px;
    display: flex;
    gap: 12px;
    padding: 16px;
}

.faq-set-ref-editor .faq-set-ref-selected .faq-set-ref-icon { flex-shrink: 0; font-size: 28px; }

.faq-set-ref-editor .faq-set-ref-selected .faq-set-ref-title { color: #1d4ed8; font-weight: 700; margin: 0 0 4px; }

.faq-set-ref-editor .faq-set-ref-selected .faq-set-ref-hint { color: #64748b; font-size: 12px; margin: 0; }

.faq-set-ref-editor .faq-set-ref-empty {
    border: 2px dashed #93c5fd;
    border-radius: 8px;
    color: #94a3b8;
    padding: 24px;
    text-align: center;
}

.faq-set-ref-editor .faq-set-ref-empty .faq-set-ref-icon { display: block; font-size: 36px; margin-bottom: 8px; }

.faq-set-ref-editor .faq-set-ref-empty p { margin: 0; }