/*
 * phc-faq.css — single source of truth for PHC FAQ accordion styles.
 *
 * CONTRACT: All accordion behavior, open/close animation, plus-icon drawing,
 * hover, typography inside the answer body, and the gold divider colour for
 * elements carrying `phc-faq-item / phc-faq-qrow / phc-faq-answer` classes
 * live in THIS FILE. Do NOT add `.phc-faq-*` rules to `xpro_custom_css` on
 * the section container — doing so recreates the drift this file exists to
 * prevent. Typography of the QUESTION text remains an Elementor widget
 * setting because it is editorial, not structural.
 */

/* ── Fix for asymmetric top/bottom gap around each closed item ── */
/* Elementor's default --row-gap (20px) applies around the collapsed         */
/* .phc-faq-answer flex child, creating 40px of invisible extra space below  */
/* the question. Zeroing the row-gap AND the divider widget's inner padding  */
/* lets the qrow's 32px padding own the full vertical rhythm.                */
.phc-faq-item {
    --row-gap: 0 !important;
}
.phc-faq-item .elementor-widget-divider .elementor-divider {
    padding-block-start: 0 !important;
    padding-block-end: 0 !important;
}

/* ── Question row (clickable) ── */
.phc-faq-item .phc-faq-qrow {
    cursor: pointer;
    user-select: none;
}
.phc-faq-item .phc-faq-qrow:hover {
    opacity: 0.85;
}
.phc-faq-qrow {
    gap: 16px;
}
.phc-faq-item .phc-faq-qrow .elementor-widget-heading:first-child .elementor-heading-title {
    line-height: 24px;
}

/* ── Plus / minus icon (pseudo-element on the question row) ── */
.phc-faq-qrow::after {
    content: "";
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    background:
        linear-gradient(#9B8764, #9B8764) center/20px 2px no-repeat,
        linear-gradient(#9B8764, #9B8764) center/2px 20px no-repeat;
    transition: background-size 0.3s ease;
}
.phc-faq-item.phc-faq-open .phc-faq-qrow::after {
    background:
        linear-gradient(#9B8764, #9B8764) center/20px 2px no-repeat,
        linear-gradient(#9B8764, #9B8764) center/0 20px no-repeat;
}

/* ── Answer body: collapsed by default, expands when .phc-faq-open ── */
.phc-faq-item .phc-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding-bottom 0.3s ease;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.phc-faq-item.phc-faq-open .phc-faq-answer {
    max-height: 600px;
    padding-bottom: 16px !important;
}
.phc-faq-answer .elementor-widget-text-editor .elementor-text-editor p {
    line-height: 22px;
    color: #2C2C2C;
}

/* ── Gold 1px divider line between items ── */
.phc-faq-item .elementor-widget-divider .elementor-divider-separator {
    border-top-color: #9B8764 !important;
}

/* ── Mobile overrides ── */
@media (max-width: 767px) {
    .phc-faq-answer .elementor-widget-text-editor .elementor-text-editor p {
        font-size: 15px !important;
        line-height: 21px !important;
    }
    .phc-faq-qrow .elementor-widget-heading:first-child {
        flex: 1 0 0 !important;
        min-width: 1px;
    }
}