/* Legacy BT XSoft article shortcode styles (bt_code, bt_box, bt_blockquote,
   bt_*_list, bt_highlight, ...), scoped to content. Must stay at the top:
   @import has to precede all style rules. */
@import "bt-legacy.css";

:root {
  --mmmm-accent: #c06e25;
  --cassiopeia-color-primary: #202020;
  --cassiopeia-color-link: #c06e25;
  --cassiopeia-color-hover: #d89847;
  /* Match the legacy BT XSoft stack exactly (old site uses Tahoma, Geneva). */
  --cassiopeia-font-family-body: Tahoma, Geneva, sans-serif;
  --cassiopeia-font-family-headings: Tahoma, Geneva, sans-serif;
  --body-font-family: Tahoma, Geneva, sans-serif;
}

/* Elements that read --body-font-family directly instead of inheriting from
   body still pick up the Cassiopeia default stack. Pin them to the legacy
   stack. Font Awesome / Joomla icon fonts set their own family, so excluding
   them keeps glyphs intact. */
button,
input,
select,
textarea,
optgroup,
.btn,
label,
legend,
.alert,
.breadcrumb,
.pagination,
.page-link,
.com-content-article__title,
.article-info,
.field-label {
  font-family: Tahoma, Geneva, sans-serif;
}

html,
body.site {
  background: #000 url("../images/mmmm-background.jpg") center top / 2000px 1100px fixed no-repeat;
  color: #58595b;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 13px;
}

body.site {
  padding: 0;
}

.container-header {
  align-items: flex-start;
  background: url("../images/mmmm-header-bg.png") repeat-x left top;
  border: 0;
  box-shadow: 0 0 5px #000;
  box-sizing: border-box;
  display: flex;
  flex-wrap: nowrap;
  height: 109px;
  margin: 0 auto;
  max-width: 1050px;
  padding: 0 15px 47px;
  position: relative;
  width: calc(100% - 30px);
}

.container-header > .grid-child:not(.container-nav) {
  flex: 0 0 147px;
  margin: 0;
  max-width: none;
  padding: 0 !important;
  width: 146px;
}

.container-header .navbar-brand {
  margin: 1px 0 0 1px;
  outline: 1px solid #000;
  padding: 0;
}

.container-header .navbar-brand img {
  display: block;
  height: 62px;
  max-height: 62px;
  width: 146px;
}

/* Per-language header logo. The legacy site used one logo, but the footer here
   already switches RU/EN, so the header mirrors it. mmmm-logo-en.png is the
   English twin of the bronze header logo (same 146x62). content: on <img> is
   unreliable, so paint the EN logo on the link and hide the RU <img>. */
html[lang^="en"] .container-header .brand-logo {
  background: url("../images/mmmm-logo-en.png") no-repeat left top / 146px 62px;
  display: block;
  height: 62px;
  width: 146px;
}

html[lang^="en"] .container-header .navbar-brand img {
  display: none;
}

.container-header .container-nav {
  align-items: stretch;
  border: 1px solid #000;
  box-sizing: border-box;
  display: block;
  flex: 1 1 auto;
  height: 64px;
  margin: 0;
  max-width: none;
  padding: 0;
  position: static;
  width: auto;
}

.container-header .mod-menu {
  align-items: stretch;
  background: url("../images/mmmm-menu-bg.png") repeat-x left top;
  border-bottom: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0 !important;
  height: 62px;
  list-style: none;
  margin: 0;
  overflow: visible;
  padding: 0;
  width: 100%;
}

.container-header .mod-menu > li {
  background: url("../images/mmmm-menu-bg.png") repeat-x left top;
  border-left: 1px solid #5d5d5d;
  border-right: 1px solid #000;
  flex: 0 0 auto;
  margin: 0 !important;
  position: relative;
}

.container-header .mod-menu > li > a {
  align-items: center;
  box-sizing: border-box;
  color: #b3b3b3;
  display: flex;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 15px;
  font-weight: 400;
  height: 62px;
  line-height: 62px;
  padding: 0 20px;
  text-decoration: none;
  white-space: nowrap;
}

.container-header .mod-menu > li.deeper > a {
  padding-right: 40px;
}

.container-header .mod-menu__toggle-sub {
  align-items: center;
  background: transparent;
  border: 0;
  color: #9c642d;
  display: flex;
  height: 62px;
  justify-content: center;
  padding: 0;
  position: absolute;
  right: 9px;
  top: 0;
  width: 22px;
  z-index: 2;
}

.container-header .mod-menu__toggle-sub .icon-chevron-down {
  display: none;
}

/* Submenu arrow: use the legacy menu_arrow.png at the exact legacy position
   (90% 55%) on the parent link, matching the old site pixel-for-pixel. The
   toggle button stays (invisible) for mobile tap. */
.container-header .mod-menu > li.deeper > a {
  background-image: url("../images/mmmm-menu-arrow.png");
  background-position: 90% 55%;
  background-repeat: no-repeat;
}

.container-header .mod-menu__toggle-sub::after {
  display: none;
}

.container-header .mod-menu > li.active > a::after {
  display: none !important;
}

.container-header .mod-menu > li.active,
.container-header .mod-menu > li:hover,
.container-header .mod-menu > li:focus-within {
  background: url("../images/mmmm-menu-active.png") repeat-x left top;
}

.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > a:focus {
  color: #ed9d44;
}

.container-header .mod-menu li ul {
  background: #1f1f1f;
  border-top: 1px solid #000;
  box-shadow: 0 5px 12px rgba(0, 0, 0, .55);
  display: none;
  left: 0;
  list-style: none;
  margin: 0;
  padding: 10px 0;
  position: absolute;
  top: 62px;
  width: 230px;
  z-index: 1000;
}

.container-header .mod-menu li:hover > ul,
.container-header .mod-menu li:focus-within > ul {
  display: block;
}

.container-header .mod-menu li ul li {
  background: url("../images/mmmm-submenu-item.png") no-repeat 18px center;
  margin: 0;
  padding: 0 12px 0 31px;
}

.container-header .mod-menu li ul a {
  color: #b3b3b3;
  display: block;
  font-size: 13px;
  line-height: 18px;
  padding: 4px 0;
  text-decoration: none;
}

.container-header .mod-menu li ul a:hover,
.container-header .mod-menu li ul a:focus {
  color: #ed9d44;
}

.container-header .container-search {
  align-items: center;
  background: url("../images/mmmm-toolbar-bg.png") repeat-x left top;
  bottom: 0;
  display: flex;
  height: 47px;
  left: 15px;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 15px;
}

.mmmm-languages {
  display: flex;
  gap: 10px;
}

.mod-languages ul.lang-inline {
  display: flex;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mod-languages ul.lang-inline li,
.mod-languages ul.lang-inline a,
.mod-languages ul.lang-inline img {
  display: block;
  margin: 0;
  padding: 0;
}

.mod-languages ul.lang-inline img {
  height: 12px;
  width: 18px;
}

.mmmm-languages a,
.mmmm-languages img {
  display: block;
}

.mmmm-languages img {
  height: 12px;
  width: auto;
}

.site-grid {
  background: #d3d3d3;
  box-shadow: 0 0 5px #000;
  box-sizing: border-box;
  column-gap: 20px;
  grid-template-areas: "comp side-r";
  grid-template-columns: minmax(0, 721px) 277px;
  margin: 20px auto 0;
  max-width: 1050px;
  outline: 1px solid #000;
  padding: 15px;
  row-gap: 0;
  width: calc(100% - 30px);
}

.site-grid > .container-component {
  grid-area: comp !important;
  grid-column: 1 !important;
  padding: 0;
}

.site-grid > .container-sidebar-right {
  grid-area: side-r !important;
  grid-column: 2 !important;
  padding: 0;
}

.container-sidebar-right .card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 3px 0 0 !important;
}

.container-sidebar-right .card-body {
  padding: 0;
}

.mmmm-indexes {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mmmm-indexes a,
.mmmm-indexes img {
  display: block;
  width: 277px;
}

.mmmm-indexes img {
  height: auto;
}

main {
  color: #58595b;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 13px;
  line-height: normal;
  margin-top: 0 !important;
}

main .page-header h1,
main .page-header h2 {
  color: #c06e25;
  font-family: Tahoma, Geneva, sans-serif !important;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  margin: 20px 0 9px;
}

main h5 {
  border: 0;
  color: #c06e25;
  font-family: Tahoma, Geneva, sans-serif !important;
  font-size: 16px;
  font-weight: 400;
  margin: 18px 0 8px;
  padding: 0;
}

main p {
  margin: 0 0 12px;
}

main ul {
  margin: 0 0 15px;
  padding-left: 18px;
}

main ul.bt_check_list-3 {
  margin: 0 0 15px;
  padding: 0;
}

main ul.bt_check_list-3 li {
  background: url("../images/mmmm-list-check.png") no-repeat left 7px;
  list-style: none;
  margin: 2px 0;
  padding: 2px 0 0 19px;
}

main .bt_highlight-5 {
  background: #a90329;
  color: #fff;
  font-weight: 700;
  margin: 0 4px;
  padding: 3px 7px;
}

a:not(.btn) {
  color: #c06e25;
}

a:not(.btn):hover,
a:not(.btn):focus {
  color: #d89847;
}

main img {
  height: auto;
  max-width: 100%;
}

main table {
  max-width: 100%;
}

/* Page-break (multi-page) articles such as the archive room. The legacy BT
   XSoft site shows only the plain page list — no "Article Index" heading, no
   "Page N of M" counter and no Prev/Next/All pager. Match it while keeping the
   page links usable for navigation. */
main .article-index {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  float: none !important;
  margin: 0 0 12px;
  padding: 0;
  width: auto;
}

main .article-index .card-body {
  padding: 0;
}

main .article-index h3 {
  display: none;
}

main .article-index ul.nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

main .com-content-article .pagenavcounter,
main .com-content-article .pager {
  display: none;
}

/* Smart Search (mod_finder) on archive pages — compact horizontal bar like the
   legacy "Smart Search", instead of the tall stacked default that pushed the
   content out of view. */
.container-component .main-top.card {
  background: #ececec;
  border: 1px solid #c9c9c9;
  border-radius: 0;
  box-shadow: none;
  margin: 0 0 14px;
}

.container-component .main-top .card-body {
  padding: 16px 18px;
}

.container-component .main-top .card-header,
.container-component .main-top h3 {
  background: transparent;
  border: 0;
  color: #58595b;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 6px;
  padding: 0;
}

.container-component .main-top form.mod-finder {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0;
}

/* "Поиск" label is redundant with the input placeholder — hide it accessibly. */
.container-component .main-top form.mod-finder > label.finder {
  clip: rect(0 0 0 0);
  height: 1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

.container-component .main-top .awesomplete {
  display: inline-block;
}

/* Flow the advanced filters (Тип / Категория) inline next to the input. */
.container-component .main-top .mod-finder__advanced,
.container-component .main-top .filter-branch {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0;
}

.container-component .main-top .control-group {
  margin: 0;
}

.container-component .main-top .control-label {
  margin: 0 0 2px;
}

.container-component .main-top .control-label label {
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 11px;
  margin: 0;
}

.container-component .main-top .controls {
  margin: 0;
}

.container-component .main-top form.mod-finder .form-control,
.container-component .main-top form.mod-finder .form-select {
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 13px;
  height: 28px;
  padding: 2px 6px;
  width: auto;
}

.container-component .main-top .js-finder-search-query {
  min-width: 240px;
}

.container-component .main-top .form-select {
  max-width: 200px;
  min-width: 130px;
}

.container-component .main-top form.mod-finder .btn {
  height: 28px;
  padding: 2px 12px;
}

/* Archive accordion (mmmm-archive.js): legacy "click a year -> issues expand
   under it" behaviour. */
.mmmm-arch-acc {
  margin: 0 0 12px;
}

.mmmm-arch-item {
  border-bottom: 1px solid #c5c5c5;
}

.mmmm-arch-head {
  color: #c06e25;
  cursor: pointer;
  display: block;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 13px;
  padding: 6px 0;
  text-decoration: none;
}

.mmmm-arch-head:hover,
.mmmm-arch-head:focus {
  color: #d89847;
}

.mmmm-arch-head.open {
  color: #000;
  font-weight: 700;
}

.mmmm-arch-body {
  padding: 4px 0 12px 16px;
}

.mmmm-arch-loading {
  color: #888;
}

.container-footer {
  background: #1b1b1b url("../images/mmmm-footer-bg.png") repeat-x left top;
  border: 1px solid #000;
  box-sizing: border-box;
  color: #a7a7a7;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 13px;
  line-height: normal;
  margin: 0 auto;
  max-width: 1020px;
  min-height: 138px;
  padding: 0;
  width: calc(100% - 60px);
}

/* Cassiopeia adds responsive spacing to its footer grid child. The BT XSoft
   footer has no inner wrapper padding and its module spans the full frame. */
.container-footer > .grid-child {
  max-width: none;
  padding: 0;
  width: 100%;
}

.container-footer .mod-custom {
  width: 100%;
}

.mmmm-footer {
  align-items: start;
  display: grid;
  gap: 0;
  grid-template-columns: 210px minmax(0, 1fr);
  min-height: 136px;
}

.mmmm-footer img {
  height: 62px;
  margin: 12px 0 0 10px;
  width: 146px;
}

.mmmm-footer p {
  margin: 0;
  padding: 10px 10px 0;
}

@media (max-width: 900px) {
  .container-header {
    height: auto;
    min-height: 109px;
    padding-bottom: 47px;
  }

  .container-header .mod-menu {
    flex-wrap: wrap;
    height: auto;
    min-height: 62px;
  }

  .container-header .mod-menu > li > a {
    font-size: 13px;
    height: 31px;
    padding: 0 10px;
  }

  .container-header .mod-menu li ul {
    top: 31px;
  }

  .site-grid {
    grid-template-columns: minmax(0, 1fr) 220px;
  }

  .mmmm-indexes a,
  .mmmm-indexes img {
    width: 220px;
  }
}

@media (max-width: 700px) {
  .container-header {
    display: block;
    padding: 0 0 47px;
    width: 100%;
  }

  .container-header > .grid-child:not(.container-nav) {
    margin-left: 15px;
  }

  .container-header .container-search {
    left: 0;
    right: 0;
  }

  .container-header .mod-menu > li {
    flex: 1 1 50%;
  }

  .container-header .mod-menu > li > a {
    height: 38px;
  }

  .container-header .mod-menu li ul {
    top: 38px;
  }

  .site-grid {
    display: block;
    margin-top: 12px;
    padding: 12px;
    width: 100%;
  }

  .container-sidebar-right {
    margin-top: 20px;
  }

  .mmmm-indexes {
    align-items: center;
  }

  .mmmm-indexes a,
  .mmmm-indexes img {
    max-width: 277px;
    width: 100%;
  }

  .container-footer {
    margin-bottom: 0;
    width: 100%;
  }

  .mmmm-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}