/* No Kings Jukebox. Uses the No Kings Broadsheet theme's colours when present, with fallbacks. */
.nkj-week,
.nkj-library {
	--nkj-ink: var(--wp--preset--color--contrast, #16130F);
	--nkj-paper: var(--wp--preset--color--base, #F4F0E6);
	--nkj-white: var(--wp--preset--color--accent-6, #FFFDF8);
	--nkj-spot: var(--wp--preset--color--accent-1, #A8231B);
	--nkj-rule: var(--wp--preset--color--accent-3, #B9B09C);
	--nkj-muted: var(--wp--preset--color--accent-4, #3A342C);
	--nkj-label: var(--wp--preset--font-family--oswald, "Arial Narrow", sans-serif);
	--nkj-display: var(--wp--preset--font-family--playfair-display, Georgia, serif);
}
[hidden] { display: none !important; }

/* ---------- Buttons ---------- */
.nkj-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	gap: 6px;
	padding: 0;
	margin: 0;
	cursor: pointer;
	border-radius: 50%;
	border: 1px solid var(--nkj-ink);
	background: var(--nkj-ink);
	color: var(--nkj-paper);
	line-height: 1;
	text-decoration: none;
	font: inherit;
}
.nkj-btn:focus-visible { outline: 2px solid var(--nkj-spot); outline-offset: 3px; }
.nkj-btn .nkj-svg--pause,
.nkj-btn .nkj-svg--bars { display: none; }
.nkj-btn.is-playing .nkj-svg--play { display: none; }
.nkj-btn.is-playing .nkj-svg--pause { display: block; }

.nkj-btn--big { width: 64px; height: 64px; border: 2px solid #F4F0E6; background: var(--nkj-spot); color: #F4F0E6; }
.nkj-btn--big .nkj-svg { width: 24px; height: 24px; }
.nkj-btn--big:hover { filter: brightness(1.15); }

.nkj-btn--row { width: 40px; height: 40px; }
.nkj-btn--row .nkj-svg { width: 16px; height: 16px; }
.nkj-btn--row:hover,
.nkj-btn--row:focus-visible { background: var(--nkj-spot); border-color: var(--nkj-spot); color: #FFFDF8; }
.nkj-btn--out { background: transparent; color: var(--nkj-ink); }
.nkj-btn--none { visibility: hidden; }
/* Row state: current song shows animated bars; hover a playing row to see "pause". */
.is-current > .nkj-row__line .nkj-btn--row { background: var(--nkj-spot); border-color: var(--nkj-spot); color: #FFFDF8; }
.is-current > .nkj-row__line .nkj-btn--row .nkj-svg--play { display: none; }
.is-current:not(.is-playing) > .nkj-row__line .nkj-btn--row .nkj-svg--play { display: block; }
.is-playing > .nkj-row__line .nkj-btn--row .nkj-svg--bars { display: block; }
.is-playing > .nkj-row__line .nkj-btn--row:hover .nkj-svg--bars,
.is-playing > .nkj-row__line .nkj-btn--row:focus-visible .nkj-svg--bars { display: none; }
.is-playing > .nkj-row__line .nkj-btn--row:hover .nkj-svg--pause,
.is-playing > .nkj-row__line .nkj-btn--row:focus-visible .nkj-svg--pause { display: block; }
.nkj-bar { transform-origin: center bottom; transform-box: fill-box; animation: nkj-bounce 0.9s ease-in-out infinite; }
.nkj-bar--2 { animation-delay: -0.3s; }
.nkj-bar--3 { animation-delay: -0.6s; }
@keyframes nkj-bounce { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .nkj-bar { animation: none; } }

/* Prev / play / next / shuffle */
.nkj-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nkj-btn--ctl { width: 40px; height: 40px; background: transparent; color: var(--nkj-ink); }
.nkj-btn--ctl .nkj-svg { width: 18px; height: 18px; }
.nkj-btn--ctl:hover { background: var(--nkj-ink); color: var(--nkj-paper); }
.nkj-btn--main { width: 48px; height: 48px; background: var(--nkj-ink); color: var(--nkj-paper); }
.nkj-btn--main:hover { background: var(--nkj-spot); border-color: var(--nkj-spot); color: #FFFDF8; }
.nkj-btn--shuffle { width: auto; padding: 0 14px; border-radius: 20px; height: 36px; }
.nkj-btn__text { font-family: var(--nkj-label); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.nkj-btn--shuffle[aria-pressed="true"] { background: var(--nkj-spot); border-color: var(--nkj-spot); color: #FFFDF8; }

/* ---------- Screen: poster until play, then the (small) player ---------- */
.nkj-screen { position: relative; }
.nkj-screen__poster {
	background-color: #2B2620;
	background-image: radial-gradient(#4A443B 1.1px, transparent 1.3px);
	background-size: 6px 6px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px;
	text-align: center;
	color: #F4F0E6;
	box-sizing: border-box;
	height: 200px;
}
.nkj-screen__note { font-size: 12px; line-height: 1.4; margin: 0; color: #CFC6B4; max-width: 30ch; }
.nkj-screen__stage { background: #000; }
.nkj-yt, .nkj-yt iframe { display: block; width: 100%; height: 200px; border: 0; }
.nkj-screen__stage audio { display: block; width: 100%; background: var(--nkj-paper); }
.nkj-embed iframe { display: block; width: 100%; border: 0; }

/* ---------- Front page: the black box is the player ---------- */
.nkj-box { background: var(--nkj-ink); color: var(--nkj-paper); padding: 22px; }
.nkj-box > * { margin-top: 0 !important; margin-bottom: 12px !important; }
.nkj-box > *:last-child { margin-bottom: 0 !important; }
.nkj-box .nkj-featured__title { color: var(--nkj-paper); }
.nkj-box .nkj-screen__poster { border: 1px solid #4A443B; }
.nkj-box .nkj-screen__stage audio { background: transparent; }
.nkj-box .nkj-controls { gap: 8px; }
.nkj-box .nkj-btn--ctl { color: var(--nkj-paper); border-color: #6B635A; }
.nkj-box .nkj-btn--ctl:hover { background: var(--nkj-paper); color: var(--nkj-ink); }
.nkj-box .nkj-btn--main { background: var(--nkj-spot); border-color: var(--nkj-spot); color: #FFFDF8; }
.nkj-box .nkj-btn--main:hover { filter: brightness(1.15); background: var(--nkj-spot); }
.nkj-box .nkj-note { font-size: 15px; line-height: 1.5; }
.nkj-now__hint { font-size: 12px; font-style: italic; margin: 0; }
.nkj-box .nkj-now__hint { color: #CFC6B4; }
.nkj-player--box:not(.is-started) .nkj-controls { display: none; }

/* Rotation list */
ol.nkj-rotation { list-style: none; padding: 0; margin: 0 0 12px; }
ol.nkj-rotation > li.nkj-row { padding: 10px 0; border-top: 1px solid var(--nkj-rule); font-size: 15px; }
ol.nkj-rotation > li.nkj-row:last-child { border-bottom: 1px solid var(--nkj-rule); }
.nkj-row__line { display: flex; align-items: center; gap: 12px; }
.nkj-row__text { line-height: 1.35; }
.nkj-row__title { font-weight: 600; text-decoration: none; color: inherit; }
.nkj-row__title:hover { text-decoration: underline; }
.nkj-row__meta { color: var(--nkj-muted); }
.nkj-row.is-current .nkj-row__title { color: var(--nkj-spot); }
.nkj-subhead { margin-bottom: 0 !important; }
.nkj-head { margin-bottom: 16px; }
.nkj-empty { font-style: italic; }

/* ---------- Jukebox page: Now Playing panel ---------- */
.nkj-now {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + 12px);
	z-index: 20;
	display: grid;
	grid-template-columns: 356px minmax(0, 1fr);
	gap: 20px;
	align-items: center;
	padding: 16px;
	margin: 0 0 8px;
	background: var(--nkj-white);
	border: 2px solid var(--nkj-ink);
	box-shadow: 0 6px 0 -2px var(--nkj-paper), 0 8px 0 -2px var(--nkj-rule);
}
.nkj-now__info { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.nkj-now__info > p { margin: 0; }
.nkj-now__label { font-family: var(--nkj-label); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--nkj-muted); }
.nkj-now__title { font-family: var(--nkj-display); font-weight: 900; font-size: 28px; line-height: 1.1; color: var(--nkj-ink); }
.nkj-now__artist { font-style: italic; color: var(--nkj-muted); }
.nkj-now .nkj-controls { margin-top: 10px; }
.nkj-now .nkj-screen__poster { height: 200px; }
@media (max-width: 720px) {
	.nkj-now { position: relative; top: auto; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 12px; }
	.nkj-now__title { font-size: 22px; }
	/* On phones the panel scrolls with the page, and the screen only appears once playing. */
	.nkj-player--panel:not(.is-started) .nkj-now .nkj-screen { display: none; }
	.nkj-player--panel:not(.is-started) .nkj-now .nkj-controls { margin-top: 6px; }
}

/* ---------- Jukebox page: song list ---------- */
ol.nkj-list { list-style: none; padding: 0; margin: 0; }
.nkj-item { padding: 18px 0; border-bottom: 1px solid var(--nkj-rule); scroll-margin-top: 280px; }
.nkj-item__line { align-items: flex-start !important; gap: 16px !important; }
.nkj-item .nkj-btn--row { margin-top: 6px; width: 44px; height: 44px; }
.nkj-item__head > * { margin: 0 !important; }
.nkj-item__head .is-style-nk-kicker { margin-bottom: 2px !important; }
.nkj-item__title { font-size: 24px; line-height: 1.15; }
.nkj-item__artist { font-style: italic; color: var(--nkj-muted); }
.nkj-item__note { margin: 10px 0 0 60px !important; font-size: 16px; }
.nkj-item.is-current { background: linear-gradient(90deg, rgba(168, 35, 27, 0.07), transparent 75%); }
.nkj-item.is-current .nkj-item__title { color: var(--nkj-spot); }
.nkj-item:target { background: linear-gradient(90deg, rgba(168, 35, 27, 0.06), transparent 70%); }
@media (max-width: 600px) {
	.nkj-item__note { margin-left: 0 !important; }
	.nkj-item__title { font-size: 21px; }
}