/* =====================================================================
   CIBOR — Header & off-canvas мега-меню  (v2.4)
   Зміни vs v2.3:
     • Виправлено селектор для "першого компактного" — :first-of-type
       не працював, бо всі li мають той самий тег. Тепер
       використовується li:not(.is-compact) + li.is-compact
       (компактний, перед яким стоїть НЕ-компактний — тобто початок групи).
   ===================================================================== */

/* 1. ── Токени ────────────────────────────────────────────────────── */
:root {
    --cibor-blue:      #065AA7;
    --cibor-blue-2:    #054b8c;
    --cibor-yellow:    #EDCC19;
    --cibor-white:     #fff;

    --cibor-panel-w-desktop: min(1080px, 92vw);
    --cibor-panel-w-tablet:  680px;
    --cibor-radius:    100px;
    --cibor-ease:      cubic-bezier(.16, .84, .44, 1);
    --cibor-dur:       .55s;
}

/* 2. ── Права група кнопок у шапці ────────────────────────────────── */
.header-controls {
    display: flex;
    align-items: center;
    gap: 16px;
}
@media (max-width: 767px) { .header-controls { gap: 10px; } }

/* 3. ── Бургер ───────────────────────────────────────────────────── */
.cibor-burger {
    position: relative; display: inline-block;
    width: 20px; height: 14px; flex: 0 0 auto;
}
.cibor-burger i {
    position: absolute; left: 0; width: 100%; height: 2px;
    background: currentColor; border-radius: 2px;
    transition: transform var(--cibor-dur) var(--cibor-ease), opacity .25s ease, top .25s ease;
}
.cibor-burger i:nth-child(1) { top: 0; }
.cibor-burger i:nth-child(2) { top: 6px; }
.cibor-burger i:nth-child(3) { top: 12px; }
.cibor-nav-toggle.is-active .cibor-burger i:nth-child(1) { top: 6px; transform: rotate(45deg); }
.cibor-nav-toggle.is-active .cibor-burger i:nth-child(2) { opacity: 0; }
.cibor-nav-toggle.is-active .cibor-burger i:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* 4. ── Overlay ───────────────────────────────────────────────────── */
.cibor-nav-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(2px);
    opacity: 0; visibility: hidden;
    transition: opacity var(--cibor-dur) var(--cibor-ease), visibility var(--cibor-dur) var(--cibor-ease);
    z-index: 8;
}
.cibor-nav-overlay.is-visible { opacity: 1; visibility: visible; }
body.cibor-nav-open { overflow: hidden; }

/* 5. ── Off-canvas панель ─────────────────────────────────────────── */
.cibor-nav {
    position: fixed; top: 0; right: 0;
    height: 100dvh;
    width: var(--cibor-panel-w-desktop);
    max-width: 100vw;
    background: var(--cibor-blue);
    color: var(--cibor-white);
    z-index: 9;
    border-radius: 0 0 0 var(--cibor-radius);
    box-shadow: -40px 0 120px rgba(0, 0, 0, 0);
    transform: translateX(105%);
    transition: transform var(--cibor-dur) var(--cibor-ease), box-shadow var(--cibor-dur) var(--cibor-ease);
    overflow: hidden;
}
.cibor-nav.is-open {
    transform: translateX(0);
    box-shadow: -40px 0 120px rgba(0, 0, 0, .45);
}

.cibor-nav__close {
    position: absolute; top: 34px; right: 40px;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
    background: transparent; color: var(--cibor-white);
    cursor: pointer; z-index: 3;
    transition: transform .4s var(--cibor-ease), background .3s ease, border-color .3s ease;
}
.cibor-nav__close svg { width: 16px; height: 16px; }
.cibor-nav__close:hover {
    background: var(--cibor-yellow); border-color: var(--cibor-yellow);
    color: var(--cibor-blue); transform: rotate(90deg);
}

/* 6. ── Десктоп: дві колонки ──────────────────────────────────────── */
@media (min-width: 992px) {
    .cibor-nav__inner {
        height: 100%;
        display: grid;
        grid-template-columns: minmax(420px, 1fr) minmax(420px, 1.05fr);
        gap: 0;
    }
    .cibor-nav__primary {
        padding: 70px 60px 40px 60px;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        display: flex;
        flex-direction: column;
        min-height: 0;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, .18) transparent;
        justify-content: space-between;
    }
    .cibor-nav__primary::-webkit-scrollbar { width: 6px; }
    .cibor-nav__primary::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; }

    .cibor-nav__preview {
        position: relative;
        background: var(--cibor-blue-2);
        overflow: hidden;
        border-left: 1px solid rgba(255, 255, 255, .08);
    }
}

/* 6.1 — превʼю-панелі */
.cibor-preview {
    position: absolute; inset: 0;
    padding: 90px 60px 60px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity .45s var(--cibor-ease),
    transform .55s var(--cibor-ease),
    visibility .45s var(--cibor-ease);
    display: flex; flex-direction: column;
}
.cibor-preview.is-active {
    opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}
.cibor-preview__bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: .14;
    filter: saturate(.85);
    transition: opacity .6s ease, transform 1.2s ease;
    z-index: 0;
}
.cibor-preview.is-active .cibor-preview__bg { transform: scale(1.04); }
.cibor-preview__content {
    position: relative; z-index: 1;
    display: flex; flex-direction: column;
    height: 100%;
    gap: 6px;
}
.cibor-preview__label {
    font-size: 11px; font-weight: 600;
    letter-spacing: .18em; text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    margin-bottom: 8px;
}
.cibor-preview__title {
    font-size: 30px; font-weight: 700; line-height: 1.1;
    margin: 0 0 26px;
    color: var(--cibor-white);
    text-wrap: balance;
}
.cibor-preview__list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column;
}
.cibor-preview__list li { list-style: none; }
.cibor-preview__list a {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    padding: 13px 0;
    color: rgba(255, 255, 255, .85);
    font-size: 16px; font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .10);
    transition: color .25s ease, padding-left .3s var(--cibor-ease), border-color .25s ease;
}
.cibor-preview__list a::after {
    content: "→";
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .3s ease, transform .35s var(--cibor-ease);
    color: var(--cibor-yellow);
}
.cibor-preview__list a:hover {
    color: var(--cibor-white);
    padding-left: 8px;
    border-color: rgba(255, 255, 255, .25);
}
.cibor-preview__list a:hover::after { opacity: 1; transform: translateX(0); }
.cibor-preview__cta {
    margin-top: 28px;
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 12px;
    padding: 12px 0;
    color: var(--cibor-yellow);
    font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .3s ease, gap .3s ease;
}
.cibor-preview__cta:hover { border-color: var(--cibor-yellow); gap: 18px; }
.cibor-preview--idle .cibor-preview__title {
    color: rgba(255, 255, 255, .45);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    max-width: 320px;
    margin: 0;
}
.cibor-preview--idle .cibor-preview__label {
    color: rgba(255, 255, 255, .35);
}

/* 7. ── WP-меню (ліва колонка) ────────────────────────────────────── */
.cibor-menu {
    list-style: none; margin: 0; padding: 0;
    counter-reset: cibor-cat;
}
.cibor-menu > li.menu-item-has-children,
.cibor-menu > li:not(.is-compact) {
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.cibor-menu > li:not(.is-compact) { counter-increment: cibor-cat; }
.cibor-menu > li > a {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 14px 60px 15px 0;
    color: var(--cibor-white);
    font-size: clamp(1.25rem, .4vw + 1.1rem, 1.3rem);
    font-weight: 700;
    line-height: 1.15;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: .01em;
    transition: color .3s ease, padding-left .35s var(--cibor-ease);
}
.cibor-menu > li:not(.is-compact) > a::before {
    content: counter(cibor-cat, decimal-leading-zero);
    font-size: 11px; font-weight: 600;
    letter-spacing: .12em;
    color: rgba(255, 255, 255, .35);
    flex: 0 0 auto;
    position: relative; top: -3px;
    transition: color .3s ease;
}
.cibor-menu > li:hover > a,
.cibor-menu > li.is-hover > a       { color: var(--cibor-yellow); padding-left: 10px; }
.cibor-menu > li:hover > a::before,
.cibor-menu > li.is-hover > a::before { color: var(--cibor-yellow); }

.cibor-menu > li:hover::before,
.cibor-menu > li.is-hover::before,
.cibor-menu > li.is-open::before { opacity: 1; transform: translateX(0); }

.cibor-menu .cibor-submenu-toggle {
    position: absolute; top: 14px; right: 0;
    width: 40px; height: 40px;
    display: grid; place-items: center;
    background: transparent; border: 0;
    color: var(--cibor-white);
    cursor: pointer;
}
.cibor-menu .cibor-submenu-toggle svg {
    width: 18px; height: 18px;
    transition: transform .4s var(--cibor-ease);
}
.cibor-menu .sub-menu {
    list-style: none; margin: 0; padding: 0;
    max-height: 0; overflow: hidden;
    opacity: .4;
    transition: max-height var(--cibor-dur) var(--cibor-ease),
    opacity var(--cibor-dur) var(--cibor-ease),
    padding var(--cibor-dur) var(--cibor-ease);
}
.cibor-menu .sub-menu li > a {
    display: block;
    padding: 11px 0 11px 18px;
    color: rgba(255, 255, 255, .82);
    font-size: 1rem; font-weight: 500;
    text-decoration: none;
    border-left: 2px solid rgba(255, 255, 255, .18);
    transition: color .25s ease, border-color .25s ease, padding-left .3s var(--cibor-ease);
}
.cibor-menu .sub-menu li > a:hover {
    color: var(--cibor-yellow);
    border-color: var(--cibor-yellow);
    padding-left: 24px;
}
@media (min-width: 992px) {
    .cibor-menu .cibor-submenu-toggle { display: none; }
    .cibor-menu .sub-menu { display: none; }
}
@media (max-width: 991px) {
    .cibor-menu .menu-item-has-children.is-open > .sub-menu {
        max-height: 640px; opacity: 1; padding: 6px 0 20px;
    }
    .cibor-menu .menu-item-has-children.is-open > .cibor-submenu-toggle svg {
        transform: rotate(180deg); color: var(--cibor-yellow);
    }
}

/* ── Вторинна секція: компактні пункти ───────────────────────────── */
/* Vacatures / Referenties / Blog / Over cibor.
   "Перший компактний" = той, перед яким стоїть НЕ-компактний.
   :first-of-type не підходить, бо всі li мають однаковий тег. */

/* базові стилі для всіх компактних */
.cibor-menu > li.is-compact {
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    border-top: 0;
}
.cibor-menu > li.is-compact:last-of-type { border-bottom: 0; }

.cibor-menu > li.is-compact > a {
    padding: 10px 0;
    gap: 14px;
    font-size: .95rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: rgba(255, 255, 255, .68);
}
.cibor-menu > li.is-compact > a::before { content: none; }
.cibor-menu > li.is-compact > a:hover {
    color: var(--cibor-yellow);
    padding-left: 6px;
}

/* "перший компактний у групі" — великий розрив зверху + мітка MEER */
.cibor-menu > li:not(.is-compact) + li.is-compact {
    margin-top: 20px;
    padding-top: 20px;
    position: relative;
}
.cibor-menu > li:not(.is-compact) + li.is-compact::before {
    content: "MEER";
    position: static;
    display: block;
    width: auto; height: auto;
    background: none;
    opacity: 1;
    transform: none;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .22em;
    color: rgba(255, 255, 255, .35);
    margin-bottom: 10px;
}

/* у наступних компактних — без мітки і без жовтого акценту */
.cibor-menu > li.is-compact + li.is-compact::before { display: none; }

/* 8. ── Активна сторінка ──────────────────────────────────────────── */
.cibor-menu > li.current-menu-item::before,
.cibor-menu > li.current-menu-parent::before,
.cibor-menu > li.current-menu-ancestor::before {
    opacity: 1; transform: translateX(0);
}
.cibor-preview__list .current-menu-item a,
.cibor-preview__list .current_page_item a {
    color: var(--cibor-yellow);
    border-color: rgba(237, 204, 25, .35);
}

/* 9. ── Перемикач мов ─────────────────────────────────────────────── */
.cibor-lang ul {
    display: flex; align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin: 0; padding: 0; list-style: none;
}
.cibor-lang li { list-style: none; }
.cibor-lang a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 8px; border-radius: 6px;
    text-decoration: none;
    transition: opacity .3s ease, background .3s ease, color .3s ease;
}
.cibor-lang img { display: block; width: 16px; height: auto; border-radius: 2px; }
.cibor-lang--bar { display: none !important; }
.cibor-lang--panel { margin-top: 10px; }
.cibor-lang--panel a { border: 1px solid transparent; }
.cibor-lang--panel a span {
    color: rgba(255, 255, 255, .80);
    font-size: 12px; font-weight: 600;
    letter-spacing: .02em;
}
.cibor-lang--panel a:hover { background: rgba(255, 255, 255, .08); }
.cibor-lang--panel a:hover span { color: var(--cibor-yellow); }
.cibor-lang--panel .current-lang a {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(237, 204, 25, .5);
}
.cibor-lang--panel .current-lang a span { color: var(--cibor-yellow); }

/* 10. ── Підвал лівої колонки ─────────────────────────────────────── */
.cibor-nav__footer {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .18);
}
.cibor-nav__cta {
    display: inline-flex; align-items: center; gap: 18px;
    margin-bottom: 22px;
    padding: 16px 30px;
    background: var(--cibor-yellow);
    color: var(--cibor-blue);
    font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    text-decoration: none;
    border-radius: 40px; cursor: pointer;
    transition: transform .35s var(--cibor-ease), filter .35s ease;
}
.cibor-nav__cta:hover { transform: translateY(-2px); filter: brightness(1.05); }
.cibor-nav__contact {
    display: flex; flex-direction: column; gap: 6px;
    margin-bottom: 22px; font-size: 15px;
}
.cibor-nav__contact a {
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
    transition: color .3s ease;
}
.cibor-nav__contact a:hover { color: var(--cibor-yellow); }

/* 11. ── Мобільний / планшет ──────────────────────────────────────── */
@media (max-width: 991px) {
    .cibor-nav { width: var(--cibor-panel-w-tablet); }
    .cibor-nav__inner {
        display: block;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding: 130px 60px 50px;
    }
    .cibor-nav__primary { padding: 0; display: block; min-height: auto; }
    .cibor-nav__preview { display: none; }
}
@media (max-width: 767px) {
    .cibor-nav { width: 100vw; border-radius: 0 0 0 40px; }
    .cibor-nav__inner { padding: 100px 30px 40px; }
    .cibor-nav__close { top: 24px; right: 24px; }
}

/* 12. ── Стагер появи пунктів ─────────────────────────────────────── */
.cibor-nav .cibor-menu > li,
.cibor-nav .cibor-nav__footer > * {
    opacity: 0; transform: translateY(14px);
    transition: opacity .5s var(--cibor-ease), transform .5s var(--cibor-ease);
}
.cibor-nav.is-open .cibor-menu > li,
.cibor-nav.is-open .cibor-nav__footer > * {
    opacity: 1; transform: translateY(0);
}
.cibor-nav.is-open .cibor-menu > li:nth-child(1)  { transition-delay: .06s; }
.cibor-nav.is-open .cibor-menu > li:nth-child(2)  { transition-delay: .12s; }
.cibor-nav.is-open .cibor-menu > li:nth-child(3)  { transition-delay: .18s; }
.cibor-nav.is-open .cibor-menu > li:nth-child(4)  { transition-delay: .24s; }
.cibor-nav.is-open .cibor-menu > li:nth-child(5)  { transition-delay: .30s; }
.cibor-nav.is-open .cibor-menu > li:nth-child(6)  { transition-delay: .36s; }
.cibor-nav.is-open .cibor-menu > li:nth-child(7)  { transition-delay: .42s; }
.cibor-nav.is-open .cibor-menu > li:nth-child(8)  { transition-delay: .48s; }
.cibor-nav.is-open .cibor-menu > li:nth-child(9)  { transition-delay: .54s; }
.cibor-nav.is-open .cibor-menu > li:nth-child(10) { transition-delay: .60s; }