/* GHJ track player. Brand: Purple #6A2C9E, Burnt Orange #E8590C, Light #EDE6EA, Muted #C2B5BD, Hairline #3A2A4D. */
.ghj-player {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 10px 14px;
	border: 1px solid #3A2A4D;
	border-radius: 999px;
	background: rgba(20, 10, 31, .55);
}

/* The theme and the Elementor kit both style bare <button>, and their stylesheets load after
   this one, so every property the kit sets has to be restated at higher specificity. */
.ghj-player button.ghj-player__toggle {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	min-width: 38px;
	height: 38px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: #E8590C;
	color: #140A1F;
	box-shadow: none;
	cursor: pointer;
	transition: transform .15s ease, background-color .15s ease;
}

.ghj-player button.ghj-player__toggle:hover,
.ghj-player button.ghj-player__toggle:focus { background: #ff6b18; color: #140A1F; transform: scale(1.06); }
.ghj-player button.ghj-player__toggle:focus-visible { outline: 2px solid #EDE6EA; outline-offset: 2px; }

.ghj-player .ghj-player__icon { width: 20px; height: 20px; fill: currentColor; display: block; }
.ghj-player .ghj-player__icon--pause { display: none; }
.ghj-player.is-playing .ghj-player__icon--play { display: none; }
.ghj-player.is-playing .ghj-player__icon--pause { display: block; }

.ghj-player__track { flex: 1 1 auto; min-width: 0; }

.ghj-player__seek {
	position: relative;
	height: 6px;
	border-radius: 3px;
	background: #3A2A4D;
	cursor: pointer;
}

.ghj-player__seek:focus-visible { outline: 2px solid #EDE6EA; outline-offset: 4px; }

.ghj-player__fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	border-radius: 3px;
	background: #E8590C;
}

.ghj-player__seek::after {
	content: "";
	position: absolute;
	top: 50%;
	left: var(--ghj-progress, 0%);
	width: 12px;
	height: 12px;
	margin-left: -6px;
	border-radius: 50%;
	background: #EDE6EA;
	transform: translateY(-50%) scale(0);
	transition: transform .15s ease;
}

.ghj-player:hover .ghj-player__seek::after,
.ghj-player.is-playing .ghj-player__seek::after { transform: translateY(-50%) scale(1); }

.ghj-player__time {
	flex: 0 0 auto;
	font-family: Oswald, sans-serif;
	font-size: 14px;
	letter-spacing: .04em;
	color: #C2B5BD;
	font-variant-numeric: tabular-nums;
}

.ghj-player__audio { display: none; }

.ghj-track-meta {
	margin: 0;
	font-family: Oswald, sans-serif;
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #C2B5BD;
}

/* A music section removes itself when the page has nothing to play. See GHJ_Music::body_class. */
body:not(.ghj-has-tracks) .ghj-music-section,
body:not(.ghj-has-ark-music) .ghj-ark-music-section,
body:not(.ghj-has-music) .ghj-music-strip { display: none !important; }

.ghj-track-links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.ghj-track-links a.ghj-track-link {
	display: inline-flex;
	align-items: center;
	padding: 12px 22px;
	border: 1px solid #E8590C;
	border-radius: 6px;
	font-family: Oswald, sans-serif;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}

.ghj-track-links a.ghj-track-link--primary { background: #E8590C; color: #140A1F; }
.ghj-track-links a.ghj-track-link--primary:hover { background: #ff6b18; color: #140A1F; }
.ghj-track-links a.ghj-track-link--ghost { background: transparent; color: #EDE6EA; border-color: #3A2A4D; }
.ghj-track-links a.ghj-track-link--ghost:hover { border-color: #E8590C; color: #E8590C; }

@media (max-width: 480px) {
	.ghj-player { padding: 8px 10px; gap: 10px; }
	.ghj-player button.ghj-player__toggle { width: 34px; min-width: 34px; height: 34px; }
	.ghj-player__time { font-size: 13px; }
}

/* ---- Cover art ------------------------------------------------------- */

.ghj-artwork { position: relative; display: block; line-height: 0; }

/* Cover art is square (Suno makes it that way) and fills the top of the card edge to edge,
   the same shape the character cards use. */
.ghj-artwork--card img {
	width: 100%;
	max-width: none;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center center;
	display: block;
}

.ghj-artwork--hero img {
	width: 280px;
	max-width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 12px;
	display: block;
}

.ghj-artwork img {
	cursor: zoom-in;
	transition: transform .25s ease, filter .25s ease;
}

.ghj-artwork:hover img { filter: brightness(1.06); }

/* A small hint that the picture opens, rather than leaving people to guess. */
.ghj-artwork::after {
	content: "";
	position: absolute;
	right: 12px;
	bottom: 12px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(20, 10, 31, .72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23EDE6EA'%3E%3Cpath d='M10 3H3v7h2V6.4l4.3 4.3 1.4-1.4L6.4 5H10zm4 18h7v-7h-2v3.6l-4.3-4.3-1.4 1.4 4.3 4.3H14z'/%3E%3C/svg%3E") center / 17px 17px no-repeat;
	opacity: 0;
	transform: scale(.85);
	transition: opacity .2s ease, transform .2s ease;
	pointer-events: none;
}

.ghj-artwork:hover::after,
.ghj-artwork:focus-within::after { opacity: 1; transform: scale(1); }

.ghj-artwork img:focus-visible { outline: 3px solid #E8590C; outline-offset: -3px; }

/* ---- Card actions ---------------------------------------------------- */

.ghj-card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin-top: 2px;
}

.ghj-card-actions a.ghj-card-action {
	font-family: Oswald, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #E8590C;
	text-decoration: none;
	border-bottom: 1px solid rgba(232, 89, 12, .4);
	padding-bottom: 2px;
}

.ghj-card-actions a.ghj-card-action:hover { color: #EDE6EA; border-bottom-color: #EDE6EA; }

/* ---- Lyrics ---------------------------------------------------------- */

.ghj-lyrics { max-width: 620px; }

.ghj-lyrics__verse {
	margin: 0 0 1.6em;
	font-family: Inter, sans-serif;
	font-size: 17px;
	line-height: 1.85;
	color: #EDE6EA;
}

.ghj-lyrics__verse:last-child { margin-bottom: 0; }

/* Sections that only exist when the song has that part. See GHJ_Music::body_class. */
body:not(.ghj-has-lyrics) .ghj-lyrics-section,
body:not(.ghj-has-story) .ghj-story-section { display: none !important; }

/* ---- Lightbox -------------------------------------------------------- */

.ghj-lightbox {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 5vmin;
	background: rgba(7, 4, 11, .92);
	backdrop-filter: blur(6px);
}

.ghj-lightbox.is-open { display: flex; }
body.ghj-lightbox-open { overflow: hidden; }

.ghj-lightbox__figure {
	margin: 0;
	max-width: 100%;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.ghj-lightbox__figure img {
	max-width: 100%;
	max-height: 82vh;
	width: auto;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}

.ghj-lightbox__figure figcaption {
	font-family: Oswald, sans-serif;
	font-size: 15px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #C2B5BD;
	text-align: center;
}

.ghj-lightbox button.ghj-lightbox__close {
	position: absolute;
	top: 18px;
	right: 18px;
	width: 44px;
	height: 44px;
	min-width: 44px;
	padding: 0;
	margin: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #3A2A4D;
	border-radius: 50%;
	background: rgba(30, 16, 41, .9);
	color: #EDE6EA;
	cursor: pointer;
}

.ghj-lightbox button.ghj-lightbox__close:hover { background: #E8590C; color: #140A1F; border-color: #E8590C; }
.ghj-lightbox button.ghj-lightbox__close svg { width: 22px; height: 22px; fill: currentColor; }

@media (prefers-reduced-motion: reduce) {
	.ghj-artwork img,
	.ghj-artwork::after { transition: none; }
}