/* =====================================================================
   mobile.css — адаптация сайта «Волга-Газ» под телефоны и планшеты
   ---------------------------------------------------------------------
   Добавлено при оптимизации (ноябрь 2026).
   Подключается на каждой странице ПОСЛЕ main.css, поэтому переопределяет
   его правила. Все правила, меняющие вид, находятся внутри @media —
   на экранах шире 900px (обычный компьютер) сайт выглядит как раньше.
   В паре с этим файлом работает js/mobile.js (кнопка «Меню» и
   прокрутка широких таблиц).
   ===================================================================== */

/* ---------- Общие правила для всех экранов (безопасные) ---------- */

/* Кнопка «☰ Меню» создаётся скриптом js/mobile.js.
   На компьютере она не нужна — прячем. */
.mobile-menu-btn { display: none; }

/* Обёртка для широких таблиц (тоже создаётся js/mobile.js).
   На компьютере ничего не меняет, на телефоне даёт горизонтальную прокрутку. */
.table-scroll { width: 100%; }

/* Картинки никогда не вылезают за пределы своего блока */
img, video, iframe, embed, object { max-width: 100%; }

/* ======================================================================
   ПЛАНШЕТЫ И ТЕЛЕФОНЫ: ширина экрана до 900px
   ====================================================================== */
@media (max-width: 900px) {

	/* --- Основа страницы --- */
	html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
	body {
		max-width: 100%;
		overflow-x: hidden;            /* защита от случайной горизонтальной прокрутки */
		font-size: 15px;               /* чуть крупнее — удобнее читать с телефона */
		line-height: 1.45;
		background-attachment: scroll; /* fixed-фон тормозит и глючит на iOS/Android */
		background-size: cover;
	}
	main { display: block; padding: 0 8px; }

	/* --- Шапка (логотип + телефон) --- */
	.topImage, .topImage1 {
		height: auto;                 /* вместо фиксированных 237px */
		min-height: 120px;
		background-size: cover;
		background-position: left center;
		padding: 8px 0;
	}
	.PGO, .PGOtel {
		font-size: 0.85em;
		letter-spacing: 1px;
		word-spacing: 2px;
		padding: 6px 10px;
		text-shadow: 0 1px 3px #000;  /* светлый текст читается на картинке */
	}
	.PGOtel font { font-size: 1.25em; }
	.reshenie { padding: 10px; letter-spacing: 1px; font-size: 14px; }

	/* --- Главное меню: превращаем в выпадающий список по кнопке --- */
	nav {
		height: auto;
		text-align: left;
		position: relative;
		z-index: 50;
	}
	/* Скрипт «прилипающего» меню добавляет класс .fixed — на телефоне
	   используем sticky, чтобы меню не перекрывало контент */
	nav.fixed { position: sticky; top: 0; max-width: 100%; }

	.mobile-menu-btn {
		display: block;
		width: 100%;
		padding: 12px 16px;
		border: 0;
		font: bold 17px Arial, Helvetica, sans-serif;
		color: #CCFFCC;
		text-align: left;
		cursor: pointer;
		background: linear-gradient(to bottom, #95BEDC 0%, #5578A5 50%, #375585 50%, #050F1C 100%);
	}
	nav ul { display: block; border-right: 0; }

	/* Пока меню закрыто — пункты не показываем */
	nav .topMenu { display: none; }
	nav.menu-open .topMenu {
		display: block;
		max-height: calc(100vh - 48px); /* длинное меню прокручивается внутри */
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		background: #1d3358;
	}
	.topMenu > li {
		float: none;
		white-space: normal;
		border-left: 0;
		border-top: 1px solid #5578A5;
	}
	.topMenu > li > a { padding: 12px 16px; font-size: 1.05em; }

	/* Подменю: не всплывают по наведению, а раскрываются касанием
	   (класс .sub-open ставит js/mobile.js) */
	.subMenu, .subMenu .subMenu {
		position: static;
		min-width: 0;
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: none;
		display: none;
		border: 0;
		box-shadow: none;
		padding-left: 14px;            /* вложенность видна по отступу */
		background: rgba(0, 0, 0, 0.15);
	}
	nav li:hover > .subMenu { transform: none; } /* отключаем «наведение» */
	nav li.sub-open > .subMenu { display: block; }
	.subMenu li { background: transparent; border-top: 1px solid rgba(255,255,255,0.12); }
	.subMenu li a { padding: 11px 14px; white-space: normal; }
	/* Стрелка у пунктов с подменю: поворачивается при раскрытии */
	.subMenu span { display: inline; background-image: none; padding-right: 0; }
	nav li.has-sub > a::after { content: " ▾"; color: #FFFF00; }
	nav li.has-sub.sub-open > a::after { content: " ▴"; }

	/* --- Заголовки: убираем огромную разрядку букв --- */
	h1 {
		font-size: 1.35em;
		letter-spacing: 1px !important;
		word-spacing: 2px !important;
		margin: 16px 0;
		padding: 8px 10px 10px;
	}
	h2, h3 { letter-spacing: 1px; margin: 0; padding: 7px 10px; }
	h3 { margin-bottom: 16px; }
	.box__wrap h2 { font-size: 1.25em; letter-spacing: 2px; word-spacing: 4px; }

	/* --- Плашки-объявления под меню --- */
	.subNavHead {
		margin: 12px 0;
		padding: 8px 10px;
		letter-spacing: 0;
		line-height: 1.7;              /* ссылки-«крошки» удобнее нажимать */
	}

	/* --- Карточки каталога на главной (2 колонки -> 1 колонка) --- */
	.columns, .columns1 { margin-right: 0; }
	.box_wrap {
		float: none;
		width: 100%;
		max-width: 100%;
		min-width: 0;                  /* было 380px — не влезало в экран телефона */
		margin: 0 0 20px 0;
	}
	.half_box_img {
		float: none;
		max-width: 100%;
		min-width: 0;
		padding: 15px 10px 5px;
	}
	.half_box_text { float: none; margin: 0 10px 10px 0; }
	.Tab_Img_L { width: 180px; max-width: 100%; height: auto; }

	/* «Популярные категории», фотогалерея, сертификаты — плитки по 2 в ряд */
	.box__wrap .columns { justify-content: space-around; }
	.box_wrap_galery, .box__wrap .box_wrap_galery {
		float: none;
		width: calc(50% - 12px);
		max-width: none;
		margin: 10px 6px;
		padding: 8px;
	}
	.box__wrap .Tab_Img_L, .box_wrap_galery img { width: 100%; height: auto; }
	.box__wrap h5 { font-size: 0.85em; letter-spacing: 1px; word-spacing: 2px; line-height: 2.4em; height: auto; }
	.box_wrap_sert {
		float: none;
		width: calc(50% - 12px);
		min-width: 0;
		margin: 10px 6px;
		padding: 8px;
	}

	/* --- Картинки в тексте: без обтекания, по центру --- */
	img { height: auto; }
	.Text_Img_R, .Text_Img_L, .img_opis {
		float: none !important;
		display: block;
		margin: 10px auto !important;
		width: auto;
		max-width: 100%;
		max-height: 320px;
	}

	/* --- Таблицы характеристик --- */
	table, table.ctable {
		width: 100% !important;        /* переопределяем width="800px" и т.п. */
		margin: 15px 0;
		font-size: 12px;
	}
	/* Обёртка из js/mobile.js: широкая таблица листается пальцем вбок */
	.table-scroll {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		margin: 15px 0;
	}
	.table-scroll > table { margin: 0; }
	th, td { padding: 4px 3px; }
	td[nowrap] { white-space: normal; }
	/* Ячейки с жёстко заданной шириной (width="260" и др.) больше не распирают экран */
	td[width], th[width] { width: auto !important; }

	/* Бегущие строки/блоки фиксированной ширины (marquee width="560") */
	marquee, .center { max-width: 100%; }
	marquee { width: 100% !important; }
	.marquee-static { margin: 8px 0; word-wrap: break-word; overflow-wrap: anywhere; } /* см. js/mobile.js, п.4 */

	/* Карты, видео и прочие встраиваемые элементы */
	iframe, video, embed, object { width: 100% !important; }
	iframe { min-height: 250px; }

	/* Формы (калькуляторы, обратная связь) */
	input, select, textarea { max-width: 100%; font-size: 16px; } /* 16px — iOS не зумит поле */
	.boilerfuel_form input[type=text] { width: 70px; }
	.aftersendmail { left: 5%; right: 5%; }

	/* --- Подвал --- */
	.foot { padding: 20px 10px 15px; font-size: 13px; }
	.imgMail, .imgYandex { float: none; display: inline-block; margin: 4px; }

	/* Новогодние шары (если их снова включат) — на телефоне прячем */
}

/* ======================================================================
   УЗКИЕ ТЕЛЕФОНЫ: до 480px
   ====================================================================== */
@media (max-width: 480px) {
	body { font-size: 14px; }
	.PGO { display: none; }            /* слоган дублирует логотип — экономим место */
	.topImage, .topImage1 { min-height: 100px; }
	h1 { font-size: 1.2em; }
	/* Плитки галереи/сертификатов: по 2 в ряд, но поуже отступы */
	.box_wrap_galery, .box__wrap .box_wrap_galery, .box_wrap_sert { margin: 6px 3px; width: calc(50% - 6px); }
	ul { margin-left: 0; padding-left: 22px; }
	table, table.ctable { font-size: 11px; }
}

/* Печать: меню и кнопки не нужны */
@media print {
	nav, .mobile-menu-btn { display: none !important; }
}

/* [SEO, ноябрь 2026] На страницах, где не было заголовка H1, первый заголовок H2/H3
   стал H1 (Яндексу важен один главный заголовок). Эти классы оставляют ему
   прежний внешний вид, чтобы дизайн не поменялся. */
h1.seo-h1-h2, h1.seo-h1-h3 {
	font-size: 1.2em; font-weight: 500; letter-spacing: 2px; word-spacing: normal;
	color: #FFFFFF; text-align: left; padding: 7px 15px; margin: 0px -1px;
	border: 1px solid #A8B8C8; box-shadow: 0px 3px 7px #60A0C0;
	background: linear-gradient(to right, #334f7d 50%, #FFFFFF 100%);
}
h1.seo-h1-h3 { margin-bottom: 30px; }
@media (max-width: 768px) {
	h1.seo-h1-h2, h1.seo-h1-h3 { letter-spacing: 1px; margin: 0; padding: 7px 10px; }
	h1.seo-h1-h3 { margin-bottom: 16px; }
}
/* Список ссылок меню для браузеров без JavaScript (виден только поисковикам/без JS) */
.noscript-menu { display: flex; flex-wrap: wrap; gap: 4px 14px; list-style: none; padding: 8px; margin: 0; font-size: 14px; }