/* ========================================
   Events Page Styles
   ======================================== */

/* --- Font overrides --- */
body {
  font-family: 'Inter', sans-serif;
}

h1, h2, h3, h4 {
  font-family: 'League Spartan', sans-serif;
}

/* --- Nav: blue background, white text --- */
.events-header {
  background: #153db6 !important;
  border-bottom: none !important;
  backdrop-filter: none;
}

.events-header .nav-logo-img {
  height: 32px;
  width: auto;
}

.events-header .nav-links a {
  color: rgba(255, 255, 255, 0.85);
}

.events-header .nav-links a:hover {
  color: #ffffff;
}

.events-header .nav-links a::after {
  background: #ffffff;
}

.events-header.scrolled {
  background: rgba(21, 61, 182, 0.95) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* --- Hero: blue background, white text, rounded bottom --- */
.events-hero {
  background: #153db6 !important;
  padding: 160px 0 80px;
  border-radius: 0 0 40px 40px;
}

.events-hero h1 {
  color: #ff3465;
  font-family: 'League Spartan', sans-serif;
  font-size: 3.5rem;
  font-weight: 800;
}

.events-hero .section-subtitle {
  color: rgba(255, 255, 255, 0.85);
  font-family: 'Inter', sans-serif;
  font-size: 1.15rem;
  font-weight: 400;
}

/* --- Floating SVG decorations --- */
.events-hero {
  position: relative;
  overflow: hidden;
}

.hero-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.decor-svg {
  position: absolute;
  opacity: 0.7;
  filter: brightness(0) saturate(100%) invert(27%) sepia(82%) saturate(4200%) hue-rotate(327deg) brightness(97%) contrast(101%);
}

.svg-1  { width: 50px;  top: 8%;  left: 4%;   opacity: 0.45; animation: float-slow 6s ease-in-out infinite; }
.svg-2  { width: 40px;  top: 25%; left: 18%;  animation: float-slow 8s ease-in-out infinite reverse; }
.svg-3  { width: 55px;  top: 55%; left: 7%;   animation: float-slow 7s ease-in-out infinite; }
.svg-4  { width: 35px;  top: 12%; left: 72%;  opacity: 0.6; animation: float-slow 9s ease-in-out infinite reverse; }
.svg-5  { width: 45px;  top: 65%; left: 85%;  animation: float-slow 5s ease-in-out infinite; }
.svg-6  { width: 30px;  top: 38%; left: 55%;  animation: float-slow 7.5s ease-in-out infinite reverse; }
.svg-7  { width: 40px;  top: 60%; left: 35%;  opacity: 0.6; animation: float-slow 6.5s ease-in-out infinite; }
.svg-8  { width: 50px;  top: 5%;  left: 48%;  animation: float-slow 8.5s ease-in-out infinite reverse; }
.svg-9  { width: 35px;  top: 75%; left: 62%;  animation: float-slow 5.5s ease-in-out infinite; }
.svg-10 { width: 45px;  top: 40%; left: 92%;  animation: float-slow 9.5s ease-in-out infinite reverse; }

@keyframes float-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

/* --- Events grid section --- */
.events-section {
  padding: 60px 0 100px;
}

/* --- View toggle buttons --- */
.view-btn {
  font-family: 'Inter', sans-serif;
}

.view-btn.active {
  color: #153db6;
}

/* --- Event card styling --- */
.event-card-content h3 {
  font-family: 'League Spartan', sans-serif;
  color: #ffffff !important;
}

.event-short-desc {
  font-family: 'Inter', sans-serif;
  color: #ffffff;
  font-weight: 600;
}

.event-tag,
.event-date-tag {
  font-family: 'Inter', sans-serif;
}

/* --- Calendar styling --- */
.calendar-view {
  max-width: 900px;
  margin: 0 auto;
}

.calendar-grid {
  table-layout: fixed;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.cal-day {
  overflow: hidden;
}

.cal-event-dot {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-header h3 {
  font-family: 'League Spartan', sans-serif;
}

/* --- Mobile menu spans (white for blue bg) --- */
.events-header .mobile-menu-btn span {
  background: #ffffff;
}

/* --- Ticket type rows on event detail page --- */
.ticket-types-list {
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ticket-type-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: #f9fafb;
  border-radius: 8px;
}

.ticket-type-row.sold-out {
  opacity: 0.5;
}

.ticket-type-info {
  display: flex;
  flex-direction: column;
}

.ticket-type-info strong {
  font-size: 0.9rem;
  color: #1f2937;
}

.ticket-type-info span {
  font-size: 0.78rem;
  color: #6b7280;
}

.ticket-type-price {
  font-weight: 700;
  color: #153db6;
  font-size: 0.95rem;
  white-space: nowrap;
}

/* --- Coming Soon / Get Notified (TBD events) --- */
.coming-soon-box {
  text-align: center;
  padding: 8px 0 16px;
}

.coming-soon-badge {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 8px;
}

.coming-soon-text {
  font-size: 0.9rem;
  color: #6b7280;
  line-height: 1.5;
}

.notify-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.notify-form input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 0.9rem;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.2s;
}

.notify-form input:focus {
  outline: none;
  border-color: #153db6;
  box-shadow: 0 0 0 3px rgba(21, 61, 182, 0.1);
}

.notify-note {
  font-size: 0.78rem;
  color: #9ca3af;
  text-align: center;
  margin: 0;
}

.notify-msg {
  font-size: 0.85rem;
  text-align: center;
}

.notify-msg.msg-info { color: #153db6; }
.notify-msg.msg-error { color: #dc2626; }

.notify-success {
  text-align: center;
  padding: 16px 0;
}

.notify-success strong {
  display: block;
  font-size: 1rem;
  color: #1f2937;
  margin-bottom: 4px;
}

.notify-success p {
  font-size: 0.9rem;
  color: #6b7280;
  margin: 0;
}