/* PKWY MUX — front-end styles. Kept minimal: Salient handles most chrome. */

/* Hide inline lightbox containers until the popup opens. Magnific Popup uses
   the .mfp-hide convention; we add our own backup in case the theme's flavor
   of Magnific Popup or fancybox doesn't include it. */
.pkwy-mux-lightbox-target,
.mfp-hide.pkwy-mux-lightbox-target {
	display: none !important;
}

/* Fallback dimensions for inline players when not constrained by the theme. */
.pkwy-mux mux-player {
	display: block;
	width: 100%;
	max-width: 100%;
}

/* Download link rendered below the player when the editor opts in to MP4
   static renditions and Mux has finished generating them. Inherits theme
   typography; we just add a small icon-style underscore on hover. */
.pkwy-mux .pkwy-mux-download {
	margin: 8px 0 0;
	font-size: 0.9em;
	text-align: right;
}
.pkwy-mux .pkwy-mux-download a {
	text-decoration: none;
	border-bottom: 1px dashed currentColor;
}
.pkwy-mux .pkwy-mux-download a:hover { border-bottom-style: solid; }

/* -----------------------------------------------------------------------
   Carousel layout for [pkwy_mux_playlist layout="carousel"]
   ---------------------------------------------------------------------
   Pure CSS scroll-snap track + minimal JS for prev/next + dots, no
   Slick/Swiper dependency. Works on any theme. The viewport hides the
   horizontal overflow; the track is a horizontal flex row that snaps
   to each item. Each item respects --pkwy-mux-item-min so small items
   pack tighter and large items get more room.
   -------------------------------------------------------------------- */
.pkwy-mux-playlist--carousel {
	--pkwy-mux-item-min: 280px;
	--pkwy-mux-gap: 16px;
	position: relative;
	margin: 0;
}
.pkwy-mux-playlist--carousel .pkwy-mux-carousel-viewport {
	overflow: hidden;
}
.pkwy-mux-playlist--carousel .pkwy-mux-carousel-track {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--pkwy-mux-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	margin: 0;
	padding: 0 0 8px;
	list-style: none;
	scrollbar-width: thin;
}
.pkwy-mux-playlist--carousel .pkwy-mux-carousel-track::-webkit-scrollbar { height: 6px; }
.pkwy-mux-playlist--carousel .pkwy-mux-carousel-track::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 3px; }

.pkwy-mux-playlist--carousel .pkwy-mux-playlist__item {
	flex: 0 0 calc(100% - var(--pkwy-mux-gap));
	max-width: 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	margin: 0;
	list-style: none;
}
.pkwy-mux-playlist--carousel .pkwy-mux-playlist__item::marker { content: none; }
@media (min-width: 700px) {
	.pkwy-mux-playlist--carousel .pkwy-mux-playlist__item {
		flex-basis: calc(50% - var(--pkwy-mux-gap));
	}
}
@media (min-width: 1100px) {
	.pkwy-mux-playlist--carousel .pkwy-mux-playlist__item {
		flex-basis: calc(33.3333% - var(--pkwy-mux-gap));
	}
}
.pkwy-mux-playlist--carousel .pkwy-mux-playlist__item > * { max-width: 100%; }
.pkwy-mux-playlist--carousel .pkwy-mux-playlist__title {
	margin: 0 0 8px;
	font-size: 1rem;
	line-height: 1.3;
}

/* Prev / next buttons. Position offset just outside the viewport, mirrored
   either side. Kept neutral so themes (Salient included) don't have to
   restyle them. */
.pkwy-mux-carousel-btn {
	position: absolute;
	top: calc(50% - 22px);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid currentColor;
	background: rgba(255,255,255,0.92);
	color: inherit;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	transition: opacity 0.15s ease, transform 0.15s ease;
	padding: 0;
}
.pkwy-mux-carousel-btn:hover { background: #fff; transform: scale(1.05); }
.pkwy-mux-carousel-btn[disabled] { opacity: 0.35; cursor: not-allowed; transform: none; }
.pkwy-mux-carousel-btn--prev { left: -10px; }
.pkwy-mux-carousel-btn--next { right: -10px; }
@media (min-width: 700px) {
	.pkwy-mux-carousel-btn--prev { left: -20px; }
	.pkwy-mux-carousel-btn--next { right: -20px; }
}

/* Dots. Sit centered under the viewport. */
.pkwy-mux-carousel-dots {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-top: 12px;
}
.pkwy-mux-carousel-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 1px solid currentColor;
	background: transparent;
	padding: 0;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.15s ease, background 0.15s ease;
}
.pkwy-mux-carousel-dot:hover { opacity: 1; }
.pkwy-mux-carousel-dot.is-active {
	background: currentColor;
	opacity: 1;
}

/* Page-header / row background overlay we injected. These mirror the
   positioning Salient applies to its own .nectar-video-wrap so the result
   is visually identical, but they're defensively scoped to our class so
   we never override Salient's own video bg. */
.pkwy-mux-bg-injected {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 0;
	pointer-events: none;
}
.pkwy-mux-bg-injected .nectar-video-inner {
	width: 100%;
	height: 100%;
	position: relative;
}
.pkwy-mux-bg-injected .nectar-video-bg {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	object-fit: cover;
}

/* vc_section background mode. WPBakery's <section class="vc_section"> doesn't
   have position:relative by default (Salient only sets it on .vc_video-bg-container,
   which we don't necessarily trigger). We add `pkwy-mux-has-bg` to the section
   when we inject a MUX bg, and these rules establish the positioning context
   + clip overflow so the absolutely-positioned <video> behaves. */
section.vc_section.pkwy-mux-has-bg {
	position: relative;
	overflow: hidden;
}
section.vc_section.pkwy-mux-has-bg > .pkwy-mux-bg-overlay,
section.vc_section.pkwy-mux-has-bg > .pkwy-mux-bg-wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
section.vc_section.pkwy-mux-has-bg > .pkwy-mux-bg-wrap {
	overflow: hidden;
	z-index: 0;
}
section.vc_section.pkwy-mux-has-bg > .pkwy-mux-bg-overlay { z-index: 1; }
section.vc_section.pkwy-mux-has-bg > .pkwy-mux-bg-wrap .nectar-video-inner {
	width: 100%;
	height: 100%;
	position: relative;
}
section.vc_section.pkwy-mux-has-bg > .pkwy-mux-bg-wrap .nectar-video-bg {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	object-fit: cover;
}
/* Section content sits above the bg layers. */
section.vc_section.pkwy-mux-has-bg > .vc_row,
section.vc_section.pkwy-mux-has-bg > .wpb_row {
	position: relative;
	z-index: 2;
}

/* Hide the playback-rate ("1x") button on every embed. The primary mechanism
   is the `playbackrates="1"` attribute we set in the render layer (Mux Player
   hides the button when only one rate is configured). These CSS rules are a
   defensive fallback for older mux-player versions that ignore that. */
mux-player::part(playbackrate-button),
mux-player::part(playback-rate-button),
mux-player::part(media-playback-rate-button),
mux-player::part(playbackrate),
mux-player::part(playback-rate),
mux-player::part(rate),
mux-player::part(rate-button),
mux-player::part(playback-rate-container) {
	display: none !important;
}
/* Wildcards just in case the part name includes "rate" anywhere. */
mux-player::part(*-rate-*),
mux-player::part(*rate*) {
	display: none !important;
}
/* Last-resort: target media-chrome element directly inside mux-player's
   light DOM (some builds slot the controls there rather than in shadow). */
mux-player media-playback-rate-button,
mux-player media-control-bar [aria-label*="speed" i],
mux-player media-control-bar [aria-label*="rate" i] {
	display: none !important;
}

/* Audio chrome is a slim controls bar — never enforce an aspect ratio,
   even if a parent (theme, page builder, etc.) tries to. */
.pkwy-mux--audio,
.pkwy-mux--audio mux-player {
	aspect-ratio: auto !important;
	height: auto;
}
.pkwy-mux--audio mux-player {
	width: 100%;
}

/* Video chrome defaults to 16:9. Scoped to the video wrapper so it never
   leaks into audio embeds on the same page. */
.pkwy-mux--video mux-player {
	aspect-ratio: 16 / 9;
}

/* When the lightbox container is shown by Magnific Popup, give the player a
   reasonable max-width so it doesn't overflow the viewport. */
.mfp-content .pkwy-mux-lightbox-target {
	display: block !important;
	width: min(96vw, 1280px);
	max-width: 96vw;
	margin: 0 auto;
	background: #000;
	border-radius: 6px;
	overflow: hidden;
}
.mfp-content .pkwy-mux-lightbox-target mux-player {
	width: 100%;
	max-height: 90vh;
}

/* Single Stream page — used by both the auto-injected (the_content filter)
   path and our custom single-pkwy_stream.php template. */
.pkwy-mux-single {
	margin: 0 0 32px;
}
.pkwy-mux-single mux-player {
	display: block;
	width: 100%;
}

/* Custom single template.
   Three sections: title (container-bound), player (full-width breakout),
   body (container-bound — so WPBakery rows in the_content honor their
   In Container / Full Width Type setting). */
.pkwy-mux-single-wrap {
	width: 100%;
	padding: 150px 0 80px;
	box-sizing: border-box;
}
@media (max-width: 999px) {
	.pkwy-mux-single-wrap { padding-top: 100px; }
}
.pkwy-mux-single__top { padding-bottom: 32px; }
.pkwy-mux-single__body { padding-top: 32px; }

/* Player section: full-width breakout from the title/body containers. */
.pkwy-mux-single__player-wrap {
	width: 100%;
	margin: 0 0 16px;
}
.pkwy-mux-single__player {
	max-width: 1600px;
	margin: 0 auto;
}
.pkwy-mux-single__player .pkwy-mux mux-player {
	width: 100%;
}
.pkwy-mux-single--audio .pkwy-mux-single__player {
	max-width: 900px;
	padding: 0 24px;
}

.pkwy-mux-single__crumb {
	margin: 0 0 8px;
	font-size: 0.92em;
	opacity: 0.7;
}
.pkwy-mux-single__crumb a,
.pkwy-mux-single__back-link {
	color: inherit;
	text-decoration: none;
}
.pkwy-mux-single__crumb a:hover,
.pkwy-mux-single__back-link:hover {
	color: var(--media-accent-color, #1cb0a2);
}
.pkwy-mux-single__title {
	margin: 0 0 12px;
	line-height: 1.15;
}
.pkwy-mux-single__terms {
	margin: 0 0 28px;
	font-size: 0.9em;
	opacity: 0.7;
}
.pkwy-mux-single__excerpt {
	font-size: 1.15em;
	color: #555;
	margin: 0 0 24px;
	line-height: 1.55;
}
.pkwy-mux-single__excerpt p:last-child { margin-bottom: 0; }
.pkwy-mux-single__content {
	line-height: 1.7;
	margin: 0 0 40px;
}
.pkwy-mux-single__footer {
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	padding-top: 24px;
	margin-top: 40px;
}
.pkwy-mux-single__back-link {
	font-size: 0.95em;
	opacity: 0.8;
}

/* Stream archive grid (templates/archive-pkwy_stream.php). */
.pkwy-mux-archive {
	padding: 50px 0 80px;
}
.pkwy-mux-archive__header {
	margin-bottom: 40px;
	text-align: center;
}
.pkwy-mux-archive__title {
	margin: 0 0 12px;
}
.pkwy-mux-archive__desc {
	color: #555;
	max-width: 720px;
	margin: 0 auto;
}
.pkwy-mux-archive-grid {
	list-style: none !important;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}
.pkwy-mux-archive-item {
	margin: 0;
	list-style: none !important;
	padding-left: 0;
}
/* Salient (and many themes) inject ::marker bullets on <li> elements
   regardless of the parent list-style. Suppress them explicitly. */
.pkwy-mux-archive-grid > li::marker,
.pkwy-mux-archive-grid > li::-webkit-details-marker,
.pkwy-mux-archive-item::marker {
	content: none !important;
	display: none !important;
	color: transparent !important;
	font-size: 0 !important;
}
.pkwy-mux-archive-item__link {
	display: block;
	color: inherit;
	text-decoration: none;
}
.pkwy-mux-archive-item__link:hover .pkwy-mux-archive-item__thumb {
	transform: scale(1.02);
}
.pkwy-mux-archive-item__link:hover .pkwy-mux-archive-item__title {
	color: var(--media-accent-color, #1cb0a2);
}
.pkwy-mux-archive-item__thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	background-size: cover;
	background-position: center;
	background-color: #1d1d1d;
	border-radius: 4px;
	overflow: hidden;
	transition: transform 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.7);
}
.pkwy-mux-archive-item--audio .pkwy-mux-archive-item__thumb {
	background: linear-gradient(135deg, #2a3f54 0%, #1a2733 100%);
}
.pkwy-mux-archive-item__audio-icon {
	width: 48px;
	height: 48px;
}
.pkwy-mux-archive-item__duration {
	position: absolute;
	bottom: 8px;
	right: 8px;
	padding: 2px 8px;
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	font-size: 12px;
	border-radius: 3px;
	font-variant-numeric: tabular-nums;
}
.pkwy-mux-archive-item__title {
	margin: 14px 0 4px;
	font-size: 1.15em;
	transition: color 0.2s ease;
}
.pkwy-mux-archive-item__excerpt {
	margin: 0;
	color: #555;
	font-size: 0.92em;
	line-height: 1.5;
}
.pkwy-mux-archive__empty {
	padding: 60px 0;
	text-align: center;
	color: #888;
}
.pkwy-mux-archive__pagination {
	margin-top: 50px;
	text-align: center;
}
@media (max-width: 999px) {
	.pkwy-mux-archive-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 690px) {
	.pkwy-mux-archive-grid { grid-template-columns: 1fr; }
}

/* Single Playlist page — items are listed vertically with a number + title
   above each player. */
.pkwy-mux-playlist-single__items {
	padding: 24px 0 32px;
}
.pkwy-mux-playlist-single .pkwy-mux-playlist__items {
	list-style: none !important;
	margin: 0;
	padding: 0;
}
.pkwy-mux-playlist-single .pkwy-mux-playlist__item {
	margin: 0 0 40px;
	list-style: none !important;
}
.pkwy-mux-playlist-single .pkwy-mux-playlist__item::marker {
	content: none !important;
}
.pkwy-mux-playlist-single .pkwy-mux-playlist__item-head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0 0 12px;
}
.pkwy-mux-playlist-single .pkwy-mux-playlist__item-num {
	font-size: 0.92em;
	opacity: 0.55;
	font-variant-numeric: tabular-nums;
	min-width: 28px;
}
.pkwy-mux-playlist-single .pkwy-mux-playlist__title {
	margin: 0;
	font-size: 1.15em;
}
.pkwy-mux-playlist-single .pkwy-mux-playlist__title a {
	color: inherit;
	text-decoration: none;
}
.pkwy-mux-playlist-single .pkwy-mux-playlist__title a:hover {
	color: var(--media-accent-color, #1cb0a2);
}

/* Archive: playlist cards use a different fallback icon + a fancier
   gradient for the "no thumbnail" state. */
.pkwy-mux-archive-item--playlist .pkwy-mux-archive-item__thumb--audio,
.pkwy-mux-archive-item--playlist.pkwy-mux-archive-item--no-thumb .pkwy-mux-archive-item__thumb {
	background: linear-gradient(135deg, #1cb0a2 0%, #2a3f54 100%);
}
.pkwy-mux-archive-item__playlist-icon {
	width: 48px;
	height: 48px;
	color: rgba(255, 255, 255, 0.85);
}
.pkwy-mux-archive-item__count {
	font-variant-numeric: tabular-nums;
}

/* Placeholder shown to logged-in editors when a stream isn't ready. */
.pkwy-mux-placeholder {
	display: inline-block;
	padding: 8px 12px;
	background: #fff5d6;
	color: #7a5f00;
	border-radius: 4px;
	font-size: 13px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.pkwy-mux-placeholder--missing { background: #fbd3d8; color: #8a1f2c; }

/* Playlist layouts. */
.pkwy-mux-playlist__items {
	list-style: none;
	margin: 0;
	padding: 0;
}
.pkwy-mux-playlist__item {
	margin: 0 0 24px;
}
.pkwy-mux-playlist__title {
	margin: 0 0 8px;
	font-size: 1.1em;
}
.pkwy-mux-playlist--grid .pkwy-mux-playlist__items {
	display: grid;
	grid-template-columns: repeat(var(--pkwy-mux-cols, 2), 1fr);
	gap: 24px;
}
.pkwy-mux-playlist--grid.pkwy-mux-playlist--cols-1 .pkwy-mux-playlist__items { --pkwy-mux-cols: 1; }
.pkwy-mux-playlist--grid.pkwy-mux-playlist--cols-2 .pkwy-mux-playlist__items { --pkwy-mux-cols: 2; }
.pkwy-mux-playlist--grid.pkwy-mux-playlist--cols-3 .pkwy-mux-playlist__items { --pkwy-mux-cols: 3; }
.pkwy-mux-playlist--grid.pkwy-mux-playlist--cols-4 .pkwy-mux-playlist__items { --pkwy-mux-cols: 4; }
@media (max-width: 690px) {
	.pkwy-mux-playlist--grid .pkwy-mux-playlist__items { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------------
   Stream Transcript — accessible expand/collapse for audio scripts.
   See includes/class-transcript.php for the rendered HTML shape.
   ---------------------------------------------------------------------- */
.pkwy-mux-transcript-wrap {
	margin: 1em 0;
}

/* Toggle button — looks like a text link, not a button. Inherits theme
   typography so it matches surrounding body copy. */
.pkwy-mux-transcript-toggle {
	background: transparent;
	border: 0;
	padding: 0;
	color: inherit;
	cursor: pointer;
	font: inherit;
	text-decoration: underline;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}
.pkwy-mux-transcript-toggle:hover,
.pkwy-mux-transcript-toggle:focus {
	text-decoration-thickness: 2px;
	outline: none;
}

/* CSS-only disclosure caret — rotates when aria-expanded flips to true. */
.pkwy-mux-transcript-icon::before {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 0 5px 7px;
	border-color: transparent transparent transparent currentColor;
	transition: transform 0.15s ease;
}
.pkwy-mux-transcript-toggle[aria-expanded="true"] .pkwy-mux-transcript-icon::before {
	transform: rotate(90deg);
}

/* Expanded region. Matches Salient's body type by default; we just add
   subtle background framing and outline:none so the focus ring (managed
   on the panel via tabindex=-1 in JS) doesn't double up. */
.pkwy-mux-transcript {
	margin-top: 1em;
	padding: 1em 1.25em;
	background: rgba(0, 0, 0, 0.04);
	border-radius: 4px;
	outline: none;
}
.pkwy-mux-transcript[hidden] { display: none; }

.pkwy-mux-transcript-title {
	margin: 0 0 0.5em;
	font-size: 1.1em;
}

.pkwy-mux-transcript-body > *:first-child { margin-top: 0; }
.pkwy-mux-transcript-body > *:last-child  { margin-bottom: 0; }

/* Close link — subtle text link at the bottom of the expanded region. */
.pkwy-mux-transcript-close {
	background: transparent;
	border: 0;
	padding: 0;
	margin-top: 1em;
	color: inherit;
	cursor: pointer;
	font: inherit;
	font-size: 0.9em;
	text-decoration: underline;
	opacity: 0.7;
	display: inline-block;
}
.pkwy-mux-transcript-close:hover,
.pkwy-mux-transcript-close:focus {
	opacity: 1;
	outline: none;
}

/* Editor-only "no transcript set" placeholder. */
.pkwy-mux-transcript-empty {
	color: #757575;
	font-size: 0.9em;
}

/* ----------------------------------------------------------------------
   Chrome-style trigger — visually integrates with an audio player below.
   Opt in via [pkwy_mux_transcript style="chrome"]. The button is a small
   pill with a CC-icon + "Transcript" text, right-aligned, sitting just
   below the player so the two read as one unit.
   ---------------------------------------------------------------------- */
.pkwy-mux-transcript-wrap--chrome {
	margin: 6px 0 0;
	text-align: right;
	/* Match the typical inline player width so the right-aligned button
	   lines up with the player's right edge. Override per-instance with
	   the `class` shortcode attr if your theme constrains differently. */
	max-width: 100%;
}

/* Hide the default text-link styling on the toggle when in chrome mode —
   .pkwy-mux-transcript-toggle--chrome supplies a complete replacement. */
.pkwy-mux-transcript-wrap--chrome .pkwy-mux-transcript-icon { display: none; }

.pkwy-mux-transcript-toggle--chrome {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px 5px 8px;
	/* Exact match to mux-player's audio chrome:
	     control bar bg = rgb(0, 0, 0)
	     icon color     = rgb(255, 255, 255)
	     button radius  = 3px
	   The accent color (--mux-accent) drives hover + expanded states so the
	   button reads as part of the same control family as play/mute/etc. */
	background: #000;
	color: #fff;
	border: 0;
	border-radius: 3px;
	font-family: inherit;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.pkwy-mux-transcript-toggle--chrome:hover {
	background: var(--mux-accent, #1CB0A2);
	color: #fff;
	text-decoration: none;
}
.pkwy-mux-transcript-toggle--chrome:focus {
	outline: 2px solid var(--mux-accent, #1CB0A2);
	outline-offset: 2px;
}
.pkwy-mux-transcript-toggle--chrome[aria-expanded="true"] {
	background: var(--mux-accent, #1CB0A2);
	color: #fff;
}

.pkwy-mux-transcript-cc-icon {
	width: 22px;
	height: 14px;
	display: block;
	flex-shrink: 0;
}

.pkwy-mux-transcript-chrome-label {
	line-height: 1;
}

/* Print: always show transcripts, hide controls so the script appears in
   printed pages regardless of click state. */
@media print {
	.pkwy-mux-transcript[hidden] { display: block !important; }
	.pkwy-mux-transcript-toggle,
	.pkwy-mux-transcript-close,
	.pkwy-mux-transcript-icon { display: none !important; }
	.pkwy-mux-transcript {
		background: transparent;
		padding: 0;
		margin-top: 0;
	}
}