/* ===========================================================================
   wide-screens.css (2026-10-21) — пропорційне масштабування фронтенду на
   великих вікнах. Тема верстається фіксованою шириною (.wrapper
   max-width:1101px, .it-container max-width:1180px), тож на 1920/2560/3840
   CSS-px контент лишається вузькою смугою посередині екрана.

   Підхід: html{zoom:N} масштабує все (шрифти, відступи, контейнери) разом —
   так контейнер займає ~65-75% ширини вікна на будь-якому великому екрані,
   без переписування самої верстки.

   Важливо: zoom НЕ змінює те, що бачать @media-запити як ширину вікна — усі
   внутрішні max-width-медіазапити в style.css/it-services.css (розраховані
   на вузькі/мобільні екрани, напр. max-width:1150px) продовжують рахувати
   від РЕАЛЬНОЇ ширини вікна. Тобто на 1920+ вони не спрацьовують випадково
   (1920 > 1150 завжди), і зменшений ефективний layout-розмір після zoom на
   це не впливає.

   Підключається ОДНИМ рядком лише на фронтенді — includes/blocks/header-head.php.
   Лише style.css/wp.css/modern-shop.css там зчитуються так само (filemtime).
   =========================================================================== */

@media screen and (min-width:1700px){
  html{zoom:1.15;--wz:1.15;}
}
@media screen and (min-width:2000px){
  html{zoom:1.35;--wz:1.35;}
}
@media screen and (min-width:2400px){
  html{zoom:1.6;--wz:1.6;}
}
@media screen and (min-width:3000px){
  html{zoom:2;--wz:2;}
}
@media screen and (min-width:3600px){
  html{zoom:2.3;--wz:2.3;}
}

/* ---------------------------------------------------------------------------
   Футер на широких екранах: 9 пунктів .footer-list (Каталог / Послуги / IT
   для організацій / Вартість послуг / Доставка і оплата / Оферта / Статус
   ремонту / Політика конфіденційності / Контакти) стискаються в 2 рядки на
   БУДЬ-якій ширині через modern-shop.css:.footer-list{flex-wrap:wrap!important}
   — .footer .wrapper завжди max-width:1101px (70.7% = ~778px на сам список),
   а природна ширина всіх 9 пунктів в один рядок ~1270px. zoom тут не
   допомагає (масштабує пропорційно, логічних px не додає) — тому замість
   zoom розширюємо сам контейнер футера, як і передбачено запасним варіантом
   (max-width контейнерів). Лише на широких екранах — на ≤1366 і нижче не
   чіпаємо (там лишається поточна поведінка в 2 рядки).
   --------------------------------------------------------------------------- */
@media screen and (min-width:1700px){
  footer .wrapper{max-width:1500px;}
  .footer-list{flex-wrap:nowrap !important;justify-content:space-between !important;}
  .footer-list__item{margin-right:0 !important;}
}

/* 21.10.2026: під zoom одиниці vh теж множаться (100vh × zoom) — перший екран
   «дві двері» на 4K ставав удвічі вищим за вікно. Ділимо на коефіцієнт. */
@media screen and (min-width:1700px){
  .it-doors-hero{min-height:calc(100vh / var(--wz,1)) !important;}
}

/* 21.10.2026: головна — шапка після прокрутки темна (як у розділі IT), а не біла,
   бо під нею темні секції «дві двері» і «Для організацій». Застосовується на всіх ширинах. */
@media screen{
  body.main-body .header-content.header-black{background-color:#060b2e;border-bottom:1px solid rgba(255,255,255,.08)}
  body.main-body .header-black .header-wrapper{border-bottom-color:rgba(255,255,255,.08)}
  body.main-body .header-black .header-logo img:first-child{display:block}
  body.main-body .header-black .header-logo img:last-child{display:none}
  body.main-body .header-black .header-btn,body.main-body .header-black .header-contacts,
  body.main-body .header-black .header-logo__wrapper,body.main-body .header-black .header-menu,
  body.main-body .header-black .header-search,body.main-body .header-black .header-basket{border-color:rgba(255,255,255,.12)}
  body.main-body .header-black .header-box__number,body.main-body .header-black .header-contacts__email,
  body.main-body .header-black .menu-icon__text{color:#fff}
  body.main-body .header-black .icon-email:before,body.main-body .header-black .icon-telephone:before{color:rgba(255,255,255,.55)}
  body.main-body .header-black .icon-lyp:before{color:#fff}
  body.main-body .header-black .menu-icon__box span{background:#fff}
}
@media screen{body.main-body .header-black .header-basket .icon-basket::before{color:#fff}body.main-body .header-black .header-basket .icon-basket:hover::before{color:#ccdeff}}