/* George Dale - NFL Team Wheel */

.gd-team-wheel {
	position: fixed;
	top: 0;
	right: 0;
	width: 240px;
	height: 100vh;
	z-index: 100;
	box-sizing: border-box;   /* border must not widen the 240px footprint */
	background-color: var(--gd-surface);                /* on the field, not a white slab */
	border-left: 2px solid var(--gd-accent-yellow);
	/* lifts the panel off the page instead of looking pasted on */
	box-shadow: -18px 0 44px rgba(0, 0, 0, 0.45);
	overflow: hidden;
	overscroll-behavior: contain;
	touch-action: none;          /* we drive dragging ourselves via pointer events */
	-webkit-user-select: none;
	user-select: none;
	outline: none;
}

.gd-team-wheel:focus-visible {
	box-shadow: inset 0 0 0 2px var(--gd-accent-yellow);
}

/* Stage origin sits at the vertical middle; rows are offset from it by transform. */
.gd-team-wheel__stage {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 0;
}

.gd-team-wheel__row {
	position: absolute;
	left: 0;
	right: 0;
	height: 40px;
	margin-top: -20px;           /* half of row height, so translateY(0) is centered */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	box-sizing: border-box;
	color: var(--gd-contrast);
	text-decoration: none;
	white-space: nowrap;
	font-size: 20px;
	font-weight: 600;
	line-height: 1;
	will-change: transform, opacity;
}

.gd-team-wheel__row:hover,
.gd-team-wheel__row:focus {
	color: var(--gd-contrast);
	text-decoration: underline;
}

/* site.css still pins #gd-team-wheel's scrollbar to the old light panel;
   the id+class selector outranks it without touching site.css */
#gd-team-wheel.gd-team-wheel { scrollbar-color: var(--gd-border) var(--gd-surface); }

/* Pre-JS / no-JS fallback: a plain scrollable list of the same links. */
.gd-team-wheel__fallback {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 0;
	padding: 16px;
	box-sizing: border-box;
	list-style: none;
	overflow-y: auto;
	color: var(--gd-contrast);
	font-size: 14px;
	line-height: 1.7;
}

.gd-team-wheel__fallback a,
.gd-team-wheel__fallback a:link,
.gd-team-wheel__fallback a:visited,
.gd-team-wheel__fallback a:hover,
.gd-team-wheel__fallback a:focus {
	color: var(--gd-contrast);
	text-decoration: none;
}

.gd-team-wheel[data-ready="1"] .gd-team-wheel__fallback {
	display: none;
}

.gd-team-wheel:not([data-ready="1"]) .gd-team-wheel__stage {
	display: none;
}

/* Logged-in admins get the WP toolbar over the top of the viewport; keep the
   wheel underneath it instead of letting the toolbar clip the top rows. */
body.admin-bar .gd-team-wheel {
	top: 32px;
	height: calc(100vh - 32px);
}

/* Keep page content clear of the fixed wheel on desktop. */
@media (min-width: 783px) {
	body {
		padding-right: 260px;
	}
}

/* Hide entirely on phones/small tablets, and drop the offset with it. */
@media (max-width: 782px) {
	.gd-team-wheel {
		display: none !important;
	}

	body {
		padding-right: 0 !important;
	}
}