/* ================================================
   BUTTONS — Global Button Styles
   Two classes only: .btn and .btn-dark
   Layout-only modifiers: .header-cta .mobile-cta .card-cta
   ================================================ */

/* ── .btn — Gold fill ──────────────────────────── */

.btn {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-secondary);
    background: var(--color-primary);
    border: 2px solid var(--color-primary);
    border-radius: 5px;
    padding: 16px 36px;
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    outline-offset: 4px;
}

.btn:hover,
.btn:focus-visible {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-text-light);
}

/* ── .btn-dark — Black fill ────────────────────── */

.btn-dark {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-text-light);
    background: var(--color-secondary);
    border: 2px solid var(--color-secondary);
    border-radius: 5px;
    padding: 16px 36px;
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    outline-offset: 4px;
}

.btn-dark:hover,
.btn-dark:focus-visible {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-secondary);
}

/* ── Dark background modifier ──────────────────── */
/* Add .btn--dark-bg when button sits on a dark     */
/* section so hover stays visible.                  */

.btn.btn--dark-bg:hover,
.btn.btn--dark-bg:focus-visible {
    background: var(--color-text-light);
    border-color: var(--color-text-light);
    color: var(--color-secondary);
}

/* ── Layout-only modifiers ─────────────────────── */

.btn.header-cta {
    white-space: nowrap;
    font-size: 11px;
    padding: 11px 24px;
}

.btn.mobile-cta {
    display: block;
    text-align: center;
    padding: 14px 20px;
}

.btn-dark.card-cta {
    display: inline-block;
    margin-top: 8px;
    padding: 12px 24px;
    text-align: center;
}

/* ================================================
   RESPONSIVE
   ================================================ */

@media (max-width: 768px) {
    .btn:not(.mobile-cta),
    .btn-dark {
        font-size: 11px;
        padding: 14px 28px;
    }

    .btn-dark.card-cta {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .btn:not(.mobile-cta),
    .btn-dark {
        font-size: 10px;
        padding: 12px 22px;
    }

    .btn-dark.card-cta {
        font-size: 10px;
    }
}