/* Обвязка: шапка, подвал, оверлей-сноска. Значения — из узлов Figma,
   переменные — public/css/tokens.css. Mobile-first, брейкпоинт 980px. */

/* ── Шапка ── 141:1032 (402×64) / 186:1481 (1728×40) ──────────────────────────
   Своей заливки у бара нет (fills пустые) — фон даёт секция под ним. */

.header {
	--header_h: 6.4rem; /* absoluteBoundingBox.height 141:1032 */
	--header_pad-x: 1.2rem; /* paddingLeft/Right 175:2254 */
	--header_ink: var(--color-on-dark); /* тема inverse: текст #fff0d7 */
	--header_knob-bg: var(--color-on-dark); /* круг кнопки — I141:1032;3075:85854 */
	--header_knob-ink: var(--color-green-deep);
	--header_knob-size: 4rem;

	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--header_h);
	padding: 0 var(--header_pad-x);
	color: var(--header_ink);
}

/* Шапка регламента и «заявка отправлена»: тёмный текст на светлом фоне,
   круг кнопки инвертирован (I178:1181;3075:86109 — заливка #0f3327). */
.header--default {
	--header_ink: var(--color-ink);
	--header_knob-bg: var(--color-green-deep);
	--header_knob-ink: var(--color-on-dark);
}

.header__back {
	display: grid;
	place-items: center;
	flex: none;
	width: var(--header_knob-size);
	height: var(--header_knob-size);
	border-radius: 50%;
	background-color: var(--header_knob-bg);

	&::before { /* icons/simple/arrow-right, 18×12, по центру круга */
		content: "";
		width: 1.8rem;
		height: 1.2rem;
		background-color: var(--header_knob-ink);
		mask: url("/img/header/arrow-right.svg") center / contain no-repeat;
	}
}

/* Пустой кадр 40×40 справа (Frame 844) — держит логотип по центру полосы. */
.header__spacer {
	flex: none;
	width: var(--header_knob-size);
	height: var(--header_knob-size);
}

.header__logo {
	flex: none;

	& img {
		width: 20rem; /* logo instance 200×32; в svg 200×34 из-за render bounds */
		height: auto;
	}
}

/* Ссылки шапки на мобильном не показываем: в макете их там нет — ни бургера,
   ни раскрытого меню (141:1032 = кнопка + логотип + пустой кадр). */
.header__nav {
	display: none;
}

.header__list {
	display: flex;
	align-items: center;
	gap: .8rem; /* itemSpacing фреймов left/right */
}

.header__item {
	display: inline-flex;
	align-items: center;
	flex: none; /* иначе flex-shrink ломает подписи на две строки */
	gap: .4rem; /* itemSpacing menu-item: подпись → стрелка */
	white-space: nowrap;
}

/* Запятая-разделитель — отдельный TEXT-узел компонента menu-item. У последнего
   пункта каждого меню он скрыт (I186:1528;3073:45306, I186:1491;3073:45306,
   I122:491;3075:85472;3069:5643) — значит запятая разделяет, а не завершает. */
.header__item:not(:last-child) .header__link::after {
	content: ",";
}

/* В макете подчёркивания нет (textDecoration NONE у всех menu-item);
   ponytail: подчёркивание по ховеру — веб-умолчание, не выдумка макета. */
.header__link {
	text-decoration: none;

	&:where(a):hover {
		text-decoration: underline;
	}
}

/* icons/simple/arrow-diagonal, 12×12 — только у внешних ссылок. */
.header__item--ext::after {
	content: "";
	width: 1.2rem;
	height: 1.2rem;
	background-color: currentcolor;
	mask: url("/img/header/arrow-diagonal.svg") center / contain no-repeat;
}

@media (min-width: 980px) {
	.header {
		--header_h: 5.2rem; /* отступ 12 сверху + бар 186:1481 (1728×40) */
		--header_pad-x: 2.4rem; /* paddingLeft/Right 186:1481 */

		align-items: flex-start;
		gap: 2.9rem; /* itemSpacing 186:1481 */
		padding-top: 1.2rem; /* отступ бара от верха кадра (y 132 при кадре y 120) */
	}

	.header__back,
	.header__spacer {
		display: none;
	}

	.header__nav {
		display: block;
		flex: 1 1 0; /* left/right — FILL, по 711 при полосе 1728 */
		min-width: 0; /* колонка держит 711 и не растягивается под подписи */
	}

	.header__nav--right .header__list {
		justify-content: flex-end; /* counterAxisAlignItems MAX у 186:1490 */
	}

	.header__logo {
		display: flex;
		justify-content: center;
		width: 20rem; /* кадр logo 200×40 */
		padding-top: .8rem; /* paddingTop кадра logo */
	}
}

/* ── Подвал ── портирован с smyslovaya226.ru ─────────────────────────────────
   Правки клиента, п. 18: в макете опен-колла нарисован подвал журнала, а нужен
   подвал сообщества. Источник — html-markup/src/template/_footer_v2.html и
   правила .footer* из его build/css/style_v2.css; палитра там совпадает с нашей
   (#0f3327 / #fff0d7 / #e5af57 / #212026), поэтому значения переложены на токены.
   Брейкпоинт исходника 980 совпал с нашим — подвал живёт на своём родном.
   Узлы Figma 93:297 / 141:1233 к этому блоку больше не относятся. */

.footer {
	--footer_grid-gap-x: 3.2rem;
	--footer_logo-col: calc(84rem - var(--footer_grid-gap-x));
	--footer_side: var(--page-margin-mobile); /* --sidegap исходника */

	position: relative;
	padding: 2.4rem 0;
	overflow: clip;
	background: var(--color-green-deep) url("/img/footer/glow-mobile.svg") center bottom / 100% auto no-repeat;
	color: var(--color-on-dark);
	font-size: var(--t-caption-m-size);
	line-height: var(--t-caption-m-lh);
	letter-spacing: var(--t-caption-m-ls);
}

/* .inside-wrapper исходника при --wrapper-max-width: 192rem. */
.footer__inner {
	display: grid;
	max-width: calc(192rem + 2 * var(--footer_side));
	margin-inline: auto;
	gap: 7.2rem;
	padding: 0 var(--footer_side);
}

.footer a {
	text-decoration: none;

	&:hover {
		text-decoration: underline;
	}
}

.footer__top {
	display: grid;
	gap: 4.8rem 1.6rem;
}

.footer__logo {
	width: max-content;
	color: var(--color-on-dark);
	font-family: var(--font-display);
	font-size: 8.3rem;
	line-height: .85;
}

.footer__logo-accent {
	color: var(--color-sand);
}

.footer__soc {
	display: flex;
	flex-wrap: wrap;
	gap: 1.2rem;
}

/* Кружок 52 с маской-иконкой: тот же приём, что в исходнике (.fico), и иконки
   так же лежат в переменных data:image/svg+xml, а не отдельными файлами. */
.footer__soc-link--telegram {
	--footer_soc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' fill='none' viewBox='0 0 52 52'%3E%3Cpath fill='%23212026' fill-rule='evenodd' d='M26.46 19.07q-3.23 1.34-12.89 5.55-1.58.62-1.64 1.22c-.09.67.75.94 1.9 1.3l.48.15c1.13.37 2.65.8 3.44.81a4.2 4.2 0 0 0 2.4-.88q9.02-6.1 9.32-6.16c.14-.03.33-.07.46.04.12.12.11.33.1.4-.09.35-3.4 3.42-5.1 5.01l-1.51 1.44c-1.05 1.01-1.84 1.77.04 3l2.35 1.59c.78.53 1.57 1.07 2.58 1.73l.75.52c.92.65 1.74 1.24 2.76 1.14.59-.05 1.2-.6 1.5-2.26.74-3.91 2.18-12.4 2.5-15.89.04-.3 0-.7-.03-.87a1 1 0 0 0-.31-.6 1.5 1.5 0 0 0-.86-.25c-.83.01-2.1.45-8.24 3' clip-rule='evenodd'/%3E%3C/svg%3E");
}

.footer__soc-link--vk {
	--footer_soc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' fill='none' viewBox='0 0 52 52'%3E%3Cpath fill='%23212026' fill-rule='evenodd' d='M14 18.51c.2 9.36 4.87 14.98 13.07 14.98h.47v-5.35c3.01.3 5.29 2.5 6.2 5.35H38a11.8 11.8 0 0 0-6.16-7.51c1.92-1.11 4.62-3.81 5.26-7.47h-3.87c-.84 2.97-3.32 5.67-5.7 5.92v-5.92h-3.86V28.9c-2.4-.6-5.43-3.51-5.56-10.38z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

.footer__soc-link {
	display: block;
	width: 5.2rem;
	height: 5.2rem;
	border-radius: 50%;
	background-color: var(--color-on-dark);

	&::after {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		background-color: var(--color-ink);
		mask: var(--footer_soc-icon) center / 100% 100% no-repeat;
		transition: transform .3s;
	}

	&:hover::after {
		transform: scale(1.2);
	}
}

.footer__nav {
	display: grid;
	gap: 2rem;
}

.footer__nav-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
}

/* Gregory Poster Variable Italic — витринное начертание подвала сообщества,
   в опен-колле больше нигде не используется. @font-face — в tokens.css. */
.footer__nav-title {
	font-family: var(--font-poster);
	font-size: 3.2rem;
	font-style: italic;
	font-weight: 240;
	line-height: .85;
	text-transform: lowercase;
}

.footer__nav-link {
	font-size: var(--t-caption-s-size);
	line-height: var(--t-caption-s-lh);
	text-decoration: underline;
}

.footer__bottom {
	display: grid;
	gap: 1.6rem;
	padding-right: 3.2rem;
	font-size: var(--t-caption-xs-size);
	line-height: var(--t-caption-xs-lh);
	letter-spacing: var(--t-caption-xs-ls);
}

/* WCAG 2.5.8 / target-size: две ссылки-строки стоят вплотную, разгоняем
   интерлиньяж — как было в прежнем подвале (`70 §6.4`). */
.footer__policy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 2.4rem;
}

@media (min-width: 980px) {
	.footer {
		/* Подвал сообщества нарисован на канве 2200 (`html{font-size:.4545vw}` в
		   style_v2.css), наша канва 1728 (`.5787vw`) — те же rem дают блок на
		   27% крупнее исходника. Возвращаем ему родной масштаб: отношение
		   корней = min(.4545vw, 10px) ÷ min(.5787vw, 10px), то есть .7854 до
		   1728, дальше ширина ÷ 2200, и 1 от 2200 — обе канвы упёрлись в 10px.
		   `tan(atan2(…))` — деление длин, в calc его нет. Ниже 980 обе канвы
		   402, отношение 1, поэтому zoom только здесь. */
		zoom: clamp(.7854, tan(atan2(100vw, 2200px)), 1);

		--footer_side: var(--page-margin);
		padding: 8rem 0 6rem;
		background-image: url("/img/footer/glow.svg");
		background-position: calc(50% + 66rem) -2%;
		background-size: 363.8rem auto;
	}

	.footer__inner {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		min-height: 43.2rem;
	}

	.footer__top {
		grid-template-columns: var(--footer_logo-col) 1fr 33.2rem;
		align-items: start;
		gap: 6.4rem var(--footer_grid-gap-x);
	}

	.footer__logo {
		grid-row: span 2;
		font-size: 12rem;
	}

	.footer__soc,
	.footer__nav {
		grid-column: 3 / -1;
	}

	.footer__nav {
		gap: 2.6rem;
	}

	.footer__nav-title {
		font-size: 5.3rem;
	}

	.footer__bottom {
		grid-template-columns: var(--footer_logo-col) 1fr;
		align-items: end;
		gap: 0 var(--footer_grid-gap-x);
		padding-right: 0;
	}
}

/* ── Оверлей-сноска ── 184:1450 (136×95) / 181:1448 (451×58) ──────────────────
   Бейдж — компонент `badge - digit`, состояние `state=default` (48:146): круг
   18×18, заливка #084d36. Аннотация 181:1448: «Плашка раскрывается при нажатии
   на бейдж-цифру. Заливка бейджа при этом меняется на #8D5714» — отсюда
   `.footnote[open]`. Позиция плашки относительно бейджа в макете не задана
   (оверлей лежит абсолютным ребёнком кадра, без связки) — кладём под бейдж,
   решение в plan/progress/decisions-log.md. */

.footnote {
	--footnote_badge-size: 1.8rem; /* 48:146 */
	--footnote_badge-bg: var(--color-green); /* state=default #084d36 */
	--footnote_badge-ink: var(--color-on-dark); /* цифра #fff0d7 */
	--footnote_badge-text: var(--t-caption-xs-size); /* 40/52 инстанса 122:1144 на бокс 18 */
	--footnote_note-w: 13.6rem; /* 184:1450 */
	--footnote_note-pad: .9rem; /* 164:2181 minus 184:1450 */
	--footnote_note-size: 1.1rem; /* 164:2181 */
	--footnote_note-lh: 1.3rem;
	--footnote_gap: .8rem;

	position: relative;
	display: inline-block;
	vertical-align: baseline;
}

.footnote[open] {
	--footnote_badge-bg: var(--color-brown); /* #8d5714 из аннотации */
}

.footnote__badge {
	display: grid;
	place-items: center;
	width: var(--footnote_badge-size);
	height: var(--footnote_badge-size);
	border-radius: 50%; /* cornerRadius 17 на боксе 18 */
	background-color: var(--footnote_badge-bg);
	color: var(--footnote_badge-ink);
	font-size: var(--footnote_badge-text);
	line-height: 1;
	cursor: pointer;
	list-style: none; /* треугольник <summary> */

	&::-webkit-details-marker {
		display: none;
	}
}

.footnote__note {
	position: absolute;
	z-index: 2;
	top: calc(100% + var(--footnote_gap));
	left: 0;
	width: var(--footnote_note-w);
	padding: var(--footnote_note-pad);
	border-radius: var(--radius-s); /* cornerRadius 12 */
	background-color: var(--color-surface-warm); /* #f9e0b7 */
	color: var(--color-ink); /* #212026 */
	font-family: var(--font-text); /* 164:2181 — Lyon, а не Epos шапки (правки, п. 2) */
	font-size: var(--footnote_note-size);
	font-style: italic; /* LyonTextCyr-RegularItalic */
	line-height: var(--footnote_note-lh);
	letter-spacing: var(--t-caption-xs-ls); /* 0.13/13 = 0.11/11 = .01em */
	text-align: left; /* textAlignHorizontal LEFT у 116:310 и 164:2181; иначе
	                     наследуется center от .hero__caption */
}

@media (min-width: 980px) {
	.footnote {
		--footnote_note-w: 45.1rem; /* 181:1448 */
		--footnote_note-pad: 1.1rem 1.6rem; /* 116:310 внутри 181:1448 */
		--footnote_note-size: 1.7rem; /* 17/18 */
		--footnote_note-lh: 1.8rem;
	}
}