/* Roberta Rockwell site helpers: film strip nav, faded photo, shows list.
   Class names used here are the contract the Elementor build must follow (see BUILD_PLAN.md). */

:root {
	--rr-bg: #dde6ee;
	--rr-ink: #1e2733;
	--rr-body: #2b3542;
	--rr-muted: #4a5663;
	--rr-strip: #222932;
	--rr-frame: #10151b;
	--rr-light: #f3f6f9;
	--rr-accent: #7a2944;
	--rr-ghost-opacity: 0.26;
}

/* ---------- Page background + faded "ghost" photo ---------- */
body {
	background-color: var(--rr-bg);
	position: relative;
	isolation: isolate;
}

body::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: min(1000px, 70vw);
	height: 1450px;
	background: var(--rr-ghost-image) 50% 10% / cover no-repeat;
	opacity: var(--rr-ghost-opacity);
	filter: grayscale(0.45) contrast(0.9);
	pointer-events: none;
	z-index: -1;
	-webkit-mask-image: linear-gradient(to left, #000 35%, transparent 95%), linear-gradient(to bottom, #000 50%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(to left, #000 35%, transparent 95%), linear-gradient(to bottom, #000 50%, transparent 100%);
	mask-composite: intersect;
}

/* ---------- Header layout ---------- */
.rr-header {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding-top: 44px;
	width: 100%;
	box-sizing: border-box;
}

.rr-header .rr-name-block {
	flex: 0 0 320px;
	padding-left: 56px;
	box-sizing: border-box;
	text-decoration: none;
}

.rr-header .rr-strip {
	flex: 1 1 auto;
	min-width: 0;
}

/* ---------- Film strip ---------- */
.rr-strip {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 10px;
	background: var(--rr-strip);
	padding: 22px 0 22px 12px;
	box-sizing: border-box;
	overflow: hidden;
}

/* Sprocket holes, top and bottom */
.rr-strip::before,
.rr-strip::after {
	content: "";
	position: absolute;
	left: 10px;
	right: 0;
	height: 8px;
	pointer-events: none;
	background-image: linear-gradient(to right, var(--rr-bg) 12px, transparent 12px);
	background-size: 22px 8px;
	background-repeat: repeat-x;
}
.rr-strip::before { top: 7px; }
.rr-strip::after { bottom: 7px; }

.rr-strip .rr-frame {
	position: relative;
	flex: 0 0 170px;
	height: 88px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 3px;
	background: var(--rr-frame);
	text-decoration: none;
	padding: 0;
	margin: 0;
}

/* The photo inside each frame shows as a negative until hovered or current */
.rr-strip .rr-frame img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	filter: grayscale(1) invert(1) contrast(0.85);
	opacity: 0.3;
	transition: filter 0.6s ease, opacity 0.6s ease;
}

.rr-strip .rr-frame:hover img,
.rr-strip .rr-frame:focus-within img,
.rr-strip .rr-frame.is-current img {
	filter: grayscale(0.15);
	opacity: 0.8;
}

.rr-frame__label,
.rr-strip .rr-frame .rr-frame__label {
	position: relative;
	z-index: 1;
	margin: 0;
	font-family: "Jost", "Helvetica Neue", sans-serif;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--rr-light);
	background: rgba(16, 21, 27, 0.6);
	padding: 6px 8px 6px 11px;
	border-radius: 2px;
}

.rr-strip .rr-frame:focus-visible,
.rr-strip .rr-frame a:focus-visible {
	outline: 2px solid var(--rr-light);
	outline-offset: -4px;
}

/* Blank frame that runs off the right edge */
.rr-strip__tail {
	flex: 1 1 auto;
	min-width: 0;
	border-radius: 3px 0 0 3px;
	background: var(--rr-frame);
}

/* Stand-alone sprocket bar, used at the top of the footer */
.rr-sprockets {
	height: 22px;
	background-color: var(--rr-strip);
	background-image: linear-gradient(to right, var(--rr-bg) 12px, transparent 12px);
	background-size: 22px 8px;
	background-position: 10px center;
	background-repeat: repeat-x;
}

/* ---------- Upcoming shows ([rr_upcoming_shows]) ---------- */
.rr-shows {
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: "Jost", "Helvetica Neue", sans-serif;
	color: var(--rr-ink);
}

.rr-show {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 18px 0;
	border-top: 1px solid rgba(30, 39, 51, 0.25);
}
.rr-shows--list .rr-show:last-child { border-bottom: 1px solid rgba(30, 39, 51, 0.25); }

.rr-show__date { flex: 0 0 58px; text-align: center; }
.rr-show__mon {
	display: block;
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}
.rr-show__day {
	display: block;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 30px;
	line-height: 1;
}
.rr-show__info { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.rr-show__venue { font-size: 16px; font-weight: 500; }
.rr-show__city { font-size: 14px; color: var(--rr-muted); }
.rr-show__tix {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--rr-accent);
	text-decoration: none;
	padding: 12px 0;
}
.rr-show__tix:hover { color: #5c1d33; text-decoration: underline; }
.rr-shows__empty { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 22px; color: var(--rr-body); }

.rr-shows--cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}
.rr-shows--cards .rr-show { flex-direction: column; align-items: flex-start; gap: 6px; padding: 22px 0; }
.rr-shows--cards .rr-show__date { text-align: left; }

/* ---------- Tablet ---------- */
@media (max-width: 1200px) {
	.rr-header { flex-direction: column; align-items: stretch; gap: 20px; }
	.rr-header .rr-name-block { flex: none; padding-left: 0; text-align: center; }
	.rr-strip { padding-right: 12px; }
	.rr-strip .rr-frame { flex: 1 1 0; min-width: 0; height: 80px; }
	.rr-strip__tail { display: none; }
	.rr-frame__label { letter-spacing: 0.2em; padding: 5px 6px 5px 8px; }
	.rr-shows--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Mobile: vertical film strip, no hamburger ---------- */
@media (max-width: 767px) {
	.rr-header { padding-top: 34px; }

	.rr-strip {
		flex-direction: column;
		gap: 8px;
		padding: 10px 22px;
		margin: 0 16px;
		border-radius: 2px;
	}
	.rr-strip::before,
	.rr-strip::after {
		top: 8px;
		bottom: 8px;
		width: 8px;
		height: auto;
		background-image: linear-gradient(to bottom, var(--rr-bg) 12px, transparent 12px);
		background-size: 8px 22px;
		background-repeat: repeat-y;
	}
	.rr-strip::before { left: 7px; right: auto; }
	.rr-strip::after { right: 7px; left: auto; }

	.rr-strip .rr-frame { flex: 0 0 58px; height: 58px; width: 100%; }
	.rr-frame__label { font-size: 13px; letter-spacing: 0.32em; }

	body::before {
		width: 100%;
		height: 1100px;
		-webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
		-webkit-mask-composite: source-over;
		mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
		mask-composite: add;
	}

	.rr-shows--cards { grid-template-columns: 1fr; }
	.rr-show { gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.rr-strip .rr-frame img { transition: none; }
}