/* Единые стили хедера, мобильного меню и dropdown — logidex.ru */

/* ──────────────────────────────────────────────────────────────────
   Базовая мобильная защита (применяется ко всем страницам logidex.ru)
   Why: 26.05.2026 Игорь нашёл горизонтальный скролл на /blog/ —
   длинные заголовки и блоки уходили за viewport на iPhone (375px).
   Решение: единый сейфти-нет в shared.css, который подключают
   все 37 страниц сайта.
   ────────────────────────────────────────────────────────────────── */
html, body { overflow-x: hidden; max-width: 100%; }
body { -webkit-text-size-adjust: 100%; }
img, video, iframe, svg { max-width: 100%; height: auto; }
table { max-width: 100%; }
h1, h2, h3, h4 { word-break: break-word; overflow-wrap: break-word; hyphens: auto; }
pre, code { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }

/* Mobile breakpoint: сетки с >=2 колонок → 1 колонка на узких экранах */
@media (max-width: 640px) {
  /* Универсальные классы для сеток (используются в большинстве страниц) */
  .blog-grid, .articles, .features, .pricing, .cards, .cards-grid { grid-template-columns: 1fr !important; }
  /* Inline grid: <div style="grid-template-columns:1fr 1fr"> на узких экранах в 1 колонку.
     Конкретные правила переопределяем точечно в страницах при необходимости. */
}

.header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-bottom:1px solid rgba(0,0,0,.06);padding:0 20px}
.header-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.logo{font-size:1.5rem;font-weight:800;letter-spacing:-.03em;color:#8e73fe;text-decoration:none}
.header-contacts{display:flex;align-items:center;gap:16px}
.header-phone{font-weight:600;font-size:.95rem;white-space:nowrap;color:#1a1a2e;text-decoration:none}
.header-icons{display:flex;gap:10px}
.header-icons a{width:36px;height:36px;border-radius:50%;background:#f7f6fb;display:flex;align-items:center;justify-content:center;transition:background .2s}
.header-icons a:hover{background:rgba(142,115,254,.15)}
.header-icons svg{width:18px;height:18px}
.header-cta{white-space:nowrap}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:8px}
.burger span{display:block;width:24px;height:2px;background:#1a1a2e;border-radius:2px;transition:all .3s}
.mobile-menu{display:none;position:fixed;top:64px;left:0;right:0;bottom:0;background:rgba(255,255,255,.98);backdrop-filter:blur(12px);z-index:99;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:40px}
.mobile-menu.active{display:flex}
.mobile-menu a{font-size:1.2rem;font-weight:600;color:#1a1a2e;text-decoration:none}
.nav-dropdown .dropdown-menu::before{content:'';position:absolute;top:-16px;left:0;right:0;height:16px}
.nav-dropdown:hover .dropdown-menu{display:block !important}
@media(max-width:768px){
  .header-phone,.header-icons,.header-cta,.nav-dropdown{display:none}
  .burger{display:flex}
}
@media(max-width:480px){
  #site-footer footer > div:first-child{grid-template-columns:1fr !important;gap:24px !important;text-align:center;}
}
@media(max-width:768px){
  #site-footer footer > div:first-child{grid-template-columns:1fr 1fr !important;}
}