/* ============================================
   Girl Scouts Color Palette
   Source: GSUSA Official Brand Guidelines
   ============================================ */
:root {
  /* Primary */
  --gs-green:        #00843D;  /* Official GS Green */
  --gs-green-light:  #00AE58;  /* Light GS Green */
  --gs-green-dark:   #005C27;  /* Dark GS Green */

  /* Accent */
  --gs-gold:         #FFC72C;  /* GS Gold / Trefoil Gold */
  --gs-gold-dark:    #D4A017;  /* Deep Gold */
  --gs-berry:        #C6003B;  /* GS Berry / Red */
  --gs-berry-dark:   #8E002A;  /* Deep Berry */

  /* Neutrals */
  --gs-navy:         #003366;  /* GS Navy */
  --gs-dark:         #1A1A2E;  /* Near-black for headings */
  --gs-muted:        #666666;  /* Muted body text */
  --gs-subtle:       #999999;  /* Subtle / placeholder text */
  --gs-white:        #FFFFFF;
  --gs-bg:           #F4FAF6;  /* Pale green-tinted page background */
  --gs-card-shadow:  rgba(0, 132, 61, 0.12);
}

/* ============================================
   Reset
   ============================================ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ============================================
   Page
   ============================================ */
body {
  font-family: 'Segoe UI', sans-serif;
  background: linear-gradient(160deg, var(--gs-bg) 0%, #fffde7 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 24px;
}

/* ============================================
   Header
   ============================================ */
header {
  text-align: center;
  margin-bottom: 48px;
}

.gs-badge {
  display: inline-block;
  background: var(--gs-green-light);
  color: var(--gs-white);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 5px 16px;
  border-radius: 20px;
  margin-bottom: 18px;
}

h1 {
  font-size: 2.8rem;
  font-weight: 900;
  color: var(--gs-dark);
  margin-bottom: 10px;
}

h1 span {
  color: var(--gs-berry);
}

.tagline {
  color: var(--gs-muted);
  font-size: 1.1rem;
}

/* ============================================
   Cards Grid
   ============================================ */
.cards {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1100px;
  width: 100%;
}

.card {
  background: var(--gs-white);
  border-radius: 24px;
  padding: 44px 36px;
  flex: 1;
  min-width: 280px;
  max-width: 320px;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.07);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.25s, box-shadow 0.25s;
  text-decoration: none;
  color: inherit;
  border: 3px solid transparent;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.13);
  border-color: var(--gs-green);
}

/* ============================================
   Card Avatars  (per-card accent colors)
   ============================================ */
.avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 20px;
  box-shadow: 0 6px 20px var(--gs-card-shadow);
  background: linear-gradient(135deg, var(--gs-green), var(--gs-green-light)); /* fallback if image missing */
}

.card:nth-child(2) .avatar {
  box-shadow: 0 6px 20px rgba(198, 0, 59, 0.22);
}

.card:nth-child(3) .avatar {
  box-shadow: 0 6px 20px rgba(255, 199, 44, 0.30);
}

/* ============================================
   Card Text
   ============================================ */
.card h2 {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--gs-dark);
  margin-bottom: 10px;
}

.card p {
  font-size: 0.95rem;
  color: var(--gs-subtle);
  margin-bottom: 30px;
  line-height: 1.6;
  flex-grow: 1;
}

/* ============================================
   Progress / Goal Display
   ============================================ */
.remaining-box {
  width: 100%;
  margin-bottom: 30px;
}

.remaining-value {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--gs-green);
  margin-bottom: 8px;
}

.remaining-value.loading {
  color: var(--gs-subtle);
  font-weight: 400;
}

.progress-bar {
  width: 100%;
  height: 10px;
  background: #e8f5ee;
  border-radius: 99px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gs-green), var(--gs-green-light));
  border-radius: 99px;
  transition: width 0.6s ease;
}

.card:nth-child(2) .remaining-value { color: var(--gs-berry); }
.card:nth-child(2) .progress-bar    { background: #fce8ed; }
.card:nth-child(2) .progress-fill   { background: linear-gradient(90deg, var(--gs-berry), #f07090); }

.card:nth-child(3) .remaining-value { color: var(--gs-gold-dark); }
.card:nth-child(3) .progress-bar    { background: #fdf6dc; }
.card:nth-child(3) .progress-fill   { background: linear-gradient(90deg, var(--gs-gold-dark), var(--gs-gold)); }

/* ============================================
   CTA Buttons  (per-card accent colors)
   ============================================ */
.cta {
  background: var(--gs-green);
  color: var(--gs-white);
  padding: 14px 32px;
  border-radius: 50px;
  font-weight: 800;
  font-size: 1rem;
  width: 100%;
}

.card:nth-child(2) .cta {
  background: var(--gs-berry);
}

.card:nth-child(3) .cta {
  background: var(--gs-gold);
  color: var(--gs-dark); /* dark text on gold for contrast */
}

/* ============================================
   Footer
   ============================================ */
footer {
  margin-top: 56px;
  color: var(--gs-subtle);
  font-size: 0.82rem;
  text-align: center;
  line-height: 1.8;
}