/* assets/css/responsive.css */
.event-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  }
  
.event-card:hover {
  transform: translateY(-5px);
  }
  
.event-card__image {
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  }
  
.event-card__content {
  padding: 20px;
  }
  
.event-card__title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
  }
  
.event-card__date {
  font-size: 14px;
  color: #666;
  }  

/* Tooltip container */
.event-tooltip {
	position: absolute;
	bottom: calc(100% + 10px); /* Position above the calendar day */
	left: 50%;
	transform: translateX(-50%);
	width: 250px; /* Fixed width for consistent layout */
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
	padding: 10px;
	z-index: 9999; /* Ensure it appears above other elements */
	display: none; /* Initially hidden */
}

/* Tooltip content styling */
.event-tooltip img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
}

.event-tooltip .event-time {
	font-size: 12px;
	line-height: 12px;
	color: #666;
}

.event-tooltip .event-title {
  font-size: 16px;
  font-weight: bold;
}

.tooltip-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.tooltip-link:hover {
    text-decoration: none;
}

/* Container for filter dropdown and submit button */
.custom-calendar-controls {
  display: flex; /* Use flexbox for horizontal alignment */
    align-items: center; /* Vertically align items */
    gap: 10px; /* Add spacing between dropdown and button */
    margin-bottom: 1em; /* Add spacing below the controls */
}

.custom-calendar-controls.view-toggle-buttons {
    display: flex;
    gap: 0; 
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
    flex-wrap: nowrap; /* Prevent wrapping on desktop */
}

.calendar-view-button {
    flex: 1; /* Make all buttons take equal width */
    background-color: #f9f9f9;
    color: #333;
    border: none;
    border-right: 1px solid #ccc; /* Separator line between buttons */
    padding: 10px 15px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    text-transform: uppercase;
    font-weight: 500;
}

/* Remove border from the last button */
.calendar-view-button:last-child {
    border-right: none;
}

.calendar-view-button:hover:not(.active) {
    background-color: #eee;
}

.calendar-view-button.active {
    background-color: #0073aa; /* Use your primary color (purple in the image) */
    color: #fff;
    font-weight: bold;
}

.calendar-view-button .label {
    /* Ensure the label is visible if it contains the full text */
    display: inline;
    margin-left: 5px;
}

/* Day View Styling */
.day-event {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.day-event__image {
    flex-shrink: 0;
    width: 150px;
}

.day-event__image img {
    width: 100%;
    height: auto;
}

.day-event__content {
    padding: 15px;
    flex-grow: 1;
}

.day-event__time {
    font-size: 14px;
    color: #666;
}

.day-event__title {
    font-size: 18px;
    font-weight: bold;
    margin: 5px 0;
}

.day-event__title a {
    text-decoration: none;
    color: #333;
}

.day-event__title a:hover {
    text-decoration: underline;
}

.day-event__location {
    font-size: 14px;
    color: #666;
}

.day-event__description {
    font-size: 14px;
    color: #333;
    margin-top: 10px;
}

.day-event__price {
    font-size: 14px;
    font-weight: bold;
    color: #d9534f; /* Red for "Sold Out" or price */
}

/* Calendar View */
/* --- Month Calendar View Styling --- */
.calendar-month-view {
  max-width: 1000px;
  margin: 0 auto;
  padding: 1em;
  font-family: inherit;
	width: 100%;
    box-sizing: border-box;
}

.calendar-navigation {
    display: flex; /* CRITICAL: Allows horizontal alignment */
    justify-content: space-between; /* Pushes prev/next buttons to the edges */
    align-items: center; /* Vertically centers the title */
    margin-bottom: 15px;
}

.calendar-navigation .calendar-title {
    flex-grow: 1; /* Allows the title to take up remaining space */
    text-align: center;
    margin: 0 10px;
    font-size: 1.7rem; 
    font-weight: bold;
}

.calendar-navigation button {
    /* Style for Prev/Next buttons */
    padding: 8px 15px;
    border: none;
    border-radius: 4px;
    background-color: #1a426f; /* Dark blue color */
    color: white;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: bold;
    white-space: nowrap; /* Prevent PREV/NEXT text from wrapping */
}

.calendar-month-view h2 {
  text-align: center;
  margin-bottom: 1em;
  font-size: 1.7rem;
  color: #333;
}

/* Grid: 7 columns representing days of the week */
.calendar-grid {
    display: grid !important;
    /* Force 7 columns of equal width */
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 1px;
    background-color: #ddd;
    overflow: hidden;
}

/* Grid header for days of the week */
.calendar-grid-header {
    display: grid !important;
    /* Force 7 columns of equal width */
    grid-template-columns: repeat(7, 1fr) !important; 
    background-color: #f0f0f0;
    border-bottom: 1px solid #ddd;
    margin-bottom: 0;
    white-space: nowrap; 
    text-align: center;
	line-height: 1.2;
}

/* Ensure the individual day headers (Sun, Mon, etc.) use flex to align icon/text if needed */
.calendar-day-header {
    text-align: center;
    padding: 0.5em 0;
    font-weight: bold;
    min-width: 0; 
    overflow: hidden;
}

/* Dropdown styling */
.custom-calendar-view-filter {
  flex-grow: 1; /* Allow the dropdown to take up available space */
}

.custom-calendar-view-filter select {
  font-size: .9em;
  padding: 0.5em 1em;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
}

#calendar-view-submit {
  display: inline-block;
  padding: 0.5em 0.9em;
  font-size: 0.9em;
  color: #fff;
  background-color: #0073aa;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#calendar-view-submit:hover {
  background-color: #005a87;
}

/* Individual day cell */
.calendar-day-header {
  text-align: center;
  padding: 0.5em 0;
  font-weight: bold;
}

.calendar-day {
    background-color: #fff;
    min-height: 120px; 
    padding: 0.5em;
    border-width: 1px solid #ddd;
    position: relative; 
    overflow: hidden; 
}

/* Event time styling inside calendar-day */
.calendar-day .event-time {
    font-size: 0.7em;
	font-weight: bold;
    color: #000;
	line-height: 12px;
    margin-top: 5px;
}

/* Event title styling inside calendar-day */
.calendar-day .event-title a {
    font-size: 0.7em;
    font-weight: normal;
    color: #000;
    text-decoration: none;
}

/* Show tooltip on hover */
.calendar-day:hover .event-tooltip {
	display: block;
}

.calendar-day .event-title a:hover {
	text-decoration: underline; /* Highlight link on hover */
}

/* Style for empty cells */
.calendar-day.empty {
  background-color: #f9f9f9;
}

/* Day number styling */
.day-number {
    font-weight: bold;
    display: block;
    margin-bottom: 0.5em;
    font-size: 1.1em;
}

/* Example styling for different calendar views */
.custom-calendar-view.list-view .event {
  border-bottom: 1px solid #eee;
  padding: 1em 0;
}

.custom-calendar-view.month-view {
    /* display: grid !important; */    
    /* grid-template-columns: repeat(7, 1fr) !important; */
  gap: 1px;
	width: 100%;
    max-width: none;
}

.custom-calendar-view.month-view .event {
  padding: 0.5em;
  border: 0.50px solid #ddd;
  min-height: 100px;
}

.custom-calendar-view.day-view {
  /* Day view styling (could be similar to list view) */
  padding: 1em;
}

.custom-calendar-view.week-view {
  /* Week view styling as an example */
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

.custom-calendar-view.week-view .event {
  flex: 1 1 calc(100%/7 - 1em);
  border-width: 1px solid #ddd;
  padding: 1em;
  min-height: 80px;
}

/* --- List View Styling --- */
.list-event {
    display: flex;
	max-width: 800px;
    align-items: flex-start;
    margin-bottom: 20px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.list-event__image {
    flex-shrink: 0;
    width: 100px;
}

.list-event__image img {
    width: 100%;
    height: auto;
}

.list-event__content {
    padding: 15px;
    flex-grow: 1;
}

.list-event__time {
    font-size: 15px;
    color: #666;
}

.list-event__title {
    font-size: 17px;
    font-weight: bold;
    margin: 5px 0;
	line-height: 30px;
}

.list-event__title a {
    text-decoration: none;
    color: #0074B7 !important;
}

.list-event__title a:hover {
    text-decoration: underline;
}

.list-event__location {
    font-size: 15px;
	font-weight: normal;
    color: #000;
}

.list-event__description {
    font-size: 15px;
	font-weight: normal;
    color: #000;
}

.list-event__price {
    font-size: 14px;
	font-weight: normal;
    font-weight: bold;
}

.list-event.flyer-layout {
    display: flex;
    align-items: flex-start; /* Align elements to the top */
    padding: 20px 0;
    border-bottom: 1px solid #eee;
    background: none; /* Reset background */
    box-shadow: none; /* Remove shadow */
    border-radius: 0;
}

/* LEFT COLUMN: Date & Time Styling */
.event-date-column {
    flex-shrink: 0; /* Prevents this column from shrinking */
    width: 100px; /* Fixed width for date column */
    text-align: center;
    padding-top: 10px; /* Aligns vertically with the top of the flyer/image */
    border-right: 1px solid #ddd; /* Separator line */
    margin-right: 20px;
}

.event-date-day {
    font-size: 0.7em;
    font-weight: normal;
    text-transform: uppercase;
    color: #5E6062;
}

.event-date-num {
    font-size: 2.2em; /* Large number for the day */
    font-weight: 900;
    line-height: 1;
    color: #003B73;
}

.event-time-short {
    font-size: 0.9em;
    color: #5E6062;
    margin-top: 1px;
}

/* RIGHT COLUMN: Flyer & Details Container */
.event-content-column {
    flex-grow: 1;
    min-width: 0; /* Prevents overflow */
}

.event-media-details {
    display: flex; /* Use flex to align flyer (left) and text details (right) */
    gap: 20px;
    align-items: flex-start;
}

/* Flyer Styling */
.list-event__image {
    flex-shrink: 0;
    width: 40%; 
    max-width: 250px; 
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Shadow to make flyer pop */
}

.list-event__image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Text Details (Right of the Flyer) */
.event-text-details {
    flex-grow: 1;
    padding-top: 5px; /* Adjust vertical alignment */
}

.event-date-full {
    /* Default size font: Default font size */
    font-size: .7em; 
    font-weight: normal;
    color: #5E6062;
    margin-bottom: 5px;
    text-transform: uppercase;
	letter-spacing: 0.2px;
}

.list-event__title {
    /* Larger font: default + 2px (assuming default is 16px) */
    font-size: 22px !important;
    font-weight: bold;
    margin: 0 3% 1% 0;
	letter-spacing: 0px;
}

.list-event__title a {
    color: #333;
    text-decoration: none;
}

.list-event__title a:hover {
    text-decoration: underline;
}

.list-event__location {
    /* Default size font */
    font-size: .9em;
    color: #000;
    margin-top: 5px;
	 margin: 0 3% 1% 0;
}

.events-grid {
    display: flex;
    flex-wrap: wrap; /* Allows posts to wrap to the next row if they run out of space */
    gap: 24px; /* Spacing between posts */
    list-style: none;
    padding: 0;
}

/* Style for the individual archive posts */
.events-grid article.post {
    /* Calculate width for 3 columns (33.33%) minus the gap */
    flex: 1 1 calc(33.333% - 20px); 
    min-width: 325px; /* Prevent posts from getting too narrow */
    box-sizing: border-box;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 0; /* Remove default margin */
}

/* Pagination styling */
.pagination {
    text-align: center;
}

.pagination a,
.pagination span {
    display: inline-block;
    margin-right: 5px;
    padding: 8px 12px;
    border-radius: 4px;
}

.pagination a {
    background-color: #0073aa;
    color: #fff;
}

.pagination a:hover {
    background-color: #ddd;
}

.pagination span.current {
    background-color: #333;
}

/* Event styling */

.event-title a {
    color: inherit; /* Keep link styling consistent */
    text-decoration: none; /* Remove underline */
}

.event-title a:hover {
    text-decoration: underline; /* Add underline on hover */
}

.event-title a::before {
    content: attr(data-title); /* Display the title instead of raw text */
}

.event-title a::after {
    content: ""; /* Hide raw text */
    visibility: hidden;
}

.event-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.event-item {
  border-bottom: 1px solid #eee;
  padding: 1em 0;
  transition: background-color 0.2s ease;
}

.event-item:last-child {
  border-bottom: none;
}

.event-item h3 {
  font-size: 1.5em;
  margin: 0 0 0.5em;
  color: #333;
}

.event-item p {
  margin: 0.2em 0;
  font-size: 1em;
  color: #666;
}

/* --- Summary View Styling --- */
.calendar-summary-view {
  max-width: 800px;
  margin: 0 auto;
  padding: 1em;
  font-family: Arial, sans-serif;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.calendar-summary-view h2 {
  text-align: center;
  margin-bottom: 1em;
  font-size: 2rem;
  color: #333;
}

.event-summary-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.event-summary-item {
  padding: 0.75em;
  border-bottom: 1px solid #eee;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  transition: background-color 0.2s ease;
}

.event-summary-item:hover {
  background-color: #f9f9f9;
}

.event-summary-item:last-child {
  border-bottom: none;
}

.event-summary-item span {
  margin-right: 1em;
  font-size: 1em;
}

.event-summary-item .event-date {
  color: #555;
  font-weight: bold;
}

.event-summary-item .event-time {
  color: #999;
}

.event-summary-item .event-title {
  color: #333;
  flex-grow: 1;
}

/* Optional: a specific style for the date/time area if you wrap them in a container
.calendar-list-view .event .date-time {
  font-weight: bold;
  color: #444;
}
  */

/* --- Responsive adjustments --- */
@media (max-width: 992px) {
    .events-grid article.post {
        flex: 1 1 calc(50% - 15px); /* 2 columns */
    }
}

@media (max-width: 768px) {
    .calendar-day-header {
        font-size: 0.9em;
    }
    .calendar-view {
        grid-template-columns: repeat(7, minmax(50px, auto));
    }
    .calendar-grid {
        grid-template-columns: repeat(7, minmax(50px, auto));
    }
    .calendar-day {
        min-height: 100px;
        font-size: 0.9em;
    }
	.custom-calendar-controls.view-toggle-buttons {
        flex-wrap: wrap; 
    }
    .calendar-view-button {
        flex: 1 1 48%; /* Allows buttons to wrap, taking up roughly half the width */
        border-right: none !important;
        border-bottom: 1px solid #ccc;
    }
    .calendar-view-button:nth-child(even) {
        border-right: none;
    }
.event-tooltip {
        width: auto;
        position: absolute; /* Ensure tooltips are correctly positioned */
        top: calc(100% + 5px);
        left: 50%;
        transform: translateX(-50%);
        z-index: 9999; /* Ensure tooltips remain above other elements */
        display: none; /* Hidden by default */
    }
.calendar-day:hover .event-tooltip {
        display: block; /* Show tooltip on hover */
    }
	.day-event {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .day-event__image {
        width: 100%;
        max-height: 200px; /* Limit image height */
        overflow: hidden;
    }

    .day-event__content {
        padding: 10px;
    }
}

@media (max-width: 600px) {
.calendar-list-view h2 {
	font-size: 1.7em;
  }
.event-item h3 {
	font-size: 1.3em;
  }
.event-item p {
	font-size: 0.9em;
  }
.event-summary-item {
    flex-direction: column;
    align-items: flex-start;
  }
.event-summary-item span {
    margin-bottom: 0.5em;
  }
	.events-grid article.post {
        flex: 1 1 100%; /* 1 column */
    }
    .events-grid {
        gap: 15px;
    }
}