/* =========================================================================
   SPIVMIR — базовые стили темы
   Порядок подключения: base → header → footer → content → services →
   front → news → price → pages (см. inc/assets.php).
   Значения взяты из старого сайта: old/css/style.css, skeleton.css,
   template.css и вычисленных стилей живого сайта (analysis/baseline).
   Брейкпоинты темы: 1199 / 1023 / 767.
   ========================================================================= */

/* --- 1. Шрифты (локальные, Roboto Condensed 300–400, переменный woff2) ---- */

@font-face {
	font-family: "Roboto Condensed";
	font-style: normal;
	font-weight: 300 400;
	font-display: swap;
	src: url("../fonts/roboto-condensed-cyrillic-ext.woff2") format("woff2");
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
	font-family: "Roboto Condensed";
	font-style: normal;
	font-weight: 300 400;
	font-display: swap;
	src: url("../fonts/roboto-condensed-cyrillic.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "Roboto Condensed";
	font-style: normal;
	font-weight: 300 400;
	font-display: swap;
	src: url("../fonts/roboto-condensed-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Roboto Condensed";
	font-style: normal;
	font-weight: 300 400;
	font-display: swap;
	src: url("../fonts/roboto-condensed-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- 2. Переменные ------------------------------------------------------- */

:root {
	/* Цвета бренда */
	--c-green: #568d0d;              /* ссылки, пилюли, футер, кнопка */
	--c-green-dark: #4d7e0a;         /* полоса хлебных крошек */
	--c-green-darker: #416705;
	--c-orange: rgb(255, 97, 0);     /* «Прайс лист», «Анализы» */
	--c-orange-hover: #da4d08;       /* hover пунктов меню L1, каретка */
	--c-heading: #b94a48;            /* h2–h4 контента */
	--c-heading-h1: #333;            /* h1 контента и «Популярные услуги» */

	/* Градиенты меню */
	--g-sub-from: rgb(124, 175, 34);
	--g-sub-to: rgb(65, 118, 5);
	--g-sub2-from: rgb(77, 126, 10);
	--g-sub2-to: rgb(54, 98, 4);
	--c-sub-bg: #2a3b4d;             /* фон ul.sub до hover */
	--c-sub2-arrow: rgb(79, 123, 3);

	/* Текст и фон */
	--c-text: #222;
	--c-text-muted: #696969;         /* пункты меню L1 */
	--c-text-soft: #888;
	--c-text-soft-2: #969696;
	--c-bg: #f2f2f2;
	--c-bg-card: #f7f7f7;            /* карточка новости */
	--c-white: #fff;
	--c-breadcrumbs: #c9d2bc;        /* текст крошек */

	/* Рамки */
	--c-border: #b2b2b2;             /* пилюли левого меню */
	--c-border-light: #ddd;          /* иконки контактов */
	--c-border-table: #e0e0e0;
	--c-border-input: #d1d1d1;
	--c-row-hover: #daf1ac;           /* hover строки прайса */
	--c-row-zebra: #f5f5f5;

	/* Типографика */
	--font-head: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
	--font-body: "Helvetica Neue", Helvetica, Arial, "Segoe UI", Roboto, system-ui, sans-serif;
	--fs-base: 1.5rem;               /* 15px */
	--lh-base: 1.6;

	/* Размеры и раскладка */
	--container: 960px;
	--container-pad: 20px;
	--radius-pill: 20px;
	--radius: 4px;

	/*
	 * Высота липкой полки меню — полки 2 шапки (.site-header__bar, header.css
	 * §4.2). При прокрутке первая полка уезжает, эта остаётся, и её 52 px
	 * закрывают верх страницы. Число живёт в каркасе, потому что на него
	 * опираются чужие компоненты (отступ якорей ниже, липкая шапка таблицы
	 * прайса): изменится высота полки — правится одна строка, а не три
	 * хардкода в трёх файлах. Имя с префиксом темы: переменная межкомпонентная,
	 * в отличие от палитры её читают из других CSS-файлов.
	 */
	--spivmir-sticky-h: 52px;

	/* Переходы */
	--t-fast: 0.15s ease;
	--t: 0.25s ease;
}

/* --- 3. Reset / нормализация --------------------------------------------- */

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

html {
	font-size: 62.5%;                /* 1rem = 10px, как на старом сайте */
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

/*
 * Отступ якорей под липкую полку меню.
 *
 * Условие продублировано один в один с header.css §4.5: липкость включается
 * только при ширине ≥1024 px И высоте окна ≥600 px. На телефонах и в низких
 * окнах шапка уезжает вместе со страницей, и постоянный отступ там был бы
 * чистой потерей высоты экрана при каждом переходе по якорю. Два условия
 * обязаны совпадать — разойдутся, и якоря начнут промахиваться.
 *
 * Запас 8 px: ровно по высоте полосы цель приземляется впритык к её кромке
 * и читается как продолжение полосы, а не как начало раздела.
 *
 * Отступ учитывают и переходы по «#», и Element.scrollIntoView(); компонентам
 * остаётся добавлять к нему через scroll-margin-top только СВОЮ липкую высоту
 * (так делает прайс: шапка таблицы стоит ниже полосы меню и складывается с ней).
 */
@media (min-width: 1024px) and (min-height: 600px) {

	html {
		scroll-padding-top: calc(var(--spivmir-sticky-h) + 8px);
	}

	/*
	 * Залогиненный редактор: панель админки 32 px стоит НАД липкой полкой,
	 * поэтому полоса занимает 32…84 px и цель на 60 px уходит под неё
	 * (ср. .admin-bar .site-header в header.css §4.5). Класс висит на <body>,
	 * а scroll-padding от body не наследуется вьюпортом — читаем через :has()
	 * на <html>. В браузерах без :has() правило просто не сработает: гостя
	 * это не касается, у него панели нет.
	 */
	html:has(body.admin-bar) {
		scroll-padding-top: calc(var(--spivmir-sticky-h) + 32px + 8px);
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-text);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

main {
	display: block;
}

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

img,
video {
	height: auto;
	border: 0;
}

iframe {
	border: 0;
}

svg {
	vertical-align: middle;
}

hr {
	height: 0;
	margin: 2.5rem 0;
	border: 0;
	border-top: 1px solid var(--c-border-light);
}

b,
strong {
	font-weight: 700;
}

small {
	font-size: 87.5%;
}

sub,
sup {
	position: relative;
	font-size: 75%;
	line-height: 0;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

code,
kbd,
pre,
samp {
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: 1.3rem;
}

pre {
	overflow-x: auto;
	padding: 1.5rem;
	background: var(--c-row-zebra);
	border-radius: var(--radius);
}

button,
input,
optgroup,
select,
textarea {
	margin: 0;
	font: inherit;
	color: inherit;
}

button,
[type="button"],
[type="submit"] {
	-webkit-appearance: button;
	cursor: pointer;
}

button {
	background: none;
	border: 0;
	padding: 0;
}

/* --- 4. Типографика ------------------------------------------------------ */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 2rem 0 1.5rem;
	font-family: var(--font-head);
	font-weight: 300;
	line-height: 1.2;
	color: var(--c-heading);
}

h1 {
	font-size: 3.4rem;               /* 34px, как .content h1 старого сайта */
	color: var(--c-heading-h1);
}

h2 {
	font-size: 2.8rem;               /* 28px */
}

h3 {
	font-size: 2.4rem;               /* 24px */
}

h4,
h5,
h6 {
	font-size: 2rem;                 /* 20px */
}

p {
	margin: 1.5rem 0;
}

a,
p,
li {
	line-height: 1.5;
}

a {
	color: var(--c-green);
	text-decoration: none;
	transition: color var(--t-fast);
}

a:hover,
a:focus {
	color: var(--c-green);
	text-decoration: underline;
}

ul,
ol {
	margin: 1.5rem 0;
	padding-left: 3rem;
}

/* Маркеры списков.
   На живом сайте контентные <ul> отображаются НУМЕРОВАННЫМИ: skeleton задаёт
   ul{list-style:circle inside}, а style.css:100 — ul li{list-style-type:disk}
   (невалидное имя счётчика, Chrome откатывается к decimal). Эталонные кадры
   otolaringologiya__1280.png и др. сняты именно так, поэтому вид воспроизведён.
   Отключается одной строкой: заменить decimal на circle. */
ul {
	list-style: circle outside;
}

.content ul:not(.check-list),
.content ul:not(.check-list) ul:not(.check-list) {
	list-style: decimal inside;
}

li {
	margin-bottom: 0.5rem;
}

li > ul,
li > ol {
	margin: 0.5rem 0;
}

blockquote {
	margin: 2rem 0;
	padding: 0.5rem 0 0.5rem 2rem;
	border-left: 3px solid var(--c-green);
	color: #444;
}

/* Список-чек-лист с зелёной галочкой (аналог img/checklist.png) */
.check-list {
	list-style: none;
	padding-left: 0;
}

.check-list > li {
	position: relative;
	padding-left: 3.5rem;
	padding-bottom: 1.25rem;
	list-style: none;
	background: none;
}

.check-list > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 22px;
	height: 20px;
	background: no-repeat center / 20px 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23568d0d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='m7.8 12.2 2.8 2.8 5.6-5.6'/%3E%3C/svg%3E");
}

/* Оранжевый акцент из «Форматов» редактора */
.accent-orange {
	color: var(--c-orange);
}

/* Врезка */
.note {
	margin: 2rem 0;
	padding: 1.5rem 2rem;
	background: var(--c-white);
	border-left: 3px solid var(--c-green);
}

/* --- 5. Таблицы ---------------------------------------------------------- */

table {
	width: 100%;
	margin: 2rem 0;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: 1.4rem;
}

th,
td {
	padding: 8px;
	border: 1px solid var(--c-border-table);
	text-align: left;
	vertical-align: top;
	word-wrap: break-word;
}

th {
	font-weight: 700;
	background: var(--c-row-zebra);
}

table.noborder,
table.noborder th,
table.noborder td {
	border: 0;
}

/* Обёртка для широких таблиц: горизонтальная прокрутка вместо ломки макета */
.table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 2rem 0;
}

.table-scroll > table {
	margin: 0;
	min-width: 560px;
}

/* --- 6. Контейнер и сетка ------------------------------------------------ */

.container {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding-left: var(--container-pad);
	padding-right: var(--container-pad);
}

.container--wide {
	max-width: 1200px;
}

.row {
	display: flex;
	flex-wrap: wrap;
	margin-left: -1.5rem;
	margin-right: -1.5rem;
}

.row > * {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	min-width: 0;
}

.cols {
	display: grid;
	gap: 3rem;
}

.cols--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cols--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cols--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cols--5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.clear {
	clear: both;
}

/* --- 7. Кнопки ----------------------------------------------------------- */

.btn,
.button {
	display: inline-block;
	padding: 7px 25px;
	border: 2px solid var(--c-green);
	border-radius: var(--radius-pill);
	background: var(--c-green);
	color: var(--c-white);
	font-family: var(--font-body);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.667;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.btn:hover,
.btn:focus,
.button:hover,
.button:focus {
	background: var(--c-green-dark);
	border-color: var(--c-green-dark);
	color: var(--c-white);
	text-decoration: none;
}

/* Обводка-пилюля — как .btn.btn-secondary на старом сайте */
.btn-secondary,
.btn--outline {
	background: none;
	border-color: var(--c-green);
	color: var(--c-green);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn--outline:hover,
.btn--outline:focus {
	background: var(--c-green);
	border-color: var(--c-green);
	color: var(--c-white);
}

.btn--orange {
	background: var(--c-orange);
	border-color: var(--c-orange);
	color: var(--c-white);
}

.btn--orange:hover,
.btn--orange:focus {
	background: var(--c-orange-hover);
	border-color: var(--c-orange-hover);
	color: var(--c-white);
}

.btn--block {
	display: block;
	width: 100%;
}

.btn--small {
	padding: 4px 16px;
	font-size: 1.3rem;
}

/* --- 8. Иконки ----------------------------------------------------------- */

.icon {
	width: 1em;
	height: 1em;
	display: inline-block;
	flex: none;
	vertical-align: -0.125em;
	fill: none;
	stroke: currentColor;
}

.icon--lg {
	width: 1.5em;
	height: 1.5em;
}

/* --- 9. Доступность ------------------------------------------------------ */

.visually-hidden,
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 20px;
	background: var(--c-green);
	color: var(--c-white);
	font-weight: 700;
	text-decoration: none;
}

.skip-link:focus {
	left: 0;
	color: var(--c-white);
	outline: 2px solid var(--c-orange);
	outline-offset: 2px;
}

:focus-visible {
	outline: 2px solid var(--c-orange-hover);
	outline-offset: 2px;
}

/* Убираем «прыгающий» контур у мыши, оставляя его клавиатуре */
:focus:not(:focus-visible) {
	outline: none;
}

/* --- 10. Утилиты --------------------------------------------------------- */

.text-center {
	text-align: center;
}

.text-right {
	text-align: right;
}

.nowrap {
	white-space: nowrap;
}

.mt0 {
	margin-top: 0;
}

.mb0 {
	margin-bottom: 0;
}

.is-hidden {
	display: none !important;
}

/* --- 11. Адаптив --------------------------------------------------------- */

/* 980–1199: контейнер 880 (как 80 % ширины на старом сайте) */
@media (max-width: 1199px) {
	.container {
		max-width: 880px;
	}
}

/* Планшеты */
@media (max-width: 1023px) {
	.container {
		max-width: 100%;
		padding-left: 24px;
		padding-right: 24px;
	}

	h1 {
		font-size: 3rem;
	}

	h2 {
		font-size: 2.6rem;
	}

	h3 {
		font-size: 2.2rem;
	}

	.cols--5 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.cols--4 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Телефоны */
@media (max-width: 767px) {
	.container {
		padding-left: 16px;
		padding-right: 16px;
	}

	h1 {
		font-size: 2.6rem;
	}

	h2 {
		font-size: 2.2rem;
	}

	h3 {
		font-size: 2rem;
	}

	h4,
	h5,
	h6 {
		font-size: 1.8rem;
	}

	.cols {
		gap: 2rem;
	}

	.cols--5,
	.cols--4,
	.cols--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cols--2 {
		grid-template-columns: minmax(0, 1fr);
	}

	.btn,
	.button {
		white-space: normal;
		min-height: 44px;
		padding: 10px 22px;
	}

	table {
		font-size: 1.3rem;
	}
}

@media (max-width: 479px) {
	.cols--5,
	.cols--4,
	.cols--3 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- 12. Печать ---------------------------------------------------------- */

@media print {
	body {
		background: #fff;
		color: #000;
	}

	.skip-link,
	.mainnav,
	.topbar,
	.footer,
	.popular {
		display: none !important;
	}
}