/**
 * Description: Styles for Project Galloway page
 * Author: Colby Tse
 * Created: 2025-08-29
 */

/* === Fonts === */

@font-face {
 font-family: "Sinkin Sans 700";
 src: url("https://cms.org.au/wp-content/themes/cms/fonts/SinkinSans-700Bold.woff2") format("woff2"), url("https://cms.org.au/wp-content/themes/cms/fonts/SinkinSans-700Bold.woff") format("woff");
 font-weight: bold;
 font-style: normal;
 font-display: swap;
}

@font-face {
 font-family: "Sinkin Sans 600";
 src: url("https://cms.org.au/wp-content/themes/cms/fonts/SinkinSans-600SemiBold.woff2") format("woff2"), url("https://cms.org.au/wp-content/themes/cms/fonts/SinkinSans-600SemiBold.woff") format("woff");
 font-weight: 600;
 font-style: normal;
 font-display: swap;
}

@font-face {
 font-family: "Sinkin Sans 500";
 src: url("https://cms.org.au/wp-content/themes/cms/fonts/SinkinSans-500Medium.woff2") format("woff2"), url("https://cms.org.au/wp-content/themes/cms/fonts/SinkinSans-500Medium.woff") format("woff");
 font-weight: 500;
 font-style: normal;
 font-display: swap;
}

@font-face {
 font-family: "Minion Pro";
 src: url("https://cms.org.au/wp-content/themes/cms/fonts/MinionPro-Regular.woff2") format("woff2"), url("https://cms.org.au/wp-content/themes/cms/fonts/MinionPro-Regular.woff") format("woff");
 font-weight: normal;
 font-style: normal;
 font-display: swap;
}

@font-face {
 font-family: "Sinkin Sans 400";
 src: url("https://cms.org.au/wp-content/themes/cms/fonts/SinkinSans-400Regular.woff2") format("woff2"), url("https://cms.org.au/wp-content/themes/cms/fonts/SinkinSans-400Regular.woff") format("woff");
 font-weight: normal;
 font-style: normal;
 font-display: swap;
}

/* === Universal === */

* {
 --blue: #1d0f44;
 --green: #76df7a;
 --tan: #da9978;
 --lightTan: #f8ccb9;
 --lighterTan: #f5e7dd ;
 --paleBlue: #dcf1f4;
 box-sizing: border-box;
}

html {
 font-family: "Sinkin Sans 500";
 font-size: 16px;
}

body {
 margin: 0;
 padding: 0;
}

html, body {
 overflow-x: hidden;
}

@media (max-width: 1000px) {
 html {
  font-size: 12px;
 }
}

/* === Logo === */

.logo-container {
 align-items: center;
 display: flex;
 justify-content: center;
 margin-top: 3rem;
}

.logo-container > img {
 width: 10rem;
}

@media (max-width: 1000px) {
 .logo-container {
  margin-top: 2rem; 
 }

 .logo-container > img {
  width: 7.5rem;
 }
}

/* === Title === */

.title-container {
 margin-top: 2rem;
 text-align: center;
}

.title {
 color: var(--blue);
 font-size: 2rem;
 font-weight: bold;
}

@media (max-width: 1000px) {
 .title {
  font-size: 1.15rem;
 }
}

/* === Progress === */

.progress-container {
 align-items: center;
 display: flex;
 flex-direction: row;
 gap: 2rem;
 justify-content: center;
 margin-top: 4rem;
}

/* Progress bar */
.progress-bar-container {
 display: grid;
 width: 45%;
}

.progress-bar-container img {
 grid-area: 1 / 1; /* put all images in the same grid cell */
 width: 100%;
}

.progress-bar-container .overlay {
 clip-path: inset(100% 0 0 0);
 opacity: 0;
 transition: clip-path 1.5s ease, opacity 1.5s ease;
}

@media (max-width: 1000px) {
 .progress-container {
  flex-direction: column;
  gap: 0;
  margin-top: 1rem;
 }

 .progress-bar-container {
  width: 75%;
 }
}

/* Status bar */
.status-bar-container {
 align-items: center;
 background-color: var(--tan);
 border-radius: 20px;
 color: white;
 display: flex;
 flex-direction: column;
 font-family: "Sinkin Sans 400";
 gap: 0.25rem;
 justify-content: center;
 max-width: 350px;
 padding: 1.75rem 2rem;
 text-align: center;
 width: 35%;
}

.status-bar-container span:first-of-type {
 color: var(--blue);
 font-family: "Sinkin Sans 500";
}

#total-raised, .total-contributors-container {
 margin-top: 1rem;
 font-family: "Sinkin Sans 500";
 font-size: 2rem;
 font-weight: bold;
}

#total-contributors {
 color: white;
}

#total-raised::before {
 content: "$ ";
 color: var(--lightTan);
}

.total-contributors-container {
 align-items: center;
 display: flex;
 flex-direction: row;
 gap: 0.5rem;
}

.total-contributors-img {
 height: 1.75rem;
}

#donate-container {
 margin-top: 1.5rem;
 width: 90%;
}

#donate-container button {
 background: var(--blue);
 border: none;
 border-radius: 5px;
 padding: 1rem 0;
 width: 100%;
}

#donate-container button a {
 color: white;
 font-family: "Sinkin Sans 700";
 font-size: 1.5rem;
 text-decoration: none;
}

@media (max-width: 1000px) {
 .status-bar-container {
  margin-top: 2rem;
  max-width: none;
  width: 90%;
 }

 #total-raised, .total-contributors-container, #donate-container {
  margin-top: 0.5rem;
 }

 #donate-container {
  width: 45%;
 }

 #donate-container button {
  padding: 0.5rem 0;
 }

 #donate-container button a {
  font-size: 1rem;
 }
}

/* === Blurb === */

.blurb-container {
 align-items: center;
 background-color: var(--lighterTan);
 display: flex;
 font-family: "Sinkin Sans 400";
 flex-direction: column;
 gap: 1rem;
 margin-top: 4rem;
 padding: 4rem 0;
}

.blurb-container .title {
 letter-spacing: 2px;
 font-variant: all-small-caps;
 max-width: 80%;
 text-align: center;
}

.blurb-container .content {
 line-height: 2rem;
 max-width: 80%;
}

/* === Give === */

.give-container {
 align-items: center;
 display: flex;
 flex-direction: column;
 font-family: "Sinkin Sans 400";
 gap: 2.5rem;
 justify-content: center;
 padding: 4rem 0;
 text-align: center;
}

.give-container .title {
 color: var(--tan);
 font-family: "Sinkin Sans 700";
 font-weight: bold;
 width: 90%;
}

.give-container .text {
 line-height: 2rem;
}

#amounts-container {
 display: flex;
 flex-direction: row;
 gap: 1rem;
}

.dollar-sign {
 align-items: center;
 display: flex;
}

#amounts-container label, .give-option-text, #custom-amount {
 border-radius: 20px;
 position: relative;
}

#amounts-container input[type="radio"] {
 opacity: 0;
 position: absolute;
}

.give-option-text, #custom-amount {
 align-items: center;
 background-color: var(--paleBlue);
 border: solid var(--paleBlue);
 color: var(--blue);
 display: flex;
 font-family: "Sinkin Sans 400";
 font-size: 1.5rem;
 justify-content: center;
 padding: 0.5rem 2rem;
 text-align: center;
 transition: 0.2s;
 user-select: none;
}

.give-option-text:hover {
 background-color: var(--lighterTan);
 border: solid var(--lighterTan);
 color: darkgrey;
}

#custom-amount {
 width: 17rem;
}

#amounts-container .give-option:checked + .give-option-text {
 background-color: var(--lighterTan);
 border: solid var(--lighterTan);
 color: var(--blue);
}

#custom-amount:focus {
 border: solid var(--paleBlue);
 outline: none;
}

#custom-amount:not(:placeholder-shown) {
 background-color: var(--lighterTan);
 border: solid var(--lighterTan);
}

.give-container button {
 background: var(--tan);
 border: none;
 border-radius: 5px;
 color: white;
 font-family: "Sinkin Sans 700";
 font-size: 20px;
 padding: 1rem 0;
 text-decoration: none;
 cursor: pointer;
 width: 15rem;
}

@media (max-width: 1000px) {
 .give-container .title, .give-container .text {
  max-width: 80%;
 }

 #amounts-container {
  align-items: center;
  flex-direction: column;
 }

 #amounts-container > label, #custom-amount {
  width: 70%;
 }
}

/* === People Stats === */

.people-stats-container {
 align-items: center;
 background-color: var(--blue);
 display: flex;
 flex-direction: column;
 gap: 1.5rem;
 justify-content: center;
 padding: 5rem 0;
 width: 100%;
}

.people-stats-container .title {
 color: white;
 max-width: 80%;
 text-align: center;
}

.people-stats-container .text {
 color: var(--lightTan);
 font-variant: all-small-caps;
 letter-spacing: 2px;
}

#people-stats {
 max-width: 80%;
 text-align: center;
}