/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

 .no-rounded {
  border-radius: 0 !important;
}

/* Header */
.heading {
  background-color: #7242B1; 
  min-height: 100px; 
  margin-top: 0; 
  display: flex; 
  align-items: center; 
  justify-content: center;
  color: #FFF9F3
}

.sub-heading {
  background-color: #FFF9F3; 
  min-height: 50px; 
  margin-top: 0; 
  margin-bottom: 0;
  display: flex; 
  align-items: center; 
  justify-content: center;
}

/* Cards */

.card:hover {
  transform: translateY(-5px);
  transition: transform 0.2s ease-in-out;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
  justify-content: center;
}

/* Buttons */

.btn-primary {
  background-color: #7242B1; 
  border-color: #7242B1;
  color: #FFF9F3;
}

.btn-primary:hover {
  background-color: #5a3390;
  border-color: #5a3390;
  color: #FFF9F3;
}

.btn-primary:active {
  background-color: #FFF9F3;
  border-color: #5a3390;
  color: #5a3390;
}

.btn-secondary {
  background-color: #012C18; 
  border-color: #012C18;
  color: #FFF9F3;
}

.btn-secondary:hover {
  background-color: #035936; 
  border-color: #035936;
  color: #FFF9F3;
}

.btn-secondary:active {
  background-color: #FFF9F3;
  border-color: #012C18;
  color: #012C18;
}

.btn-tertiary {
  background-color: #FFF9F3;
  border-color: #012C18;
  color: #012C18;
}

.btn-tertiary:hover {
  background-color: #012C18; 
  border-color: #012C18;
  color: #FFF9F3;
}

.btn-tertiary:active {
  background-color: #035936; 
  border-color: #035936;
  color: #FFF9F3;
}

/* Text */

.text-dark-green {
  color: #012C18;
}

.text-purple {
  color: #5a3390;
}

/* Images */

/* Images for the donation page */
.donation-images {
  flex-wrap: wrap;
}

.donation-image {
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: 1%;
  border: solid 3px #012C18;
}

@media (min-width: 768px) {
  .donation-images {
    flex-wrap: nowrap;
  }

  .donation-image {
    width: auto;
    max-width: 200px;
  }
}

/* Images for the book club page */
.book-club-image {
  max-width: 100%;
  height: auto;
  max-height: 500px;
}

@media (min-width: 768px) {
  .book-club-content {
    flex-direction: row;
    text-align: left;
  }
}