/**
 * Адаптация всего сайта под мобильные устройства
 * Blocksy Child — глобальные responsive-стили
 */

/* === Базовые правила для всех экранов === */
html {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

/* Безопасные отступы для вырезов и островков (iPhone X+ и др.) */
@supports (padding: env(safe-area-inset-top)) {
	.header,
	.blog-page-header {
		padding-left: calc(12px + env(safe-area-inset-left)) !important;
		padding-right: calc(12px + env(safe-area-inset-right)) !important;
	}
}

body {
	overflow-x: hidden;
	word-wrap: break-word;
}

img,
iframe,
video,
embed,
object {
	max-width: 100%;
	height: auto;
}

img {
	display: block;
	height: auto;
}

/* Контент не вылезает за экран */
.ct-container,
.main-content,
.entry-content,
.post-content,
.blog-container,
.blocksy-child-single-wrap,
.blocksy-child-catalog-wrap,
.blocksy-child-post-frame,
.blocksy-child-catalog-frame {
	box-sizing: border-box;
	max-width: 100%;
}

/* === Планшеты и узкие экраны (768px) === */
@media (max-width: 768px) {
	body {
		padding-left: 0;
		padding-right: 0;
	}

	/* Шапки: только горизонтальные отступы, верх/низ задаёт тема (Блог/Яна Маркова ниже) */
	.header,
	.blog-page-header {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}

	.header-container {
		padding: 0 8px !important;
		gap: 8px !important;
	}

	.header-nav a,
	.mobile-nav a {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	/* Основной контент: отступ сверху (шапка + 30px), чтобы не пряталось за шапкой */
	.main-content {
		padding-top: 106px !important;
		padding-left: 12px !important;
		padding-right: 12px !important;
	}
	.entry-header,
	.page-header,
	.blocksy-child-post-frame > h1:first-child,
	.blocksy-child-post-frame > .page-title {
		margin-top: 30px !important;
	}

	.blocksy-child-single-wrap,
	.blocksy-child-catalog-wrap {
		padding: 16px 10px !important;
	}

	.blocksy-child-post-frame,
	.blocksy-child-catalog-frame {
		padding: 20px 14px !important;
		border-radius: 12px !important;
	}

	/* Типографика — читаемо на мобильных */
	body {
		font-size: 16px;
	}

	h1 { font-size: 1.5rem !important; }
	h2 { font-size: 1.35rem !important; }
	h3 { font-size: 1.2rem !important; }

	.entry-content,
	.post-content {
		font-size: 1rem;
		line-height: 1.6;
	}

	/* Кнопки — удобный тап (минимум 44px по высоте) */
	button,
	[type="button"],
	[type="submit"],
	.nav-links a {
		min-height: 44px;
		padding: 10px 16px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* Таблицы — горизонтальный скролл при необходимости */
	.entry-content table,
	.post-content table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Видео и iframe */
	.entry-content iframe,
	.post-content iframe,
	.entry-content video {
		max-width: 100%;
		height: auto;
		min-height: 200px;
	}
}

/* === Телефоны (480px) === */
@media (max-width: 480px) {
	.header,
	.blog-page-header {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}

	.main-content {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}

	.blocksy-child-single-wrap,
	.blocksy-child-catalog-wrap {
		padding: 12px 8px !important;
	}

	.blocksy-child-post-frame,
	.blocksy-child-catalog-frame {
		padding: 16px 12px !important;
		border-radius: 10px !important;
	}

	h1 { font-size: 1.35rem !important; }
	h2 { font-size: 1.2rem !important; }
}

/* === Страницы с Raw/Blank HTML (главная, блог и т.д.) === */
@media (max-width: 768px) {
	.raw-html-page .main-content,
	body.blank-html .main-content {
		padding-top: 56px !important;
		padding-left: 12px !important;
		padding-right: 12px !important;
	}

	.raw-html-page .header-container,
	body.blank-html .header-container {
		max-width: 100%;
		padding: 0 10px;
	}

	.raw-html-page img,
	body.blank-html img {
		max-width: 100%;
		height: auto;
	}
}

@media (max-width: 480px) {
	.raw-html-page .main-content,
	body.blank-html .main-content {
		padding-left: 8px !important;
		padding-right: 8px !important;
	}
}

/* === Подвал === */
@media (max-width: 768px) {
	footer,
	.footer {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}

@media (max-width: 480px) {
	footer,
	.footer {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}
}