/*
Theme Name: Proteatr
Description: Child theme for Theatre WP.
Template: theatre-wp
Version: 1.0.9
Text Domain: theatre-wp-child
*/

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');

:root {
	--primary-red: #850D17;
	--primary-red-hover: #9d202a;
	--primary-yellow: #FCC63F;
	--main-margin-bottom: 50px;
}

body {
	color: #ffffff;
	background:
		url(/wp-content/uploads/img/lights.png) no-repeat top 0 left -451px,
		url(/wp-content/uploads/2024/04/footer-bg-2.jpg) no-repeat bottom center;
}

a {
	text-decoration: revert;
}

.text-small {
	line-height: 1.4;
	font-size: 1.1em;
}

.special-title::before {
	content: none;
}

/*
 * Страница спектакля (single class): на проде заголовок в контенте WCS,
 * hero-заголовок темы скрыт. Кастом был в weekly-class templates/single/content.php.
 */
.single-class .ct-header__main-heading {
	display: none !important;
}

#single-wcs-event h1 {
	color: var(--primary-yellow);
}

#single-wcs-event {
	padding-bottom: 355px;
}

/* Дата уже содержит время («22 октября в 19:00») — дубль из time-duration скрываем */
.wcs-single-right__content .wcs-single__time-duration {
	display: none;
}

.date-day {
	font-size: 1.5rem;
}

/*
 * Parent: .ct-content { overflow-x: hidden } → браузер считает overflow-y: auto.
 * На длинных страницах (spektakli) появляется мелкий внутренний скролл (~50px):
 * первый wheel «съедается» контейнером, страница замирает у шапки.
 * overflow-x: clip не форсирует overflow-y: auto.
 */
.ct-content {
	overflow-x: clip;
}

.ct-header__wrapper--stuck,
.ct-header {
	background: var(--primary-red) !important;
}

.ct-header__wrapper--stuck::before {
	background-color: var(--primary-red);
}

#absolute-footer {
	padding-top: 355px;
}

.ct-posts .ct-post__title {
	margin-top: 0;
}

.wcs-timetable--carousel .wcs-timetable__carousel .active .responsive-image {
	box-shadow: none;
}

@media only screen and (max-width: 1312px) and (min-width: 1200px) {
	.wcs-timetable--carousel .wcs-timetable__carousel .responsive-image.responsive-image img {
		width: 100%;
		height: auto;
		max-height: 100%;
	}
}

.wcs-timetable--carousel .wcs-timetable__carousel .owl-prev::after,
.wcs-timetable--carousel .wcs-timetable__carousel .owl-next::after {
	background-color: var(--primary-red);
}

/*
 * Кнопки WCS: на проде кастом был вшит в weekly-class timetable.css (2.6.0).
 * После обновления плагина (2.8.1) стоковые стили вернули мелкие «пилюли».
 * Перенесено в child с прода.
 */
.wcs-btn {
	display: inline-block;
	position: relative;
	border-radius: 100px !important;
	padding: 1rem 1.5rem;
	font-size: 1em;
	font-weight: bold;
	text-decoration: none;
	transition: all 200ms ease;
	color: white !important;
	background: var(--primary-red) !important;
	box-shadow: none !important;
}

.wcs-btn:hover {
	text-decoration: none;
	background: var(--primary-red-hover) !important;
}

.wcs-timetable--carousel .wcs-btn--action,
.wcs-btn--action-in,
.wp-block-button__link {
	border-radius: 100px !important;
	padding: 1rem 3rem;
	font-size: 1em;
	font-weight: bold;
	text-decoration: none;
	transition: all 200ms ease;
	color: white !important;
	background: var(--primary-red) !important;
}

.wp-block-button__link {
	margin-bottom: var(--main-margin-bottom);
}

.wcs-btn--action-in:hover,
.wp-block-button__link:hover {
	text-decoration: none;
	background: var(--primary-red-hover) !important;
}

.wcs-timetable--carousel .wcs-class__title,
.wcs-timetable__grid .wcs-class__title {
	font-size: 30px;
}

.wcs-timetable__grid .wcs-class__title {
	padding-bottom: 0 !important;
}

/* В кастоме до миграции это правило из parent было удалено; после обновления 1.3.0 вернулось */
.wcs-timetable--carousel .wcs-class__title::after {
	content: none;
	display: none;
}

.wcs-timetable__grid .wcs-class__meta span:not(.wcs-class__meta-label) {
	padding-bottom: 10px;
}

@media (max-width: 767px) {
	p {
		line-height: 1.5;
		font-size: 1.2em;
	}

	.wcs-btn {
		font-size: 1.3rem;
	}

	.home #ct-header__hero {
		display: none !important;
	}

	.ct-page__entry-content blockquote,
	.ct-single__entry-content blockquote {
		margin: 2rem 4rem;
	}

	#text-1 {
		padding-bottom: 40px;
	}

	#absolute-footer p {
		font-size: 1.2em;
	}

	.ct-main-navigation .menu-item,
	.wp-block-latest-posts.wp-block-latest-posts__list {
		font-size: 16px;
	}

	.no-pd-mb-mobile {
		padding-bottom: 0 !important;
		margin-bottom: 0 !important;
	}

	.home .wcs-timetable__grid .wcs-class__title {
		padding-bottom: 0 !important;
	}

	.ct-page__entry-content blockquote {
		margin: 2rem 0;
	}

	.class-template-default #buy-button {
		position: fixed;
		bottom: 0;
		z-index: 999999;
		width: 90%;
		padding-bottom: 0;
	}

	.class-template-default .wp-block-button__link {
		width: 100%;
		margin-bottom: 15px;
		font-size: 18px;
	}
}

.class-template-default #buy-button {
	position: fixed;
	bottom: 0;
	right: 50px;
	z-index: 999999;
	padding-bottom: 0;
}

.ct-social-box,
.comments-area {
	display: none !important;
}

.ct-menu--inverted .ct-header__wrapper:not(.ct-header__wrapper--stuck) .ct-header__logo-nav ul:not(.sub-menu) > li > a,
.ct-menu--inverted #ct-main-nav__toggle-navigation {
	color: white !important;
}

.page-template-default .wpb-content-wrapper p::before ul,
.page-template-default .wpb-content-wrapper ol + p {
	margin-bottom: 0;
}

.ct-single__entry-content a {
	text-decoration: underline !important;
}

.social-links {
	display: flex;
	flex-direction: row;
}

.social-links a {
	margin-right: 1.5rem;
}

.fa-brands {
	font-size: 40px;
	margin-top: 24px;
}

.wp-block-button {
	padding-bottom: 1em;
}

.video-container {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	margin-bottom: 1rem;
}

.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

iframe {
	max-width: 100% !important;
}

.vk-video-container {
	position: relative;
	width: 100%;
	max-width: 853px;
	margin: 20px auto;
	overflow: hidden;
	border-radius: 8px;
	isolation: isolate;
	contain: content;
}

.vk-video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}

/*
 * Главное меню: горизонтальный вид, пока между лого и пунктами есть запас.
 * Тема по умолчанию сворачивает в гамбургер с 1200px (ещё ~300px зазора).
 * На десктопе (>=768px) оставляем меню; гамбургер — только на мобиле.
 * column-gap: 20px — минимальный зазор между лого и меню.
 */
@media (min-width: 768px) {
	.ct-header__logo-nav {
		flex-wrap: nowrap;
		column-gap: 20px;
	}

	#ct-main-nav__toggle-navigation {
		display: none;
	}

	#ct-main-nav {
		flex-basis: auto;
		flex-grow: 1;
		padding-top: 0;
		text-align: right;
	}

	#ct-main-nav::before {
		display: none;
	}

	#ct-main-nav__wrapper {
		width: auto;
		font-size: 0.75rem;
		text-align: right;
	}

	ul.ct-main-navigation,
	div.ct-main-navigation > ul {
		display: flex;
		flex-wrap: nowrap;
		flex-direction: row;
		width: auto;
		position: relative;
		margin: 0;
		padding: 0;
		justify-content: flex-end;
	}

	ul.ct-main-navigation > li:first-child,
	div.ct-main-navigation > ul > li:first-child {
		margin-left: 0;
	}

	#ct-main-nav__toggle-navigation-main:checked + #ct-main-nav__wrapper > ul.ct-main-navigation,
	#ct-main-nav__toggle-navigation-main:checked + #ct-main-nav__wrapper > div.ct-main-navigation > ul {
		padding-top: 0;
	}

	.ct-main-navigation .menu-item,
	.ct-main-navigation .page_item {
		padding-top: 0;
		padding-bottom: 0;
	}

	.ct-main-navigation .menu-item .menu-item,
	.ct-main-navigation .page_item .page_item {
		padding: 0 1rem;
	}

	.ct-main-navigation .menu-item .menu-item:not(:first-child)::after,
	.ct-main-navigation .page_item .page_item:not(:first-child)::after {
		left: 1rem;
		right: 1rem;
	}

	.ct-main-navigation .sub-menu,
	.ct-main-navigation .children {
		position: absolute;
		text-align: left;
		width: 12rem;
		left: -1rem;
		padding: 0.5rem 0;
		background: #fff;
		box-shadow: 0px 0px 5px 0 rgba(0, 0, 0, 0.1);
		z-index: 1;
		border-radius: 2px;
		top: 100%;
		margin-bottom: -2px;
		white-space: normal;
		margin-top: 0.5rem;
	}

	.ct-main-navigation .sub-menu::before,
	.ct-main-navigation .children::before {
		content: "";
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		top: -1rem;
		height: 1rem;
	}

	.ct-main-navigation .sub-menu::after,
	.ct-main-navigation .sub-menu:not(:first-child)::after,
	.ct-main-navigation .children::after,
	.ct-main-navigation .children:not(:first-child)::after {
		display: none;
	}

	.ct-main-navigation .sub-menu .sub-menu,
	.ct-main-navigation .children .children {
		left: 95%;
		top: -0.5rem;
	}

	.ct-main-navigation .edge > .sub-menu,
	.ct-main-navigation .edge > .children {
		right: 0;
		left: auto;
	}

	.ct-main-navigation .edge > .sub-menu .sub-menu,
	.ct-main-navigation .edge > .sub-menu .children,
	.ct-main-navigation .edge > .children .sub-menu,
	.ct-main-navigation .edge > .children .children {
		left: auto;
		right: 95%;
	}

	.ct-main-navigation .menu-item .menu-item-has-children > a::before,
	.ct-main-navigation .page_item .page_item_has_children > a::before {
		content: "\e649";
		line-height: 2.2;
	}
}