@import url("hours.css");

.hours-link img { pointer-events: none; }

:root {
	--transition-duration: 0.5s;
	--gap: 16;
	--columns: 1

	@media screen and (min-width: 768px) {
		--columns: 2;
	}

	@media screen and (min-width: 992px) {
		--columns: 3;
	}
}

#full-schedule {
	h2, .h2 {
		color: #B40000;
		font-weight: 300;
		font-size: 3.3rem;
		text-align: center;
	}
}

details {

	& summary {
		list-style: none;

		& strong {
			pointer-events: none;
		}
	}

	&.exception-dates summary:hover {
		text-decoration: underline;
		cursor: pointer;
	}

	&.exception-dates summary::before {
		content: '+ ';
		color: #940002;
		display: inline-block;
		width: 15px;
		font-weight: 800;
	}

	& + .alert-section {

		padding-top: 0.5rem;
		padding-left: 1rem;
		padding-right: 1rem;
		padding-bottom: 0.5rem;
		border-bottom: 0px solid #A20000;
		border-top: 0;
		transition:
			border-bottom-width var(--transition-duration) ease-out,
			height var(--transition-duration) ease-out,
			max-height var(--transition-duration) ease-out,
			padding-top var(--transition-duration) ease-out;
	}		

	& + .exceptions {
		max-height: 0;
		overflow: hidden;
		transition: max-height 1ms ease-out;
	}

	& + .exceptions b {
		font-size: larger;
		vertical-align: baseline;
		color: #00000050;
	}

	&.exception-dates, &.exception-dates + .exceptions {
		margin-left: 0.5rem;
	}
	&.exception-dates.open + section.exceptions {
		margin-top: -0.75rem;
	}

	&.exception-dates summary small {
		font-weight: 900;
		pointer-events: none;
	}

	.exception-details summary:hover {
		cursor: pointer;
	}

	@media (prefers-reduced-motion) {
		* {
			transition: unset !important;
		}
	}
}

.card-header .col-daydatetime {
	width: 100%;
	text-align: center;
	padding-inline: 0;
}

#week-schedule .list-group-item section.exceptions p, #week-schedule .list-group-item section.exceptions p:first-child {
	margin-left: 1rem !important;
}


.list-group-item.text-left {
	padding-bottom: 0.5rem;
}

details[open] {

	&.exception-dates summary::before {
		content: '\2013  ';
		color: #940002;
	}

	& + .alert-section {

	}

	& + section {
		max-height: 150vh;
		padding-top: 1rem;
		border-bottom-width: 5px;
	}		

	& + .exceptions {
		max-height: 50vh;
		overflow: hidden;
		transition: all 0.5s ease-in-out;
	}


}


.list-group-item p {
	margin-bottom: 0.25rem;
}

dd.col-time {
	position: relative;

	& button.alert-btn {
		background-color: #A20000;
		border: 0 !important;
		border-radius: 50px !important;
		color: white;
		height: 12px;
		aspect-ratio: 1 / 1;
		font-size: 10px;
		font-weight: 800;
		transition: scale .15s ease-in-out;
		position: absolute;
		top: 0;
		right: 0;
		scale: .95;
		translate: -50% 50%;
		user-select: none;
		display: flex;
		align-items: center;
		justify-content: center;

		&:where(:hover, :focus-visible) {
			scale: 1.2;
			cursor: pointer;
		}

		&:active {
			scale: .95;
		}

	}

	@media screen and (max-width: 992px) {
		& button.alert-btn {
			translate: -50% 100%;
		}
	}
}

#full-schedule, #alerts {
	opacity: 1;
	transition: opacity 150ms ease-in-out;

	&.fadeout {
		opacity: 0
	}
}

.alert-description p {
	font-size: 0.7rem;
	font-weight: 700;
	color: #333333;
	line-height: 1.5;
	margin-left:1.5rem;
}

.alert-description p.icon-time {
	margin-left:2rem;
}

.alert-dates {	
	& time {
		font-weight: 900 !important;
		color: #940002;
		font-size: 0.8rem;
		text-transform: uppercase;
		text-wrap: nowrap;
	}
}

.hours-row:not(.headers) {
	border-top: 0px solid #666666;
	transition: all 0.5s ease;

	&:where(:hover, :focus-within) {
		background: whitesmoke;			
	}

	& :is(dt, dd) {
		display: grid;
		align-items: center;			
	}

	@media screen and (max-width: 992px) {
		& :is(dt, dd) {
			display: flex;
			justify-content: center;
		}
	}
}

h3.card-title.alert-title {
	margin-left: 1.5rem;
	font-size: 0.8rem;
	color: #535353 !important;

	strong {
		color: unset;
	}
}

#alerts .exception-dates summary {
	margin-left: -1.5rem;
}

#alerts .alert-title {
	margin-bottom: 0;
}

#alerts .alert-title + p:first-of-type, #alerts .alert-title + p.icon-time {
	border-top: 0;
	padding-top: 0.15rem;
	margin-top: 0;
}

#alerts .list-group-item p.icon-time {
	margin-top: 0.4rem;
	border-top: 0;
	margin-left: 0.5rem;
}

#alerts .list-group-item p.icon-time + p:not(.icon-time), #hours-schedule .list-group-item p.icon-time + p:not(.icon-time) {
	border-top: 0;
	margin-top: 0;
	padding-top: 0;
}

#week-schedule.aquaplex-schedule .hours-row:not(:has(.time)):not(.headers) {
	display: none;
}

.card-title .img-icon-xs {
	margin-top: -10px;
}



@media (max-width: 991.98px) {
	.col-daydate { width: 45%; }
	.col-daydatetime { width: 55%; }
}



@media (min-width: 768px) {
#facility-alerts .col-md-6 {
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: calc(50% - 0.5rem);
}
}
@media (max-width: 767.98px) {
	#facility-alerts .col-md-6 {
		width: calc(100% - 1rem);
	}
}
@media (min-width: 992px) {
	#facility-alerts .col-lg-4 {
			-ms-flex: 0 0 33.333333%;
			flex: 0 0 33.333333%;
			max-width: calc(33.333333% - 0.333rem);
	}
}




[class^="alerts-"] {
	display: flex;
	padding-bottom: 1rem;
}

.alert-col {
	flex-grow: 1;
	width: 25%;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

/* 2 columns by default, hide columns 2 & 3 */
.alert-col:nth-child(n+3),
.hours-container:not(:has(.time))
{
	display: none;
}

@media (min-width: 992px) {
	.alert-col:nth-child(3) {
		display: block;
	}
}
@media (min-width: 1200px) {
	.alert-col:nth-child(4) {
		display: block;
	}
}
@media (max-width: 575.98px) {
  .alert-col:nth-child(2) {
		display: none;
	}

  .alert-col {
    width: 100%; /* Full width for each column */
    padding: 0; /* Remove horizontal padding */
  }
}
.alert-item {
	margin-top: 1rem;
	box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
}
.alert-item .list-group.list-group-flush .list-group-item {
	padding-bottom: 0.5rem;
}

.alert-item[role="note"] {
	min-width: 350px;
}

#alerts .list-group-item .icon-time:before, #hours-schedule .list-group-item .icon-time:before {
	padding-right: 3px;
	margin-top: -2px;
}

.hours-row:has( + details + section.collapse.show) {
	border-top: 5px solid #A20000;
}

section.alert-section.collapse.show {
	border-bottom: 5px solid #A20000;
}

dl.row:first-of-type {
	height: auto !important;
}

@media (max-width: 991.98px) {
#hours-schedule {
  padding-left: 0;
		padding-right: 0;
}
	#week-schedule {
  padding-top: 0;
}
	dl.row.headers {
		height: 0 !important;
	}
}

details summary::-webkit-details-marker {
	display: none;
}

.aquaplex-announcements {
	
	.img-icon-xl {
		margin-top: -0.25rem;
	}


	.announcement-description {
		width: 350px;
	}
}

.arc-announcements {

	.row:has(.alert-item) {
		padding: 2rem;
	}

	.row:has(.alert-item:nth-child(2n)) {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
		gap: 1rem;
	}

	.alert-title summary:hover {
		cursor: pointer;
	}

	.alert-item {
		text-align: center;
		margin: 0;
	}
	
	.alert-item:not(:has(h2)) .fa-exclamation-triangle {
		scale: 1.5 1.5;
		translate: -8px;
	}
}