/*
 * Description: Styling for Window Storytelling (Mavis Payne Tribute)
 * Author: Colby Tse
 * Created: 2026-05-06
 */

@charset "utf-8";

/* =================================================== UNIVERSAL ==================================================== */

* {
 box-sizing: border-box;
}

html {
 --cmsBlue: #141b4d;
 --cmsLightBlue: #252982;
 --cmsRed: #f4364c;
 --cmsDarkRed: #bf0d3e;
 --cmsGrassGreen: #6cc24a;

 font-family:
  '-apple-system', 
  'BlinkMacSystemFont', 
  'Segoe UI', 
  'Roboto', 
  'Helvetica Neue', 
  'Arial', 
  'sans-serif', 
  'Apple Color Emoji', 
  'Segoe UI Emoji', 
  'Segoe UI Symbol';
 font-size: 16px;
}

body {
 background-color: #e2e6ea;
 margin: 0;
 padding: 0;
}

.content {
 align-items: center;
 background: white;
 border-radius: 15px;
 box-shadow: 0 0 20px -7px grey;
 display: flex;
 flex-direction: column;
 margin: 1rem auto;
 max-width: 900px;
 overflow: hidden;
}

.content > *:not(.header, footer) {
 max-width: 80%;
 width: 80%;
}

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

 .content {
  border-radius: 0;
  margin: 0 auto;
 }
}

/* ================================================== INFORMATION =================================================== */

.header > img {
 height: auto;
 width: 100%;
}

.masthead > * {
 color: var(--cmsBlue);
 margin: 2rem auto;
 text-align: center;
}

/* —————————————————————————————————————————————————————————————————————————————————————————————————————————————————— */

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

.masthead .subtitle {
 font-size: 1.5rem;
 font-style: italic;
}

.masthead .portrait {
 border-radius: 9999px;
 display: block;
 width: 45%;
}

/* —————————————————————————————————————————————————————————————————————————————————————————————————————————————————— */

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

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

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

/* —————————————————————————————————————————————————————————————————————————————————————————————————————————————————— */

.blurb {
 display: flex;
 flex-direction: column;
 gap: 1rem;
 line-height: 1.5;
}

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

/* ====================================================== GIVE ====================================================== */

.give {
 display: flex;
 flex-direction: column;
 gap: 1rem;
 margin: 1rem auto;
}

.give .title {
 border-bottom: solid 1px black;
 color: var(--cmsBlue);
 font-size: 24px;
 font-weight: bold;
 padding-bottom: 1rem;
 text-align: left;
}

/* —————————————————————————————————————————————————————————————————————————————————————————————————————————————————— */

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

/* —————————————————————————————————————————————————————————————————————————————————————————————————————————————————— */

.freq-container {
 display: flex;
 flex-direction: column;
}

.freq-options-container {
 display: flex;
 margin-top: 5px;
}

.freq-option {
 align-items: center;
 background-color: #eee;
 color: white;
 display: flex;
 height: 3rem;
 justify-content: center;
 position: relative;
 transition-duration: 0.3s;
 width: 6rem;
}

.freq-option > input {
 height: 100%;
 margin: 0;
 opacity: 0;
 padding: 0;
 width: 100%;
 z-index: 1;
}

.freq-option:has(input:checked) {
 background-color: color-mix(in srgb, var(--cmsGrassGreen) 50%, white 50%);
 color: black;
}

.freq-option-label {
 font-weight: bold;
 position: absolute;
 user-select: none;
}

#one-off {
 border-radius: 6px 0 0 6px;
}

#monthly {
 border-radius: 0 6px 6px 0;
}

#monthly-give-container {
 font-size: 0.85rem;
 margin-top: 1rem;
}

#monthly-give-date {
 border: solid 1px #ddd;
 border-radius: 5px;
 font-size: 1rem;
 height: 2rem;
 margin: 0 0.25rem;
 text-align: center;
 width: 3rem;
}

.error {
 color: red;
 font-size: 0.75rem;
}

#other-error {
 margin-bottom: 1rem;
}

/* —————————————————————————————————————————————————————————————————————————————————————————————————————————————————— */

.checkboxes-container {
 display: flex;
 flex-direction: column;
 gap: 5px;
 margin-top: 1rem;
}

.checkbox > 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 > input:checked {
 background-color: color-mix(in srgb, var(--cmsGrassGreen) 50%, white 50%);
}

.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;
 font-size: 0.85rem;
 left: 3rem;
 padding-right: 3rem;
 position: relative;
}

/* —————————————————————————————————————————————————————————————————————————————————————————————————————————————————— */

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

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

#proceed > button:hover {
 background-color: var(--cmsDarkRed);
 cursor: pointer;
 transition: 0.25s ease-out;
}

/* ===================================================== FOOTER ===================================================== */

footer {
 background-color: var(--cmsBlue);
 line-height: 1.5rem;
 padding: 2rem 0 2rem 2rem;
 width: 100%;
}

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

footer .abn, footer .postal-address, footer .phone {
 color: #cbcbcb;
}

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