/**
 * Collapsible property sections (paired with sync-broker-collapsible.js).
 * Custom BEM class names only - no Tailwind processing, no .syncbroker scope.
 */

.sb-collapsible__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5em;
    width: 100%;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.sb-collapsible__label {
    flex: 1 1 auto;
    transition: color 0.2s ease;
}

.sb-collapsible__icon {
    position: relative;
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
}

/* Plus / minus: two bars; vertical bar fades out when expanded -> minus. */
.sb-collapsible__icon--plus-minus::before,
.sb-collapsible__icon--plus-minus::after {
    content: "";
    position: absolute;
    background: currentColor;
    transition: opacity 0.2s ease, transform 0.28s ease, background-color 0.2s ease;
}

.sb-collapsible__icon--plus-minus::before {
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    transform: translateY(-50%);
}

.sb-collapsible__icon--plus-minus::after {
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    transform: translateX(-50%);
}

.sb-collapsible__toggle[aria-expanded="true"] .sb-collapsible__icon--plus-minus::after {
    opacity: 0;
    transform: translateX(-50%) rotate(90deg);
}

/* Chevron: caret from two borders, rotates when expanded. */
.sb-collapsible__icon--chevron::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.5em;
    height: 0.5em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translate(-50%, -70%) rotate(45deg);
    transition: transform 0.28s ease, border-color 0.2s ease;
}

.sb-collapsible__toggle[aria-expanded="true"] .sb-collapsible__icon--chevron::before {
    transform: translate(-50%, -30%) rotate(225deg);
}

/* Body: overflow-clipped height animator. Content Spacing lands here as
   padding-top (from the widget control), so it is clipped while collapsed. */
.sb-collapsible > .sb-collapsible__body {
    overflow: hidden;
    transition: height 0.28s ease, padding-top 0.28s ease;
}

/* No-FOUC: hide an initially-collapsed body before the footer JS runs. Gated
   on .sb-js (set by a head snippet) so no-JS clients still see the content.
   padding-top is zeroed too: the Content Spacing control injects padding-top
   here, and overflow:hidden+height:0 never clips padding, so it would leak a
   gap under the title. This selector's 0,3,0 beats Elementor's injected 0,2,0,
   and since the JS toggles --collapsed it also covers the JS-driven collapse. */
.sb-js .sb-collapsible--collapsed > .sb-collapsible__body {
    height: 0;
    padding-top: 0;
}

@media (prefers-reduced-motion: reduce) {
    .sb-collapsible__toggle,
    .sb-collapsible__label,
    .sb-collapsible > .sb-collapsible__body,
    .sb-collapsible__icon--plus-minus::before,
    .sb-collapsible__icon--plus-minus::after,
    .sb-collapsible__icon--chevron::before {
        transition: none;
    }
}