/* ============================
   GLOBAL STYLES
   ============================ */

body {
  margin: 0;
  padding: 20px;
  font-family: Arial, sans-serif;
  background: #ffffff;
  color: #333;
}

#searchInput {
  width: 100%;
  padding: 12px;
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 900;
}

/* ============================
   TABLE STYLING
   ============================ */

#eventsTable {
  width: 100%;
  border-collapse: collapse;
}

#eventsTable th,
#eventsTable td {
  padding: 10px;
  border-bottom: 1px solid #ccc;
  border: 1px solid black; /* Sets a 1px black border on all table parts */
}

#eventsTable th {
  background: #f0f0f0;
  text-align: left;
}

#eventsTable tbody tr:nth-child(odd) {
  background-color: #e9e50e;
}

#eventsTable tbody tr:nth-child(even) {
  background-color: #ffffff;
}

#eventsTable tbody tr:hover {
  background-color: #f0f7ff;
}

/* ============================
   FILTERS
   ============================ */

#searchContainer {
  margin-bottom: 20px;
}

#searchContainer label {
  font-weight: bold;
  margin-right: 10px;
}

/* ============================
   MAIN MENU
   ============================ */

.main-menu ul {
    list-style: none;
    display: flex;
    gap: 20px;
    padding: 0;
    margin: 0;
}

.main-menu a {
    text-decoration: none;
    color: white;
    font-weight: 600;
}

.page-container {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 20px;
}


/* ============================
   VIEW TOGGLE BUTTON
   ============================ */

.view-toggle-bar {
  margin: 10px 0 15px;
  text-align: left;
}

#toggleViewBtn {
  padding: 8px 14px;
  background: red;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 15px;
}

#toggleViewBtn:hover {
  background: #004c99;
}

/* ============================
   CARD VIEW CONTAINER
   ============================ */

#cardContainer {
  display: none; /* hidden until activated */
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  padding-top: 10px;
}

/* ============================
   CARD VIEW LAYOUT (IMPROVED)
   ============================ */

#cardContainer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  padding: 20px 0;
}

.event-card {
  background: #FFFF00;
  color: red;
  border-radius: 10px;
  padding: 18px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  border: 1px solid #e5e5e5;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.event-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

/* Header row: Date + Time */
.event-card-header {
  font-size: 1.1rem;
  font-weight: 600;
  color: #222;
  display: flex;
  justify-content: space-between;
}

header img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
}

header.center {
  display: block !important;
}

/* Area badge */
.event-area {
  display: inline-block;
  background: #0073e6;
  color: white;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: 4px;
}

/* Venue + Performer links */
.event-card a {
  color: #0073e6;
  text-decoration: none;
  font-weight: 600;
}

.event-card a:hover {
  text-decoration: underline;
}

/* Venue + Performer text blocks */
.event-venue,
.event-performer {
  font-size: 1rem;
  color: #333;
}

/* ============================
   MOBILE BREAKPOINT
   ============================ */

@media (max-width: 600px) {
  #filterContainer {
    flex-direction: column;
    align-items: stretch;
  }

  #filterContainer select,
  #filterContainer input,
  #resetFilters {
    width: 100%;
    font-size: 18px;
  }

  #eventsTable th,
  #eventsTable td {
    padding: 14px 10px;
    font-size: 17px;
  }

  #eventsTable a {
    font-size: 17px;
  }

  .area-badge {
    font-size: 13px;
    padding: 3px 7px;
  }
}

@media (max-width: 450px) {
  /* Slightly smaller text */
  table td,
  table th {
    font-size: 12px;
    padding: 4px 6px;
  }

  /* Reduce column widths */
  .col-date {
    width: 60px;
  }
  .col-time {
    width: 60px;
  }
  .col-area {
    width: 30px;
  }
  .col-venue {
    width: 110px;
  }

  /* Improve horizontal scrolling */
  .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Optional: tighten header spacing */
  header img {
    margin-bottom: 6px;
  }
}

/* ============================
   CLICK FIX — MUST BE LAST
   ============================ */

/* Ensure links inside cards and table are clickable */
.event-card a,
.jazz-table a {
  position: relative;
  z-index: 50;
  pointer-events: auto;
}

/* Ensure the card itself does not block clicks */
.event-card {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

/* Ensure the grid does not create a blocking layer */
#cardContainer {
  position: relative;
  z-index: 0;
}