/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.fo-calendar {
	--calendar-cells-in-row: 7;
	--calendar-cell-width: calc(100% / var(--calendar-cells-in-row));
	--calendar-cell-min-width: calc( 100% / var(--calendar-cells-in-row) );
	--calendar-cell-padding: .75rem .75rem;
	--calendar-cell-x-margin: 0;
	--calendar-cell-y-margin: .75rem;
	--calendar-cell-min-height: 150px;
	--calendar-cell-max-height: 300px;
	--calendar-legend-color-size: 25px;
}

.fo-calendar, .fo-calendar > .container, .fo-calendar > .container > .row, .fo-calendar > .container-fluid, .fo-calendar > .container-fluid > .row {
	--bs-gutter-x: var(--calendar-cell-x-margin);
}

.fo-calendar .fo-cal-header {
	font-family: var(--wp--preset--font-family--fo-ff-1);
	font-size: var(--fo-font-size-2-size);
	color: var(--wp--preset--color--fo-color-7);
	line-height: var(--fo-font-size-2-line-height);
	margin-bottom: var(--fo-font-size-2-mb);
	justify-content: center;
}

.fo-calendar .fo-cal-header > div {
	padding: 1rem;
}

.fo-calendar .fo-event {
	cursor: pointer;
	padding: var(--calendar-cell-padding);
	padding-top: 0;
	padding-bottom: 0;
	border-bottom: 1px solid var(--std-text);
	transition: var(--transition);
}

.fo-calendar .fo-event:hover {
	padding: var(--calendar-cell-padding) !important;
}

.fo-calendar .fo-event-desc-hold {
	display: none !important;
}

.fo-calendar-cell {
    display: flex;
    flex-direction: column;
    width: var(--calendar-cell-width);
	min-width: var(--calendar-cell-min-width);
	max-height: var(--calendar-cell-max-height);
    margin-bottom: var(--calendar-cell-y-margin);
}

.fo-calendar-cell .fo-calendar-cell-inner{
	color: var(--std-text);
	flex-grow: 1;
	background: var(--std-background);
	border: 1px solid var(--std-link-color);
	border-radius: 0 0 var(--std-border-radius) var(--std-border-radius);
	min-height: var(--calendar-cell-min-height);
}

.fo-calendar-cell.before-today-cell {
	opacity: .5;
	transition: var(--transition);
}

.fo-calendar-cell.before-today-cell:hover {
	opacity: 1;
}

.fo-calendar-cell.empty-day-cell .fo-calendar-cell-inner {
	display: none;
}

.fo-calendar-cell.is-today-cell .fo-calendar-cell-inner {
	background: var(--std-highlight-color);
}

.fo-calendar-cell .fo-calendar-cell-header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
	color: var(--btn-font-color);
	background: var(--btn-background-color);
	border: 1px solid var(--btn-border-color);
	border-radius: var(--std-border-radius) var(--std-border-radius) 0 0;
	padding: var(--calendar-cell-padding);
}

.fo-calendar  .fo-cal-legend-color {
    width: var(--calendar-legend-color-size);
    height: var(--calendar-legend-color-size);
	margin-right: 10px;
}

.fo-calendar-cell .fo-calendar-cell-inner .fo-events-wrapper {
	height: 100%;
	overflow-y: auto;
}

.fo-calendar-cell.fo-dow-Monday .fo-calendar-cell-header {
	filter: hue-rotate(51.4285714286deg);
}

.fo-calendar-cell.fo-dow-Tuesday .fo-calendar-cell-header {
	filter: hue-rotate(102.857142857deg);
}

.fo-calendar-cell.fo-dow-Wednesday .fo-calendar-cell-header {
	filter: hue-rotate(154.285714286deg);
}

.fo-calendar-cell.fo-dow-Thursday .fo-calendar-cell-header {
	filter: hue-rotate(205.714285714deg);
}

.fo-calendar-cell.fo-dow-Friday .fo-calendar-cell-header {
	filter: hue-rotate(257.142857143deg);
}

.fo-calendar-cell.fo-dow-Saturday .fo-calendar-cell-header {
	filter: hue-rotate(308.571428572deg);
}

.fo-calendar-cell.fo-dow-Sunday .fo-calendar-cell-header {
	filter: hue-rotate(360deg);
}

@media (max-width: 1199px){
	.fo-calendar {
		--calendar-cells-in-row: 5;
	}
}

@media (max-width: 991px){
	.fo-calendar {
		--calendar-cells-in-row: 4;
	}
}

@media (max-width: 767px){
	.fo-calendar {
		--calendar-cells-in-row: 3;
	}
}

@media (max-width: 575px){
	.fo-calendar {
		--calendar-cells-in-row: 2;
	}
}

@media (max-width: 400px){
	.fo-calendar {
		--calendar-cells-in-row: 1;
	}
}