/* Rise Banners — front end. Everything is scoped under .rise-banners; controls are fully reset so
   theme button/link styles never leak in. Colors come from --rb-bg / --rb-fg (per slide).
   One row: [prev][pause]  text + button  [dots][next]. Controls sit on the text line, so a carousel is
   exactly as slim as a single banner. The markup sets --rb-arrows / --rb-pause (0|1) and --rb-dots
   (dot count or 0); the text is padded by the wider side so it stays centered. */

.rise-banners {
	--rb-pad-y: 10px;
	--rb-gap: 16px;   /* text to controls */
	--rb-edge: 6px;   /* controls to banner edge */
	--rb-btn: 32px;
	--rb-dot: 14px;
	--rb-left: calc((var(--rb-arrows, 0) + var(--rb-pause, 0)) * var(--rb-btn));
	--rb-right: calc(var(--rb-dots, 0) * var(--rb-dot) + var(--rb-arrows, 0) * var(--rb-btn));
	--rb-pad-x: max(20px, calc(max(var(--rb-left), var(--rb-right)) + var(--rb-edge) + var(--rb-gap)));
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	background: var(--rb-bg);
	color: var(--rb-fg);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
	transition: background-color .4s ease;
}
.rise-banners *,
.rise-banners *::before,
.rise-banners *::after { box-sizing: border-box; }

/* Printed by the footer fallback: hidden until banners.js moves it to the top of <body>. */
.rise-banners[data-fallback] { display: none; }

/* Sticky. banners.js upgrades this to position: fixed + a spacer (position: sticky breaks under
   overflow:hidden ancestors, which many themes set on body); this is the no-JS baseline. */
.rise-banners--sticky { position: sticky; top: 0; z-index: 99990; }
.rise-banners.is-fixed { position: fixed; left: 0; right: 0; }

.rise-banners.is-expired { display: none; }

.rise-banners__viewport { overflow: hidden; touch-action: pan-y; }

.rise-banners__slide {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px 16px;
	padding: var(--rb-pad-y) var(--rb-pad-x);
	background: var(--rb-bg);
	color: var(--rb-fg);
}

/* "Just the content" rotation: the banner keeps its colors; only the messages move across it. */
.rise-banners--rotate-content .rise-banners__slide { background: transparent; color: inherit; }

/* Whole banner clickable: the slide's link is stretched over the slide. Controls (z-index 1) stay on top. */
.rise-banners--clickable .rise-banners__slide { position: relative; }
.rise-banners--clickable .rise-banners__link::after { content: ""; position: absolute; inset: 0; }
.rise-banners--clickable .rise-banners__slide:hover .rise-banners__cta { opacity: .8; }
.rise-banners a.rise-banners__text,
.rise-banners a.rise-banners__text:visited,
.rise-banners a.rise-banners__text:hover,
.rise-banners a.rise-banners__text:focus { color: inherit; text-decoration: none; }
.rise-banners .rise-banners__link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Slide transition: a horizontal track. */
.rise-banners--slide .rise-banners__track {
	display: flex;
	transition: transform .5s ease;
}
.rise-banners--slide .rise-banners__slide { flex: 0 0 100%; min-width: 0; }

/* Fade transition: slides stacked in one grid cell; height = tallest slide. */
.rise-banners--fade .rise-banners__track { display: grid; }
.rise-banners--fade .rise-banners__slide {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity .5s ease, visibility 0s linear .5s;
}
.rise-banners--fade .rise-banners__slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity .5s ease;
}

.rise-banners .rise-banners__text { overflow-wrap: anywhere; }

.rise-banners .rise-banners__cta,
.rise-banners .rise-banners__cta:visited {
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: nowrap;
	transition: opacity .2s ease;
}
.rise-banners .rise-banners__cta:hover,
.rise-banners .rise-banners__cta:focus { color: inherit; opacity: .8; }

/* Control groups: vertically centered on the text line, over the slide's side padding. */
.rise-banners__controls {
	position: absolute;
	top: 50%;
	z-index: 1;
	display: flex;
	align-items: center;
	transform: translateY(-50%);
}
.rise-banners__controls--start { left: var(--rb-edge); }
.rise-banners__controls--end { right: var(--rb-edge); }

/* Controls: hard reset, then our own look. */
.rise-banners .rise-banners__btn,
.rise-banners .rise-banners__dot {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	color: var(--rb-fg);
	-webkit-tap-highlight-color: transparent;
}
.rise-banners .rise-banners__btn {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--rb-btn);
	height: var(--rb-btn);
	border-radius: 50%;
	opacity: .85;
}
.rise-banners .rise-banners__btn:hover { opacity: 1; background: color-mix(in srgb, currentColor 15%, transparent); }
.rise-banners .rise-banners__btn:focus-visible,
.rise-banners .rise-banners__dot:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; opacity: 1; }

/* Icons drawn in CSS: no icon font, no SVG requests. */
.rise-banners .rise-banners__prev span,
.rise-banners .rise-banners__next span {
	width: 8px;
	height: 8px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
}
.rise-banners .rise-banners__prev span { transform: translateX(2px) rotate(-135deg); }
.rise-banners .rise-banners__next span { transform: translateX(-2px) rotate(45deg); }
.rise-banners .rise-banners__pause span {
	width: 8px;
	height: 10px;
	border-left: 3px solid currentColor;
	border-right: 3px solid currentColor;
}
.rise-banners.is-paused .rise-banners__pause span {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 0 5px 9px;
	border-color: transparent transparent transparent currentColor;
	transform: translateX(1px);
}

.rise-banners__dots { display: flex; align-items: center; }
.rise-banners .rise-banners__dot {
	position: relative;
	flex: 0 0 auto;
	width: var(--rb-dot);
	height: 24px; /* taller hit area than the visible dot */
}
.rise-banners .rise-banners__dot::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	opacity: .4;
	transform: translate(-50%, -50%);
	transition: opacity .2s ease;
}
.rise-banners .rise-banners__dot[aria-current="true"]::before,
.rise-banners .rise-banners__dot:hover::before { opacity: 1; }

@media (max-width: 600px) {
	.rise-banners {
		--rb-pad-y: 8px;
		--rb-gap: 8px;
		--rb-edge: 2px;
		--rb-btn: 28px;
		--rb-dot: 12px;
		font-size: 13px;
	}
	.rise-banners .rise-banners__slide { gap: 2px 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.rise-banners,
	.rise-banners__track,
	.rise-banners__slide { transition: none !important; }
}