/*
    BNFTcares colors for the charity sign-up pages (/signup/nonprofit), loaded by _AuthLayout. These pages use the
    employee app's auth layout (bootstrap, matter and exchange), so this file loads after them and swaps the employee
    app's blue and green for the BNFTcares palette. Keep the colors in sync with the :root block in bnftcares.css.
*/

:root,
body.pto-auth__body {
    --bc-pink: #e04c81;
    --bc-pink-dark: #c2306a;
    --bc-pink-darker: #a82459;
    --bc-pink-light: #ff9ec3;
    --bc-berry: #4a0f2b;
    --bc-blush: #fbdce8;
    --bc-pale: #fff7fa;
    --bc-ink: #1b1b1e;
    --bc-text: #43474e;
    --bc-muted: #6b5a62;
    --bc-line: #f1d6e1;
    --bc-error: #b3401a;
    --bc-heading: "Montserrat", "Segoe UI", sans-serif;

    /* Bootstrap */
    --bs-primary: var(--bc-pink);
    --bs-primary-rgb: 224, 76, 129;
    --bs-link-color: var(--bc-pink-dark);
    --bs-link-color-rgb: 194, 48, 106;
    --bs-link-hover-color: var(--bc-pink-darker);
    --bs-link-hover-color-rgb: 168, 36, 89;
    --bs-focus-ring-color: rgba(224, 76, 129, 0.25);
    --bs-danger: var(--bc-error);
    --bs-success: var(--bc-pink);
    --bs-success-rgb: 224, 76, 129;

    /* Employee app theme: blue primary and green secondary both become pink, on the public site's pale pink page. */
    --pto-theme-primary: var(--bc-pink);
    --pto-theme-secondary: var(--bc-pink);
    --pto-theme-background: var(--bc-pale);
    --pto-theme-text: var(--bc-text);
}

/* Logo, as on the public site (bnftcares.css), in place of the PTO Exchange logo above the card. */

.bc-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.bc-logo img {
    width: 44px;
    height: 44px;
}

.bc-wordmark {
    display: inline-flex;
    align-items: baseline;
    font-family: "Exo 2", var(--bc-heading);
    font-style: italic;
    line-height: 1;
}

.bc-wordmark-bnft {
    font-size: 32px;
    font-weight: 600;
    color: var(--bc-berry);
}

.bc-wordmark-cares {
    font-size: 27px;
    font-weight: 800;
    color: var(--bc-pink);
}

/* Centered above the card. */
.bc-logo.bc-auth-logo {
    display: flex;
    width: fit-content;
    margin: 130px auto 56px;
}

@media (max-width: 575.98px) {
    .bc-logo.bc-auth-logo {
        margin: 20px auto;
    }

    .bc-logo img {
        width: 38px;
        height: 38px;
    }

    .bc-wordmark-bnft {
        font-size: 27px;
    }

    .bc-wordmark-cares {
        font-size: 23px;
    }
}

/* Headings */

body.pto-auth__body h1,
body.pto-auth__body h2,
body.pto-auth__body h3,
body.pto-auth__body h4 {
    font-family: var(--bc-heading);
    color: var(--bc-berry);
}

/* The card: a pink outline and soft shadow, as the forms on the public site. */

body.pto-auth__body .card {
    border: 1px solid var(--bc-line);
    border-radius: 20px;
    box-shadow: 0 1px 2px rgb(74 15 43 / 4%), 0 12px 32px rgb(74 15 43 / 6%);
}

body.pto-auth__body .have-info {
    color: var(--bc-muted);
}

/* Buttons */

.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bc-pink);
    --bs-btn-border-color: var(--bc-pink);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bc-pink-dark);
    --bs-btn-hover-border-color: var(--bc-pink-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bc-pink-darker);
    --bs-btn-active-border-color: var(--bc-pink-darker);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bc-pink);
    --bs-btn-disabled-border-color: var(--bc-pink);
    --bs-btn-focus-shadow-rgb: 224, 76, 129;
}

.btn-primary {
    --bs-btn-bg: var(--bc-pink);
    --bs-btn-border-color: var(--bc-pink);
    --bs-btn-hover-bg: var(--bc-pink-dark);
    --bs-btn-hover-border-color: var(--bc-pink-dark);
    --bs-btn-active-bg: var(--bc-pink-darker);
    --bs-btn-active-border-color: var(--bc-pink-darker);
    --bs-btn-disabled-bg: var(--bc-pink);
    --bs-btn-disabled-border-color: var(--bc-pink);
    --bs-btn-focus-shadow-rgb: 224, 76, 129;
}

/* Forms */

.form-control:focus,
.form-select:focus {
    border-color: var(--bc-pink);
    box-shadow: 0 0 0 0.25rem rgba(224, 76, 129, 0.25);
}

/* Underlined fields (md-form) show focus as a pink underline, as the employee app does in blue, not a ring. */
.md-form input.form-control:not(.input-rounded):focus,
.md-form select.form-select:focus {
    border-color: var(--bc-pink);
    box-shadow: inset 0 -2px 0 var(--bc-pink);
}

.form-check-input:checked {
    background-color: var(--bc-pink);
    border-color: var(--bc-pink);
}

.form-check-input:focus {
    border-color: var(--bc-pink);
    box-shadow: 0 0 0 0.25rem rgba(224, 76, 129, 0.25);
}

/* Validation messages use the BNFTcares error color rather than the employee app's orange. */
.field-validation-error,
.validation-summary-errors,
.text-danger,
.error {
    color: var(--bc-error) !important;
}

input.input-validation-error,
select.input-validation-error {
    border-color: var(--bc-error);
}