/* ===== Жаңа header-ге сай сол жақ сайдбар (template-parts/site-sidebar-new.php), 2-нұсқа (2026-10-08) =====
   Тек ≥1200px.
   .nsb__rail  — тұрақты тік жолақ 56px (әрдайым тұрады, ашылғанда да).
   .nsb__panel — 300px панель жолақтың оң жағынан жылжып шығады (.nsb.is-open), беттің үстінен; артта — күңгірт қабат.
   Жоғарғы бөлігі header-дің қара жолағы мен ақ жолағына тең (--nsb-util, --nsb-main — header-new.js).
   Бұрынғы нұсқа (68px жолақ бүтіндей кеңейетін): _backups/2026-10-08-sidebar-v2-before/ */

.nsb, .nsb-backdrop { display: none; }

@media (max-width: 600px) {
    #wpadminbar { position: fixed !important; }
}

@media (min-width: 1200px) {
    :root {
        --sb-w: 56px;
        --sb-panel: 300px;
        --sb-ease-out: cubic-bezier(.22, .61, .36, 1);
        --sb-ease-in: cubic-bezier(.4, 0, 1, 1);
    }
    /* Мазмұн мен header ортада қалады; сол жақ бос орын жолақтан тар болса ғана оңға ығысады */
    html body { padding-left: clamp(0px, calc(var(--sb-w) * 2 + 1230px - 100%), var(--sb-w)); }

    .nsb {
        --navy: #0A1628; --blue: #0052A5; --ink: #0A1628; --muted: #5a6a80;
        --line: #e3ebf6; --soft: #F5F9FF; --chip: #EEF5FF;
        display: block;
        font-family: Merriweather, Georgia, "Times New Roman", serif; line-height: 1.4; color: var(--ink); text-align: left;
    }
    .nsb * { box-sizing: border-box; }
    .nsb a { color: inherit; text-decoration: none; transition: none; }
    .nsb a:hover { opacity: 1; text-decoration: none; }
    .nsb a:focus-visible, .nsb summary:focus-visible, .nsb button:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }

    /* Жоғарғы бөлік: header-дің қара (util) және ақ (негізгі) жолақтарымен бір деңгейде */
    .nsb__head { flex-shrink: 0; }
    .nsb__util { height: var(--nsb-util, 34px); background: var(--navy); }
    .nsb__main { height: var(--nsb-main, 73px); border-bottom: 1px solid var(--line); display: flex; align-items: center; overflow: hidden; }

    /* ---------- Тұрақты жолақ ---------- */
    .nsb__rail {
        position: fixed; left: 0; top: var(--wp-admin--admin-bar--height, 0px); bottom: 0; z-index: 1041;
        width: var(--sb-w); display: flex; flex-direction: column; background: #fff;
        box-shadow: inset -1px 0 0 var(--line);
    }
    .nsb__rail .nsb__main { justify-content: center; }
    .nsb__toggle { width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--blue); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
    .nsb__toggle:hover { border-color: var(--blue); color: var(--blue); }
    .nsb__toggle svg { width: 18px; height: 18px; }
    .nsb__toggle .i-close, .nsb.is-open .nsb__toggle .i-menu { display: none; }
    .nsb.is-open .nsb__toggle .i-close { display: block; }
    .nsb.is-open .nsb__toggle { background: var(--blue); border-color: var(--blue); color: #fff; }

    .nsb__rbody { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0; transition: padding-bottom .35s ease; }
    /* «Жоғары» батырмасы шыққанда — әлеуметтік желілер оның үстіне көтеріледі */
    html.nh-totop .nsb__rbody { padding-bottom: 72px; }
    .nsb__rbtn { position: relative; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 9px; background: var(--chip); color: var(--blue); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, color .15s; }
    .nsb__rbtn svg { width: 17px; height: 17px; }
    .nsb__rbtn:hover, .nsb__rbtn.is-active, .nsb__rbtn[aria-expanded="true"] { background: var(--blue); color: #fff; }
    /* Жылдам сілтемелер — <a>: «.nsb a { color: inherit }» басып кетпесін */
    .nsb a.nsb__rbtn { color: var(--blue); }
    .nsb a.nsb__rbtn:hover, .nsb a.nsb__rbtn.is-active { color: #fff; }
    .nsb__rbtn--search { background: #fff; color: var(--blue); box-shadow: inset 0 0 0 1px var(--line); }
    .nsb__rbtn--search:hover { box-shadow: none; }
    .nsb__social { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); width: 32px; }
    .nsb a.nsb__soc { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: var(--chip); color: var(--blue); transition: background .15s, color .15s; }
    .nsb__soc svg { width: 15px; height: 15px; }
    .nsb a.nsb__soc:hover { background: var(--blue); color: #fff; }

    /* Тіл: жолақтың жанынан шағын тізім */
    .nsb__lang { position: relative; }
    .nsb__langpop { position: absolute; left: calc(100% + 14px); top: 50%; transform: translateY(-50%); z-index: 2; min-width: 170px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 16px 36px rgba(10,22,40,.18); }
    .nsb__langpop[hidden] { display: none; }
    .nsb__langpop::before { content: ""; position: absolute; left: -6px; top: 50%; width: 10px; height: 10px; margin-top: -5px; background: #fff; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: rotate(45deg); }
    .nsb__langpop a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; color: var(--ink); }
    .nsb__langpop a b { min-width: 30px; font-size: 12px; color: var(--muted); }
    .nsb__langpop a:hover { background: var(--soft); color: var(--blue); }
    .nsb__langpop a.on { background: var(--chip); color: var(--blue); }
    .nsb__langpop a.on b { color: var(--blue); }

    /* ---------- Ашылатын панель ---------- */
    .nsb__panel {
        position: fixed; left: var(--sb-w); top: var(--wp-admin--admin-bar--height, 0px); bottom: 0; z-index: 1040;
        width: var(--sb-panel); display: flex; flex-direction: column; background: #fff;
        box-shadow: 18px 0 40px -12px rgba(10,22,40,.22);
        transform: translateX(calc(-100% - var(--sb-w))); visibility: hidden;
        transition: transform .2s var(--sb-ease-in), visibility 0s .2s;
    }
    .nsb.is-open .nsb__panel { transform: none; visibility: visible; transition: transform .28s var(--sb-ease-out), visibility 0s; }
    .nsb__brand { display: flex; align-items: center; gap: 10px; padding: 0 18px; min-width: 0; }
    .nsb__brand img { flex: 0 0 30px; width: 30px; height: 30px; object-fit: contain; }
    .nsb__brand span { font-size: 12.5px; font-weight: 700; letter-spacing: .05em; color: var(--blue); line-height: 1.3; }

    .nsb__scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 0 18px; scrollbar-width: thin; }
    .nsb__label { margin: 14px 18px 4px; font: 700 10.5px/1.6 system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #7a8898; }
    .nsb__menu, .nsb__list { display: flex; flex-direction: column; gap: 2px; }
    .nsb__list { margin-top: 10px; padding-top: 4px; border-top: 1px solid var(--line); }

    .nsb__row {
        display: flex; align-items: center; gap: 12px; width: calc(100% - 16px); margin: 0 8px;
        padding: 5px 10px; min-height: 40px; border: 0; border-radius: 10px; background: none;
        font: 700 14px/1.3 Merriweather, Georgia, serif; color: var(--ink); text-align: left;
        cursor: pointer; list-style: none; transition: background .15s, color .15s;
    }
    .nsb__row::-webkit-details-marker { display: none; }
    .nsb__row:hover { background: var(--soft); color: var(--blue); }
    .nsb__row.is-active, .nsb__sec[open] > .nsb__row { color: var(--blue); background: var(--soft); }
    .nsb__row--text { padding: 8px 10px; font-size: 14.5px; }
    .nsb__ico { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 8px; background: var(--chip); color: var(--blue); display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; }
    .nsb__ico svg { width: 16px; height: 16px; }
    .nsb__row:hover .nsb__ico, .nsb__row.is-active .nsb__ico { background: var(--blue); color: #fff; }
    .nsb__txt { flex: 1; min-width: 0; }
    .nsb__chev { width: 16px; height: 16px; flex-shrink: 0; color: #9aa8b8; transition: transform .2s; }
    .nsb__sec[open] > .nsb__row .nsb__chev { transform: rotate(90deg); color: var(--blue); }

    /* Ашылған бөлім: header мегамәзіріндегідей топтар */
    .nsb__body { margin: 2px 8px 8px 16px; padding: 2px 0 4px 8px; border-left: 2px solid var(--line); }
    .nsb__grp { padding: 6px 0 4px; }
    .nsb__grp + .nsb__grp { margin-top: 4px; border-top: 1px dashed var(--line); padding-top: 10px; }
    .nsb__gh { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; padding: 4px 6px; font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--ink); }
    .nsb__gi { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 7px; background: var(--chip); color: var(--blue); display: flex; align-items: center; justify-content: center; }
    .nsb__gi svg { width: 14px; height: 14px; }
    .nsb__gh a:hover { color: var(--blue); }
    .nsb__a { display: block; padding: 6px 8px 6px 38px; border-radius: 8px; font-size: 13.5px; line-height: 1.4; color: #334155; transition: background .15s, color .15s; }
    a.nsb__a:hover { background: var(--soft); color: var(--blue); }
    .nsb__a.is-current, .nsb__gh a.is-current { color: var(--blue); font-weight: 700; background: var(--soft); }

    /* «Қабылдау» карточкасы (2-нұсқа, 2026-10-12): ақшыл карточка, жоғарғы шетінде алтын жолақ, тұтас көк негізгі батырма,
       байланыстар — иконкалы жолдар, әлеуметтік желілер — төменгі жолда */
    .nsb-adm { position: relative; margin: 18px 12px 6px; padding: 18px 16px 14px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, #F5F9FF 0%, #fff 60%); overflow: hidden; }
    .nsb-adm::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, #f5c46b 0%, #e0a526 100%); }
    .nsb-adm__top { display: flex; align-items: center; gap: 12px; }
    .nsb-adm__badge { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 12px; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 16px -8px rgba(0, 82, 165, .7); }
    .nsb-adm__badge svg { width: 22px; height: 22px; }
    .nsb-adm__kicker { display: inline-flex; align-items: center; gap: 6px; font: 700 10.5px/1 system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
    .nsb-adm__kicker i { font-style: normal; padding: 3px 6px; border-radius: 4px; background: linear-gradient(135deg, #f5c46b 0%, #e0a526 100%); color: #3b2600; letter-spacing: .02em; }
    .nsb-adm__top b { display: block; margin-top: 4px; font-size: 15px; line-height: 1.25; color: var(--ink); }
    .nsb-adm__sub { margin: 10px 0 12px !important; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
    .nsb .nsb-adm__main { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 14px; border-radius: 11px; background: var(--blue); color: #fff; font-size: 13.5px; font-weight: 700; transition: background .15s, transform .15s; }
    .nsb .nsb-adm__main:hover { background: #003b78; color: #fff; transform: translateY(-1px); }
    .nsb-adm__main svg { flex: none; width: 16px; height: 16px; transition: transform .15s; }
    .nsb-adm__main:hover svg { transform: translateX(3px); }
    .nsb-adm__contacts { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
    .nsb .nsb-adm__c { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; color: var(--ink); transition: background .15s; }
    .nsb .nsb-adm__c:hover { background: var(--soft); color: var(--blue); }
    .nsb-adm__ci { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 9px; background: var(--chip); color: var(--blue); display: flex; align-items: center; justify-content: center; }
    .nsb-adm__ci svg { width: 16px; height: 16px; }
    .nsb-adm__c--wa .nsb-adm__ci { background: #E7F8EE; color: #128C4B; }
    .nsb-adm__c b { display: block; font-size: 13px; line-height: 1.3; }
    .nsb-adm__c small { display: block; font-size: 11.5px; line-height: 1.3; color: var(--muted); }
    .nsb-adm__social { margin-top: 10px; padding-top: 12px; border-top: 1px dashed var(--line); }
    .nsb-adm__social > span { display: block; margin-bottom: 8px; font: 700 10.5px/1.4 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #7a8898; }
    .nsb-adm__social > div { display: flex; gap: 8px; }
    .nsb .nsb-adm__social a { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--chip); color: var(--blue); transition: background .15s, color .15s; }
    .nsb .nsb-adm__social a:hover { background: var(--blue); color: #fff; }
    .nsb-adm__social svg { width: 16px; height: 16px; }

    .nsb-backdrop {
        display: block; position: fixed; inset: 0; z-index: 1039;
        background: rgba(10, 22, 40, .16); opacity: 0; pointer-events: none;
        transition: opacity .2s var(--sb-ease-in);
    }
    .nsb.is-open + .nsb-backdrop { opacity: 1; transition: opacity .28s var(--sb-ease-out); }

    /* «Жоғары» батырмасы — жолақтың төменгі ортасында (жолақтан тар болуы үшін 44px) */
    .to-top {
        left: calc((var(--sb-w) - 44px) / 2) !important;
        bottom: 14px !important;
        width: 44px !important; height: 44px !important;
        z-index: 1042 !important;
        box-shadow: 0 4px 12px -6px rgba(16, 46, 90, .4) !important;
    }

    /* Бөлім топтары тегіс ашылады (Chrome/Edge 131+) */
    @supports (interpolate-size: allow-keywords) {
        .nsb { interpolate-size: allow-keywords; }
        .nsb__sec::details-content { block-size: 0; overflow: hidden; transition: block-size .24s var(--sb-ease-out), content-visibility .24s allow-discrete; }
        .nsb__sec[open]::details-content { block-size: auto; }
    }
}

@media (prefers-reduced-motion: reduce) {
    .nsb__panel, .nsb-backdrop, .nsb__rbody, .nsb__sec::details-content { transition: none !important; }
}


/* «Сол жақ сайдбар мәзірі» (wkau_nsb_sections, 2026-10-28): тақырыпсыз топтағы сілтемелер — иконка орнына шегініс керек емес */
.nsb__grp:not(:has(.nsb__gh)) > .nsb__a { padding-left: 14px; }