/**
 * Один спільний файл для точкових CSS-виправлень дочірньої теми.
 * Нові дрібні фікси додавати СЮДИ (новим блоком нижче), а не новим
 * файлом — щоб заливка на сервер лишалась простою: один CSS-файл +
 * functions.php (якщо змінився сам enqueue).
 */

/* ==========================================================================
   PERFORMANCE_AUDIT.md P2 #11: "Avoid non-composited animations" (visibility)
   ========================================================================== */

/**
 * PageSpeed знайшов 4 селектори в parent-theme/vendor CSS, що тримають
 * `visibility` у списку `transition`/`transition-property` (усі — з 0s
 * тривалістю, лише щоб перемкнути visibility ПІСЛЯ завершення
 * opacity/transform-анімації): `.collapsing` (Bootstrap collapse — FAQ-
 * акордеони, фільтри), `.overlay-booking-module` (мобільний оверлей
 * бронювання), `.fancybox-caption`/`.fancybox-infobar`/
 * `.fancybox-navigation .fancybox-button`/`.fancybox-toolbar` (лайтбокс
 * галереї), `.sr7--hidden` (RevSlider).
 *
 * Без transition-behavior будь-яка transition-property, що згадує
 * visibility, змушує браузер рендерити на main thread замість компоузера,
 * навіть якщо сама тривалість 0s. `transition-behavior: allow-discrete`
 * (Chrome/Edge 117+, Safari 18+, Firefox 129+) дозволяє сучасним браузерам
 * компоузити цей самий перехід без жодної зміни таймінгу чи вигляду.
 * У старіших браузерах властивість просто ігнорується — поточна поведінка
 * (робоча, лише некомпоузена) лишається як fallback.
 */
.collapsing,
.overlay-booking-module,
.fancybox-caption,
.fancybox-infobar,
.fancybox-navigation .fancybox-button,
.fancybox-toolbar,
.sr7--hidden {
    transition-behavior: allow-discrete;
}

/* ==========================================================================
   PERFORMANCE_AUDIT.md P1 #15 / TODO.md: календар бронювання на мобільному
   ========================================================================== */

/**
 * Кнопки "попередній"/"наступний місяць" (`.listing-cal-prev`/
 * `.listing-cal-next`) недосяжні на мобільному.
 *
 * ІСТОРІЯ РОЗСЛІДУВАННЯ (26.08):
 *
 * 1. Спершу вважали це проблемою ШИРИНИ (кнопки 36px + padding не
 *    лишають запасу на ≤375px). Перша версія фіксу звузила кнопки й
 *    padding — не допомогло.
 *
 * 2. Живий тест на реальному телефоні показав інше: кнопки на мить
 *    видно ОДРАЗУ при відкритті календаря, потім вони зникають при
 *    прокрутці, а далі прокручується сама СТОРІНКА, а не календар.
 *    Це не проблема ширини — це проблема ПОЗИЦІОНУВАННЯ.
 *
 * 3. Корінь (перевірено кодом): `.search-calendar .calendar-navigation`
 *    має `position: relative` (main.css:95-131, група ".relative"), а
 *    в розмітці (`single-listing/booking/overlay-booking.php`, те саме
 *    в `sidebar-booking-module.php`) стоїть в HTML ПІСЛЯ виклику
 *    `homeyAvailabilityCalendar()`, тобто ПІСЛЯ всіх 6 місяців наперед.
 *    При `position:relative` властивість `top` зсуває елемент ВІД його
 *    природної позиції в потоці — а природна позиція тут це самий низ
 *    довжелезного 6-місячного контенту.
 *
 * ФІКС: перемикаємо `.calendar-navigation` на `position: sticky; top: 0;`
 * — стандартний спосіб тримати навігацію видимою під час прокрутки
 * довгого списку, незалежно від кількості місяців. Заразом звужено
 * кнопки (36px→28px) і горизонтальний padding контейнера. На 390px+
 * усе вже гаразд — тому звужуємо лише під max-width:480px.
 *
 * 4. Живий скріншот показав НОВЕ: "природна" (до активації sticky)
 *    позиція кнопки "›" (pull-right, впритул до правого краю) збігається
 *    з місцем стороннього плагіна "WP Call Button" (position:fixed;
 *    right:20px; bottom:20px; width:60px; height:60px; z-index:9999999999).
 *    Зсунуто кнопку "›" ліворуч на 80px (60px кнопки + 20px відступу),
 *    щоб гарантовано не перекривались.
 */
@media (max-width: 480px) {
    .search-calendar .calendar-navigation {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #fff;
    }

    .search-calendar .calendar-navigation .btn {
        width: 28px !important;
        height: 28px !important;
    }

    .search-calendar .calendar-navigation .listing-cal-next {
        margin-right: 80px;
    }

    .search-calendar {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* ==========================================================================
   Кнопка "Надіслати запит" у нижній мобільній панелі
   ========================================================================== */

/**
 * Тригер-кнопка (`#trigger-overlay-booking-form`, відкриває форму
 * бронювання) виглядала звуженою порівняно з кнопкою відправки
 * ВСЕРЕДИНІ форми (`#request_for_reservation_mobile`). Перевірено
 * живо: висота 21px проти 33px, `padding: 0 20px` проти
 * `padding: 6px 12px` — вертикальний padding у тригер-кнопки взагалі
 * нульовий (`main.css:9167-9170`,
 * `.overlay-booking-btn .trigger-overlay { padding: 0 20px; }`).
 * Додаємо вертикальний padding, лишаючи горизонтальний і float:right
 * (кнопка НЕ повинна ставати на всю ширину — лише вирівнюємо висоту).
 */
.overlay-booking-btn .trigger-overlay {
    padding: 6px 20px;
}