/**
 * Copperhill Events — front end.
 *
 * Moved out of the child theme's archive-event-list.php and single-event.php.
 * Colours come from Events → Calendar Settings as the --cev-* variables
 * (printed inline after this file); the fallbacks are the original values.
 */

/* ------------------------------------------------------------------
 * View switcher (Calendar / Upcoming Events)
 * --------------------------------------------------------------- */

.view-toggle {
	display: flex;
	justify-content: center;
	margin-bottom: 30px;
	gap: 0;
	background: #fff;
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
}

.toggle-btn {
	padding: 12px 30px;
	border: none;
	background: var(--cev-toggle-bg, #f3f4f6);
	color: var(--cev-toggle-text, #132244);
	cursor: pointer;
	font-size: 16px;
	font-weight: 500;
	transition: all 0.3s;
	outline: 0;
}

.toggle-btn.active {
	background: var(--cev-toggle-active, #132244);
	color: #fff;
	outline: 0;
}

.toggle-btn:hover:not(.active) {
	background: var(--cev-toggle-bg, #f3f4f6);
	outline: 0;
}

.toggle-btn:focus-visible {
	outline: 2px solid var(--cev-toggle-active, #132244);
	outline-offset: 2px;
}

/* Sections */
.calendar-section,
.events-list-section {
	display: none;
	padding-bottom: 90px;
}

.calendar-section.active,
.events-list-section.active {
	display: block;
}

#calendar {
	max-width: 100%;
}

.cev-calendar-error {
	margin: 0 0 16px;
	padding: 12px 16px;
	border-left: 4px solid var(--cev-button, #DF1919);
	background: #fdf2f2;
}

/* ------------------------------------------------------------------
 * FullCalendar
 * --------------------------------------------------------------- */

.fc {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.fc-event {
	cursor: pointer;
	border-radius: 4px;
	padding: 2px 4px;
	font-size: 13px;
}

.fc-event-main {
	display: flex;
	flex-direction: column;
}

.fc-event-time {
	display: block !important;
	font-weight: 600;
}

.fc-event-title {
	display: block !important;
}

.fc-daygrid-event {
	white-space: normal;
	margin-bottom: 2px;
}

.fc-daygrid-day-events {
	margin-bottom: 3px !important;
}

.fc-daygrid-event-harness {
	margin-bottom: 2px;
}

.fc-toolbar-title {
	font-size: 24px !important;
	font-weight: 600 !important;
}

.fc-button {
	background-color: var(--cev-button, #DF1919) !important;
	border-color: var(--cev-button, #DF1919) !important;
	text-transform: capitalize !important;
	padding: 8px 12px !important;
	border-radius: 0 !important;
}

.fc-button:hover,
.fc-button-active {
	background-color: var(--cev-button-active, #132244) !important;
	border-color: var(--cev-button-active, #132244) !important;
}

.fc-today-button:disabled {
	opacity: 0.5;
}

.fc-day-today,
.fc-list-day-today,
.fc-col-today {
	background: var(--cev-today, #f3f4f6) !important;
}

.fc .fc-scrollgrid table {
	margin: 0 !important;
}

.fc .fc-scrollgrid table a {
	color: var(--cev-button-active, #132244) !important;
}

.fc-h-event .fc-event-main-frame {
	flex-direction: column;
}

.fc-event-title-container,
.fc-h-event .fc-event-time {
	line-height: 1.2;
}

.fc .fc-daygrid-event {
	padding: 5px;
}

/* ------------------------------------------------------------------
 * Upcoming list
 * --------------------------------------------------------------- */

.events-list-section h2 {
	color: #1f2937;
	margin-bottom: 20px;
	font-size: 24px;
}

.event-item {
	border-left: 4px solid var(--cev-accent, #DF1919);
	background: #f9fafb;
	padding: 20px;
	margin-bottom: 15px;
	border-radius: 4px;
	transition: transform 0.2s, box-shadow 0.2s;
	cursor: pointer;
}

.event-item:hover {
	transform: translateX(4px);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.event-date-badge {
	display: inline-block;
	background: var(--cev-accent, #DF1919);
	color: #fff;
	padding: 5px 12px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 10px;
}

.event-item h3 {
	color: #1f2937;
	margin-bottom: 8px;
	font-size: 20px;
}

.event-time {
	color: #6b7280;
	font-size: 14px;
	margin-bottom: 8px;
	font-weight: 500;
}

.event-description {
	color: #4b5563;
	line-height: 1.6;
}

/* ------------------------------------------------------------------
 * Single event
 * --------------------------------------------------------------- */

.event_add_to_calenadar {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: var(--cev-summary-bg, #132245);
	padding: 1.5rem;
}

span.event-calendar-label {
	letter-spacing: 0.2px;
	font-weight: 600;
	color: #fff;
	margin-bottom: 5px;
	font-size: 18px;
	line-height: 1.2;
}

.single_event .event_content .event_intro .wrap-date-time-loc {
	overflow: hidden;
}

/* Date / Time / Location boxes: OvaTheme gives each a fixed third, so when
   one is missing (no Time box) the row stops short and leaves a white gap.
   Share the row instead. Phones keep OvaTheme's full-width stacking. */
@media (min-width: 768px) {
	body .single_event .event_content .event_intro .wrap-date-time-loc .wrap-date,
	body .single_event .event_content .event_intro .wrap-date-time-loc .wrap-time,
	body .single_event .event_content .event_intro .wrap-date-time-loc .wrap-loc {
		flex: 1 1 0;
		min-width: 0;
	}
}

.event_summary {
	box-shadow: 0 10px 40px 0 rgba(6, 22, 58, 0.1);
}

.sidebar .widget h4.widget-title {
	color: #06163A;
}

.cev-repeat {
	margin: 0;
	padding: 12px 20px;
	font-weight: 500;
}

.cev-repeat i {
	margin-right: 6px;
}

/* ------------------------------------------------------------------
 * Small screens
 * --------------------------------------------------------------- */

@media screen and (max-width: 767px) {
	.wrap-date-time-loc > div {
		border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	}
}

@media (max-width: 768px) {
	.view-toggle {
		width: 100%;
	}

	.toggle-btn {
		flex: 1;
		padding: 10px 15px;
		font-size: 14px;
	}

	.fc-toolbar {
		flex-direction: column;
		gap: 10px;
	}

	.fc-toolbar-chunk {
		display: flex;
		justify-content: center;
	}

	.fc-button {
		padding: 6px 8px !important;
		font-size: 14px !important;
	}

	.fc-daygrid-day-frame {
		min-height: 100px !important;
	}

	.fc-daygrid-day-events {
		font-size: 11px !important;
	}

	.fc-event {
		font-size: 10px !important;
		padding: 4px 3px !important;
		margin-bottom: 2px !important;
		line-height: 1.3;
	}

	.fc-event-time {
		display: block !important;
		font-weight: 700;
		font-size: 11px;
	}

	.fc-event-title {
		display: block !important;
		font-weight: 500;
		margin-top: 1px;
	}

	.fc-daygrid-event-dot {
		display: none;
	}

	.fc-daygrid-body-natural .fc-daygrid-day-events {
		margin-bottom: 5px !important;
	}

	.fc-timegrid-slot {
		height: 3em !important;
	}

	.fc-col-header-cell {
		font-size: 12px;
	}
}

@media (max-width: 480px) {
	.fc-header-toolbar .fc-toolbar-chunk:last-child {
		flex-direction: column;
		gap: 5px;
	}

	.fc-button-group {
		width: 100%;
	}

	.fc-button {
		flex: 1;
	}
}