/**
 * Just Ask Ro Podcast — shared styles
 * Nav arrow buttons used by both [podcast_slider] and [blog_slider], plus
 * the shared color variables so the two sliders default to matching themes.
 */

.jarp-slider-nav {
	display: flex;
	gap: 12px;
	margin-top: 24px;
}

.jarp-nav-btn {
	--jarp-nav-color: #2F160F;
	--jarp-nav-hover: #7B0F19;
	--jarp-nav-accent: #B88A44;

	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(47, 22, 15, 0.25);
	background: transparent;
	color: var(--jarp-nav-color);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

.jarp-nav-btn:hover {
	background-color: var(--jarp-nav-hover);
	border-color: var(--jarp-nav-hover);
	color: #fff;
	transform: translateY(-1px);
}

.jarp-nav-btn:focus-visible {
	outline: 2px solid var(--jarp-nav-accent);
	outline-offset: 2px;
}

.jarp-nav-btn.swiper-button-disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.jarp-nav-btn.swiper-button-disabled:hover {
	background-color: transparent;
	color: var(--jarp-nav-color);
	transform: none;
}

/* Let each slider's own wrapper override the three nav variables above
   if it wants arrows in a different color from its card accents. */
.jarp-slider-wrap .jarp-nav-btn {
	--jarp-nav-color: var(--jarp-dark, #2F160F);
	--jarp-nav-hover: var(--jarp-primary, #7B0F19);
	--jarp-nav-accent: var(--jarp-accent, #B88A44);
}

.jarp-blog-slider-wrap .jarp-nav-btn {
	--jarp-nav-color: var(--jarp-blog-dark, #2F160F);
	--jarp-nav-hover: var(--jarp-blog-primary, #7B0F19);
	--jarp-nav-accent: var(--jarp-blog-accent, #B88A44);
}