/* ===========================================================================
   site-unify.css (21.10.2026) — дизайн-правки за рецензією арт-директора.
   Override-шар: style.css / modern-shop.css / it-services.css НЕ редагуються
   (it-services.css — зона іншого агента, style.css/modern-shop.css поза
   списком дозволених файлів), усі зміни тут, підключається останнім у <head>
   (includes/blocks/header-head.php, після dark-header.css) — виграє каскад
   при однаковій специфічності проти style.css/wp.css/modern-shop.css/
   wide-screens.css/dark-header.css (вони теж жорстко в <head> до wp_head()).
   it-services.css вантажиться через wp_enqueue_style() у wp_head() — ПІЗНІШЕ
   за цей файл у DOM, тож проти нього потрібна !important або вища
   специфічність — тут це зроблено свідомо.
   =========================================================================== */

/* ===========================================================================
   1) ШАПКА ГОЛОВНОЇ — фіксована, без «плавання»
   Було: .header-black на головній — position:absolute +
   transform:translate3d(0,1080px,0) (style.css:1360,1377-1378), JS-пороги
   150/920px (js/custom.js) — шапка між 150–920px зникала (зсунута на 1080px
   вниз, прив'язано до висоти екрана 1080, а не до реального порогу) і
   «стрибала» на 920px. Тепер: на головній шапка завжди position:fixed;top:0,
   без transform-анімації; фон перемикається класом .header-black (js/custom.js,
   поріг 80px, throttle через rAF) — так само, як .header-black уже працює
   на внутрішніх сторінках (style.css:1360, там лишається без змін).
   =========================================================================== */
.index-content .header-content{
  position:fixed !important;
  top:0 !important;
  -webkit-transform:none !important;
  transform:none !important;
  transition:background-color .25s ease,border-color .25s ease;
  background-color:transparent;
  border-bottom-color:transparent;
}
.index-content .header-content.header-black{
  background-color:#060b2e !important;
}
.index-content .header-content.header-fixed{
  /* легасі-клас міг лишитись від старих куків/кешу — більше не рулить позицією */
  background-color:transparent;
}
.index-content .header-content.header-fixed.header-black{
  background-color:#060b2e !important;
}

/* Контейнер шапки на головній = контейнер it-секцій під героєм (1140px на
   1366, 113px поля), а не старий .wrapper (1101px, 133px поля) — зараз вони
   не збігаються. Пошук/меню додатково приколюємо margin-left:auto — на
   випадок, якщо сума ширин елементів шапки (логотип/кнопка/контакти/кошик)
   не дотягує до 100% контейнера (напр. після додавання мобільної кнопки-дзвінка). */
.index-content .header-content > .wrapper{
  max-width:1140px;
}
.header-search{
  margin-left:auto; /* приколює пошук+меню (меню йде одразу за пошуком у звичайному потоці) до правого краю .wrapper */
}

/* Мобільна кнопка-дзвінок: прихована на десктопі, 44×44 на телефоні, між
   основною кнопкою і пошуком (п.1, останній абзац). */
.header-phone-mobile{display:none;}
@media screen and (max-width:650px){
  .header-phone-mobile{
    display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;min-width:44px;flex:none;
    border-left:1px solid rgba(255,255,255,.2);
  }
  .header-black .header-phone-mobile{border-color:rgba(204,204,204,.2);}
  .header-phone-mobile .icon-telephone:before{
    color:rgba(255,255,255,.8);font-size:17px;
  }
  .header-black .header-phone-mobile .icon-telephone:before{color:#999;}
}

/* ===========================================================================
   2) ГОЛОВНА, 390px — секції без бокових полів
   it-services.css:623-627 знімає .it-scope>section на -15px з кожного боку,
   щоб «з'їсти» padding:15px батьківського .content-fix на ВНУТРІШНІХ
   сторінках розділу /it. На головній батько — .content-main-page, у якого
   немає такого padding: той самий від'ємний margin просто тягне секцію за
   межі екрана (саме x=-15, width=420 на 390 з рецензії). .it-container
   усередині й так лишає власні 16px (it-services.css:454) — просто
   повертаємо зовнішній margin у 0 на головній.
   =========================================================================== */
.index-content .it-scope > section,
.index-content .it-scope > .it-bc-band{
  margin-left:0 !important;
  margin-right:0 !important;
}

/* ===========================================================================
   3) ЄДИНА СИСТЕМА СЕКЦІЙ — H2 головної
   .statistics-title (статистика/поломки/пропозиції/корисне) наразі DIN2014,
   по центру, #333. it-h2 (хіти «Для організацій») — ProximaNova 900,
   ліворуч, #060b2e/білий, синя риска 40×3 знизу. Приводимо перший стиль до
   другого — єдина система на всю головну.
   =========================================================================== */
.index-content .statistics-title{
  text-align:left;
  color:#060b2e;
  font-family:"ProximaNova",Arial,sans-serif;
  font-weight:900;
  letter-spacing:.01em;
  line-height:1.22;
}
.index-content .statistics-title::after{
  margin:10px 0 0;
}
@media screen and (max-width:767px){
  .index-content .statistics-title{font-size:24px;line-height:1.25;}
}
/* Єдиний вертикальний ритм між секціями, п.6/3: реальний відступ між
   секціями = padding-bottom обгортки .wrapper.parallax-position (80px,
   style.css:1617) + margin-top наступної секції (теж 80px) = 160px разом —
   саме це й читалось як «~200px порожнечі» під лічильниками. Тиснемо обидві
   половини до єдиного меншого ритму (40+24=64px скрізь), замість лише однієї.
   .statistics{padding-top:…} окремо вже контролюється
   mu-plugins/aliens-frontend-fix.php (!important, поза списком дозволених
   файлів — не чіпаємо). Значення/підписи самих лічильників (statistics-item.php)
   не чіпаємо — рішення власника, лише верстка/відступи. */
.index-content .wrapper.parallax-position{padding-bottom:40px;}
.index-content .problems{margin-top:24px;}
.index-content .proposition{margin-top:24px;}
.index-content .news{margin-top:24px;padding-bottom:0;}

/* ===========================================================================
   4) ОДИН ФУТЕР НА ВЕСЬ САЙТ
   footer.php тепер завжди рендерить колонки (.site-footer-*) замість старого
   розгалуження «IT-колонки / однорядковий footer-list». Темно-синій фон
   замість фото планети; copyright окремим рядком, без накладання
   «Кібератака?» на «© ALIEN LABS» (було через фіксовану footer-wrapper:121px
   при фактично багаторядковому вмісті).
   =========================================================================== */
footer.footer-unified{
  background-image:none !important;
  background-color:#060b2e !important;
  height:auto !important;
}
.footer-unified .footer-wrapper{
  height:auto !important;
  border-top:none !important;
  border-bottom:none !important;
  margin-top:70px;
  padding-top:44px;
}
.footer-unified .footer-content.site-footer-grid{
  display:flex !important;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:36px 56px;
  height:auto !important;
  border:none !important;
  padding-bottom:32px;
}
.footer-unified .footer-logo__wrapper.site-footer-logo{
  border:none !important;
  width:auto !important;
  min-width:0 !important;
  padding:0 !important;
  justify-content:flex-start !important;
}
.footer-unified .site-footer-logo .footer-logo{width:72px;min-width:72px;}
.footer-unified .site-footer-logo img{width:100%;display:block;}

.site-footer-cols{
  display:flex;
  flex-wrap:wrap;
  gap:36px 48px;
  flex:1 1 auto;
}
.site-footer-col{
  display:flex;
  flex-direction:column;
  gap:11px;
  min-width:168px;
}
.site-footer-col-h{
  font-family:"ProximaNova",Arial,sans-serif;
  font-weight:800;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#6f7cad;
  margin-bottom:2px;
}
.site-footer-col a{
  font-family:"ProximaNova",Arial,sans-serif;
  font-size:13.5px;
  font-weight:600;
  color:#cfd8f2 !important;
  text-decoration:none;
}
.site-footer-col a:hover{color:#fff !important;}

.footer-unified .site-footer-contacts{
  border:none !important;
  flex:0 0 auto;
  min-width:176px; /* .header-box__number — Conv_BebasNeue 22-24px — переносився по цифрах у вузькій колонці */
  display:flex !important;
}
.footer-unified .site-footer-contacts .header-box__number{white-space:nowrap;}
.footer-unified .site-footer-contacts .header-box__number,
.footer-unified .site-footer-contacts .header-contacts__email{color:#fff;}
.footer-unified .site-footer-contacts .icon-email:before,
.footer-unified .site-footer-contacts .icon-telephone:before{color:rgba(255,255,255,.55);}

.footer-unified .footer-bottom.site-footer-bottom{
  display:flex !important;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:10px 20px;
  padding:18px 0 26px;
  border-top:1px solid rgba(255,255,255,.1);
}
.footer-unified .footer-bottom__item{color:#8a93c2;font-size:13px;}

@media screen and (max-width:700px){
  .footer-unified .footer-content.site-footer-grid{flex-direction:column;gap:28px;}
  .site-footer-cols{flex-direction:column;gap:26px;}
  .footer-unified .footer-bottom.site-footer-bottom{flex-direction:column;align-items:flex-start;}
}

/* ===========================================================================
   5) ПЕРШИЙ ЕКРАН ГОЛОВНОЇ — H1, бренд-напис, рядок довіри, іконки дверей
   =========================================================================== */
.it-doors-brand{
  font-size:34px;
  line-height:1;
  color:#fff;
  opacity:.9;
  margin-bottom:6px;
  letter-spacing:.02em;
}
/* .it-doors-hero .it-doors-h1 (0,2,0) — свідомо специфічніше за базове
   .it-doors-h1{font-size:34px} в it-services.css (0,1,0; вантажиться пізніше
   через wp_head і за рівної специфічності виграв би). */
.it-doors-hero .it-doors-h1{font-size:46px;}
@media screen and (max-width:767px){
  .it-doors-hero .it-doors-h1{font-size:21px;} /* лишаємо мобільний розмір як у it-services.css */
}
/* .it-doors-tag (рядок «Шацьк і вся Волинь · з 2009 року») — текст лишено
   без змін за рішенням власника (02), лише трохи виразніший відступ/вага. */
.it-doors-tag{margin-top:10px;font-weight:600;}

/* 64px — застосовується лише там, де в it-services.css немає власного
   мобільного перевизначення (.it-door-card .it-icon-circle, <=767px, 40px) —
   на тих самих вузьких екранах тай компактний розмір лишається як є
   (однакова специфічність (0,2,0), it-services.css вантажиться пізніше й
   вигравав би однаково — тут це й бажана поведінка, mobile-картки лишає
   мобільним дотюнінгом іншого агента). */
.it-doors-grid .it-icon-circle{width:64px;height:64px;}
.it-doors-grid .it-icon-circle svg{width:30px;height:30px;}
/* Ремонт — заливка синім (суцільне коло), IT — контурна (існуючий --light) */
.it-icon-circle.it-icon-circle--solid{
  background:#005aff;
  border-color:#005aff;
}
.it-icon-circle.it-icon-circle--solid svg{color:#fff;}

@media screen and (max-width:767px){
  .it-doors-brand{font-size:22px;}
  .it-doors-trust{font-size:11.5px;margin-top:8px;}
}

/* Шов героя → «Для організацій»: плавний градієнт у колір наступної секції
   внизу героя, замість різкого стику фото/темно-синього.
   НЕ через ::after + z-index: it-services.css:579 навмисно опускає
   .it-doors-hero/.it-doors-hero-inner до z-index:0 (щоб шапка з z-index:30
   була клікабельна над героєм) — додатковий шар з z-index:1 ліг би ПОВЕРХ
   контенту героя (H1/картки), а не під ним. Безпечний спосіб — домалювати
   градієнт ЯК ЩЕ ОДИН шар background-image (фон завжди малюється під дітьми
   елемента незалежно від z-index). Повторює існуючі шари it-bg-hero-photo
   (it-services.css:80-89) + свій шар останнім (= зверху фонових шарів,
   під контентом). */
.it-doors-hero.it-bg-hero-photo{
  background-image:
    linear-gradient(90deg, rgba(6,11,46,.62) 0%, rgba(6,11,46,.25) 45%, rgba(6,11,46,.5) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cg stroke='white' stroke-opacity='0.12' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M75 63 L75 87 M63 75 L87 75'/%3E%3C/g%3E%3C/svg%3E"),
    url("../img/backgroundNlo.png"),
    linear-gradient(to bottom, rgba(6,11,46,0) 65%, #060b2e 100%);
  background-position:center,center,center,center;
  background-repeat:no-repeat,repeat,no-repeat,no-repeat;
  background-size:auto,150px 150px,cover,100% 100%;
}

/* ===========================================================================
   6) СТАТИСТИКА «Ремонт електроніки» — мобільна сітка 2×2, іконки 64px,
   НЛО не поверх контенту
   =========================================================================== */
@media screen and (max-width:767px){
  .index-content .statistics-box__item{
    width:50% !important;
    margin-bottom:28px !important;
  }
  .index-content .statistic-box__item-inside-1{width:84px;height:84px;}
  .index-content .statistic-box__item-inside-2{width:70px;height:70px;}
  .index-content .statistic-box__item-inside-3{width:64px;height:64px;}
  .index-content .statistic-box__item-inside-3 [class^="icon-"]{font-size:28px;}
  .index-content .statistics-box__number{width:auto;font-size:30px;}
  .index-content .statistics-box__text-bottom{width:auto;font-size:11px;padding:0 4px;}
}
/* Декор-НЛО не повинен лежати на іконках/тексті лічильників — за замовчуванням
   за контентом; ховаємо зовсім на вузьких/середніх екранах, де йому тісно. */
.nlo-wrapper,
.statistics-box__img{z-index:-1;}
@media screen and (max-width:1600px){
  .index-content .nlo-wrapper{display:none;}
}

/* ===========================================================================
   7) «Статистика поломок по брендах» — кільце: без обрізаних підписів на
   сегментах (легенда праворуч лишається), 7–9 відтінків синього замість
   одного суцільного кольору (style.css:3359 форсує всі точки в #015aff —
   переважаємо через клас highcharts-color-N з !important), менше кільце
   (js/new-js.js: size 594→360px) з перерахованою центральною «пігулкою».
   =========================================================================== */
.problems .highcharts-data-label{display:none !important;}

.problems .highcharts-pie-series .highcharts-color-0{fill:#cfe0ff !important;stroke:#cfe0ff !important;}
.problems .highcharts-pie-series .highcharts-color-1{fill:#aac8ff !important;stroke:#aac8ff !important;}
.problems .highcharts-pie-series .highcharts-color-2{fill:#85b0ff !important;stroke:#85b0ff !important;}
.problems .highcharts-pie-series .highcharts-color-3{fill:#5f97ff !important;stroke:#5f97ff !important;}
.problems .highcharts-pie-series .highcharts-color-4{fill:#3a7fff !important;stroke:#3a7fff !important;}
.problems .highcharts-pie-series .highcharts-color-5{fill:#1f6aff !important;stroke:#1f6aff !important;}
.problems .highcharts-pie-series .highcharts-color-6{fill:#0058f0 !important;stroke:#0058f0 !important;}
.problems .highcharts-pie-series .highcharts-color-7{fill:#0047c2 !important;stroke:#0047c2 !important;}
.problems .highcharts-pie-series .highcharts-color-8{fill:#073a96 !important;stroke:#073a96 !important;}
.problems .highcharts-pie-series .highcharts-color-9{fill:#062c70 !important;stroke:#062c70 !important;}

/* Кільце стало 360px (було 594px) у тому самому 605px-контейнері — центральну
   «пігулку» (.problems-inside__round) перераховуємо під новий радіус:
   центр контейнера той самий (605/2≈302.5), внутрішній отвір 360×0.6=216px. */
.problems-inside__round{
  width:190px !important;height:190px !important;
  top:207px !important;left:207px !important;
  font-size:17px !important;
}
.problems .highcharts-point{stroke-width:5px !important;}

/* ===========================================================================
   8) МОБІЛЬНА ГОЛОВНА — «Кращі пропозиції» 2 колонки з квадратними фото,
   «Корисне» 2 колонки, дати статей читабельні
   =========================================================================== */
@media screen and (max-width:550px){
  /* style.css:2687 форсує .proposition-box-padding .proposition-box__item
     у width:100% на <=550px — саме домашній блок topproduct.php використовує
     клас proposition-box-padding. Повертаємо 2 колонки. */
  .index-content .proposition-box-padding .proposition-box__item{
    width:calc(50% - 10px) !important;
    /* style.css:1725 (@media <=1150px) ставить min-width:200px — на 2
       колонках у вузькому контейнері (<=550px, тут ще й 15px полів
       .proposition-box-padding з обох боків) це 200px було ПІДЛОГОЮ, що
       перебивала наш calc(50%-10px) (~170-185px) і ламала сітку назад в 1
       колонку. */
    min-width:0 !important;
  }
  .index-content .proposition-box-padding .proposition-box__img{
    height:auto !important;
    aspect-ratio:1/1;
  }
  .index-content .proposition-box-padding .proposition-box__img img{
    width:100%;height:100%;object-fit:contain;
  }
  .index-content .proposition-box-padding .proposition-box__text{
    padding-left:4px !important;padding-right:4px !important;
  }
  /* У вузькій колонці (~170px) ціна + кнопка «Купити» в один рядок
     зліплювались — у стовпчик, кнопка на всю ширину. */
  .index-content .proposition-box-padding .proposition-box__buy{
    flex-direction:column;align-items:flex-start;gap:8px;
  }
  .index-content .proposition-box-padding .proposition-box__btn{
    width:100%;text-align:center;
  }
}
@media screen and (max-width:510px){
  /* style.css:1827 форсує .news-box__item у 100% на <=510px — повертаємо 2 колонки. */
  .index-content .news-box__item{width:50% !important;}
}
@media screen and (max-width:650px){
  .index-content .news-box__date{
    font-size:12px !important;
    color:#8a93a8 !important;
    font-family:"ProximaNova",Arial,sans-serif;
    font-weight:600;
  }
}