/* === Глобально, влияет на раскладку хедера === */
html {
  scrollbar-gutter: stable both-edges;
}

button {
  font-family: var(--Font-main);
  font-weight: 600;
}

/* === Базовая группа из исходника (селектор header затрагивает ваш <header>) === */
header, .hero, .logo {
  margin: 0;
  padding: 0;
  min-height: auto;
  padding-left: 1.25rem;
}

/* === Шапка сайта === */
.main-header {
  background: #fff;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #e1e1e1;
}

/* Верхняя строка шапки */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0rem 3rem;
  margin-bottom: 2rem;
}

/* Логотип */
.logo img {
  display: block;
  max-height: 7rem;
  height: auto;
  margin: 0 auto;
}

/* === Навигация и подменю === */
.nav { 
  position: relative; 
  z-index: var(--z-nav); 
  display: flex;
  justify-content: center;
}

.nav-list{
  display:flex; 
  align-items:center; 
  gap:4.0rem;
  list-style:none; 
  margin:0; 
  padding:0;
}

.nav-item{ 
  position:relative; 
}

.nav-trigger{
  display:inline-flex; 
  align-items:center; 
  gap:0.8rem;
  padding:0.8rem 0;
  background:none; 
  border:0; 
  cursor:pointer;
  font-weight: 700; 
  font-size: 1.05rem;
  text-transform:uppercase; 
  letter-spacing:0.08em;
  color:var(--c-txt);
  outline-offset:0.2rem;
}

.nav-trigger:focus-visible{ 
  outline:0.2rem solid var(--c-primary); 
  border-radius:0.4rem; 
}

/* Подменю */
.submenu{
  position:absolute; 
  left:50%; 
  top:100%;
  transform: translate(-50%, 0.8rem) scale(0.98);
  min-width:22rem; 
  max-width:32rem;
  background:var(--c-panel);
  border:0.1rem solid rgba(255,255,255,0.08);
  border-radius:var(--rad);
  box-shadow:var(--shadow);
  padding:1.0rem;
  opacity:0; 
  pointer-events:none;
  transition: opacity 160ms ease, transform 160ms ease;
  will-change: transform, opacity;
}

.submenu.is-open{
  opacity:1; 
  pointer-events:auto;
  transform: translate(-50%, 0.4rem) scale(1);
}

.submenu:focus{ 
  outline:none; 
}

.submenu li{ 
  list-style:none; 
}

.submenu-link{
  display:block; 
  padding:0.9rem 1.2rem; 
  border-radius:0.8rem;
  color:var(--c-txt); 
  text-decoration:none; 
  line-height:1.4;
  white-space:nowrap;
}

.submenu-link:hover, 
.submenu-link:focus-visible{
  background:rgba(255,255,255,0.06);
  outline: none;
}

/* Ховеры/клавиатура без JS */
.has-submenu:hover > .submenu,
.has-submenu:focus-within > .submenu{
  opacity:1; 
  pointer-events:auto; 
  transform: translate(-50%, 0.4rem) scale(1);
}

/* Мобильные правки подменю */
@media (max-width: 48rem){
  .nav-list{ gap:2.0rem; }
  .submenu{
    left:0; 
    transform: translate(0, 0.8rem) scale(0.98);
    min-width: 20rem; 
    max-width: min(92vw, 32rem);
  }
  .submenu.is-open{ 
    transform: translate(0, 0.4rem) scale(1); 
  }
}

/* === CONTACT BLOCK (2 строки) === */
:root { 
  --contact-logo-h: 3.2rem; 
} /* использует .btn-wa.plain > img */

.contact-block{
  display:grid;
  grid-template-columns:auto 1fr auto;   /* 1-я строка: WA | Кнопка | Копировать */
  grid-template-rows:auto auto;          /* 2 строки */
  grid-template-areas:
    "wa call copy"
    "phone phone status";
  column-gap:1.2rem;
  row-gap:.4rem;
  align-items:center;
  width:max-content;                      
  min-height:3.6rem;                      
}

/* Привязка областей */
.btn-wa{ grid-area: wa; }
.btn-call{ grid-area: call; }
.copy-phone{ grid-area: copy; }
.phone-number{ grid-area: phone; }
.phone-hint{ grid-area: status; }

/* Базовая кнопка */
.btn{
  display:inline-flex; 
  align-items:center; 
  justify-content:center;
  gap:.6rem; 
  border:0; 
  cursor:pointer; 
  font-weight:600; 
  line-height:1;
}

/* Стандартный вид .btn-wa (на будущее в других местах) */
.btn-wa{
  width:3.2rem; 
  height:3.2rem; 
  border-radius:.8rem;
  background:linear-gradient(135deg,#28a9ff,#8b5cf6);
  position:relative; 
  overflow:hidden;
}

/* Индикатор статуса (если используется) */
.status-dot{
  position:absolute; 
  right:.3rem; 
  bottom:.3rem;
  width:.6rem; 
  height:.6rem; 
  border-radius:50%;
}
.status-dot[data-state="online"]  { background:#22d3a1; box-shadow:0 0 0 .2rem rgba(34,211,161,.25); }
.status-dot[data-state="away"]    { background:#ffd166; box-shadow:0 0 0 .2rem rgba(255,209,102,.25); }
.status-dot[data-state="offline"] { background:#94a3b8; box-shadow:0 0 0 .2rem rgba(148,163,184,.20); }

/* Кнопка "Заказать звонок" */
.btn-call{
  padding:.9rem 1.6rem; 
  border-radius:1.2rem; 
  background:#2f6b49; 
  color:#fff;
  font-size:1rem; 
  letter-spacing:.02em; 
  outline-offset:.2rem;
}
.btn-call:is(:hover,:focus-visible){ 
  filter:brightness(1.06); 
}

/* Кнопка копирования */
.copy-phone{
  width:2.2rem; 
  height:2.2rem; 
  display:inline-flex; 
  align-items:center; 
  justify-content:center;
  border-radius:.6rem; 
  background:transparent; 
  color:#2e6b49;
  border:.1rem solid rgba(46,107,73,.2);
}
.copy-phone:is(:hover,:focus-visible){ 
  background:rgba(46,107,73,.06); 
}

/* Номер и подсказка */
.phone-number{
  font-weight:600; 
  color:#2e6b49; 
  text-decoration:none; 
  white-space:nowrap;
}
.phone-number:hover{ 
  text-decoration:underline; 
}

.phone-hint{
  font-size: 1rem; 
  font-weight: 700;
  line-height:1.2; 
  color:rgba(46,107,73,.9); 
  opacity:.9; 
  white-space:nowrap;
}

/* Статус копирования (для SR) */
.copy-status{
  position:absolute; 
  width:1px; 
  height:1px; 
  padding:0; 
  margin:-1px;
  overflow:hidden; 
  clip:rect(0 0 0 0); 
  white-space:nowrap; 
  border:0;
}

/* Фокус-рамки */
.btn:focus-visible, 
.copy-phone:focus-visible, 
.btn-wa:focus-visible, 
.phone-number:focus-visible{
  outline:.2rem solid #22d3a1; 
  outline-offset:.2rem;
}

/* Мобильный фоллбек сетки контактов */
@media (max-width:30rem){
  .contact-block{
    grid-template-columns:1fr auto;
    grid-template-areas:
      "wa copy"
      "call call"
      "phone phone"
      "status status";
    width:100%;
  }
  .btn-wa{ justify-self:start; }
  .copy-phone{ justify-self:end; }
}

/* Модификатор: «родной» логотип внутри .btn-wa */
.contact-block .btn-wa.plain{
  background:none !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
  width:auto !important;
  height:auto !important;
  display:inline-flex !important;
  align-items:center !important;
}

.contact-block .btn-wa.plain > img{
  height:var(--contact-logo-h) !important;
  width:auto !important;
  max-width:none !important;
  display:inline-block !important;
  object-fit:contain !important;
}

.contact-block .btn-wa.plain .status-dot{ 
  display:none !important; 
}

/* CLICK-ONLY: не открывать подменю по hover/focus-within, если оно не .is-open */
.has-submenu:hover > .submenu:not(.is-open),
.has-submenu:focus-within > .submenu:not(.is-open){
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate(-50%, 0.8rem) scale(0.98) !important;
}

/* Заголовок внутри подменю + «клювик» */
.submenu[data-title]{ padding-top: 2.6rem; }
.submenu[data-title]::before{
  content: attr(data-title);
  position:absolute; left:1rem; top:.65rem;
  font-size:.82rem; letter-spacing:.08em;
  text-transform:uppercase; color:rgba(0,0,0,.55);
}
.submenu::after{
  content:""; position:absolute; top:-.5rem; left:50%;
  width:1rem; height:1rem; transform: translateX(-50%) rotate(45deg);
  background: var(--c-panel); border:0.1rem solid rgba(255,255,255,0.08);
  border-right-color: transparent; border-bottom-color: transparent;
  box-shadow: var(--shadow);
}

/* Пункты с иконкой и описанием (вторая строка) */
.submenu-link{
  position: relative;
  padding: .85rem 1.2rem .6rem 2.8rem;
}
.submenu-link::before{
  content:"";
  position:absolute; left:.9rem; top:50%; transform:translateY(-50%);
  width:1.15rem; height:1.15rem; opacity:.8;
  background: currentColor;
  -webkit-mask: var(--icon) center/contain no-repeat;
          mask: var(--icon) center/contain no-repeat;
}
.submenu-link::after{              /* описание из data-desc */
  content: attr(data-desc);
  display:block; margin-top:.15rem;
  font-size:.86rem; line-height:1.25; opacity:.72;
  color: color-mix(in oklab, var(--c-txt) 85%, #000);
}

/* Активный пункт (текущая страница) */
.submenu-link.is-active,
.submenu-link[aria-current="page"]{
  background: rgba(255,255,255,.12);
  font-weight: 700;
}

/* Иконки через data-icon → CSS var */
/* Иконки через data-icon → CSS var */
.submenu-link[data-icon="all"]      { --icon: url('/images/svg/icons/grid.svg'); }
.submenu-link[data-icon="gallery"]  { --icon: url('/images/svg/icons/gallery.svg'); }
.submenu-link[data-icon="video"]    { --icon: url('/images/svg/icons/video.svg'); }
.submenu-link[data-icon="reviews"]  { --icon: url('/images/svg/icons/review.svg'); }
.submenu-link[data-icon="map"]      { --icon: url('/images/svg/icons/map-pin.svg'); }

.submenu-link[data-icon="delivery"] { --icon: url('/images/svg/icons/truck.svg'); }
.submenu-link[data-icon="surveyor"] { --icon: url('/images/svg/icons/ruler.svg'); }
.submenu-link[data-icon="shield"]   { --icon: url('/images/svg/icons/shield.svg'); }
.submenu-link[data-icon="price"]    { --icon: url('/images/svg/icons/price-tag.svg'); }
.submenu-link[data-icon="credit"]   { --icon: url('/images/svg/icons/credit-card.svg'); }
.submenu-link[data-icon="faq"]      { --icon: url('/images/svg/icons/help.svg'); }
.submenu-link[data-icon="article"]  { --icon: url('/images/svg/icons/article.svg'); }

.submenu-link[data-icon="calc"]     { --icon: url('/images/svg/icons/calculator.svg'); }
.submenu-link[data-icon="contacts"] { --icon: url('/images/svg/icons/phone-mail.svg'); }
.submenu-link[data-icon="about"]    { --icon: url('/images/svg/icons/info.svg'); }
.submenu-link[data-icon="partners"] { --icon: url('/images/svg/icons/handshake.svg'); }


/* Мелкие штрихи */
.submenu-link:hover::before,
.submenu-link:focus-visible::before{ opacity:1; }
@media (max-width: 48rem){
  .submenu[data-title]{ padding-top:2.2rem; }
  .submenu-link{ padding-left: 2.6rem; }
}


/* Работает ТОЛЬКО когда JS добавил класс на <html> */
html.js-click-nav .has-submenu:hover > .submenu:not(.is-open),
html.js-click-nav .has-submenu:focus-within > .submenu:not(.is-open){
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate(-50%, 0.8rem) scale(0.98) !important;
}


.submenu { z-index: 9999 !important; }


/* =========================
   NAV DROPDOWN GUARD (header.css)
   Делает дропдауны видимыми, позиционируемыми и кликабельными
   ========================= */

.main-header,
header.site-header,
#services-header {
  position: relative;
  z-index: 3000 !important; /* поверх героев/видео/прелоадеров */
}

.top-bar {
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.2rem;
}

.nav { 
  display: block !important; 
}

.nav-list {
  display: flex;
  gap: 1.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.has-submenu { position: relative; }

.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem 1rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-weight: 700; 
  color: inherit;
  text-decoration: none;
}

/* Фокус/доступность */
.nav-trigger:focus-visible,
.submenu .submenu-link:focus-visible {
  outline: .2rem solid color-mix(in oklch, var(--ring, oklch(0.77 0.15 160 / .55)) 50%, white 50%);
  outline-offset: .2rem;
  border-radius: .6rem;
}

/* нативное скрытие */
.submenu[hidden] { display: none !important; }

/* Выпадающее меню */
.has-submenu .submenu {
  position: absolute;
  inset-inline-start: 0;
  top: 100%;
  min-width: min(28rem, 88vw);
  background: var(--surface, #fff);
  color: var(--ink, #222);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: .8rem;
  padding: .6rem;
  box-shadow: 0 1.2rem 3rem rgba(0,0,0,.18);
  z-index: 3100;
}

.submenu .submenu-link{
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .7rem 1rem;
  border-radius: .6rem;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}

.submenu .submenu-link:hover,
.submenu .submenu-link:focus {
  background: color-mix(in oklch, var(--ring, oklch(0.77 0.15 160 / .55)) 18%, transparent);
  outline: 0;
}

/* RTL поддержка */
[dir="rtl"] .has-submenu .submenu {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

/* Небольшой адаптив */
@media (max-width: 48rem) {
  .nav-list { gap: .8rem; }
  .nav-trigger { padding: .5rem .8rem; }
  .has-submenu .submenu { min-width: min(24rem, 92vw); }
}

/* Предпочтения по уменьшению движения — отключим анимации, если они появятся */
@media (prefers-reduced-motion: reduce) {
  .submenu, .nav-trigger { transition: none !important; }
}

:root{
  --submenu-bg: oklch(0.16 0.02 160); /* темнее */
  --submenu-on: oklch(0.98 0.01 160);
}

.has-submenu .submenu{
  background: var(--submenu-bg) !important;
  color: var(--submenu-on) !important;
  border: 1px solid color-mix(in oklch, var(--submenu-on) 12%, transparent) !important;
  box-shadow: 0 1.6rem 3.6rem rgba(0,0,0,.36) !important;
}
.submenu .submenu-link:hover,
.submenu .submenu-link:focus{
  background: color-mix(in oklch, var(--brand) 70%, white 30%) !important;
  color: var(--submenu-on) !important;
}







/* ====== DROPDOWN — как на главной (override) ====== */

/* Базовое состояние закрытого меню */
.top-bar .submenu{
  position: absolute;
  left: 50%;
  top: 100%;
  margin-top: .4rem;
  transform: translateX(-50%) scale(.98);
  text-align: center;
  min-width: 38rem;
  max-width: 65rem;
  padding: .8rem;
  border-radius: .8rem;

  /* фон/бордер/тень как на главной */
  background: linear-gradient(180deg, rgba(134, 211, 161, .70), rgba(34, 211, 161, .06)), #fff !important;
  color: #0e161a !important;
  border: .08rem solid rgba(34, 211, 161, .18) !important;
  box-shadow: 0 .8rem 2.4rem rgba(0, 0, 0, .12), 0 0 0 .12rem rgba(34, 211, 161, .08) !important;

  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
  z-index: 2000;
}

/* Открытие — по aria-expanded и по классу .is-open */
.top-bar .nav-item > .nav-trigger[aria-expanded="true"] + .submenu{
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateX(-50%) scale(1) !important;
}
.top-bar .submenu.is-open{
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) scale(1);
}

/* Элементы меню */
.top-bar .submenu .submenu-link{
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 1.2rem;
  align-items: center;

  padding: .7rem 1rem;
  border-radius: .6rem;
  text-decoration: none;

  color: #0e161a !important;
  font-weight: 700;                 
  white-space: nowrap;
}

/* Описание из data-desc (как на главной — более спокойный тон) */
.top-bar .submenu .submenu-link::after{
  content: attr(data-desc);
  font-weight: 700;
  color: rgba(14, 22, 26, .60);
  white-space: normal;             
}

/* Ховер/фокус */
.top-bar .submenu .submenu-link:hover,
.top-bar .submenu .submenu-link:focus{
  background: rgba(34, 211, 161, .10);
  outline: 0;
}

/* На случай, если используется портальный слой (#nav-dd-portal) — та же тема */
#nav-dd-portal .submenu.is-portal-open{
  background: linear-gradient(180deg, rgba(34, 211, 161, .10), rgba(34, 211, 161, .06)), #fff !important;
  color: #0e161a !important;
  border: .08rem solid rgba(34, 211, 161, .18) !important;
  box-shadow: 0 .8rem 2.4rem rgba(0,0,0,.12), 0 0 0 .12rem rgba(34,211,161,.08) !important;
}
#nav-dd-portal .submenu.is-portal-open .submenu-link{
  color: #0e161a !important;
  font-weight: 700;
}

nav.breadcrumbs{
  display:flex !important;
  align-items:center;
  gap:.6rem;
  padding:.8rem 1.2rem;
  border-radius:.8rem;
  /*background:#f3fbf6;*/
  color:#0e161a;
}
nav.breadcrumbs .crumb{
    color:#6a49c8; 
    font-weight:700; 
    text-decoration:none; 
}
nav.breadcrumbs .crumb.current{ 
    color:#0e161a; 
    pointer-events:none; 
}

.crumb{
    margin-top: 3rem;
}

/* === CENTER NAV OVERRIDE (добавить в самый конец) === */

/* 3 колонки: 1fr | auto | 1fr → nav ровно по центру */
.main-header .top-bar{
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: 6.2rem !important;
}

/* nav занимает ширину контента и встаёт в центр сетки */
.main-header .nav{
  justify-self: start !important;
  inline-size: max-content !important;
  max-inline-size: 100% !important; /* на узких экранах не вываливается */
}

/* логотип влево, контакты вправо */
.main-header .logo{ justify-self: start !important; }
.main-header .contact-block{ justify-self: end !important; }

/* убираем левый сдвиг, если задан глобально */
header.main-header{ padding-left: 0 !important; }