/* ============================================================
   babystep.lv — responsive / mobile layer
   The legacy site is a fixed 840px table layout. These rules
   only apply on narrow screens (<=820px) and linearize that
   layout into a single readable column. The one exception is the
   navigation, restyled as CSS buttons at every width (see below).
   ============================================================ */

/* Navigation rendered as CSS buttons (text labels) on EVERY screen size;
   the legacy 128px GIF images are dropped entirely. */
#NavigationBar1 img { display: none; }
#NavigationBar1 a { display: block; text-decoration: none; }
#NavigationBar1 .navTxt {
	display: block;
	padding: 6px 8px;
	margin: 2px 0;
	border-radius: 14px;                        /* rounded edges */
	background: linear-gradient(#FF8F17, #FFB438 50%, #FF9016);
	color: #fff;
	font: bold 13px tahoma, arial, helvetica, sans-serif;
	text-align: center;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
#NavigationBar1 a:hover .navTxt,
#NavigationBar1 a:active .navTxt { background: linear-gradient(#FFB438, #FF8F17); }

@media (max-width: 820px) {

	html, body {
		margin: 0;
		overflow-x: hidden;            /* kill horizontal scroll from stray fixed widths */
		-webkit-text-size-adjust: 100%; /* stop iOS auto-inflating text */
	}

	/* ---- Linearize the main layout table into one column ---- */
	table.main {
		display: block;
		width: 100% !important;
		table-layout: auto;
		height: auto;
	}
	table.main > tbody { display: block; width: 100%; }
	/* flex column so we can reorder cells within a row (content before sidebar) */
	table.main > tbody > tr {
		display: flex;
		flex-direction: column;
		width: 100%;
	}
	table.main > tbody > tr > th,
	table.main > tbody > tr > td {
		display: block;
		width: auto !important;
		box-sizing: border-box;
	}

	/* "Разделы" menu + search on top, products/news below it */
	.sidebar_entry { order: 0; }
	.main_entry { order: 1; padding-top: 8px; }

	/* ---- Logo: scale to the viewport instead of cropping at 704px ---- */
	.logo {
		background-size: contain;
		background-position: center bottom;
		height: 0;
		padding-bottom: 18%;           /* 127/704 keeps the logo aspect ratio */
		min-height: 60px;
	}

	/* ---- Top navigation: larger full-width pills on mobile ---- */
	#NavigationBar1 { width: 100%; margin: 6px 0; }
	#NavigationBar1 .navTxt {
		padding: 11px 14px;
		margin: 4px 0;
		border-radius: 22px;
		font-size: 16px;
	}

	/* ---- Sidebar: full width, drop the 190px decorative rules ---- */
	div.border { width: 100%; }
	.searchCaption, .SidebarSearch { margin-left: 0; }
	.SidebarSearch[type="text"] { max-width: 55%; }
	select.SidebarSearch { max-width: 90%; }

	/* The 200px-wide GIF backgrounds centre themselves in the full-width
	   column, detaching from the left-aligned text. Replace them with the
	   GIFs' own flat colours so the panel spans the whole column. */
	.sidebar { width: 100%; }
	.sidebarTop {
		background: #8BCA24;       /* green header bar (from top-sidebar.gif) */
		height: auto;
		padding: 5px 0;
	}
	.sidebarBody {
		background: #EBF6D9;       /* light-green body (from sidebar.gif) */
	}

	/* ---- Product gallery: flatten the 4-per-row <tr> grouping into one
	   centered wrapping grid so cards align evenly regardless of count ---- */
	.images_entry { width: auto !important; }
	.image_table { width: 100%; }
	.galery { display: block; width: 100%; }
	.galery > tbody {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-start;
		gap: 12px 8px;
	}
	.galery > tbody > tr { display: contents; }     /* drop the row boxes */
	.galery > tbody > tr > td { display: block; width: 141px; padding: 0; }
	.galery .item { width: 141px; margin: 0; }
	.galery .firmCaption, .galery .sizeCaption { word-wrap: break-word; }

	/* ---- Contacts map: fill the column (inline width:620px overridden) ---- */
	#map_canvas {
		width: 100% !important;
		max-width: 100%;
		height: 280px !important;
	}

	/* ---- Footer: no longer pinned to 840px ---- */
	.footer, .footer_admin {
		width: 100% !important;
		max-width: 100%;
	}
	.footer_admin { background-size: cover; }

	/* ---- Inline content tables/images (about / contacts / news) ---- */
	.main_entry table { max-width: 100%; }
	.main_entry img { max-width: 100%; height: auto; }
}