/* ЕГЭЕГЭ.РФ — главная страница. Подключается ПОСЛЕ style-ege.css. */

/* ---------- 1. Design tokens ---------- */
:root {
	--primary: #2563EB;
	--primary-light: #DBEAFE;
	--link: #1233C4;
	--header: #BEFFBE;
	--header-border: #8FD48F;
	--header-h: 64px;
	--secondary: #8B5CF6;
	--success: #10B981;
	--warning: #F97316;
	--bg: #F8FAFC;
	--surface: #FFFFFF;
	--text: #0F172A;
	--text2: #64748B;
	--border: #E2E8F0;

	--s1: 4px;
	--s2: 8px;
	--s3: 16px;
	--s4: 24px;
	--s5: 32px;
	--s6: 48px;

	--radius: 16px;
	--radius-sm: 12px;
	--shadow: 0 8px 20px rgba(15, 23, 42, .08);
	--font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	font-size: 16px;
	line-height: 24px;
	-webkit-text-size-adjust: 100%; }

svg, img { max-width: 100%; }

h1, h2, h3, h4 { margin: 0; color: var(--text); font-family: var(--font); }
h1 { font-size: 32px; line-height: 40px; font-weight: 700; }
h2 { font-size: 24px; line-height: 32px; font-weight: 700; }
h3 { font-size: 20px; line-height: 28px; font-weight: 600; }
h4 { font-size: 18px; line-height: 26px; font-weight: 600; }
p { margin: 0; }

a { color: var(--primary); text-decoration: none; }
a:visited { color: var(--primary); }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

/* заголовок раздела не прячется под неподвижной полосой меню */
[id] { scroll-margin-top: calc(var(--header-h) + var(--s3)); }

.Muted { color: var(--text2); }
.Small { font-size: 14px; line-height: 20px; }
.Caption { font-size: 12px; line-height: 16px; color: var(--text2); }

.Wrap { max-width: 1440px; margin: 0 auto; padding: 0 var(--s5); }
@media (min-width: 1440px) { .Wrap { padding: 0 var(--s6); } }
@media (max-width: 767px) { .Wrap { padding: 0 var(--s2); } }

/* ---------- 3. Header ---------- */
.Header {
	position: sticky;
	top: 0;
	z-index: 10;
	background: var(--header);
	border-bottom: 1px solid var(--header-border); }

.HeaderIn { display: flex; align-items: center; gap: var(--s4); min-height: var(--header-h); }

.Logo, .Logo:visited { font-size: 22px; font-weight: 700; color: var(--text); white-space: nowrap; }
.Logo:hover { text-decoration: none; }

.Descriptor { color: var(--text2); font-size: 14px; line-height: 20px; }

.MenuToggle {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	clip: rect(0 0 0 0); clip-path: inset(50%);
	overflow: hidden; }
.MenuBtn { display: none; }

.Nav { margin-left: auto; display: flex; gap: var(--s3); overflow-x: auto; scrollbar-width: none; }
.Nav::-webkit-scrollbar { display: none; }
.Nav a, .Nav a:visited {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--s1);
	color: var(--text);
	font-size: 15px;
	font-weight: 500;
	white-space: nowrap; }

@media (max-width: 1399px) { .Descriptor { display: none; } }
@media (max-width: 1023px) {
	:root { --header-h: 56px; }
	.HeaderIn { gap: var(--s2); }
	.Logo { font-size: 18px; }

	.MenuBtn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px; height: 44px;
		margin-left: auto;
		color: var(--text);
		cursor: pointer; }
	.MenuBtn svg { width: 24px; height: 24px; }
	.MenuToggle:focus-visible + .MenuBtn { outline: 2px solid var(--primary); outline-offset: -4px; border-radius: 8px; }

	.Nav { display: none; }
	.MenuToggle:checked ~ .Nav {
		display: flex;
		flex-direction: column;
		position: absolute;
		left: 0; right: 0; top: 100%;
		gap: 0;
		padding: 0 var(--s3);
		background: var(--header);
		border-bottom: 1px solid var(--header-border);
		box-shadow: var(--shadow); }
	.MenuToggle:checked ~ .Nav a {
		min-height: 48px;
		font-size: 16px;
		border-bottom: 1px solid var(--header-border); }
	.MenuToggle:checked ~ .Nav a:last-child { border-bottom: 0; }
}

/* ---------- 4. Hero ---------- */
.Hero {
	position: relative;
	overflow: hidden;
	margin: var(--s5) 0;
	padding: var(--s6) var(--s5);
	min-height: 240px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-radius: var(--radius);
	background: linear-gradient(180deg, #EFF6FF 0%, #F8FAFC 100%); }

.Hero > * { position: relative; z-index: 1; }
.Hero h1 { max-width: 620px; }
.HeroText { max-width: 560px; margin-top: var(--s3); color: var(--text2); }

.HeroArt {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 0;
	width: 55%;
	height: 75%;
	pointer-events: none; }

@media (max-width: 1023px) { .HeroArt { width: 45%; } }

/* ---------- 5. Subject cards ---------- */
.Subjects {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--s3);
	margin-bottom: var(--s5); }
@media (max-width: 1023px) { .Subjects { grid-template-columns: repeat(2, 1fr); } }
.Subjects.Two { grid-template-columns: repeat(2, 1fr); }

.Subject, .Subject:visited {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--s3);
	padding: var(--s4);
	padding-bottom: var(--s5);
	min-height: 132px;
	color: var(--text);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	transition: transform .15s ease, box-shadow .15s ease; }
.Subject:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow); }
.Subject:active { transform: none; }

.SubjIcon { flex: 0 0 auto; width: 48px; height: 48px; }
.Subject > span { flex: 1 1 auto; min-width: 0; }
.SubjExam, .SubjName, .SubjHint { display: block; }
.SubjExam { font-size: 14px; line-height: 20px; font-weight: 700; text-transform: uppercase; }
.SubjName { font-size: 20px; line-height: 28px; font-weight: 700; }
.SubjHint { font-size: 13px; line-height: 18px; color: var(--text2); margin-top: var(--s1); }
.Arrow { position: absolute; right: var(--s4); bottom: var(--s4); font-size: 18px; line-height: 1; }

.S1 { background: #EFF6FF; border-color: #DBEAFE; }
.S1 .SubjIcon, .S1 .SubjExam, .S1 .Arrow { color: var(--primary); }
.S2 { background: #F5F3FF; border-color: #EDE9FE; }
.S2 .SubjIcon, .S2 .SubjExam, .S2 .Arrow { color: #7C3AED; }
.S3 { background: #ECFDF5; border-color: #D1FAE5; }
.S3 .SubjIcon, .S3 .SubjExam, .S3 .Arrow { color: #047857; }
.S4 { background: #FFF7ED; border-color: #FFEDD5; }
.S4 .SubjIcon, .S4 .SubjExam, .S4 .Arrow { color: #C2410C; }

@media (max-width: 767px) {
	.Subject {
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: 0;
		padding: var(--s3);
		padding-bottom: var(--s4);
		min-height: 84px; }
	.SubjIcon, .SubjHint { display: none; }
	.SubjName { font-size: 17px; line-height: 24px; }
	.Arrow { right: var(--s3); bottom: var(--s2); }
}

/* ---------- 6. Блоки и карточки ---------- */
.Card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: var(--s4); }
/* подзаголовок группы ссылок внутри карточки */
.Card > h3 { font-size: 17px; line-height: 24px; margin-bottom: var(--s1); }
.Card > * + h3 { margin-top: var(--s4); }

.Section { margin-bottom: var(--s5); }
.SectionHead {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s2) var(--s3);
	margin-bottom: var(--s3); }

.Trio {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: var(--s5);
	align-items: start;
	margin-bottom: var(--s5); }
.Trio h2 { font-size: 20px; line-height: 28px; }

.Cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: var(--s4) var(--s5); }

/* ---------- 7. Списки-строки ---------- */
.Rows { display: flex; flex-direction: column; }

.Row, .Row:visited {
	display: flex;
	align-items: center;
	gap: var(--s3);
	min-height: 56px;
	padding: var(--s2) var(--s3);
	color: var(--text);
	border-bottom: 1px solid var(--border);
	border-radius: var(--radius-sm); }
.Row:last-child { border-bottom: 0; }
.Row:hover { text-decoration: none; background: #F1F5F9; }

.RowNum { flex: 0 0 auto; min-width: 56px; font-weight: 700; }
.RowText { flex: 1 1 auto; }
.RowText small { display: block; font-size: 14px; line-height: 20px; color: var(--text2); }
.Chevron { flex: 0 0 auto; color: var(--primary); }

/* Простые списки ссылок (формулы, справочник) */
.LinkList { display: flex; flex-direction: column; }
.LinkList a, .LinkList a:visited {
	display: flex;
	align-items: center;
	gap: var(--s2);
	min-height: 36px;
	color: var(--link); }
.LinkList a:visited { color: var(--link); }
.LinkList a { padding: var(--s1) 0; }
/* текстовый значок раздела справочника (Md, Р, Э, φ, π ...) - одинаковый везде */
.Badge {
	display: inline-block;
	width: 28px;
	text-align: center;
	font-weight: 700;
	color: var(--text2); }
.LinkList .Badge { flex: 0 0 auto; }
.Badge svg { width: 22px; height: 22px; display: block; margin: 0 auto; }
.Badge.Ico { color: var(--link); }
.Badge.Math {
	font-family: "Times New Roman", Georgia, serif;
	font-style: italic;
	font-size: 17px;
	color: var(--link); }
.Badge.Math sup { font-style: normal; font-size: .62em; }
@media (max-width: 767px) { .LinkList a { min-height: 44px; } }

/* ---------- 8. Информация об экзаменах ---------- */
.ExamCards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: var(--s3); }
.ExamHead { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2); }
.ExamHead svg { width: 28px; height: 28px; }

.Cta, .Cta:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s2);
	min-height: 44px;
	margin-top: var(--s3);
	padding: 0 var(--s4);
	color: #FFFFFF;
	font-weight: 600;
	background: var(--primary);
	border-radius: var(--radius-sm); }
.Cta:hover { text-decoration: none; filter: brightness(.93); }
.Cta.Green, .Cta.Green:visited { background: #047857; }

/* ---------- 9. Преимущества ---------- */
.Promo {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
	gap: var(--s4);
	margin-bottom: var(--s5);
	padding: var(--s5);
	background: var(--primary-light);
	border-radius: var(--radius); }
.Benefit { display: flex; align-items: flex-start; gap: var(--s3); }
.Benefit svg { flex: 0 0 auto; width: 32px; height: 32px; color: var(--primary); }
@media (max-width: 767px) { .Promo { padding: var(--s4) var(--s3); gap: var(--s3); } }

/* ---------- 10. Страны и футер ---------- */
.Countries { text-align: center; font-size: 14px; line-height: 32px; }

.SiteFooter {
	margin-top: var(--s6);
	padding: var(--s5) 0;
	background: var(--surface);
	border-top: 1px solid var(--border); }
.FooterIn { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); }
@media (max-width: 767px) { .FooterIn { flex-direction: column; align-items: flex-start; gap: var(--s3); } }

/* ---------- 11. Контент задачи/формул (переопределяет style-ege.css) ---------- */
.Content {
	float: none;
	width: auto;
	margin-bottom: var(--s5);
	padding: var(--s4);
	overflow-x: auto;
	font-family: var(--font);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius); }
/* воздух над подзаголовками на страницах формул - 0.75 высоты строки */
#TaskContent h2, #TaskContent h3, #TaskContent h4 { margin-top: 24px; margin-top: 0.75lh; }
#TaskContent > :first-child { margin-top: 0; }

/* формула не должна упираться в правую границу таблицы.
   :where() обнуляет специфичность - собственные отступы подключаемых
   страниц (Менделеев, растворимость) остаются в силе */
:where(#TaskContent td) { padding-right: 12px; }

/* схемы в таблицах формул не масштабируются: это мелкие чертежи (100x100),
   при сжатии они становятся нечитаемыми. Узкую таблицу прокручивает .Content */
#TaskContent td img { max-width: none; }

/* комментарий к формуле всегда с отступом слева (style-ege.css обнуляет его ниже 1100px) */
@media (max-width: 1100px) { .FormulaComment { padding-left: 10px; } }

/* подключаемые страницы задают .Content{width:195%} и т.п. под старую вёрстку */
#TaskContent.Content { width: auto; max-width: 100%; margin-left: 0; margin-right: 0; }

/* широкие таблицы (Менделеев) - во всю ширину экрана, чтобы на больших
   мониторах обходиться без горизонтальной прокрутки */
@media (min-width: 768px) {
	#TaskContent.Wide {
		max-width: none;
		margin-left: calc(50% - 50vw + var(--sbw, 0px) / 2);
		margin-right: calc(50% - 50vw + var(--sbw, 0px) / 2);
		padding-left: var(--s3);
		padding-right: var(--s3);
		border-left: 0;
		border-right: 0;
		border-radius: 0; }
}

/* Mendeleev.html закрывает карточку раньше времени и выносит комментарий
   во float:left шириной 100% - соседний блок остаётся без места */
main > .MendeleevComment {
	float: none;
	width: auto;
	margin: 0 0 var(--s5);
	padding: var(--s4);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius); }
@media (max-width: 767px) {
	#TaskContent.Content { padding: var(--s2); }
	main > .MendeleevComment { padding: var(--s2); margin-bottom: 0; }
}

/* ---------- 12. Мобильная раскладка (после всех базовых правил) ---------- */
@media (max-width: 767px) {
	/* шапка -> сразу тайлы: без текста и без гор */
	main.Wrap { display: flex; flex-direction: column; gap: var(--s4); padding-top: var(--s4); }
	.Trio, .Hero { display: contents; }
	.HeroText, .HeroArt { display: none; }
	.Hero h1 {
		position: absolute;
		width: 1px; height: 1px;
		margin: -1px; padding: 0;
		clip: rect(0 0 0 0); clip-path: inset(50%);
		overflow: hidden; white-space: nowrap; }
	.Subjects, .Section, .Promo, .Content { margin-bottom: 0; }
	.Subjects.Inner { display: none; }
	/* порядок на мобильном: ... Разбор заданий -> Информация об экзаменах -> преимущества -> страны */
	.ExamInfo { order: 1; }
	.Promo { order: 2; }
	.Countries { order: 3; }
}

/* ---------- 13. Страница 404 ---------- */
.NotFound {
	max-width: 640px;
	margin: var(--s6) auto;
	text-align: center; }
.NotFoundCode {
	font-size: 96px;
	line-height: 1;
	font-weight: 700;
	color: var(--primary); }
.NotFound h1 { margin-top: var(--s3); }
.NotFoundText { margin-top: var(--s3); color: var(--text2); }
.NotFound .Cta { margin-top: var(--s4); }
@media (max-width: 767px) {
	.NotFound { margin: var(--s4) auto; padding: var(--s4) var(--s3); }
	.NotFoundCode { font-size: 72px; }
	.NotFound h1 { font-size: 26px; line-height: 34px; }
}

/* ---------- 14. Печать ---------- */
.PrintHead { display: none; }

@media print {
	.Header, .Hero, .Subjects, .Trio, .Section, .Promo, .Countries, .SiteFooter { display: none; }
	.Content { border: 0; padding: 0; }

	/* крупный заголовок по центру первой печатной страницы */
	.PrintHead {
		display: block;
		margin: 0 0 16pt;
		font-family: var(--font);
		font-size: 32pt;
		font-weight: 700;
		line-height: 1.2;
		text-align: center; }
}