/* ==========================================================
   HEADER (Pavel-Avto) — ФИНАЛ (фиксированная шапка)
   Скоуп: header.top-header и header.top-header + .offcanvas
   Требуется: Bootstrap 5.3 bundle.js
   Палитра: --paper-100/200/300, --terracotta, --ink, --ink-60
   ========================================================== */

/* Базовый фон для шапки и футера */
.top-header, footer{ background: var(--paper-100); }

/* Высота шапки + оффсеты якорей */
:root{ --header-h: 80px; }                /* старт, JS обновит точно */
body{ padding-top: var(--header-h); }
section[id]{ scroll-margin-top: calc(var(--header-h) + 8px); }

/* ---------- Корневой блок шапки (fixed) ---------- */
header.top-header{
  position: fixed; top: 0; left: 0; right: 0; z-index: 1030;
  background: var(--paper-100);
  border-bottom: 1px solid rgba(31,30,22,.08);
  backdrop-filter: saturate(120%) blur(6px);
  transition: background-color .25s, box-shadow .25s, backdrop-filter .25s;
}
header.top-header.is-scrolled{
  background: rgba(230,199,143,.90);
  box-shadow: 0 2px 8px rgba(31,30,22,.10);
}

/* Глушим любые механизмы автоскрытия */
header.top-header.is-hidden{ transform: none !important; }
@media (max-width: 991.98px){
  header.top-header.mobile-bar-hidden .mobile-bar{ transform: none !important; }
}

/* ---------- Десктопные элементы ---------- */
header.top-header .phone-link{ font-size:1.4rem; color:var(--ink); text-decoration:underline; }
header.top-header .subnav{ position:static; background:transparent; border-top:1px solid rgba(31,30,22,.08); }
header.top-header .subnav .nav{ gap:.75rem; }
header.top-header .nav-link{ color:var(--ink-60)!important; }
header.top-header .nav-link:hover,
header.top-header .nav-link.active{ color:var(--terracotta)!important; }
header.top-header .nav-link.active{ font-weight:700; }

/* Логотип CHINA/RUSSIA */
header.top-header .logo-cr{ width:140px; height:auto; display:block; }
header.top-header .logo-text{ font:700 24px/1 Arial, sans-serif; }
header.top-header .logo-china{  fill:var(--terracotta); }
header.top-header .logo-russia{ fill:var(--ink); }
header.top-header .logo-divider{ fill:var(--paper-300); }

/* Соц.кнопки (десктоп) */
header.top-header .header-social{ --soc-size:52px; --soc-icon:1.9rem; display:inline-flex; align-items:center; gap:10px; }
header.top-header .header-social .soc-link{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:var(--soc-size); min-height:var(--soc-size);
  padding:4px 6px; color:var(--ink); text-decoration:none; border-radius:10px;
  transition: color .15s, transform .12s, text-shadow .15s;
}
header.top-header .header-social .soc-link i{ font-size:var(--soc-icon); line-height:1; }
header.top-header .header-social .soc-link:hover{ transform:translateY(-1px); text-shadow:0 2px 6px rgba(31,30,22,.15); }
header.top-header .header-social .soc-link.tg:hover{ color:#2AABEE; }
header.top-header .header-social .soc-link.wa:hover{ color:#25D366; }
header.top-header .header-social .soc-link:focus-visible{ outline:2px solid var(--terracotta); outline-offset:2px; }

@media (max-width:575.98px){
  header.top-header .header-social{ --soc-size:44px; --soc-icon:1.6rem; gap:8px; }
}

/* ===================== Мобильная планка (лого + бургер) ===================== */
:root{ --screen-max: 412px; } /* ширина мобильной карточки */

@media (max-width: 991.98px){
  html, body{ overflow-x: hidden; }
  :root{ --bs-scrollbar-width: 0px !important; } /* фикс лишнего padding-right от BS */

  header.top-header .mobile-bar{
    position: sticky; top: 0; z-index: 1040;
    border-bottom: 1px solid rgba(31,30,22,.08);
    background: transparent;
  }
  header.top-header .mobile-bar > .container{
    max-width: var(--screen-max);
    margin-inline: auto;
    background: rgba(230,199,143,.96);
    border: 1px solid rgba(31,30,22,.08);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(31,30,22,.10);
    padding: 8px 12px;
  }

  /* Бургер */
  header.top-header .burger-btn{
    position:relative; z-index:1050;
    width:44px; height:44px; margin-right:6px;
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--paper-200);
    border:1px solid rgba(31,30,22,.16);
    border-radius:12px;
    box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 2px 6px rgba(31,30,22,.10);
    cursor:pointer; padding:0;
    transition: transform .12s, background-color .15s, border-color .15s;
  }
  header.top-header .burger-btn:active{ transform:scale(.98); }
  header.top-header .burger-btn *,
  header.top-header .burger-btn::before,
  header.top-header .burger-btn::after{
    background:none!important; background-image:none!important;
    -webkit-mask:none!important; mask:none!important; border-image:none!important;
    box-shadow:none!important; text-decoration:none!important;
  }
  header.top-header .burger-ico{ width:22px; height:22px; display:block; }
  header.top-header .burger-ico rect{
    fill:var(--ink); rx:1; transform-box:fill-box; transform-origin:center;
    transition: transform .18s ease, opacity .18s ease;
  }
  body.offcanvas-open header.top-header .burger-ico rect:nth-child(1){ transform: translateY(5px) rotate(45deg); }
  body.offcanvas-open header.top-header .burger-ico rect:nth-child(2){ opacity: 0; }
  body.offcanvas-open header.top-header .burger-ico rect:nth-child(3){ transform: translateY(-5px) rotate(-45deg); }
}

/* ===================== OFFCANVAS (моб. меню) ===================== */
.offcanvas{ z-index:1060; }
.offcanvas-backdrop{ z-index:1055; }

header.top-header + .offcanvas{
  width:min(92vw,380px);
  background:var(--paper-100);
  border-left:1px solid rgba(31,30,22,.10);
  box-shadow:-10px 0 30px rgba(31,30,22,.18);
  color:var(--ink);
}
header.top-header + .offcanvas .offcanvas-header{
  background:linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,0));
  border-bottom:1px solid rgba(31,30,22,.08);
}
header.top-header + .offcanvas .offcanvas-title{ font-weight:800; color: var(--ink); }

/* Ссылки меню в offcanvas */
header.top-header + .offcanvas .nav .nav-link{
  color:var(--ink); padding:.55rem 0; border-radius:8px;
  transition: color .15s, background-color .15s;
}
header.top-header + .offcanvas .nav .nav-link:hover{
  color:var(--terracotta); background:rgba(198,90,46,.08);
}
header.top-header + .offcanvas .nav .nav-link:active{ background:rgba(198,90,46,.14); }

/* Кнопки в offcanvas */
header.top-header + .offcanvas .offcanvas-body{ --radius:14px; --pad-y:12px; }
header.top-header + .offcanvas .btn{
  border-radius:var(--radius); font-weight:600; line-height:1.1;
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px; padding-block:var(--pad-y);
  transition: transform .08s, background-color .15s, border-color .15s, box-shadow .15s, color .15s;
}
header.top-header + .offcanvas .btn i{ font-size:1.05rem; }

header.top-header + .offcanvas .call-btn{
  background: color-mix(in oklab, var(--paper-100), white 12%);
  border:1px solid rgba(31,30,22,.18);
  color:var(--ink);
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset, 0 6px 12px rgba(31,30,22,.08);
}
header.top-header + .offcanvas .call-btn:hover{
  background: color-mix(in oklab, var(--paper-100), white 18%);
  border-color:rgba(31,30,22,.24);
  box-shadow:0 1px 0 rgba(255,255,255,.65) inset, 0 10px 18px rgba(31,30,22,.10);
}
header.top-header + .offcanvas .call-btn:active{ transform: translateY(1px); }

header.top-header + .offcanvas .cta-primary,
header.top-header + .offcanvas .btn-danger{
  color:#fff;
  background:linear-gradient(180deg, color-mix(in oklab, var(--terracotta), white 6%), var(--terracotta));
  border:1px solid color-mix(in oklab, var(--terracotta), black 12%);
  box-shadow:0 8px 18px rgba(198,90,46,.28), 0 -1px 0 rgba(255,255,255,.40) inset;
}
header.top-header + .offcanvas .cta-primary:hover,
header.top-header + .offcanvas .btn-danger:hover{
  background:linear-gradient(180deg, color-mix(in oklab, var(--terracotta), white 2%), color-mix(in oklab, var(--terracotta), black 6%));
  box-shadow:0 12px 24px rgba(198,90,46,.32), 0 -1px 0 rgba(255,255,255,.45) inset;
}
header.top-header + .offcanvas .cta-primary:active,
header.top-header + .offcanvas .btn-danger:active{
  transform:translateY(1px);
  box-shadow:0 6px 12px rgba(198,90,46,.20) inset, 0 4px 10px rgba(0,0,0,.12);
}

header.top-header + .offcanvas .soc-btn{
  background: color-mix(in oklab, var(--paper-100), white 8%);
  border:1px solid rgba(31,30,22,.18);
  color: color-mix(in oklab, var(--ink), black 6%);
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset;
}
header.top-header + .offcanvas .soc-btn:hover{
  border-color:rgba(31,30,22,.26);
  background: color-mix(in oklab, var(--paper-100), white 14%);
}
header.top-header + .offcanvas .soc-btn.tg:hover{
  color:#2AABEE; border-color:rgba(42,171,238,.45); background:rgba(42,171,238,.10);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 6px 12px rgba(42,171,238,.12);
}
header.top-header + .offcanvas .soc-btn.wa:hover{
  color:#25D366; border-color:rgba(37,211,102,.45); background:rgba(37,211,102,.12);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 6px 12px rgba(37,211,102,.12);
}
header.top-header + .offcanvas .soc-btn:active{ transform: translateY(1px); }

header.top-header + .offcanvas .btn:focus-visible{ outline:2px solid var(--terracotta); outline-offset:2px; }
header.top-header + .offcanvas .offcanvas-body > .btn + .btn{ margin-top:.6rem; }
header.top-header + .offcanvas .offcanvas-body .d-flex.gap-2 .btn{ min-width:0; }

@media (max-width: 991.98px){
  :root{ --screen-max: calc(100dvw - 4px); }
}

/* ===================== Навигация (единый набор правил) ===================== */
header.top-header{
  --bs-link-color: var(--ink-60);
  --bs-link-hover-color: var(--ink-60);
  --bs-link-color-rgb: 59,57,45;
  --bs-link-hover-color-rgb: 59,57,45;
}

/* базовая линия выключена у всех, кроме .active (см. ::after ниже) */
header.top-header .nav-underline{ --bs-nav-underline-border-width: 0; }
header.top-header .nav-underline .nav-link{
  position: relative;
  color: var(--ink-60) !important;
  font-weight: 600;
  text-decoration: none !important;
  border-bottom-color: transparent !important;
  background: transparent !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: color .18s ease;
}

/* спокойный hover: чернило + мягкая бумажная линия */
@media (hover: hover) and (pointer: fine){
  header.top-header .nav-underline .nav-link:hover,
  header.top-header .nav-underline .nav-link:focus{
    color: var(--ink) !important;
    text-decoration: none !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
  }
  header.top-header .nav-underline .nav-link::after{
    content:"";
    position:absolute; left:0; right:0; bottom:-2px;
    height:.125rem; background: var(--paper-300);
    transform: scaleX(0); transform-origin: center;
    transition: transform .18s ease;
  }
  header.top-header .nav-underline .nav-link:hover::after,
  header.top-header .nav-underline .nav-link:focus::after{
    transform: scaleX(1);
  }
}

/* активный пункт — терракота + подчёркивание */
header.top-header .nav-underline .nav-link.active{
  color: var(--terracotta) !important;
  font-weight: 700;
}
header.top-header .nav-underline .nav-link.active::after{ transform: scaleX(1); background: var(--terracotta); }
header.top-header .nav-underline .nav-item.active > .nav-link:not(.active){
  color: var(--ink-60) !important;
  border-bottom-color: transparent !important;
}

/* Активный пункт в мобильном offcanvas */
header.top-header + .offcanvas .nav .nav-link.active{
  color: var(--terracotta) !important;
  font-weight: 700;
  border-bottom: 2px solid currentColor;
  border-radius: 0;
}

/* ===================== Hover для телефона (ПК/ноут) ===================== */
@media (hover: hover) and (pointer: fine){
  header.top-header .phone-link{
    transition: color .2s ease, text-shadow .2s ease;
  }
  header.top-header .phone-link:hover{
    color: var(--terracotta) !important;
    text-shadow: 0 0 10px rgba(198,90,46,.18);
  }
}

/* ===================== Планшеты: компактнее CTA в шапке ===================== */
@media (min-width: 768px) and (max-width: 1199.98px){
  header.top-header .btn-terracotta,
  header.top-header .btn-danger,
  header.top-header .btn.header-cta,
  header.top-header .btn.btn-lg{
    font-size: .81rem;     /* чуть меньше текст */
    line-height: 1.6;
    padding: .55rem .9rem; /* компактнее габариты */
    border-radius: 12px;
  }
  header.top-header .btn-terracotta i,
  header.top-header .btn-danger i,
  header.top-header .btn.header-cta i,
  header.top-header .btn.btn-lg i{
    font-size: 1rem;
    margin-right: .35rem;
  }
}