/* ===========================
   FAQ BLOCK (ccb/faq)
=========================== */

.ccb-faq {
    padding-top: var(--ccb-faq-pt-desktop, 64px);
    padding-bottom: var(--ccb-faq-pb-desktop, 64px);
    box-sizing: border-box;
    background: var(--ccb-faq-bg, transparent);
    border: none;
    outline: none;
    box-shadow: none;
}

/* Full width helper (FAQ loads its own CSS, so it can't rely on bundle.css) */
.ccb-faq.cgb--fullwidth {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.wp-block-ccb-faq.ccb-faq {
    width: 100%;
    border: none;
    outline: none;
    box-shadow: none;
}

.wp-block-ccb-faq.ccb-faq.cgb--fullwidth {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.wp-block-ccb-faq.ccb-faq:focus,
.ccb-faq:focus {
    border: none;
    outline: none;
    box-shadow: none;
}

.ccb-faq .cgb-inner {
    width: 100%;
    max-width: var(--cgb-inner-max-desktop, var(--cgb-inner-max, 1100px));
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--cgb-inner-pad-x-desktop, 24px);
    padding-right: var(--cgb-inner-pad-x-desktop, 24px);
}

.editor-styles-wrapper .wp-block-ccb-faq.ccb-faq .cgb-inner {
    max-width: var(--cgb-inner-max-desktop, var(--cgb-inner-max, 1100px));
    margin-left: auto;
    margin-right: auto;
}

.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .wp-block-ccb-faq.ccb-faq .cgb-inner {
    max-width: var(--cgb-inner-max-desktop, var(--cgb-inner-max, 1100px));
    margin-left: auto;
    margin-right: auto;
}

.ccb-faq__header {
    text-align: var(--ccb-faq-align, left);
    margin-bottom: var(--ccb-faq-title-mb-desktop, 20px);
}

.ccb-faq .ccb-faq__title {
    font-size: var(--ccb-faq-title-fs-desktop, 32px);
    line-height: 1.2;
    margin: 0 0 var(--ccb-faq-title-mb-desktop, 20px);
    color: var(--ccb-faq-title-color, #0f172a);
}

.ccb-faq__intro {
    margin: 0;
    color: var(--ccb-faq-intro-color, #334155);
    font-size: 16px;
    line-height: 1.6;
}

.ccb-faq__items {
    display: flex;
    flex-direction: column;
    gap: var(--ccb-faq-item-gap-desktop, 16px);
}

.ccb-faq__item {
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    transition: background-color var(--ccb-faq-transition-duration, 220ms) var(--ccb-faq-transition-easing, ease), border-color var(--ccb-faq-transition-duration, 220ms) var(--ccb-faq-transition-easing, ease);
}

.ccb-faq__question {
    margin: 0;
}

.ccb-faq__question-btn {
    width: 100%;
    text-align: left;
    padding: var(--ccb-faq-item-py-desktop, 20px) var(--ccb-faq-item-px-desktop, 20px);
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
}

.ccb-faq__question-btn:focus-visible {
    outline: 2px solid var(--ccb-faq-icon-color, #5e17eb);
    outline-offset: 2px;
    border-radius: calc(var(--ccb-faq-radius, 12px) - 2px);
}

.ccb-faq__question-text {
    font-family: var(--cgb-font-head, 'Lato', sans-serif);
    font-size: var(--ccb-faq-question-fs-desktop, 18px);
    line-height: var(--ccb-faq-question-lh, 1.4);
    letter-spacing: var(--ccb-faq-question-ls, 0);
    font-weight: var(--ccb-faq-question-fw, 600);
    color: var(--ccb-faq-question-color, #111827);
}

.ccb-faq__icon {
    position: relative;
    width: clamp(16px, var(--ccb-faq-icon-size-desktop, 18px), 32px);
    height: clamp(16px, var(--ccb-faq-icon-size-desktop, 18px), 32px);
    flex-shrink: 0;
    color: var(--ccb-faq-icon-color, #ffffff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--ccb-faq-transition-duration, 220ms) var(--ccb-faq-transition-easing, ease);
}

.ccb-faq__icon-shape {
    display: block;
    position: relative;
}

.ccb-faq__icon-shape--chevron::before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--ccb-faq-transition-duration, 220ms) var(--ccb-faq-transition-easing, ease);
}

.ccb-faq__icon-shape--plus {
    position: relative;
    width: 14px;
    height: 14px;
}

.ccb-faq__icon-shape--plus::before,
.ccb-faq__icon-shape--plus::after {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 2px;
    background: currentColor;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.ccb-faq__icon-shape--plus::after {
    width: 2px;
    height: 100%;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

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

/*
    Open-state icon behavior:
    - Chevron: rotate the whole icon container (single transform).
        Avoid also rotating the inner chevron, otherwise transforms cancel out.
    - Plus: hide the vertical stroke to become a minus.
*/

.ccb-faq__item.is-open .ccb-faq__icon--plus .ccb-faq__icon-shape--plus::after {
        opacity: 0;
}

.ccb-faq__answer {
    padding: 0 var(--ccb-faq-item-px-desktop, 20px);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height var(--ccb-faq-transition-duration, 220ms) var(--ccb-faq-transition-easing, ease), opacity var(--ccb-faq-transition-duration, 220ms) var(--ccb-faq-transition-easing, ease);
}

.ccb-faq__item.is-open .ccb-faq__answer {
    max-height: 1200px;
    opacity: 1;
    padding-top: var(--ccb-faq-answer-py-desktop, 20px);
    padding-bottom: var(--ccb-faq-answer-py-desktop, 20px);
}

.ccb-faq__answer-text {
    font-family: var(--cgb-font-body, 'Open Sans', sans-serif);
    font-size: var(--ccb-faq-answer-fs-desktop, 15px);
    line-height: var(--ccb-faq-answer-lh, 1.7);
    letter-spacing: var(--ccb-faq-answer-ls, 0);
    font-weight: var(--ccb-faq-answer-fw, 400);
    color: var(--ccb-faq-answer-color, #4b5563);
}

.ccb-faq__answer-text p {
    margin: 0 0 0.85em 0;
}

.ccb-faq__answer-text p:last-child {
    margin-bottom: 0;
}

.ccb-faq__answer-text ul,
.ccb-faq__answer-text ol {
    /* Ensure indentation even when theme/editor resets list styles */
    margin: 0.6em 0 0.85em;
    padding-left: 1.25em;
    list-style-position: outside;
}

.ccb-faq__answer-text li {
    margin: 0.35em 0;
}

.ccb-faq__item-actions,
.ccb-faq__schema-row-actions,
.ccb-faq__list-row-actions {
    display: flex;
    gap: 8px;
    padding: 12px 20px 16px;
}

.ccb-faq__list-manager {
    display: grid;
    gap: 16px;
}

.ccb-faq__list-row {
    border: 1px solid var(--ccb-faq-border-color, #e5e7eb);
    border-radius: 10px;
    padding: 12px;
    background: #fafafa;
}

.ccb-faq__add {
    margin-top: 20px;
}

.ccb-faq__schema-preview {
    background: #0b1021;
    color: #e2e8f0;
    border-radius: 10px;
    padding: 12px;
    margin-top: 12px;
}

.ccb-faq__schema-preview pre {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
}

.ccb-faq__schema-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    color: #cbd5e1;
}

.ccb-faq__schema-status {
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #1f2937;
}

.ccb-faq__schema-status.is-ok {
    color: #bbf7d0;
}

.ccb-faq__schema-status.has-warning {
    color: #fcd34d;
}

.ccb-faq__schema-toolbar {
    display: flex;
    gap: 10px;
    margin: 8px 0;
}

/* CARD PRESET */
.ccb-faq--preset-card .ccb-faq__item {
    background: var(--ccb-faq-item-bg, #ffffff);
    border: var(--ccb-faq-border-width, 1px) solid var(--ccb-faq-border-color, #e5e7eb);
    border-radius: var(--ccb-faq-radius, 12px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.ccb-faq--preset-card .ccb-faq__item.is-open {
    background: var(--ccb-faq-open-bg, var(--ccb-faq-active-bg, #f3f4f6));
    border-color: var(--ccb-faq-border-color, #e5e7eb);
}

.ccb-faq--preset-card .ccb-faq__question-btn:hover {
    background: var(--ccb-faq-hover-bg, #f8fafc);
}

/* NOVADE PRESET */
.ccb-faq--preset-novade .ccb-faq__header {
    text-align: center;
}

.ccb-faq--preset-novade .ccb-faq__title {
    margin-left: auto;
    margin-right: auto;
}

.ccb-faq--preset-novade .ccb-faq__items {
    gap: 0;
}

.ccb-faq--preset-novade .ccb-faq__item {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.ccb-faq--preset-novade .ccb-faq__question {
    border-bottom: 1px solid var(--ccb-faq-separator, rgba(255, 255, 255, 0.25));
}

.ccb-faq--preset-novade .ccb-faq__item:last-child .ccb-faq__question {
    border-bottom: none;
}

.ccb-faq--preset-novade .ccb-faq__question-btn {
    padding: var(--ccb-faq-item-py-desktop, 20px) var(--ccb-faq-item-px-desktop, 20px);
    color: var(--ccb-faq-question-color, #ffffff);
    background: transparent;
}

.ccb-faq--preset-novade .ccb-faq__question-btn:hover {
    background: var(--ccb-faq-hover-bg, transparent);
}

.ccb-faq--preset-novade .ccb-faq__icon {
    color: var(--ccb-faq-icon-color, #ffffff);
}

.ccb-faq--preset-novade .ccb-faq__item.is-open .ccb-faq__icon-shape--plus::after {
    opacity: 0;
}

.ccb-faq--preset-novade .ccb-faq__answer {
    padding-left: var(--ccb-faq-item-px-desktop, 20px);
    padding-right: var(--ccb-faq-item-px-desktop, 20px);
    padding-top: var(--ccb-faq-answer-py-desktop, 20px);
    padding-bottom: var(--ccb-faq-answer-py-desktop, 20px);
}

.ccb-faq--preset-novade .ccb-faq__answer-text {
    color: var(--ccb-faq-answer-color, rgba(255, 255, 255, 0.88));
}

@media (max-width: 1024px) {
    .ccb-faq {
        padding-top: var(--ccb-faq-pt-tablet, var(--ccb-faq-pt-desktop, 48px));
        padding-bottom: var(--ccb-faq-pb-tablet, var(--ccb-faq-pb-desktop, 48px));
    }

    .ccb-faq .cgb-inner {
        max-width: var(--cgb-inner-max-tablet, var(--cgb-inner-max-desktop, 1100px));
    }

    .editor-styles-wrapper .wp-block-ccb-faq.ccb-faq .cgb-inner {
        max-width: var(--cgb-inner-max-tablet, var(--cgb-inner-max-desktop, 1100px));
    }

    .ast-page-builder-template .entry-content[data-ast-blocks-layout] > .wp-block-ccb-faq.ccb-faq .cgb-inner {
        max-width: var(--cgb-inner-max-tablet, var(--cgb-inner-max-desktop, 1100px));
    }

    .ccb-faq .cgb-inner {
        padding-left: var(--cgb-inner-pad-x-tablet, var(--cgb-inner-pad-x-desktop, 20px));
        padding-right: var(--cgb-inner-pad-x-tablet, var(--cgb-inner-pad-x-desktop, 20px));
    }

    .ccb-faq__items {
        gap: var(--ccb-faq-item-gap-tablet, var(--ccb-faq-item-gap-desktop, 14px));
    }

    .ccb-faq .ccb-faq__title {
        font-size: var(--ccb-faq-title-fs-tablet, var(--ccb-faq-title-fs-desktop, 32px));
        margin-bottom: var(--ccb-faq-title-mb-tablet, var(--ccb-faq-title-mb-desktop, 18px));
    }

    .ccb-faq__question-text {
        font-size: var(--ccb-faq-question-fs-tablet, var(--ccb-faq-question-fs-desktop, 17px));
    }

    .ccb-faq__question-btn {
        padding: var(--ccb-faq-item-py-tablet, var(--ccb-faq-item-py-desktop, 20px)) var(--ccb-faq-item-px-tablet, var(--ccb-faq-item-px-desktop, 20px));
    }

    .ccb-faq__answer-text {
        font-size: var(--ccb-faq-answer-fs-tablet, var(--ccb-faq-answer-fs-desktop, 14px));
    }

    .ccb-faq__answer {
        padding-left: var(--ccb-faq-item-px-tablet, var(--ccb-faq-item-px-desktop, 20px));
        padding-right: var(--ccb-faq-item-px-tablet, var(--ccb-faq-item-px-desktop, 20px));
    }

    .ccb-faq__item.is-open .ccb-faq__answer {
        padding-top: var(--ccb-faq-answer-py-tablet, var(--ccb-faq-answer-py-desktop, 20px));
        padding-bottom: var(--ccb-faq-answer-py-tablet, var(--ccb-faq-answer-py-desktop, 20px));
    }

    .ccb-faq__icon {
        width: clamp(16px, var(--ccb-faq-icon-size-tablet, var(--ccb-faq-icon-size-desktop, 18px)), 32px);
        height: clamp(16px, var(--ccb-faq-icon-size-tablet, var(--ccb-faq-icon-size-desktop, 18px)), 32px);
    }
}

@media (max-width: 768px) {
    .ccb-faq {
        padding-top: var(--ccb-faq-pt-mobile, var(--ccb-faq-pt-tablet, 40px));
        padding-bottom: var(--ccb-faq-pb-mobile, var(--ccb-faq-pb-tablet, 40px));
    }

    .ccb-faq .cgb-inner {
        max-width: var(--cgb-inner-max-mobile, var(--cgb-inner-max-tablet, 1100px));
    }

    .editor-styles-wrapper .wp-block-ccb-faq.ccb-faq .cgb-inner {
        max-width: var(--cgb-inner-max-mobile, var(--cgb-inner-max-tablet, 1100px));
    }

    .ast-page-builder-template .entry-content[data-ast-blocks-layout] > .wp-block-ccb-faq.ccb-faq .cgb-inner {
        max-width: var(--cgb-inner-max-mobile, var(--cgb-inner-max-tablet, 1100px));
    }

    .ccb-faq .cgb-inner {
        padding-left: var(--cgb-inner-pad-x-mobile, var(--cgb-inner-pad-x-tablet, 16px));
        padding-right: var(--cgb-inner-pad-x-mobile, var(--cgb-inner-pad-x-tablet, 16px));
    }

    .ccb-faq__items {
        gap: var(--ccb-faq-item-gap-mobile, var(--ccb-faq-item-gap-tablet, 12px));
    }

    .ccb-faq .ccb-faq__title {
        font-size: var(--ccb-faq-title-fs-mobile, var(--ccb-faq-title-fs-tablet, 30px));
        margin-bottom: var(--ccb-faq-title-mb-mobile, var(--ccb-faq-title-mb-tablet, 16px));
    }

    .ccb-faq__question-btn {
        padding: var(--ccb-faq-item-py-mobile, var(--ccb-faq-item-py-tablet, 16px)) var(--ccb-faq-item-px-mobile, var(--ccb-faq-item-px-tablet, 16px));
    }

    .ccb-faq__question-text {
        font-size: var(--ccb-faq-question-fs-mobile, var(--ccb-faq-question-fs-tablet, 16px));
    }

    .ccb-faq__answer {
        padding-left: var(--ccb-faq-item-px-mobile, var(--ccb-faq-item-px-tablet, 16px));
        padding-right: var(--ccb-faq-item-px-mobile, var(--ccb-faq-item-px-tablet, 16px));
    }

    .ccb-faq__item.is-open .ccb-faq__answer {
        padding-top: var(--ccb-faq-answer-py-mobile, var(--ccb-faq-answer-py-tablet, 20px));
        padding-bottom: var(--ccb-faq-answer-py-mobile, var(--ccb-faq-answer-py-tablet, 20px));
    }

    .ccb-faq__answer-text {
        font-size: var(--ccb-faq-answer-fs-mobile, var(--ccb-faq-answer-fs-tablet, 14px));
    }

    .ccb-faq__icon {
        width: clamp(16px, var(--ccb-faq-icon-size-mobile, var(--ccb-faq-icon-size-tablet, 18px)), 32px);
        height: clamp(16px, var(--ccb-faq-icon-size-mobile, var(--ccb-faq-icon-size-tablet, 18px)), 32px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ccb-faq__icon,
    .ccb-faq__icon-shape--chevron::before,
    .ccb-faq__answer {
        transition: none;
    }
}