/* ============================================================
   Окупаем — база: сброс, фон, шапка, полоса прогресса.
   Без единого «важно»-костыля. Мобильный от 320px.
   ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote {
    margin: 0;
}

a {
    color: var(--fg);
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    font-family: inherit;
}

:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms;
        transition-duration: .01ms;
    }

    html {
        scroll-behavior: auto;
    }
}

/* ── Шапка: логотип и иконки лежат на фоне, без панели и линии.
      На статье под шапкой линия + полоса прогресса (см. article.css) ── */
.okp-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg);
    transition: transform .3s ease;
    will-change: transform;
}

.okp-header.is-hidden {
    transform: translateY(-100%);
}

.okp-header-inner {
    max-width: var(--w-page);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 12px 12px 20px;
}

.okp-logo {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 28px;
    letter-spacing: -.01em;
    color: var(--fg);
}

.okp-header-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

.okp-iconbtn {
    width: var(--tap-min);
    height: var(--tap-min);
    border: none;
    background: transparent;
    color: var(--fg);
    display: grid;
    place-items: center;
    border-radius: 9px;
    cursor: pointer;
}

.okp-iconbtn:hover {
    background: var(--chrome);
}

.okp-iconbtn svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* Кнопка «Инструменты» — единственная рамка в шапке */
.okp-tools-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--green);
    border-radius: 9px;
    color: var(--green);
    font-family: var(--font-text);
    font-weight: 600;
    font-size: 13.5px;
}

.okp-tools-btn:hover {
    background: var(--green-soft);
    color: var(--green);
}

.okp-tools-btn svg {
    width: 14px;
    height: 14px;
}

/* Меню: на мобильном — строка под шапкой, на десктопе — в шапке */
.okp-header-inner {
    flex-wrap: wrap;
}

.okp-nav {
    order: 3;
    flex-basis: 100%;
    display: flex;
    align-items: center;
    gap: 18px;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -12px 0 -20px;
    padding: 0 20px;
    border-bottom: 1px solid var(--line);
}

.okp-nav::-webkit-scrollbar {
    display: none;
}

.okp-nav a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    font-family: var(--font-text);
    font-weight: 500;
    font-size: 14px;
    color: var(--muted);
}

.okp-nav a:hover {
    color: var(--fg);
}

.okp-nav a.is-active {
    font-weight: 600;
    color: var(--fg);
}

@media (min-width: 1000px) {
    .okp-header {
        border-bottom: 1px solid var(--line);
    }

    .okp-header-inner {
        flex-wrap: nowrap;
        padding: 14px 32px;
        gap: 26px;
    }

    .okp-logo {
        font-size: 37px;
    }

    .okp-nav {
        order: 0;
        flex: 1;
        flex-basis: auto;
        justify-content: center;
        gap: 26px;
        margin: 0;
        padding: 0;
        border-bottom: none;
        overflow: visible;
    }

    .okp-nav a {
        font-size: 15px;
        min-height: 0;
        padding: 4px 0;
    }

    .okp-burger {
        display: none;
    }
}

/* Полоса прогресса чтения — тонкая, зелёная, под шапкой */
.okp-progress {
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 2px;
    background: var(--green);
    width: 0;
    transition: width .1s linear;
}

/* Скрыть визуально, оставить для скринридера */
.okp-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Иконка тумблера: луна в светлой, солнце в тёмной.
   Специфичность выше, чем у ".okp-iconbtn svg { display:block }" */
.okp-iconbtn .okp-ic-theme-dark,
.okp-iconbtn.okp-theme-toggle .okp-ic-theme-dark {
    display: none;
}

[data-theme="dark"] .okp-iconbtn .okp-ic-theme-dark {
    display: block;
}

[data-theme="dark"] .okp-iconbtn .okp-ic-theme-light {
    display: none;
}

/* На статье в узкой шапке — только тумблер и бургер, как в макете */
@media (max-width: 719px) {
    .post-template .okp-tools-btn,
    .post-template .okp-search-btn {
        display: none;
    }
}