/*
|--------------------------------------------------------------------------
| CLC ChurchSuite Events
| Six-Week Calendar
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| Calendar container
|--------------------------------------------------------------------------
*/


.csc-calendar {

	--csc-calendar-primary: #008b9d;
	--csc-calendar-primary-dark: #006f7e;
	--csc-calendar-text: #222222;
	--csc-calendar-muted: #666666;
	--csc-calendar-border: #e2e2e2;

	width:
		100%;

	margin:
		0;

	padding:
		0;

	color:
		var(--csc-calendar-text);

	font-family:
		inherit;

	box-sizing:
		border-box;

}


/*
|--------------------------------------------------------------------------
| Calendar reset
|--------------------------------------------------------------------------
*/


.csc-calendar *,
.csc-calendar *::before,
.csc-calendar *::after {

	box-sizing:
		border-box;

}


/*
|--------------------------------------------------------------------------
| Calendar grid
|--------------------------------------------------------------------------
*/


.csc-calendar-grid {

	display:
		grid;

	grid-template-columns:
		repeat(
			7,
			minmax(0, 1fr)
		);

	width:
		100%;

	margin:
		0;

	padding:
		0;

	border-top:
		1px solid
		var(--csc-calendar-border);

	border-left:
		1px solid
		var(--csc-calendar-border);

}


/*
|--------------------------------------------------------------------------
| Weekday headings
|--------------------------------------------------------------------------
*/


.csc-calendar-weekday {

	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	min-height:
		32px;

	margin:
		0;

	padding:
		6px 3px;

	border-right:
		1px solid
		var(--csc-calendar-border);

	border-bottom:
		1px solid
		var(--csc-calendar-border);

	background:
		#f5f5f5;

	color:
		#555555;

	font-size:
		10px;

	font-weight:
		700;

	line-height:
		1.2;

	text-align:
		center;

	text-transform:
		uppercase;

	letter-spacing:
		.02em;

}


/*
|--------------------------------------------------------------------------
| Day cell
|--------------------------------------------------------------------------
*/


.csc-calendar-day {

	position:
		relative;

	min-width:
		0;

	min-height:
		92px;

	margin:
		0;

	padding:
		6px;

	border-right:
		1px solid
		var(--csc-calendar-border);

	border-bottom:
		1px solid
		var(--csc-calendar-border);

	background:
		#ffffff;

}


/*
|--------------------------------------------------------------------------
| Today's cell
|--------------------------------------------------------------------------
*/


.csc-calendar-day.is-today {

	background:
		#f0fafb;

	box-shadow:
		inset 0 0 0 1px
		rgba(
			0,
			139,
			157,
			.18
		);

}


/*
|--------------------------------------------------------------------------
| Day header
|--------------------------------------------------------------------------
*/


.csc-calendar-day-header {

	display:
		flex;

	align-items:
		center;

	justify-content:
		flex-start;

	min-height:
		24px;

	margin:
		0 0 5px 0;

	padding:
		0;

}


/*
|--------------------------------------------------------------------------
| Day name
|--------------------------------------------------------------------------
|
| The full day name exists in the markup for accessibility but isn't
| displayed in the compact calendar.
|
|--------------------------------------------------------------------------
*/


.csc-calendar-day-name {

	display:
		none;

}


/*
|--------------------------------------------------------------------------
| Day number
|--------------------------------------------------------------------------
*/


.csc-calendar-day-number {

	display:
		flex;

	align-items:
		center;

	gap:
		3px;

	margin:
		0;

	padding:
		0;

	color:
		#555555;

	font-size:
		12px;

	font-weight:
		600;

	line-height:
		1;

}


/*
|--------------------------------------------------------------------------
| Number
|--------------------------------------------------------------------------
*/


.csc-calendar-day-number-value {

	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	flex:
		0 0 23px;

	width:
		23px;

	height:
		23px;

	margin:
		0;

	padding:
		0;

	border-radius:
		50%;

	background:
		transparent;

	color:
		inherit;

	font-size:
		12px;

	font-weight:
		600;

	line-height:
		1;

}


/*
|--------------------------------------------------------------------------
| Today's number
|--------------------------------------------------------------------------
*/


.csc-calendar-day.is-today
.csc-calendar-day-number-value {

	background:
		var(--csc-calendar-primary);

	color:
		var(--csc-calendar-accent-text, #ffffff);

	font-weight:
		700;

}


/*
|--------------------------------------------------------------------------
| Month label
|--------------------------------------------------------------------------
*/


.csc-calendar-month {

	display:
		inline-block;

	margin:
		0;

	padding:
		0;

	color:
		#777777;

	font-size:
		9px;

	font-weight:
		700;

	line-height:
		1;

	text-transform:
		uppercase;

}


/*
|--------------------------------------------------------------------------
| Today's month label
|--------------------------------------------------------------------------
*/


.csc-calendar-day.is-today
.csc-calendar-month {

	color:
		var(--csc-calendar-primary);

}


/*
|--------------------------------------------------------------------------
| Events
|--------------------------------------------------------------------------
*/


.csc-calendar-events {

	display:
		flex;

	flex-direction:
		column;

	gap:
		3px;

	width:
		100%;

	margin:
		0;

	padding:
		0;

}


/*
|--------------------------------------------------------------------------
| Event button
|--------------------------------------------------------------------------
*/


.csc-calendar-event {

	display:
		block;

	width:
		100%;

	min-width:
		0;

	margin:
		0;

	padding:
		4px 5px;

	border:
		0;

	border-left:
		3px solid
		var(--csc-calendar-primary);

	border-radius:
		2px;

	background:
		#eef8f9;

	color:
		#333333;

	font-family:
		inherit;

	font-size:
		11px;

	font-weight:
		500;

	line-height:
		1.25;

	text-align:
		left;

	text-decoration:
		none !important;

	cursor:
		pointer;

	overflow:
		hidden;

	box-shadow:
		none !important;

	appearance:
		none;

	-webkit-appearance:
		none;

}


/*
|--------------------------------------------------------------------------
| Event hover
|--------------------------------------------------------------------------
*/


.csc-calendar-event:hover,
.csc-calendar-event:focus {

	background:
		#dceff1;

	color:
		#222222;

	text-decoration:
		none !important;

	outline:
		none !important;

}


/*
|--------------------------------------------------------------------------
| Event keyboard focus
|--------------------------------------------------------------------------
*/


.csc-calendar-event:focus-visible {

	outline:
		2px solid
		var(--csc-calendar-primary) !important;

	outline-offset:
		1px;

}


/*
|--------------------------------------------------------------------------
| Event time
|--------------------------------------------------------------------------
*/


.csc-calendar-event-time {

	display:
		block;

	margin:
		0 0 1px 0;

	padding:
		0;

	color:
		var(--csc-calendar-primary);

	font-size:
		10px;

	font-weight:
		700;

	line-height:
		1.2;

}


/*
|--------------------------------------------------------------------------
| Event name
|--------------------------------------------------------------------------
*/


.csc-calendar-event-name {

	display:
		-webkit-box;

	-webkit-box-orient:
		vertical;

	-webkit-line-clamp:
		2;

	margin:
		0;

	padding:
		0;

	overflow:
		hidden;

	color:
		inherit;

	font-size:
		inherit;

	line-height:
		inherit;

}


/*
|--------------------------------------------------------------------------
| Empty/error message
|--------------------------------------------------------------------------
*/


.csc-calendar-empty {

	width:
		100%;

	margin:
		0;

	padding:
		25px 20px;

	border:
		1px solid
		var(--csc-calendar-border, #e2e2e2);

	border-radius:
		7px;

	background:
		#ffffff;

	color:
		var(--csc-calendar-muted, #666666);

	font-size:
		14px;

	line-height:
		1.5;

	text-align:
		center;

}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/


@media (max-width: 767px) {


	.csc-calendar-weekday {

		min-height:
			29px;

		padding:
			5px 2px;

		font-size:
			9px;

	}


	.csc-calendar-day {

		min-height:
			76px;

		padding:
			4px;

	}


	.csc-calendar-day-header {

		min-height:
			21px;

		margin-bottom:
			4px;

	}


	.csc-calendar-day-number {

		font-size:
			10px;

	}


	.csc-calendar-day-number-value {

		flex-basis:
			20px;

		width:
			20px;

		height:
			20px;

		font-size:
			10px;

	}


	.csc-calendar-month {

		font-size:
			8px;

	}


	.csc-calendar-event {

		padding:
			3px;

		border-left-width:
			2px;

		font-size:
			9px;

	}


	.csc-calendar-event-time {

		font-size:
			8px;

	}

}


/*
|--------------------------------------------------------------------------
| Small mobile
|--------------------------------------------------------------------------
*/


@media (max-width: 480px) {


	.csc-calendar-weekday {

		min-height:
			26px;

		font-size:
			8px;

	}


	.csc-calendar-day {

		min-height:
			68px;

		padding:
			3px;

	}


	.csc-calendar-day-header {

		min-height:
			20px;

		margin-bottom:
			3px;

	}


	.csc-calendar-day-number {

		gap:
			2px;

		font-size:
			9px;

	}


	.csc-calendar-day-number-value {

		flex-basis:
			19px;

		width:
			19px;

		height:
			19px;

		font-size:
			9px;

	}


	.csc-calendar-month {

		font-size:
			7px;

	}


	.csc-calendar-events {

		gap:
			2px;

	}


	.csc-calendar-event {

		padding:
			2px 3px;

		border-left-width:
			2px;

		font-size:
			8px;

	}


	.csc-calendar-event-time {

		font-size:
			7px;

	}


	.csc-calendar-event-name {

		-webkit-line-clamp:
			2;

	}

}


/*
|--------------------------------------------------------------------------
| Very small screens
|--------------------------------------------------------------------------
*/


@media (max-width: 360px) {


	.csc-calendar-weekday {

		font-size:
			7px;

	}


	.csc-calendar-day {

		min-height:
			62px;

		padding:
			2px;

	}


	.csc-calendar-day-number-value {

		flex-basis:
			18px;

		width:
			18px;

		height:
			18px;

	}


	.csc-calendar-event {

		padding:
			2px;

		font-size:
			7px;

	}


	.csc-calendar-event-time {

		font-size:
			6px;

	}

}