/* ================================================================
   buttons.css  –  Compliance Checker
   Pill buttons (.btn-yellow, .btn-teal). Loaded globally so any page
   can use them.
   ================================================================ */

/* Shared pill-button base — only colour and hover state differ. */
.btn-yellow,
.btn-teal {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-heading);
    font-size: clamp(14px, 1.25vw, 20px);
    letter-spacing: -0.81px;
    line-height: 1.05;
    padding: 14px 16px 10px;
    border-radius: var(--radius-pill);
    border: 2px solid transparent;
    white-space: nowrap;
    cursor: pointer;
    transition: transform var(--transition-base), background var(--transition-base),
                border-color var(--transition-base), color var(--transition-base);
}

/* Orange / yellow – cards and about section */
.btn-yellow { background: var(--ae-orange); color: var(--ae-black); }
.btn-yellow:hover {
    transform: scale(1.06);
    background: transparent;
    border-color: var(--ae-orange);
    color: var(--ae-orange);
}

/* Teal – hero section */
.btn-teal { background: var(--ae-darkblue); color: var(--white); }
.btn-teal:hover {
    transform: scale(1.06);
    background: var(--ae-lightgreen);
    color: var(--ae-darkblue);
}