/* To format the Event List in the right rail appropriately */
.eventlist {
  font-family: 'Ubuntu', 'Arial', sans-serif;
  font-size: 16px;
  text-align: center;
 }
.subform {
  font-family: 'Ubuntu', 'Arial', sans-serif;
  font-size: 26px;
  color: orange
}

/* These make the youtube videos on various pages responsive */

.youtube-video-container {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.youtube-video-container::after {
  display: block;
  content: "";
  padding-top: 56.25%;
}

.youtube-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* General styling for sponsor tiers */
.sponsor-tier {
  margin-bottom: 40px;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
  text-align: center; /* Ensures the medal icon and H2 are centered */
}

.sponsor-tier h2 {
  margin-bottom: 25px;
  font-size: 2em;
  color: #333;
}

/* General styling for sponsor tiers */
.sponsor-tier {
  margin-bottom: 40px;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
  text-align: center; /* Ensures the medal icon and H2 are centered */
}

.sponsor-tier h2 {
  margin-bottom: 25px;
  font-size: 2em;
  color: #333;
}

/* Styling for tier medal icons */
.tier-medal-icon {
  display: block; /* Ensures the image is on its own line */
  margin: 0 auto 20px auto; /* Centers the image and adds bottom margin */
  height: auto; /* Maintain aspect ratio */
}

/* Specific styling for Gold, Silver, Bronze with gradients */
.sponsor-tier.gold {
  background-image: linear-gradient(to right, #FFD70033, #FFDF8033); /* Gold gradient */
}

.sponsor-tier.silver {
  background-image: linear-gradient(to right, #C0C0C033, #D0D0D033); /* Silver gradient */
}

.sponsor-tier.bronze {
  background-image: linear-gradient(to right, #CD7F3233, #DB934533); /* Bronze gradient */
}

/* Container for sponsors within a tier - using Flexbox for responsiveness */
.sponsor-container {
  display: flex;
  flex-wrap: wrap; /* Allows items to wrap to the next line */
  justify-content: center; /* Centers items horizontally */
  gap: 20px; /* Space between sponsor items */
}

/* Individual sponsor item styling */
.sponsor-item {
  text-align: center;
  padding: 15px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  flex: 0 1 auto; /* Prevents items from growing beyond their content if space is ample */

  /* Flexbox for vertical alignment of logo within its box */
  display: flex;
  flex-direction: column; /* Stack content (image and potential text) vertically */
  justify-content: center; /* Vertically center content */
  align-items: center; /* Horizontally center content */
}

.sponsor-item img {
  max-width: 100%;
  height: auto; /* Maintain aspect ratio */
  display: block; /* Removes extra space below image */
  margin-left: auto;
  margin-right: auto;
}

.sponsor-item p {
  font-size: 0.9em;
  color: #555;
  font-weight: bold;
  margin-top: 10px; /* Add some space above the text if present */
}

/* --- Tier-specific Sizing --- */

/* Gold Tier - Largest */
.sponsor-tier.gold .tier-medal-icon {
  width: 125px; /* Gold medal icon size */
}
.sponsor-tier.gold .sponsor-item {
  min-width: 180px; /* Base min width for Gold sponsors */
  max-width: 280px; /* Base max width for Gold sponsors */
}

/* Silver Tier - 25% smaller than Gold */
.sponsor-tier.silver .tier-medal-icon {
  width: 93.75px; /* 125px * 0.75 */
}
.sponsor-tier.silver .sponsor-item {
  min-width: calc(180px * 0.75); /* 25% smaller min-width */
  max-width: calc(280px * 0.75); /* 25% smaller max-width */
}
.sponsor-tier.silver .sponsor-item img {
  max-height: 100px; /* Limit height to make them consistently smaller */
}


/* Bronze Tier - 25% smaller than Silver (which means 56.25% of Gold) */
.sponsor-tier.bronze .tier-medal-icon {
  width: 70.3125px; /* 93.75px * 0.75 */
}
.sponsor-tier.bronze .sponsor-item {
  min-width: calc(135px * 0.75); /* 25% smaller than Silver's calculated min-width */
  max-width: calc(210px * 0.75); /* 25% smaller than Silver's calculated max-width */
}
.sponsor-tier.bronze .sponsor-item img {
  max-height: 75px; /* Limit height even further for bronze */
}


/* --- Media Queries for overall responsiveness --- */
@media (max-width: 992px) {
  /* Adjustments for medium screens (tablets) */
  .sponsor-tier.gold .sponsor-item {
    min-width: 150px;
    max-width: 250px;
  }
  .sponsor-tier.silver .sponsor-item {
    min-width: calc(150px * 0.75);
    max-width: calc(250px * 0.75);
  }
  .sponsor-tier.bronze .sponsor-item {
    min-width: calc(112.5px * 0.75); /* based on silver's new min-width */
    max-width: calc(187.5px * 0.75); /* based on silver's new max-width */
  }
}

@media (max-width: 768px) {
  /* Adjustments for smaller tablets and large phones */
  .sponsor-container {
    gap: 15px;
  }
  .sponsor-tier h2 {
    font-size: 1.8em;
  }
  .sponsor-tier.gold .sponsor-item {
    min-width: 120px;
    max-width: 200px;
  }
  .sponsor-tier.silver .sponsor-item {
    min-width: calc(120px * 0.75);
    max-width: calc(200px * 0.75);
  }
  .sponsor-tier.bronze .sponsor-item {
    min-width: calc(90px * 0.75);
    max-width: calc(150px * 0.75);
  }
}

@media (max-width: 480px) {
  /* Adjustments for small phones */
  .sponsor-container {
    flex-direction: column; /* Stack sponsors vertically on very small screens */
    align-items: center; /* Center them when stacked */
  }
  .sponsor-item {
    width: 90%; /* Take up most of the width when stacked */
  }
  .sponsor-tier h2 {
    font-size: 1.5em;
  }
  /* On very small screens, make sizes more consistent for better readability */
  .sponsor-tier.gold .sponsor-item,
  .sponsor-tier.silver .sponsor-item,
  .sponsor-tier.bronze .sponsor-item {
    min-width: 200px; /* Give a decent minimum width when stacked */
    max-width: 300px; /* Limit max width */
    max-height: none; /* Remove height limits when stacked for flexibility */
  }
  .sponsor-tier.silver .sponsor-item img,
  .sponsor-tier.bronze .sponsor-item img {
    max-height: none; /* Remove specific max-height for images on very small screens */
  }
}