/*
 * Стили шапки и подвала Tilda (пиксель-в-пиксель к sunsetcinema.cz).
 * Шапка - блоки T228 (десктоп) + T280 (мобайл), подвал - T420.
 * Значения сверены с CSS исходника Tilda (tilda-blocks-page31171870, инлайн-стили блоков).
 */

/* ============================================================
   ШАПКА
   ============================================================ */

.sc-header {
	width: 100%;
	background: var(--sc-header-bg);
	/*
	 * Исходник Tilda задаёт шрифт меню/телефона/кнопки как 'DrukBold/ProximaNormal' -
	 * это комбинированный шрифт Tilda, в котором строчные рендерятся как Proxima Nova.
	 * Поскольку этого комбинированного файла нет, для текста шапки используем Proxima Nova
	 * (визуально совпадает с исходником: меню/телефон/кнопка - обычный Proxima, не тяжёлый Druk).
	 */
	font-family: var(--sc-font-body);
}

/* ---- Десктоп (T228) ---- */

.sc-header__desktop {
	display: block;
}

.sc-header__inner {
	max-width: 1200px;
	margin: 0 auto;
	min-height: 90px;
	padding: 0 20px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 15px;
}

.sc-header__logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	margin-right: 15px;
}

.sc-header__logo img {
	display: block;
	width: auto;
	height: 50px;
	vertical-align: middle;
}

.sc-header__nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
}

.sc-header__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	align-items: center;
	font-size: 0;
}

.sc-header__item {
	padding: 0 15px;
	white-space: nowrap;
}

.sc-header__link {
	font-family: var(--sc-font-body);
	font-size: 14px;
	font-weight: 400;
	color: var(--sc-text);
	text-decoration: none;
	transition: color 0.3s ease-in-out;
}

.sc-header__link:hover {
	color: var(--sc-accent);
}

.sc-header__right {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 30px;
	flex-shrink: 0;
}

.sc-header__phone {
	white-space: nowrap;
	font-family: var(--sc-font-body);
	font-size: 13px;
	color: var(--sc-text);
	text-decoration: none;
}

.sc-header__social {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 0;
}

.sc-soc {
	padding: 0 5px;
	transition: opacity 0.2s ease-in-out;
}

.sc-soc:first-child { padding-left: 0; }
.sc-soc:last-child { padding-right: 0; }
.sc-soc:hover { opacity: 0.9; }

.sc-soc a {
	display: block;
	line-height: 0;
}

.sc-soc__svg {
	display: block;
	width: 30px;
	height: 30px;
}

.sc-header__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 20px;
	font-family: var(--sc-font-body);
	font-size: 14px;
	font-weight: 400;
	color: var(--sc-text);
	background: transparent;
	border: 1px solid var(--sc-accent);
	border-radius: 10px;
	white-space: nowrap;
	box-shadow: none;
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.sc-header__btn:hover {
	color: var(--sc-white);
	background-color: var(--sc-accent);
	border-color: var(--sc-accent);
}

.sc-header__langs {
	display: flex;
	align-items: center;
	gap: 20px;
}

.sc-header__lang {
	font-family: var(--sc-font-body);
	font-size: 14px;
	color: var(--sc-text);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.3s ease-in-out;
}

.sc-header__lang:hover,
.sc-header__lang--active {
	color: var(--sc-accent);
}

/* ---- Мобайл (T280) ---- */

.sc-header__mobile {
	display: none;
}

.sc-header__mobtop {
	min-height: 90px;
	padding: 0 20px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.sc-header__mobtop .sc-header__logo {
	margin-right: 0;
}

.sc-burger {
	position: relative;
	flex-shrink: 0;
	width: 28px;
	height: 20px;
	padding: 0;
	border: none;
	background: transparent;
	outline: none;
	cursor: pointer;
	z-index: 999;
}

.sc-burger span {
	display: block;
	position: absolute;
	width: 100%;
	height: 3px;
	left: 0;
	opacity: 1;
	background-color: var(--sc-accent);
	transition: 0.25s ease-in-out;
}

.sc-burger span:nth-child(1) { top: 0; }
.sc-burger span:nth-child(2),
.sc-burger span:nth-child(3) { top: 8px; }
.sc-burger span:nth-child(4) { top: 16px; }

.sc-burger--open span:nth-child(1) { top: 8px; width: 0; left: 50%; }
.sc-burger--open span:nth-child(2) { transform: rotate(45deg); }
.sc-burger--open span:nth-child(3) { transform: rotate(-45deg); }
.sc-burger--open span:nth-child(4) { top: 8px; width: 0; left: 50%; }

.sc-header__mobmenu {
	background: var(--sc-header-bg);
	padding: 20px;
	box-sizing: border-box;
}

.sc-header__moblist {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 10px 0 20px;
}

.sc-header__moblink {
	font-family: var(--sc-font-body);
	font-size: 24px;
	line-height: 1.2;
	color: var(--sc-text);
	text-decoration: none;
	transition: color 0.3s ease-in-out;
}

.sc-header__moblink:hover {
	color: var(--sc-accent);
}

.sc-header__mobbottom {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	padding-top: 10px;
	border-top: 1px solid #eee;
}

.sc-header__mobbottom .sc-header__phone {
	font-size: 16px;
}

.sc-header__mobbottom .sc-header__social {
	gap: 0;
}

.sc-header__mobbottom .sc-header__langs {
	gap: 20px;
}

/* Переключение десктоп/мобайл на брейкпойнте Tilda 980px */
@media screen and (max-width: 980px) {
	.sc-header__desktop { display: none; }
	.sc-header__mobile { display: block; }
}

/* ============================================================
   ПОДВАЛ (T420)
   ============================================================ */

.sc-footer {
	background: var(--sc-footer-bg);
	padding: 45px 0;
	/* Тело подвала - Proxima Nova; цветные заголовки колонок - Druk (см. .sc-footer__title). */
	font-family: var(--sc-font-body);
	color: var(--sc-footer-text);
}

.sc-footer__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}

.sc-footer__col {
	flex: 1 1 0;
	max-width: 320px;
	margin-bottom: 30px;
	box-sizing: border-box;
	padding-right: 20px;
}

.sc-footer__col:last-child { padding-right: 0; }

.sc-footer__col--logo {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-self: stretch;
}

.sc-footer__logo {
	display: inline-block;
}

.sc-footer__logo img {
	display: block;
	width: 100%;
	max-width: 120px;
	height: auto;
}

.sc-footer__copyright {
	color: #525252;
	font-size: 12px;
	margin-top: 21px;
}

.sc-footer__title {
	font-family: var(--sc-font-head);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.35;
	color: var(--sc-footer-title);
	letter-spacing: 1px;
	margin-bottom: 14px;
}

.sc-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-footer__list li {
	margin-bottom: 10px;
	font-size: 14px;
	line-height: 1.55;
}

.sc-footer__list li:last-child { margin-bottom: 0; }

.sc-footer__list a,
.sc-footer__contacts a {
	color: var(--sc-footer-text);
	text-decoration: none;
}

.sc-footer__list a:hover,
.sc-footer__contacts a:hover {
	opacity: 0.85;
}

.sc-footer__contacts {
	font-size: 14px;
	line-height: 1.55;
}

.sc-footer__cline {
	display: block;
	margin-bottom: 10px;
}

.sc-footer__cline:last-child { margin-bottom: 0; }

.sc-footer__contacts u { text-decoration: underline; }

@media screen and (max-width: 980px) {
	.sc-footer__inner { flex-direction: column; }
	.sc-footer__col {
		max-width: 100%;
		width: 100%;
		padding-right: 0;
	}
	.sc-footer__col--logo { order: 3; }
}