:root{
  --card-bg: #ffffff;
  --card-radius: 12px;
  --card-padding: 20px;
  --edge-height: 12px;            /* height of the embossed band */
  --edge-weak-dark: rgba(0,0,0,0.08);
  --edge-weak-light: rgba(255,255,255,0.1);
  --edge-strong-dark: rgba(0,0,0,0.18);
  --edge-strong-light: rgba(255, 255, 255, 0.05);
  --transition-time: 220ms;
}

/* card base */
.card{
  position: relative;
  background: var(--card-bg);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25); /* soft global shadow */
  overflow: visible; /* pseudo-element sits visually atop bottom edge */
  transition: transform var(--transition-time) ease, box-shadow var(--transition-time) ease;
}

/* bottom emboss band (pseudo-element) */
.card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--edge-height);
  border-bottom-left-radius: calc(var(--card-radius));
  border-bottom-right-radius: calc(var(--card-radius));
  pointer-events: none;

  /* subtle embossed look using two inset shadows: 
     - a faint dark inset above the edge (creates depth);
     - a faint light inset below it (creates highlight); */
  box-shadow:
    inset 0 -6px 6px -6px var(--edge-weak-dark),
    inset 0 6px 7px -7px var(--edge-weak-light);

  /* a slight translucent gradient to soften the transition */
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(0,0,0,0.01));
  transition: box-shadow var(--transition-time) ease, height var(--transition-time) ease, transform var(--transition-time) ease;
  transform: translateZ(0); /* help with smoother rendering on some browsers */
}

/* Hover state: make the embossing more pronounced */
.card:hover{
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.48);
}
.card:hover::after{
  height: calc(var(--edge-height) + 3px); /* slightly thicker band */
  box-shadow:
    inset 0 -10px 12px -6px var(--edge-strong-dark),
    inset 0 10px 14px -10px var(--edge-strong-light);
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(0,0,0,0.03));
}

#purchase {
      opacity: 0.35;
      background: url('../stockphotos/flagA.png') no-repeat center center ;
      background-size: cover;
      color: white;
      text-shadow: 1px 1px 2px black;
  }

   #purchase.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

#purchase.card * {
  position: relative;
  z-index: 1;
}  

#donate {
      background: url('../stockphotos/flagB.png') no-repeat center center;
      background-size: cover;
      color: rgb(66, 65, 65);
      text-shadow: 1px 1px 2px black;
    }

#donate.card::before {
  content: "";
  position: absolute;
  inset: 0;
}

#donate.card * {
  position: relative;
  z-index: 1;
} 

#map {
      background: url('../stockphotos/flagC.png') no-repeat center center ;
      background-size: cover;
      color: white;
      text-shadow: 1px 1px 2px black;
    }

    #map.card::before {
  content: "";
  position: absolute;
  inset: 0;
}

#map.card * {
  position: relative;
  z-index: 1;
} 

#about {
      background: url('../stockphotos/flagD.png') no-repeat center center ;
      background-size: cover;
      color: white;
      text-shadow: 1px 1px 2px black;
    }

#about.card::before {
  content: "";
  position: absolute;
  inset: 0;
}

#about.card * {
  position: relative;
  z-index: 1;
} 
/* keeps text above the overlay */


/* Accessibility: respect reduced-motion */
@media (prefers-reduced-motion: reduce){
  .card, .card::after { transition: none; transform: none; }
}