/*
 * Mangarama Genre Carousel — frontend styles.
 *
 * Every rule is scoped under .mangarama-genre-carousel so nothing here can
 * ever affect Madara's own .genres-content on the title page or any other
 * global selector. Sizing/color comes from CSS custom properties that the
 * plugin writes per-instance (see class-mgc-renderer.php); the values below
 * are only fallbacks and mirror the title-page genre pill
 * (.single-wp-manga .genres-content a) so the carousel matches it out of
 * the box even if a fallback is ever used.
 */

.mangarama-genre-carousel {
	--mgc-width: auto;
	--mgc-max-width: none;
	--mgc-margin-top: 16px;
	--mgc-margin-bottom: 16px;
	--mgc-bg: rgba(255, 255, 255, .045);
	--mgc-border-color: rgba(255, 255, 255, .13);
	--mgc-text-color: #eef1f5;
	--mgc-bg-hover: rgba(74, 118, 255, .15);
	--mgc-border-color-hover: rgba(74, 118, 255, .8);
	--mgc-text-color-hover: #ffffff;
	--mgc-item-height: 26px;
	--mgc-padding-x: 9px;
	--mgc-font-size: 13px;
	--mgc-gap: 8px;
	--mgc-radius: 6px;
	--mgc-border-width: 1px;
	--mgc-arrow-size: 36px;
	--mgc-arrow-offset: 8px;

	position: relative;
	box-sizing: border-box;
	display: block;
	width: var(--mgc-width);
	max-width: var(--mgc-max-width);
	margin-top: var(--mgc-margin-top);
	margin-bottom: var(--mgc-margin-bottom);
}

.mangarama-genre-carousel *,
.mangarama-genre-carousel *::before,
.mangarama-genre-carousel *::after {
	box-sizing: border-box;
}

.mangarama-genre-carousel--notice {
	font-size: 13px;
	opacity: .75;
}

.mangarama-genre-carousel__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	cursor: grab;
	/* Always instant at the CSS level: live drag and momentum coasting both
	   set scrollLeft directly every frame and must never be eased/animated
	   by the browser, or the drag feels heavy/laggy instead of 1:1 with the
	   pointer — exactly like native touch panning. The admin's "smooth
	   scroll" setting only animates the discrete arrow-click jump, applied
	   explicitly in frontend.js via scrollBy({behavior:'smooth'}), which
	   overrides this per call without affecting anything else. */
	scroll-behavior: auto;
	/* Native scroll stays fully functional (wheel/touch/keyboard) — only the
	   visible scrollbar track is hidden, on every engine. */
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* legacy Edge/IE */
}

.mangarama-genre-carousel__viewport::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

.mangarama-genre-carousel__viewport.is-dragging {
	cursor: grabbing;
	user-select: none;
}

.mangarama-genre-carousel__viewport.is-dragging,
.mangarama-genre-carousel__viewport.is-momentum {
	/* Scroll-snap "pulling" toward a snap point would fight live dragging
	   and our own momentum physics frame-by-frame; only settle into a snap
	   point once the carousel is actually at rest. */
	scroll-snap-type: none;
}

.mangarama-genre-carousel[data-mgc-snap="1"] .mangarama-genre-carousel__viewport {
	scroll-snap-type: x proximity;
}

.mangarama-genre-carousel[data-mgc-snap="1"] .mangarama-genre-carousel__slide {
	scroll-snap-align: start;
}

.mangarama-genre-carousel--has-arrows .mangarama-genre-carousel__viewport {
	padding-left: calc(var(--mgc-arrow-size) + var(--mgc-arrow-offset) + 6px);
	padding-right: calc(var(--mgc-arrow-size) + var(--mgc-arrow-offset) + 6px);
}

.mangarama-genre-carousel__track {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: var(--mgc-gap);
	width: max-content;
	min-width: 100%;
	margin: 0;
	padding: 2px 2px;
	list-style: none;
}

.mangarama-genre-carousel__slide {
	flex: 0 0 auto;
}

.mangarama-genre-carousel__item {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--mgc-item-height);
	padding: 0 var(--mgc-padding-x);
	border: var(--mgc-border-width) solid var(--mgc-border-color);
	border-radius: var(--mgc-radius);
	background: var(--mgc-bg);
	color: var(--mgc-text-color) !important;
	font-size: var(--mgc-font-size);
	font-weight: 600;
	line-height: 1.25;
	white-space: nowrap;
	text-decoration: none !important;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
	/* Belt-and-suspenders alongside the JS dragstart guard: stop WebKit/Blink
	   from offering its own native link-drag ghost, and stop the drag
	   gesture from selecting the label text along the way. */
	-webkit-user-drag: none;
	user-select: none;
	-webkit-user-select: none;
}

.mangarama-genre-carousel__item:hover,
.mangarama-genre-carousel__item:focus-visible {
	border-color: var(--mgc-border-color-hover);
	background: var(--mgc-bg-hover);
	color: var(--mgc-text-color-hover) !important;
}

.mangarama-genre-carousel__item:focus-visible {
	outline: 2px solid var(--mgc-border-color-hover);
	outline-offset: 2px;
}

.mangarama-genre-carousel__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: var(--mgc-arrow-size);
	height: var(--mgc-arrow-size);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: var(--mgc-border-width) solid var(--mgc-border-color);
	border-radius: 999px;
	background: var(--mgc-bg);
	color: var(--mgc-text-color);
	font-size: calc(var(--mgc-arrow-size) * .45);
	line-height: 1;
	cursor: pointer;
	z-index: 2;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
}

.mangarama-genre-carousel__arrow:hover,
.mangarama-genre-carousel__arrow:focus-visible {
	border-color: var(--mgc-border-color-hover);
	background: var(--mgc-bg-hover);
	color: var(--mgc-text-color-hover);
}

.mangarama-genre-carousel__arrow:focus-visible {
	outline: 2px solid var(--mgc-border-color-hover);
	outline-offset: 2px;
}

.mangarama-genre-carousel__arrow--prev {
	left: var(--mgc-arrow-offset);
}

.mangarama-genre-carousel__arrow--next {
	right: var(--mgc-arrow-offset);
}

.mangarama-genre-carousel__arrow[disabled],
.mangarama-genre-carousel__arrow.is-disabled {
	opacity: .35;
	cursor: default;
	pointer-events: none;
}

.mangarama-genre-carousel--align-center {
	margin-left: auto;
	margin-right: auto;
}

.mangarama-genre-carousel--align-right {
	margin-left: auto;
	margin-right: 0;
}

/* Touch targets stay comfortably tappable on small screens even if an
   admin sets a very small item height. */
@media (max-width: 782px) {
	.mangarama-genre-carousel__item {
		min-height: max(var(--mgc-item-height), 30px);
	}
}