/* Owambe Connect — Horizontal scroll affordance
 *
 * Two nav strips scroll sideways with their scrollbar deliberately hidden: the
 * guest event-page section nav (.oc-event-nav__links) and the vendor-profile
 * section nav (.oc-vp-nav). Once either ran wider than the viewport there was
 * nothing at all on screen to say more tabs existed. Client feedback, Aug 2026:
 * "The functions are not easily noticeable as being scrollable. Are we able to
 * give a clear visual indication that additional tabs are available."
 *
 * Mechanism: oc-frontend.js appends one zero-width element to each end of the
 * strip's flex rail. They are `position: sticky`, so they pin to the scroller's
 * visible left/right edges while the tabs scroll underneath them — no wrapper
 * element, so neither strip's existing layout (a sticky flex bar in one case, a
 * centred fit-content bubble in the other) has to change. Each anchors a fade
 * and an arrow, revealed only on the side that actually has more content, so a
 * strip whose tabs already fit shows nothing.
 *
 * Everything here is inert until that JS adds .oc-shint: with JS off the strip
 * still scrolls natively by touch and by keyboard focus, exactly as before.
 */

/* Zero width so the anchors never displace a tab. JS cancels the rail's
   column-gap with a negative margin, measured rather than hard-coded, so a
   future strip with different spacing stays aligned too. */
.oc-shint__edge {
	position: sticky;
	z-index: 3;
	flex: 0 0 0px;
	width: 0;
	align-self: stretch;
	pointer-events: none;
}

.oc-shint__edge--start { left: 0; }
.oc-shint__edge--end   { right: 0; }

/* The fade and arrow hang outside the zero-width anchor, overlaying the tabs. */
.oc-shint__fade {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 48px;
	opacity: 0;
	transition: opacity .18s ease;
}

/* Fading to `transparent` rather than an rgba(...,0) of the same hue: browsers
   interpolate gradients in premultiplied space, so this stays neutral instead
   of drifting grey through the middle stops. */
.oc-shint__edge--start .oc-shint__fade {
	left: 0;
	background: linear-gradient(to right, var(--oc-shint-bg, #fff), transparent);
}

.oc-shint__edge--end .oc-shint__fade {
	right: 0;
	background: linear-gradient(to left, var(--oc-shint-bg, #fff), transparent);
}

.oc-shint__btn {
	position: absolute;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin: 0;
	margin-top: -14px;
	padding: 0;
	border: 1px solid var(--oc-shint-border, rgba(45, 30, 35, .14));
	border-radius: 50%;
	background: var(--oc-shint-btn-bg, #fff);
	color: var(--oc-shint-fg, #6E0F2C);
	opacity: 0;
	cursor: pointer;
	transition: opacity .18s ease, background .18s ease, transform .18s ease;
	box-shadow: 0 2px 8px rgba(45, 30, 35, .16);
}

.oc-shint__edge--start .oc-shint__btn { left: 2px; }
.oc-shint__edge--end   .oc-shint__btn { right: 2px; }

.oc-shint__btn:hover { background: var(--oc-shint-fg, #6E0F2C); color: #fff; }
.oc-shint__btn:active { transform: scale(.92); }

/* Reveal per side — only the edge with more content behind it lights up. */
.oc-shint.can-start .oc-shint__edge--start .oc-shint__fade,
.oc-shint.can-end   .oc-shint__edge--end   .oc-shint__fade {
	opacity: 1;
}

.oc-shint.can-start .oc-shint__edge--start .oc-shint__btn,
.oc-shint.can-end   .oc-shint__edge--end   .oc-shint__btn {
	opacity: 1;
	pointer-events: auto;
}

/* Touch devices get the fade only. There is nothing to click towards when the
   natural gesture is a swipe, and a tap target sitting on top of the first tab
   would cost more than it gives. */
@media (hover: none) {
	.oc-shint__btn { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.oc-shint__fade,
	.oc-shint__btn { transition: none; }
	.oc-shint__btn:active { transform: none; }
}