/* Общие правки сайта. Файл подключается на каждой странице из
   application/bootstrap/app.php — не зависит от темы и переживает её обновление. */

/* --- Футер: строка с почтой и телефоном ---------------------------------
   Тема оборачивает блок в .d-flex. У flex-контейнера align-items по умолчанию
   stretch, поэтому иконки растягиваются на всю высоту строки и глиф всплывает
   вверх — визуально иконка выше текста. В режиме редактирования этого не видно,
   потому что там Concrete вставляет свои обёртки вокруг блоков.
   Плюс flex съедает пробелы между инлайновыми элементами — возвращаем отступ. */
#copyrights .d-flex {
    align-items: center;
}
#copyrights .d-flex > i {
    margin-right: 6px;
    line-height: 1;
}

/* --- Пиксельная стрелка в списках сайдбара ------------------------------
   Pixel 9 рисует маркер глифом иконочного шрифта (тонкая «галочка»).
   В старой теме это была картинка 4x20 из 12 точек — та самая «пиксельная»
   стрелка. Возвращаем её: глиф прячем, картинку вешаем фоном на ссылку,
   как было в widgets.less старой темы (padding: 0 3px 0 12px).
   Картинки скопированы в application/images/, чтобы не зависеть от пакета
   старой темы — его можно будет удалить. */

.widget_nav_menu li::before,
.widget_links li::before,
.widget_meta li::before,
.widget_archive li::before,
.widget_categories li::before,
.widget_pages li::before,
.widget_rss li::before,
.widget_recent_entries li::before {
    display: none !important;
}

.widget_nav_menu li > a,
.widget_links li > a,
.widget_meta li > a,
.widget_archive li > a,
.widget_categories li > a,
.widget_pages li > a,
.widget_rss li > a,
.widget_recent_entries li > a {
    display: inline-block;
    padding: 0 3px 0 12px;
    background: url(../images/widget-link.png) left center no-repeat;
    border: none !important;
}

/* тёмный фон (футер) — светлый вариант стрелки */
#footer .widget_nav_menu li > a,
#footer .widget_links li > a,
#footer .widget_meta li > a,
#footer .widget_archive li > a,
.dark .widget_links li > a,
.dark .widget_nav_menu li > a {
    background-image: url(../images/widget-link-dark.png);
}

/* экраны с удвоенной плотностью */
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    .widget_nav_menu li > a,
    .widget_links li > a,
    .widget_meta li > a,
    .widget_archive li > a,
    .widget_categories li > a,
    .widget_pages li > a,
    .widget_rss li > a,
    .widget_recent_entries li > a {
        background-image: url(../images/widget-link@2x.png);
        background-size: 4px 20px;
    }
    #footer .widget_nav_menu li > a,
    #footer .widget_links li > a,
    #footer .widget_meta li > a,
    #footer .widget_archive li > a,
    .dark .widget_links li > a,
    .dark .widget_nav_menu li > a {
        background-image: url(../images/widget-link-dark@2x.png);
    }
}

/* --- Feature Box: иконка сбоку ------------------------------------------
   Раскладка как на старом сайте, но без отрицательных отступов:
   у блока нет padding, иконка стоит абсолютом в левом верхнем углу,
   а место под неё освобождает только заголовок своим padding-left.
   Картинка и текст занимают всю ширину блока и никуда не вылезают. */

.feature-box.fbox-side-icon {
    display: block;
    position: relative;
    padding-left: 0;
}

.feature-box.fbox-side-icon > .fbox-icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
}
.feature-box.fbox-side-icon > .fbox-icon a {
    display: block;
    line-height: 1;
}
.feature-box.fbox-side-icon > .fbox-icon i {
    width: 28px;
    height: 28px;
    font-size: 28px;
    line-height: 28px;
    text-align: center;
}

/* место под иконку освобождает только заголовок */
.feature-box.fbox-side-icon > h1,
.feature-box.fbox-side-icon > h2,
.feature-box.fbox-side-icon > h3,
.feature-box.fbox-side-icon > h4,
.feature-box.fbox-side-icon > h5,
.feature-box.fbox-side-icon > h6 {
    margin: 0 0 14px;
    padding-left: 42px;
    min-height: 28px;
    font-size: 15px;
    line-height: 26px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #333;
}

.feature-box.fbox-side-icon > p {
    margin-left: 0;
    color: #999;
}
.feature-box.fbox-side-icon > p:last-child {
    margin-bottom: 0;
}
.feature-box.fbox-side-icon > p img {
    max-width: 100%;
    height: auto;
}


/* --- Кнопки: капс как на старом сайте -----------------------------------
   Замеры боевого: uppercase, межбуквенный 1px, вес 600.
   Pixel 9 капс не ставит, остальное совпадает. */
.button {
    text-transform: uppercase;
}

/* Шаблоны старой темы печатают <i class="fa fa-"> даже когда иконка не задана.
   Пустой класс в Font Awesome 5 даёт квадратик с кодом — прячем. */
i[class="fa fa-"] {
    display: none;
}

/* Картинки внутри карточек: на старом сайте колонка была 360px и файл 364px,
   то есть занимал её целиком. Сейчас колонка 380px, и картинка не дотягивает
   до края — текст выходит за её правую границу. Растягиваем по ширине блока. */
.feature-box.fbox-side-icon img {
    width: 100%;
    height: auto;
}

/* margin-top у кнопок задан вручную (45px) и перебивал прижатие вниз */

/* Кнопка лежит соседом карточки, а не внутри неё, поэтому при разной длине
   текста уезжает вниз. Прижимаем последний элемент колонки к её нижнему краю.
   Блок с заданным классом Concrete оборачивает в свой div, так что цепляться
   за саму ссылку нельзя — берём последнего ребёнка колонки. */
#content [class*="col-"]:has(a.button) {
    display: flex;
    flex-direction: column;
}
#content [class*="col-"]:has(a.button) > :last-child {
    margin-top: auto !important;
}

/* В режиме правки Concrete оборачивает блок в <div data-container="block">
   со своими полями, и width:100% отсчитывается от неё — картинка вылезает
   за колонку. В редакторе оставляем картинке её собственный размер. */
[data-container="block"] .feature-box.fbox-side-icon img {
    width: auto;
    max-width: 100%;
}

/* Pixel 9 стилизует .feature-box как строку Bootstrap: display:flex и
   отрицательные поля -0.75rem по бокам — чтобы иконка и текст встали
   колонками. В боковой раскладке колонок нет, а поля остаются и съедают
   промежуток между колонками: картинки соседних блоков смыкаются вплотную.
   Возвращаем нулевые поля — работает штатный отступ Bootstrap. */
.feature-box.fbox-side-icon {
    margin-left: 0;
    margin-right: 0;
}

/* --- Затемнение параллакса и фоновых секций -----------------------------
   В старой теме это делалось классами .color-overlay + цвет + плотность.
   В Pixel 9 таких классов нет вообще (у неё своя схема bg-overlay,
   которая требует особой вёрстки и через поле Custom Class недоступна),
   поэтому переношу старые правила один в один.

   Как пользоваться — вписать в Custom Class области или блока:
     color-overlay              — включить слой (обязательно)
     color-overlay-black        — чёрная заливка (или color-overlay-white)
     color-overlay-05           — плотность 50%, шаг от 01 до 09          */

.color-overlay {
    position: relative;
}
.color-overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    transition: all 0.2s ease-in-out;
    backface-visibility: hidden;
    transform: translateZ(0) scale(1, 1);
}
/* содержимое поверх затемнения */
.color-overlay > * {
    position: relative;
    z-index: 1;
}
.swiper-slide.color-overlay::before {
    z-index: 2;
}

.color-overlay-white::before { background-color: #fff; }
.color-overlay-black::before { background-color: #000; }

.color-overlay-01::before { opacity: 0.1; }
.color-overlay-02::before { opacity: 0.2; }
.color-overlay-03::before { opacity: 0.3; }
.color-overlay-04::before { opacity: 0.4; }
.color-overlay-05::before { opacity: 0.5; }
.color-overlay-06::before { opacity: 0.6; }
.color-overlay-07::before { opacity: 0.7; }
.color-overlay-08::before { opacity: 0.8; }
.color-overlay-09::before { opacity: 0.9; }

/* --- Картинка-шапка страницы уходит под прозрачное меню -------------------
   На старом сайте тема всегда рисовала пустую секцию #slider сразу за шапкой,
   и её правило «#header.transparent-header + #slider { top:-100px }» затягивало
   всё содержимое под полупрозрачное меню. Pixel 9 такую секцию не выводит,
   поэтому картинка начиналась ПОД шапкой, а не за ней.

   Вместо подгонки отрицательных полей под высоту шапки (она разная на разных
   экранах) просто выводим шапку из потока — тогда следующая секция сама
   встаёт под неё. Правило срабатывает только на страницах, где есть
   #header-bottom, то есть где картинка-шапка реально задана. */
#header.transparent-header:has(~ #header-bottom) {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    /* без этого открытое мобильное меню оказывается под картинкой-шапкой:
       у шапки был z-index auto. 199 — то же значение, что тема даёт #header-wrap */
    z-index: 199;
}

/* Шапка теперь лежит поверх баннера, поэтому содержимое баннера опускаем
   ниже неё — иначе верх картинки уходит под меню. Фон секции при этом
   остаётся на всю высоту и виден за полупрозрачной шапкой. Ровно так
   сделано на боевом: фон от нуля, картинка со сдвигом на высоту шапки.
   Высота шапки одинакова на всех экранах — замерено на 375, 768 и десктопе. */
:root {
    --al-header-h: 101px;
}
#header.transparent-header ~ #header-bottom .container {
    padding-top: var(--al-header-h);
}

/* Скрипт темы подтягивает секцию сразу за прозрачной шапкой отрицательным
   margin-top, чтобы она ушла под меню. Для полосы с фоновой картинкой это
   правильно. Но на страницах без картинки сверху первой идёт обычная узкая
   полоса заголовка — и она наполовину пряталась за меню.
   На боевом такого не было: там подтягивались только #slider и полоса
   в варианте parallax. Повторяем это поведение.
   margin задан инлайном из JS, поэтому нужен !important. */
#header.transparent-header + #page-title:not(.page-title-parallax) {
    margin-top: 0 !important;
}

/* На части страниц баннер вставлен не блоком-картинкой, а прямо в текст,
   с жёсткими атрибутами width/height от исходного файла. Тема даёт таким
   картинкам только max-width:100%: ширина ужимается по контейнеру, а высота
   остаётся из атрибута — картинка растягивается по вертикали.
   Дописываем height:auto, но строго внутри баннера: на самих страницах
   есть картинки с намеренно заданной высотой (обложки книг), их не трогаем. */
#header-bottom img {
    height: auto;
}

/* Картинки, вставленные в текст через файловый менеджер (<concrete-picture>),
   Concrete отдаёт с атрибутами width/height от самого файла. Тема даёт им
   только max-width:100%: ширина ужимается по колонке, высота остаётся из
   атрибута — картинка растягивается по вертикали. Атрибуты генерирует ядро
   при выводе, в тексте их нет, поэтому чиним стилями.

   Строго «картинка — прямой ребёнок абзаца». Обложки книг на /freeoffers
   обёрнуты в ссылку и заданы по высоте намеренно, чтобы ряд был ровным:
   их это правило не касается — проверено. */
#content p > img {
    height: auto;
}

/* --- Слайдеры в режиме правки -------------------------------------------
   Штатный блок темы (pixel_slider) сам рисует в редакторе заметную плашку
   «Pixel Slider disabled in edit mode» — его трогать не нужно. А блоки
   слайдеров, перенесённые со старого сайта (image_slider и другие), такой
   заглушки не имеют: их JS в редакторе не стартует, блок схлопывается
   в нулевую высоту и по нему невозможно кликнуть.

   Поэтому подставляем заглушку только тем слайдерам, у которых своей нет —
   отбор по отсутствию плашки внутри. На живой сайт правило не влияет:
   класс .ccm-edit-mode есть только в редакторе.

   Раньше это лежало вставкой в файле темы; вынесено сюда, чтобы пакет темы
   остался нетронутым. */
.ccm-edit-mode .slider-element:not(:has(.alert)),
.ccm-edit-mode .swiper_wrapper:not(:has(.alert)) {
    min-height: 180px;
    background: repeating-linear-gradient(45deg, #eef2f5, #eef2f5 12px, #e4e9ee 12px, #e4e9ee 24px);
    border: 2px dashed #9bb0c4;
    position: relative;
}
.ccm-edit-mode .slider-element:not(:has(.alert))::before {
    content: "SLIDER — click to edit";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font: 600 14px/1.4 system-ui, sans-serif;
    color: #55708a;
    background: rgba(255, 255, 255, .9);
    padding: 8px 16px;
    border-radius: 4px;
    pointer-events: none;
    z-index: 2;
}