/* Етап 1. Вигляд за скриншотами замовника: меню stabilservice.net з комп'ютера (1504x220, масштаб 1,1315, вікно
   близько 1329 px) і меню «Отопление» з телефона (180x320). Поверх restored.css. Числа замірів у план.md, довідка. */
:root {
	--ss-top-bg: #c8e6c9;   /* верхня смуга, заміряно #c8e6ca */
	--ss-top-text: #41704b; /* текст і значки смуги, заміряно від #42744e до #476d48 */
	--ss-menu: #575a5f;     /* жирне головне меню */
	--ss-arrow: #a9adb1;    /* тонкі стрілки біля пунктів головного меню */
	--ss-green: #4caf50;    /* лупа пошуку, значки смуги на телефоні */
	--ss-mob-top: #f5f5f5;  /* смуга на телефоні */
}
/* шрифт старого сайту: системний набір Bootstrap 4, 16 px; на Windows це Segoe UI */
body, .btn, .form-control, .dropdown-menu { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }

/* Верхня смуга на комп'ютері: 32 px */
.page-top { background: var(--ss-top-bg); border-bottom: 0; font-size: 16px; line-height: 24px; }
.page-top .row { min-height: 32px; }
.page-top a, .page-top .btn-link, .page-top .btn.link { color: var(--ss-top-text); }
.page-top a:hover { color: #1f4f2a; }
.languages a,
body[data-lang="ru"] .languages .language-ru a,
body[data-lang="uk"] .languages .language-uk a { color: var(--ss-top-text); font-weight: 400; text-transform: uppercase; }
.languages .list-inline-item:not(:last-child) { margin-right: 12px; }
.phones a { color: var(--ss-top-text); font-weight: 400; }
.phones i { color: var(--ss-top-text); margin-right: 3px; }
.phones .list-inline-item { margin-right: 14px; }
@media (min-width: 992px) { .col-contacts-list { margin-left: 120px; } }
.col-menu-list .menu > li > a { color: var(--ss-top-text); padding: 4px 0 4px 16px; }
.col-menu-list .menu > li > a:hover { color: #1f4f2a; }
.col-menu-list .sub-menu { z-index: 60; }

/* тонкі стрілки біля пунктів з підменю */
.col-menu-list .menu > li.menu-item-has-children > a::after,
.fading-menu > li.menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin: 0 2px 4px 7px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg);
}
.fading-menu > li.menu-item-has-children > a::after { border-color: var(--ss-arrow); }

/* Головна шапка: великий логотип, жирне меню, поле пошуку праворуч */
#navigation .navbar { padding-top: 8px; padding-bottom: 8px; }
.navbar-brand { padding: 5px 0; }
.navbar-brand img { height: 108px; width: auto; }
@media (min-width: 992px) {
	#MainMenuFading { margin-left: auto; }
	.fading-menu > li > a { padding: 8px; font-size: 16px; font-weight: 700; color: var(--ss-menu); text-transform: none; letter-spacing: 0; border-bottom: 0; }
	.fading-menu > li:hover > a { color: var(--brand); }
	.header-search { margin-left: 46px; width: 160px; flex: 0 0 160px; }
	.page-top .col-search { display: none; }
}
.header-search .input-group { flex-wrap: nowrap; position: relative; }
.header-search .form-control { height: 31px; font-size: 14px; color: var(--text); border: 1px solid #ced4da; border-radius: 3px; padding: 3px 30px 3px 9px; box-shadow: none; }
.header-search .form-control::placeholder { color: #6c757d; }
.header-search .form-control:focus { border-color: var(--ss-green); }
.header-search .append { position: absolute; right: 0; top: 0; bottom: 0; display: flex; z-index: 4; }
.header-search .btn.success { background: transparent; border: 0; color: var(--ss-green); padding: 0 9px; font-size: 13px; }
.header-search .btn.success:hover { color: var(--brand-dark); background: transparent; }

/* Телефон і планшет: як на скриншоті меню «Отопление» */
@media (max-width: 991.98px) {
	.page-top { background: var(--ss-mob-top); }
	.page-top .row { min-height: 38px; flex-wrap: nowrap; }
	.col-languages-list, .col-contacts-list, .col-menu-list { display: none; }
	.col-languages-dropdown { display: block; order: 1; padding-right: 0; }
	.col-menu-dropdown { display: block; order: 2; margin-left: 0; padding-left: 2px; }
	.col-search { order: 3; margin-left: auto; flex: 0 0 auto; width: auto; max-width: none; }
	.page-top .btn-link, .page-top .btn.link { color: var(--ss-green); font-size: 15px; padding: 4px 2px; }
	/* мова: зелений значок із трьох крапок замість «ru» */
	.btn-dropdown-languages { font-size: 0 !important; padding: 4px 6px !important; }
	.btn-dropdown-languages::before { content: "\f142"; font: 900 16px/1 "Font Awesome 5 Free"; color: var(--ss-green); }
	.btn-dropdown-languages::after { display: none; }
	.navbar-brand img { height: 64px; }
	#MainMenuCollapse .navbar-nav { text-align: center; padding: 8px 0 4px; margin-top: 8px; border-top: 0; }
	#MainMenuCollapse .nav-link { color: #333; font-weight: 400; padding: 9px 0; }
	#MainMenuCollapse .dropdown-toggle::after { display: none; }
	#MainMenuCollapse .dropdown.show > .nav-link { background: #e6e6e6; border-bottom: 2px solid var(--ss-green); }
	#MainMenuCollapse .dropdown-menu { padding: 4px 0 8px; margin: 0; text-align: center; background: transparent; border: 0; border-bottom: 1px solid #d9d9d9; border-radius: 0; }
	#MainMenuCollapse .dropdown-item { font-weight: 700; color: #333; padding: 6px 12px; white-space: normal; }
}

/* Вузький телефон: без прокрутки вбік */
@media (max-width: 575.98px) {
	.page-footer .col-brand { flex: 0 0 100%; max-width: 100%; }
	.brand-description { white-space: normal; }
}

/* Внутрішні сторінки, пошук, 404 */
.page-title { font-size: 28px; font-weight: 500; margin: 8px 0 20px; }
.page-footer .col-brand img { height: 64px; width: auto; }
.page-footer .contacts.fa-ul { margin-left: 28px; }
.page-search { max-width: 480px; margin: 0 0 24px; }
.page-search .input-group { flex-wrap: nowrap; }
.page-search .form-control { border-radius: 3px 0 0 3px; }
.page-search .append .btn { border-radius: 0 3px 3px 0; height: 100%; }
.search-list li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.search-list p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }

/* Компʼютер вужчий за 1200 px: пошта не влазить у смугу, лишаємо телефони, щоб смуга була в один рядок */
@media (min-width: 992px) and (max-width: 1199.98px) {
	.phones .item-email { display: none; }
	.col-contacts-list { margin-left: 24px; }
}