/* VietGuitar static — song page (v6 chord layout).
 * Copied from the v6 layout inline <style> + assets/style.css selectors that
 * the exported body markup (vgo-line/vgo-block/vgo-text) depends on. Kept in a
 * separate file so the Joomla-era style.css can stay byte-identical.
 */

/* --- Chord body (v6 renderer output) --- */
.hopam_content pre {
	white-space: pre-wrap !important;
	word-wrap: break-word;
	line-height: 3.2em !important; /* Space for chords above lyrics */
	font-family: 'Roboto Mono', Consolas, 'Courier New', monospace;
	overflow-x: hidden;
	background: #fff;
	padding: 15px;
	border: 1px solid #eee;
	border-radius: 8px;
}
.vgo-line {
	display: block;
	margin-bottom: 0.5em;
}
.vgo-block {
	display: inline-flex;
	flex-direction: column-reverse; /* Text at bottom, Chord at top */
	vertical-align: bottom;
	line-height: normal;
	margin-right: 0px;
}
.hopam_chord {
	height: 1.4em;
	line-height: 1.4em;
	color: #d9534f; /* Modern red for chords */
	font-weight: 700;
	font-size: 0.95em;
	display: block;
	text-align: left;
	white-space: nowrap;
}
.vgo-text {
	display: block;
	line-height: 1.4em;
	color: #333;
	white-space: pre; /* Keep original spacing within blocks */
}
/* Fix for empty chords to maintain line height */
.hopam_chord:empty {
	height: 1.4em;
	visibility: hidden;
}
.dark-mode .vgo-text { color: #eee; }
.dark-mode .hopam_chord { color: #ff5f5f; }

/* --- Hide-chords state (Lời) --- */
.song-text-hide-chords .hopam_chord {
	display: none !important;
}
.song-text-hide-chords pre {
	line-height: 1.6 !important;
}

/* --- Chord diagrams (jtab renders .sidebarchord into SVG) --- */
.vgo-chords-bottom {
	background: #f8f9fa;
	border-radius: 16px;
	padding: 30px;
	margin: 50px 0;
	border: 1px solid #e9ecef;
}
.vgo-chords-bottom .vgo-chords-title {
	font-weight: 800;
	font-size: 22px;
	letter-spacing: -0.5px;
	color: #212529;
	margin-bottom: 25px;
	text-transform: uppercase;
}
.vgo-chords-bottom .chord_container {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	justify-content: flex-start;
}
.vgo-chords-bottom .sidebarchord {
	background: #fff;
	padding: 15px;
	border-radius: 10px;
	border: 1px solid #dee2e6;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.03);
	transition: all 0.3s;
	width: calc(25% - 15px) !important;
	min-width: 150px;
}
.vgo-chords-bottom .sidebarchord:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
	border-color: #ced4da;
}

/* --- Transpose bar (12 keys) --- */
.trans_bar {
	margin-top: 20px;
	z-index: 3;
	display: none;
	background: #ccc;
	padding: 5px 3px;
	border-radius: 5px;
	box-shadow: 2px 1px 2px #ebebeb;
}
.trans_bar .trans_list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}
.chord_inline {
	cursor: pointer;
	padding: 4px 8px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-weight: 600;
}
.chord_inline.selected {
	background: #0d6efd;
	color: #fff;
	border-color: #0d6efd;
}

/* --- Scroll panel --- */
#scroll_panel .hover {
	cursor: pointer;
}
#scroll_panel .hover.color {
	background: #0d6efd !important;
	color: #fff !important;
	border-color: #0d6efd !important;
}

/* --- Chord hover popup (#chord_view) --- */
#chord_view {
	display: none;
	position: absolute;
	z-index: 999;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 10px;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}
#chord_view .closebutton {
	cursor: pointer;
	float: right;
	font-weight: 700;
	color: #999;
}

/* --- Inline chord view (bottom dock) --- */
#inline_chordview {
	position: fixed;
	width: 100%;
	bottom: 0;
	left: 0;
	background-color: #e8e8e8;
	padding: .2em;
	-webkit-box-shadow: -1px 1px 10px 1px #888;
	box-shadow: -1px 1px 10px 1px #888;
	display: none;
	z-index: 999;
	text-align: center;
}
#inline_chordview.on {
	display: block;
}
#inline_chordview .closebutton {
	cursor: pointer;
	font-weight: 700;
	color: #999;
}

/* --- Mobile bars (hidden on desktop by default; toggled by JS) --- */
#mobilesidebar,
#vgofooter {
	display: none;
}

/* --- Print --- */
@media print {
	.hide-in-print {
		display: none !important;
	}
	.vgo-control-bar,
	#scroll_panel,
	.trans_bar,
	#chord_view,
	#inline_chordview,
	#mobilesidebar,
	#vgofooter {
		display: none !important;
	}
}

/* --- Mobile optimization --- */
@media only screen and (max-width: 768px) {
	.vgo-chords-bottom .sidebarchord {
		width: calc(50% - 10px) !important;
	}
	.vgo-desktop-only {
		display: none !important;
	}
}