/*
Theme Name:   Avada Child
Theme URI:    https://firstevent.ee/
Description:  Дочерняя тема Avada для firstevent.ee. Все правки шаблонов, стилей и функций живут здесь, поэтому обновление родительской темы Avada их не затрагивает.
Author:       SDLab (Web Design Group OÜ)
Author URI:   https://sdlab.ee/
Template:     Avada
Version:      2.2.6
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  avada-child
*/

/*
 * ============================================================================
 * Ниже — кастомный CSS сайта, который раньше лежал в КОНЦЕ родительского
 * файла wp-content/themes/Avada/style.css (строки 13805-13905 версии 3.8.8).
 * При замене темы на Avada 7.x он бы пропал, поэтому перенесён сюда.
 * Свои правки добавляй ниже.
 * ============================================================================
 */

video#bgvid { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index:-1;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: rgba(0,0,0,.9);
    background-size: cover; 
}

.overlay ul li {
    display: block;
    height: auto;
    /* height: calc(100% / 5); */
    min-height: 54px;
}

.fusion-header{display: none;}

#faces .fusion-row .fusion-layout-column {
    margin-right: -2%!important;
    margin-left: 2%!important;
}

.width-100 .fullwidth-box{
	z-index: 9;
    position: relative;
}



.fusion-footer-copyright-area-menu {
    background-color: none;
    border-color: none;
    padding-top: 18px;
    padding-bottom: 16px;
    bottom: 0;
    position: absolute;
    width: 100%;
    z-index: 11;
}

#smp_menu {z-index: 11;}

/*
 * Раскладка меню — колонка, отцентрованная в оверлее.
 *
 * Штатные правила плагина рассчитаны ровно на 5 пунктов: .overlay nav жёстко
 * 60% высоты, а .overlay ul li — height: calc(100% / 5). В меню сейчас 6
 * пунктов (4 страницы + два языка), поэтому «Eesti» обрезался, а «Русский»
 * вообще уезжал за экран. Убираем фиксированные высоты и центрируем флексом —
 * нав сам подстраивается под любое число пунктов.
 */
#smp_menu > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* align-items намеренно не задаём: при center пустой div с логотипом
     (у него фон и height:25%, но нет содержимого) схлопнулся бы в 0 по ширине
     и логотип в меню исчез. По умолчанию (stretch) он остаётся во всю ширину,
     а пункты меню центрирует align-items у самого ul. */
}

#smp_menu nav {
  position: static;
  transform: none;
  height: auto;
  width: 100%;
  margin-top: 0 !important;   /* в разметке стоит margin-top:-40px */
}

#smp_menu nav ul {
  display: flex;
  flex-direction: row;   /* пункты меню занимают строку целиком (flex-basis 100%),
                            а языки встают парой в последней строке */
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  height: auto;
}

#smp_menu nav ul li {
  flex: 0 0 100%;
  height: auto;
  min-height: 0;
}

/*
 * Выбор языка (пункты WPML в конце меню).
 *
 * Флажки убираем, а названия ставим в одну строку через разделитель «|»:
 * li языков не растягиваются на всю ширину, а делят одну строку между собой.
 * Разделитель рисуем псевдоэлементом у второго языка — он часть строки,
 * а не ссылки, поэтому в овальную подсветку не попадает.
 */
#smp_menu .wpml-ls-flag {
  display: none !important;
}

#smp_menu nav ul li[class*="wpml-ls-item"] {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

#smp_menu nav ul li[class*="wpml-ls-item"] + li[class*="wpml-ls-item"]::before {
  content: "|";
  margin: 0 10px;
  color: #000;
  font-size: 20px;
  line-height: 1;
}

/* Овал языка компактнее основного пункта: «Eesti | Русский» должны помещаться
   в одну строку даже на 390 px, и пропорции остаются те же (≈1.9:1). */
#smp_menu nav ul li[class*="wpml-ls-item"] a {
  width: 120px;
  min-height: 64px;
  padding: 6px 10px;
}

/*
 * Эстонское меню: названия пунктов капсом.
 *
 * В эстонской версии пункты записаны как «Meist», «Teenused» и т. д., а в
 * русской они уже набраны заглавными. Приводим эстонские к тому же виду.
 * Выбор языка (Eesti | Русский) исключаем — там названия языков должны
 * остаться как есть. Привязка к lang="et" у <html>, который ставит WPML
 * (на русских страницах lang="ru-RU"), поэтому правило действует только
 * в эстонской версии.
 */
html[lang^="et"] #smp_menu nav ul li:not([class*="wpml-ls-item"]) > a {
  text-transform: uppercase;
}

/*
 * Логотип в раскрытом меню.
 *
 * В разметке это пустой div с фоновой картинкой: height: 25%, background-size:
 * auto 100%, плюс инлайновый сдвиг top: 25px. Уменьшаем вдвое (12.5%) — вместе
 * с высотой вдвое уменьшается и ширина, потому что фон масштабируется по высоте.
 * Сдвиг top снимаем и добавляем отступ снизу: он и даёт воздух между логотипом
 * и пунктами меню.
 */
#smp_menu > div > div:nth-of-type(2) {
  height: 12.5% !important;
  top: 0 !important;
  margin-bottom: 56px;
}

@media screen and (max-height: 800px) {
  #smp_menu > div > div:nth-of-type(2) {
    margin-bottom: 32px;
  }
}

@media screen and (max-height: 660px) {
  #smp_menu > div > div:nth-of-type(2) {
    margin-bottom: 18px;
  }
}

/*
 * Подсветка пункта меню («selection») — овал, пропорциями ближе к овалу
 * логотипа (примерно 1.9:1 вместо прежнего плоского 5:1).
 * border-radius: 50% даёт эллипс, поэтому ссылке нужны собственные размеры:
 * без них овал повторял бы ширину текста и у каждого пункта был бы разным.
 */
#smp_menu nav ul li a{
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 190px;
  min-height: 100px;
  max-width: 86vw;
  margin: 0 auto;
  padding: 10px 16px;
  transition: all .5s ease!important;
  border-radius: 50%;
}

/* Низкие экраны (ноутбуки, телефоны в альбомной ориентации) — овал ниже,
   иначе шесть пунктов не помещаются по высоте. */
@media screen and (max-height: 800px) {
  #smp_menu nav ul li a {
    min-height: 78px;
  }
}

@media screen and (max-height: 660px) {
  #smp_menu nav ul li a {
    min-height: 62px;
  }
}

/*
 * Ховер пункта меню — серая подчёркивающая линия 1px, «выезжающая» слева направо.
 *
 * Цвет — акцентный серый сайта #838383 (тот же, что у гамбургера).
 * Заливки на наведении нет, но её навязывает ещё и опция snp: functions.php
 * печатает её как инлайновый <style id="smp-custom-css"> в wp_head
 * (приоритет 999), то есть ПОСЛЕ этого файла, и там стоит
 * background-color: #838383 !important. Гасим его префиксом html + !important,
 * иначе оно перебьёт наше правило по порядку подключения.
 *
 * Линия — псевдоэлемент ссылки: transform: scaleX(0) -> scaleX(1) с
 * transform-origin слева, поэтому растёт слева направо. Отступ считается от
 * центра строки (top: 50%), чтобы линия шла сразу под текстом и не зависела от
 * высоты пункта. Ширина — 60% ширины пункта: так это читается подчёркиванием,
 * а не линейкой во всю ширину.
 */
#smp_menu nav ul li a {
  position: relative;
}

#smp_menu nav ul li a::after {
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  top: 50%;
  margin-top: 18px;
  height: 1px;
  background-color: #838383;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s ease;
  pointer-events: none;
}

html #smp_menu nav ul li a:hover,
html #smp_menu nav ul li a:focus {
  background-color: transparent !important;
  color: #000 !important;
}

html #smp_menu nav ul li a:hover::after,
html #smp_menu nav ul li a:focus::after {
  transform: scaleX(1);
}

@media screen and (max-device-width: 800px) {
    html {
         background: url(#) #000 no-repeat center center fixed;
    }
    #bgvid {
        display: none;
    }
    .fusion-copyright-notice{display: none!important;}
    #about1{
      padding: 0px 10px 0px 10px!important;
      
    }
    #about1 p, #about1 h2{
      text-align: left!important;
    }
    #about1 .fusion-separator{
      float: left!important;
    }

    #about2{
      padding: 0px 10px 0px 10px!important;
      
    }
    #about2 p, #about2 h2{
      text-align: left!important;
    }
    #about2 .fusion-separator{
      float: left!important;
    }
    

}

#about1{
  padding: 50px 50px 50px 0;
}

#about2{
  padding: 50px 0 50px 50px;
}

#smp_menu nav ul li a {
  font-family: 'Roboto Slab', Arial, Helvetica, sans-serif;
}

/*
 * ----------------------------------------------------------------------------
 * Галереи WordPress ([gallery ... theme="photomosaic"]) — раскладка-мозаика.
 *
 * Раньше мозаику и лайтбокс делал плагин PhotoMosaic for WordPress, который на
 * PHP 8.3 не работает. Теперь раскладка — штатными CSS-колонками: превью
 * разной высоты (портретные и горизонтальные кадры) собираются в плотные
 * колонки без «дыр», как в masonry.
 *
 * Число колонок берём из класса gallery-columns-N, который core ставит сам по
 * атрибуту columns шорткода, поэтому галереи с columns="2" остаются
 * двухколоночными. Правила ядра (#gallery-N .gallery-item с float и width)
 * перекрываем через !important.
 * ----------------------------------------------------------------------------
 */
.gallery {
    column-gap: 10px;
}

.gallery.gallery-columns-2 { column-count: 2; }
.gallery.gallery-columns-3 { column-count: 3; }
.gallery.gallery-columns-4 { column-count: 4; }
.gallery.gallery-columns-5 { column-count: 5; }
.gallery.gallery-columns-6 { column-count: 6; }

/* Ядро печатает <br style="clear: both"> между рядами — в колонках он ломает раскладку. */
.gallery > br {
    display: none !important;
}

.gallery .gallery-item {
    display: block;
    float: none !important;
    width: 100% !important;
    margin: 0 0 10px 0 !important;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
}

.gallery .gallery-icon {
    margin: 0 !important;
    line-height: 0;
}

.gallery .gallery-icon a {
    display: block;
}

.gallery .gallery-icon img {
    width: 100%;
    height: auto;
    display: block;
}

.gallery .gallery-caption {
    margin: 4px 0 0;
}

/* На узких экранах — две колонки, как было у плагина (min_column_width 175px). */
@media screen and (max-width: 800px) {
    .gallery.gallery-columns-2,
    .gallery.gallery-columns-3,
    .gallery.gallery-columns-4,
    .gallery.gallery-columns-5,
    .gallery.gallery-columns-6 {
        column-count: 2;
    }
}

/*
 * ----------------------------------------------------------------------------
 * Лайтбокс Avada, скин light: убираем фиолетовое свечение.
 *
 * В родительской теме свечение вокруг лоадера, рамки, тулбара, кнопок и
 * миниатюр задано цветом #dacefc (фиолетовый, он же читается как #d0cffd).
 * Перекрываем теми же селекторами с !important — правила темы вставляются
 * в инлайновый <style> и без !important могут выигрывать по порядку.
 * ----------------------------------------------------------------------------
 */
.ilightbox-loader.light {
    box-shadow: #999 0 0 85px, #999 0 0 85px !important;
}

.ilightbox-holder.light {
    box-shadow: 0 0 15px #999 !important;
}

.ilightbox-toolbar.light {
    box-shadow: 0 0 7px #999 !important;
}

.isMobile .ilightbox-toolbar.light {
    box-shadow: 0 0 25px #999 !important;
}

.ilightbox-thumbnails.light .ilightbox-thumbnails-grid .ilightbox-thumbnail img {
    box-shadow: 0 0 6px #999 !important;
}

.ilightbox-button.ilightbox-next-button.light,
.ilightbox-button.ilightbox-prev-button.light {
    box-shadow: 0 0 15px #999 !important;
}

/*
 * Иконки скина light — это фиолетовые PNG (#d0cffd): стрелки, крестик,
 * fullscreen, play/pause. Сами файлы лежат в родительской теме, править их
 * нельзя (затрутся при обновлении), поэтому обесцвечиваем иконки фильтром
 * до серого в тон акценту сайта (#838383). Фильтр только на элементах
 * управления — фотография внутри лайтбокса остаётся цветной.
 */
.ilightbox-toolbar.light a,
.ilightbox-button.light {
    filter: grayscale(100%) brightness(0.65);
}

/*
 * ----------------------------------------------------------------------------
 * Гамбургер полноэкранного меню: полоски толщиной 2px.
 *
 * Родительский fullscreen-menu/css/style.css задаёт .menu-icon > span
 * height: 0.5em (примерно 8px) и растягивает псевдоэлементы на height: 100%.
 * Перебиваем по id, потому что файл плагина подключается после этого файла.
 * margin-top пересчитан под новую толщину, чтобы средняя полоска осталась
 * по центру иконки.
 * ----------------------------------------------------------------------------
 */
#trigger-overlay.menu-icon > span,
#trigger-overlay.menu-icon > span:before,
#trigger-overlay.menu-icon > span:after {
    height: 2px;
    border-radius: 1px;
}

#trigger-overlay.menu-icon > span {
    margin-top: -1px;
}

/*
 * ----------------------------------------------------------------------------
 * Мобильная раскладка блока «команда» на главной (#about).
 *
 * Фото и тексты идут парами, и порядок внутри пар чередуется: у Катерины
 * сначала текст (колонка 6), потом фото (7); у Кристины Езловецкаи (8 фото /
 * 9 текст) и Кристины Ореховой (12 фото / 13 текст) — наоборот. На мобильном
 * (брейкпоинт Avada «small», ≤640px) колонки встают в столбик в порядке
 * разметки, и фото оказывается над текстом. Выравниваем все блоки команды:
 * сначала текст, потом фото.
 *
 * order задан для всех 14 колонок строки: у flex-элементов с order: 0
 * (по умолчанию) они уехали бы в самое начало. Если в Avada Builder
 * добавлять или удалять колонки в этой строке — значения надо пересмотреть.
 * ----------------------------------------------------------------------------
 */
@media screen and (max-width: 640px) {
    #about .fusion-builder-row > .fusion-layout-column:nth-child(1)  { order: 1; }
    #about .fusion-builder-row > .fusion-layout-column:nth-child(2)  { order: 2; }
    #about .fusion-builder-row > .fusion-layout-column:nth-child(3)  { order: 3; }
    #about .fusion-builder-row > .fusion-layout-column:nth-child(4)  { order: 4; }
    #about .fusion-builder-row > .fusion-layout-column:nth-child(5)  { order: 5; }
    #about .fusion-builder-row > .fusion-layout-column:nth-child(6)  { order: 6; }
    #about .fusion-builder-row > .fusion-layout-column:nth-child(7)  { order: 7; }
    #about .fusion-builder-row > .fusion-layout-column:nth-child(8)  { order: 8; }
    /* 9 — фото Кристины Езловецкаи, 10 — её текст: текст поднимаем выше фото */
    #about .fusion-builder-row > .fusion-layout-column:nth-child(9)  { order: 10; }
    #about .fusion-builder-row > .fusion-layout-column:nth-child(10) { order: 9; }
    #about .fusion-builder-row > .fusion-layout-column:nth-child(11) { order: 11; }
    #about .fusion-builder-row > .fusion-layout-column:nth-child(12) { order: 12; }
    /* 13 — фото Кристины Ореховой, 14 — её текст */
    #about .fusion-builder-row > .fusion-layout-column:nth-child(13) { order: 14; }
    #about .fusion-builder-row > .fusion-layout-column:nth-child(14) { order: 13; }
}

/*
 * ----------------------------------------------------------------------------
 * Иконки старого Avada (FontAwesome 4) — возвращаем глифы.
 *
 * Контент сайта верстался на Avada 3.8.8, где иконки задавались классами
 * fa fa-* (FontAwesome 4). В Avada 7 эти CSS-алиасы убраны: остался только
 * собственный шрифт awb-icons с классами awb-icon-*, поэтому у кнопки со
 * стрелкой («Вернуться в портфолио») иконка не рисовалась — у ::before пустой
 * content, а ширина элемента равна 0.
 *
 * Отдельный FontAwesome-шрифт ради двух стрелок не подключаем: в awb-icons есть
 * те же шевроны под своими именами — awb-icon-angle-left (\f104) и
 * awb-icon-angle-down (\f107). Кодов FontAwesome (\f053, \f078) в этом шрифте
 * НЕТ, поэтому подставляем именно те, что объявлены в CSS самой темы. Шрифт
 * awb-icons уже загружается на каждой странице (иконки соцсетей), так что
 * лишних запросов не добавляется.
 *
 * Орнаменты разделителей (fa-sun-o, fa-circle-o) здесь не трогаем: в оригинале
 * они никогда не были иконками шрифта — орнамент рисуется фоновой картинкой
 * fe_logo.svg (см. блок ниже), а сами <i> скрыты кастомным CSS из Theme Options
 * и правилом Avada 7 .custom-icon-separator i { display: none !important }.
 * ----------------------------------------------------------------------------
 */
.fa.fa-chevron-left::before,
.fa.fa-chevron-down::before {
  font-family: awb-icons;
  font-weight: normal;
  font-style: normal;
  speak: never;
}

.fa.fa-chevron-left::before { content: "\f104"; }
.fa.fa-chevron-down::before { content: "\f107"; }

/*
 * ----------------------------------------------------------------------------
 * Орнамент разделителя — фирменный четырёхлепестковый знак.
 *
 * В Theme Options лежит кастомный CSS, который вешает орнамент фоном на
 * .custom-icon-separator span и ссылается на файл ВНУТРИ РОДИТЕЛЬСКОЙ темы:
 *   url(/wp-content/themes/Avada/assets/images/fe_logo.svg)
 * Это был самодельный файл, добавленный когда-то в Avada 3.8.8; при замене темы
 * на 7.x он пропал, запрос стал отдавать 404 — и орнамент между линиями исчез.
 * (Внутри .icon-wrapper для этого же места лежит ещё и legacy
 * <i class="fa fa-sun-o">, но его прячет и CSS из Theme Options, и сам Avada 7:
 * орнамент всегда рисовался картинкой, а не иконкой шрифта.)
 *
 * Кладём файл в дочернюю тему и переопределяем фон — так он переживёт
 * обновления Avada. !important нужен потому, что кастомный CSS из Theme Options
 * печатается позже этого файла и иначе выигрывает по порядку.
 * ----------------------------------------------------------------------------
 */
html .fusion-separator.custom-icon-separator span.icon-wrapper {
  background-image: url("/wp-content/themes/Avada-Child/assets/images/fe_logo.svg") !important;
  background-repeat: no-repeat !important;
  background-size: 65% !important;
  background-position: 50% !important;
}