@charset "UTF-8";
/**
 * Yoast FAQ accordion styles (CSS only)
 * Markup target: .schema-faq.wp-block-yoast-faq-block
 * Colors come from theme.json vars:
 *  --wp--custom--color--secondary (blue)
 *  --wp--custom--color--background (white)
 */
.schema-faq.wp-block-yoast-faq-block{
    /* local aliases for clarity */
/*
    --faq-background-hover: var(--wp--custom--color--quaternary );
    --faq-text-hover: var(--wp--custom--color--background);

 */
    --faq-background-hover: var(--wp--custom--color--secondary );
    --faq-text-hover: var(--wp--custom--color--background);

    /* compact group look */
    border-left: 1px solid var(--faq-background-hover);
    border-right: 1px solid var(--faq-background-hover);
}

/* each FAQ item */
.schema-faq.wp-block-yoast-faq-block .schema-faq-section{
    border-top: 1px solid var(--faq-background-hover);
}
.schema-faq.wp-block-yoast-faq-block .schema-faq-section:last-child{
    border-bottom: 1px solid var(--faq-background-hover);
}
/* question bar */
.schema-faq.wp-block-yoast-faq-block .schema-faq-question{
    display: block;
    margin: 0; /* reset strong */
    padding: 20px 56px 20px 24px; /* room for caret on the right */
    font-size: var(--wp--preset--font-size--base);
    background: var(--faq-text-hover);
    color: inherit; /* question text is white on the blue bar */
    font-weight: 700; /* keep strong look but explicit */
    line-height: 1.35;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

/* caret (chevron) */
.schema-faq.wp-block-yoast-faq-block .schema-faq-question::after{
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    width: 25px;
    height: 25px;
    line-height: 1;
    /* default caret color: blue @ 30% via color-mix */
    background-color: color-mix(in srgb, var(--faq-background-hover) 30%, transparent);
    /* Remix Icon: arrow-down-s-line, Apache 2.0 */
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' d='M0 0h24v24H0z'/><path fill='%23000' d='M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z'/></svg>");utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' d='M0 0h24v24H0z'/><path fill='%23000' d='M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z'/></svg>");utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' d='M0 0h24v24H0z'/><path d='M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z'/></svg>");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' d='M0 0h24v24H0z'/><path d='M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z'/></svg>");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100% 100%;
    transition: transform .2s ease, background-color .2s ease, opacity .2s ease;
}

/* hover state: caret becomes white */
.schema-faq.wp-block-yoast-faq-block .schema-faq-section:hover .schema-faq-question{
    background: var(--faq-background-hover);
    color: var(--faq-text-hover);
}
.schema-faq.wp-block-yoast-faq-block .schema-faq-section:hover .schema-faq-question::after{
    background-color: var(--faq-text-hover);
}

/* opened item: rotate caret up + white color */
.schema-faq.wp-block-yoast-faq-block .schema-faq-section.opened .schema-faq-question{
    background: var(--faq-background-hover);
    color: var(--faq-text-hover);
}
.schema-faq.wp-block-yoast-faq-block .schema-faq-section.opened .schema-faq-question::after{
    transform: translateY(-50%) rotate(180deg);
    background-color: var(--faq-text-hover);
}

/* answer panel */
.schema-faq.wp-block-yoast-faq-block .schema-faq-answer{
    display: none; /* default hidden; your JS toggles .opened */
    margin: 0;
    font-size: var(--wp--preset--font-size--small);
    padding: 18px 24px 24px;
    background: var(--faq-text-hover);
    color: inherit; /* inherit body text color */
}

/* show when opened */
.schema-faq.wp-block-yoast-faq-block .schema-faq-section.opened .schema-faq-answer{
    display: block;
}

/* tidy paragraphs inside answer */
.schema-faq.wp-block-yoast-faq-block .schema-faq-answer p{ margin: 0; }
.schema-faq.wp-block-yoast-faq-block .schema-faq-answer p + p{ margin-top: 1em; }

/* accessibility: clear keyboard focus on the clickable question */
.schema-faq.wp-block-yoast-faq-block .schema-faq-question:focus-visible{
    outline: 2px solid color-mix(in srgb, var(--faq-background-hover) 55%, var(--faq-text-hover) 45%);
    outline-offset: 2px;
}
/*end of FAQ*/