/*
  НАСТРОЙКИ САЙТА BRAD O'BREY
  Меняйте значения переменных ниже — остальную верстку трогать не нужно.
*/
/* ==========================================================================
   НАСТРОЙКА ГОРИЗОНТАЛЬНЫХ РАЗДЕЛИТЕЛЕЙ МЕЖДУ ПЕСНЯМИ
   Меняйте только два значения ниже:
   1) 5px — толщина разделителя;
   2) #3a3314 — цвет разделителя.
   ========================================================================== */
:root {
  --brad-song-divider-height: 2px;   /* Толщина горизонтального разделителя */
  --brad-song-divider-color: #b9ad12; /* Цвет горизонтального разделителя */
}

:root {
  /* Чередование фона блоков песен: 1,3,5... / 2,4,6... */
  --brad-song-block-odd: #282209;
  --brad-song-block-even: #312a10;

  /* Видеовизитка на странице «Брадобрей» */
  --brad-avatar-video-size: 520px;   /* максимальный диаметр */
  --brad-avatar-video-shift-x: 90px; /* сдвиг вправо; отрицательное число — влево */
  --brad-avatar-video-shift-y: -42px; /* сдвиг вверх для равных визуальных зазоров */

  /* Отдельные значения для узких экранов */
  --brad-avatar-video-size-mobile: 390px;
  --brad-avatar-video-shift-x-mobile: 0px;

  /* Одинаковый зазор над и под блоком видеовизитки */
  --brad-avatar-block-gap: 10px;

  /* Размер текста copyright внизу страниц */
  --brad-copyright-font-size: 1rem;
  --brad-copyright-line-height: 1.45;
}

/* Чередование полос — схема из версии 13.
   Класс ставится одновременно на постер и на его блок комментария. */
section.brad-song-odd {
  background-color: var(--brad-song-block-odd) !important;
}
section.brad-song-even {
  background-color: var(--brad-song-block-even) !important;
}

/* Внутренности раскрывающегося комментария наследуют цвет всей полосы. */
section.brad-song-odd .card,
section.brad-song-odd .card-header,
section.brad-song-odd .panel-body,
section.brad-song-odd .toggle-panel,
section.brad-song-odd .panel-collapse {
  background-color: var(--brad-song-block-odd) !important;
}
section.brad-song-even .card,
section.brad-song-even .card-header,
section.brad-song-even .panel-body,
section.brad-song-even .toggle-panel,
section.brad-song-even .panel-collapse {
  background-color: var(--brad-song-block-even) !important;
}


/* Одинаковые зазоры над и под круглой видеовизиткой. */
#header11-0 {
  padding-top: var(--brad-avatar-block-gap) !important;
  padding-bottom: var(--brad-avatar-block-gap) !important;
}

/* Размер и горизонтальный сдвиг круглой видеовизитки. */
.avatar-video-shell {
  width: min(100%, var(--brad-avatar-video-size)) !important;
  max-width: var(--brad-avatar-video-size) !important;
  transform: translate(var(--brad-avatar-video-shift-x), var(--brad-avatar-video-shift-y)) !important;
}

@media (max-width: 767.98px) {
  .avatar-video-shell {
    width: min(100%, var(--brad-avatar-video-size-mobile)) !important;
    max-width: var(--brad-avatar-video-size-mobile) !important;
    transform: translateX(var(--brad-avatar-video-shift-x-mobile)) !important;
  }
}


/* Copyright в подвале. */
.brad-copyright {
  font-size: var(--brad-copyright-font-size) !important;
  line-height: var(--brad-copyright-line-height) !important;
}

/* ========================================================================== */
/* ИСПРАВЛЕНИЯ МЕНЮ И ЛОКАЛЬНОГО ВИДЕО                                        */
/* ========================================================================== */
:root {
  --brad-menu-selected-bg: #4a4318;
  --brad-menu-selected-text: #fff7d6;
  --brad-dropdown-max-height: calc(100vh - 8.5rem);
  --brad-video-play-size: 56px;
}

/* Список песен всегда помещается в окно и прокручивается отдельно. */
.bradobrey-nav-dropdown > .dropdown-menu {
  max-height: var(--brad-dropdown-max-height) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

/* Оливковое, а не красное выделение пунктов. */
.bradobrey-nav-dropdown > .dropdown-menu .dropdown-item:hover,
.bradobrey-nav-dropdown > .dropdown-menu .dropdown-item:focus,
.bradobrey-nav-dropdown > .dropdown-menu .dropdown-item:active,
.bradobrey-nav-dropdown > .dropdown-menu .dropdown-item.active,
.bradobrey-nav-dropdown > .dropdown-menu .dropdown-item[aria-current="true"] {
  background-color: var(--brad-menu-selected-bg) !important;
  color: var(--brad-menu-selected-text) !important;
}

/* До запуска показываются постер и кнопка, а не системный видеоплеер. */
.video-poster {
  position: relative !important;
  overflow: hidden !important;
}
.video-poster:not(.is-playing) > video {
  display: none !important;
}
.video-poster:not(.is-playing) > img {
  display: block !important;
}
.video-poster:not(.is-playing) > .video-play-button {
  display: inline-flex !important;
}
.video-poster.is-playing > img,
.video-poster.is-playing > .video-play-button {
  display: none !important;
}
.video-poster.is-playing > video {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}
.video-play-button {
  position: absolute !important;
  z-index: 20 !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: var(--brad-video-play-size) !important;
  height: var(--brad-video-play-size) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent;
}
.video-play-button img {
  display: block !important;
  width: var(--brad-video-play-size) !important;
  height: var(--brad-video-play-size) !important;
  object-fit: contain !important;
  pointer-events: none !important;
}

@media (max-width: 991.98px) {
  :root {
    --brad-dropdown-max-height: calc(100vh - 10rem);
  }
  .bradobrey-nav-dropdown.menu-open > .dropdown-menu {
    display: block !important;
    max-height: var(--brad-dropdown-max-height) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* ========================================================================== */
/* BRAD O’BREY: меню песен и локальный видеоклип                              */
/* ========================================================================== */
:root {
  --brad-menu-selected-bg: #a89b19;
  --brad-menu-selected-text: #fffbe8;
  --brad-scrollbar-track: #e7cf45;
  --brad-scrollbar-thumb: #000000;
  --brad-scrollbar-width: 12px;
  --brad-video-playing-button-opacity: 0.10;
}

/* Яркое выделение выбранной/наведённой песни. */
.bradobrey-nav-dropdown > .dropdown-menu .dropdown-item:hover,
.bradobrey-nav-dropdown > .dropdown-menu .dropdown-item:focus,
.bradobrey-nav-dropdown > .dropdown-menu .dropdown-item:active,
.bradobrey-nav-dropdown > .dropdown-menu .dropdown-item.active,
.bradobrey-nav-dropdown > .dropdown-menu .dropdown-item[aria-current="true"] {
  background-color: var(--brad-menu-selected-bg) !important;
  color: var(--brad-menu-selected-text) !important;
}

/* Прямоугольный чёрный ползунок на золотистом фоне. */
.bradobrey-nav-dropdown > .dropdown-menu {
  scrollbar-width: auto;
  scrollbar-color: var(--brad-scrollbar-thumb) var(--brad-scrollbar-track);
}
.bradobrey-nav-dropdown > .dropdown-menu::-webkit-scrollbar {
  width: var(--brad-scrollbar-width);
  height: var(--brad-scrollbar-width);
}
.bradobrey-nav-dropdown > .dropdown-menu::-webkit-scrollbar-track {
  background: var(--brad-scrollbar-track);
  border-radius: 0;
}
.bradobrey-nav-dropdown > .dropdown-menu::-webkit-scrollbar-thumb {
  background: var(--brad-scrollbar-thumb);
  border: 0;
  border-radius: 0;
}
.bradobrey-nav-dropdown > .dropdown-menu::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

/* Локальное видео без системных контролов; кнопка остаётся едва видимой. */
.video-poster.is-playing > .video-play-button {
  display: inline-flex !important;
  opacity: var(--brad-video-playing-button-opacity) !important;
}
.video-poster.is-playing > img {
  display: none !important;
}
.video-poster > video::-webkit-media-controls,
.video-poster > video::-webkit-media-controls-enclosure,
.video-poster > video::-webkit-media-controls-panel,
.video-poster > video::-webkit-media-controls-play-button,
.video-poster > video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none !important;
}
.video-poster > video {
  pointer-events: none;
}

/* ========================================================================== */
/* BRAD O’BREY: точный скролл меню и линия прогресса видео                    */
/* ========================================================================== */
:root {
  /* Фон полосы скролла совпадает с подсветкой активной строки. */
  --brad-scrollbar-track: var(--brad-menu-selected-bg);
  --brad-scrollbar-thumb: #000000;
  --brad-scrollbar-width: 12px;
}

/* ========================================================================== */
/* BRAD O’BREY: исправления меню и видеоплеера                                */
/* ========================================================================== */

/* Системная полоса и ошибочная внешняя «жердь» полностью убраны.
   Список по-прежнему прокручивается колесом, трекпадом и пальцем. */
.bradobrey-nav-dropdown > .dropdown-menu {
  overflow-y: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.bradobrey-nav-dropdown > .dropdown-menu::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}
.brad-custom-scrollbar { display: none !important; }

/* После первого запуска видео остаётся видимым и на паузе. */
.video-poster.has-started > img { display: none !important; }
.video-poster.has-started > video {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}
.video-poster.has-started > .video-play-button {
  display: inline-flex !important;
  opacity: 1 !important;
}
.video-poster.has-started.is-playing > .video-play-button {
  opacity: var(--brad-video-playing-button-opacity) !important;
}

/* Линия видео — один в один как у аудио. */
.video-progress {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: var(--audio-progress-bottom) !important;
  z-index: 25 !important;
  height: var(--audio-progress-height) !important;
  background: rgba(255,255,255,.38) !important;
  cursor: pointer !important;
}
.video-progress-fill {
  width: 0;
  height: 100% !important;
  background: #ff0033 !important;
  pointer-events: none;
}
.video-poster:not(.has-started) > .video-progress { display: none !important; }
.video-poster.has-started > .video-progress { display: block !important; }


/* Авторство под комментариями к песням. */
.brad-song-credits {
  margin-top: 1.15rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(242, 237, 216, 0.28);
  color: var(--brad-cream, #f2edd8);
}
.brad-song-credits p {
  margin: 0.15rem 0;
  line-height: 1.45;
}

/* Равные реальные отступы секции над и под видеовизиткой. */
#header11-0 {
  padding-top: var(--brad-avatar-block-gap) !important;
  padding-bottom: var(--brad-avatar-block-gap) !important;
}

#header11-0 > .container-fluid > .row {
  transform: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* ========================================================================== */
/* ЕДИНЫЙ ФОН ПЕСЕННЫХ БЛОКОВ И НАСТРАИВАЕМЫЕ РАЗДЕЛИТЕЛИ                    */
/* ========================================================================== */
:root {
  --brad-song-block-bg: #282209;
}

/* Все блоки песен имеют один фон независимо от старых odd/even-классов. */
section.brad-song-odd,
section.brad-song-even,
section.brad-song-uniform {
  background-color: var(--brad-song-block-bg) !important;
}
section.brad-song-odd .card, section.brad-song-odd .card-header, section.brad-song-odd .panel-body, section.brad-song-odd .toggle-panel, section.brad-song-odd .panel-collapse,
section.brad-song-even .card, section.brad-song-even .card-header, section.brad-song-even .panel-body, section.brad-song-even .toggle-panel, section.brad-song-even .panel-collapse,
section.brad-song-uniform .card, section.brad-song-uniform .card-header, section.brad-song-uniform .panel-body, section.brad-song-uniform .toggle-panel, section.brad-song-uniform .panel-collapse {
  background-color: var(--brad-song-block-bg) !important;
}

/* Разделитель начинается перед каждым постером, кроме первого. */
section.image3[id]:not(#kanistro-tango) {
  border-top: var(--brad-song-divider-height) solid var(--brad-song-divider-color) !important;
}