button {
    border: none;
    cursor: pointer;
    font-weight: 500 !important;
}

.main-nav > li.button > a,
a.button:not(.acf-button, .preview, [data-name="add"]),
.aana-button,
.span-button,
:where(.site-header button,.main-content button,.footer-container) button:not(.no-button) {
    border-radius: 0.5rem;
    background-color: var(--local-bg-color);
    color: var(--local-color) !important;
    border: 0.1rem solid var(--local-border-color);
    transition: background 0.25s ease-in, color 0.25s ease-in, border 0.25s ease-in;
    text-decoration: none;
    display: inline-block;
    padding: 1rem 3rem 1rem 3rem !important;
    text-align: center;
    font-size: 1.4rem !important;
    font-weight: 500 !important;
}

.aana-button[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

.button.blue-on-orange {
    --local-bg-color: var(--color-brand-orange);
    --local-border-color: var(--color-brand-orange);
    --local-color: var(--color-brand-navy);
}

.button.blue-on-orange:hover {
    --local-bg-color: var(--color-brand-pale-blue);
    --local-border-color: var(--color-brand-pale-blue);
    --local-color: var(--color-brand-navy);
}

.button.red-on-white {
    --local-bg-color: var(--color-primary-white);
    --local-border-color: var(--color-brand-red);
    --local-color: var(--color-brand-red);
}

.button.red-on-white:hover {
    --local-bg-color: var(--color-brand-red);
    --local-border-color: var(--color-primary-white);
    --local-color: var(--color-primary-white);
}

.button.blue-on-white {
    --local-bg-color: var(--color-primary-white);
    --local-border-color: var(--color-brand-navy);
    --local-color: var(--color-brand-navy);
}

.button.blue-on-white:hover {
    --local-bg-color: var(--color-brand-navy);
    --local-border-color: var(--color-brand-navy);
    --local-color: var(--color-primary-white);
}

.button.white-on-blue {
    --local-bg-color: var(--color-brand-navy);
    --local-border-color: var(--color-brand-navy);
    --local-color: var(--color-primary-white);
}

.button.white-on-blue:hover {
    --local-bg-color: var(--color-brand-pale-blue);
    --local-border-color: var(--color-brand-pale-blue);
    --local-color: var(--color-brand-navy);
}

.button.blue-on-transparent {
    --local-bg-color: transparent;
    --local-border-color: var(--color-brand-navy);
    --local-color: var(--color-brand-navy);
}

.button.blue-on-transparent:hover {
    --local-bg-color: var(--color-primary-white);
    --local-border-color: var(--color-brand-navy);
    --local-color: var(--color-brand-navy);
}

.button.teal-on-white {
    --local-bg-color: var(--color-brand-teal);
    --local-border-color: var(--color-brand-pale-blue);
    --local-color: var(--color-brand-pale-blue);
}

.button.teal-on-white:hover {
    --local-bg-color: var(--color-brand-pale-blue);
    --local-border-color: var(--color-brand-pale-blue);
    --local-color: var(--color-brand-teal);
}

.button.blue-on-teal {
    --local-bg-color: var(--color-brand-pale-blue);
    --local-border-color: var(--color-brand-pale-blue);
    --local-color: var(--color-brand-teal);
    font-weight: 500;
}

.button.blue-on-teal:hover {
    --local-bg-color: var(--color-primary-white);
    --local-border-color: var(--color-primary-white);
    --local-color: var(--color-brand-teal);
}

.button.white-on-blue:hover svg path {
    fill: var(--color-brand-navy);
}

@media (max-width: 1070px) {
    .main-nav button.blue-on-orange {
        display: none;
    }
}