/* HEADER */
.cpt-projects-header .content-layer {
    margin-top: var(--s-60-75);
    margin-bottom: var(--s-60-75);
    
}

.cpt-projects-header .content-layer .title {
    border-bottom: 1px solid;
    padding-bottom: 20px;
    margin-bottom: 25px;
}

@media (min-width: 1180px) {

    .cpt-projects-header .content-layer {

        padding-bottom: var(--s-60-75);
        border-bottom: 1px solid;     

        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 30px;
    }

    .cpt-projects-header .content-layer .title {
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;
    }
}


/* PROJECT MAIN CATEGORIES */
.project-categories {
    column-gap: var(--s-10-20);
    row-gap: 20px;
}

.project-categories .category-link {
    column-gap: var(--s-10-20);
}

.project-categories .category-item {
    display: flex;
    flex-wrap: nowrap;
    column-gap: var(--s-10-20);
}

.project-categories .category-item:not(:last-child)::after {
    content: '|'; 
}


/* ~~~~~~~~~~~~~~~ */
/* ~~~ FILTERS ~~~ */
/* ~~~~~~~~~~~~~~~ */

/* FILTERS DETAILS */
.filters-details {
    margin-top: 40px;
}

.filters-details summary svg { width: 15px; height: 10px; }
.filters-details[open] summary span { font-family: 'CFModGrotesk-Semibold'; font-weight: 600; }

/* <ul> THAT CONTAINS ALL FILTER CATEGORIES */
.all-filter-categories {
    gap: var(--s-40-60);
    display: grid;
    justify-content: flex-end;
    margin-top: 40px;
}

/* CUSTOM CHECKBOX */
.custom-checkbox label {
    position: relative;
    display: flex;
        outline-offset: 2px;
}

.custom-checkbox label:has(input:checked) {
    outline: 2px solid var(--cYellow);   
}

.custom-checkbox label:focus-within {
    outline: 2px solid var(--cBlack);
}

.custom-checkbox input {
    position: absolute;
    width: 100%; height: 100%;
    top: 0; left: 0; opacity: 0;  
    cursor: pointer;
}

/* FIELDSET */
.fieldset legend {
    min-width: 170px;
}

.fieldset .fieldset-wrapper {
    display: flex;
    /* flex-wrap: wrap; */
    align-items: baseline;
    flex-direction: row-reverse;
    gap: var(--s-20-40);
}

.fieldset .fieldset-wrapper .fieldset-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: var(--s-20-40);
    column-gap: var(--s-20-40);
}

@media (max-width: 800px) {

    .all-filter-categories {
        justify-content: flex-start;
    }

    .fieldset .fieldset-wrapper {
        flex-direction: column;
    }

    .fieldset legend {
        min-width: unset;
    }
}