/* ============================================================
   KendaliCRM — Brand Overrides поверх темы Vintech
   ХЕДЕР = лого-блок CRM (вариант A: оба состояния тёмные,
   под белый логотип). Токены взяты из билда CRM (custom.scss):
     · высота 70px (.navbar-header)
     · фон тёмной темы  #292e32
     · фон светлой темы #2b3643
     · красная полоса   inset 0 -2px 0 #FF4242
     · шрифт меню       Poppins
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

/* ---------- ВЫСОТА 70px ---------- */
#pxl-header-elementor .pxl-header-elementor-main,
#pxl-header-elementor .pxl-header-elementor-sticky,
#pxl-header-elementor .pxl-header-content,
#pxl-header-elementor .pxl-header-content > .elementor,
#pxl-header-elementor .pxl-header-content .e-con,
#pxl-header-elementor .pxl-header-content .e-con-inner{
  min-height:70px!important;
}
#pxl-header-elementor .pxl-header-content{ height:70px!important; }
/* логотип CRM (белый «KendaliCRM») вместо дефолтного Vintech + размер под 70px */
#pxl-header-elementor .pxl-logo img{
  content:url('logo-kendali.png')!important;
  height:40px!important;
  max-height:40px!important;
  width:auto!important;
}

/* ---------- ФОН + КРАСНАЯ ПОЛОСА ---------- */
/* вверху = тёмная тема CRM */
#pxl-header-elementor .pxl-header-elementor-main{
  background-color:#292e32!important;
  box-shadow:inset 0 -2px 0 #FF4242!important;
  border-bottom:0!important;
}
/* на скролле = светлая тема CRM */
#pxl-header-elementor .pxl-header-elementor-sticky{
  background-color:#2b3643!important;
  box-shadow:inset 0 -2px 0 #FF4242!important;
  border-bottom:0!important;
}
/* гасим белый внутренний Elementor-ряд в ОБОИХ состояниях (main + sticky),
   чтобы проступил тёмный фон обёртки */
#pxl-header-elementor .pxl-row,
#pxl-header-elementor .e-con,
#pxl-header-elementor .e-con-inner{
  background-color:transparent!important;
}

/* ---------- МЕНЮ как в CRM (оба состояния — тёмный фон) ---------- */
#pxl-header-elementor ul.pxl-menu-primary > li > a{
  font-family:"Poppins",sans-serif!important;
  font-size:14px!important;
  font-weight:500!important;
  color:#b4bcc8!important;
  line-height:70px!important;   /* тема ставит 103px (=старая высота) → меню свисало; равняем под 70px */
}
/* активный / наведённый пункт — красный CRM */
#pxl-header-elementor ul.pxl-menu-primary > li.current-menu-item > a,
#pxl-header-elementor ul.pxl-menu-primary > li.current-menu-ancestor > a,
#pxl-header-elementor ul.pxl-menu-primary > li:hover > a{ color:#FF4242!important; }

/* расстояние между пунктами чуть меньше (было margin 0 24px) + вертикальные
   разделители между пунктами в стиле .pxl-el-divider (как Telegram↔Demo) */
#pxl-header-elementor ul.pxl-menu-primary > li{
  margin:0!important;
  padding:0 18px!important;
  position:relative;
}
#pxl-header-elementor ul.pxl-menu-primary > li + li::before{
  content:"";
  position:absolute;
  left:0; top:50%; transform:translateY(-50%);
  width:1px; height:22px;
  background:rgba(255,255,255,.22);
}

/* ---------- Кнопка «Demo» (текст/ссылка — в Elementor-данных): уже + менее закруглённая ---------- */
#pxl-header-elementor a.btn{
  padding:0 26px!important;     /* было 40.5px → немного уже */
  border-radius:4px!important;  /* было 8px → менее закруглённая */
}

/* ---------- Telegram вместо пиктограммы поиска ---------- */
/* до подмены JS-ом прячем виджет поиска, чтобы лупа не мелькала (место сохраняется) */
#pxl-header-elementor .elementor-widget-pxl_icon_search:not(.kendali-tg-ready){ visibility:hidden; }
#pxl-header-elementor .kendali-tg-link{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; color:#fff; transition:color .2s ease;
}
#pxl-header-elementor .kendali-tg-link svg{ width:22px; height:22px; fill:currentColor; }
#pxl-header-elementor .kendali-tg-link:hover{ color:#f01824; }

/* ============================================================
   МОБИЛЬНЫЙ / ПЛАНШЕТНЫЙ ХЕДЕР (#pxl-header-mobile) — в наш стиль.
   По умолчанию тема даёт светлый бар + лого Vintech. Делаем тёмный
   бар #292e32 + красная линия, наш белый логотип, белый бургер,
   тёмную выезжающую панель меню; поиск прячем.
   ============================================================ */
#pxl-header-mobile .pxl-header-main{
  background-color:#292e32!important;
  border-bottom:1px solid #f01824!important;
}
/* логотип бара → наш белый KendaliCRM */
#pxl-header-mobile .pxl-header-branding img,
#pxl-header-mobile .pxl-logo-mobile img,
#pxl-header-mobile .logo-light img,
#pxl-header-mobile .logo-dark img{
  content:url('logo-kendali.png')!important;
  height:40px!important;max-height:40px!important;width:auto!important;
}
/* бургер — белые линии */
#pxl-header-mobile .pxl-nav-mobile-button .pxl-icon-line{ background-color:#fff!important; }

/* выезжающая панель меню — тёмная, как сайт */
#pxl-header-mobile .pxl-header-menu,
#pxl-header-mobile .pxl-header-menu-scroll{ background-color:#292e32!important; }
#pxl-header-mobile .pxl-header-menu .pxl-header-branding img,
#pxl-header-mobile .pxl-header-menu .pxl-logo img{
  content:url('logo-kendali.png')!important;height:40px!important;max-height:40px!important;width:auto!important;
}
#pxl-header-mobile .pxl-header-menu a{ color:#e7ebf1!important; }
#pxl-header-mobile .pxl-header-menu .current-menu-item > a,
#pxl-header-mobile .pxl-header-menu .current-menu-ancestor > a,
#pxl-header-mobile .pxl-header-menu a:hover{ color:#f01824!important; }
#pxl-header-mobile .pxl-header-menu li{ border-color:rgba(255,255,255,.08)!important; }
/* стрелки раскрытия подменю + крестик закрытия — светлые */
#pxl-header-mobile .pxl-header-menu .pxl-menu-toggle,
#pxl-header-mobile .pxl-header-menu [class*="close"],
#pxl-header-mobile .pxl-header-menu .pxl-submenu-toggle{ color:#fff!important; }
/* поиска на сайте нет (на десктопе заменён Telegram) — прячем */
#pxl-header-mobile .pxl-header-mobile-search{ display:none!important; }

/* ============================================================
   ФУТЕР (Footer Home 3) — в стиль CRM
   ============================================================ */
/* фон = тёмная тема лого-блока CRM (#292e32); гасим фиолетовые секции #43347c */
#pxl-footer-elementor{ background-color:#292e32!important; }
#pxl-footer-elementor .e-con{ background-color:transparent!important; }

/* логотип — белый «KendaliCRM» (как в хедере) */
#pxl-footer-elementor .pxl-logo img{
  content:url('logo-kendali.png')!important;
  height:50px!important;
  max-height:50px!important;
  width:auto!important;
}

/* две горизонтальные полосы → фирменный красный */
#pxl-footer-elementor .pxl-border-anm.bb{ border-bottom-color:#f01824!important; }
#pxl-footer-elementor .pxl-el-divider{ background-color:#f01824!important; }

/* ============================================================
   Full-bleed kdl-блоки (тёмные полосы #292e32 во всю ширину) не должны
   обрезаться скруглением/overflow контейнера Elementor (на некоторых
   страницах у e-con стоит border-radius:20px + overflow:hidden → резало углы).
   ============================================================ */
.elementor .e-con:has(> .elementor-widget-html [class*="kdl-"]){ overflow:visible!important; }

/* ============================================================
   PAGE-TITLE баннер (#pxl-page-title-default) — компактный, фирменный.
   Тема по умолчанию даёт padding:125px + демо-фото офиса. Делаем
   компактную полосу в стиле тёмных kdl-блоков: фон #292e32 + красная
   линия снизу. Применяется ко всем страницам с дефолтным page-title
   (Blog, Blog Grid и т.п. — остальные имеют pt_mode=none).
   ============================================================ */
#pxl-page-title-default{
  padding:54px 0 50px!important;
  background-color:#292e32!important;
  background-image:
    radial-gradient(820px 260px at 82% -60%, rgba(240,24,36,.20), transparent 70%),
    linear-gradient(120deg,#07152d 0%,#1f242a 60%,#292e32 100%)!important;
  background-size:cover!important;
  background-position:center!important;
  border-bottom:1px solid #f01824;
}
@media screen and (max-width:1024px){ #pxl-page-title-default{ padding:46px 0 42px!important; } }
@media screen and (max-width:767px){ #pxl-page-title-default{ padding:38px 0 34px!important; } }
/* убираем декоративную демо-фигуру и чёрный оверлей — на тёмном фоне лишние */
#pxl-page-title-default:before,
#pxl-page-title-default:after{ display:none!important; }
/* компактная типографика заголовка/описания */
#pxl-page-title-default .pxl-page-title{
  margin-top:10px!important;
  margin-bottom:8px!important;
  font-size:36px!important;
  line-height:1.12!important;
  letter-spacing:-.02em;
}
#pxl-page-title-default .pxl-page-desc{
  font-size:15px!important;
  line-height:1.55!important;
  color:#bdc7da!important;
  max-width:none!important;
  white-space:nowrap;
}
/* на узких экранах разрешаем перенос, чтобы текст не уезжал за край */
@media screen and (max-width:900px){
  #pxl-page-title-default .pxl-page-desc{ white-space:normal;max-width:560px!important; }
}
/* блог: подтянуть блок контента+сайдбара ближе к баннеру —
   верхний отступ = боковому (~50px), вместо дефолтных 100px у #pxl-main */
body.blog #pxl-main,
body.archive #pxl-main,
body.category #pxl-main,
body.tag #pxl-main,
body.single-post #pxl-main{ padding-top:50px!important;padding-bottom:50px!important; }
/* на одиночной статье описания нет → не оставляем пустой <p> */
#pxl-page-title-default .pxl-page-desc:empty{ display:none!important; }

/* выравнивание баннера по ЛЕВОМУ краю (по ширине контента) + крошки без плашки */
#pxl-page-title-default{ text-align:left!important; }
#pxl-page-title-default .container{ max-width:1470px!important; }
#pxl-page-title-default .ptitle-col-right{ justify-content:flex-start!important; }
#pxl-page-title-default .pxl-page-title{ text-align:left!important; }
#pxl-page-title-default .pxl-page-desc{ margin-left:0!important;margin-right:0!important;text-align:left!important; }
/* крошки — чистый текст без серой плашки */
#pxl-page-title-default .pxl-breadcrumb{
  background:transparent!important;border:0!important;border-radius:0!important;
  padding:0!important;justify-content:flex-start!important;
}
/* читаемость крошек на тёмном фоне + цвет разделителей-точек */
#pxl-page-title-default .pxl-breadcrumb,
#pxl-page-title-default .pxl-breadcrumb a,
#pxl-page-title-default .pxl-breadcrumb span{ color:#aeb8c9!important; }
#pxl-page-title-default .pxl-breadcrumb .breadcrumb-hidden::after{ background-color:#6b7689!important; }
/* на одиночной статье заголовок в крошках дублирует крупный заголовок ниже →
   убираем текущий (без ссылки) пункт .breadcrumb-entry вместе с его разделителем */
body.single #pxl-page-title-default .pxl-breadcrumb li:has(.breadcrumb-entry){ display:none!important; }
/* и убираем «хвостовой» разделитель у последнего видимого пункта (::after-точка ссылки) */
body.single #pxl-page-title-default .pxl-breadcrumb li:nth-last-child(2) .breadcrumb-hidden::after{ display:none!important; content:none!important; }

/* ============================================================
   БЛОГ — категории в сайдбаре: корпоративные горизонтальные плашки.
   Рендер в kendali-brand.php (хук get_sidebar). Префикс kdl-blogcat.
   ============================================================ */
.kdl-blogcat{
  --kdl-red:#f01824;
  background:#fff;
  border:1px solid #e8ebf0;
  border-radius:18px;
  padding:22px 20px 20px;
  margin-bottom:28px;
  box-shadow:0 14px 40px rgba(15,23,42,.06);
}
/* единое расстояние между блоками сайдбара блога (категории/свежие статьи/теги).
   Виджеты темы имеют большой внутренний padding 48px сверху/снизу (прозрачные,
   без фона) → обнуляем вертикальный padding, ритм задаёт margin-bottom:28px. */
#pxl-sidebar-area .widget{ margin-bottom:28px!important; padding-top:0!important; padding-bottom:0!important; }
#pxl-sidebar-area .widget:last-child{ margin-bottom:0!important; }
.kdl-blogcat__title{
  position:relative;
  margin:0 0 16px;
  padding-left:14px;
  font-size:18px;
  font-weight:800;
  letter-spacing:-.02em;
  color:#07152d;
  text-transform:none;
}
.kdl-blogcat__title:before{
  content:'';
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:4px;height:20px;border-radius:3px;background:var(--kdl-red);
}
.kdl-blogcat__list{ list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px; }
.kdl-blogcat__list li{ margin:0;padding:0; }
.kdl-blogcat__pill{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;
  border:1px solid #eceff3;
  border-radius:12px;
  background:#f8fafc;
  text-decoration:none;
  transition:.18s ease;
}
.kdl-blogcat__pill:hover{
  border-color:var(--kdl-red);
  background:#fff;
  transform:translateX(3px);
  box-shadow:0 10px 24px rgba(240,24,36,.12);
}
.kdl-blogcat__name{
  font-size:14.5px;font-weight:700;letter-spacing:-.01em;color:#1f2a3d;line-height:1.25;
  transition:color .18s ease;
}
.kdl-blogcat__pill:hover .kdl-blogcat__name{ color:#07152d; }
.kdl-blogcat__count{
  flex:none;min-width:26px;height:24px;padding:0 8px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:800;line-height:1;
  color:#64748b;background:#eef1f6;border-radius:999px;
  transition:.18s ease;
}
.kdl-blogcat__pill:hover .kdl-blogcat__count{ color:#fff;background:var(--kdl-red); }
/* активная категория (на странице архива категории) */
.kdl-blogcat__pill.is-active{
  border-color:var(--kdl-red);
  background:linear-gradient(120deg,#f01824,#ff3b47);
  box-shadow:0 12px 28px rgba(240,24,36,.28);
}
.kdl-blogcat__pill.is-active .kdl-blogcat__name{ color:#fff; }
.kdl-blogcat__pill.is-active .kdl-blogcat__count{ color:var(--kdl-red);background:#fff; }
.kdl-blogcat__pill.is-active:hover{ transform:none; }

/* ============================================================
   БЛОГ — карточка поста в ленте: верхняя строка (дата + категория)
   и стеклянная кнопка «Полная статья».
   ============================================================ */
/* меньше зазор между изображением статьи и верхней строкой предпросмотра */
.pxl-archive-post .post-content{ padding-top:18px!important; }
/* верхняя строка: дата-плашка слева + категория */
.kdl-post-top{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  margin-bottom:14px;
}
.kdl-post-date{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:999px;
  font-size:12.5px;font-weight:800;letter-spacing:.01em;
  color:#b91c1c;background:#fff0f1;border:1px solid #ffd6d9;
  white-space:nowrap;
}
.kdl-post-date:before{
  content:'';width:7px;height:7px;border-radius:50%;
  background:#f01824;flex:none;
}
/* категория-список темы внутри верхней строки: гасим отступы, ставим в линию */
.kdl-post-top .pxl-item--meta{ margin:0!important;padding:0!important;display:inline-flex;gap:8px; }

/* кнопка «Полная статья» убрана из ленты — переход кликом по заголовку.
   Заголовок поста делаем явно кликабельным (курсор/hover-цвет). */
.pxl-archive-post .post-title a{ cursor:pointer; transition:color .18s ease; }
.pxl-archive-post .post-title a:hover{ color:#f01824; }

/* ============================================================
   СТАТЬЯ — блок «Похожие статьи» (.pxl-related-post).
   Тема даёт swiper, который не инициализируется → карточки стопкой
   без стилей. Делаем надёжную CSS-сетку 3-в-ряд в стиле сайта,
   скрываем автора/комменты/Read more, показываем 3 (остальные —
   дубли источника).
   ============================================================ */
.pxl-related-post{ --kdl-red:#f01824; margin-top:6px;margin-bottom:0!important; }
.pxl-related-post{ text-align:left!important; }
.pxl-related-post .widget-title{ display:none!important; }   /* заголовок «Похожие статьи» скрыт */
/* Блок рендерится через SLICK-карусель. brand.js делает unslick (убирает клоны
   и перехват кликов) → .swiper-wrapper снова содержит .pxl-swiper-slide напрямую.
   Раскладываем статичной flex-сеткой 3-в-ряд. Ниже — и пост-unslick, и fallback
   на живой slick (.slick-track/.slick-slide). */
.pxl-related-post .pxl-swiper-container,
.pxl-related-post .swiper-wrapper,
.pxl-related-post .slick-list{ overflow:visible!important;width:auto!important;margin:0!important;padding:0!important; }
/* контейнер-сетка: пост-unslick = .swiper-wrapper; fallback = .slick-track */
.pxl-related-post .swiper-wrapper,
.pxl-related-post .slick-track{
  display:flex!important;flex-wrap:wrap!important;gap:24px!important;
  width:100%!important;transform:none!important;margin:0!important;
}
.pxl-related-post .slick-cloned{ display:none!important; }   /* клоны slick (fallback) */
/* слайд-карточка */
.pxl-related-post .pxl-swiper-slide,
.pxl-related-post .slick-slide{
  float:none!important;
  flex:0 0 calc((100% - 48px)/3)!important;
  width:calc((100% - 48px)/3)!important;
  max-width:calc((100% - 48px)/3)!important;
  min-width:0!important;margin:0!important;height:auto!important;box-sizing:border-box;
}
/* показываем только 3: пост-unslick (первые 3 из 6) и fallback (нач. 3 клона + след.3) */
.pxl-related-post .swiper-wrapper > .pxl-swiper-slide:nth-child(n+4){ display:none!important; }
.pxl-related-post .slick-track > .slick-slide:nth-child(n+7){ display:none!important; }
.pxl-related-post .pxl-post--inner{ width:100%;box-sizing:border-box; }

/* карточка в стиле сайта — CSS-grid: row1 картинка, row2 «дата · категории»,
   row3 заголовок, row4 анонс */
.pxl-related-post .pxl-post--inner{
  background:#fff;border:1px solid #e8ebf0;border-radius:18px;overflow:hidden;
  box-shadow:0 14px 40px rgba(15,23,42,.06);height:100%;
  display:grid!important;grid-template-columns:auto 1fr;align-content:start;transition:.2s ease;
}
.pxl-related-post .pxl-post--inner:hover{ box-shadow:0 22px 54px rgba(15,23,42,.13);transform:translateY(-3px); }
.pxl-related-post .pxl-post--featured{ grid-area:1 / 1 / 2 / 3;margin:0;overflow:hidden; }
.pxl-related-post .pxl-post--featured a{ display:block; }
.pxl-related-post .pxl-post--featured img{ width:100%;height:190px;object-fit:cover;display:block;transition:transform .35s ease; }
.pxl-related-post .pxl-post--inner:hover .pxl-post--featured img{ transform:scale(1.05); }
/* строка «дата · категории» (одна линия) */
.pxl-related-post .pxl-post--meta{ grid-area:2 / 1 / 3 / 2;align-self:center;padding:16px 0 0 18px;margin:0;border:0!important;display:block; }
.pxl-related-post .pxl-post--meta .post-date{ color:#94a3b8;font-size:13px;font-weight:700;letter-spacing:.02em;white-space:nowrap; }
.pxl-related-post .pxl-post--meta .post-date:after{ content:'•';margin:0 0 0 10px;color:#cbd5e1; }
.pxl-related-post .pxl-post--category{ grid-area:2 / 2 / 3 / 3;align-self:center;padding:16px 18px 0 8px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.pxl-related-post .pxl-post--category a{
  display:inline!important;font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:#b91c1c;background:none!important;border:0!important;border-radius:0!important;
  padding:0!important;margin:0;text-decoration:none;
}
.pxl-related-post .pxl-post--category a::before{ display:none!important; }   /* убираем красный квадрат-маркер темы */
.pxl-related-post .pxl-post--category a:not(:last-child)::after{ content:'·';color:#cbd5e1;margin:0 6px;font-weight:700; }
/* заголовок: не жирный, красный */
.pxl-related-post .pxl-post--title{ grid-area:3 / 1 / 4 / 3;padding:10px 18px 0;margin:0;font-size:17px;line-height:1.3;letter-spacing:-.01em;text-transform:none!important; }
.pxl-related-post .pxl-post--title a{ color:var(--kdl-red)!important;font-weight:500!important;text-decoration:none;transition:color .18s ease;text-transform:none!important; }
.pxl-related-post .pxl-post--title a:hover{ color:#c5121d!important; }
.pxl-related-post .pxl-post--content{ grid-area:4 / 1 / 5 / 3;padding:9px 18px 18px;color:#64748b;font-size:14px;line-height:1.55;text-transform:none!important; }
.pxl-related-post .pxl-item--author,
.pxl-related-post .pxl-post--meta .post-comments,
.pxl-related-post .pxl-post--button{ display:none!important; }
@media (max-width:900px){
  .pxl-related-post .pxl-swiper-slide,
  .pxl-related-post .slick-slide{ flex:0 0 calc((100% - 24px)/2)!important;width:calc((100% - 24px)/2)!important;max-width:calc((100% - 24px)/2)!important; }
}
@media (max-width:560px){
  .pxl-related-post .pxl-swiper-slide,
  .pxl-related-post .slick-slide{ flex:0 0 100%!important;width:100%!important;max-width:100%!important; }
}

/* Карусель «7 слоёв AMOS» (виджет 357555e): убираем тег-категорию «Слои AMOS».
   Архив taxonomy portfolio-category отдаёт 404 (rewrite-коллизия base "portfolio" темы),
   а на карточке категория избыточна — превью уже ведёт на страницу слоя. */
.elementor-element-357555e .pxl-post--category{display:none!important}

/* ── Кнопки pxl_button: цвет из темы (--primary-color), а не застрявший в Elementor-кеше #5230DA.
      Elementor печатает per-widget .elementor-element-X .pxl-button .btn{background:#5230DA}
      (хардкод-дефолт case-addons), перебивая тему. Привязываем к переменной темы. ── */
.pxl-button .btn:not(.btn-stroke){
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}
.pxl-button .btn:not(.btn-stroke):hover{
  background-color: var(--primary-color) !important;
  filter: brightness(.92);
}

/* ── Переключатель языка (RU/EN) в хедере ── */
.kdl-langsw{display:inline-flex;align-items:center;gap:3px}
.kdl-langsw__item{display:inline-flex;align-items:center;gap:4px;padding:4px 7px;border-radius:999px;
  font-size:12px;font-weight:700;letter-spacing:.02em;color:#fff;text-decoration:none;line-height:1;
  border:1px solid transparent;opacity:.6;transition:.15s ease;white-space:nowrap}
.kdl-langsw__item img{width:17px;height:12px;border-radius:2px;display:block;object-fit:cover}
.kdl-langsw__item:hover{opacity:1}
.kdl-langsw__item.is-active{opacity:1;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22)}
.kdl-langsw-wrap{display:flex;align-items:center;margin:0 8px}
/* кнопка Demo не должна переноситься */
#pxl-header-elementor .pxl-button .btn{white-space:nowrap}
@media (max-width:1200px){ .kdl-langsw__item span{display:none} .kdl-langsw__item{padding:4px} }