/**
 * AA Events Frontend CSS.
 */

.aa-events-calendar-wrap {
	margin: 6rem 0;
 }

.aa-events-wrap {
	margin-left: auto;
	margin-right: auto;
	max-width: 96rem;
}

.aa-events-calendar-utility {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	justify-content: space-between;
	margin-bottom: 0.625rem;
}

.aa-events-calendar-view-switcher {
	--toggle-knob-border: var(--color-background);
	--toggle-knob-size: 1.25rem;
	--toggle-padding: 1.5rem;
	align-items: center;
	display: inline-flex;
	gap: var(--toggle-padding);
	margin-inline-end: var(--toggle-knob-size);
	padding: 0;
}

.aa-events-calendar-view-track {
	--track-thickness: 5px;
	appearance: none;
	background: oklch(0.3424 0.1163 256.99 / 55%);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	flex: 0 0 var(--toggle-knob-size);
	font: inherit;
	height: var(--track-thickness);
	margin: 0;
	padding: 0;
	position: relative;
}

.aa-events-calendar-view-track::after {
	aspect-ratio: 1;
	background: var(--color-primary-red);
	border: 2px solid var(--toggle-knob-border);
	border-radius: 999px;
	box-sizing: border-box;
	content: "";
	height: var(--toggle-knob-size);
	left: 0;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: left 0.2s ease-in-out;
	width: var(--toggle-knob-size);
}

.aa-events-calendar-view-switcher.is-list-view-active .aa-events-calendar-view-track::after {
	left: 100%;
}

.aa-events-calendar-view-track:focus-visible {
	outline: none;
}

.aa-events-calendar-view-track:focus-visible::after {
	outline: 3px solid var(--color-teal);
	outline-offset: 3px;
}

.aa-events-calendar-view-button {
	background: transparent;
	border: 0;
	color: var(--color-dark-blue-transparent);
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	letter-spacing: 0.05em;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
	transition: color 0.2s ease-in-out;

	&:hover, &:focus-visible {
		color: var(--color-dark-blue);
	}
}

.aa-events-calendar-view-button[aria-pressed="true"] {
	color: var(--color-dark-blue);
}

.aa-events-calendar-view-button:focus-visible {
	outline: 3px solid var(--color-teal);
	outline-offset: 3px;
}

.aa-events-calendar-wrap [hidden] {
	display: none !important;
}

.aa-events-calendar-header {
	align-items: center;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	margin-bottom: 2rem;

	> h2 {
		color: var(--color-primary-red);
		font-size: var(--h1);
		text-align: center;
		margin-bottom: 0;
	}

	> a {
		border-bottom: 3px solid transparent;
		color: var(--color-primary-red);
		font-size: var(--text-lg);
		font-weight: 700;
		transition: color 200ms ease-in-out;

		&:hover,
		&:focus-visible {
			border-bottom: 3px solid var(--color-dark-red);
			color: var(--color-dark-red);
		}
	}

	@media screen and (width < 48rem) {
		margin-bottom: 2rem;
		align-items: center;

		> h2 {
			font-size: var(--h3);
		}

		> a {
			font-size: var(--text-2xl);
			padding: 0.25rem 0.15rem;
			aspect-ratio: 1/1;
			border-radius: 4rem;
			border: 3px solid transparent;
			transition: all 200ms ease-in-out;

			&:hover, &:focus-visible {
				color: var(--color-dark-blue);
				border: 3px solid var(--color-dark-blue);
			}

			> span {
				position: absolute;
				width: 1px;
				height: 1px;
				padding: 0;
				margin: -1px;
				overflow: hidden;
				clip: rect(0, 0, 0, 0);
				white-space: nowrap;
				border-width: 0;
			}
		}
	}
}

.aa-events-calendar-today-btn {
	background: var(--color-dark-blue);
	border-radius: 4rem;
	color: var(--color-white);
	display: inline-block;
	font-weight: bold;
	padding: 0.5rem 1.5rem;
	text-decoration: none;
	text-transform: uppercase;

	@media screen and (width < 48rem) {
		font-size: var(--text-sm);
		margin-bottom: 1.5rem;
	}
}

.aa-events-calendar-today-btn:hover,
.aa-events-calendar-today-btn:focus-visible {
	background: var(--color-darker-blue);
}

.aa-events-calendar-today-btn:focus-visible {
	outline: 3px solid var(--color-teal);
	outline-offset: 2px;
}

.aa-events-calendar-grid {
	background-color: var(--color-white);
	border-radius: 0.875rem;
	box-shadow: var(--shadow-main);
	margin-bottom: 5rem;
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
	table-layout: fixed;
	width: 100%;
}

.aa-events-calendar-weekdays {
	display: table-row;
}

.aa-events-calendar-weekday {
	background-color: var(--color-dark-blue);
	border-bottom: 2px solid var(--color-light-blue);
	border-right: 2px solid var(--color-light-blue);
	color: var(--color-white);
	font-size: var(--text-lg);
	font-weight: 700;
	min-width: 0;
	overflow: hidden;
	padding: 0.625rem 0.25rem;
	text-align: center;
	text-transform: uppercase;

	&:first-child,
	&:last-child {
		background-color: var(--color-darker-blue);
	}

	&:last-child {
		border-right: none;
	}
}

.aa-events-calendar-weekday abbr {
	text-decoration: none;
}

.aa-events-calendar-week {
	border-top: 2px solid var(--color-light-blue);
	display: table-row;
	position: relative;
}

.aa-events-calendar-day {
	border-right: 2px solid var(--color-light-blue);
	height: calc(9.375rem + (var(--aa-event-lanes, 1) * 2rem));
	min-width: 0;
	padding: 0.5rem;
	position: relative;
	vertical-align: top;

	&:nth-child(7n) {
		border-right: none;
	}
}

.aa-events-calendar-day .day-number {
	color: var(--color-dark-blue);
	display: block;
	font-size: var(--text-base);
	font-weight: 700;
	margin-bottom: 0.3125rem;
	width: fit-content;
}

.aa-events-calendar-day.is-outside-month {
	background: color-mix(in srgb, var(--color-light-blue) 12%, white);
}

.aa-events-calendar-day.today-cell {
	.day-number {
		aspect-ratio: 1 / 1;
		border: 2px solid var(--color-primary-red);
		border-radius: 4rem;
		color: var(--color-primary-red);
		height: 2rem;
		padding: 0.2rem 0.3rem;
		text-align: center;
		width: 2rem;
		font-size: var(--text-sm);
	}

	.aa-events-calendar-event {
		top: calc(2.625rem + (var(--aa-event-lane, 0) * 2rem));
	}
}

.aa-events-calendar-event {
	align-items: center;
	background: var(--color-primary-200);
	border-radius: 0.15rem;
	box-sizing: border-box;
	color: var(--color-primary-red);
	display: flex;
	gap: 0.25rem;
	height: 1.5rem;
	left: 0.2rem;
	line-height: 1.3;
	letter-spacing: 0.1rem;
	min-width: 0;
	overflow: hidden;
	padding: 0.2rem 0.7rem 0.2rem 0.9rem;
	position: absolute;
	text-decoration: none;
	top: calc(2.25rem + (var(--aa-event-lane) * 2rem));
	text-transform: uppercase;
	white-space: nowrap;
	width: calc((100% * var(--aa-event-span)) - 0.4rem);
	z-index: 1;
}

.today-cell .aa-events-calendar-event {
	top: calc(3rem + (var(--aa-event-lane) * 1.75rem));
}

.aa-events-calendar-event > span:not(.aa-events-calendar-continuation) {
	font-size: var(--text-xs);
	font-weight: 600;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.aa-events-calendar-event.is-continuing-before {
	border-bottom-left-radius: 0;
	border-top-left-radius: 0;
}

.aa-events-calendar-event.is-continuing-after {
	border-bottom-right-radius: 0;
	border-top-right-radius: 0;
}

.aa-events-calendar-continuation {
	flex: 0 0 auto;
	font-weight: bold;
	line-height: 1;
}

.aa-events-calendar-event:hover,
.aa-events-calendar-event.is-occurrence-active {
	background: var(--color-light-blue);
	color: var(--color-dark-blue);
}

.aa-events-calendar-event:focus-visible {
	background: var(--color-light-blue);
	color: var(--color-dark-blue);
	outline: 3px solid var(--color-dark-blue);
	outline-offset: 2px;
	z-index: 2;
}

.aa-events-calendar-agenda {
	display: none;
}

.aa-events-calendar-wrap.is-list-view .aa-events-calendar-desktop {
	display: none;
}

.aa-events-calendar-wrap.is-list-view .aa-events-calendar-agenda {
	display: block;
}

.aa-events-calendar-agenda-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.aa-events-calendar-agenda-heading {
	color: var(--color-black);
	font-size: var(--text-base);
	font-weight: 700;
	font-family: var(--font-sans);
	margin-bottom: 1rem;
}

.aa-events-calendar-agenda-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;

	@media screen and (width < 64rem ) {
		display: flex;
		flex-flow: column nowrap;
		gap: 1.5rem;
	}
}

.aa-events-agenda-item + .aa-events-agenda-item {
	margin-top: 0;
}

.aa-events-agenda-item {
	align-items: start;
	background-color: var(--color-white);
	border-radius: 0.75rem;
	box-shadow: var(--shadow-main);
	display: grid;
	gap: 1rem 2rem;
	grid-template-columns: minmax(0, 1fr) auto;
	height: 100%;
	padding: var(--space-8) var(--space-6);

	@media screen and (width < 48rem) {
		grid-template-columns: minmax(0, 1fr);
	}
}

.aa-events-agenda-main {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	min-width: 0;
}

.aa-events-agenda-status {
	align-items: flex-end;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;

	@media screen and (width < 48rem) {
		align-items: flex-start;
	}
}

.aa-events-agenda-item-title {
	flex: 1 1 0;
	font-size: var(--h5);
	text-transform: uppercase;
	display: block;
	margin-top: 0;
	margin-bottom: 0;
	overflow-wrap: anywhere;
	text-decoration: none;
}

.aa-events-agenda-badges {
	align-items: flex-start;
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: 0.5rem;
}

.aa-events-agenda-item > a:focus-visible {
	outline: 3px solid var(--color-dark-blue);
	outline-offset: 2px;
}

.aa-events-agenda-title,
.aa-events-agenda-item time {
	display: block;
	overflow-wrap: anywhere;
}

.aa-events-agenda-badge-blue,
.aa-events-agenda-badge-recurring {
	align-self: flex-start;
	font-size: var(--text-sm);
	font-style: italic;
	margin: 0;
	padding: 0.25rem 0.75rem;
	border-radius: 0.1875rem;
	width: fit-content;

	> i {
		font-size: 90%;
		margin-right: 0.25rem;
	}
}

.aa-events-agenda-badge-blue {
	background-color: var(--color-faded-blue);
	color: var(--color-dark-blue);
}

.aa-events-agenda-badge-recurring {
	background-color: var(--color-transparent-red);
	color: var(--color-primary-red);
}

.aa-events-agenda-title {
	font-size: var(--h5);
	font-family: var(--font-condensed);
	font-weight: 700;
	color: var(--color-dark-blue);
	text-wrap: balance;
	margin-bottom: 0;
}

.aa-events-agenda-item time, .aa-events-agenda-item span:not(.aa-events-agenda-title) {
	color: var(--color-primary);
    font-weight: 600;
    font-size: var(--text-sm);
    letter-spacing: 0.1rem;
    margin-bottom: 0;
    text-transform: uppercase;
}

.aa-events-agenda-item .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.aa-event-item .aa-event-details {
	border-top: 1px solid #333;
	margin-top: 1.25rem;
	padding-top: 1.25rem;

	div { margin-bottom: 0.625rem; }
}

/* Events archive layout */
.aa-events-wrap .aa-events-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Optional: responsive adjustments */
@media screen and (width < 64rem) {
	.aa-events-wrap .aa-events-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (width < 64rem) {
	.aa-events-wrap .aa-events-grid { grid-template-columns: 1fr; }

	.aa-events-calendar-view-switcher { display: none; }

	.aa-events-calendar-desktop { display: none; }

	.aa-events-calendar-agenda { display: block; }
}

.aa-events-wrap .entry-header:has(.entry-thumbnail),
.aa-events-wrap .entry-wrap:has(.entry-thumbnail) {
	display: flex;
	justify-content: space-between;

	.entry-thumbnail {
		margin-left: 2rem;
		width: 100%;

		img {
			height: auto;
			width: 100%;
			margin-bottom: 2rem;
		}
	}
}

.entry-details {
	width: 100%;
	padding: 1rem 0 2rem 0;

	.entry-details__flex-wrapper {
		display: flex;
		flex-flow: row wrap;
		gap: 3rem;
	}

		.entry-details__header {
		display: flex;
		flex-flow: row wrap;
		justify-content: flex-end;
		gap: 1rem;
		margin-bottom: 2rem;

		.aa-event-recurring {
			width: fit-content;
			background-color: var(--color-primary-100);
			padding: 0.5rem 1rem;
			border-radius: 0.1875rem;

			p {
				color: var(--color-primary-red);
				font-size: var(--text-2xl);
				font-weight: 700;
				font-family: var(--font-condensed);
				margin-bottom: 0;
			}
		}

		.aa-event-online {
			width: fit-content;
			background-color: var(--color-faded-blue);
			padding: 0.5rem 1rem;
			border-radius: 0.1875rem;

			p {
				color: var(--color-dark-blue);
				font-size: var(--text-2xl);
				font-weight: 700;
				font-family: var(--font-condensed);
				margin-bottom: 0;
			}
		}
	}

	.entry-details__date-list {
		width: fit-content;
		padding-right: 3rem;
		border-right: 2px solid var(--color-tan);
	}

	.entry-details__content {
		flex: 1;
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		align-items: start;
		column-gap: 4rem;
		row-gap: 2rem;

		@media screen and (width < 64rem) {
			display: flex;
			flex-flow: row wrap;
			justify-content: space-evenly;
			column-gap: 3rem;
		}

		@media screen and (width < 48rem) {
			display: flex!important;
			flex-flow: row wrap;
			justify-content: start;
			column-gap: 2rem;
		}

		@media screen and (width < 22rem) {
			flex-flow: column nowrap;
		}
	}

	.entry-details__item {
		display: flex;
		flex-flow: column nowrap;
		gap: 0.5rem;
		align-items: center;

		h3 {
			color: var(--color-darker-blue);
			font-weight: 700;
			font-size: var(--text-base);
			font-family: var(--font-sans);
			text-transform: uppercase;
			margin-bottom: 0;

			i {
				margin-right: 0.25rem;
			}
		}

		p {
			margin-top: 0;
			margin-bottom: 0;
		}
	}

	.aa-event-contact-email, .aa-event-contact-phone {
		a {
			color: var(--color-dark-blue);
			font-weight: 700;
			text-decoration: underline;
			text-underline-offset: 2px;
			text-decoration-thickness: 2px;
			padding: 0;
		}
	}

	.aa-event-recurrence-summary {
		font-size: var(--text-sm);
		font-weight: 700;
	}

	.aa-event-occurrence-list {
		/* list-style-type: none;
		margin-left: 0;
		margin-top: 0; */

		time {
			margin-bottom: 0.25rem;
			font-size: var(--text-sm);
		}
	}

	@media screen and (width < 48rem) {
	padding: 1rem 0 2rem 0;

	.entry-details__flex-wrapper {
		flex-flow: column nowrap;
		gap: 3rem;
	}

		.entry-details__header {
		justify-content: flex-start;
		gap: 1rem;
		margin-bottom: 1.5rem;

		.aa-event-recurring {
			h3 {
				font-size: var(--text-lg);
			}
		}

		.aa-event-online {
			h3 {
				font-size: var(--text-lg);
			}
		}
	}

	.entry-details__date-list {
		width: 100%;
		border-right: 0;
		padding-right: 0;
		border-bottom: 2px solid var(--color-tan);
		padding-bottom: 2rem;
	}

	.entry-details__content {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 2rem;
		row-gap: 2rem;
	}

	.entry-details__item {
		align-items: start;
	}
	}
}

/* "+N Events" overflow link inside a day cell. */
.aa-events-calendar-day-more-link {
	background: rgba(255, 255, 255, 0.92);
    color: var(--color-primary);
	display: inline-block;
	font-size: var(--text-sm);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.4;
	margin-top: calc(2.25rem + (var(--aa-event-lanes, 3) * 1rem) + 0.25rem);
	padding: 0.15rem 0.4rem;
	position: relative;
	text-decoration: none;
	z-index: 2;
}

.aa-events-calendar-day-more-link:hover,
.aa-events-calendar-day-more-link:focus-visible {
	color: var(--color-dark-red);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.aa-events-calendar-day-more-link:focus-visible {
	outline: 3px solid var(--color-teal);
	outline-offset: 2px;
}

/* Day view (rendered when ?aa_day=YYYY-MM-DD is set on the calendar page). */
.aa-events-calendar-day-view {
	margin-top: 0.5rem;

	h2 {
		color: var(--color-primary-red);
		text-align: center;

		@media screen and (width < 64rem) {
			text-align: right;
		}
	}

	.aa-events-calendar-day-nav {
		margin: 4rem 0;

		.aa-events-calendar-day-back {
			color: var(--color-white);
			font-size: var(--text-base);
			font-weight: 700;
			background-color: var(--color-dark-blue);
			padding: 0.45rem 1.75rem;
			border-radius: 4rem;
			text-transform: uppercase;
			text-decoration: none;
			transition: background-color 200ms ease-in-out;

			&:hover, &:focus-visible {
				background-color: var(--color-darker-blue);
			}

			&:focus-visible {
				outline: 3px solid var(--color-teal);
				outline-offset: 2px;
			}
		}

		.aa-events-calendar-day-prev, .aa-events-calendar-day-next {
			color: var(--color-primary-red);
			font-weight: 700;
			font-size: var(--text-lg);
			text-decoration: none;
			padding-bottom: 0.15rem;
			border-bottom: 3px solid transparent;
			transition: all 200ms ease-in-out;

			&:hover, &:focus-visible {
				color: var(--color-dark-red);
				border-color: var(--color-dark-red);
			}

			&:focus-visible {
				outline: 3px solid var(--color-teal);
				outline-offset: 2px;
			}
		}
	}
}

.aa-events-calendar-day-nav {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	justify-content: space-between;
	margin-bottom: 1rem;
}

.aa-events-calendar-day-prev,
.aa-events-calendar-day-next,
.aa-events-calendar-day-back {
	text-decoration: none;
}

.aa-events-calendar-day-prev:hover,
.aa-events-calendar-day-prev:focus-visible,
.aa-events-calendar-day-next:hover,
.aa-events-calendar-day-next:focus-visible,
.aa-events-calendar-day-back:hover,
.aa-events-calendar-day-back:focus-visible {
	text-decoration: underline;
}

.aa-events-calendar-day-prev:focus-visible,
.aa-events-calendar-day-next:focus-visible,
.aa-events-calendar-day-back:focus-visible {
	outline: 3px solid var(--color-teal);
	outline-offset: 2px;
}

/* Day view uses the same agenda card markup as the list view, so the existing
   .aa-events-calendar-agenda-list / .aa-events-agenda-item rules apply. */

/* Hide the Today button on the day view — Prev/Next already covers navigation. */
.aa-events-calendar-wrap:has(.aa-events-calendar-day-view) .aa-events-calendar-today-link {
	display: none;
}

.aa-event-show-more {
	background-color: transparent;
	border-bottom: 2px solid transparent;
	padding: 0.25rem 0 0.15rem 0;
	border-radius: 0;
	font-size: var(--text-base);
	font-weight: 700;
	color: var(--color-primary-red);
	
	&:hover, &:focus-visible {
		color: var(--color-dark-red);
		border-bottom: 2px solid var(--color-dark-red);
	}
}