/*====================================================
 * sign-language.css
 * Стилі сторінки "Конституція України жестовою мовою"
 * Верховна Рада України — zakonst.rada.gov.ua
 *====================================================*/

/* ─── CSS-змінні (токени дизайну) ─── */
:root {
    /* Палітра бренду Ради */
    --c-brand: #101ebf;
    /* синій бренд */
    --c-brand-dark: #0d18a0;
    --c-brand-mid: #1e2ed4;
    --c-gold: #f4c430;
    --c-gold-dark: #d4a520;

    /* Нейтральні */
    --c-white: #ffffff;
    --c-bg: #f5f7fc;
    /* фон сторінки */
    --c-surface: #ffffff;
    /* поверхня карток */
    --c-border: #dce3f0;
    --c-muted: #6b7b9e;
    --c-text: #111827;
    --c-text-sec: #374151;
    --c-text-faint: #9ca3b8;

    /* Відео-підложка */
    --c-video-bg: #2f3f60;

    /* Шапка */
    --c-header-bg: var(--c-white);
    --c-header-border: #dce3f0;
    --c-header-text: var(--c-brand);

    /* Бічна панель */
    --c-sidebar-bg: var(--c-white);
    --c-sidebar-border: var(--c-border);
    --c-toc-hover: #eef1fb;
    --c-toc-active: #dde3f8;
    --c-toc-active-border: var(--c-brand);
    --c-chapter-num-bg: var(--c-brand);
    --c-chapter-num-text: var(--c-white);

    /* Футер / About */
    --c-about-bg: #f0f3fb;
    --c-about-border: var(--c-border);

    /* Тіні */
    --shadow-sm: 0 1px 4px rgba(16, 30, 191, .08);
    --shadow-md: 0 4px 20px rgba(16, 30, 191, .12);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, .22);

    /* Радіуси */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* Розміри */
    --sidebar-w: 450px;
    --header-h: 90px;
    --header-h-tablet: 70px;
    --header-h-mobile: 48px;
    --max-content-w: 1350px;
    /* --player-aspect: 5 / 8; */
    --player-aspect: 8 / 9;

    /* Переходи */
    --transition: .22s ease;

    /* Логотип */
    --logo-filter: none;
    --color-heading: #101ebf;
}

/* ─── ТЕМНА ТЕМА ─── */
body.dark {
    --c-brand: #717cff;
    --c-brand-mid: #8e97ff;
    --c-gold: #f1d33b;
    --c-gold-dark: #ffe64e;

    --c-bg: #0e1220;
    --c-surface: #141828;
    --c-border: #232d4a;
    --c-muted: #8c9fcf;
    --c-text: #e8ecf8;
    --c-text-sec: #b5c0db;
    --c-text-faint: #4a5580;

    --c-header-bg: #111726;
    --c-header-border: #1e2a44;
    --c-header-text: #9ba8ff;

    --c-sidebar-bg: #141828;
    --c-sidebar-border: #1e2a44;
    --c-toc-hover: #1a2238;
    --c-toc-active: #1e2d52;
    --c-toc-active-border: #717cff;
    --c-chapter-num-bg: #1f2b50;
    --c-chapter-num-text: #717cff;

    --c-about-bg: #111726;
    --c-about-border: #1e2a44;

    --shadow-sm: 0 1px 4px rgba(0, 0, 0, .3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, .4);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, .6);

    /* Логотип */
    --logo-filter: invert(1);
    --color-heading: #f1d33b;
}

/* ─── Базові скидання ─── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 17px;
    scroll-behavior: smooth;
}

body {
    font-family: 'Proba Pro', Arial, sans-serif;
    background: var(--c-bg);
    color: var(--c-text);
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    transition: background var(--transition), color var(--transition);
}

a {
    color: var(--c-brand);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover {
    color: var(--c-brand-dark);
    text-decoration: underline;
}

/* ─── ШАПКА ─── */
.sl-header {
    position: sticky;
    top: 0;
    z-index: 200;
    height: var(--header-h);
    background: var(--c-header-bg);
    border-bottom: 1px solid var(--c-header-border);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    transition: background var(--transition), border-color var(--transition);
}

.sl-header__inner {
    width: 100%;
    max-width: var(--max-content-w);
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Логотип */
.sl-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    text-decoration: none;
}

.sl-logo__img {
    width: 44px;
    height: 44px;
    background: url('https://zakonst.rada.gov.ua/images/rada.gif') no-repeat center;
    background-size: contain;
    filter: var(--logo-filter);
    transition: filter 0.3s;
    flex-shrink: 0;
}

[lang="en"] .sl-logo__img {
    background-image: url('https://zakonst.rada.gov.ua/images/rada_en.gif');
}

.sl-logo__text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.block-heading {
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: 1.2px;
    line-height: 1.1em;
    font-variant: small-caps;
    text-wrap: pretty;
    color: var(--color-heading);
    margin: 0;
}

.sl-logo__rada {
    font-size: .68rem;
    font-weight: 600;
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: .15em;
    margin-top: 2px;
}

.sl-header__spacer {
    flex: 1;
}

/* Перемикач відео */
.sl-source-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: 6px;
    padding: 3px;
    flex-shrink: 0;
    transition: background var(--transition), border-color var(--transition);
}

.sl-source-btn {
    font-family: inherit;
    font-size: .78rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: var(--c-muted);
    cursor: pointer;
    transition: all var(--transition);
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.sl-source-btn.active {
    background: var(--c-brand);
    color: var(--c-white);
    box-shadow: var(--shadow-sm);
}

.sl-source-btn:not(.active):hover {
    background: var(--c-toc-hover);
    color: var(--c-text);
}

/* Кнопка TOC для мобілки */
.sl-toc-toggle {
    display: none;
    align-items: center;
    gap: 8px;
    background: var(--c-brand);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-family: inherit;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition);
}

.sl-toc-toggle:hover {
    background: var(--c-brand-mid);
}

/* Перемикач теми */
.sl-theme-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    font-size: .78rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid var(--c-border);
    background: var(--c-bg);
    color: var(--c-text-sec);
    cursor: pointer;
    transition: all var(--transition);
    flex-shrink: 0;
    white-space: nowrap;
}

.sl-theme-btn:hover {
    border-color: var(--c-brand);
    color: var(--c-brand);
}

/* ─── ОСНОВНИЙ LAYOUT ─── */
.sl-layout {
    flex: 1;
    display: flex;
    width: 100%;
    max-width: var(--max-content-w);
    margin: 0 auto;
    min-height: 0;
}

/* ─── БІЧНА ПАНЕЛЬ (зміст) ─── */
.sl-sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--c-sidebar-bg);
    border-right: 1px solid var(--c-sidebar-border);
    transition: background var(--transition), border-color var(--transition);
    position: sticky;
    top: var(--header-h);
    height: calc(100dvh - var(--header-h));
    overflow: hidden;
}

.sl-sidebar__head {
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--c-border);
    flex-shrink: 0;
}

.sl-sidebar__head-title {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--c-muted);
    margin-bottom: 8px;
}

/* Пошук */
.sl-search {
    position: relative;
}

.sl-search__icon {
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--c-muted);
    font-size: .8rem;
    pointer-events: none;
}

.sl-search__input {
    width: 100%;
    padding: 7px 10px 7px 30px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-border);
    background: var(--c-bg);
    color: var(--c-text);
    font-family: inherit;
    font-size: .9rem;
    outline: none;
    transition: border-color var(--transition), background var(--transition);
}

.sl-search__input:focus {
    border-color: var(--c-brand);
    background: var(--c-surface);
}

.sl-search__input::placeholder {
    color: var(--c-text-faint);
}

/* Дерево змісту */
.sl-toc {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0 16px;
    scroll-behavior: smooth;
}

.sl-toc::-webkit-scrollbar {
    width: 4px;
}

.sl-toc::-webkit-scrollbar-track {
    background: transparent;
}

.sl-toc::-webkit-scrollbar-thumb {
    background: var(--c-border);
    border-radius: 2px;
}

/* Розділ */
.toc-chapter {
    margin-bottom: 2px;
}

.toc-chapter__header {
    display: flex;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    padding: 8px 12px;
    cursor: pointer;
    user-select: none;
    border-radius: var(--radius-sm);
    transition: background var(--transition);
}

.toc-chapter__header:hover {
    background: var(--c-toc-hover);
}

.toc-chapter__arrow {
    font-size: .6rem;
    color: var(--c-muted);
    transition: transform .2s;
    flex-shrink: 0;
}

.toc-chapter.open .toc-chapter__arrow {
    transform: rotate(90deg);
}

.toc-chapter__num {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .05em;
    background: var(--c-chapter-num-bg);
    color: var(--c-chapter-num-text) !important;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 80px;
    text-align: center;
    transition: background var(--transition), color var(--transition);
}

.toc-chapter__title {
    font-size: .85rem;
    font-weight: 700;
    color: var(--c-text);
    line-height: 1.3;
    transition: color var(--transition);
}

.toc-chapter.active .toc-chapter__title,
.toc-chapter.active .toc-chapter__num {
    color: var(--color-heading);
}

.sl-toc__chapter-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.sl-toc__chapter-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.toc-chapter__time {
    font-size: .7rem;
    font-weight: 600;
    color: var(--c-muted);
    opacity: 0.8;
    font-variant-numeric: tabular-nums;
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
}


.toc-chapter__articles {
    display: none;
}

.toc-chapter.open .toc-chapter__articles {
    display: block;
}

/* Стаття в змісті */
.toc-art {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 5px 28px;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background var(--transition), border-color var(--transition);
    position: relative;
}

.toc-art:hover {
    background: var(--c-toc-hover);
}

.toc-art.active {
    background: var(--c-toc-active);
    border-left-color: var(--c-toc-active-border);
}

.toc-art.hidden {
    display: none;
}

.toc-art__num {
    font-size: .85rem;
    font-weight: 700;
    color: var(--c-brand);
    white-space: nowrap;
    min-width: 75px;
    flex-shrink: 0;
    transition: color var(--transition);
}

.toc-art.active .toc-art__num {
    color: var(--color-heading);
}

.toc-art__title {
    font-size: .9rem;
    color: var(--c-text-sec);
    line-height: 1.4;
    flex: 1;
    transition: color var(--transition);
}

.toc-art.active .toc-art__title {
    color: var(--color-heading);
    font-weight: 600;
}

.toc-art__time {
    font-size: .72rem;
    color: var(--c-text-faint);
    white-space: nowrap;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
}

.toc-art__link {
    font-size: .68rem;
    color: var(--c-brand);
    flex-shrink: 0;
    opacity: 0;
    transition: opacity var(--transition);
}

.toc-art:hover .toc-art__link {
    opacity: 1;
}

/* Прогрес-бар поточної статті */
.toc-art__progress {
    position: absolute;
    bottom: 0;
    left: 28px;
    height: 2px;
    background: var(--c-brand);
    width: 0;
    transition: width .5s linear;
    opacity: .5;
}

/* ─── БЛОК ВІДЕО (права сторона) ─── */
.sl-player-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--c-video-bg);
    position: sticky;
    top: var(--header-h);
    height: calc(100dvh - var(--header-h));
    overflow: hidden;
}

.sl-player-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 20px 24px;
    gap: 15px;
    min-height: 0;
    position: relative;
}

/* Вертикальне відео (вузький формат 9:16) */
.sl-video-box {
    position: relative;
    /* Висота на весь доступний простір */
    height: calc(100dvh - var(--header-h) - 140px);
    aspect-ratio: var(--player-aspect);
    width: auto;
    flex-shrink: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    background: #000;
}

#yt-player,
#mp4-player {
    width: 100%;
    height: 100%;
    display: block;
}

#yt-poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    z-index: 2;
    transition: opacity var(--transition);
}

#mp4-player {
    display: none;
}

#mp4-video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Блок "Зараз грає" (під відео) */
.sl-now-playing {
    width: auto;
    min-width: 420px;
    max-width: 600px;
    padding: 12px 18px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 16px;
    transition: background var(--transition), border-color var(--transition);
}

.sl-now-playing__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.sl-np-link {
    font-size: .8rem;
    color: var(--c-brand);
    text-decoration: none;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
    transition: color var(--transition);
}

.sl-np-link:hover {
    color: var(--c-brand-mid);
    text-decoration: underline;
}


.sl-play-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: var(--c-brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all var(--transition);
    flex-shrink: 0;
    padding-left: 3px;
    /* Оптичне вирівнювання іконки плей */
}

.sl-play-btn:hover {
    background: var(--c-brand-mid);
    transform: scale(1.05);
}

.sl-play-btn:active {
    transform: scale(0.95);
}

.sl-play-btn .fa-pause {
    padding-left: 0;
}

/* Скидаємо відступ для паузи */

.sl-np-badge {
    display: inline-block;
    background: var(--c-gold);
    color: #1a1a00;
    font-size: .75rem;
    font-weight: 800;
    padding: 2px 10px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

.sl-np-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--c-text);
    line-height: 1.3;
}

/* Панель управління — прибрана (MP4 URL-рядок видалено) */

/* ─── БЛОК "ПРО ПРОЕКТ" (inside sidebar, collapsible on tablet) ─── */
.sl-about {
    flex-shrink: 0;
    border-top: 1px solid var(--c-about-border);
    background: var(--c-about-bg);
    font-size: .8rem;
    color: var(--c-muted);
    line-height: 1.55;
    transition: background var(--transition), border-color var(--transition);
}

.sl-about__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    font-size: .72rem;
    font-weight: 700;
    color: var(--c-text-sec);
    transition: background var(--transition);
}

.sl-about__toggle:hover {
    background: var(--c-toc-hover);
}

.sl-about__toggle-icon {
    transition: transform .2s;
}

.sl-about.open .sl-about__toggle-icon {
    transform: rotate(180deg);
}

.sl-about__body {
    display: none;
    padding: 0 14px 12px;
}

.sl-about.open .sl-about__body {
    display: block;
}

.sl-about__row {
    margin-top: 5px;
}

.sl-about__row strong {
    color: var(--c-text-sec);
    font-weight: 600;
}

/* ─── Лого НГО (замість рядка «Переклад: Лада Соколюк») ─── */
.sl-about__ngo-logo {
    display: block;
    max-width: 420px;
    max-height: 149px;
    width: 100%;
    /* адаптивна ширина: заповнює блок */
    height: auto;
    /* зберігає пропорції */
    border-radius: 6px;
    /* трохи закруглені кути */
    margin-top: 4px;
    transition: filter var(--transition);
}

body.dark .sl-about__ngo-logo {
    filter: invert(1);
}

.sl-fulltext-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    font-size: .72rem;
    font-weight: 600;
    color: var(--c-brand);
    transition: color var(--transition);
}

.sl-fulltext-link:hover {
    color: var(--c-brand-mid);
}

/* ─── ПЛАНШЕТ (768–1023px) ─── */
@media (max-width: 1023px) and (min-width: 600px) {
    :root {
        --sidebar-w: 300px;
        --header-h: var(--header-h-tablet);
    }

    .sl-logo__title {
        font-size: .88rem;
    }

    .sl-logo__sub {
        font-size: .68rem;
    }

    .sl-logo__rada {
        font-size: .64rem;
    }

    .sl-logo__img {
        height: 36px;
    }

}

/* ─── МОБІЛЬНИЙ (< 600px) ─── */
@media (max-width: 599px) {
    :root {
        --header-h: var(--header-h-mobile);
    }

    body {
        overflow-y: auto;
    }

    .sl-header__inner {
        padding: 0 10px;
        gap: 8px;
    }

    .sl-logo__text {
        display: none;
    }

    .sl-logo__img {
        width: 32px;
        height: 32px;
    }

    .sl-toc-toggle {
        display: flex;
    }

    .sl-theme-btn .sl-theme-label {
        display: none;
    }

    .sl-theme-btn {
        padding: 6px 10px;
    }

    .sl-layout {
        flex-direction: column;
        height: auto;
        overflow-y: auto;
        margin-top: -48px;
    }

    .sl-layout.toc-hidden {
        margin-top: 0;
    }

    /* Стан, коли зміст сховано — ВІДЕО НА ВЕСЬ ЕКРАН */
    .sl-layout.toc-hidden .sl-sidebar {
        display: none !important;
    }

    .sl-layout.toc-hidden .sl-player-wrap {
        height: calc(100dvh - var(--header-h));
        padding-bottom: 20px;
        margin-top: 0;
    }

    .sl-layout.toc-hidden .sl-video-box {
        width: 100%;
        max-width: calc((100dvh - var(--header-h) - 150px) * var(--player-aspect));
        height: auto;
        max-height: none;
        aspect-ratio: var(--player-aspect);
    }

    /* Звичайний стан мобілки (зміст внизу) */
    .sl-player-wrap {
        width: 100%;
        height: auto;
        order: 1;
        flex-shrink: 0;
    }

    .sl-player-inner {
        padding: 0 10px 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
    }

    .sl-video-box {
        width: auto;
        height: 42vh;
        max-height: 380px;
        aspect-ratio: var(--player-aspect);
        margin: 0 auto;
    }

    /* Панель під відео — компактніша на мобілці */
    .sl-now-playing {
        min-width: auto;
        width: 100%;
        max-width: 480px;
        padding: 8px 12px;
        gap: 12px;
    }

    .sl-play-btn {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .sl-np-badge {
        font-size: 0.68rem;
        padding: 1px 8px;
    }

    .sl-np-title {
        font-size: 0.92rem;
    }

    .sl-np-link {
        font-size: 0.72rem;
    }

    /* Зміст — дрібніший шрифт */
    .sl-sidebar {
        width: 100%;
        order: 2;
        border-right: none;
        border-top: 1px solid var(--c-border);
        background: var(--c-bg);
        margin-top: 50px;
    }

    .sl-toc {
        max-height: 60vh;
    }

    .toc-art__num {
        font-size: 0.78rem;
        min-width: 65px;
    }

    .toc-art__title {
        font-size: 0.82rem;
    }

    .toc-chapter__title {
        font-size: 0.78rem;
    }

    .toc-chapter__num {
        font-size: 0.6rem;
    }
}




/* ─── Утиліти ─── */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

/*====================================================
 * NAME        : sign-language.css
 * DESCRIPTION : Стилі сторінки "Конституція України
 *               жестовою мовою" (zakonst.rada.gov.ua)
 * AUTHOR      : Copyright (c) 1999-2026,
 *               Sergey Shcherbakov (Mover)
 *====================================================*/