/* El Paseo Promotions — rotating header bar.
   Tokens mirror the site utility bar; override on .eppr-bar if needed. */
.eppr-bar {
	--eppr-bar-bg:     #393a3a; /* Santa Rosa Shadow */
	--eppr-bar-ink:    #fcf4f0; /* Sunwashed Travertine */
	--eppr-bar-accent: #b2bb1e; /* El Paseo Green */
	--eppr-bar-display:'Tenor Sans', Georgia, serif;
	--eppr-bar-sans:   -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

	background: var(--eppr-bar-bg);
	color: var(--eppr-bar-ink);
	font-family: var(--eppr-bar-sans);
	position: relative;
	z-index: 20;
}
.eppr-bar * { box-sizing: border-box; }

.eppr-bar-inner {
	max-width: 1680px;
	margin: 0 auto;
	padding: 0 clamp(1rem, 4vw, 4rem);
	min-height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
}

/* Slides stack; only .is-active shows. Fade handled via opacity. */
.eppr-bar-track {
	position: relative;
	flex: 1 1 auto;
	display: grid;
	grid-template-areas: "stack";
	grid-template-columns: 1fr;
	align-items: stretch;
	justify-items: stretch;
	min-height: 46px;
}
/* Every slide is pinned to the same named cell and fills its full height,
   then centers its own text. Identical box for all slides, so DOM order
   (first, last, however many) can't shift any of them. */
.eppr-bar-slide {
	grid-area: stack;
	margin: 0;
	padding: 11px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(10px, 1.6vw, 22px);
	flex-wrap: wrap;
	text-align: center;
	font-size: 0.8rem;
	line-height: 1.4;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s cubic-bezier(.2,.7,.2,1), visibility 0s linear 0.5s;
}
.eppr-bar-slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.5s cubic-bezier(.2,.7,.2,1);
	pointer-events: auto;
}
.eppr-bar-slide:not(.is-active) { pointer-events: none; }
/* Lock symmetric padding so a theme rule like
   p:not(.has-background):last-of-type { padding-bottom: 0 } (Divi content
   styling) can't strip the last slide's bottom padding and drop it lower.
   Three classes (0-3-0) outrank that selector (0-2-1). */
.eppr-bar .eppr-bar-track .eppr-bar-slide {
	padding-top: 11px;
	padding-bottom: 11px;
	line-height:.75rem;
}
.eppr-bar-msg :where(strong, b) { font-weight: 700; }

.eppr-bar-cta {
	color: var(--eppr-bar-accent);
	font-weight: 700;
	font-size: 0.65rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
	white-space: nowrap;
	transition: border-color 0.3s;
}
.eppr-bar-cta:hover,
.eppr-bar-cta:focus-visible { border-bottom-color: var(--eppr-bar-accent); }

.eppr-bar-arrow {
	background: none;
	border: 0;
	color: var(--eppr-bar-ink);
	cursor: pointer;
	padding: 6px 4px;
	font-size: 8px;
	letter-spacing: 0.1em;
	line-height: 1;
	transition: color 0.2s;
	flex: 0 0 auto;
}
.eppr-bar-arrow:hover,
.eppr-bar-arrow:focus-visible { color: var(--eppr-bar-accent); }