/*
 * Re-themes Bootstrap 4 on the server-rendered pages with the na.amma.org tokens
 * (amma-tokens.css). Must load after bootstrap.min.css and donate-fm.css.
 * The React app applies the same choices in react-donation/src/index.css.
 */

body {
    color: var(--amma-text);
    font-family: var(--font-sans);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--amma-purple-dark);
    font-family: var(--font-sans);
}

h1, h2, h3 {
    font-weight: 400;
}

h4, h5, h6 {
    font-weight: 500;
}

a {
    color: var(--amma-plum);
}

/* na.amma.org hovers to --amma-mauve, which is only 3:1 on these backgrounds;
   purple-dark keeps hovered links readable (WCAG AA). */
a:hover,
a:focus {
    color: var(--amma-purple-dark);
}

.bg-light {
    background-color: var(--amma-cloud) !important;
}

.text-primary {
    color: var(--amma-plum) !important;
}

.text-danger {
    color: var(--amma-accent) !important;
}

.form-control:focus,
.custom-select:focus,
.styled-select:focus {
    border-color: var(--amma-plum);
    box-shadow: var(--amma-focus-ring);
}

.invalid-feedback {
    color: var(--amma-accent);
}

.was-validated .form-control:invalid,
.form-control.is-invalid,
.was-validated .custom-select:invalid,
.custom-select.is-invalid {
    border-color: var(--amma-accent);
}

/* Result-page buttons ("AMMA North America" / "Amma.org"). */
.btn-primary,
.btn-outline-secondary {
    border-width: 2px;
    border-radius: var(--amma-btn-radius);
    font-family: var(--font-sans);
    font-weight: 600;
}

.btn-primary {
    border-color: var(--amma-bronze);
    background-color: var(--amma-bronze);
    color: var(--amma-white);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    border-color: var(--amma-purple-dark);
    background-color: var(--amma-purple-dark);
    color: var(--amma-white);
    box-shadow: none;
}

.btn-outline-secondary {
    border-color: var(--amma-plum);
    background-color: var(--amma-white);
    color: var(--amma-plum);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:not(:disabled):not(.disabled):active {
    border-color: var(--amma-plum);
    background-color: var(--amma-plum);
    color: var(--amma-white);
    box-shadow: none;
}

hr {
    border-top-color: rgba(168, 156, 141, 0.4); /* --amma-greige at 40% */
}

/* State / State (Other countries) / Zip share a row; in Poppins the middle
   label wraps at most widths, which pushed its input below the other two.
   Reserve two lines for each label and seat the text on its input so the
   inputs always line up, with or without validation messages showing. */
@media (min-width: 768px) {
    .amma-label-row > [class*="col-"] > label {
        display: flex;
        align-items: flex-end;
        min-height: 3em;
    }
}