/*
 * Iguana Events — calendar UI.
 * Every color and radius below is a CSS variable so the theme can restyle
 * the whole calendar without touching plugin files:
 *
 *   :root {
 *     --igev-accent: #b3452a;
 *     --igev-cat-1: #b3452a;   (event type colors, assigned in order)
 *     --igev-cal-border: #eee;
 *     ...
 *   }
 */

.igev-calendar {
	--igev-cal-border: rgba(0, 0, 0, 0.1);
	--igev-cal-bg: transparent;
	--igev-cal-cell-bg: transparent;
	--igev-cal-outside: rgba(0, 0, 0, 0.03);
	--igev-cal-today: color-mix(in srgb, var(--igev-accent, #b3452a) 10%, transparent);
	--igev-cal-radius: 12px;
	--igev-cat-1: var(--igev-accent, #b3452a);
	--igev-cat-2: #2a6f4e;
	--igev-cat-3: #b3892a;
	--igev-cat-4: #57402e;
	--igev-cat-5: #7a3b63;
	--igev-cat-6: #33566e;

	margin: 0 0 3rem;
	background: var(--igev-cal-bg);
}

/* ---------- toolbar ---------- */

.igev-cal__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	margin-bottom: 1rem;
}

.igev-cal__nav {
	display: flex;
	gap: 0.35rem;
}

.igev-cal__nav-btn,
.igev-cal__view,
.igev-cal__chip {
	appearance: none;
	background: transparent;
	border: 1.5px solid var(--igev-cal-border);
	border-radius: 999px;
	padding: 0.35rem 0.8rem;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	color: inherit;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}

.igev-cal__nav-btn:active,
.igev-cal__view:active,
.igev-cal__chip:active {
	transform: translateY(1px) scale(.98);
}

@media (hover: hover) and (pointer: fine) {
	.igev-cal__nav-btn:hover,
	.igev-cal__view:hover,
	.igev-cal__chip:hover {
		border-color: var(--igev-accent, #b3452a);
		color: var(--igev-accent, #b3452a);
	}
}

.igev-cal__label {
	margin: 0;
	font-size: 1.4rem;
	line-height: 1;
}

.igev-cal__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-left: auto;
}

.igev-cal__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.igev-cal__chip.is-active,
.igev-cal__view.is-active {
	background: var(--igev-accent, #b3452a);
	border-color: var(--igev-accent, #b3452a);
	color: #fff;
}

/* Active chips take their own category color */
.igev-cal__chip.igev-cat-1.is-active { background: var(--igev-cat-1); border-color: var(--igev-cat-1); }
.igev-cal__chip.igev-cat-2.is-active { background: var(--igev-cat-2); border-color: var(--igev-cat-2); }
.igev-cal__chip.igev-cat-3.is-active { background: var(--igev-cat-3); border-color: var(--igev-cat-3); }
.igev-cal__chip.igev-cat-4.is-active { background: var(--igev-cat-4); border-color: var(--igev-cat-4); }
.igev-cal__chip.igev-cat-5.is-active { background: var(--igev-cat-5); border-color: var(--igev-cat-5); }
.igev-cal__chip.igev-cat-6.is-active { background: var(--igev-cat-6); border-color: var(--igev-cat-6); }

.igev-cal__views {
	display: flex;
	gap: 0.35rem;
}

/* ---------- month grid ---------- */

.igev-cal__gridwrap {
	overflow-x: auto;
}

.igev-cal__grid {
	border: 1px solid var(--igev-cal-border);
	border-radius: var(--igev-cal-radius);
	overflow: hidden;
	min-width: 640px;
}

/* Rows exist so the grid can expose real role="row" semantics. */
.igev-cal__row {
	display: grid;
	grid-template-columns: repeat(7, minmax(90px, 1fr));
}

.igev-cal__dow {
	padding: 0.5rem 0.5rem 0.4rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;
	border-bottom: 1px solid var(--igev-cal-border);
	opacity: 0.7;
}

.igev-cal__cell {
	min-height: 108px;
	padding: 0.35rem;
	background: var(--igev-cal-cell-bg);
	border-right: 1px solid var(--igev-cal-border);
	border-bottom: 1px solid var(--igev-cal-border);
}

.igev-cal__cell:last-child {
	border-right: none;
}

.igev-cal__row:last-child .igev-cal__cell {
	border-bottom: none;
}

/* Keyboard focus must be obvious — the roving tabindex lands here. */
.igev-cal__cell:focus-visible {
	outline: 2px solid var(--igev-accent, #b3452a);
	outline-offset: -2px;
	position: relative;
	z-index: 1;
}

.igev-cal__cell.is-outside {
	background: var(--igev-cal-outside);
}

.igev-cal__cell.is-outside .igev-cal__daynum {
	opacity: 0.4;
}

.igev-cal__cell.is-today {
	background: var(--igev-cal-today);
}

.igev-cal__daynum {
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 600;
	margin: 0.1rem 0.2rem 0.3rem;
}

.igev-cal__cell.is-today .igev-cal__daynum {
	color: var(--igev-accent, #b3452a);
}

.igev-cal__event {
	display: block;
	margin: 0 0 3px;
	padding: 0.2rem 0.45rem;
	border-radius: 6px;
	border-left: 3px solid var(--igev-cat-1);
	background: color-mix(in srgb, var(--igev-cat-1) 12%, transparent);
	color: inherit;
	font-size: 0.78rem;
	line-height: 1.3;
	text-decoration: none;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

.igev-cal__event-inner {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.igev-cal__event.igev-cat-2 { border-left-color: var(--igev-cat-2); background: color-mix(in srgb, var(--igev-cat-2) 12%, transparent); }
.igev-cal__event.igev-cat-3 { border-left-color: var(--igev-cat-3); background: color-mix(in srgb, var(--igev-cat-3) 12%, transparent); }
.igev-cal__event.igev-cat-4 { border-left-color: var(--igev-cat-4); background: color-mix(in srgb, var(--igev-cat-4) 12%, transparent); }
.igev-cal__event.igev-cat-5 { border-left-color: var(--igev-cat-5); background: color-mix(in srgb, var(--igev-cat-5) 12%, transparent); }
.igev-cal__event.igev-cat-6 { border-left-color: var(--igev-cat-6); background: color-mix(in srgb, var(--igev-cat-6) 12%, transparent); }

@media (hover: hover) and (pointer: fine) {
	.igev-cal__event:hover { background: color-mix(in srgb, var(--igev-cat-1) 24%, transparent); }
	.igev-cal__event.igev-cat-2:hover { background: color-mix(in srgb, var(--igev-cat-2) 24%, transparent); }
	.igev-cal__event.igev-cat-3:hover { background: color-mix(in srgb, var(--igev-cat-3) 24%, transparent); }
	.igev-cal__event.igev-cat-4:hover { background: color-mix(in srgb, var(--igev-cat-4) 24%, transparent); }
	.igev-cal__event.igev-cat-5:hover { background: color-mix(in srgb, var(--igev-cat-5) 24%, transparent); }
	.igev-cal__event.igev-cat-6:hover { background: color-mix(in srgb, var(--igev-cat-6) 24%, transparent); }
}

/* ---------- list view ---------- */

.igev-cal__list-day {
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--igev-cal-border);
}

.igev-cal__list-date {
	margin: 0 0 0.5rem;
	font-size: 1rem;
}

.igev-cal__list-day.is-today .igev-cal__list-date {
	color: var(--igev-accent, #b3452a);
}

.igev-cal__list-event {
	display: flex;
	gap: 1rem;
	align-items: baseline;
	padding: 0.45rem 0.6rem;
	margin: 0 0 2px;
	border-radius: 8px;
	border-left: 3px solid var(--igev-cat-1);
	background: color-mix(in srgb, var(--igev-cat-1) 8%, transparent);
	color: inherit;
	text-decoration: none;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
	.igev-cal__list-event:hover {
		background: color-mix(in srgb, var(--igev-cat-1) 18%, transparent);
	}
}

.igev-cal__list-event.igev-cat-2 { border-left-color: var(--igev-cat-2); background: color-mix(in srgb, var(--igev-cat-2) 8%, transparent); }
.igev-cal__list-event.igev-cat-3 { border-left-color: var(--igev-cat-3); background: color-mix(in srgb, var(--igev-cat-3) 8%, transparent); }
.igev-cal__list-event.igev-cat-4 { border-left-color: var(--igev-cat-4); background: color-mix(in srgb, var(--igev-cat-4) 8%, transparent); }
.igev-cal__list-event.igev-cat-5 { border-left-color: var(--igev-cat-5); background: color-mix(in srgb, var(--igev-cat-5) 8%, transparent); }
.igev-cal__list-event.igev-cat-6 { border-left-color: var(--igev-cat-6); background: color-mix(in srgb, var(--igev-cat-6) 8%, transparent); }

.igev-cal__list-time {
	flex: 0 0 5.5rem;
	font-size: 0.85rem;
	font-weight: 600;
	opacity: 0.8;
}

.igev-cal__list-title {
	display: block;
	font-weight: 600;
}

.igev-cal__list-loc {
	display: block;
	font-size: 0.85rem;
	opacity: 0.7;
}

/* ---------- event detail popover ---------- */

.igev-pop {
	position: fixed;
	z-index: 9999;
	--igev-cat-1: var(--igev-accent, #b3452a);
	--igev-cat-2: #2a6f4e;
	--igev-cat-3: #b3892a;
	--igev-cat-4: #57402e;
	--igev-cat-5: #7a3b63;
	--igev-cat-6: #33566e;
}

.igev-pop__card {
	position: relative;
	width: 340px;
	max-width: calc(100vw - 16px);
	max-height: min(70vh, 560px);
	overflow-y: auto;
	background: var(--igev-pop-bg, #fff);
	color: var(--igev-pop-text, #222);
	border-radius: var(--igev-cal-radius, 12px);
	border-top: 4px solid var(--igev-cat-1);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
	animation: igev-pop-in 0.16s ease-out;
}

.igev-pop__card.igev-cat-2 { border-top-color: var(--igev-cat-2); }
.igev-pop__card.igev-cat-3 { border-top-color: var(--igev-cat-3); }
.igev-pop__card.igev-cat-4 { border-top-color: var(--igev-cat-4); }
.igev-pop__card.igev-cat-5 { border-top-color: var(--igev-cat-5); }
.igev-pop__card.igev-cat-6 { border-top-color: var(--igev-cat-6); }

@keyframes igev-pop-in {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}

/* Bottom sheet on mobile */
.igev-pop.is-sheet {
	inset: auto 0 0 0;
}

.igev-pop.is-sheet .igev-pop__card {
	width: 100%;
	max-width: none;
	border-radius: var(--igev-cal-radius, 12px) var(--igev-cal-radius, 12px) 0 0;
	animation: igev-sheet-in 0.2s ease-out;
}

@keyframes igev-sheet-in {
	from { transform: translateY(30%); opacity: 0.5; }
	to { transform: none; opacity: 1; }
}

.igev-pop__close {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 1;
	appearance: none;
	border: none;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
	.igev-pop__close:hover {
		background: rgba(0, 0, 0, 0.65);
	}
}

.igev-pop__media img {
	display: block;
	width: 100%;
	height: 150px;
	object-fit: cover;
}

.igev-pop__body {
	padding: 1rem 1.15rem 1.15rem;
}

.igev-pop__type {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--igev-accent, #b3452a);
	margin-bottom: 0.25rem;
}

.igev-pop__title {
	margin: 0 0 0.4rem;
	font-size: 1.15rem;
	line-height: 1.25;
	padding-right: 1.5rem;
}

.igev-pop__when {
	margin: 0 0 0.15rem;
	font-size: 0.9rem;
	font-weight: 600;
}

.igev-pop__loc {
	margin: 0 0 0.5rem;
	font-size: 0.85rem;
	opacity: 0.7;
}

.igev-pop__excerpt {
	margin: 0.5rem 0 0;
	font-size: 0.9rem;
	line-height: 1.5;
}

.igev-pop__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.9rem;
}

.igev-pop__btn {
	display: inline-block;
	padding: 0.45rem 0.95rem;
	border: 1.5px solid var(--igev-accent, #b3452a);
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--igev-accent, #b3452a);
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

.igev-pop__btn--primary {
	background: var(--igev-accent, #b3452a);
	color: #fff;
}

@media (hover: hover) and (pointer: fine) {
	.igev-pop__btn:hover {
		background: color-mix(in srgb, var(--igev-accent, #b3452a) 12%, transparent);
	}

	.igev-pop__btn--primary:hover {
		background: color-mix(in srgb, var(--igev-accent, #b3452a) 85%, #000);
		color: #fff;
	}
}

/* ---------- states ---------- */

/* ---------- motion ----------
   The body is a single swap surface: the outgoing view is pinned absolutely
   while the incoming one slides in, so navigation reads as a swipe in every
   view and the page never collapses mid-transition. */

.igev-cal__body {
	position: relative;
	transition: height 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.igev-cal__body.is-swapping {
	overflow: hidden;
}

.igev-cal__body.is-swapping > * {
	will-change: transform, opacity;
}

/* The leaving view is taken out of flow so both frames overlap. */
.igev-cal__body.is-swapping > .igev-leave {
	position: absolute;
	inset: 0 0 auto 0;
}

.igev-enter,
.igev-leave {
	transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
	            opacity 0.26s ease;
}

/* Incoming: start offset in the direction of travel, then settle to rest. */
.igev-enter--next { transform: translate3d(3.5%, 0, 0); opacity: 0; }
.igev-enter--prev { transform: translate3d(-3.5%, 0, 0); opacity: 0; }
.igev-enter--fade { opacity: 0; }

/* Outgoing: continue the same direction and fade out. */
.igev-leave-active.igev-leave--next { transform: translate3d(-3.5%, 0, 0); opacity: 0; }
.igev-leave-active.igev-leave--prev { transform: translate3d(3.5%, 0, 0); opacity: 0; }
.igev-leave-active.igev-leave--fade { opacity: 0; }

/* First paint. */
.igev-is-entering {
	opacity: 0;
	transform: translate3d(0, 8px, 0);
}

.igev-cal__body > *:not(.igev-is-entering) {
	transition: opacity 0.34s ease, transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Event chips cascade in on the very first render only. */
.igev-stagger-in {
	animation: igev-chip-in 0.34s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
	animation-delay: var(--igev-stagger, 0ms);
}

@keyframes igev-chip-in {
	from { opacity: 0; transform: translate3d(0, 5px, 0) scale(0.985); }
	to   { opacity: 1; transform: none; }
}

/* Live drag feedback: no transition while the finger is down. */
.igev-cal__body.is-dragging > * {
	transition: none;
}

/* The list has nothing to scroll sideways, so it can own the horizontal axis
   and hand it to the swipe handler. The month grid is horizontally scrollable
   on narrow screens, so it must keep native panning — swiping there is
   handled by the JS only once the grid is already scrolled to an edge. */
.igev-cal__list {
	touch-action: pan-y;
}

/* ---------- skeleton ----------
    Mirrors the real 7x6 grid so the swap to live data doesn't reflow. */

.igev-cal__skeleton {
	overflow-x: auto;
	overscroll-behavior-x: contain;
}

.igev-cal__skeleton-grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(90px, 1fr));
	border: 1px solid var(--igev-cal-border);
	border-radius: var(--igev-cal-radius);
	overflow: hidden;
	min-width: 640px;
}

.igev-cal__skeleton-dow {
	height: 33px;
	border-bottom: 1px solid var(--igev-cal-border);
	background: var(--igev-cal-outside);
}

.igev-cal__skeleton-cell {
	min-height: 108px;
	border-right: 1px solid var(--igev-cal-border);
	border-bottom: 1px solid var(--igev-cal-border);
}

.igev-cal__skeleton-cell:nth-child(7n) {
	border-right: none;
}

.igev-cal__skeleton-row {
	height: 64px;
	margin-bottom: 8px;
	border-radius: 8px;
	background: var(--igev-cal-outside);
}

.igev-cal__skeleton-cell,
.igev-cal__skeleton-row,
.igev-cal__skeleton-dow {
	background-image: linear-gradient(100deg, transparent 40%, rgba(0, 0, 0, 0.045) 50%, transparent 60%);
	background-size: 200% 100%;
	animation: igev-shimmer 1.25s linear infinite;
}

@keyframes igev-shimmer {
	to { background-position: -200% 0; }
}

/* Visually hidden live region for month/view announcements. */
.igev-cal__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* "Today" reads as an active state when the view is already on this month. */
.igev-cal__today.is-active {
	background: var(--igev-accent, #b3452a);
	border-color: var(--igev-accent, #b3452a);
	color: #fff;
}

/* Respect the user's motion preference: keep state changes, drop the movement. */
@media (prefers-reduced-motion: reduce) {
	.igev-cal__body,
	.igev-enter,
	.igev-leave,
	.igev-cal__body > * {
		transition: none !important;
	}

	.igev-enter--next,
	.igev-enter--prev,
	.igev-enter--fade,
	.igev-is-entering {
		transform: none !important;
		opacity: 1 !important;
	}

	.igev-stagger-in {
		animation: none !important;
	}

	.igev-cal__skeleton-cell,
	.igev-cal__skeleton-row,
	.igev-cal__skeleton-dow,
	.igev-pop__card,
	.igev-pop.is-sheet .igev-pop__card {
		animation: none !important;
	}
}

.igev-cal__error,
.igev-cal__empty {
	padding: 2rem 0;
	opacity: 0.75;
}

/* ---------- mobile ---------- */

@media (max-width: 640px) {
	.igev-cal__toolbar {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		gap: 12px;
	}

	.igev-cal__label {
		grid-column: 1 / -1;
		grid-row: 1;
		width: auto;
	}

	.igev-cal__nav {
		grid-column: 1;
		grid-row: 2;
		justify-self: start;
	}

	.igev-cal__controls {
		display: contents;
		margin-left: 0;
	}

	.igev-cal__views {
		grid-column: 3;
		grid-row: 2;
		justify-self: end;
	}

	.igev-cal__chips {
		grid-column: 1 / -1;
		grid-row: 3;
		width: 100%;
	}

	.igev-cal__nav-btn,
	.igev-cal__view,
	.igev-cal__chip {
		min-height: 44px;
	}

	.igev-cal__cell {
		min-height: 76px;
	}

	.igev-cal__list-event {
		flex-direction: column;
		gap: 0.1rem;
	}

	.igev-cal__list-time {
		flex-basis: auto;
	}
}