@charset "utf-8";
/* CSS Document */
/* Enable Smooth Page Jumps */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 70px; /* Prevents the locked nav bar from covering prize numbers when you click */
}

/* Ensure the header container itself doesn't trap the nav bar */
.event-header {
  position: relative; 
  overflow: visible !important; 
}

/* Normal Scrolling Logo Header Styles */
.event-header-scroll {
  text-align: center;
  padding: 24px 16px 0px 16px;
  background: #ffffff;
}

/* Force the header to pin hard to the top window */
.fixed-top-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  padding: 10px 0;
  z-index: 99999; /* Guarantees it floats over everything */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  text-align: center;
}

/* Core Layout Settings */
.raffle-tier {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  max-width: 1200px;
  margin: 20px auto; /* Reduced margin for closer spacing on mobile screens */
  padding: 16px;     /* Comfortable edge-padding for mobile thumbs */
}

/* Mobile-First Tier Headers */
.tier-header {
  text-align: center;
  margin-bottom: 24px;
  border-bottom: 2px solid #fdf2e9;
  padding-bottom: 16px;
}
.tier-badge {
  display: inline-block;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.5rem;
  padding: 4px 12px;
  border-radius: 50px;
  letter-spacing: 0.05em;
}
.tier-header h2 {
  font-size: 1.75rem; /* Dynamic sizing balanced for mobile viewport widths */
  color: #1e293b;
  margin: 8px 0 4px 0;
  font-weight: 800;
}
.tier-value {
  color: #64748b;
  font-size: 0.95rem;
  margin: 0;
}

/* Adaptive Smart Grid (Handles Mobile-to-Desktop scaling automatically) */
.prize-grid {
  display: grid;
  grid-template-columns: 1fr; /* Default: Single full-width card per row on mobile phones */
  gap: 16px;                  /* Compact spacing between cards on touchscreens */
}

/* Card Foundations */
.prize-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px; /* Slightly tighter internal card padding for smaller viewports */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  -webkit-tap-highlight-color: transparent; /* Prevents awkward gray flash on mobile tap */
}

/* Card Content Details */
.card-top {
  display: flex;
  align-items: center; /* Vertically centers the badge with single or double-line titles */
  gap: 14px;           /* Adds a clean gap on mobile screens */
  margin-bottom: 14px;
}
/* High-Contrast Prize Number Badge */
.prize-number-badge {
  font-weight: 800;    /* Extra thick font weight */
  font-size: 0.95rem;  /* Slightly larger text size */
  width: 32px;         /* Locked uniform width */
  height: 32px;        /* Locked uniform height */
  border-radius: 50%;  /* Perfect circular shape */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;      /* Guarantees it never gets squished on mobile */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle elevation drop shadow */
}
.prize-title {
  font-size: 1.15rem;
  color: #0f172a;
  margin: 0;
  font-weight: 700;
  line-height: 1.3;
}
.prize-description {
  color: #475569;
  font-size: 0.9rem;
  line-height: 1.45;
  margin: 0 0 16px 0;
}

/* Card Footer & Sponsor Info */
.card-footer {
  border-top: 1px dashed #e2e8f0;
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
}
.donor-label {
  color: #94a3b8;
}
.donor-name {
  color: #475569;
  font-weight: 600;
}

/* --- TIER COLORS --- */
.yellow-tier .tier-header { border-color: #fef08a; }
.yellow-tier .tier-badge  { background-color: #fef08a; color: #000000; }

.green-tier .tier-header  { border-color: #bbf7d0; }
.green-tier .tier-badge   { background-color: #bbf7d0; color: #166534; }

.blue-tier .tier-header   { border-color: #bfdbfe; }
.blue-tier .tier-badge    { background-color: #bfdbfe; color: #1e40af; }

/* Alternative: Numbers that match the tier color scheme */
.yellow-tier .prize-number-badge { background: #fef08a; color: #000000; border:1px solid #000; } /* Yellow */
.green-tier .prize-number-badge  { background: #16a34a; color: #ffffff; border:1px solid #000; } /* Emerald Green */
.blue-tier .prize-number-badge   { background: #2563eb; color: #ffffff; border:1px solid #000; } /* Sapphire Blue */

/* --- TABLET & DESKTOP ENHANCEMENTS --- */
@media (min-width: 640px) {
  .raffle-tier { padding: 24px; }
  .tier-header h2 { font-size: 2.25rem; }
  
  /* Automatically expands to 2 columns on tablets, 3 to 4 columns on desktops */
  .prize-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

    gap: 24px;
  }
  .prize-card { padding: 24px; }
  .prize-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
}

/* Event Header & Logo Styling */
.event-header {
  text-align: center;
  padding: 30px 16px 10px 16px; /* Comfortable spacing for mobile screens */
  max-width: 1200px;
  margin: 0 auto;
}

.logo-container {
  margin-bottom: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Keep the logo compact so it doesn't take up too much screen space on phones */
.event-logo {
  width: 200px;
  height: auto;
  display: inline-block;
  margin-bottom: 0px;
}

.event-subtitle1 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #64748b;
  font-size: 1.5rem;
  margin-top: 0px;
  font-weight: 800;
  margin: 0px 0 0 0;;
  line-height: 1.4;
}
.event-subtitle2 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #64748b;
  font-size: 0.95rem;
  font-weight: 500;
  margin: 4px 0 0 0;;
  line-height: 1.4;
}

/* Bulletproof Sticky Links Bar */
.sticky-links-bar {
  position: -webkit-sticky; /* Support for older mobile Safari/iOS browsers */
  position: sticky;
  top: 0;                /* Forces it to freeze flat against the absolute top edge */
  background: #ffffff;   /* Solid background stops background text from bleeding through */
  padding: 12px 8px;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 99999;        /* Keeps the links bar floating safely on top of all prize cards */
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03);
}


/* Tablet & Desktop Adjustments */
@media (min-width: 640px) {
  .event-header {
    padding: 50px 24px 20px 24px; /* More breathing room on larger screens */
  }
  .event-logo { width: 250px; }
  .event-subtitle1 {font-size: 1.6rem;}
  .event-subtitle2 {font-size: 1.15rem;}
  .event-header-scroll { padding: 40px 24px 15px 24px; }
  .sticky-links-bar { padding: 16px; gap: 16px; }
  .nav-link { font-size: 0.9rem; padding: 10px 20px; }
  html { scroll-padding-top: 90px; }
}

/* Enable Smooth Scrolling for the Page */
html {
  scroll-behavior: smooth;
}

/* Quick Links Container */
.tier-nav {
  display: flex;
  justify-content: center;
  gap: 8px; /* Tightly packed for mobile screens */
  margin-top: 20px;
  padding: 6px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 50px;
  position: sticky;
  top: 10px; /* Floats beautifully right near the top screen edge */
  z-index: 100;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 0 10px;
}

/* Base Navigation Link Style */
.nav-link {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  text-decoration: none;
  font-size: 0.8rem; /* Small and compact for phone screen widths */
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 50px;
  transition: background 0.2s ease, color 0.2s ease;
  white-space: nowrap; /* Prevents button text from breaking into two lines */
}

/* Tier Specific Theme Colors for Links */
.nav-yellow { background: #fef08a; color: #854d0e; }
.nav-green  { background: #bbf7d0; color: #166534; }
.nav-blue   { background: #bfdbfe; color: #1e40af; }

/* CRITICAL: Pushes your raffle lists down so they don't hide behind the header */
.main-content {
  /*margin-top: 110px; */
  padding: 0px;
}

/* Desktop/Tablet Hover Upgrades */
@media (min-width: 640px) {
 /* Horizontal pill navigation bar container */
.tier-nav {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 0 10px;
}

.nav-link {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 50px;
  white-space: nowrap;
}

  .nav-link:hover {
    opacity: 0.85;
    transform: scale(1.02);
  }
/* Main Content Wrapper Padding */
.main-content {
  padding: 12px;
  max-width: 1200px;
  margin: 0 auto;
}

/* 4. Remove excessive spacing from the very first tier header */
.main-content .raffle-tier:first-of-type {
  margin-top: 10px; /* Pulls the Level 1 Tier tightly up towards the buttons */
}

/* Closing Message Styling */
.raffle-closing-note {
  text-align: center;
  padding: 32px 16px;
  margin-top: 40px;
  border-top: 2px solid #e2e8f0; /* Soft line separating the prizes from the footnote */
}

.closing-message {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #475569;
  font-size: 1.2rem;
  line-height: 1.6;
  font-weight: 500;
  max-width: 600px;
  margin: 0 auto;
}

/* Footer Logo Layout */
.footer-logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16px; /* Clean separation between the logo and text */
}

.footer-logo {
  max-width: 100%;    /* Prevents the image from bursting past phone screen edges */
  height: auto;       /* Retains original asset dimensions */
  width: 230px;       /* Sleek, understated width for mobile viewports */
  display: block;
  opacity: 0.85;      /* Blends it elegantly with the footnote area */
}

/* --- THE TARGETED MOBILE GAP ELIMINATOR --- */
@media (max-width: 639px) {
  /* 1. Strip all body and html default padding that creates top gaps on phones */
  html, body {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 2. Tighten the scrolling logo area to drop the nav bar closer to the top */
  .event-header-scroll {
    padding: 16px 12px 0px 12px !important; /* Strips bottom padding down to nothing */
    margin-bottom: 0 !important;
  }

  /* 3. Compress the space around the nav bar itself */
  .sticky-links-bar {
    margin-top: 0 !important;
    margin-bottom: 8px !important; /* Tiny micro-spacing under the link pills */
    padding: 8px 4px !important;  /* Slimmer button bar height for phone screens */
  }

  /* 4. Force the Level 1 Tier to snap right up under the links bar */
  .main-content {
    margin-top: 0 !important;
    padding-top: 0 !important; /* Strips layout padding pushing the grid down */
  }

  .main-content .raffle-tier:first-of-type {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  .main-content .raffle-tier:first-of-type .tier-header {
    margin-top: 0 !important;
    padding-top: 4px !important; /* Keeps just a tiny bit of breathing room for the text header */
  }
  /* Compact version for smaller phone viewports */
  .raffle-closing-note {
    margin-top: 24px;
    padding: 24px 12px;
  }
  .closing-message {
	font-size: 0.95rem;
  }
  .footer-logo {
    width: 230px;     /* Allows it to be slightly more prominent on desktops */
  }
}