/*
 * asn.od.ua — публичный сайт. Единственный стиль страницы,
 * заменяет layout1_setup.css / layout1_text.css / asn.css (Multiflex-3, 2006).
 * Адаптивная раскладка: ширина до 1200px, меню сворачивается в бургер до 800px.
 */

:root {
	--c-text:    #333;
	--c-muted:   #6b6b6b;
	--c-head:    #505050;
	--c-link:    #2f6fa7;
	--c-link-h:  #1d4f7d;
	--c-line:    #d6d6d6;
	--c-bg:      #f4f4f4;
	--c-panel:   #fff;
	--c-nav:     #e2e2e2;
	--c-nav-h:   #cfcfcf;
	--c-accent:  #467aa7;
	--wrap:      1200px;
	--pad:       clamp(14px, 3vw, 30px);
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-text);
	font: 16px/1.6 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

a { color: var(--c-link); text-decoration: none; }
a:hover, a:focus-visible { color: var(--c-link-h); text-decoration: underline; }

/* ---------- каркас ---------- */

.page {
	max-width: var(--wrap);
	margin: 0 auto;
	background: var(--c-panel);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	box-shadow: 0 0 0 1px var(--c-line);
}

@media (min-width: 1240px) {
	.page { margin: 10px auto; min-height: calc(100vh - 20px); }
}

/* ---------- шапка ---------- */

.site-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 24px;
	padding: 14px var(--pad);
	background: #f0f0f0;
}

.brand {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--c-muted);
	min-width: 0;
}
.brand:hover, .brand:focus-visible { color: #323232; text-decoration: none; }
.brand img { flex: none; width: 50px; height: 46px; }
.brand-name {
	display: block;
	font-size: 1.9rem;
	font-weight: 700;
	line-height: 1.1;
}
.brand-sub {
	display: block;
	font-size: 1rem;
	line-height: 1.3;
}

.header-tools {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
}

.lang, .nav-top { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0; padding: 0; list-style: none; }
.lang a { display: block; padding: 2px; border: 2px solid transparent; border-radius: 3px; line-height: 0; }
.lang a[aria-current] { border-color: var(--c-accent); }
.lang img { display: block; height: 16px; width: auto; }

.nav-top a {
	display: block;
	padding: 2px 8px;
	color: var(--c-muted);
	font-weight: 700;
}
.nav-top a:hover, .nav-top a:focus-visible { color: #323232; text-decoration: none; }

@media (max-width: 600px) {
	.lang { flex: none; }
	.header-tools { width: 100%; flex-direction: row-reverse; justify-content: space-between; align-items: center; }
	.nav-top a { padding-left: 0; padding-right: 14px; }
}

/* ---------- главное меню ---------- */

.navbar { position: relative; background: var(--c-nav); border-bottom: 1px solid var(--c-line); }

.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-burger { display: none; }

.nav-main { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; }
.nav-main li { border-right: 1px solid #c4c4c4; }
.nav-main a {
	display: block;
	padding: 12px 18px;
	color: #555;
	font-weight: 700;
	font-size: 1.05rem;
}
.nav-main a:hover, .nav-main a:focus-visible { background: var(--c-nav-h); color: #222; text-decoration: none; }
.nav-main a[aria-current] { background: var(--c-panel); color: var(--c-accent); }

@media (max-width: 800px) {
	.nav-burger {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 10px var(--pad);
		font-weight: 700;
		color: #555;
		cursor: pointer;
		user-select: none;
	}
	.nav-burger::before {
		content: "";
		width: 22px;
		height: 16px;
		background:
			linear-gradient(currentColor 0 0) top    / 100% 2px no-repeat,
			linear-gradient(currentColor 0 0) center / 100% 2px no-repeat,
			linear-gradient(currentColor 0 0) bottom / 100% 2px no-repeat;
	}
	.nav-toggle:focus-visible + .nav-burger { outline: 2px solid var(--c-accent); outline-offset: -2px; }

	.nav-main { display: none; flex-direction: column; border-top: 1px solid #c4c4c4; }
	.nav-toggle:checked ~ .nav-main { display: flex; }
	.nav-main li { border-right: 0; border-bottom: 1px solid #c4c4c4; }
	.nav-main li:last-child { border-bottom: 0; }
	.nav-main a { padding: 12px var(--pad); }
}

/* ---------- содержимое ---------- */

.main { flex: 1; padding: 20px var(--pad) 40px; }

.main-content { max-width: 960px; overflow-wrap: break-word; }

.main-content h1, .main-content h2, .main-content h3 { color: var(--c-head); line-height: 1.25; }

.main-content h1.pagetitle {
	margin: 0 0 .6em;
	padding-bottom: 6px;
	border-bottom: 6px solid #e1e1e1;
	font-size: clamp(1.5rem, 4vw, 2rem);
}
.main-content h1 { margin: 1.4em 0 .5em; font-size: clamp(1.35rem, 3.5vw, 1.75rem); font-weight: 600; }
.main-content h2 { margin: 1.3em 0 .4em; font-size: clamp(1.15rem, 3vw, 1.35rem); font-weight: 600; }
.main-content h3 { margin: .8em 0 .4em; font-size: 1.1rem; font-weight: 400; color: var(--c-muted); }

.main-content p { margin: 0 0 1em; }

.main-content ul, .main-content ol { margin: .4em 0 1em; padding-left: 1.4em; }
.main-content li { margin: 0 0 .3em; }
.main-content li::marker { color: var(--c-accent); }

hr.clear-contentunit { clear: both; height: 1px; margin: 1.5em 0; border: 0; background: var(--c-line); }

/* новости: заголовок + дата под ним */
.part-news h2 { margin-top: 1.4em; padding-top: 1em; border-top: 1px solid #ececec; }
.part-news h2:first-of-type { margin-top: .4em; padding-top: 0; border-top: 0; }
.part-news h2 + h3 { margin: -.2em 0 .3em; font-size: .9rem; }

/* картинки в тексте */
.main-content img { display: block; margin: .6em 0 1em; border: 1px solid #c8c8c8; padding: 1px; }
/* у картинок из новостей в БД бывает инлайн width+height: без этого на узком экране их сплющивает */
.main-content img[style*="width"] { height: auto !important; }

/* ---------- таблицы ---------- */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: .5em 0 1em; }

.main-content table { width: 100%; border-collapse: collapse; background: #f7f7f7; }
.main-content th, .main-content td { padding: 8px 10px; border: 1px solid #a8a8a8; text-align: left; vertical-align: top; }
.main-content th { background: #e1e1e1; color: var(--c-head); font-weight: 700; }
.main-content td.key { white-space: nowrap; font-weight: 700; }

/* ---------- формы ---------- */

.form-row { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 0 0 1em; }
.form-row label { display: flex; flex-direction: column; gap: 4px; flex: 1 1 220px; }
.main-content input[type=text], .main-content input:not([type]) {
	width: 100%;
	padding: 6px 8px;
	border: 1px solid #b4b4b4;
	border-radius: 3px;
	font: inherit;
}
.captcha { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 1em 0; }
.captcha input[type=text] { max-width: 360px; }
.captcha img { margin: 0; }
.main-content input[type=submit] {
	padding: 8px 18px;
	border: 1px solid #969696;
	border-radius: 3px;
	background: #e6e6e6;
	font: inherit;
	cursor: pointer;
}
.main-content input[type=submit]:hover { background: #dadada; border-color: #505050; }

/* ---------- подвал ---------- */

.footer {
	padding: 14px var(--pad);
	background: #e1e1e1;
	color: #6b6b6b;
	font-size: .9rem;
	font-weight: 700;
	text-align: center;
}
.footer p { margin: 0; }
.footer a { color: #555; text-decoration: underline; }

@media print {
	.navbar, .header-tools { display: none; }
	.page { box-shadow: none; max-width: none; }
	body { background: #fff; }
}