/* General Content Listing Styles
--------------------------------------------- */

.content-listing__tools-toggle-status,
.content-listing__tools-toggle {
    display: none;
}

.content-listing__tools-heading {
    color: var(--wp--preset--color--primary);
    font-size: var(--wp--preset--font-size--base);
    margin-block: 0 var(--wp--preset--spacing--x-small) !important;
}

@media (min-width: 1024px) {
    .content-listing {
        align-items: flex-start;
        column-gap: var(--wp--preset--spacing--xx-large);
        display: flex;
        justify-content: space-between;
    }

    .content-listing__listing-area {
        flex: 1 1 auto;
    }

    .content-listing__tools {
        flex: 0 0 auto;
        order: 2;
        position: sticky;
        top: calc(var(--site-header--height-pinned) + var(--wp--preset--spacing--medium));
        width: 20rem;
    }
}

/* Content Listing Facets */

.content-listing__facet {
    border-top: 1px solid var(--wp--preset--color--border-light);
}

.content-listing__facet:last-child {
    border-bottom: 1px solid var(--wp--preset--color--border-light);
}

.content-listing__facet .facet-label {
    font-size: var(--wp--preset--font-size--small);
    font-weight: 700;
    margin: 0;
    padding-block: var(--wp--preset--spacing--x-small);
}

.content-listing__facet .facetwp-facet {
    font-size: var(--wp--preset--font-size--small);
    padding: 0 0 var(--wp--preset--spacing--medium) 1em;
}

/* Collapsible Facets */

.content-listing__facet--collapsible .facet-label {
    align-items: center;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
}

.content-listing__facet--collapsible .facet-label::after {
    background-color: currentColor;
    content: "";
    height: 1em;
    --de-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M7.24144 0.51008C7.15531 0.423001 7.04064 0.375 6.91859 0.375C6.79654 0.375 6.68195 0.423001 6.59582 0.51008L3.87507 3.26067L1.15409 0.509849C0.976264 0.330384 0.68697 0.330384 0.509071 0.509849C0.422785 0.596927 0.375153 0.712776 0.375 0.836086C0.374848 0.959396 0.422252 1.0754 0.508614 1.16286L3.55199 4.23961C3.63691 4.32569 3.75477 4.375 3.87522 4.375C3.99567 4.375 4.11308 4.32569 4.19784 4.23984L7.24152 1.16278C7.41949 0.982858 7.41942 0.690006 7.24144 0.51008Z' fill='currentColor' stroke='currentColor' stroke-width='0.75'/%3E%3C/svg%3E");
    -webkit-mask: var(--de-mask-image) no-repeat center;
    mask: var(--de-mask-image) no-repeat center;
    transition: transform var(--transition);
    width: 1em;
}

.content-listing__facet--collapsible .facetwp-facet {
    display: none;
}

.content-listing__facet--collapsible .facet-status:checked ~ .facetwp-facet {
    display: block;
}

.content-listing__facet--collapsible .facet-status:checked ~ .facet-label::after {
    transform: rotate(180deg) !important;
}

/* Filter Promos */

.content-listing__filter-promos {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--x-small);
    margin-top: var(--wp--preset--spacing--medium);
}

.content-listing__filter-promo {
}

.content-listing__filter-promo-link {
    align-items: center;
    display: flex;
    gap: var(--wp--preset--spacing--x-small);
}

.content-listing__filter-promo-link:hover {
    text-decoration: none;
}

.content-listing__filter-promo-image {
    aspect-ratio: 1 / 1;
    border: 1px solid var(--wp--preset--color--border-light);
    border-radius: var(--wp--preset--border-radius--default);
    max-width: 6rem;
    min-width: 6rem;
    overflow: clip;
    position: relative;
}

.content-listing__filter-promo-image img {
    display: block;
    height: 100%;
    inset: 0;
    object-fit: cover;
    object-position: center;
    position: absolute;
    width: 100%;
}

.content-listing__filter-promo-content {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--xx-small);
}

.content-listing__filter-promo-content > * {
    margin-block: 0 !important;
}

.content-listing__filter-promo-title {
    color: var(--wp--preset--color--main);
    display: block;
    font-family: var(--wp--preset--font-family--primary-condensed);
    font-size: var(--wp--preset--font-size--large);
    font-weight: 700;
    line-height: 0.9;
    text-transform: uppercase;
}

.content-listing__filter-promo-link:hover .content-listing__filter-promo-title {
    color: var(--wp--preset--color--secondary--accent);
}

.content-listing__filter-promo-action .wp-block-button__link {
    font-size: var(--wp--preset--font-size--x-small);
}

/* Mobile content listing adjustments */

@media (max-width: 1023px) {
    .content-listing__tools {
        display: none;
    }

    .content-listing__tools-toggle-status {
        clip-path: inset(50%);
        display: block;
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }

    .content-listing__tools-toggle {
        display: block;
        margin: 0;
    }

    .content-listing__tools-toggle-label {
        align-items: center;
        background-color: var(--wp--preset--color--secondary-accent);
        border-radius: var(--wp--preset--border-radius--default);
        color: var(--wp--preset--color--base);
        cursor: pointer;
        display: flex;
        font-size: var(--wp--preset--font-size--x-small);
        font-weight: 700;
        gap: 0.5em;
        padding: 0.75em var(--wp--preset--spacing--small);
    }

    .content-listing__tools-toggle-label::before {
        background-color: currentColor;
        content: "";
        display: block;
        height: 1em;
        --de-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11' fill='none'%3E%3Cpath d='M4.83284 5.99133C4.59633 6.73417 3.94971 7.19211 3.2115 7.19008C2.48286 7.18806 1.84203 6.71678 1.6035 5.99567L0.429954 5.98553C0.166204 5.98321 -0.00537811 5.71338 0.000128754 5.48093C0.00563562 5.24848 0.194898 5.00966 0.463285 5.00792L1.60552 5.00125C1.83826 4.28101 2.48112 3.81003 3.21179 3.80945C3.93638 3.80887 4.60271 4.26565 4.82994 5.00357H10.4661C10.7605 5.00357 10.9724 5.17631 10.9982 5.45368C11.0194 5.68091 10.8521 5.9893 10.564 5.9893L4.83313 5.99075L4.83284 5.99133ZM3.06281 4.82068C2.64893 4.92126 2.44083 5.30935 2.5472 5.69772C2.64284 6.04784 3.0147 6.27363 3.39265 6.17508C3.75059 6.08176 3.99608 5.71395 3.90131 5.33253C3.81436 4.98241 3.45409 4.72562 3.06281 4.82068Z' fill='currentColor'/%3E%3Cpath d='M8.96847 2.1786C8.75283 2.91304 8.0865 3.37852 7.35467 3.38055C6.62284 3.38258 5.96694 2.90812 5.74058 2.17773L0.433989 2.1757C0.159225 2.1757 -0.0146755 1.8908 0.000975552 1.66472C0.0166266 1.43865 0.20328 1.192 0.476595 1.19171L5.74116 1.19026C5.96839 0.494081 6.59907 0.0115055 7.32366 0.000201949C8.04824 -0.0111016 8.73776 0.452924 8.96412 1.18708L10.5284 1.19374C10.7802 1.19461 10.9663 1.41894 10.9962 1.63458C11.0272 1.85688 10.8631 2.1644 10.5994 2.16614L8.96847 2.1786ZM7.2083 1.00767C6.79355 1.10013 6.58371 1.49082 6.67587 1.86471C6.76514 2.22642 7.14425 2.45134 7.49292 2.37772C7.8842 2.29512 8.12099 1.925 8.04158 1.54328C7.96622 1.18186 7.59958 0.920718 7.2083 1.00767Z' fill='currentColor'/%3E%3Cpath d='M6.16687 8.81778C6.40338 8.07494 7.05 7.617 7.78821 7.61903C8.51686 7.62105 9.15768 8.09233 9.39622 8.81343L10.5698 8.82358C10.8335 8.8259 11.0051 9.09573 10.9996 9.32818C10.9941 9.56353 10.8048 9.79945 10.5364 9.80119L9.39419 9.80786C9.16145 10.5281 8.51859 10.9991 7.78792 10.9997C7.06333 11.0002 6.397 10.5435 6.16977 9.80554H0.533931C0.239459 9.80554 0.0275896 9.6328 0.00179429 9.35543C-0.0193637 9.1282 0.147871 8.81981 0.435967 8.81981L6.16687 8.81836V8.81778ZM7.93719 9.98843C8.35107 9.88785 8.55917 9.49976 8.4528 9.11139C8.35716 8.76126 7.9853 8.53548 7.60735 8.63403C7.24941 8.72735 7.00392 9.09515 7.09869 9.47658C7.18564 9.8267 7.54591 10.0835 7.93719 9.98843Z' fill='currentColor'/%3E%3C/svg%3E");
        -webkit-mask: var(--de-mask-image) no-repeat center;
        mask: var(--de-mask-image) no-repeat center;
        width: 1em;
    }

    .content-listing__tools-toggle-status:checked
        + .content-listing__tools-toggle
        .content-listing__tools-toggle-label::after {
        content: "\00d7";
        font-size: 1.5em;
        line-height: 1;
        margin-left: auto;
    }

    .content-listing__tools-toggle-status:focus-visible
        + .content-listing__tools-toggle
        .content-listing__tools-toggle-label {
        outline: 2px solid currentColor;
        outline-offset: 2px;
    }

    .content-listing__tools-toggle-status:checked ~ .content-listing__tools {
        display: block;
    }

    .content-listing__tools-toggle-status:checked
        ~ .content-listing__tools-toggle
        .content-listing__tools-toggle-label {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .content-listing__tools {
        background: var(--wp--preset--color--tertiary);
        border-bottom-left-radius: var(--wp--preset--border-radius--default);
        border-bottom-right-radius: var(--wp--preset--border-radius--default);
        padding: var(--wp--preset--spacing--medium);
    }

    .content-listing__tools + .content-listing__listing-area {
        margin-top: var(--wp--preset--spacing--large);
    }
}