/* Block: arrow-button
 *
 * Figma geometry: 10px/20px pill at a 30px radius, then a 37px ring butted
 * against its right edge holding the 135deg arrow. The ring sits outside the
 * pill, so the background belongs to the label rather than the root element.
 */
.arrow-button {
    /* Ring size and the gap before it; the contact form's larger button
       overrides both. Used by the hover below. */
    --ab-ring: calc(37 * var(--tgc-u));
    --ab-gap: -1px;
    --ab-inset: 4px;
    /* The label's side padding, which the hover grows from. */
    --ab-pad-x: calc(20 * var(--tgc-u));

    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 0;
    padding: 0;
    background: none;
    color: var(--tgc-violet);
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: margin-right 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.arrow-button__label {
    display: inline-flex;
    align-items: center;
    padding: 10px var(--ab-pad-x);
    border-radius: calc(30 * var(--tgc-u));
    background-color: var(--tgc-violet);
    color: var(--theme-white);
    font-size: calc(14 * var(--tgc-ut));
    font-weight: 600;
    letter-spacing: 0.14px;
    line-height: normal;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color 0.3s ease,
                color 0.3s ease,
                padding-right 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.arrow-button__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: calc(37 * var(--tgc-u));
    height: calc(37 * var(--tgc-u));
    margin-left: var(--ab-gap);
    border: 1px solid var(--tgc-violet);
    border-radius: 50%;
    color: var(--tgc-violet);
    transition: background-color 0.3s ease,
                border-color 0.3s ease,
                color 0.3s ease,
                transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.arrow-button__glyph {
    display: block;
    width: calc(16.97 * var(--tgc-u));
    height: calc(16.97 * var(--tgc-u));
    transform: rotate(135deg);
}

/*
 * Hover, after marvelloux.design: the pill stretches out under the ring and
 * the ring slides back into its end, filling in dark, so the two read as one
 * button with the arrow set into it. The label grows by exactly the ring's
 * width and the ring moves back by that plus the gap, so it lands inset in
 * the pill's end whatever the label says.
 */
.arrow-button:hover .arrow-button__label,
.arrow-button:focus-visible .arrow-button__label {
    padding-right: calc(var(--ab-pad-x) + var(--ab-ring) + var(--ab-inset));
    background-color: var(--tgc-violet-dark);
}

.arrow-button:hover .arrow-button__arrow,
.arrow-button:focus-visible .arrow-button__arrow,
.site-header .arrow-button:hover .arrow-button__arrow,
.site-header .arrow-button:focus-visible .arrow-button__arrow {
    border-color: var(--tgc-ink);
    background-color: var(--tgc-ink);
    color: var(--theme-white);
    transform: translateX(calc(-1 * (var(--ab-ring) + var(--ab-gap) + var(--ab-inset))));
}

/* The header button is right-aligned, so growing would push its label left.
   Letting it overhang by the same amount keeps the word where it was. */
.site-header__cta .arrow-button:hover,
.site-header__cta .arrow-button:focus-visible {
    margin-right: calc(-1 * (var(--ab-ring) + var(--ab-inset)));
}

/* Ghost: inverted for use on violet panels. */
.arrow-button--ghost .arrow-button__label {
    background-color: var(--theme-white);
    color: var(--tgc-violet);
}

.arrow-button--ghost .arrow-button__arrow {
    border-color: var(--theme-white);
    color: var(--theme-white);
}

.arrow-button--ghost:hover .arrow-button__label,
.arrow-button--ghost:focus-visible .arrow-button__label {
    background-color: var(--tgc-violet-soft);
    color: var(--tgc-violet-dark);
}

.arrow-button--ghost:hover .arrow-button__arrow,
.arrow-button--ghost:focus-visible .arrow-button__arrow {
    border-color: var(--tgc-violet);
    background-color: var(--tgc-violet);
    color: var(--theme-white);
}

@media (prefers-reduced-motion: reduce) {
    .arrow-button__label,
    .arrow-button__arrow {
        transition: background-color 0.2s ease, color 0.2s ease;
    }
}