/* Каркас сайта (templates/base.html): шапка, основная область, подвал. Префикс классов — site-. */

/* ---------- фон под страницей ---------- */
/* что видно за краем страницы (оттяжка прокрутки на телефоне, низ короткой страницы) — в цвет подвала */
html { background: #14223b; }

/* ---------- переменные ---------- */
.site {
	--site-navy: #14223b;
	--site-red: #c8102e;
	--site-blue: #1f4fa3;
	--site-line: #e3e7ee;
	--site-muted: #6b7686;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh; /* реальная высота экрана телефона, без «прыжков» панели браузера */
	margin: 0;
	background: #f6f8fb;
}
.site-main { flex: 1 0 auto; padding-top: 1.5rem; padding-bottom: 2.5rem; }

/* ---------- шапка ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid var(--site-line);
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: saturate(1.4) blur(10px);
}
.site-header::after {
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 3px;
	content: "";
	opacity: 0.9;
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	max-width: 1320px;
	margin: 0 auto;
	padding: 0.6rem 1.25rem;
}

/* ---------- логотип и название ---------- */
.site-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	min-width: 0;
	color: var(--site-navy);
	text-decoration: none;
}
.site-brand:hover { color: var(--site-navy); }
.site-brand__logo {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	object-fit: contain;
	transition: transform 0.4s ease;
}
.site-brand:hover .site-brand__logo { transform: rotate(-12deg) scale(1.06); }
.site-brand__name { font-size: 1.25rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; }
.site-brand__name b { color: var(--site-red); font-weight: 800; }

/* ---------- кнопки справа и меню на телефоне ---------- */
.site-menu__toggle { display: none; }

/* ---------- подвал ---------- */
.site-footer {
	flex-shrink: 0;
	background: var(--site-navy);
	box-shadow: 0 2px 0 var(--site-navy);
	color: rgba(255, 255, 255, 0.75);
}
.site-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	max-width: 1320px;
	margin: 0 auto;
	padding: 1.75rem 1.25rem;
}
/* ссылка на главную — только лого и название; описание под ним — обычный текст */
.site-footer__brand { display: flex; flex-direction: column; gap: 0.15rem; }
.site-footer__home { display: inline-flex; align-items: center; gap: 0.75rem; color: inherit; text-decoration: none; }
.site-footer__home:hover { color: inherit; }
.site-footer__home img { transition: transform 0.4s ease; }
.site-footer__home:hover img { transform: rotate(-12deg) scale(1.06); }
.site-footer__about { padding-left: calc(36px + 0.75rem); }
.site-footer__brand img { flex: 0 0 auto; width: 36px; height: 36px; object-fit: contain; }
.site-footer__name { color: #fff; font-size: 1.05rem; font-weight: 700; }
.site-footer__about { font-size: 0.85rem; }
.site-footer__club { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; font-size: 0.85rem; }
.site-footer__club a { color: #fff; font-weight: 600; text-decoration: none; transition: color 0.2s; }
.site-footer__club a:hover { color: #f2c14e; }

/* ---------- телефон: кнопки — в выпадающем меню ---------- */
@media (max-width: 720px) {
	.site-header__inner { padding: 0.5rem 1rem; }
	.site-brand__logo { width: 34px; height: 34px; }
	.site-brand__name { font-size: 1.1rem; }
	.site-menu { position: relative; }
	.site-menu__toggle {
		display: grid;
		place-items: center;
		width: 2.6rem;
		height: 2.6rem;
		border: 1px solid var(--site-line);
		border-radius: 12px;
		background: #fff;
		cursor: pointer;
	}
	.site-menu__toggle span,
	.site-menu__toggle span::before,
	.site-menu__toggle span::after {
		position: relative;
		display: block;
		width: 1.1rem;
		height: 2px;
		border-radius: 2px;
		background: var(--site-navy);
		transition: transform 0.2s, background 0.2s;
	}
	.site-menu__toggle span::before,
	.site-menu__toggle span::after { position: absolute; content: ""; }
	.site-menu__toggle span::before { top: -6px; }
	.site-menu__toggle span::after { top: 6px; }
	.site-menu.is-open .site-menu__toggle span { background: transparent; }
	.site-menu.is-open .site-menu__toggle span::before { top: 0; transform: rotate(45deg); }
	.site-menu.is-open .site-menu__toggle span::after { top: 0; transform: rotate(-45deg); }
	.site-menu:not(.is-open) > .site-menu__panel { display: none; }
	.site-menu__panel {
		position: absolute;
		top: calc(100% + 0.5rem);
		right: 0;
		min-width: 14rem;
		padding: 0.75rem;
		border: 1px solid var(--site-line);
		border-radius: 14px;
		background: #fff;
		box-shadow: 0 16px 40px -18px rgba(20, 34, 59, 0.45);
		animation: site-drop 0.2s ease;
	}
	.site-menu__panel .ha { flex-direction: column; align-items: stretch; }
	.site-menu__panel .ha__action { text-align: center; }
	.site-footer__inner { flex-direction: column; align-items: stretch; }
	/* клуб и город — по центру под названием */
	.site-footer__club { align-items: center; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.12); text-align: center; }
}

@keyframes site-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.site-brand__logo,
	.site-menu__panel { animation: none; transition: none; }
}