/* ==========================================================
   School Services — Accordion v2.0
   Архітектура: поведінка (цей файл) повністю відокремлена
   від контенту. Контент будується в Elementor звичайними
   віджетами всередині .ss-accordion-content-inner.
========================================================== */

/* ---------- Токени акордеона (легко перевизначити глобально) ---------- */
.ss-accordion-group {
    --ss-color-accent:        #4A3BDB;
    --ss-color-header-hover:  #F4F6FB;
    --ss-color-header-active: #EDF4FD;
    --ss-color-border:        #E1E1E8;
    --ss-radius:              14px;
    --ss-duration:             350ms;
    --ss-ease:                 cubic-bezier(0.4, 0, 0.2, 1);
    --ss-ease-spring:          cubic-bezier(0.34, 1.56, 0.64, 1);

    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ==========================================================
   Пункт акордеона
========================================================== */
.ss-accordion {
    border: 1px solid var(--ss-color-border);
    border-radius: var(--ss-radius);
    overflow: hidden !important;
    background: #fff;
    transition: box-shadow var(--ss-duration) var(--ss-ease),
                border-color var(--ss-duration) var(--ss-ease);
}

.ss-accordion.ss-active {
    border-color: color-mix(in srgb, var(--ss-color-accent) 35%, var(--ss-color-border));
    box-shadow: 0 4px 16px rgba(16, 16, 24, 0.06);
}

/* ==========================================================
   Header
========================================================== */
.ss-accordion-header {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    transition: background-color var(--ss-duration) var(--ss-ease);

    /* Доступність: видимий фокус для клавіатурної навігації */
    outline-offset: -2px;
}

.ss-accordion-header:hover {
    background-color: var(--ss-color-header-hover);
}

.ss-accordion.ss-active > .ss-accordion-header {
    background-color: var(--ss-color-header-active);
}

.ss-accordion-header:focus-visible {
    outline: 2px solid var(--ss-color-accent);
}

/* Дозволяємо клікати тільки по хедеру, а не по вкладених елементах,
   щоб клік по іконці/тексту не "губився" всередині вкладених тегів */
.ss-accordion-header > * {
    pointer-events: none;
}

/* ==========================================================
   Стрілка (індикатор стану)
========================================================== */
.ss-arrow {
    margin-left: auto;
    flex-shrink: 0;
    transition: transform var(--ss-duration) var(--ss-ease-spring);
}

.ss-accordion.ss-active .ss-arrow {
    transform: rotate(180deg);
}

/* ==========================================================
   Content — анімаційна обгортка (НЕ редагувати контент тут)
   Технік grid-template-rows: 0fr → 1fr замість вимірювання
   scrollHeight у JS. Переваги:
   - анімується чистим CSS, без жодного JS-рахунку пікселів
   - автоматично підлаштовується під контент, що змінив розмір
     (адаптивність, зміна шрифту, довший текст) — без "стрибків"
   - немає жодних setTimeout / трюків із max-height:none
========================================================== */
.ss-accordion-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--ss-duration) var(--ss-ease);
}

.ss-accordion.ss-active .ss-accordion-content {
    grid-template-rows: 1fr;
}

/* Обов'язковий внутрішній контейнер: grid-елемент, що ховає
   overflow, поки grid-template-rows == 0fr. Сюди Elementor
   кладе будь-які віджети (документи, кнопки, текст). */
.ss-accordion-content-inner {
    overflow: hidden;
    min-height: 0;
}

/* Внутрішній padding контенту — застосовуйте через звичайні
   налаштування Padding у самому Elementor-контейнері
   ss-accordion-content-inner, а не тут, щоб редактор бачив
   реальні відступи прямо в конструкторі. */

/* ==========================================================
   Стан у редакторі Elementor — тримаємо розгорнутим для зручності
========================================================== */
body.elementor-editor-active .ss-accordion-content {
    grid-template-rows: 1fr !important;
}
body.elementor-editor-active .ss-accordion-content-inner {
    overflow: visible !important;
}

/* ==========================================================
   Reduced motion — повага до налаштувань доступності ОС
========================================================== */
@media (prefers-reduced-motion: reduce) {
    .ss-accordion,
    .ss-accordion-header,
    .ss-arrow,
    .ss-accordion-content {
        transition-duration: 0.01ms !important;
    }
}