/*
 Theme Name:   La Maison du Compost
 Theme URI:    https://cyberia.eu/
 Description:  Thème du site de La Maison du Compost. Dépend de Bricks → bricksbuilder.io
 Author:       lukas
 Author URI:   https://cyberia.eu/
 Template:     bricks
 Version:      0.6
 Text Domain:  mdc
*/



/**
 * Global Styles
 * */


html {
    /* Font size base */
    font-size: 100%;

    /* Website background */
    --bg-bottom-offset: 150px;
    background-image: url('./assets/img/motif-compost.svg'), linear-gradient(to bottom, var(--blanc-coquille) 0%, transparent 25%), url('./assets/img/motif-compost-inverted.svg'), linear-gradient(to bottom, #f7f9f6 0%, #f7f9f6 100%);
    background-position: center top, center bottom var(--bg-bottom-offset), center bottom var(--bg-bottom-offset), center bottom;
    background-size: 100% auto, 100% calc(100vw / 1.945), 100% auto, 100% var(--bg-bottom-offset);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}


body {
    font-family: var(--wp--preset--font-family--inter);
    line-height: 1.3;

    /**
    * Misc
    */
    --default-text-underline-offset: 0.33em;
    text-underline-offset: var(--default-text-underline-offset);

    /* Force line-heigh & letter spacing when using Providence Sans font */
    .has-providence-sans-font-family {
        line-height: 1.2;
        letter-spacing: -3px;
    }

    .visuallyhidden {
        position: absolute;
        clip: rect(1px, 1px, 1px, 1px);
        clip-path: inset(0 0 99.9% 99.9%);
        overflow: hidden;
        height: 1px;
        width: 1px;
        padding: 0;
        border: 0;
    }

    /**
     * Badges
     */
    .mdc-badge-point::before {
        content: "\23FA\FE0E"; /* U+23FA + VS15 = force text presentation of ⏺ (no emoji)*/
        padding-right: 0.5em;
    }

    /**
    * Headings
    */
    h5::before {
        content: "—";
        padding-right: 0.5em;
    }

    /**
    * Buttons
    */
    .wp-block-buttons {

        /* Do not merge button background with border (allow border transparency) */
        .wp-block-button .wp-element-button {
            background-clip: padding-box;
            width: auto;
        }

        /* Scale down buttons on hover */
        .wp-block-button:not(.is-style-mdc-btn-souligne) .wp-element-button:hover {
            transform: scaleX(0.97) scaleY(0.97);
        }

        /* Remove border on small buttons + increase radius */
        .wp-block-button .wp-element-button.has-small-font-size {
            border: none !important;
            border-radius: 2em !important;
        }

        /* Underline 'souligné' button */
        .wp-block-button.is-style-mdc-btn-souligne .wp-element-button {
            text-decoration: underline;
        }

        /* Add right arrows on button with .mdc-btn-arrow */
        .wp-block-button.mdc-btn-arrow:not(.is-style-mdc-btn-creme) .wp-element-button {
            display: inline-flex;
            align-items: center;
            gap: 0.5em;
        }
        .wp-block-button.mdc-btn-arrow:not(.is-style-mdc-btn-creme) .wp-element-button::after {
            content: "";
            display: inline-block;
            flex-shrink: 0;
            background-color: currentColor;
            mask-size: contain;
            mask-repeat: no-repeat;
        }
        .wp-block-button.mdc-btn-arrow:not(.is-style-mdc-btn-souligne) .wp-element-button::after {
            width: 1.25em;
            height: 1.25em;
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17' width='17' height='17'%3E%3Cpath d='m15.707 8.472-7.354 7.354-.707-.707 6.146-6.146H1v-1h12.793L7.646 1.825l.707-.707z'/%3E%3C/svg%3E");
        }
        .wp-block-button.mdc-btn-arrow.is-style-mdc-btn-souligne .wp-element-button::after {
            width: .85em;
            height: .85em;
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17' width='17' height='17'%3E%3Cpath d='M16 .997V10h-1V2.703L4.683 13l-.707-.708L14.291 1.997H6.975v-1z'/%3E%3C/svg%3E");
            margin-top: calc(var(--default-text-underline-offset) / 2);
        }

    }

    /**
     * Contact Form 7
     */

    /* Default CF7 Form Styles */
    .wpcf7 {

        --gap-large: var(--wp--preset--spacing--40, 1em);
        --gap-small: var(--wp--preset--spacing--20, 0.5em);

        .wpcf7-form {

            display: flex;
            flex-wrap: wrap;
            gap: var(--gap-large);

            /* Form fields */
            > label,
            > .wpcf7-form-control-wrap {
                flex: 1 1 100%;
                min-width: 0;
                margin: 0;
            }

            > label:not(:has(textarea)) {
                flex: 1 1 calc(50% - var(--gap-large) / 2);
                min-width: 200px;
            }

            /* Form labels */
            > label {
                display: flex;
                flex-direction: column;
                gap: var(--gap-small);
                color: var(--wp--preset--color--vert-principal);
                font-size: var(--wp--preset--font-size--small);
                letter-spacing: 1px;
                font-weight: bold;
                text-transform: uppercase;

                > .wpcf7-form-control-wrap {
                    display: inline-block;
                    font-size: initial;
                    letter-spacing: initial;
                    font-weight: initial;
                    text-transform: initial;
                }

            }

            /* Error tips */
            .wpcf7-not-valid-tip {
                display: none;
            }


            /* Input fields (textareas, text, email…) */
            textarea,
            select,
            [type="text"],
            [type="email"],
            [type="tel"] {

                border-radius: 2rem;
                padding: 0px 1.5rem;
                height: 100%;
                color: var(--wp--preset--color--vert-profond);
                transition: none;
                border: 2px solid var(--wp--preset--color--creme);
                text-overflow: ellipsis;

                /* Focused */
                &:focus {
                    border-color: var(--wp--preset--color--vert-profond);
                    outline: 2px solid var(--wp--preset--color--vert-50-pourcent);
                }

                /* Error */
                &.wpcf7-not-valid:not(:focus) {
                    color: var(--wp--preset--color--ocre-agrume-darken);
                    border-color: var(--wp--preset--color--ocre-agrume-darken);

                    &::placeholder,
                    &:is(select:not([data-option-nth]), select[data-option-nth="0"]) {
                        color: var(--wp--preset--color--ocre-agrume-darken);
                    }
                }

                /* Placeholders */
                &::placeholder,
                &:is(select:not([data-option-nth]):not(:focus), select[data-option-nth="0"]):not(:focus) {
                    color: var(--wp--preset--color--vert-50-pourcent);
                    opacity: 1;
                }

                &:focus::placeholder {
                    opacity: 0;
                }
            }

            /* Textareas */
            textarea {
                padding: 1.5rem;
                resize: vertical;
            }

            /* Select */
            select {
                padding-right: 3em;
                background-size: auto 8px;
                background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 39' style='color: var(--wp--preset--color--vert-50-pourcent, %23e2eeda)'%3E%3Cpath stroke='currentcolor' d='m5.9 5.9 33.325 23.833a18.51 18.51 0 0 0 21.543 0L94.026 5.9' style='fill:none;stroke-width:11.8;stroke-linecap:round'%3E%3C/path%3E%3C/svg%3E");

                &:focus {
                    background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 39' style='color: var(--wp--preset--color--vert-profond, %23032e24)'%3E%3Cpath stroke='currentcolor' d='m5.9 5.9 33.325 23.833a18.51 18.51 0 0 0 21.543 0L94.026 5.9' style='fill:none;stroke-width:11.8;stroke-linecap:round'%3E%3C/path%3E%3C/svg%3E");
                }

                &:open {
                    background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 39' style='transform: rotate(180deg); color: var(--wp--preset--color--vert-profond, %23032e24)'%3E%3Cpath stroke='currentcolor' d='m5.9 5.9 33.325 23.833a18.51 18.51 0 0 0 21.543 0L94.026 5.9' style='fill:none;stroke-width:11.8;stroke-linecap:round'%3E%3C/path%3E%3C/svg%3E");
                }
            }

            /* Checkboxes */
            .wpcf7-list-item {
                margin-left: 0;

                label:has([type="checkbox"]) {
                    display: flex;
                    flex-direction: row;
                    align-items: start;
                    line-height: 1.15;
                    gap: var(--gap-small);
                    margin: 0;
                    color: var(--wp--preset--color--vert-principal);
                    font-size: var(--wp--preset--font-size--small);

                    [type="checkbox"] {
                        margin: 0;
                        accent-color: var(--wp--preset--color--vert-principal);
                    }
                }
            }

            /* Submit button */
            .wpcf7-submit.wp-element-button {
                display: inline-flex;
                align-items: center;
                gap: 0.5em;

                &:hover {
                    transform: scaleX(0.97) scaleY(0.97);
                }
                &::after {
                    content: "";
                    display: inline-block;
                    flex-shrink: 0;
                    background-color: currentColor;
                    mask-size: contain;
                    mask-repeat: no-repeat;
                    width: 1.25em;
                    height: 1.25em;
                    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17' width='17' height='17'%3E%3Cpath d='m15.707 8.472-7.354 7.354-.707-.707 6.146-6.146H1v-1h12.793L7.646 1.825l.707-.707z'/%3E%3C/svg%3E");
                }
            }

            /* Response outputs */
            .wpcf7-response-output {
                order: -1;
                width: 100%;
                margin: 0;
                padding: 1.5rem;
                text-align: center;
                border: none;
                color: var(--wp--preset--color--vert-fonce);
            }

            &.sent {

                > *:not(.wpcf7-response-output) {
                    display: none;
                }

                .wpcf7-response-output {
                    margin: var(--wp--preset--spacing--80) auto;
                    width: 90%;
                }

                .wpcf7-response-output::before {
                    content: "";
                    background-repeat: no-repeat;
                    background-size: contain;
                    background-position: center;
                    margin: 1em auto;
                    width: auto;
                    height: 100px;
                    display: block;
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='none' d='M0 0h256v256H0Z'/%3E%3Ccircle cx='128' cy='128' r='96' opacity='.2' style='opacity:1;fill:%23b4d4bf;fill-opacity:1'/%3E%3Cpath fill='none' stroke='%23006a52' stroke-linecap='round' stroke-linejoin='round' stroke-width='16' d='m88 136 24 24 56-56'/%3E%3Ccircle cx='128' cy='128' r='96' fill='none' stroke='%23006a52' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E");

                }
            }

            &.invalid,
            &.failed,
            &.aborted,
            &.spam,
            &.unaccepted {
                .wpcf7-response-output {
                    color: var(--wp--preset--color--ocre-agrume-darken);
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    gap: 2em;
                }

                .wpcf7-response-output::before {
                    content: "";
                    background-repeat: no-repeat;
                    background-size: contain;
                    background-position: center;
                    margin: 1em auto;
                    width: 33.33%;
                    height: 100%;
                    display: inline-block;
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='none' d='M0 0h256v256H0Z'/%3E%3Cpath d='M164.45 32h-72.9a8 8 0 0 0-5.66 2.34L34.34 85.89A8 8 0 0 0 32 91.55v72.9a8 8 0 0 0 2.34 5.66l51.55 51.55a8 8 0 0 0 5.66 2.34h72.9a8 8 0 0 0 5.66-2.34l51.55-51.55a8 8 0 0 0 2.34-5.66v-72.9a8 8 0 0 0-2.34-5.66l-51.55-51.55a8 8 0 0 0-5.66-2.34' opacity='.2' style='opacity:1;fill:%23fbccbd;fill-opacity:1'/%3E%3Cpath fill='none' stroke='%23006a52' stroke-linecap='round' stroke-linejoin='round' stroke-width='16' d='M128 136V80' style='stroke:%23db4528;stroke-opacity:1'/%3E%3Cpath fill='none' stroke='%23006a52' stroke-miterlimit='10' stroke-width='16' d='M164.45 32h-72.9a8 8 0 0 0-5.66 2.34L34.34 85.89A8 8 0 0 0 32 91.55v72.9a8 8 0 0 0 2.34 5.66l51.55 51.55a8 8 0 0 0 5.66 2.34h72.9a8 8 0 0 0 5.66-2.34l51.55-51.55a8 8 0 0 0 2.34-5.66v-72.9a8 8 0 0 0-2.34-5.66l-51.55-51.55a8 8 0 0 0-5.66-2.34Z' style='stroke:%23db4528;stroke-opacity:1'/%3E%3Ccircle cx='128' cy='172' r='12' fill='%23006a52' style='fill:%23db4528;fill-opacity:1'/%3E%3C/svg%3E");
                }
            }

        }
    }

    /* Newsletter Form Styles */
    footer {
        [data-wpcf7-id="2840"] {
            .wpcf7-form {
                gap: 0.5em;
                justify-content: center;

                > label,
                > .wpcf7-form-control-wrap {
                    flex: 1 1 50%;
                    min-width: 250px;
                }

                &.invalid,
                &.failed,
                &.aborted,
                &.spam,
                &.unaccepted,
                &.sent {
                    .wpcf7-response-output {
                        color: var(--wp--preset--color--white);
                        margin: auto;
                        width: 100%;
                        padding: 0;
                        display: block;
                        text-align: center;

                        &:before {
                            content: unset;
                        }
                    }
                }
            }
        }
    }


    /**
     * The Events Calendar
     */
    &.post-type-archive-tribe_events {

        .mdc_tribe-events-page-header {
            text-align: center;
            margin: 50px 0;

            .mdc_tribe-events-page-header__desc {
                margin-top: 1em;
            }
        }

        .tribe-events-view--list {

            > .tribe-common-l-container {
                padding: 0 15px;
                margin: 2rem 0;
                max-width: 100%;
            }
        }

        /* Liste des catégories */
        .mdc-event-cats {
            display: flex;
            gap: 2rem 1rem;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            max-width: 900px;
            padding: 0;
            margin: 0 auto;
            list-style: none;
/*             font-size: var(--wp--preset--font-size--small); */

            li a {
                border: 2px solid var(--wp--preset--color--vert-fonce);
                padding: 6px 15px;
                border-radius: 2em;
                background-color: transparent;
                text-decoration: none;
            }

            li a:hover {
                border: 2px solid var(--wp--preset--color--vert-fonce);
                background-color: var(--wp--preset--color--vert-fonce);
                color: var(--wp--preset--color--white);
            }

            li.is-active a {
                background-color: var(--wp--preset--color--vert-principal);
                border-color: var(--wp--preset--color--vert-principal);
                color: var(--wp--preset--color--white);
            }
        }

        .tribe-events-header__top-bar {
            margin-top: 100px;

            .tribe-events-c-top-bar__nav-link--prev[disabled],
            .tribe-events-c-top-bar__nav-link--next[disabled] {
                background-color: transparent;
            }

            .tribe-events-c-top-bar__datepicker-button {
                background-color: transparent;
                border: 2px solid var(--wp--preset--color--vert-profond);
                padding: 6px 15px;
                border-radius: 2em;

                &:hover {
                    background-color: var(--wp--preset--color--vert-profond);
                    color: var(--wp--preset--color--white);
                }
            }
        }

        .tribe-events-calendar-list {

            .tribe-events-calendar-list__month-separator {
                justify-content: center;
                text-transform: capitalize;
            }

            .tribe-events-calendar-list__event-row {
                margin-left: 0;
                margin-right: 0;
                background-color: var(--wp--preset--color--white);
                border-radius: 2rem;
                overflow: hidden;
                border: 2px solid var(--wp--preset--color--vert-50-pourcent);
                padding: 0;

                .tribe-events-calendar-list__event-date-tag {
                    display: none;
                }

                .tribe-events-calendar-list__event-wrapper {
                    padding: 0;

                    .tribe-events-calendar-list__event {
                        margin: unset;

                        .tribe-events-calendar-list__event-details {
                            padding: 2rem;

                            .mdc_tribe-events-calendar-list__event-categories-wrapper {
                                display: flex;
                                flex-direction: row;
                                gap: 1rem;

                                li {
                                    height: 2em;
                                    a {
                                        background-color: var(--wp--preset--color--vert-principal);
                                        border-radius: 2em;
                                        padding-top: 6px;
                                        padding-right: 15px;
                                        padding-bottom: 6px;
                                        padding-left: 15px;
                                        text-transform: uppercase;
                                        font-size: var(--wp--preset--font-size--small) !important;
                                        color: var(--wp--preset--color--white);
                                        text-decoration: none;
                                    }
                                }
                            }

                            .mdc_tribe-events-calendar-list__event-datetime-wrapper {
                                text-transform: uppercase;
                            }

                            .tribe-events-calendar-list__event-title {
                                font-size: var(--wp--preset--font-size--x-large);

                                a {
                                    text-decoration: none;
                                }
                            }

                            .tribe-events-calendar-list__event-venue-title {
                                font-style: initial;
                            }

                            .tribe-events-calendar-list__event-venue-address {
                                display: none;
                            }

                            .tribe-events-calendar-list__event-description {
                                margin-top: 2rem;
                            }
                        }

                        .tribe-events-calendar-list__event-featured-image-wrapper {
                            padding: 0;

                            .tribe-events-calendar-list__event-featured-image {
                                aspect-ratio: 3/2;
                                object-fit: cover;
                                height: 100%;
                            }
                        }

                    }
                }
            }
        }

        .tribe-events-calendar-list-nav {
            padding-top: unset !important;
            margin: 50px 0px;


            .tribe-events-c-nav__list {
                justify-content: center;
                gap: 1em;

                .tribe-events-c-nav__list-item {
                    width: unset;
                }
            }

            .tribe-events-c-nav__prev,
            .tribe-events-c-nav__today,
            .tribe-events-c-nav__next {
                background-color: transparent;
                border: 2px solid var(--wp--preset--color--vert-profond);
                padding: 6px 15px;
                border-radius: 2em;
                text-decoration: none;

                &:hover {
                    background-color: var(--wp--preset--color--vert-profond);;
                    color: var(--wp--preset--color--white);
                }

                &[disabled] {
                    display: none;
                }
            }
        }
    }

}

/**
 * Custom classes for Class Manager
 */
:root body {

    .mdc-max-width-991 {
        max-width: 991px;
        margin-left: auto;
        margin-right: auto;
    }

    .mdc-max-width-767 {
        max-width: 767px;
        margin-left: auto;
        margin-right: auto;
    }

    .mdc-max-width-478 {
        max-width: 478px;
        margin-left: auto;
        margin-right: auto;
    }

    .mdc-3-columns-grid-responsive {
        --max-columns: 3;
        --min-grid-elem-width: 300px;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, max(300px, calc(33.33% - ((var(--wp--preset--spacing--50) * 2) / 3)))), 1fr)) !important;
    }

    .mdc-responsive-grid {
        --max-columns: 3;
        --min-grid-elem-width: 300px;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--min-grid-elem-width, 300px), calc((100% / var(--max-columns, 3)) - ((var(--wp--preset--spacing--50) * (var(--max-columns, 3) - 1)) / var(--max-columns, 3))))), 1fr)) !important;
    }

    .mdc-responsive-flex,
    .wp-block-columns.mdc-responsive-flex {
        --max-columns: 5;
        --min-elem-width: 200px;
        --max-elem-width: 250px;
        --gap: var(--wp--preset--spacing--50);
        --true-max-width: calc(var(--max-elem-width) - ( ( var(--gap) * (var(--max-columns) - 1) ) / var(--max-columns) ) ) !important;
        display: flex;
        flex-wrap: wrap !important;
        justify-content: space-evenly;
        gap: var(--gap);
    }

    .mdc-responsive-flex > *,
    .wp-block-columns.mdc-responsive-flex > * {
        flex: 1 1 max(
            var(--min-elem-width),
            calc((100% - (var(--max-columns) - 1) * var(--gap)) / var(--max-columns))
        );
        flex-basis: unset !important;
        max-width: var(--true-max-width, calc(var(--min-elem-width) * 1.5));
    }

    /* Columns: Invert order on mobile view
     * Note: don't use column-reverse because odd flicking bug with carousels */
    @media (max-width: 781px) {
        .mdc-invert-columns-on-mobile.wp-block-columns {
            .wp-block-column:nth-child(6) {
                order: 1;
            }

            .wp-block-column:nth-child(5) {
                order: 2;
            }

            .wp-block-column:nth-child(4) {
                order: 3;
            }

            .wp-block-column:nth-child(3) {
                order: 4;
            }

            .wp-block-column:nth-child(2) {
                order: 5;
            }

            .wp-block-column:nth-child(1) {
                order: 6;
            }
        }
    }

    /* Icône block: display as background image */
    :is(.wp-block-group, .wp-block-column):has(> .mdc-icon-block-as-bg) {
        position: relative;

        > *:not(.mdc-icon-block-as-bg) {
            position: relative;
            z-index: 9
        }

        .mdc-icon-block-as-bg {
            position: absolute !important;
            z-index: 0;
            top: 1em;
            left: 1em;
            height: calc(100% - 2em);
            width: 100%;
            opacity: 0.5;
            margin: 0;

            & .icon-container {
                height: 100%;
                width: auto !important;
                margin: 0 auto;
            }
        }
    }

    /* Align center on mobile */
    @media (max-width: 781px) {
        .mdc-mobile-align-center {

            &.wp-block-heading,
            &.wp-block-paragraph {
                text-align: center;
                align-self: center;
            }

            &.wp-block-buttons,
            &.wp-block-group,
            &.wp-container-core-group-is-layout-1aece7cf {
                justify-content: center;
                align-self: center;
            }

        }
    }

    /* Columns wrap at 991px */
    @media (max-width: 991px) {
        .mdc-columns-991px-wrap.wp-block-columns {
            flex-wrap: wrap !important;
        }

        .mdc-columns-991px-wrap.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column[style*="flex-basis"] {
            flex-grow: 1 !important;
        }
    }

    /* Témoignages : icône guillemet en fond */
    .wp-block-query li.wp-block-post.type-temoignage {
        position: relative;
        overflow: hidden;

        &:after {
            content: "“";
            position: absolute;
            top: 0;
            left: 0;
            font-size: 450px;
            font-family: serif;
            opacity: 0.10;
            line-height: 0.5;
            transform: rotate(-15deg);
        }
    }


}