/**
 * Utility Classes
 * @todo this file needs to be enqueue on front and back, renamed to shared maybe?
 */
@import url("../base/variables.css");
/* Gradient Highlight Text Styles */
.gradient-highlight {
    background: var(--wp--preset--gradient--background);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline;
    position: relative;
}

/* Fallback for browsers that don't support background-clip: text */
@supports not (-webkit-background-clip: text) {
    .gradient-highlight {
        background: var(--wp--preset--color--primary-blue);
        color: var(--wp--preset--color--white);
        padding: 2px 4px;
    }
}

/* Print styles for gradient text */
@media print {
    .gradient-highlight {
        background: none !important;
        color: var(--wp--preset--color--dark-blue) !important;
        font-weight: var(--wp--custom--font-weight--bold) !important;
        -webkit-text-fill-color: var(--wp--preset--color--dark-blue) !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .gradient-highlight {
        background: none !important;
        color: var(--wp--preset--color--black) !important;
        font-weight: var(--wp--custom--font-weight--bold) !important;
        text-decoration: underline;
        -webkit-text-fill-color: var(--wp--preset--color--black) !important;
    }
}

/* Background Gradient Utility Class */
.bg-gradient {
    background: var(--wp--preset--gradient--background);
}

.nf-field-element:has(input[type="submit"]),
.wp-block-button .wp-block-button__link {
    background: linear-gradient(90deg, var(--wp--preset--color--purple), var(--wp--preset--color--purple));
    color: var(--wp--preset--color--white);
    border: none;
    border-radius: 50px; /* Lozenge shape - rounded ends, flat top/bottom */
    padding: 6px 12px;
    font-weight: var(--wp--custom--font-weight--semibold);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--wp--preset--spacing--xs);
    cursor: pointer;
    transition:
        background var(--transition-base),
        padding var(--transition-fast);
    width: auto;

    &:focus-visible,
    &:hover {
        background: var(--wp--preset--gradient--background);
        padding-inline: 14px 10px;
    }

    @media (width > 450px) {
        &.is-large {
            padding: 12px 24px;

            &:focus-visible,
            &:hover {
                padding-inline: 28px 20px;
            }
        }
    }

    &::after {
        content: "";
        width: 18px;
        height: 15px;
        background: currentColor;
        display: inline-block;
        clip-path: path(
            "M13.1625 6.29163L7.09809 1.26215L8.63716 0L17.2743 7.19044L8.63716 14.3809L7.09809 13.1187L13.1395 8.08924H0V6.29163H13.1625Z"
        );
    }
}