/*
 * **********************************************************************
 * Upcoming Events — site-wide floating panel / drawer
 *
 * Desktop: an always-visible panel floated in the margin beside the
 * boxed content column, draggable by its header to wherever the visitor
 * prefers (drag logic lives in inc/upcoming-events.php; this file only
 * supplies the grab/grabbing cursor and drag-state styling), and
 * dismissible via a close button down to a drawer tab docked at the
 * right margin. Phones/tablets: a slide-in/out drawer docked to the
 * right edge — not draggable, since the tab already handles positioning
 * there. Loaded on every page except the /events/ iframe (see
 * inc/upcoming-events.php).
 *
 * @version  1.4.2
 * @updated  2026-09-03
 * **********************************************************************
 */

/* =============================================================================
   Upcoming Events panel
   ============================================================================= */

/* Fixed to the viewport so it floats in the page margin rather than
   scrolling away with the page. Below 1500px (see the mobile/tablet
   drawer block further down) there's no longer clear margin beside the
   boxed content column to float it into, so it switches to a slide-in/out
   drawer docked to the right edge instead.

   Also note this base rule includes `animation: hp-classes-in`, which the
   drawer breakpoint overrides to `none` — the entrance fade only makes
   sense for the always-visible desktop panel; the drawer's own open/close
   transition covers that job below 1500px instead.

   `right: 20px` here is only the pre-JS fallback position — the inline
   script in inc/upcoming-events.php measures the boxed content column
   (.content-bg) and repoints this to `left` so the panel sits centered in
   whatever margin is actually left over, since Kadence's content width is
   a customizer setting this stylesheet has no fixed value for. */
.hp-classes {
	position: fixed;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	z-index: 500;
	width: 340px;
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	background: rgba(255, 255, 255, 0.96);
	border-radius: var(--mah-radius-lg);
	border-top: 4px solid var(--mah-header-bg);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
	animation: hp-classes-in .4s ease .2s both;
}

@keyframes hp-classes-in {
	from { opacity: 0; transform: translate(24px, -50%); }
	to   { opacity: 1; transform: translate(0, -50%); }
}

.hp-classes__header {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex-shrink: 0;
	background: var(--mah-header-bg);
	color: var(--mah-white);
	padding: .85rem 1rem;
	border-radius: var(--mah-radius-lg) var(--mah-radius-lg) 0 0;
	/* Drag handle on desktop (see inc/upcoming-events.php's pointerdown/
	   pointermove/pointerup handlers). touch-action: none stops the browser
	   from treating a pointer-down here as a page scroll gesture on touch
	   devices, so drags register cleanly instead of fighting native scroll. */
	cursor: grab;
	touch-action: none;
}

/* Applied for the duration of a drag (added/removed alongside the
   pointerdown/pointerup handlers in inc/upcoming-events.php). Swaps the
   cursor to "grabbing" and blocks text selection, which a fast drag would
   otherwise trigger on the header's text. */
.hp-classes--dragging {
	cursor: grabbing;
}

.hp-classes--dragging .hp-classes__header {
	cursor: grabbing;
}

.hp-classes--dragging,
.hp-classes--dragging * {
	user-select: none;
}

.hp-classes__icon {
	font-size: var(--mah-font-md2);
	line-height: 1;
}

.hp-classes__title {
	margin: 0;
	font-size: var(--mah-font-base-sm);
	font-weight: 700;
	letter-spacing: .01em;
	/* Kadence's own heading-color rule otherwise outranks the inherited
	   white from .hp-classes__header, since it targets h2 directly rather
	   than relying on inheritance. */
	color: var(--mah-white) !important;
}

/* Pushed to the header's far end by the title's margin; sits after the
   title in source order. */
.hp-classes__close {
	margin-left: auto;
	flex-shrink: 0;
	background: none;
	border: none;
	color: var(--mah-white);
	font-size: 1.4rem;
	line-height: 1;
	padding: 0 .1rem;
	cursor: pointer;
}

.hp-classes__list {
	list-style: none;
	margin: 0;
	padding: .9rem 1rem;
	display: flex;
	flex-direction: column;
	gap: .8rem;
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}

.hp-classes__link {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	padding-left: .75rem;
	border-left: 3px solid var(--mah-green);
	color: inherit;
	text-decoration: none;
	transition: border-color .15s ease;
}

.hp-classes__link:hover,
.hp-classes__link:focus-visible {
	border-left-color: var(--mah-green-mid);
}

.hp-classes__link:hover .hp-classes__name,
.hp-classes__link:focus-visible .hp-classes__name {
	color: var(--mah-green-mid);
	text-decoration: underline;
}

.hp-classes__name {
	font-weight: 700;
	font-size: var(--mah-font-sm);
	color: var(--mah-grey-900);
	line-height: 1.3;
	transition: color .15s ease;
}

.hp-classes__price {
	font-size: var(--mah-font-xs);
}

.hp-classes__price--paid {
	color: var(--mah-black);
	font-weight: 700;
}

.hp-classes__price--free {
	color: var(--mah-green);
}

.hp-classes__price--waitlist {
	color: var(--mah-red);
}

/* position: relative + the top margin make room for .hp-classes__category
   to float half-outside its top-right corner, overlapping the black
   background rather than sitting beside it on its own line. */
.hp-classes__when {
	position: relative;
	display: inline-block;
	margin-top: .55rem;
	padding: .25rem .5rem;
	background: var(--mah-black);
	color: var(--mah-white);
	font-size: var(--mah-font-sm2);
	font-weight: 700;
	border-radius: var(--mah-radius-sm);
	white-space: nowrap;
}

/* Class/Event pill -- same colour split as .mah-events-card__badge on the
   /events/ page (css/events-iframe.css) so the two listings read as one
   system. Positioned after the date text but pulled up out of normal flow
   so it floats above the black date badge's top-right corner instead of
   sitting flush beside it. */
.hp-classes__category {
	position: absolute;
	top: 0;
	right: .4rem;
	transform: translateY(-60%);
	display: inline-block;
	font-size: var(--mah-font-3xs);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: .2rem .45rem;
	border-radius: var(--mah-radius-pill);
	color: var(--mah-white);
	box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
	white-space: nowrap;
}

.hp-classes__category--class { background: var(--mah-green); }
.hp-classes__category--event { background: #1a5fa8; }

.hp-classes__badge {
	align-self: flex-start;
	font-size: var(--mah-font-3xs);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: .1rem .4rem;
	border-radius: var(--mah-radius-sm);
	background: #fdf3e7;
	color: #8a5200;
}

.hp-classes__badge--sold-out,
.hp-classes__badge--canceled {
	background: var(--mah-red-light);
	color: var(--mah-red-dark);
}

.hp-classes__footer {
	flex-shrink: 0;
	padding: .75rem 1rem;
	border-top: 1px solid var(--mah-grey-200);
}

.hp-classes__btn {
	display: block;
	text-align: center;
	padding: .55rem 1rem;
	background: var(--mah-green);
	color: var(--mah-white);
	font-size: var(--mah-font-xs);
	font-weight: 700;
	letter-spacing: .02em;
	text-decoration: none;
	border-radius: var(--mah-radius-md);
	transition: background .2s;
}

.hp-classes__btn:hover,
.hp-classes__btn:focus {
	background: var(--mah-green-mid);
	color: var(--mah-white);
}

/* =============================================================================
   Mobile/tablet slide-in drawer
   ============================================================================= */

/* Hidden on desktop — only meaningful once the panel becomes a drawer. */
.hp-classes__tab {
	display: none;
}

@media (max-width: 1499px) {
	/* Docked to the right edge and off-screen by default (shifted by its
	   own width via translateX(100%)) rather than floated in a content
	   gap — at this width there's no longer a gap to float into. The
	   entrance fade (animation, inherited from the base rule above) is
	   turned off since the drawer starts hidden; the transform transition
	   here is the only motion this breakpoint needs. */
	.hp-classes {
		right: 0;
		width: min(340px, 85vw);
		animation: none;
		transform: translateY(-50%) translateX(100%);
		transition: transform .3s ease;
	}

	.hp-classes.hp-classes--open {
		transform: translateY(-50%) translateX(0);
	}

	/* Dragging is desktop-only (see the DESKTOP_MIN guard in
	   inc/upcoming-events.php's pointerdown handler) — the header shouldn't
	   invite a drag gesture that won't do anything here. */
	.hp-classes__header {
		cursor: default;
		touch-action: auto;
	}

	/* Positioned just outside the panel's own left edge (left: -40px, its
	   own width). Because it's a child of .hp-classes, it rides along with
	   the panel's translateX — closed, that places it flush against the
	   viewport's right edge (a visible peeking tab); open, it sits at the
	   now-visible panel's left edge (a tab to slide it back out). Tall and
	   narrow rather than wide, since the "Events" label runs vertically
	   (see .hp-classes__tab span below) — the open state's ">" reverts to
	   normal horizontal orientation in that same box. */
	.hp-classes__tab {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 50%;
		left: -40px;
		transform: translateY(-50%);
		width: 40px;
		height: 80px;
		padding: 0;
		background: var(--mah-header-bg);
		color: var(--mah-white);
		font-size: var(--mah-font-sm);
		font-weight: 700;
		letter-spacing: .05em;
		border: none;
		border-radius: var(--mah-radius-md) 0 0 var(--mah-radius-md);
		box-shadow: -4px 0 12px rgba(0, 0, 0, .15);
		cursor: pointer;
	}

	/* Rotated to read bottom-to-top (rather than the writing-mode default
	   top-to-bottom) — the conventional orientation for a tab peeking from
	   the right edge. Only applied while closed; open, the tab shows a
	   plain ">" which reads better upright than sideways. */
	.hp-classes__tab span {
		writing-mode: vertical-rl;
		transform: rotate(180deg);
	}

	.hp-classes--open .hp-classes__tab span {
		writing-mode: horizontal-tb;
		transform: none;
	}
}

/* =============================================================================
   Desktop close/reopen — the close button collapses the always-visible
   panel down to just the drawer tab, docked at the right margin (the same
   tab element the mobile drawer above uses to reopen its own drawer).
   Scoped to the desktop breakpoint so it never overlaps the mobile
   drawer's own open/closed model just above.
   ============================================================================= */

@media (min-width: 1500px) {
	.hp-classes--closed {
		width: auto;
		background: transparent;
		border-top: none;
		border-radius: 0;
		box-shadow: none;
		animation: none;
	}

	.hp-classes--closed .hp-classes__header,
	.hp-classes--closed .hp-classes__list,
	.hp-classes--closed .hp-classes__footer {
		display: none;
	}

	.hp-classes--closed .hp-classes__tab {
		display: flex;
		align-items: center;
		justify-content: center;
		position: static;
		width: 40px;
		height: 80px;
		padding: 0;
		background: var(--mah-header-bg);
		color: var(--mah-white);
		font-size: var(--mah-font-sm);
		font-weight: 700;
		letter-spacing: .05em;
		border: none;
		border-radius: var(--mah-radius-md) 0 0 var(--mah-radius-md);
		box-shadow: -4px 0 12px rgba(0, 0, 0, .15);
		cursor: pointer;
	}

	.hp-classes--closed .hp-classes__tab span {
		writing-mode: vertical-rl;
		transform: rotate(180deg);
	}
}

/* =============================================================================
   Event detail popup
   ============================================================================= */

.hp-classes-modal {
	position: fixed;
	inset: 0;
	z-index: 99997;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	animation: hp-classes-modal-fade .2s ease;
}

.hp-classes-modal[hidden] {
	display: none;
}

@keyframes hp-classes-modal-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.hp-classes-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	cursor: pointer;
}

.hp-classes-modal__dialog {
	position: relative;
	z-index: 1;
	background: var(--mah-white);
	border-radius: var(--mah-radius-lg);
	max-width: 460px;
	width: 100%;
	max-height: 85vh;
	overflow-y: auto;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
	animation: hp-classes-modal-rise .25s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes hp-classes-modal-rise {
	from { transform: translateY(16px); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}

.hp-classes-modal__close {
	position: absolute;
	top: .6rem;
	right: .6rem;
	z-index: 2;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.45);
	color: var(--mah-white);
	border: none;
	border-radius: 50%;
	font-size: var(--mah-font-2xl);
	line-height: 1;
	cursor: pointer;
	transition: background .15s;
}

.hp-classes-modal__close:hover,
.hp-classes-modal__close:focus-visible {
	background: rgba(0, 0, 0, 0.7);
	outline: none;
}

.hp-classes-modal__image {
	display: block;
	width: 100%;
	height: 180px;
	object-fit: cover;
}

.hp-classes-modal__body {
	padding: 1.5rem;
}

.hp-classes-modal__badge {
	display: inline-block;
	margin-bottom: .5rem;
}

.hp-classes-modal__title {
	margin: 0 0 .4rem;
	font-family: var(--mah-font-display);
	font-size: var(--mah-font-lg2);
	font-weight: 700;
	color: var(--mah-green-dark);
	line-height: 1.3;
}

.hp-classes-modal__when {
	display: inline-block;
	margin: 0 0 .5rem;
	padding: .3rem .6rem;
	background: var(--mah-black);
	color: var(--mah-white);
	font-size: var(--mah-font-sm2);
	font-weight: 600;
	border-radius: var(--mah-radius-sm);
	white-space: nowrap;
}

.hp-classes-modal__location {
	margin: 0 0 .35rem;
	font-size: var(--mah-font-sm2);
	color: var(--mah-grey-500);
}

.hp-classes-modal__price {
	margin: 0 0 .35rem;
	font-size: var(--mah-font-sm2);
}

.hp-classes-modal__price--paid {
	color: var(--mah-black);
	font-weight: 700;
}

.hp-classes-modal__price--free {
	color: var(--mah-green);
}

.hp-classes-modal__price--waitlist {
	color: var(--mah-red);
}

.hp-classes-modal__desc {
	margin: .75rem 0 0;
	padding-top: .75rem;
	border-top: 1px solid var(--mah-grey-200);
	font-size: var(--mah-font-sm2);
	line-height: 1.65;
	color: var(--mah-grey-600);
}

.hp-classes-modal__btn {
	display: block;
	text-align: center;
	margin-top: 1.25rem;
	padding: .65rem 1rem;
	background: var(--mah-green);
	color: var(--mah-white);
	font-size: var(--mah-font-sm);
	font-weight: 700;
	letter-spacing: .02em;
	text-decoration: none;
	border-radius: var(--mah-radius-md);
	transition: background .2s;
}

.hp-classes-modal__btn:hover,
.hp-classes-modal__btn:focus {
	background: var(--mah-green-mid);
	color: var(--mah-white);
}

/* =============================================================================
   Reduced motion
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
	.hp-classes {
		animation: none;
		transition: none;
	}

	.hp-classes-modal,
	.hp-classes-modal__dialog {
		animation: none;
	}
}