/* =========================================================================
   0not1 — новая шапка сайта (разметка — inc/_head_rd.php).
   Подключается на ВСЕХ страницах, в header.php после ShowHead(),
   чтобы перебивать main.css. Стили главной — отдельно, в redesign.css.
   ========================================================================= */

:root {
    --rd-black: #020a0a;
    --rd-line: #d7dada;
}

/* прежняя шапка больше не выводится; правило оставлено на случай,
   если её разметка где-то подключается отдельно */
.main-header {
    display: none;
}

/* main.css компенсирует высоту прежней фиксированной шапки отступом у body
   (в мобилке и на части страниц через body:has(...)). Новая шапка в потоке,
   поэтому отступ убираем. html:not(.rd-x) — для веса: перебить body:has() */
html:not(.rd-x) body {
    padding-top: 0;
}

/* прежняя шапка отделялась от содержимого отступом 30px (в мобилке 24px) —
   сохраняем его, чтобы заголовки страниц не прилипали к шапке.
   На главной отступ снят в redesign.css */
.rd-header {
    margin-bottom: 30px;
}

@media (max-width: 992px) {
    .rd-header {
        margin-bottom: 24px;
    }
}

.rd-header__logo img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

.rd-header {
    position: relative;
    z-index: 30;
    background: #fff;
    border-bottom: 1px solid transparent;
}

/* макет (1920): шапка 119px, поля 64px, логотип 76px, меню через 59px
   от логотипа, пункты вплотную 55px высотой с полями 30px, Helvetica 16px,
   подложка активного пункта #DDE4E4; иконки справа через 35px */
.rd-header__inner {
    display: flex;
    align-items: center;
    gap: clamp(16px, 3.07vw, 59px);
    min-height: clamp(64px, 6.2vw, 119px);
    padding: 0 clamp(16px, 3.33vw, 64px);
}

.rd-header__logo {
    flex-shrink: 0;
    display: block;
    width: clamp(46px, 3.96vw, 76px);
}

.rd-nav {
    display: flex;
    align-items: center;
    gap: 0;
    margin-right: auto;
}

.rd-nav__item {
    position: relative;
    display: flex;
}

.rd-nav__link {
    display: inline-flex;
    align-items: center;
    min-height: clamp(40px, 2.86vw, 55px);
    gap: clamp(10px, 1.2vw, 22px);
    padding: 0 clamp(14px, 1.56vw, 30px);
    color: var(--rd-black);
    font-size: clamp(11px, .83vw, 16px);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s linear;
}

.rd-nav__link:hover,
.rd-nav__item.is-open .rd-nav__link {
    background: #dde4e4;
}

/* в макете шевron смотрит вправо и при раскрытии не поворачивается */
.rd-nav__arrow {
    width: 8px;
    height: 8px;
}

.rd-nav__drop {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 100%;
    padding: 0;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .2s linear, transform .2s linear, visibility .2s linear;
}

.rd-nav__item.is-open .rd-nav__drop {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.rd-nav__drop a {
    display: block;
    /* в макете строка подменю высотой 62px с теми же боковыми отступами,
       что и у пункта первого уровня */
    padding: clamp(11px, 1.15vw, 22px) clamp(14px, 1.56vw, 30px);
    color: var(--rd-black);
    /* в макете строка подменю набрана тем же гротеском, что и меню,
       кеглем 13.5 с разрядкой .07em */
    font-family: inherit;
    font-weight: 400;
    font-size: clamp(11px, .71vw, 13.5px);
    letter-spacing: .07em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}

.rd-nav__drop a:hover {
    text-decoration: underline;
}

.rd-header__tools {
    display: flex;
    align-items: center;
    gap: clamp(16px, 1.82vw, 35px);
}

/* иконки берут размеры из main.css (69x69 с серой подложкой) —
   в редизайне это просто контурные иконки 24px без фона */
.rd-header .rd-header__tools > a,
.rd-header .rd-header__tools > button,
.rd-header .rd-header__tools > .button-search,
.rd-header .rd-header__tools > .link-login,
.rd-header .rd-header__tools > .link-favourites {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: var(--rd-black);
    cursor: pointer;
}

/* счётчик избранного: маленький бейдж в углу иконки */
.rd-header .rd-header__tools > .link-favourites {
    position: relative;
}

.rd-header .rd-header__tools .link-favourites__count {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 15px;
    padding: 0 3px;
    border-radius: 8px;
    background: var(--rd-black);
    color: #fff;
    font-size: 10px;
    line-height: 15px;
    text-align: center;
}

.rd-header .rd-header__tools > a > svg,
.rd-header .rd-header__tools > button > svg {
    width: 24px;
    height: 24px;
}


/* это <button>: без сброса браузер рисует ему серую заливку и объёмную рамку */
.rd-burger {
    display: none;
    width: 30px;
    height: 20px;
    position: relative;
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    cursor: pointer;
}

/* макет: три линии толщиной 1px */
.rd-burger i {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--rd-black);
}

.rd-burger i:nth-child(1) { top: 0; }
.rd-burger i:nth-child(2) { top: 9px; }
.rd-burger i:nth-child(3) { top: 18px; }

@media (max-width: 1023px) {
    .rd-header__inner {
        min-height: 64px;
        justify-content: space-between;
    }

    .rd-nav,
    .rd-header__tools {
        display: none;
    }

    .rd-burger {
        display: block;
    }
}

/* мобильный макет (320): шапка 71, логотип 40, бургер 34x16,
   поля 15 — держим те же пропорции */
@media (max-width: 767px) {
    .rd-header__inner {
        min-height: clamp(64px, 22.2vw, 90px);
        gap: 16px;
        padding: 0 clamp(15px, 4.7vw, 20px);
    }

    .rd-header__logo {
        width: clamp(38px, 12.5vw, 50px);
    }

    .rd-burger {
        width: clamp(30px, 10.6vw, 40px);
        height: clamp(14px, 5vw, 19px);
    }

    .rd-burger i:nth-child(2) {
        top: 50%;
        margin-top: -.5px;
    }

    .rd-burger i:nth-child(3) {
        top: auto;
        bottom: 0;
    }
}

/* мобильное меню */
.rd-mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 24px;
    background: #fff;
    transform: translateX(100%);
    transition: transform .3s var(--transition);
    overflow-y: auto;
}

.rd-mobile-menu.is-open {
    transform: none;
}

.rd-mobile-menu__close {
    align-self: flex-end;
    width: 34px;
    height: 34px;
    background: none;
    border: 0;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.rd-mobile-menu a {
    padding: 14px 0;
    border-bottom: 1px solid var(--rd-line);
    color: var(--rd-black);
    font-family: var(--font-title);
    font-size: 16px;
    text-transform: uppercase;
    text-decoration: none;
}