/* ==========================================================================
   Global Button Styles

   Color:   .btn--gold  |  .btn--navy-on-white  |  .btn--navy-on-gold  |  .btn--white-on-gold
   Font:    .btn--domine  (default is Work Sans)
   Case:    .btn--uppercase  (Work Sans only — ignored when paired with .btn--domine)
   ========================================================================== */

/* Base
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px 10px 20px;
    border-radius: 50px;
    border: 2px solid transparent;
    font-family: 'Work Sans', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;

    &::after {
        content: '';
        display: block;
        width: 15px;
        height: 11px;
        flex-shrink: 0;
        background-color: currentColor;
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='11' viewBox='0 0 15 11' fill='none'%3E%3Cpath d='M0 5.50256H13.5' stroke='white' stroke-width='2' stroke-miterlimit='10'/%3E%3Cpath d='M8.70417 0.707153L13.4999 5.50246L8.7041 10.2984' stroke='white' stroke-width='2' stroke-miterlimit='10'/%3E%3C/svg%3E");
        mask-repeat: no-repeat;
        mask-size: contain;
        transition: transform 0.2s ease;
    }

    &:hover::after {
        transform: translateX(3px);
    }

    &:focus-visible {
        outline: 3px solid var(--color-gold);
        outline-offset: 3px;
    }

    &:active {
        transform: translateY(1px);
    }
}

/* Gold — dark gold bg, white text
   ========================================================================== */

.btn--gold {
    background-color: #AF6D04;
    color: var(--color-white);
    border-color: #AF6D04;

    &:hover {
        background-color: var(--color-navy);
        border-color: var(--color-navy);
        color: var(--color-white);
    }
}

/* Navy on White — white bg, navy text
   ========================================================================== */

.btn--navy-on-white {
    background-color: var(--color-white);
    color: var(--color-navy);
    border-color: var(--color-white);

    &:hover {
        background-color: transparent;
        border-color: var(--color-white);
        color: var(--color-white);
    }
}

/* Navy on Gold — gold bg, navy text, navy accent borders
   ========================================================================== */

.btn--navy-on-gold {
    background-color: var(--color-gold);
    color: var(--color-navy);
    border-color: transparent;
    border-right: 5px solid var(--color-navy);
    border-bottom: 5px solid var(--color-navy);

    &:hover {
        background-color: var(--color-navy);
        color: var(--color-gold);
        border-right-color: var(--color-gold);
        border-bottom-color: var(--color-gold);
    }
}

/* White on Gold — gold bg, white text
   ========================================================================== */

.btn--white-on-gold {
    background-color: var(--color-gold);
    color: var(--color-white);
    border-color: var(--color-gold);

    &:hover {
        background-color: #AF6D04;
        border-color: #AF6D04;
    }
}

/* Font variants
   ========================================================================== */

.btn--domine {
    font-family: 'Domine', serif;
}

/* Uppercase — Work Sans only
   The second rule silently cancels uppercase if .btn--domine is also present
   ========================================================================== */

.btn--uppercase {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.875rem;
}

.btn--domine.btn--uppercase {
    text-transform: none;
    letter-spacing: normal;
    font-size: 1rem;
}