/**
 * Theme Name:  Sonaar
 * Theme URI:   https://sonaar.io/
 * Description: Music and Podcast WordPress Themes - Sonaar designs and develops creative WordPress Themes for Musicians, Music Bands and Podcasters
 * Tags: custom-colors, custom-header, custom-menu, featured-images
 *
 * Author:      Sonaar Music
 * Author URI:  https://sonaar.io
 *
 * Version:     4.27.4
 * Text Domain: sonaar
 *
 * License:     GNU General Public License v2 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
**/

:root {
	--phono-text-ticket-background: var(--sr-global-body-bg-color, rgb(33, 33, 33));
	--phono-text-ticket-color: #ffffff;
	--phono-text-ticket-height: 60px;
	--phono-header-height: 0px;
	--phono-header-top: 59px;
	--phono-admin-bar-height: 0px;
}

body.has-phono-text-ticket {
	padding-top: calc(var(--phono-text-ticket-height) + var(--phono-header-height));
}

body.admin-bar {
	--phono-admin-bar-height: 32px;
}

.phono-text-ticket {
	position: fixed;
	top: var(--phono-admin-bar-height);
	left: 0;
	z-index: 99;
	width: 100%;
	overflow: hidden;
	background: var(--phono-text-ticket-background);
	color: var(--phono-text-ticket-color);
	font-family: inherit;
	font-size: clamp(24px, 2.2vw, 32px);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	white-space: nowrap;
}

body.has-phono-text-ticket .phono-stacked-header {
	position: fixed !important;
	top: var(--phono-header-top) !important;
	right: 0;
	left: 0;
	width: 100%;
	z-index: 99;
	transition-property: opacity, background-color, box-shadow, padding, margin, height !important;
}

/* Elementor must not create a second fixed layer inside the fixed header. */
body.has-phono-text-ticket .phono-stacked-header .elementor-sticky--active {
	position: relative !important;
	top: auto !important;
	width: 100% !important;
}

.phono-text-ticket--mobile {
	display: none;
}

.phono-text-ticket__track {
	display: flex;
	width: max-content;
	-webkit-animation: phono-text-ticket-scroll var(--phono-text-ticket-duration, 70s) linear infinite;
	animation: phono-text-ticket-scroll var(--phono-text-ticket-duration, 70s) linear infinite;
	will-change: transform;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.phono-text-ticket:hover .phono-text-ticket__track,
.phono-text-ticket:focus-within .phono-text-ticket__track {
	-webkit-animation-play-state: paused;
	animation-play-state: paused;
}

.phono-text-ticket__group {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.phono-text-ticket__entry {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	gap: 28px;
	margin-right: 28px;
	padding: 0.8em 0;
}

.phono-text-ticket__entry::after {
	content: "-";
	color: var(--phono-text-ticket-color);
}

.phono-text-ticket__item {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	color: var(--phono-text-ticket-color);
	text-decoration: none;
}

.phono-text-ticket__item:hover,
.phono-text-ticket__item:focus-visible {
	color: inherit;
	text-decoration: underline;
}

@media screen and (max-width: 782px) {
	body.admin-bar {
		--phono-admin-bar-height: 46px;
	}
}

@media screen and (max-width: 767px) {
	.phono-text-ticket--desktop {
		display: none;
	}

	.phono-text-ticket--mobile {
		display: block;
	}
}

@media screen and (min-width: 768px) {
	.phono-text-ticket__entry {
		padding: 0.65em 0;
	}
}

.phono-playlist-archive {
	width: 100%;
	margin: 50px 0 0;
	overflow: hidden;
	padding: 0 5%;
	box-sizing: border-box;
}

.phono-playlist-archive__inner {
	width: 100%;
}

@media (prefers-reduced-motion: reduce) {
	.phono-text-ticket__track {
		animation: none;
	}
}

@keyframes phono-text-ticket-scroll {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(-50%, 0, 0);
	}
}

@-webkit-keyframes phono-text-ticket-scroll {
	from {
		-webkit-transform: translate3d(0, 0, 0);
	}

	to {
		-webkit-transform: translate3d(-50%, 0, 0);
	}
}

.esg-entry-skin-album-click-and-play .eg-album-click-and-play-element-28 > p,
.eg-item-skin-48-element-28 > p {
	margin: 0 !important;
	padding: 0;
}

/* Replace missing legacy theme images so they do not generate frontend 404s. */
.ajax-load {
	background-image: url("images/ajax-loader.gif");
}

.iosSlider .slider .item .inner .selectorShadow {
	background-image: none;
}

.sliderContainer .slideSelectors .prev,
.sliderContainer .slideSelectors .next {
	background-image: none;
	border-block-start: 2px solid currentColor;
	border-inline-start: 2px solid currentColor;
}

.sliderContainer .slideSelectors .prev {
	transform: rotate(-45deg);
}

.sliderContainer .slideSelectors .next {
	transform: rotate(135deg);
}

.select-area .select-opener {
	background-image: none;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}

.iron_widget_twitter .sr_it-meta::after {
	background-image: none;
}

/* Neutralise the placeholder URL saved in Appearance > Custom CSS (post 6743). */
.elementor-post__thumbnail:not([style*="background-image"]) {
	background-image: none !important;
}