/*
Theme Name: Чикаго — пять эпох
Theme URI: https://chicago30.ru/
Description: Тема для семьи заведений «Чикаго» в Астрахани: у каждого заведения своя эпоха. Заведения, бронь с согласием на обработку персональных данных, документы по 152-ФЗ.
Version: 1.6.0
Requires at least: 6.4
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: chicago-eras
*/

/* Базовые стили, общие для всех страниц. Стили эпох — в assets/css/. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	font-family: "Golos Text", system-ui, sans-serif;
	font-size: 18px;
	line-height: 1.6;
	background: #151515;
	color: #f2f2f2;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 1000;
	width: auto;
	height: auto;
	padding: 12px 18px;
	clip: auto;
	background: #fff;
	color: #000;
}

.wrap {
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding-inline: 32px;
}

@media (max-width: 640px) {
	.wrap {
		padding-inline: 16px;
	}
}

/* Общая шапка и подвал */
.site-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	align-items: center;
	justify-content: space-between;
	padding-block: 18px;
}

.site-bar a {
	color: inherit;
}

.site-bar__brand {
	font-weight: 700;
	font-size: 20px;
	text-decoration: none;
}

.site-bar__phone {
	font-weight: 700;
	white-space: nowrap;
}

.site-footer {
	padding-block: 48px;
	font-size: 16px;
	line-height: 1.7;
}

.site-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 32px;
}

.site-footer a {
	color: inherit;
}

.site-footer__title {
	font-weight: 700;
}

.site-footer__legal {
	margin-top: 32px;
	font-size: 14px;
	opacity: 0.8;
}

/* Описание заведения */
.venue-about__text {
	max-width: 760px;
}

/* Галерея */
.gallery-strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gallery-strip img {
	width: 100%;
	height: 260px;
	object-fit: cover;
}

/* Форма брони — общая разметка, цвета задают эпохи */
.booking {
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
	padding-block: 72px;
}

.booking__intro {
	flex: 1 1 320px;
}

.booking__form {
	flex: 2 1 520px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	align-content: start;
}

.booking__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-weight: 700;
}

.booking__field--wide,
.booking__consent,
.booking__submit,
.booking__notice {
	grid-column: 1 / -1;
}

.booking__field input,
.booking__field select,
.booking__field textarea {
	padding: 14px;
	font: inherit;
	font-weight: 400;
	font-size: 18px;
	border: 2px solid currentColor;
	background: transparent;
	color: inherit;
	border-radius: 0;
}

.booking__consent {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: 16px;
	line-height: 1.5;
}

.booking__consent input {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin: 2px 0 0;
}

.booking__submit {
	justify-self: start;
	min-height: 52px;
	padding: 16px 36px;
	border: 0;
	font: inherit;
	font-weight: 700;
	font-size: 19px;
	cursor: pointer;
}

.booking__notice {
	padding: 14px 18px;
	font-weight: 700;
	border: 2px solid currentColor;
}

.booking__notice--ok {
	padding: 20px 22px;
	border-width: 3px;
	font-weight: 400;
	font-size: 19px;
	line-height: 1.45;
	animation: booking-ok 0.5s ease-out both;
}

.booking__notice-title {
	display: block;
	margin-bottom: 4px;
	font-size: 24px;
}

@keyframes booking-ok {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
}

.booking__hp {
	position: absolute;
	left: -9999px;
}

@media (max-width: 640px) {
	.booking__form {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Баннер cookie */
.cookie-note {
	position: fixed;
	right: 16px;
	bottom: 16px;
	left: 16px;
	z-index: 900;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
	align-items: center;
	justify-content: space-between;
	max-width: 760px;
	margin-inline: auto;
	padding: 16px 20px;
	background: #fff;
	color: #1a1a1a;
	font-size: 15px;
	line-height: 1.5;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.cookie-note[hidden] {
	display: none;
}

.cookie-note a {
	color: inherit;
}

.cookie-note button {
	min-height: 44px;
	padding: 10px 22px;
	border: 0;
	background: #1a1a1a;
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

/* Текстовые страницы (документы, вакансии) */
.doc {
	max-width: 760px;
	margin: 0 auto;
	padding: 56px 32px 88px;
	background: #fff;
	color: #1d1d1d;
}

.doc a {
	color: #0b4fa8;
}

.doc h1 {
	font-size: 36px;
	line-height: 1.15;
}

.doc table {
	width: 100%;
	border-collapse: collapse;
}

.doc th,
.doc td {
	padding: 8px 10px;
	border: 1px solid #ccc;
	text-align: left;
}

body.is-doc {
	background: #ececec;
	color: #1d1d1d;
}

/* Кнопка звука эффектов в шапке заведения. */
.venue-bar__end {
	display: inline-flex;
	gap: 14px;
	align-items: center;
}

.sound-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid currentColor;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
	opacity: 0.8;
}

.sound-toggle[hidden] {
	display: none;
}

.sound-toggle:hover {
	opacity: 1;
}

.sound-toggle__off,
.sound-toggle[aria-pressed="false"] .sound-toggle__waves {
	display: none;
}

.sound-toggle[aria-pressed="false"] .sound-toggle__off {
	display: inline;
}

/* Следы от пуль, вспышка выстрела и гильзы: общие для «Чикаго», «Барбандоса». */
.fx-layer {
	position: absolute;
	inset: 0;
	z-index: 5;
	overflow: hidden;
	pointer-events: none;
}

.fx-hole {
	position: absolute;
	width: var(--s, 16px);
	height: var(--s, 16px);
	margin: calc(var(--s, 16px) / -2) 0 0 calc(var(--s, 16px) / -2);
	border-radius: 50%;
	background: radial-gradient(circle, #050403 0 30%, #24170d 38%, rgba(255, 232, 190, 0.6) 44%, rgba(70, 46, 26, 0.55) 54%, transparent 66%);
	transform: rotate(var(--r, 0deg));
	animation: fx-hole-in 0.18s ease-out both;
}

.fx-hole::after {
	content: "";
	position: absolute;
	inset: -90%;
	border-radius: 50%;
	background: repeating-conic-gradient(from var(--r, 0deg), rgba(15, 10, 6, 0.75) 0 1.6deg, transparent 1.6deg 41deg);
	-webkit-mask: radial-gradient(circle, #000 18%, rgba(0, 0, 0, 0.5) 34%, transparent 60%);
	mask: radial-gradient(circle, #000 18%, rgba(0, 0, 0, 0.5) 34%, transparent 60%);
}

@keyframes fx-hole-in {
	from {
		transform: rotate(var(--r, 0deg)) scale(1.8);
		filter: brightness(4);
	}
}

.fx-flash {
	position: absolute;
	width: 70px;
	height: 70px;
	margin: -35px 0 0 -35px;
	background: radial-gradient(circle, #fff 0 12%, #ffe27a 22%, rgba(255, 140, 30, 0.85) 36%, transparent 62%);
	clip-path: polygon(50% 0, 60% 38%, 100% 50%, 60% 62%, 50% 100%, 40% 62%, 0 50%, 40% 38%);
	animation: fx-flash 0.09s linear both;
}

@keyframes fx-flash {
	to {
		opacity: 0;
		transform: scale(1.5) rotate(25deg);
	}
}

.fx-casing {
	position: absolute;
	width: 5px;
	height: 12px;
	border-radius: 2px;
	background: linear-gradient(90deg, #8a6420, #f2cf72 45%, #a87d2c);
	animation: fx-casing 0.7s cubic-bezier(0.3, 0, 0.7, 1) both;
}

@keyframes fx-casing {
	40% {
		transform: translate(calc(var(--dx, 40px) * 0.6), -50px) rotate(260deg);
	}

	to {
		transform: translate(var(--dx, 40px), 90px) rotate(620deg);
		opacity: 0;
	}
}

.fx-shake {
	animation: fx-shake 0.09s linear;
}

@keyframes fx-shake {
	30% {
		transform: translate(-2px, 1px);
	}

	70% {
		transform: translate(2px, -1px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.fx-shake {
		animation: none;
	}
}

/* Пасхалка: игра «Побег из Алькатраса». */
.egg {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(5, 6, 10, 0.88);
}

.egg__box {
	width: min(100%, 780px);
	padding: 16px;
	border: 3px solid #ff8a3d;
	background: #1c1f22;
	color: #f1f1ee;
	font-family: "PT Mono", monospace;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.egg__head {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.egg__title {
	margin: 0;
	font-family: "Oswald", sans-serif;
	font-weight: 700;
	font-size: clamp(20px, 4vw, 30px);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #ff8a3d;
}

.egg__close {
	width: 44px;
	height: 44px;
	padding: 0;
	border: 2px solid #f1f1ee;
	background: transparent;
	color: #f1f1ee;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.egg canvas {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 760 / 280;
	background: #0b1020;
	touch-action: none;
	cursor: pointer;
}

.egg__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	justify-content: space-between;
	margin: 12px 0 0;
	font-size: 14px;
	color: #b9bcc0;
}

.egg__foot a {
	color: #ff8a3d;
}

/* Подзаголовок внутри H1: ключевые слова для поиска, визуально — строка над главным заголовком. */
.h1-kicker {
	display: block;
	margin-bottom: 0.7em;
	font-size: clamp(15px, 1.6vw, 18px);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-transform: none;
	text-shadow: none;
	opacity: 0.8;
}

.neo-sign .h1-kicker {
	font-family: "Jost", sans-serif;
	color: var(--neo-muted, #a9a6c9);
	animation: none;
}

.chi-hero .h1-kicker {
	font-family: "Old Standard TT", serif;
	color: #cfae6b;
	opacity: 1;
}

/* Видео заведения */
.venue-videos {
	padding-block: 24px 56px;
}

.venue-videos__list {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.venue-videos__item video {
	display: block;
	width: auto;
	max-width: 100%;
	height: min(340px, 70vh);
	background: #000;
	object-fit: cover;
}

@media (max-width: 720px) {
	.venue-videos__list {
		flex-wrap: nowrap;
		align-items: center;
		margin-inline: -16px;
		padding-inline: 16px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.venue-videos__item {
		flex: 0 0 auto;
		scroll-snap-align: center;
	}

	.venue-videos__item video {
		max-width: none;
		height: min(62vh, 560px);
	}

	.venue-videos__item--wide video {
		width: calc(100vw - 48px);
		height: auto;
	}
}