/*=====================================================================
  1️⃣  Базові стилі сторінки
=====================================================================*/
html,
body {
    /* Забороняємо «збільшення» при подвійному тапі */
    touch-action: manipulation;                     /* iOS/Android */
    margin: 0;
    font-family: 'Inter', sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);

    /* Плавний перехід між темами */
    transition: background-color var(--scrollbar-transition),
                color var(--scrollbar-transition);
}

/* Для всього контенту, який не має скрол‑бару – нічого не резервуємо */
* {
    /* Видалено: scrollbar-gutter: stable both-edges; */
}

/* Основна розмітка */
main               { padding: 70px 0; }
.container          {
    box-sizing: border-box;
    max-width: 1200px;
    width: 95%;
    margin: 0 auto;
}
.section-title       {
    font-size: 32px;
    margin: 40px 0;
    text-align: center;
}

/* --------------------------------------------------------------------
   2️⃣  Модальне вікно (pinch‑zoom дозволяємо лише всередині)
--------------------------------------------------------------------*/
.modal__content { touch-action: pinch-zoom; }
.modal__img    { transition: transform .2s ease; }

/* --------------------------------------------------------------------
   3️⃣  Іконки – без зайвих відступів
--------------------------------------------------------------------*/
.icon {
    display: inline-block;
    width: 1em; height: 1em;
    vertical-align: middle;
    fill: currentColor; stroke: currentColor;
    flex-shrink: 0;
    padding: 0; margin: 0;
    overflow: visible;               /* показуємо весь SVG */
}
.icon svg { width: 100%; height: 100%; }

/*=====================================================================
  4️⃣  Перемінні (CSS‑змінні) – налаштування скрол‑бару
=====================================================================*/
:root {
    /* ==== розмір ==== */
    --scrollbar-size: 8px;                     /* 6‑12 px – виберіть реально потрібне */

    /* ==== кольори (вони беруться із вашого набору змінних) ==== */
    --scrollbar-thumb: var(--accent);                /* основний */
    --scrollbar-thumb-hover: var(--accent-hover);    /* hover */
    --scrollbar-thumb-active: var(--accent);         /* active (прокручування) */
    --scrollbar-track: var(--bg-tertiary);           /* фон треку */

    /* ==== інші параметри ==== */
    --scrollbar-radius: var(--radius);              /* заокруглення кутів */
    --scrollbar-transition: var(--transition);      /* плавність */
    --scrollbar-glow: 0 0 12px var(--accent);         /* базовий «glow» */
    --scrollbar-glow-hover: 0 0 18px var(--accent-hover);
}

/*=====================================================================
  5️⃣  Плавна анімація при перемиканні тем (фон, колір тексту)
=====================================================================*/
/* already declared у пункті 1 – залишаємо тільки transition  */

/*=====================================================================
  6️⃣  Підтримка Firefox (толщина + колір)
=====================================================================*/
html {
    scrollbar-width: thin;                              /* thin | auto | none */
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/*=====================================================================
  7️⃣  WebKit‑базовані браузери (Chrome, Edge, Safari, Opera)
=====================================================================*/
::-webkit-scrollbar {
    width: var(--scrollbar-size);
    height: var(--scrollbar-size);
    background: transparent;          /* прозорий «контейнер» */
}

/* --- Трек (запасний простір) -------------------------------------- */
::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: var(--scrollbar-radius);
}

/* --- Пальчик (thumb) ----------------------------------------------- */
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border: 2px solid var(--scrollbar-track);   /* створює «порожнину» */
    border-radius: var(--scrollbar-radius);
    box-shadow: var(--scrollbar-glow);
    transition: background-color var(--scrollbar-transition),
                box-shadow var(--scrollbar-transition),
                transform var(--scrollbar-transition);
}

/* --- Hover ---------------------------------------------------------- */
::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
    box-shadow: var(--scrollbar-glow-hover);
    transform: scale(1.05);
}

/* --- Active (кнопка миші натиснута) -------------------------------- */
::-webkit-scrollbar-thumb:active {
    background: var(--scrollbar-thumb-active);
    box-shadow: 0 0 24px var(--accent);
    transform: scale(0.98);
}

/* --- Куток (при одночасному вертикальному + горизонтальному скролі) */
::-webkit-scrollbar-corner { background: var(--scrollbar-track); }

/* --- Приховуємо «стрілки» ------------------------------------------ */
::-webkit-scrollbar-button { display: none; }

/*=====================================================================
  8️⃣  Переваги користувачів, які вимкнули анімації
=====================================================================*/
@media (prefers-reduced-motion: reduce) {
    ::-webkit-scrollbar-thumb { transition: none; }
}

/*=====================================================================
  9️⃣  Блоки, які **повинні** мати скрол‑бар (з резервом простору)
=====================================================================*/
.scrollable {
    overflow: auto;                     /* або overflow-y / overflow-x */
    scrollbar-gutter: stable both-edges;   /* залишаємо gutter лише тут */
}

/* --------------------------------------------------------------------
   Якщо хочете, щоб скрол‑бар був **поверх** контенту (не резервував
   простір) – застосуйте клас .overlay (працює в Chrome, Edge, Safari)
--------------------------------------------------------------------*/
.scrollable.overlay {
    overflow: overlay;   /* не резервує простір під скрол‑бар */
}

/*=====================================================================
  🔚  Кінець файлу
=====================================================================*/