.main-header {
  height: 60px;
  padding: 0;
}
.main-header__top-bar .container {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.main-navigation__container .container,
.main-navigation .navigation > li > a {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  line-height: 1.2;
}
.main-header,
.main-header .container,
.main-navigation__container .container {
  display: flex;
  align-items: center;
}


.main-navigation .navigation > li > ul {
top: 80%;
border-radius: 0 0 8px 8px !important;
width: 70%;
padding: 20px 0 !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.main-navigation .navigation > li:hover > ul {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}


.main-header__top-bar-logos {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: -200px;
  margin-right: 20px;
}
.main-header__top-bar-logos img {
  height: 32px;
  width: auto;
  object-fit: contain;
  display: block;
}


.main-header-search {
top: 80%;
}



/* ==================== ФІКС ДЛЯ FACETED BROWSE PREVIEW У ТЕМІ LIVELY ==================== */

/* 1) Примусово повертаємо tablesaw-таблицю у вигляд звичайної таблиці */
.faceted-results.tablesaw {
  display: table !important;
  table-layout: fixed !important;
  width: 100% !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  margin: 0 0 1.5em !important;
  overflow-x: auto !important; /* якщо таблиця широка — дозволяє горизонтальний скрол */
}

/* 2) Скидаємо будь-які swipe/flex-властивості tablesaw, що можуть «ламати» layout */
.faceted-results.tablesaw.tablesaw-swipe {
  display: table !important;
  overflow: auto !important;
}

/* 3) Заголовки стовпців (th): фіксуємо як table-cell, додаємо відступи і межу */
.faceted-results.tablesaw th {
  display: table-cell !important;
  vertical-align: middle !important;
  padding: 10px 12px !important;
  border-bottom: 2px solid #ddd !important;
  background-color: #bf0000 !important;
  color: #fff;
  font-weight: 600 !important;
  font-size: 1rem !important;
  text-align: left !important;
}

/* 4) Звичайні клітинки (td): фіксуємо як table-cell, додаємо відступи і межу */
.faceted-results.tablesaw td {
  display: table-cell !important;
  vertical-align: top !important;
  padding: 8px 12px !important;
  border-bottom: 1px solid #eee !important;
  word-wrap: break-word !important; /* переносити довгі слова */
  font-size: 0.95rem !important;
  color: #333 !important;
}

/* 5) Обмежуємо розмір зображень у першій колонці */
.faceted-results.tablesaw td img {
  max-width: 300px !important; /* ширина «обкладинки» */
  height: auto !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin-right: 8px !important;
}

/* 6) Текст назви поруч із зображенням: вирівнюємо по вертикалі */
.faceted-results.tablesaw td .resource-name {
  display: inline-block !important;
  vertical-align: middle !important;
  font-weight: 500 !important;
  color: #b22222 !important; /* червоний, як у ваших скриншотах */
  text-decoration: none !important;
}
.faceted-results.tablesaw td .resource-name:hover {
  text-decoration: underline !important;
}

/* 7) «Згладжуємо» поведінку плагіна Tablesaw для мобільного swipe-режиму */
.tablesaw-swipe-stack tbody tr,
.tablesaw-swipe-stack thead tr {
  display: table-row !important;
}
.tablesaw-stack td,
.tablesaw-stack th {
  display: table-cell !important;
}

/* 8) Якщо тема Lively все ще насідає флексами чи float’ами, скидаємо їх */
/* тут “.omeka-page.lively-theme” — загальний контейнер Lively, перевірте у вашому DOM-і реальні класи */
.omeka-page.lively-theme .faceted-results.tablesaw,
.omeka-page.lively-theme .faceted-results.tablesaw * {
  float: none !important;
  position: static !important;
  flex: initial !important;
  margin: 0 !important;
  padding: inherit !important;
}

/* =================== КІНЕЦЬ ФІКСУ ДЛЯ FACETED BROWSE У LIVELY =================== */


.main-footer {
  text-align: center;
}
 .main-footer__top {
    padding-top: 0px;
  }
.main-footer__bottom {
  background-color: #bf0000;
  padding: 35px 0;
}
.main-footer__top > div:last-child {
  padding-bottom: 0px;
}