/**
 * Enigma — Bootstrap 5 Compatibility Layer
 * =========================================
 * Відновлює візуальні метрики та компоненти Bootstrap 3.3.2 поверх Bootstrap 5.3.8,
 * щоб зберегти 100% ідентичний вигляд теми під час/після міграції.
 *
 * Підключається ТІЛЬКИ коли активна v5 (див. weblizar_scripts() у core/scripts/css_js.php),
 * після bootstrap-5.3.8.css і ПЕРЕД кастомними стилями теми.
 *
 * Кожна секція документує, ЩО саме відрізняється між v3 і v5 та ЧОМУ правило потрібне.
 * Постійний шар: тема зберігає розмітку/класи Bootstrap 3, а цей файл адаптує їх
 * під Bootstrap 5. Видаляти можна лише разом із рефакторингом відповідної розмітки.
 */

/* ============================================================
 * 0. ТИПОГРАФІКА (Reboot) — базові відступи й розміри
 * v5 Reboot змінив дефолти vs v3 normalize:
 *   p/ul/ol margin-bottom: 10px → 1rem(16px);
 *   заголовки: більші розміри, margin-top прибрано (0), margin-bottom 10px → .5rem(8px).
 * Тема побудована на дефолтах v3 → відновлюємо їх для елементів без явних стилів.
 * Ці правила мають найнижчу специфічність (елемент), тож будь-яке правило теми
 * з класом їх перекриває (compat підключається ПЕРЕД CSS теми).
 * ============================================================ */
p {
    margin: 0 0 10px;
}
ul,
ol {
    margin-top: 0;
    margin-bottom: 10px;
}
h1, .h1 { font-size: 36px; line-height: 1.1; margin-top: 20px; margin-bottom: 10px; }
h2, .h2 { font-size: 30px; line-height: 1.1; margin-top: 20px; margin-bottom: 10px; }
h3, .h3 { font-size: 24px; line-height: 1.1; margin-top: 20px; margin-bottom: 10px; }
h4, .h4 { font-size: 18px; line-height: 1.1; margin-top: 10px; margin-bottom: 10px; }
h5, .h5 { font-size: 14px; line-height: 1.1; margin-top: 10px; margin-bottom: 10px; }
h6, .h6 { font-size: 12px; line-height: 1.1; margin-top: 10px; margin-bottom: 10px; }

/* Посилання: v5 Reboot додає a{text-decoration:underline} за замовчуванням,
 * а v3 — ні (підкреслення лише на hover). Відновлюємо поведінку v3. */
a {
	text-decoration: none;
}
a:hover,
a:focus {
	text-decoration: underline;
}

/* .sr-only: v5 перейменував утиліту на .visually-hidden, тож старий клас
 * перестав ховати текст (напр. "Toggle navigation" на бургер-кнопці ставав
 * видимим). Відновлюємо visually-hidden поведінку для .sr-only. */
.sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ============================================================
 * 1. СІТКА — gutter та padding контейнера
 * v3: cols мають padding 15px з боків → gutter 30px; .container padding 15px.
 * v5: за замовчуванням --bs-gutter-x: 1.5rem (24px) → gutter 24px; padding 12px.
 * Відновлюємо 30px, щоб колонки й відступи збігалися піксель-у-піксель.
 * ============================================================ */
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
    --bs-gutter-x: 30px;
}
.row {
    --bs-gutter-x: 30px;
}
/* v5 .row — flexbox (align-items:stretch) робить колонки однакової висоти.
 * v3 сітка — float: колонки мають незалежну висоту й вирівнюються по верху.
 * Відтворюємо float-поведінку, щоб висоти рядів збігалися з v3. */
.row {
    align-items: flex-start;
}

/* Колонки напряму в .container (БЕЗ .row) — тема кладе в них floated-контент
 * (напр. футер: copyright float:left + соцмережі float:right).
 * v3: такі .col-* були float:left і утримували floated-дітей.
 * v5: .col-* — flex-item лише всередині .row; напряму в .container це звичайний
 *     блок, що НЕ утримує float → контейнер схлопується, а контент випадає нижче
 *     (у футері — на біле тло, іконки «зникають»). flow-root відновлює утримання. */
.container > [class*="col-"],
.container-fluid > [class*="col-"] {
    display: flow-root;
}

/* ============================================================
 * 2. СІТКА — ширина контейнера + брейкпоінти
 * v3 брейкпоінти: sm=768, md=992, lg=1200; .container = 750/970/1170; xxl не існує.
 * v5 брейкпоінти: sm=576, md=768, lg=992, xl=1200, xxl=1400; .container = 540/720/960/1140/1320.
 * Перевизначаємо .container під точну поведінку v3:
 *   - <768px: 100% (у v5 інакше з'являється 540px на 576-767px);
 *   - >=768px: 750px; >=992px: 970px; >=1200px: 1170px; xxl-стрибка нема.
 * ============================================================ */
@media (max-width: 767.98px) {
    .container { max-width: 100%; }
}
@media (min-width: 768px) {
    .container { max-width: 750px; }
}
@media (min-width: 992px) {
    .container { max-width: 970px; }
}
@media (min-width: 1200px) {
    .container { max-width: 1170px; }
}

/* ============================================================
 * 3. МЕДІА-ОБ'ЄКТ (.media / .media-body)
 * Компонент видалено у Bootstrap v4/v5, але тема його використовує:
 *   - core/comment-function.php (список коментарів)
 *   - home-services.php (іконка сервісу зліва + текст праворуч)
 * Відновлюємо v3-поведінку: контент праворуч від float утворює BFC і не «підтікає» під іконку.
 * ============================================================ */
.media {
    margin-top: 15px;
}
.media,
.media-body {
    overflow: hidden;
}
.media-body {
    width: auto;
    zoom: 1;
}
.media:first-child {
    margin-top: 0;
}

/* ============================================================
 * 4. ФОРМА ПОШУКУ (searchform.php → get_search_form())
 * Розмітка: .input-group > <form#searchform> > .form-control + .input-group-btn.
 * v3: .input-group (display:table) + input-group-btn кладуть інпут і кнопку в один рядок.
 * v5: .input-group (flex) має єдиний прямий елемент — <form>, тож інпут (width:100%)
 *     і кнопка стають одне під одним. Робимо сам <form> flex-контейнером — відновлюємо
 *     side-by-side (заміряно: інпут 182 + кнопка 62, sameRow — ідентично v3).
 * Розмітку searchform.php НЕ змінюємо (v3 лишається піксель-точним).
 * ============================================================ */
#searchform {
    display: flex;
    align-items: stretch;
}
#searchform .form-control {
    width: 100%;
}
#searchform .input-group-btn {
    display: flex;
}

/* ============================================================
 * 5. NAVBAR + МЕНЮ + DROPDOWN (header.php, walkers, menu.js)
 * Тема побудована на navbar Bootstrap 3. У v5 компонент переписано (flexbox,
 * .navbar-expand-*, .navbar-toggler), а базові правила, на які спирається тема,
 * прибрано. Відновлюємо саме v3-механіку (float-меню), щоб розмітку header.php
 * та walkers НЕ чіпати й зберегти піксельну відповідність.
 *
 * Заміряно у стенді (десктоп 1300px): пункти 72…540px, висота nav 70px,
 * підменю під батьком — ідентично v3.
 * ============================================================ */

/* .navbar: v5 — flex із padding .5rem; v3 — block без padding. Clearfix утримує
 * плаваючі діти й запобігає протіканню їхніх margin (інакше nav зсувається). */
.navbar {
    display: block;
    padding: 0;
    margin-bottom: 0;
}
.navbar::before,
.navbar::after,
.navbar-header::before,
.navbar-header::after,
.navbar-collapse::before,
.navbar-collapse::after,
.navbar-nav::before,
.navbar-nav::after {
    content: " ";
    display: table;
}
.navbar::after,
.navbar-header::after,
.navbar-collapse::after,
.navbar-nav::after {
    clear: both;
}

/* .navbar-nav: v5 — flex-column (float ігнорується). Повертаємо block, щоб li
 * плавали в рядок як у v3. */
.navbar-nav {
    display: block;
    float: none;
}
.navbar-nav > li {
    position: relative;
    display: block;
}
.navbar-nav > li > a {
    display: block;
    line-height: 20px;
}

/* v3 padding-left контейнера меню (у v5 його немає) — тримає лівий відступ пунктів. */
.navbar-collapse {
    padding-left: 15px;
}

/* Дропдаун відкривається класом .open (додає menu.js). v3: .open>.dropdown-menu
 * робить display:block; v5 використовує .show. Відновлюємо .open. */
.open > .dropdown-menu {
    display: block;
}

/* Смужки бургера: форму (.icon-bar) задавав v3-base; у v5 класу немає. */
.navbar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
}
.navbar-toggle .icon-bar + .icon-bar {
    margin-top: 4px;
}

/* Десктоп (>=768px = @grid-float-breakpoint v3, збігається з menu.js matchMedia):
 * меню завжди відкрите, бургер схований, пункти в рядок, дропдаун absolute. */
@media (min-width: 768px) {
    .navbar-nav {
        float: left;
        margin: 0;
    }
    .navbar-nav > li {
        float: left;
    }
    .navbar-nav .dropdown-menu {
        position: absolute;
    }
    .navbar-collapse.collapse {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
    }
    .navbar-toggle {
        display: none;
    }
}

/* ============================================================
 * 6. CAROUSEL (home-slideshow.php)
 * Слайди мають подвійний клас .item (v3) + .carousel-item (v5) — розмітку
 * home-slideshow.php оновлено (data-bs-ride/-interval/-slide/-target). Тут
 * відновлюємо ВИГЛЯД контролів, який у v3 давала база (градієнти 15%, opacity .5)
 * та glyphicon-стрілки (у v5 глифів немає → рендеримо через Font Awesome 5,
 * який тема вже підключає).
 * ============================================================ */

/* Контролі — позиція/градієнт/opacity як у v3 (перекриває flex-стилі v5
 * .carousel-control-prev/next, які додано в розмітку для позиціонування). */
.carousel-control {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 15%;
    font-size: 20px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    opacity: 0.5;
    background-color: rgba(0, 0, 0, 0);
    border: 0;
}
.carousel-control.left {
    left: 0;
    right: auto;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.0001) 100%);
}
.carousel-control.right {
    right: 0;
    left: auto;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0, rgba(0, 0, 0, 0.5) 100%);
}
.carousel-control:hover,
.carousel-control:focus {
    color: #fff;
    opacity: 0.9;
}

/* Стрілки: glyphicon у v5 немає → рендеримо той самий chevron через FA5.
 * Розмір/позиція відтворюють v3 (30px, по центру контролю). */
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    font-size: 30px;
    line-height: 30px;
}
.carousel-control .glyphicon-chevron-left {
    left: 50%;
    margin-left: -15px;
}
.carousel-control .glyphicon-chevron-right {
    right: 50%;
    margin-right: -15px;
}
.carousel-control .glyphicon-chevron-left::before,
.carousel-control .glyphicon-chevron-right::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}
.carousel-control .glyphicon-chevron-left::before {
    content: "\f053";
}
.carousel-control .glyphicon-chevron-right::before {
    content: "\f054";
}

/* Індикатори: у v3 — круглі крапки (list-style:none + border-radius на <li>).
 * У v5 два дефекти:
 *   1) <ol class="carousel-indicators"> показує номери 1,2,3, бо list-style не скинуто
 *      (v5 розрахований на <button>, а тема має <li>);
 *   2) правило .carousel-indicators [data-bs-target] робить елементи прямокутними
 *      смугами (border-radius:0) замість круглих.
 * Відновлюємо v3: без номерів, круглі. Розмір 20px задає сама тема (enigma-theme.css).
 * Селектор li[data-bs-target] має вищу специфічність за v5-правило [data-bs-target]. */
.carousel-indicators {
    list-style: none;
}
.carousel-indicators li,
.carousel-indicators li[data-bs-target] {
    box-sizing: border-box;
    display: inline-block;
    list-style: none;
    width: 20px;
    height: 20px;
    margin: 1px;
    padding: 0;
    text-indent: -999px;
    cursor: pointer;
    border: 1px solid #fff;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    border-radius: 50%;
    background-color: transparent;
    background-clip: padding-box;
    opacity: 1;
}
.carousel-indicators li.active,
.carousel-indicators li[data-bs-target].active {
    background-color: #fff;
}