@charset "UTF-8";
/* CSS Document */

/* Container */
	.container {
		width: 90%;
		margin: 20px auto;
	}

	/* View Switcher */
	.view-switcher {
		display: flex;
		gap: 10px;
		justify-content: left;
		align-items: center;
		margin: 20px auto;
		text-align: center;
	}

	.view-switcher a {
		text-decoration: none;
	}

	.view-switcher a.active {
		font-weight: bold;
	}

	/* Calendar Navigation */
	.calendar-navigation {
		display: flex;
		gap: 10px;
		justify-content: center;
		align-items: center;
		margin: 20px auto;
		text-align: center;
	}

	/* Month Calendar */
	.calendar-month {
		width: 100%;
		border-collapse: collapse;
	}

	.calendar-month th, .calendar-month td {
		width: 14.28%;
		border: 1px solid #ccc;
		padding: 10px;
		text-align: left;
		vertical-align: top;
	}

	.calendar-month .day {
		position: relative;
		min-height: 50px;
	}

	.calendar-month .day-number {
		position: absolute;
		top: 0;
		right: 0;
		padding: 5px;
		font-weight: bold;
		color: inherit;
	}

	.calendar-month .today {
		background-color: #b89a74;
	}

	.calendar-month .prev-month, .calendar-month .next-month {
		color: #999;
		background-color: #f5f5f5;
	}

	.calendar-month .event {
		margin-top: 5px;
		background-color: #90caf9;
		padding: 3px;
		border-radius: 3px;
	}

	/* Week Calendar */
	.calendar-week {
		width: 100%;
		border-collapse: collapse;
		table-layout: fixed; /* Ensures fixed distribution of columns */
	}

	.calendar-week th, .calendar-week td {
		width: 80px;
		border: 1px solid #ccc;
		padding: 10px;
		text-align: left;
		word-wrap: break-word;
        vertical-align: top;
	}

	.calendar-week th a {
		text-decoration: none;
		color: inherit;
	}

	.calendar-week .hour {
		width: 40px; /* Fixed width for the "hour" column */
		background-color: #f9f9f9;
		text-align: left;
		padding-right: 10px;
		font-weight: bold;
	}

	/* Apply equal width to other columns */
	.calendar-week th:not(:first-child), .calendar-week td:not(:first-child) {
		width: calc((100% - 40px) / 7); /* Equal width for other columns */
	}

	/* Day Calendar */
	.calendar-day {
		width: auto;
		border-collapse: collapse;
	}

	.calendar-day th, .calendar-day td {
		border: 1px solid #ccc;
		padding: 10px;
		text-align: left;
		vertical-align: top;
	}

	.calendar-day .hour {
		width: 40px;
		background-color: #f9f9f9;
		text-align: center;
		padding: 10px;
		font-weight: bold;
	}

	.calendar-day .day-event {
		width: 100%;
		padding-left: 10px;
		text-align: left;
	}

	.calendar-day .day-event a {
		color: inherit;
	}

	/* Event Styles */
	.event {
		background-color: #90caf9;
		padding: 5px;
		margin: 0px 0px 10px 0px;
		border-radius: 4px;
	}

	.event-time {
		font-size: 0.8em;
		color: inherit;
	}

	/* Basic styles for the event link */
	.calendar-month .event a,
	.calendar-week .event a {
		position: relative;
		text-decoration: none;
		color: inherit;
	}

	/* Tooltip Styles */
	.calendar-month .tooltiptext,
	.calendar-week .tooltiptext {
		visibility: hidden;
		width: 200px;
		background-color: rgba(0, 0, 0, 0.8);
		color: #fff;
		text-align: center;
		border-radius: 5px;
		padding: 10px;
		position: absolute;
		z-index: 1;
		bottom: 100%;
		left: 50%;
		margin-left: -100px;
		opacity: 0;
		transition: opacity 0.3s;
	}

	/* Displays the tooltip when hovering over the link */
	.calendar-month .event a:hover .tooltiptext,
	.calendar-week .event a:hover .tooltiptext {
		visibility: visible;
		opacity: 1;
	}

	/* Year Calendar */
	.calendar-year {
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
	}

	.calendar-year-month {
		flex: 1 0 calc(33.33% - 20px); /* Three columns with spacing */
		width: 14.28%;
		border: 1px solid #ccc;
		padding: 10px;
		border-radius: 5px;
		box-sizing: border-box;
	}

	/* Media Queries */
	@media (max-width: 1480px) {
		.calendar-year-month {
			flex: 1 0 calc(50% - 20px); /* Two columns */
		}
	}

	@media (max-width: 868px) {
		.calendar-year-month {
			flex: 1 0 100%; /* One column */
		}
	}

	/* Year Day Styles */
	.calendar-year .day {
		display: flex;
		flex-direction: column; /* Column to stack elements */
		align-items: flex-end; /* Align to the right */
		min-height: 50px; /* Minimum height to leave space for content */
		padding: 5px; /* Space inside */
		position: relative; /* Necessary for positioned elements */
	}

	.calendar-year .day-number {
		padding: 5px;
		font-weight: bold;
		color: inherit;
	}

	.calendar-year .event-container {
		display: flex;
		flex-wrap: wrap; /* Allows to wrap automatically */
		justify-content: center; /* Centers the points */
		gap: 4px; /* Space between points */
		margin-top: 30px; /* Space between the number and the points */
	}

	.calendar-year .event {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background-color: #6993B5; /* Example color for the points */
		display: inline-block; /* Important for points to be in line */
		cursor: pointer;
	}

	/* Positioning the tooltip on hover over the points */
	.calendar-year .event .tooltiptext {
		visibility: hidden;
		width: 120px;
		background-color: rgba(0, 0, 0, 0.8);
		color: #fff;
		text-align: center;
		border-radius: 5px;
		padding: 5px;
		position: absolute;
		z-index: 1;
		bottom: 150%; /* Adjust if necessary */
		left: 50%;
		margin-left: -60px;
		opacity: 0;
		transition: opacity 0.3s;
	}

	/* Shows the tooltip on hover */
	.calendar-year .event:hover .tooltiptext {
		visibility: visible;
		opacity: 1;
	}

	/* Category Styles */
	.event.Parish {
		background-color: #af6b1d;
		color: #fff;
	}

	.event.Monastic {
		background-color: #4b7056;
		color: #fff;
	}

	.event.School {
		background-color: #90c5d9;
		color: #000;
	}

	.event.Special {
		background-color: #b89a74;
		color: #000;
	}
            
    .event.Visiting {
		background-color: #005669;
		color: #fff;
	}

    .event.Maintenance {
		background-color: #ccc;
		color: #fff;
	}