/* ==============================================
   ООО «Вент-Сервис» — Layout Styles
   Modernized two-column layout (CSS Grid)
   replacing original float-based hacks.
   All pixel values preserved from archive CSS.
   ============================================== */

/* ---- Page shell (centers at 776px) ---- */
.site-shell {
  width: var(--site-width);
  margin: 0 auto;
  background-color: #fff;
}

/* ---- Header (185px tall, image-slice based) ---- */
#header {
  width: var(--site-width);
  position: relative;
  height: var(--header-height);
  overflow: hidden;
  background-color: #003070; /* fallback if images fail */
  display: flex;
  flex-direction: column;
}

.header-banner {
  display: flex;
  height: 151px;
  overflow: hidden;
  flex-shrink: 0;
}

.header-banner img {
  display: block;
  height: 151px;
  flex-shrink: 0;
}

/* Fill remaining width between slices */
.header-banner-fill {
  flex: 1;
  background-color: #003070;
  height: 151px;
}

/* ---- Navigation neck band (34px) ---- */
#tbc {
  display: flex;
  height: var(--neck-height);
  background-color: #004494;
  overflow: hidden;
  flex-shrink: 0;
}

#tbc img {
  display: block;
  height: var(--neck-height);
  flex-shrink: 0;
}

.neck-fill {
  flex: 1;
  height: var(--neck-height);
  background-color: #004494;
}

/* ---- Body container: sidebar + content ---- */
#bgc {
  display: grid;
  grid-template-columns: var(--content-offset) 1fr;
  min-height: 500px;
  border-top: 1px solid var(--color-blue-light);
}

/* ---- Left sidebar ---- */
#menu_block {
  padding: 14px 0 0 24px;
  font-weight: bold;
  font-size: var(--font-size-base);
  border-right: 1px solid var(--color-blue-light);
}

#menu_block .sidebar-top-img {
  display: block;
  margin-bottom: 8px;
}

#menu_block ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#menu_block ul li {
  padding-left: 17px;
  margin-bottom: 4px;
  position: relative;
}

#menu_block ul li::before {
  content: '›';
  position: absolute;
  left: 0;
  color: var(--color-text);
  font-weight: bold;
}

#menu_block ul li.active::before {
  content: '▶';
  color: var(--color-orange);
}

#menu_block ul li a {
  text-decoration: none;
  color: var(--color-text);
  font-weight: bold;
}

#menu_block ul li a:hover {
  text-decoration: underline;
}

#menu_block ul li.active > a {
  color: var(--color-orange);
}

/* Sub-menu (product sub-nav) */
#menu_block ul ul {
  margin-top: 2px;
  margin-left: 4px;
}

#menu_block ul ul li {
  padding-left: 14px;
  font-weight: normal;
  margin-bottom: 2px;
}

#menu_block ul ul li::before {
  content: '–';
  font-size: 10px;
  top: 1px;
}

/* ---- Main content area ---- */
#content {
  padding: 0 25px 49px 8px;
  width: 550px;
}

/* ---- Footer ---- */
#footer {
  width: var(--site-width);
  height: var(--footer-height);
  display: flex;
  align-items: center;
  background: linear-gradient(to bottom, #b0c4de 0%, #8aadce 100%);
  border-top: 1px solid #8a9ab5;
}

#footer .footer-slices {
  display: flex;
  height: var(--footer-height);
}

#footer .footer-slices img {
  display: block;
  height: var(--footer-height);
  flex-shrink: 0;
}

#footer .footer-text {
  padding-left: 8px;
  font-size: var(--font-size-base);
  color: var(--color-text);
  flex: 1;
}