/*
 * Component: contact-form
 * Style du formulaire Contact Form 7 — labels au-dessus, inputs underline,
 * textarea encadrée. S'applique au wrapper .rc-cf.
 */

.rc-cf {
    --rc-cf-line:           var(--color-primary);
    --rc-cf-line-focus:     var(--color-tertiary);
    --rc-cf-label:          var(--color-body);
    --rc-cf-placeholder:    #9a9a9a;
    --rc-cf-required:       var(--color-renovation);
    --rc-cf-border:         #cfcfcf;

    max-width: 720px;
    font-family: var(--font-body);
    color: var(--color-body);
    font-size: var(--fs-body);

    .rc-cf__row {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--s-large) var(--s-xxl);
        margin-bottom: var(--s-large);
    }

    .rc-cf__row--two {
        @media (min-width: 600px) {
            grid-template-columns: 1fr 1fr;
        }
    }

    .rc-cf__field {
        display: flex;
        flex-direction: column;
        gap: var(--s-xxs);

        label {
            font-size: 0.875rem;
            color: var(--rc-cf-label);
            line-height: 1.2;
            margin: 0;
            padding: 0;
        }

        .rc-cf__req {
            color: var(--rc-cf-required);
            margin-left: 0.15em;
        }

        .wpcf7-form-control-wrap {
            display: block;
        }

        input[type="text"],
        input[type="email"],
        input[type="tel"],
        input[type="url"],
        input[type="number"],
        select {
            width: 100%;
            box-sizing: border-box;
            border: none;
            border-bottom: 1px solid var(--rc-cf-line);
            background: transparent;
            padding: var(--s-xs) 0;
            font: inherit;
            color: var(--color-body);
            border-radius: 0;
            outline: none;
            appearance: none;
            -webkit-appearance: none;
            line-height: 1.4;

            &::placeholder {
                color: var(--rc-cf-placeholder);
                opacity: 1;
            }

            &:focus {
                border-bottom-color: var(--rc-cf-line-focus);
            }
        }
    }

    /* Select : custom arrow (fallback natif si JS désactivé) */
    .rc-cf__field--select {
        select {
            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23373737' stroke-width='1.5'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 0 center;
            background-size: 12px 8px;
            padding-right: 1.5rem;
            cursor: pointer;
            color: var(--rc-cf-placeholder);

            &:valid,
            &:focus {
                color: var(--color-body);
            }
        }

        /* Une fois l'enhancement JS appliqué, le natif disparaît
           et le wrap (qui ne contient plus que le tip de validation
           éventuel) passe sous l'UI custom. */
        select.rc-cf__select-native {
            display: none;
        }

        &:has(.rc-cf__select) {
            .wpcf7-form-control-wrap {
                order: 2;
            }

            .rc-cf__select {
                order: 1;
            }
        }
    }

    /* Custom select (JS) */
    .rc-cf__select {
        position: relative;
        font: inherit;
        color: var(--color-body);

        .rc-cf__select-trigger {
            appearance: none;
            -webkit-appearance: none;
            width: 100%;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--s-xs);
            margin: 0;
            border: none;
            border-bottom: 1px solid var(--rc-cf-line);
            background: transparent;
            padding: var(--s-xs) 1.25rem var(--s-xs) 0;
            font: inherit;
            color: var(--color-body);
            text-align: left;
            line-height: 1.4;
            cursor: pointer;
            border-radius: 0;

            &:focus-visible {
                outline: none;
                border-bottom-color: var(--rc-cf-line-focus);
            }
        }

        &.is-open .rc-cf__select-trigger {
            border-bottom-color: var(--rc-cf-line-focus);
        }

        &.is-placeholder .rc-cf__select-value {
            color: var(--rc-cf-placeholder);
        }

        .rc-cf__select-value {
            flex: 1;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .rc-cf__select-caret {
            flex-shrink: 0;
            width: 12px;
            height: 8px;
            background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23373737' stroke-width='1.5'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat center / 12px 8px;
            transition: transform 0.2s ease;
        }

        &.is-open .rc-cf__select-caret {
            transform: rotate(180deg);
        }

        .rc-cf__select-list {
            position: absolute;
            top: calc(100% - 1px);
            left: 0;
            right: 0;
            margin: 0;
            padding: var(--s-xxs) 0;
            list-style: none;
            background: #fff;
            border: 1px solid var(--rc-cf-border);
            max-height: 16rem;
            overflow-y: auto;
            z-index: 20;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
        }

        .rc-cf__select-option {
            padding: var(--s-xs) var(--s-medium);
            font: inherit;
            line-height: 1.4;
            color: var(--color-body);
            cursor: pointer;
            outline: none;
            transition: background-color 0.15s ease, color 0.15s ease;

            &:hover,
            &:focus-visible {
                background: color-mix(in srgb, #DBD2B1 20%, transparent);
            }

            &.is-selected {
                color: #9A9172;
                background: color-mix(in srgb, #DBD2B1 24%, transparent);
            }

            &[aria-disabled="true"] {
                color: var(--rc-cf-placeholder);
                cursor: default;

                &:hover,
                &:focus-visible {
                    background: transparent;
                }
            }
        }
    }

    /* Textarea Message — encadrée */
    .rc-cf__field--textarea {
        textarea {
            width: 100%;
            box-sizing: border-box;
            border: 1px solid var(--rc-cf-border);
            background: transparent;
            padding: var(--s-small) var(--s-medium);
            font: inherit;
            color: var(--color-body);
            border-radius: 0;
            outline: none;
            height: 8rem;
            resize: vertical;
            line-height: 1.5;

            &::placeholder {
                color: var(--rc-cf-placeholder);
                opacity: 1;
            }

            &:focus {
                border-color: var(--rc-cf-line-focus);
            }
        }
    }

    /* Mentions légales reCAPTCHA */
    .rc-cf__legal {
        font-size: 0.8125rem;
        line-height: 1.5;
        color: var(--color-footer);
        margin: var(--s-xxl) 0 var(--s-xl);

        a {
            color: inherit;
            font-weight: 600;
            
            &:hover {
                color: var(--color-tertiary);
                text-decoration: underline;
            }
        }
    }

    /* Bouton submit "Envoyer >" */
    .rc-cf__submit {
        margin-top: var(--s-large);

        input[type="submit"] {
            appearance: none;
            -webkit-appearance: none;
            background: transparent;
            border: 1px solid var(--color-primary);
            color: var(--color-primary);
            font: inherit;
            font-size: 0.9375rem;
            padding: var(--s-small) var(--s-xl);
            cursor: pointer;
            border-radius: 0;
            transition:
                background-color 0.2s ease,
                color 0.2s ease;

            &:hover,
            &:focus-visible {
                background: var(--color-primary);
                color: #fff;
            }
        }

        .wpcf7-spinner {
            margin-left: var(--s-small);
            vertical-align: middle;
        }
    }

    /* Messages CF7 */
    .wpcf7-not-valid-tip {
        display: block;
        color: var(--color-renovation);
        font-size: 0.8125rem;
        margin-top: var(--s-xxs);
    }

    .wpcf7-response-output {
        margin: var(--s-xl) 0 0;
        padding: var(--s-medium);
        border: 1px solid var(--color-footer);
        font-size: 0.9375rem;
    }

    .wpcf7 form.sent .wpcf7-response-output {
        border-color: var(--color-archi);
        color: var(--color-archi);
    }

    .wpcf7 form.invalid .wpcf7-response-output,
    .wpcf7 form.unaccepted .wpcf7-response-output {
        border-color: var(--color-renovation);
        color: var(--color-renovation);
    }
}