/* UI v6 R6b: site header (elements/site-header.php): bar, menu sheet, mobile action bar. Colours, radii and motion come from cz-site.css.
   Overlay-sticky: on a page that holds the header element CZ_UI adds body.cz-has-header, and the Bricks header wrapper #brx-header
   floats over the first screen (negative margin) so the hero starts under it. Every #brx-header rule needs that body class, and no
   transform / filter / opacity may land on #brx-header itself (they break position: sticky and the fixed children). Guarded by
   tests/frontend/cz-header-css.test.js. */

/* ---------- Overlay-sticky wrapper ---------- */
body.cz-has-header #brx-header {
    position: sticky;
    top: var(--cz-admin-bar, 0px);
    margin-bottom: calc(-1 * var(--cz-hdr-h));
    z-index: var(--cz-z-header);
}

/* anchors and the catalog offsets read the height of the sticky header. <html> carries data-cz-has-header (CZ_UI::html_attrs, the twin
   of body.cz-has-header) because html:has(body…) needs Chrome 105 / Safari 15.4 and the site supports older ones */
[data-cz-ui="6"][data-cz-has-header="1"] {
    --cz-hdr-sticky: var(--cz-hdr-h);
}

/* ---------- Header ---------- */
.cz-header {
    position: relative;
    isolation: isolate;
    color: var(--cz-text);
    font-family: var(--cz-font);
}

/* surface under the bar: invisible over the hero, a blurred pane once the page scrolled (.is-scrolled, set by cz-header.js) */
.cz-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--cz-header-bg);
    border-bottom: 1px solid var(--cz-line);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    opacity: 0;
    transition: opacity var(--cz-dur-2, 220ms) var(--cz-ease, ease);
}

.cz-header.is-scrolled::before {
    opacity: 1;
}

@media (prefers-reduced-transparency: reduce) {
    .cz-header::before {
        background: var(--cz-surface);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

.cz-header__bar {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: var(--cz-hdr-h, 60px);
}

.cz-header__logo {
    flex: none;
    display: block;
    border-radius: 8px;
}

.cz-header__logo-img {
    display: none;
    width: auto;
    height: 40px;
}

[data-brx-theme="light"] .cz-header__logo-img--light,
[data-brx-theme="dark"] .cz-header__logo-img--dark {
    display: block;
}

@media (min-width: 1024px) {
    .cz-header__logo-img {
        height: 48px;
    }
}

/* nav */
.cz-header__nav {
    display: none;
}

.cz-header__menu {
    display: flex;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cz-header__menu a {
    display: block;
    padding: 10px 9px;
    border-radius: 10px;
    color: var(--cz-text);
    font-family: var(--cz-font);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
}

.cz-header__menu a:hover,
.cz-header__menu .current-menu-item > a,
.cz-header__menu .current_page_item > a,
.cz-header__menu a[aria-current="page"] {
    text-decoration-color: var(--cz-red);
}

.cz-header__menu a:focus-visible {
    outline: 2px solid var(--cz-red-text);
    outline-offset: 2px;
}

/* phone with hours (from 1200) */
.cz-header__contact {
    display: none;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    flex: none;
    margin-left: auto;
}

.cz-header__phone {
    border-radius: 8px;
    color: var(--cz-text);
    font-family: var(--cz-display, var(--cz-font));
    font-size: 16px;
    font-weight: 600;
    line-height: 1.1;
    text-decoration: none;
}

.cz-header__hours {
    color: var(--cz-text-3);
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
}

/* the controls sit at the right end; the first one carries the auto margin when the contact block is hidden */
.cz-header .cz-header__bar .cz-header__call {
    margin-left: auto;
}

.cz-header .cz-header__bar .cz-header__tg,
.cz-header .cz-header__bar .cz-header__cta {
    display: none;
}

.cz-header .cz-header__bar > .czv-btn--icon,
.cz-header .cz-header__bar > .czv-btn--primary {
    flex: none;
}

.cz-header .cz-header__bar > .czv-btn--icon {
    background: var(--cz-surface);
    border-color: var(--cz-line);
}

.cz-header .cz-header__bar > .czv-btn--icon:hover {
    border-color: var(--cz-line-strong);
}

.cz-header .cz-header__bar > .czv-btn {
    min-height: 44px;
}

.cz-header .cz-header__bar > .cz-header__cta {
    padding: 0 20px;
    font-size: 15px;
    white-space: nowrap;
}

/* the theme toggle shows the icon of the theme it switches to */
.cz-header__sun,
.cz-header__moon {
    display: none;
}

[data-brx-theme="dark"] .cz-header__sun,
[data-brx-theme="light"] .cz-header__moon {
    display: block;
}

/* 768 to 1199: logo, call, Telegram, theme, CTA, menu button */
@media (min-width: 768px) {
    .cz-header .cz-header__bar .cz-header__tg {
        display: inline-flex;
    }

    .cz-header .cz-header__bar .cz-header__cta {
        display: inline-flex;
    }
}

/* from 1200: full nav, phone with hours, Telegram, theme, CTA */
@media (min-width: 1200px) {
    .cz-header__bar {
        gap: 12px;
    }

    .cz-header .cz-header__bar > .cz-header__cta {
        padding-inline: 14px;
        font-size: 14px;
    }

    .cz-header__nav {
        display: block;
    }

    .cz-header__contact {
        display: flex;
    }

    .cz-header .cz-header__bar .cz-header__call,
    .cz-header .cz-header__bar .cz-header__menu-btn {
        display: none;
    }

    .cz-header .cz-header__bar .cz-header__tg {
        margin-left: 0;
    }
}

/* ---------- Menu sheet ---------- */
.cz-menu {
    box-sizing: border-box;
    inset: auto 0 0 0;
    width: 100%;
    max-width: none;
    max-height: calc(100dvh - 12px - env(safe-area-inset-top, 0px));
    margin: 0;
    padding: 0 0 max(16px, env(safe-area-inset-bottom, 0px));
    border: 0;
    border-radius: var(--cz-r-card, 20px) var(--cz-r-card, 20px) 0 0;
    background: var(--cz-surface);
    color: var(--cz-text);
    box-shadow: var(--cz-shadow-2);
    overflow: hidden;
    overscroll-behavior: contain;
    transform: translateY(100%);
    transition: transform var(--cz-dur-3, 320ms) var(--cz-ease-sheet, ease);
}

.cz-menu[open] {
    display: flex;
    flex-direction: column;
}

@media (min-width: 600px) {
    .cz-menu {
        max-width: 640px;
        margin-inline: auto;
    }
}

.cz-menu.is-open:not(.is-closing) {
    transform: none;
}

.cz-menu.is-dragging {
    transition: none;
}

.cz-menu::backdrop {
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity var(--cz-dur-3, 320ms) var(--cz-ease-sheet, ease);
}

/* a drag sets --cz-sheet-progress (1 open, 0 gone) on the dialog; the backdrop follows it */
.cz-menu.is-open:not(.is-closing)::backdrop {
    opacity: var(--cz-sheet-progress, 1);
}

.cz-menu.is-dragging::backdrop {
    transition: none;
}

/* no showModal(): cz-header.js turns the dialog into a full-screen panel (own Esc and Tab handling) */
.cz-menu--panel {
    position: fixed;
    inset: 0;
    z-index: var(--cz-z-header);
    display: none;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    border-radius: 0;
    padding-top: env(safe-area-inset-top, 0px);
    overscroll-behavior: contain;
}

.cz-menu--panel.is-open,
.cz-menu--panel.is-closing {
    display: flex;
    flex-direction: column;
}

/* static preview: the builder canvas, and the harness's open-looking sheet */
.cz-menu--static {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    max-height: none;
    margin-inline: auto;
    transform: none;
    transition: none;
}

.cz-menu__grab {
    flex: none;
    display: grid;
    place-items: center;
    height: 22px;
    touch-action: none;
    cursor: grab;
}

.cz-menu__grab::before {
    content: "";
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: var(--cz-line-strong);
}

.cz-menu__head {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 12px 8px 20px;
    touch-action: none;
}

.cz-menu__title {
    font-family: var(--cz-display, var(--cz-font));
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}

.cz-menu__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 20px 8px;
    -webkit-overflow-scrolling: touch;
}

.cz-menu__nav {
    margin: 12px 0 16px;
}

.cz-menu__list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cz-menu__list a {
    display: flex;
    align-items: center;
    min-height: 54px;
    border-bottom: 1px solid var(--cz-line);
    color: var(--cz-text);
    font-family: var(--cz-font);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
}

.cz-menu__list .current-menu-item > a,
.cz-menu__list .current_page_item > a,
.cz-menu__list a[aria-current="page"] {
    color: var(--cz-red-text);
}

.cz-menu__china {
    margin-bottom: 16px;
}

.cz-menu__contacts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
}

.cz-menu__hours {
    margin: 12px 0 0;
    color: var(--cz-text-3);
    font-size: 14px;
    line-height: 1.4;
}

.cz-menu__theme {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 0;
    padding: 0;
    border: 0;
}

.cz-menu__theme legend {
    width: 100%;
    margin-bottom: 8px;
    padding: 0;
}

.cz-menu__close {
    background: transparent;
    border-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
    .cz-menu,
    .cz-menu::backdrop,
    .cz-header::before {
        transition: none;
    }
}

@media (forced-colors: active) {
    .cz-menu {
        border: 1px solid CanvasText;
    }

    .cz-menu__grab::before {
        background: CanvasText;
    }

    .cz-header::before {
        border-bottom-color: CanvasText;
    }
}

/* ---------- Mobile action bar (below 768 only) ---------- */
.cz-mobilebar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--cz-z-mobilebar);
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 8px;
    padding: 10px 12px max(10px, env(safe-area-inset-bottom, 0px));
    background: var(--cz-surface);
    border-top: 1px solid var(--cz-line);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.16);
    transform: translateY(110%);
    transition: transform var(--cz-dur-2, 220ms) var(--cz-ease, ease);
}

.cz-mobilebar.is-visible {
    transform: none;
}

.cz-mobilebar[hidden] {
    display: none;
}

.cz-mobilebar .czv-btn {
    min-height: 48px;
}

.cz-mobilebar .czv-btn--icon {
    min-width: 48px;
}

/* «Связаться с менеджером» on one line: about 205px of text at 16px, the button is 224px wide at 360 */
.cz-mobilebar .cz-mobilebar__cta {
    padding-inline: 12px;
    white-space: nowrap;
}

@media (max-width: 359px) {
    .cz-mobilebar .cz-mobilebar__cta {
        padding-inline: 8px;
        font-size: 14px;
    }
}

@media (min-width: 768px) {
    .cz-mobilebar {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cz-mobilebar {
        transition: none;
    }
}

@media (forced-colors: active) {
    .cz-mobilebar {
        border-top-color: CanvasText;
    }
}

/* the row (1152px of content at 1200) is too full for the hours line when the label texts are longer than the defaults;
   the line stays in the menu sheet and the footer */
@media (min-width: 1200px) and (max-width: 1279px) {
    .cz-header .cz-header__hours {
        display: none;
    }
}

/* UI v6 R8: the app pages' first block clears the overlay header. The catalog (page 2054), the car page (2071) and «Авто в
   наличии» (2155) were built for the old absolute header: Bricks gives their element a top margin as an id rule in
   post-<id>.min.css (#brxe-hoenku and #brxe-czstkc 160 px, 100 px below 992; #brxe-zpwidx 200 px, 100 px below 992), which
   leaves 88-128 px of empty page under this header. Here the element starts 24 px below the header (32 px from 1024): its
   margin is the header height (the overlay's negative margin takes it back) plus that gap. Keyed by the elements' Bricks
   classes, not by the ids, so a rebuilt page keeps it; #brx-content > .cz-car is the car page without a car (the element
   prints its notice with no wrapper). Gated: nothing applies without data-cz-ui="6" and the header element's body class. */
[data-cz-ui="6"] body.cz-has-header .brxe-car-catalog,
[data-cz-ui="6"] body.cz-has-header .brxe-car-detail,
[data-cz-ui="6"] body.cz-has-header .brxe-stock-catalog,
[data-cz-ui="6"] body.cz-has-header #brx-content > .cz-car {
    margin-top: calc(var(--cz-hdr-h, 60px) + 24px) !important; /* !important: beats the id rules of post-<id>.min.css */
}

@media (min-width: 1024px) {
    [data-cz-ui="6"] body.cz-has-header .brxe-car-catalog,
    [data-cz-ui="6"] body.cz-has-header .brxe-car-detail,
    [data-cz-ui="6"] body.cz-has-header .brxe-stock-catalog,
    [data-cz-ui="6"] body.cz-has-header #brx-content > .cz-car {
        margin-top: calc(var(--cz-hdr-h, 72px) + 32px) !important; /* !important: beats the id rules of post-<id>.min.css */
    }
}

/* the catalog below 1024: the header is in the flow there (car-catalog.css, body.cz-catalog-page), so only the gap */
@media (max-width: 1023.98px) {
    [data-cz-ui="6"] body.cz-has-header.cz-catalog-page .brxe-car-catalog {
        margin-top: 24px !important; /* !important: beats the id rule of post-2054.min.css */
    }
}