/*
 * Shared components styled with the na.amma.org tokens (amma-tokens.css).
 * Class selectors only, so the file can load in any order relative to Bootstrap
 * (server-rendered pages) or Tailwind (React app) without overriding their base
 * styles. Element-level theming (body text, headings, links, form focus) lives in
 * each site's own stylesheet: amma-bootstrap.css and react-donation/src/index.css.
 */

/* Primary call to action: na.amma.org's .rich-btn--bronze pill. */
.amma-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 26px;
    border: 2px solid var(--amma-bronze);
    border-radius: var(--amma-btn-radius);
    background-color: var(--amma-bronze);
    color: var(--amma-white);
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.amma-btn:hover:not(:disabled),
.amma-btn:focus-visible {
    border-color: var(--amma-purple-dark);
    background-color: var(--amma-purple-dark);
    color: var(--amma-white);
    text-decoration: none;
}

.amma-btn:focus-visible {
    outline: 3px solid var(--amma-gold);
    outline-offset: 2px;
}

.amma-btn:disabled {
    border-color: var(--amma-mist);
    background-color: var(--amma-mist);
    color: var(--amma-slate);
    cursor: not-allowed;
}

/* Full-width payment button (Credit Card / Donate). */
.amma-btn--block {
    display: flex;
    width: 100%;
    min-height: 55px;
    font-size: 1.25rem;
}

/* Secondary call to action: na.amma.org's header Donate button (plum outline pill). */
.amma-btn--outline {
    border-color: var(--amma-plum);
    background-color: var(--amma-white);
    color: var(--amma-plum);
}

.amma-btn--outline:hover:not(:disabled),
.amma-btn--outline:focus-visible {
    border-color: var(--amma-plum);
    background-color: var(--amma-plum);
    color: var(--amma-white);
}

/* Page backgrounds for the two form variants. */
.amma-bg-classic {
    background-color: var(--amma-bg-classic);
}

/* Footer: na.amma.org's footer is --amma-purple-dark with whitesmoke text. */
.amma-footer {
    background-color: var(--amma-purple-dark);
}

/* .robo (Roboto) is on the footer text in both sites; Poppins replaces it. */
.amma-footer,
.amma-footer .robo {
    font-family: var(--font-sans);
}

.amma-footer,
.amma-footer a {
    color: whitesmoke;
}

.amma-footer a:hover,
.amma-footer a:focus {
    color: var(--amma-footer-heading);
}

/* "Other Ways to Give" callout below the page intro. */
.ways-to-give {
    margin: 1rem 0 0.5rem;
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--amma-plum);
    border-radius: 0.25rem;
    background-color: var(--amma-white);
}

.ways-to-give h5 {
    margin-bottom: 0.25rem;
    color: var(--amma-purple-dark);
    font-weight: 600;
}

.ways-to-give p {
    margin-bottom: 0.75rem;
}

/* Small italic notice (program guide). Accent red, not terracotta: terracotta is
   under 4.5:1 on the page backgrounds at this size. */
.amma-notice {
    color: var(--amma-accent);
    font-size: var(--fs-small);
    font-style: italic;
}

/* Payment error message. */
.amma-alert-error {
    padding: 12px 16px;
    border: 1px solid var(--amma-accent);
    border-radius: 0.5rem;
    background-color: var(--amma-white);
    color: var(--amma-accent);
    font-size: var(--fs-small);
}