/* Village Hall Booking - frontend styles */

.vhb-booking-form-wrap {
	max-width: 560px;
}

.vhb-booking-form .vhb-field {
	margin-bottom: 1em;
	display: flex;
	flex-direction: column;
}

.vhb-booking-form label {
	font-weight: 600;
	margin-bottom: 0.35em;
}

.vhb-booking-form input,
.vhb-booking-form select,
.vhb-booking-form textarea {
	padding: 0.5em;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 1em;
}

.vhb-submit-row button {
	background: #2271b1;
	color: #fff;
	border: none;
	padding: 0.7em 1.5em;
	border-radius: 4px;
	cursor: pointer;
	font-size: 1em;
}

.vhb-submit-row button:disabled {
	opacity: 0.6;
	cursor: default;
}


.vhb-form-message {
	margin-top: 1em;
	padding: 0.75em;
	border-radius: 4px;
}

.vhb-form-message--success {
	background: #edfaef;
	color: #1a7f37;
	border: 1px solid #1a7f37;
}

.vhb-form-message--error {
	background: #fdeded;
	color: #b32d2e;
	border: 1px solid #b32d2e;
}

.vhb-calendar-wrap {
	max-width: 900px;
}

.vhb-calendar-legend {
	display: flex;
	gap: 1.5em;
	margin-bottom: 1em;
	flex-wrap: wrap;
}

.vhb-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: 0.95em;
}

.vhb-legend-swatch {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 3px;
}

/* --- FullCalendar overrides: wrap event text and mimic Google Calendar's
   cleaner, roomier look instead of the default cramped/truncated cells. --- */

.vhb-calendar-wrap #vhb-calendar {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.vhb-calendar-wrap .fc .fc-daygrid-event {
	white-space: normal;
	align-items: flex-start;
	padding: 2px 4px;
	border-radius: 4px;
	line-height: 1.25;
}

.vhb-calendar-wrap .fc .fc-daygrid-event .fc-event-title {
	white-space: normal;
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Custom two-line event layout (see eventContent in vhb-frontend-calendar.js):
   top line is the room-colour dot + start time, title sits on its own line
   below in smaller text so it never has to mid-word wrap in a narrow cell. */
.vhb-calendar-wrap .fc .vhb-fc-event-content {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 1px;
}

.vhb-calendar-wrap .fc .vhb-fc-event-time {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 0.85em;
	font-weight: 600;
	white-space: nowrap;
}

.vhb-calendar-wrap .fc .vhb-fc-event-time .fc-daygrid-event-dot {
	flex: 0 0 auto;
}

.vhb-calendar-wrap .fc .vhb-fc-event-title {
	font-size: 0.8em;
	font-weight: 400;
	white-space: normal;
	overflow-wrap: normal;
	word-break: normal;
	line-height: 1.2;
}

.vhb-calendar-wrap .fc .fc-daygrid-day-frame {
	min-height: 90px;
}

.vhb-calendar-wrap .fc .fc-toolbar {
	flex-wrap: wrap;
	gap: 0.5em;
}

.vhb-calendar-wrap .fc .fc-toolbar-title {
	font-size: 1.25em;
}

.vhb-calendar-wrap .fc .fc-button {
	border-radius: 6px;
	text-transform: capitalize;
	box-shadow: none;
}

.vhb-calendar-wrap .fc-event.fc-event-start.fc-event-end {
	cursor: default;
}

/* Mobile: give the calendar breathing room and a Google-Calendar-like agenda
   layout instead of squashed month-grid cells. */
@media ( max-width: 640px ) {
	.vhb-calendar-wrap {
		max-width: 100%;
	}

	.vhb-calendar-wrap .fc .fc-toolbar {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}

	.vhb-calendar-wrap .fc .fc-toolbar-chunk {
		display: flex;
		justify-content: center;
		margin-bottom: 0.4em;
	}

	.vhb-calendar-wrap .fc .fc-button {
		padding: 0.5em 0.9em;
		font-size: 0.9em;
	}

	.vhb-calendar-wrap .fc-list-event-title {
		white-space: normal;
	}
}

/* --- Event description popup (click-to-view for public events) --- */

.vhb-event-popup-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba( 0, 0, 0, 0.5 );
	z-index: 100000;
	align-items: center;
	justify-content: center;
	padding: 1em;
}

.vhb-event-popup-overlay.is-open {
	display: flex;
}

.vhb-event-popup {
	background: #fff;
	border-radius: 8px;
	padding: 1.5em;
	max-width: 420px;
	width: 100%;
	position: relative;
	box-shadow: 0 10px 40px rgba( 0, 0, 0, 0.25 );
}

.vhb-event-popup-close {
	position: absolute;
	top: 0.5em;
	right: 0.75em;
	background: none;
	border: none;
	font-size: 1.5em;
	line-height: 1;
	cursor: pointer;
	color: #555;
}

.vhb-event-popup-title {
	margin: 0 1.5em 0.25em 0;
	font-size: 1.1em;
}

.vhb-event-popup-meta {
	margin: 0 0 0.75em;
	color: #666;
	font-size: 0.9em;
}

.vhb-event-popup-description {
	margin: 0;
	white-space: pre-wrap;
	word-break: break-word;
}