/*
Theme Name: Варвара
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Author: Студия "Круглый Куб"
Author URI: https://round-cube.ru
Description: Певица Варвара
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.2
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: varvara
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/*
 * IMPORTANT: This file is only served on the frontend when `SCRIPT_DEBUG` is enabled;
 * in most instances, the `style.min.css` file will be served. It is not recommended that you
 * use the Theme File Editor to modify this stylesheet. Instead, add the necessary style
 * overrides via "Additional CSS" in the Site Editor.
 */

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */

/*AURORA*/
@property --a1 {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false
}

@property --a2 {
	syntax: '<angle>';
	initial-value: 60deg;
	inherits: false
}

@property --a3 {
	syntax: '<angle>';
	initial-value: 120deg;
	inherits: false
}

@property --p1 {
	syntax: '<percentage>';
	initial-value: 20%;
	inherits: false
}

@property --p2 {
	syntax: '<percentage>';
	initial-value: 50%;
	inherits: false
}

@property --p3 {
	syntax: '<percentage>';
	initial-value: 80%;
	inherits: false
}

:root {
	--night: #020510;
	--aurora1: #00ffcc;
	--aurora2: #00aaff;
	--aurora3: #aa44ff;
	--aurora4: #ff66aa;
	--aurora5: #44ffaa;
}
/*END AURORA*/

a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
}

/*
 * Prevents unnecessary scrollbars while handling long lines of preformatted text.
 * https://core.trac.wordpress.org/ticket/63875
 */
:where(pre) {
	overflow-x: auto;
}

/*
Custom style
*/
.wp-block-group {
	max-width: 1920px !important;
	margin: auto;
}
.main-text-animate {
	background: linear-gradient(135deg, #ffffff 38%, #721f0b 46%, #a83a1a 50%, #721f0b 54%, #ffffff 62%);
	background-size: 300% 300%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	animation: gradientShift 8s ease-in-out infinite;
	filter: drop-shadow(0 0 20px rgba(114, 31, 11, 0.1));
}

@keyframes gradientShift {
	0% {
		background-position: 0% 100%;
	}
	50% {
		background-position: 100% 0%;
	}
	100% {
		background-position: 0% 100%;
	}
}

:where(.wp-site-blocks *:focus) {
	outline-width: 0;
}

.albom-tabs-button {
	display: flex !important;
	width: 100% !important;
	gap: 0 !important; /* Убираем gap если есть */
}
.albom-tabs-button button {
	flex: 0 0 50% !important;
	width: 50% !important;
	max-width: 50% !important;
	text-align: center !important;
	box-sizing: border-box !important;
	border-top: 1px solid #2f2c2b;
}
.wp-block-tab-list button br + * {

}
/* Подзаголовок для кнопки "Альбомы" */
.home-albom-tabs-panel button:first-child::after {
	content: "Традиции, образы и чувства, объединённые музыкой";
	display: block;
	font-family: "Manrope", sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 140%;
	color: rgba(255, 255, 255, 0.65);
}

/* Подзаголовок для кнопки "Синглы" */
.home-albom-tabs-panel button:last-child::after {
	content: "Избранные песни и новые композиции";
	display: block;
	font-family: "Manrope", sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 140%;
	color: rgba(255, 255, 255, 0.65);
}
/* Активная вкладка */
.home-albom-tabs-panel button[aria-selected="true"] {
	border-top: 2px solid #fff;
	margin-top: -0.5px
}


:where(.wp-block-tab-list button)[aria-selected=true]:before {
	border-bottom: none;
}

.contact-columns {
	gap: 0;
}
.contact-column {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 2;
}
.telhref {
	text-decoration: none;
}
.contacts-block {
	position: relative;
}
.contacts-block::before {
	content: '';
	position: absolute;
	top: 0;
	left: 49.8%;
	transform: translateX(-50.2%);
	width: 100vw;
	height: 100%;
	background: #241f1e;
	z-index: -1;
	pointer-events: none;
}

.contact-bg {
	position: absolute;
	left: 0;
	bottom: -10px;
	z-index: 1;
}
.contact-top-line {
	background-color: rgba(36, 31, 30, 0.5);
	height: 50px;
	width: 80%;
	margin-left: auto;
}

#copyright {
	font-size: 14px;
	text-align: right;
	font-family: "Manrope", sans-serif;
}

.footer-group, footer {
	position: relative;
	height: auto;
}
footer {
	padding-top: 70px;
	padding-bottom: 70px;
}
.aurora-bg {
	position: absolute;
	width: 100%;
	height: calc(100% + 20px);
	top: -20px;
}
.footer-ul-menu {
	list-style: none;
	padding: 0;
}
.footer-ul-menu a {
	text-decoration: none;
}
.footer-ul-menu a:hover {
	text-decoration: underline;
}

/* AURORA */
#aurora {
	background: var(--night);
	font-family: 'Raleway', sans-serif;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 100%;
	height: 100%;
}

/* ── Stars layer ── */
.stars {
	position: absolute;
	inset: 0;
	background-image:
			radial-gradient(1px 1px at 10% 15%, rgba(255, 255, 255, .8) 0%, transparent 100%),
			radial-gradient(1px 1px at 25% 35%, rgba(255, 255, 255, .6) 0%, transparent 100%),
			radial-gradient(1.5px 1.5px at 40% 10%, rgba(255, 255, 255, .9) 0%, transparent 100%),
			radial-gradient(1px 1px at 55% 25%, rgba(255, 255, 255, .7) 0%, transparent 100%),
			radial-gradient(1px 1px at 70% 5%, rgba(255, 255, 255, .8) 0%, transparent 100%),
			radial-gradient(1px 1px at 80% 30%, rgba(255, 255, 255, .5) 0%, transparent 100%),
			radial-gradient(1.5px 1.5px at 90% 15%, rgba(255, 255, 255, .7) 0%, transparent 100%),
			radial-gradient(1px 1px at 15% 55%, rgba(255, 255, 255, .4) 0%, transparent 100%),
			radial-gradient(1px 1px at 35% 70%, rgba(255, 255, 255, .3) 0%, transparent 100%),
			radial-gradient(1px 1px at 60% 50%, rgba(255, 255, 255, .5) 0%, transparent 100%),
			radial-gradient(1px 1px at 75% 65%, rgba(255, 255, 255, .4) 0%, transparent 100%),
			radial-gradient(1.5px 1.5px at 5% 80%, rgba(255, 255, 255, .6) 0%, transparent 100%),
			radial-gradient(1px 1px at 45% 88%, rgba(255, 255, 255, .5) 0%, transparent 100%),
			radial-gradient(1px 1px at 95% 75%, rgba(255, 255, 255, .7) 0%, transparent 100%),
			radial-gradient(1px 1px at 20% 92%, rgba(255, 255, 255, .4) 0%, transparent 100%),
			radial-gradient(2px 2px at 85% 90%, rgba(255, 255, 255, .8) 0%, transparent 100%),
			radial-gradient(1px 1px at 50% 45%, rgba(255, 255, 255, .6) 0%, transparent 100%),
			radial-gradient(1px 1px at 3% 40%, rgba(255, 255, 255, .5) 0%, transparent 100%);
	animation: twinkle 6s ease-in-out infinite alternate;
}

@keyframes twinkle {
	0% {
		opacity: .7
	}

	50% {
		opacity: 1
	}

	100% {
		opacity: .5
	}
}

/* ── Aurora curtains ── */
.aurora {
	position: absolute;
	inset: 0;
	overflow: hidden;
	filter: blur(60px);
	opacity: .75;
	animation: auroraPulse 12s ease-in-out infinite alternate;
}

@keyframes auroraPulse {
	0% {
		opacity: .6;
		filter: blur(60px)
	}

	50% {
		opacity: .85;
		filter: blur(50px)
	}

	100% {
		opacity: .65;
		filter: blur(70px)
	}
}

.band {
	position: absolute;
	width: 200%;
	left: -50%;
	border-radius: 50%;
	transform-origin: center center;
}

.band-1 {
	height: 55vh;
	top: -10vh;
	background: conic-gradient(from var(--a1) at 40% 60%,
	transparent 0%,
	rgba(0, 255, 200, .5) 15%,
	rgba(0, 170, 255, .4) 30%,
	transparent 45%,
	rgba(170, 68, 255, .3) 60%,
	transparent 75%);
	animation: band1 18s linear infinite;
}

@keyframes band1 {
	to {
		--a1: 360deg
	}
}

.band-2 {
	height: 60vh;
	top: 5vh;
	background: conic-gradient(from var(--a2) at 60% 40%,
	transparent 0%,
	rgba(255, 102, 170, .4) 10%,
	rgba(0, 255, 200, .3) 25%,
	transparent 40%,
	rgba(0, 170, 255, .5) 55%,
	transparent 70%);
	animation: band2 24s linear infinite reverse;
}

@keyframes band2 {
	to {
		--a2: 420deg
	}
}

.band-3 {
	height: 50vh;
	top: -5vh;
	background: conic-gradient(from var(--a3) at 30% 70%,
	transparent 0%,
	rgba(68, 255, 170, .4) 20%,
	transparent 35%,
	rgba(255, 102, 170, .3) 50%,
	rgba(170, 68, 255, .4) 65%,
	transparent 80%);
	animation: band3 20s linear infinite;
}

@keyframes band3 {
	to {
		--a3: 480deg
	}
}
/* END AURORA */

.slider-buttons.__mobile {
	display: none;
}
@media (width <= 480px) {
	.main-cover {
		min-height: 600px !important;
	}
	.main-cover img{
		object-position: 50% 115px !important;
	}
	.home-albom-tabs-panel button:first-child::after,
	.home-albom-tabs-panel button:last-child::after {
		font-size: 12px;
		min-height: 52px;
	}
	.slider-control-title {
		font-size: 22px;
		margin-bottom: 20px;
	}
	.slider-container {
		padding: 0;
	}
	.slider-controls-card {
		flex-direction: column;
		min-height: auto;
		padding: 10px 28px;
	}
	.slider-controls-content {
		flex: 1;
	}
	.slider-control-bottom {
		flex-direction: column;
		gap: 30px;
	}
	.slider-control-bottom-left {
		justify-content: space-between;
	}
	.slider-btn {
		width: 100%;
	}
	.svertical-line{
		height: 62px !important;
		width: 12px;
	}
	.post-card {
		max-width: calc(100% - 96px);
		width: calc(100% - 96px);
		height: 210px;
	}
	.slider-card-top .post-thumbnail {
		height: 130px;
		width: auto;
	}
	.swiper-slide {
		height: 266px;
	}
	.slider-card-bg {
		opacity: 0.5;
	}

	.custom-video-slider-wrapper {
		margin-top: 50px;
		background-image: none;
		padding: 0;
	}
	.video-slider-container {
		flex-direction: column;
		padding: 0 20px 30px 20px;
	}
	.video-slider-controls-card {
		max-height: 100px;
		height: auto;
		min-height: auto;
		gap: 20px;
		padding: 20px 0;
	}
	.wheat-container {
		display: none;
	}
	.video-slider-container::after {
		display: none;
	}
	.video-slider-container .slider-control-bottom-left {
		justify-content: flex-start;
	}
	.video-block-title{
		font-size: 38px;
		margin-bottom: 20px;
	}
	.video-block-subtitle {
		font-size: 16px;
		margin-bottom: 26px;
	}
	.custom-video-swiper {
		margin-bottom: 30px;
	}
	.afisha-block-header {
		margin-top: 80px;
		padding: 0 20px;
		margin-bottom: 50px;
	}
	.afisha-block-subtitle {
		text-align: center;
		font-size: 15px;
	}
	.afisha-events-list {
		min-height: auto;
	}
	.slider-container.__audio .slider-controls-card {
		order: 2;
	}
	.__audio .slider-track-wrapper {
		min-height: inherit;
	}
	.__audio .slider-control-bottom-right {
		display: none;
	}
	.slider-buttons.__mobile {
		display: inherit;
	}
	.afisha-event-right {
		width: auto;
	}
	.afisha-event-button div {
		padding: 14px 14px;
	}
	.afisha-event-button {
		font-size: 12px;
		padding: 0;
	}
	.afisha-load-more {
		width: auto;
		padding: 0;
		z-index: 999;
		position: relative;
	}
	.__news-block .slider-controls-content {
		text-align: center;
		align-items: center;
	}
	.slider-control-title.__news-block {
		font-size: 43px;
		text-align: center;
		margin-bottom: 15px;
	}
	.__news-block .slider-control-subtitle {
		font-size: 12px;
		text-align: center;
	}
	.__news-block .slider-control-bottom-right {
		display: none;
	}
	.__news-block .slider-control-bottom {
		flex-direction: row;
		width: 100%;
	}
	.__news-block .slider-control-bottom-left {
		width: 100%;
	}
	.__news-block .slider-buttons {
		width: 100%;
	}
	.post-card.__news-block {
		height: inherit;
		min-height: stretch;
	}
}


/*JIG style*/
#jig1 .jig-caption-title,
#jig2 .jig-caption-title,
#jig3 .jig-caption-title,
#jig4 .jig-caption-title {
	font-family: Inter !important;
	font-size: 14px !important;
	font-weight: 300 !important;
}
#jig1 .jig-caption-description {
	font-family: Inter !important;
	color: #747373 !important;
	font-size: 12px !important;
	font-weight: 100 !important;
}