:host {
	display: block;
	width: 100%;       /* Takes full width on mobile screens */
	height: 100%;      /* Allows content to dictate the height */
	border: navy solid 2px;
	margin-top: 6rem;
}

:host > * {
    all: unset; /* Strips away margins, padding, colors, and layout inherited from elements.css */
    display: block; /* Restores block rendering since unset turns it into an inline element */
    box-sizing: border-box;
}

    /* 1. Base Setup */
    body {
      font-family: sans-serif;
      margin: 0;
      padding: 20px;
      background-color: #f4f4f4;
    }

    /* 2. Responsive Container */
/*    .responsive-campaign .standard-container { */
:host {
      background-image: url('https://www.tabbysplace.org/6-4/');
      background-size: cover;
      width: 100%;             /* Takes full width on small screens */
      height: auto;
      max-width: 1400px;       /* Caps the width on massive desktop monitors */
      margin: 3rem auto 0 auto;          /* Centers the container horizontally */
      
      /* Flexbox layout */
      display: flex;
      flex-direction: column;  /* Mobile-first: stacks items vertically */
/*      gap: 20px;    */           /* Space between child elements */
      justify-content: center; /* Centers content vertically */
      align-items: center;
    text-align: center;

    }

.patrick-hand-regular {
  font-family: "Patrick Hand", cursive;
  font-weight: 400;
  font-style: normal;
}

    /* 3. The Responsive Child Divs */
.box {
      background-color: transparent;
      padding: 30px;
/*      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
      flex: 1 1 0;                 /* Allows divs to grow and take up equal space */
/*      border: solid red 1px; */
      min-width: 0;
      width: fit-content;
      text-align: center;
}

    /* Ensures images never overflow their parent box */
.box img {
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain; /* Keeps the image proportions correct */
}

figure {
    display: flex;
    flex-direction: column;
    align-items: center; /* Horizontally centers image and caption */
    margin: 0;
    text-align: center;
}

.box figcaption {
    margin-top: 1rem;
    padding: 0.5rem;
    background-color: green;
    color: white;
    width: auto;
    text-align: center;
    font-size: clamp(1.5rem, 2vw + 1rem, 1.5rem);
}

.box1 {
    display: grid;
    grid-template-rows: 1fr 1fr;
    justify-content: center;
    align-items: center;
}

.eoy-banner {
    background-color: #744700; 
    border-radius: 5px;
    corner-shape: notch;
    font-size: clamp(2rem, 4vw + 1rem, 3rem);
    margin-bottom: 2rem;
    color: white;
    padding: 0.5rem;
    text-align: center;
}

/* 4. Desktop Screens (Media Query) */
@media (min-width: 768px) {
    :host {
        flex-direction: row !important;   /* Switches layout to horizontal side-by-side */
	align-items: flex-start;
    }
}

/*********** From https://share.google/aimode/njoENGP9QNAw5lZgh *********/

/* Core Button Styling */
.donate-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: #ff6b00; /* Vibrant orange */
  color: #ffffff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 30px;
  font-weight: 600;
  text-decoration: none;
  padding: 14px 32px;
  border-radius: 50px; /* Fully rounded capsule style */
  transition: background-color 0.3s ease, border-color 
  box-shadow: 0 4px 15px rgba(224, 36, 94, 0.3);
  cursor: pointer;
  margin: 0 auto;
}

/* Hover & Active States */
.donate-button:hover {
  background-color: #FFD580;
  box-shadow: 0 6px 20px rgba(224, 36, 94, 0.5);
  transform: translateY(-2px);
}

.donate-button:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(224, 36, 94, 0.3);
}

/* Micro-interaction: Pulsing Heart Icon on Hover */
.donate-button:hover .donate-icon {
  animation: heartbeat 0.8s infinite alternate;
}

@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.3);
  }
}

.gallery-frame {
  width: 100%;
/*  max-width: 400px;
  height: auto;
  display: block; */
  
  /* The "Mat" spacing and color */
  padding: 20px;
  background-color: khaki; /* Off-white mat color */
  
  /* Layered borders and shadows for depth */
  border: 1px solid #dcdad4;
  box-shadow: 
    0 0 0 12px #333230,     /* Thick main outer frame */
    0 4px 20px rgba(0,0,0,0.3); /* Soft drop shadow on the wall */
  
  box-sizing: border-box;
}