/*
 * Description: Styling for Brittany's Car Campaign.
 * Author: Colby Tse
 * Created: 2025-08-22
 */

@charset "utf-8";

/* === Universal and HTML === */

* {
 box-sizing: border-box;
}

html {
 background-color: #e2e6eA;
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
  "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 font-size: 16px;
 margin: 1rem;
}

@media (max-width: 600px) {
 html {
  font-size: 13px;
 }
}

/* === Header === */

header > img {
 border-radius: 10px 10px 0 0;
 height: auto;
 width: 100%;
}

/* === Body === */

body {
 background: white;
 border-radius: 20px;
 box-shadow: 0 0 20px -7px grey;
 margin: 0 auto;
 max-width: 900px;
}

/* === Masthead === */

.masthead > * {
 color: #141b4d;
 margin: 2rem auto;
 text-align: center;
 width: 90%;
}

.masthead .title {
 font-size: 1.75rem;
 font-weight: bold;
}

.masthead .portrait {
 border-radius: 9999px;
 display: block;
 height: 20rem;
 object-fit: cover;
 width: 20rem;
}

.masthead a {
 display: block;
}

/* === Message from Worker ===  */

.msg-container {
 background-color: #ededed;
 border-radius: 10px;
 line-height: 1.5;
 max-width: 80%;
 margin: 1rem auto 3rem;
 padding: 1.25rem 1rem 1rem 1rem;
}

.msg {
 font-style: italic;
 margin-bottom: 1rem;
}

.sign-off {
 font-style: italic;
 font-weight: bold;
}

/* === Campaign information === */

.information {
 line-height: 1.5;
 max-width: 80%;
 margin: 0 auto 3rem;
}

.information .header {
 font-size: 1.25rem;
 font-weight: bold;
}

.information .footnote {
 color: grey;
 font-style: italic;
}

.information .challenge {
 background-color: #a1cdc6;
 font-weight: bold;
 margin-top: 2rem;
 padding: 1rem 2.5rem;
 text-align: center;
}

/* === Give === */

.give {
 margin: 1rem auto 1rem;
 max-width: 80%;
}

.give .title {
 border-bottom: solid 1px black;
 color: #141b4d;
 font-size: 24px;
 font-weight: bold;
 padding-bottom: 1rem;
 text-align: left;
}

.give-form > * {
 margin: 1rem auto;
}

/* === Amount input === */

.amount-label-above {
 display: block;
 margin-bottom: 5px;
}

#amount {
 border: solid 1px #ddd;
 border-radius: 5px;
 font-size: 1rem;
 height: 2rem;
 text-align: center;
 width: 6rem;
}

/* === Validation errors === */

.validation-error {
 color: red;
 font-size: 12px;
 margin-top: 5px;
}

/* === Checkboxes === */

.checkbox-container {
 margin: 0;
}

.checkbox-container > input {
 -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
 background-color: #eee;
    border-radius: 5px;
 height: 2rem;
 position: absolute;
    transition-duration: 0.3s;
 width: 2rem;
}

.checkbox-container > input:checked {
 background-color: #85c1b7;
}

.check {
 background-color: #eee;
 clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
 height: 1rem;
 left: 0.75rem;
 pointer-events: none;
 position: relative;
 top: 0.75rem;
 width: 1rem;
}

.checkbox-label {
 bottom: 0.75rem;
 left: 3rem;
 padding-right: 3rem;
 position: relative;
}

/* === Proceed === */

#proceed {
 margin: 2rem;
 text-align: center;
}

#proceed > button {
 background-color: #f4364c;
 border-style: none;
 border-radius: 30px;
 color: white;
 font-weight: bold;
 font-size: 1rem;
 padding: 0.75rem;
 transition: 0.25s ease-out;
}

#proceed > button:hover {
 background-color: #ca1c47;
 cursor: pointer;
 transition: 0.25s ease-out;
}

.prayer-updates-inv {
 font-size: 0.85rem;
 max-width: 80%;
 margin: 1rem auto 2rem;
}

/* === Footer === */

footer {
 background-color: #141b4d;
 border-radius: 0 0 10px 10px;
 line-height: 1.5rem;
 padding: 2rem 0 2rem 5%;
}

.footer-branch-name {
 color: white;
 font-weight: bold;
}

.footer-branch-details {
 color: #cbcbcb;
}

footer a {
 color: white;
 line-height: 3rem;
 text-decoration: none;
}

/* End of stylesheet */