/*
 * MRC Station Tools – front-end styles.
 * Uses the MRC Station theme's CSS variables when present, with readable
 * fallbacks for any other theme.
 */

/* ---------- Game Schedule: cards ---------- */

.mrc-game-row {
	overflow-x: auto;
	padding-bottom: 0.4rem;
	scroll-snap-type: x mandatory;
}

.mrc-game-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(210px, 1fr);
	gap: 1rem;
}

/* "Show all games" (or the grid layout): every card at once, as many per row as fit. */
.mrc-game-row.is-grid {
	overflow-x: visible;
	scroll-snap-type: none;
}

.mrc-game-row.is-grid .mrc-game-cards {
	grid-auto-flow: row;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

.mrc-game-row__more {
	margin: 0.6rem 0 0;
	text-align: right;
}

.mrc-game-row__toggle {
	padding: 0.4rem 1rem;
	border: 1px solid var(--mrc-line, #e3e3df);
	border-radius: 999px;
	background: var(--mrc-surface, #fff);
	color: var(--mrc-text, #1b1b1b);
	font: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
}

.mrc-game-row__toggle:hover,
.mrc-game-row__toggle:focus-visible {
	border-color: var(--mrc-accent, #1b1b1b);
}

.mrc-game-row__toggle[hidden] {
	display: none;
}

.mrc-game-card {
	display: grid;
	gap: 0.35rem;
	align-content: start;
	padding: 1.1rem 1.2rem;
	scroll-snap-align: start;
	background: var(--mrc-surface, #fff);
	color: var(--mrc-text, #1b1b1b);
	border: 1px solid var(--mrc-line, #e3e3df);
	border-radius: var(--mrc-radius, 12px);
}

.mrc-game-card.is-today {
	border: 2px solid var(--mrc-accent, #1b1b1b);
}

.mrc-game-card p {
	margin: 0;
}

.mrc-game-card__date {
	font-family: var(--mrc-display, inherit);
	font-size: 1.05rem;
	font-weight: 600;
	text-transform: uppercase;
}

.mrc-game-card__today {
	color: var(--mrc-accent-text, #8a3a00);
}

.mrc-game-card__today::before {
	content: "· ";
}

.mrc-game-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.85rem;
	color: var(--mrc-muted, #5c5c5c);
}

.mrc-game-card__league {
	padding: 0.15rem 0.5rem;
	border-radius: 4px;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: var(--mrc-primary, #1b1b1b);
	color: var(--mrc-on-primary, #fff);
}

.mrc-game-card__matchup {
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.3;
}

.mrc-game-row__more {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 0.5rem 1rem;
}

.mrc-game-row__link {
	font-weight: 600;
}

.mrc-games__actions {
	margin: 0 0 1rem;
}

.mrc-print-button {
	padding: 0.45rem 1.1rem;
	border: 1px solid var(--mrc-line, #e3e3df);
	border-radius: 999px;
	background: var(--mrc-surface, #fff);
	color: var(--mrc-text, #1b1b1b);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.mrc-print-button:hover,
.mrc-print-button:focus-visible {
	border-color: var(--mrc-accent, #1b1b1b);
}

.mrc-print-button::before {
	content: "\2399\FE0E\00a0";
}

.mrc-games__printed {
	display: none;
}

/* ---------- Game Schedule: list, and Show Lineup ---------- */

.mrc-games,
.mrc-lineup {
	display: grid;
	gap: 1rem;
}

.mrc-games__day,
.mrc-lineup__day {
	overflow: hidden;
	background: var(--mrc-surface, #fff);
	color: var(--mrc-text, #1b1b1b);
	border: 1px solid var(--mrc-line, #e3e3df);
	border-radius: var(--mrc-radius, 12px);
}

.mrc-games__date,
.mrc-lineup__heading {
	margin: 0 !important;
	padding: 0.55rem 0.9rem !important;
	border: 0 !important;
	font-family: var(--mrc-display, inherit);
	font-size: 1rem !important;
	text-transform: uppercase;
	background: var(--mrc-primary, #1b1b1b);
	color: var(--mrc-on-primary, #fff);
}

.mrc-games__date::after,
.mrc-lineup__heading::after {
	display: none;
}

.mrc-lineup__tz {
	font-family: var(--mrc-font, inherit);
	font-weight: 400;
	font-size: 0.8em;
	text-transform: none;
	opacity: 0.8;
}

.mrc-games .mrc-games__list,
.mrc-lineup .mrc-lineup__list,
.mrc-sponsors.mrc-sponsors,
.mrc-episodes.mrc-episodes {
	/* Doubled specificity so theme rules like ".widget ul" don't indent these. */
	list-style: none;
	margin: 0;
	padding: 0;
}

.mrc-game {
	display: grid;
	gap: 0.1rem;
	padding: 0.65rem 0.9rem;
	border-top: 1px solid var(--mrc-line, #e3e3df);
}

.mrc-game:first-child {
	border-top: 0;
}

.mrc-game__time {
	font-weight: 700;
}

.mrc-game__league {
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mrc-muted, #5c5c5c);
}

.mrc-lineup__item {
	display: grid;
	grid-template-columns: 5.4rem minmax(0, 1fr);
	gap: 0.5rem;
	align-items: center;
	padding: 0.6rem 0.9rem;
	border-top: 1px solid var(--mrc-line, #e3e3df);
	font-size: 0.95rem;
}

.mrc-lineup__item:first-child {
	border-top: 0;
}

.mrc-lineup__time {
	font-family: var(--mrc-display, inherit);
	color: var(--mrc-muted, #5c5c5c);
}

.mrc-lineup__show {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.15rem 0.5rem;
}

.mrc-lineup__name {
	font-weight: 600;
}

.mrc-lineup__name a {
	color: inherit;
}

.mrc-lineup__note {
	color: var(--mrc-muted, #5c5c5c);
	font-size: 0.9em;
}

.mrc-lineup__image {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50% !important;
	object-fit: cover;
	object-position: top;
	margin: 0 !important;
}

.mrc-lineup__item.is-on-air {
	background: color-mix(in srgb, var(--mrc-accent, #ff6600) 10%, #fff);
	box-shadow: inset 4px 0 0 var(--mrc-accent, #1b1b1b);
}

.mrc-lineup__item.is-on-air .mrc-lineup__name {
	font-weight: 800;
}

.mrc-badge-on-air {
	display: inline-block;
	padding: 0.1rem 0.4rem;
	border-radius: 3px;
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: var(--mrc-live, #d0142c);
	color: #fff;
}

/* ---------- On Air Now ---------- */

.mrc-on-air {
	display: grid;
	justify-items: center;
	gap: 0.35rem;
	padding: 1.25rem;
	text-align: center;
	border-radius: var(--mrc-radius, 12px);
	background: var(--mrc-header-bg, #111);
	color: var(--mrc-on-header, #fff);
}

.mrc-on-air p {
	margin: 0;
}

.mrc-on-air__image {
	width: 120px;
	height: 120px;
	border-radius: 50% !important;
	object-fit: cover;
	object-position: top;
	border: 3px solid var(--mrc-accent, #fff);
	margin: 0.25rem auto !important;
}

.mrc-on-air__name {
	font-family: var(--mrc-display, inherit);
	font-size: 1.4rem;
	font-weight: 600;
	text-transform: uppercase;
	line-height: 1.15;
}

.mrc-on-air__name a {
	color: inherit;
}

.mrc-on-air__time {
	opacity: 0.8;
}

/* ---------- Sponsors ---------- */

.mrc-sponsors {
	display: grid;
	gap: 0.75rem;
}

.mrc-sponsors--grid {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
}

.mrc-sponsor a,
.mrc-sponsor > img,
.mrc-sponsor > .mrc-sponsor__name {
	display: grid;
	place-items: center;
	height: 100%;
	min-height: 96px;
	padding: 0.9rem;
	background: #fff;
	border: 1px solid var(--mrc-line, #e3e3df);
	border-radius: 10px;
}

.mrc-sponsor a:hover {
	border-color: var(--mrc-accent, #1b1b1b);
}

.mrc-sponsor img {
	display: block;
	max-width: 100%;
	max-height: 90px;
	width: auto;
	height: auto;
	margin: 0 auto;
	border-radius: 0 !important;
}

.mrc-sponsor__name {
	font-weight: 700;
	color: var(--mrc-text, #1b1b1b);
}

/* ---------- Listen Live block ---------- */

.mrc-listen-live-wrap {
	margin: 0;
	text-align: center;
}

.mrc-listen-live {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.8rem 1.6rem;
	border-radius: 999px;
	font-weight: 800;
	font-size: 1.1rem;
	text-decoration: none;
	background: var(--mrc-accent, #b3001b);
	color: var(--mrc-on-accent, #fff);
}

.mrc-listen-live::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: currentColor;
}

.mrc-listen-live:hover,
.mrc-listen-live:focus-visible {
	color: var(--mrc-on-accent, #fff);
	text-decoration: underline;
}

/* Live fragments with nothing to show right now (see includes/live.php). */
[data-mrc-live][hidden],
[data-mrc-hide-empty][hidden] {
	display: none !important;
}

.mrc-notice,
.mrc-editor-empty {
	padding: 0.75rem;
	border: 2px dashed currentColor;
}

/* ---------- Show archive episodes ---------- */

.mrc-episode {
	padding: 1rem 0;
	border-bottom: 1px solid var(--mrc-line, rgba(0, 0, 0, 0.15));
}

.mrc-episode p {
	margin: 0 0 0.5rem;
}

.mrc-episode__date {
	display: block;
	font-size: 0.9em;
	color: var(--mrc-muted, #595959);
}

.mrc-episode__download {
	font-size: 0.9em;
}

.mrc-episode-single__meta {
	font-weight: 600;
}

.mrc-episode-single__more {
	margin-top: 1.5rem;
	font-weight: 600;
}

.mrc-episodes__pages ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	padding: 0;
	margin: 1.5rem 0 0;
}

.mrc-episodes__pages .page-numbers {
	display: inline-block;
	padding: 0.4rem 0.85rem;
	border: 1px solid var(--mrc-line, currentColor);
	border-radius: 8px;
	text-decoration: none;
}

.mrc-episodes__pages .page-numbers.current {
	background: var(--mrc-primary, #222);
	color: var(--mrc-on-primary, #fff);
}

/* Only defined here in case the active theme lacks it. */
.mrc-sponsor .screen-reader-text,
.mrc-episode .screen-reader-text,
.mrc-listen-live .screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* Second timezone next to show times (set under [MRC] Station). */
.mrc-alt-time {
	font-size: 0.85em;
	font-weight: 400;
	opacity: 0.7;
	white-space: nowrap;
}

.mrc-lineup__time .mrc-alt-time {
	display: block;
}

/* Image Carousel block (includes/carousel.php, assets/carousel.js). */
.mrc-carousel {
	position: relative;
	margin-block: 0 1.5rem;
	overflow: hidden;
	border-radius: var(--mrc-radius, 12px);
	background: #000;
	color: #fff;
}

.mrc-carousel__track {
	position: relative;
	aspect-ratio: var(--mrc-carousel-ratio, 16/9);
}

.mrc-carousel__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

.mrc-carousel__slide.is-active,
.mrc-carousel:not(.is-ready) .mrc-carousel__slide:first-child {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.6s ease;
}

.mrc-carousel__link {
	display: block;
	height: 100%;
}

.mrc-carousel__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--mrc-carousel-fit, cover);
}

.mrc-carousel__caption {
	position: absolute;
	right: 0;
	left: 0;
	bottom: 0;
	padding: 2.5rem clamp(1rem, 3vw, 1.75rem) clamp(0.85rem, 2.5vw, 1.4rem);
	margin: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
	color: #fff;
	font-size: 1rem;
	text-align: left;
	pointer-events: none;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.mrc-carousel--overlay-top .mrc-carousel__caption {
	top: 0;
	bottom: auto;
	padding-top: clamp(0.85rem, 2.5vw, 1.4rem);
	padding-bottom: 2.5rem;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
}

.mrc-carousel__title {
	display: block;
	font-family: var(--mrc-display, inherit);
	font-size: clamp(1.15rem, 3vw, 1.75rem);
	font-weight: 600;
	line-height: 1.15;
	text-transform: uppercase;
}

.mrc-carousel__subtitle {
	display: block;
	margin-top: 0.25rem;
	font-size: clamp(0.85rem, 2vw, 1rem);
	opacity: 0.9;
}

.mrc-carousel__arrow,
.mrc-carousel__pause,
.mrc-carousel__dot {
	border: 0;
	cursor: pointer;
	color: #fff;
}

.mrc-carousel__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	padding: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	font-size: 30px;
	line-height: 1;
	opacity: 0.85;
	transition: opacity 0.2s, background-color 0.2s;
}

.mrc-carousel__prev {
	left: 10px;
}

.mrc-carousel__next {
	right: 10px;
}

.mrc-carousel__arrow:hover,
.mrc-carousel__arrow:focus-visible {
	background: rgba(0, 0, 0, 0.8);
	opacity: 1;
}

/* Pause and dots sit opposite the caption, so they never cover the text. */
.mrc-carousel__nav {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.55);
}

.mrc-carousel--overlay-top .mrc-carousel__nav,
.mrc-carousel--overlay-none .mrc-carousel__nav {
	top: auto;
	bottom: 10px;
}

.mrc-carousel__pause {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	background: none;
}

.mrc-carousel__pause-icon {
	width: 10px;
	height: 12px;
	border-right: 3px solid currentColor;
	border-left: 3px solid currentColor;
}

.mrc-carousel__pause.is-paused .mrc-carousel__pause-icon {
	width: 0;
	height: 0;
	border-top: 6px solid transparent;
	border-right: 0;
	border-bottom: 6px solid transparent;
	border-left: 10px solid currentColor;
}

.mrc-carousel__dot {
	width: 24px;
	height: 24px;
	padding: 0;
	background: none;
}

.mrc-carousel__dot::before {
	content: "";
	display: block;
	width: 9px;
	height: 9px;
	margin: auto;
	border: 2px solid #fff;
	border-radius: 50%;
}

.mrc-carousel__dot[aria-current="true"]::before {
	background: #fff;
}

.mrc-carousel button:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.mrc-carousel__slide,
	.mrc-carousel__slide.is-active {
		transition: none;
	}
}

/* ---------- Printing ---------- */

@media print {
	.mrc-print-button,
	.mrc-games__actions,
	.mrc-game-row__more,
	.mrc-carousel__arrow,
	.mrc-carousel__nav {
		display: none !important;
	}

	.mrc-games__printed {
		display: block;
		margin: 0 0 0.75rem;
		font-size: 0.85rem;
	}

	/* Compact: one line per game, so a season fits on a sheet or two. */
	.mrc-games {
		gap: 0.35rem;
		font-size: 10pt;
	}

	.mrc-games__date {
		padding: 0.2rem 0.6rem !important;
		font-size: 10.5pt !important;
	}

	.mrc-game {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0 0.9rem;
		padding: 0.2rem 0.6rem;
	}

	.mrc-game__time {
		min-width: 9em;
	}

	.mrc-game__league {
		order: 2;
		font-size: 8pt;
		color: #000;
	}

	/* Plain black on white; keep each day together on one sheet if it fits. */
	.mrc-games__day,
	.mrc-lineup__day {
		border: 1px solid #999;
		border-radius: 0;
		break-inside: avoid;
	}

	.mrc-games__date,
	.mrc-lineup__heading {
		background: none !important;
		color: #000 !important;
		border-bottom: 1px solid #999 !important;
	}

	.mrc-game__league,
	.mrc-game-card__league {
		background: none !important;
		color: #000 !important;
		border: 1px solid #999;
	}

	.mrc-game-row {
		overflow: visible;
	}

	.mrc-game-row .mrc-game-cards {
		grid-auto-flow: row;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---------- Link List ---------- */

.mrc-links.mrc-links {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}

/* Links: one per line, with a thin rule between them. */
.mrc-links--links .mrc-links__item + .mrc-links__item {
	border-top: 1px solid var(--mrc-line, #e3e3df);
}

.mrc-links--links .mrc-links__link {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 0.15rem;
	font-weight: 600;
	text-decoration: none;
}

.mrc-links--links .mrc-links__link::after {
	content: "\203A";
	font-size: 1.25em;
	line-height: 1;
	color: var(--mrc-accent-text, #8a3a00);
}

.mrc-links--links .mrc-links__link:hover .mrc-links__label,
.mrc-links--links .mrc-links__link:focus-visible .mrc-links__label {
	text-decoration: underline;
}

/* Image and name: a small square image beside the name. */
.mrc-links--logo-name {
	display: grid;
	gap: 0.5rem;
}

.mrc-links--logo-name .mrc-links__link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.45rem;
	border: 1px solid var(--mrc-line, #e3e3df);
	border-radius: 10px;
	background: var(--mrc-surface, #fff);
	font-weight: 600;
	text-decoration: none;
}

.mrc-links--logo-name .mrc-links__image {
	flex: 0 0 auto;
	width: 52px !important;
	height: 52px !important;
	max-height: none !important;
	margin: 0 !important;
	object-fit: contain;
	border-radius: 6px;
	background: #fff;
}

.mrc-links--logo-name .mrc-links__link:hover,
.mrc-links--logo-name .mrc-links__link:focus-visible {
	border-color: var(--mrc-accent, #1b1b1b);
}

/* Images only: same-size tiles, logos centered and contained. */
.mrc-links--logos {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem;
}

.mrc-links--logos.mrc-links--cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mrc-links--logos .mrc-links__link {
	display: grid;
	place-items: center;
	min-height: 96px;
	padding: 0.75rem;
	border: 1px solid var(--mrc-line, #e3e3df);
	border-radius: 10px;
	background: #fff;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

.mrc-links--logos .mrc-links__image {
	width: auto !important;
	max-width: 100%;
	max-height: 110px !important;
	height: auto;
	margin: 0 !important;
	object-fit: contain;
	border-radius: 4px;
}

.mrc-links--logos.mrc-links--cols-2 .mrc-links__image {
	max-height: 70px !important;
}

.mrc-links--logos .mrc-links__link:hover,
.mrc-links--logos .mrc-links__link:focus-visible {
	border-color: var(--mrc-accent, #1b1b1b);
}

/* Rows without a web address: same look, nothing to click. */
.mrc-links .mrc-links__link.is-static {
	cursor: default;
	color: inherit;
}

.mrc-links--links .mrc-links__link.is-static::after {
	content: none;
}

.mrc-links--logo-name .mrc-links__link.is-static:hover,
.mrc-links--logos .mrc-links__link.is-static:hover {
	border-color: var(--mrc-line, #e3e3df);
}