/* ==========================================================================
   /moje-nagrania - odtwarzacz audio
   Przepisane z c90pl-old/public/styles/theme-rec.scss.
   Zmiany wzgledem oryginalu:
     - `:root { color: white }` zawezone do `.my-rec`, zeby nie wyciekalo na cala strone
     - Google Fonts (Courgette) hostowany lokalnie
     - Material Icons zastapione wbudowanymi ikonami SVG
     - tytuly utworow: Courgette 140% zastapiony krojem systemowym (patrz --song-title-font)
   ========================================================================== */

@font-face {
	font-family: 'Courgette';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(/fonts/courgette-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
		U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
		U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Courgette';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(/fonts/courgette-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
		U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Krój tytułów utworów. Zmiana jednej linijki poniżej przełącza cały wygląd listy:

     var(--font-modern)     krój systemowy, bezszeryfowy — ustawienie bieżące
     var(--font-oryginalny) Courgette, czyli to, co było na starej stronie
     var(--font-strony)     Georgia italic, spójne z nagłówkami reszty serwisu

   Courgette zostaje zadeklarowany w @font-face powyżej i nic nie kosztuje, dopóki
   go nie użyjesz — przeglądarka pobiera plik woff2 dopiero wtedy, gdy jakiś
   element faktycznie prosi o ten krój. */
.my-rec {
	--font-modern: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-oryginalny: 'Courgette', cursive;
	--font-strony: Georgia, serif;

	--song-title-font: var(--font-modern);

	color: white;
	padding: 0;
	box-sizing: border-box;
	font-family: Verdana, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	visibility: hidden;
}

.my-rec .audio-player {
	position: relative;
	max-width: 500px;
	margin-left: 30px;
	margin-top: -20px;
	margin-bottom: 0;
	display: flex;
	flex-direction: column;
	min-width: 400px;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
}

.my-rec .player-buttons {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	margin-left: 10px;
	margin-right: 10px;
}

.my-rec div.play {
	position: relative;
	margin-top: 10px;
	width: 100px;
	height: 100px;
	background: #312717;
	border-radius: 100%;
	box-shadow: 5px -2px 2px -3px rgba(255, 255, 255, 0.35), 0 0 4px 3px rgba(0, 0, 0, 0.7),
		6px -1px 0 -2px rgba(0, 0, 0, 0.3), inset 0 0 1px 0 rgba(255, 255, 155, 0.1);
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
}

.my-rec div.prev,
.my-rec div.next,
.my-rec div.vup,
.my-rec div.vdown {
	position: relative;
	margin-top: 30px;
	width: 50px;
	height: 50px;
	background: #312717;
	border-radius: 100%;
	box-shadow: 3px -2px 2px -3px rgba(255, 255, 255, 0.35), 0 0 4px 3px rgba(0, 0, 0, 0.7),
		inset 0 0 1px 0 rgba(255, 255, 155, 0.1);
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* --- ikony (zamiast Material Icons) --------------------------------------- */

.my-rec .icon {
	width: 24px;
	height: 24px;
	display: block;
	fill: gold;
	filter: drop-shadow(0 0 6px gold);
	pointer-events: none;
}

.my-rec .icon-pause {
	display: none;
}

.my-rec div.play.is-playing .icon-play {
	display: none;
}

.my-rec div.play.is-playing .icon-pause {
	display: block;
}

/* --- pasek postepu -------------------------------------------------------- */

.my-rec div.duration {
	margin-top: -10px;
	margin-bottom: 30px;
	color: gold;
}

.my-rec div.seek-bar {
	margin-top: 0;
	position: absolute;
	width: 100%;
}

.my-rec span.all {
	z-index: 8;
	position: absolute;
	margin-top: 3px;
	width: 100%;
	justify-content: center;
	height: 8px;
	display: block;
	border-radius: 100px;
	border: 0 solid rgba(255, 255, 255, 0.05);
	margin-right: 0;
	box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3), inset 0 2px 11px rgba(0, 0, 0, 0.6);
}

.my-rec span.over {
	z-index: 11;
	position: absolute;
	width: 100%;
	justify-content: center;
	height: 30px;
	display: block;
	margin-top: 0;
	border-radius: 0;
	margin-right: 0;
	cursor: pointer;
}

.my-rec span.left {
	z-index: 9;
	position: absolute;
	margin-top: 3px;
	width: 100%;
	justify-content: center;
	height: 8px;
	display: block;
	border-radius: 100px;
	border: 0 solid rgba(43, 7, 7, 0.05);
	margin-right: 45px;
	box-shadow: inset 0 0 25px rgba(255, 255, 255, 0.5), 0 0 10px gold;
	background: gold;
}

.my-rec span.ptr {
	position: absolute;
	width: 30px;
	height: 30px;
	display: inline-block;
	background: #312717;
	left: -15px;
	margin-left: 0;
	margin-top: -8px;
	border-radius: 100px;
	overflow: hidden;
	z-index: 10;
	box-shadow: inset -3px 5px 5px -2px rgba(255, 255, 255, 0.2),
		inset 5px -3px 8px -2px rgba(0, 0, 0, 0.2), inset 0 0 55px rgba(0, 0, 0, 0.3);
	cursor: pointer;
}

.my-rec .audio-player .times {
	padding: 0;
	margin: 0 0 10px;
	display: flex;
	color: gold;
	text-shadow: 0 0 25px rgba(255, 255, 255, 0.5), 0 0 10px gold;
}

.my-rec .audio-player .times .tot-time {
	flex: 1;
	text-align: right;
}

/* --- lista utworow -------------------------------------------------------- */

/* Nagłówki sekcji (Guitar / Piano / Tenor Sax). Globalne h3 ma 24 px — tutaj to za
   dużo, bo nagłówek konkuruje z tytułami utworów. 18 px to rozmiar h4 z site.css,
   więc trzymamy się skali typograficznej reszty serwisu zamiast wymyślać nową. */
.my-rec h3 {
	color: rgb(26, 18, 1);
	font-size: 18px;
	margin-bottom: 0;
	margin-top: 15px;
}

.my-rec ol {
	list-style-type: decimal;
	margin-left: 55px;
}

.my-rec li :hover {
	color: goldenrod;
	cursor: pointer;
}

.my-rec .song-title {
	font-size: 118%;
	font-family: var(--song-title-font);
	font-weight: 600;
	letter-spacing: 0.005em;
	margin-left: 3px;
}

.my-rec .song-composer {
	font-size: 80%;
	margin-left: 12px;
	opacity: 0.75;
}

.my-rec .info {
	margin-top: 30px;
	font-size: 80%;
	color: rgb(26, 18, 1);
}

.my-rec a {
	text-decoration: underline;
}

.my-rec a:hover {
	color: goldenrod;
}