/*
==========================================================================

 PROJECT     : SIGNATURE SPREADS AND TREATS BY DI
 VERSION     : 1.0.0
 AUTHOR      : JB

===========================================================================
*/

.contact-page .contact-method-icon {
    transition:
        background-color var(--motion-duration-fast) var(--motion-ease-standard),
        color var(--motion-duration-fast) var(--motion-ease-standard),
        border-color var(--motion-duration-fast) var(--motion-ease-standard),
        transform var(--motion-duration-normal) var(--motion-ease-emphasized);
}

.contact-page .contact-method-value {
    transition: color var(--motion-duration-fast) var(--motion-ease-standard);
}

.contact-page .contact-field input,
.contact-page .contact-field select,
.contact-page .contact-field textarea {
    transition:
        border-color var(--motion-duration-fast) var(--motion-ease-standard),
        box-shadow var(--motion-duration-fast) var(--motion-ease-standard),
        background-color var(--motion-duration-fast) var(--motion-ease-standard);
}

.contact-page .contact-field input:focus,
.contact-page .contact-field select:focus,
.contact-page .contact-field textarea:focus {
    border-color: rgba(182, 106, 34, 0.62);
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(182, 106, 34, 0.08);
}

.contact-page .contact-custom-order-guidance {
    animation: contactGuidanceIn var(--motion-duration-normal) var(--motion-ease-emphasized);
}

@keyframes contactGuidanceIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.contact-page .contact-text-link span,
.contact-page .contact-custom-order-guidance a span {
    transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
}

.contact-page .contact-social-link {
    transition: background-color var(--motion-duration-normal) var(--motion-ease-standard);
}

.contact-page .contact-social-icon,
.contact-page .contact-social-arrow {
    transition:
        transform var(--motion-duration-normal) var(--motion-ease-emphasized),
        background-color var(--motion-duration-fast) var(--motion-ease-standard),
        color var(--motion-duration-fast) var(--motion-ease-standard),
        border-color var(--motion-duration-fast) var(--motion-ease-standard);
}

@media (hover: hover) {

    .contact-page .contact-method:hover .contact-method-icon {
        border-color: var(--color-primary);
        background-color: var(--color-primary);
        color: #ffffff;
        transform: translateY(-3px);
    }

    .contact-page .contact-method a.contact-method-value:hover,
    .contact-page .contact-method a.contact-method-value:focus-visible {
        color: var(--color-primary);
    }

    .contact-page .contact-text-link:hover span,
    .contact-page .contact-text-link:focus-visible span,
    .contact-page .contact-custom-order-guidance a:hover span,
    .contact-page .contact-custom-order-guidance a:focus-visible span {
        transform: translateX(4px);
    }

    .contact-page .contact-social-link:hover,
    .contact-page .contact-social-link:focus-visible {
        background-color: rgba(232, 214, 184, 0.2);
    }

    .contact-page .contact-social-link:hover .contact-social-icon,
    .contact-page .contact-social-link:focus-visible .contact-social-icon {
        border-color: var(--color-primary);
        background-color: var(--color-primary);
        color: #ffffff;
        transform: translateY(-3px);
    }

    .contact-page .contact-social-link:hover .contact-social-arrow,
    .contact-page .contact-social-link:focus-visible .contact-social-arrow {
        transform: translate(3px, -3px);
    }
}

@media (prefers-reduced-motion: reduce) {

    .contact-page .contact-method-icon,
    .contact-page .contact-method-value,
    .contact-page .contact-field input,
    .contact-page .contact-field select,
    .contact-page .contact-field textarea,
    .contact-page .contact-text-link span,
    .contact-page .contact-custom-order-guidance,
    .contact-page .contact-custom-order-guidance a span,
    .contact-page .contact-social-link,
    .contact-page .contact-social-icon,
    .contact-page .contact-social-arrow {
        transition: none;
        animation: none;
    }

    .contact-page .contact-method:hover .contact-method-icon,
    .contact-page .contact-text-link:hover span,
    .contact-page .contact-custom-order-guidance a:hover span,
    .contact-page .contact-social-link:hover .contact-social-icon,
    .contact-page .contact-social-link:hover .contact-social-arrow {
        transform: none;
    }
}