/* ========================================= */
/* CALENDRIER + SYSTEME DE RÉSERVATION - CSS */
/* ========================================= */

/* Colors and background */
.rcal-bg-act1,
.rcal-bg-act2,
.rcal-bg-act3 {
	border: 1px solid #fff;
	color: var(--table_text_color);
	border-top-width: 0px;
	border-right-width: 0px;
	border-left-width: 7px;
}
.rcal-bg-act1 {
	border-color: var(--color_act1);
}
.rcal-bg-act2 {
	border-color: var(--color_act2);
}
.rcal-bg-act3 {
	border-color: var(--color_act3);
}

/* Design principal du calendrier */
.rcalendar {
	display: grid;
	grid-template-columns: 100%;
	font-size: calc(16rem/16);
	font-weight: bold;
	vertical-align: middle;
	/* gap: 5px; */		/* I use margin in items instead, because gap not well recognized on my safari */
	max-width: var(--neg_margin_width);
	margin: 0 calc(var(--neg_margin)/2);	/* some margin left */
	margin-bottom: calc(12rem/16);
}
.rcal-month {
	grid-column: 1/1;
	padding: calc(30rem/16) 2px 0 5px;
	text-transform: uppercase;
	text-align: center;
	color: var(--cal_header_color);
	letter-spacing: 2px;
}
.rcal-item,
.rcal-item-empty {
	margin: 0;
	padding: 0;
}
.rcal-item-empty {
	display: none;
}
.rcal-item-today {
	display: block !important;
	min-height: calc(70rem/16);
}
.rcal-date {
	padding: calc(20rem/16) 2px 0 5px;
	color: var(--cal_header_color);
	text-align: left;
}
.rcal-date-today::before {
    content: "◆  ";
}
.rcal-date-past {
    opacity: 0.4;
}
.rcal-date-day,
.rcal-date-long {
	display: inline-block;
}
.rcal-date-short {
	display: none;
}
.rcal-date-day {
	min-width: calc(70rem/16);
}
.rcal-event {
    /* Mobile : date/texte à gauche, actions à droite */
    position: relative;
    margin: calc(10rem/16);
    padding: calc(15rem/16);
    border-radius: 2px;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 4px;
}
.rcal-event-past {
    opacity: 0.4;
}
.rcal-event-text {
	flex: 1;
}
.rcal-event-actions {
    display: flex;
    flex-direction: row;
    gap: 5px;
	min-width: calc(85rem/16);	// 40+5+40px
    flex-shrink: 0;
}
.rcal-event-name {
	letter-spacing: 0.3px;
	word-spacing: 2px;
	hyphens: none;
	-ms-hyphens: none;
	-webkit-hyphens: none;
}
.rcal-event-actions a {
	border: none;
	padding: 0;
}
.rcal-info-btn,
.rcal-reservation-btn {
    border-radius: 2px;
}
.rcal-info-btn:hover,
.rcal-reservation-btn:hover {
    background-color: #ddd;
}
.rcal-info-btn img,
.rcal-reservation-btn img {
	width: calc(40rem/16);
	height: calc(40rem/16);
	padding: 7px;
}
.rcal-holiday {
	position: relative;		/* need to position this element for child absolute position */
	padding: calc(15rem/16);
	margin: calc(10rem/16);
	border-radius: 2px;
	text-align: center;
	color: #d11;
}
.rcal-holiday-past {
	opacity: 0.4;
}

/*
****************************************************************
 =Media queries
-------------------------------------------------------------- */

/* Minimum width of 780 pixels calendar expand */
/* + PRINT */
@media screen and (min-width: 780px), print {
	/* background */
	.rcal-bg-act1,
	.rcal-bg-act2,
	.rcal-bg-act3 {
		border-width: 1px;
		border-top-width: 7px;
	}

	.rcalendar {
		margin-bottom: calc(12rem/16);
		grid-template-columns: calc(100%/6) calc(100%/6) calc(100%/6) calc(100%/6) calc(100%/6) calc(100%/6);
		font-size: calc(14rem/16);
	}
	.rcal-month {
		grid-column: 1/7;
		padding: calc(30rem/16) 5px;
		font-size: calc(18rem/16);
	}
	.rcal-item,
	.rcal-item-empty {
		/* put border 1px #ddd if more activities are present
		-> it looks less nice, but it's easier to view */
		border: 1px solid #fff;
	}
	.rcal-item-empty {
		display: block;
		min-height: 120px;
	}
	.rcal-date {
		background-color: var(--header_bg_color);
		color: var(--main_text_color);
		font-weight: normal;
		border: 1px solid #ddd;
		padding: 0 2px;
	}
	.rcal-date-today {
		font-weight: bold;
}
	.rcal-date-day,
	.rcal-date-long {
		display: none;
	}
	.rcal-date-short {
		display: inline;
	}
    .rcal-event {
        flex-direction: column;
        align-items: center;
		padding: 5px 2px 3px 3px;
		margin: 5px;
		text-align: center;
    }
}