/**
 * Events Calendar Block - Frontend Styles
 *
 * @package FairEvents
 */

@use "../navigation" as nav;

.wp-block-fair-events-events-calendar {
	max-width: 100%;
	position: relative;
	transition: opacity 0.15s ease;

	&.is-loading {
		opacity: 0.65;

		.nav-prev,
		.nav-next {
			pointer-events: none;
		}
	}

	.fair-events-navigation-loading {
		position: absolute;
		z-index: 10;
		top: 0.5rem;
		left: 50%;
		transform: translateX(-50%);
		padding: 0.375rem 0.75rem;
		border-radius: 999px;
		background: #1e1e1e;
		color: #fff;
		font-size: 0.8125rem;
		font-weight: 600;
	}

	// Navigation (shared with events-week)
	@include nav.fair-events-navigation;

	.fair-events-navigation .navigation-title {
		font-size: 1.25rem;
	}

	// Calendar Grid
	.calendar-grid {
		border: 1px solid #ddd;
		border-radius: 4px;
		overflow: hidden;
		width: 100%; // Fill available space
	}

	.calendar-header {
		display: grid;
		grid-template-columns: repeat(
			7,
			1fr
		); // Equal width cells that grow to fill space
		background: #f0f0f0;
		border-bottom: 1px solid #ddd;
	}

	.weekday-header {
		padding: 0.75rem 0.5rem;
		text-align: center;
		font-weight: 600;
		font-size: 0.875rem;
		color: #1e1e1e;
		border-right: 1px solid #ddd;
		min-width: 0; // Allow shrinking below content size

		&:last-child {
			border-right: none;
		}
	}

	.calendar-body {
		display: grid;
		grid-template-columns: repeat(
			7,
			1fr
		); // Equal width cells that grow to fill space
		background: #fff;
	}

	.calendar-day {
		min-height: 100px;
		min-width: 0; // Critical: allows grid cell to shrink below content size
		padding: 0.5rem;
		border-right: 1px solid #ddd;
		border-bottom: 1px solid #ddd;
		background: #fff;
		position: relative;
		overflow: hidden; // Prevent content overflow

		// Remove right border on last column
		&:nth-child(7n) {
			border-right: none;
		}

		// Empty cells (leading/trailing blanks)
		&.empty {
			background: #f9f9f9;
		}

		// Days from adjacent months (previous/next)
		&.other-month {
			background: #f5f5f5;

			.day-number {
				color: #999;
			}

			.event-item a,
			.event-item .ical-event-title {
				opacity: 0.7;
			}
		}

		// Past days
		&.past {
			opacity: 0.6;
		}

		// Today
		&.today {
			background: nav.$fair-events-today-bg-color;
			border: 2px solid nav.$fair-events-today-border-color;

			.day-number {
				color: nav.$fair-events-today-border-color;
				font-weight: 700;
			}
		}

		.day-number {
			font-size: 0.875rem;
			font-weight: 600;
			color: #1e1e1e;
			margin-bottom: 0.5rem;
		}

		.day-events {
			display: flex;
			flex-direction: column;
			gap: 0.25rem;
			min-width: 0; // Allow shrinking below content size
		}

		.event-item {
			font-size: 0.75rem;
			line-height: 1.3;
			min-width: 0; // Allow shrinking below content size

			a {
				display: block;
				padding: 0.25rem 0.375rem;
				background: var(
					--event-bg-color,
					#2271b1
				); // Full button by default
				color: var(--event-text-color, #fff);
				text-decoration: none;
				border-radius: 3px;
				border: 1px solid transparent;
				transition:
					background 0.2s ease,
					opacity 0.2s ease;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				min-width: 0; // Allow shrinking below content size

				&:hover {
					opacity: 0.8;
				}

				&:focus {
					outline: 2px solid currentColor;
					outline-offset: 2px;
				}
			}

			// Draft events: outlined style
			&.is-draft a {
				background: transparent;
				color: var(
					--event-bg-color,
					#2271b1
				); // Text uses background color
				border-color: var(
					--event-bg-color,
					#2271b1
				); // Border uses background color

				&:hover {
					background: var(--event-bg-color, #2271b1);
					color: var(--event-text-color, #fff);
					opacity: 0.9;
				}
			}

			// iCal events: styled as colored blocks
			&.is-ical {
				.ical-event-title {
					display: block;
					padding: 0.25rem 0.375rem;
					background: var(--event-bg-color, #4caf50);
					color: var(--event-text-color, #fff);
					border-radius: 3px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					min-width: 0;
					text-decoration: none;

					&:hover {
						opacity: 0.8;
					}

					&:focus {
						outline: 2px solid currentColor;
						outline-offset: 2px;
					}

					// Links have pointer cursor, spans have help cursor
					&[href] {
						cursor: pointer;
					}

					&:not([href]) {
						cursor: help;
					}
				}
			}
		}
	}

	.fair-events-subscribe {
		position: relative;
		margin-top: 0.75rem;
		text-align: right;
	}

	.fair-events-subscribe-trigger {
		font-size: 0.8125rem;
		opacity: 0.7;

		&:hover,
		&[aria-expanded="true"] {
			opacity: 1;
		}
	}

	.fair-events-subscribe-panel {
		position: absolute;
		right: 0;
		top: 100%;
		z-index: 20;
		margin-top: 0.375rem;
		min-width: 220px;
		background: #fff;
		border: 1px solid #e1e5e9;
		border-radius: 8px;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
		text-align: left;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-4px);
		transition:
			opacity 0.15s ease,
			transform 0.15s ease;

		&.is-open {
			opacity: 1;
			visibility: visible;
			transform: translateY(0);
		}
	}

	.fair-events-subscribe-entry {
		display: flex;
		align-items: center;
		gap: 0.625rem;
		width: 100%;
		padding: 0.625rem 0.875rem;
		background: none;
		border: none;
		text-align: left;
		text-decoration: none;
		cursor: pointer;
		font-size: 0.8125rem;
		color: #1e1e1e;

		&:hover,
		&:focus {
			background-color: #f5f5f5;
		}
	}

	.fair-events-subscribe-icon {
		flex-shrink: 0;
		width: 14px;
		height: 14px;
		opacity: 0.8;
	}

	.fair-events-subscribe-note {
		margin: 0;
		padding: 0.5rem 0.875rem 0.75rem;
		font-size: 0.6875rem;
		color: #757575;
		border-top: 1px solid #f0f0f0;
	}

	// Tablet: Smaller grid
	@media (max-width: 768px) {
		.calendar-day {
			min-height: 80px;
			padding: 0.375rem;

			.day-number {
				font-size: 0.75rem;
			}

			.event-item {
				font-size: 0.6875rem;

				a {
					padding: 0.1875rem 0.3125rem;
				}
			}
		}
	}

	// Mobile: Show only days with events (list format)
	@media (max-width: 480px) {
		.calendar-grid {
			border: none;
		}

		.calendar-header {
			display: none; // Hide weekday headers
		}

		.calendar-body {
			display: flex;
			flex-direction: column;
			gap: 1rem; // Space between day cells
		}

		.calendar-day {
			min-height: auto;
			padding: 0;
			border: none;

			// Hide all empty days, days without events, and adjacent month days
			&.empty,
			&:not(.has-events),
			&.other-month {
				display: none;
			}

			// Show only days with events as calendar-like cards
			&.has-events {
				display: block;
				padding: 0;
				background: #fff;
				border: 1px solid #ddd;
				border-radius: 4px;
				overflow: hidden;
				box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

				&.today {
					background: #e7f5ff;
					border: 2px solid #2271b1;
					box-shadow: 0 2px 6px rgba(34, 113, 177, 0.2);

					.day-number {
						background: #2271b1;
						color: #fff;
					}
				}

				&.past {
					opacity: 0.7; // Slight fade for past days

					.day-number {
						background: #f0f0f0;
					}
				}

				.day-number {
					display: block;
					font-size: 1rem;
					font-weight: 600;
					padding: 0.75rem 1rem;
					margin: 0;
					background: #f9f9f9;
					border-bottom: 1px solid #ddd;
					color: #1e1e1e;

					// Show full date (e.g., "15 January")
					&::after {
						content: " " attr(data-month-name);
						font-weight: 400;
						font-size: 0.875rem;
						color: #666;
					}
				}

				.day-events {
					padding: 1rem;
					gap: 0.5rem;
				}

				.event-item {
					font-size: 0.875rem;

					a {
						padding: 0.5rem 0.75rem;
						white-space: normal; // Allow wrapping on mobile
						// background: inherit already set in main styles
					}
				}
			}
		}
	}
}