/*
 * Cathedral Basilica of Saint Louis
 * Bloomerang Online Giving Form Stylesheet
 * Cathedral Basilica Capital Campaign
 */

body {
    background-color: #ffffff;
    color: #333333;
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
}

/* Capital Campaign title */
html::before {
    content: "Cathedral Basilica Capital Campaign";
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    color: #252525;
    font-size: 32px;
    font-weight: normal;
    line-height: 1.25;
    text-align: center;
    margin: 10px auto 12px auto;
}

/* Campaign descriptive text — positioned above the form */
body::before {
    content: "Toward the Next Century\A\A By their response to grace, the faithful of St. Louis demonstrated time and again that their love for Christ was as steadfast as the stones from which the Cathedral is hewn. God is calling each of us to similar, heroic faith.\A\A We are called by God to pass on a Holy Church that is more vibrant than the one we inherited. And all the while, we must grow in greater love for Christ and each other. Let us begin!";
    white-space: pre-line;
    display: block;
    max-width: 760px;
    margin: 0 auto 30px auto;
    padding: 0 12px;
    box-sizing: border-box;
    font-family: Georgia, "Times New Roman", serif;
    color: #555555;
    font-size: 15px;
    font-weight: normal;
    line-height: 1.65;
    text-align: center;
}

h1, h2, h3, h4 {
    font-family: Georgia, "Times New Roman", serif;
    color: #252525;
    font-weight: normal;
    line-height: 1.25;
}

h1 { font-size: 32px; margin-bottom: 20px; }
h2 { font-size: 25px; margin-top: 28px; margin-bottom: 15px; }
h3 { font-size: 20px; }

label {
    color: #333333;
    font-weight: 600;
    font-size: 15px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
select,
textarea {
    width: 100%;
    background-color: #ffffff;
    color: #333333;
    border: 1px solid #b8b8b8;
    border-radius: 2px;
    padding: 11px 12px;
    font-size: 16px;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
select:focus,
textarea:focus {
    border-color: #8a6d35;
    outline: none;
    box-shadow: 0 0 0 2px rgba(138, 109, 53, 0.12);
}

button,
input[type="submit"],
.btn,
.button {
    background-color: #7a6333;
    color: #ffffff;
    border: 1px solid #7a6333;
    border-radius: 2px;
    padding: 13px 26px;
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

button:hover,
button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
.btn:hover,
.btn:focus,
.button:hover,
.button:focus {
    background-color: #5f4d28;
    border-color: #5f4d28;
}

a {
    color: #70592d;
    text-decoration: underline;
}

a:hover,
a:focus {
    color: #4f3e20;
}

input[type="radio"] + label,
input[type="checkbox"] + label {
    font-weight: normal;
}

hr {
    border: 0;
    border-top: 1px solid #dedbd4;
    margin: 30px 0;
}

fieldset {
    border: 0;
    border-top: 1px solid #dedbd4;
    padding: 24px 0;
    margin: 20px 0;
}

legend {
    font-family: Georgia, "Times New Roman", serif;
    color: #252525;
    font-size: 21px;
    padding-right: 12px;
}

.required,
.required-field,
.error {
    color: #8b2f2f;
}

.help-text,
.description,
small {
    color: #6c6c6c;
    font-size: 14px;
}

.success,
.confirmation {
    background-color: #f7f5f0;
    border-left: 4px solid #7a6333;
    padding: 20px;
    margin: 20px 0;
}

@media (max-width: 600px) {
    body { font-size: 16px; }
    html::before { font-size: 27px; margin-bottom: 10px; }
    body::before { font-size: 14px; line-height: 1.6; margin-bottom: 24px; }
    h1 { font-size: 27px; }
    h2 { font-size: 23px; }

    button,
    input[type="submit"],
    .btn,
    .button {
        width: 100%;
        padding: 14px 18px;
    }
}