/*
Theme Name: mi-wp
Theme URI: https://microinvest.by/
Author: SofTeam
Author URI: https://microinvest.by/
Description: Светлая тема microinvest.by — локальные системы автоматизации торговли и общепита (MiDays, «Микроинвест Склад ПРО», дополнения к 1С, торговое оборудование).
Version: 1.0.7
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mi-wp
Tags: light, e-commerce, woocommerce, custom-logo, custom-menu
*/

.header-nav{background:var(--color-panel);border-bottom:1px solid var(--color-line)}
.header-nav .primary-menu{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;max-width:1200px;margin:0 auto;padding:.55rem 1rem;list-style:none}
.header-nav .primary-menu li{position:relative}
.header-nav .primary-menu a{display:inline-block;padding:.45rem .7rem;border-radius:10px;color:var(--color-snow);text-decoration:none;font-size:14px;font-weight:500}
.header-nav .primary-menu a:hover{color:var(--color-accent);background:var(--color-surface)}
.header-nav .sub-menu{display:none;position:absolute;left:0;top:100%;min-width:230px;margin:0;list-style:none;background:var(--color-panel);border:1px solid var(--color-line);border-radius:12px;padding:.4rem;box-shadow:0 12px 30px -14px rgba(0,0,0,.45)}
.header-nav li:hover>.sub-menu{display:block}
.mobile-menu{display:none}
.site-main,.content-area{max-width:1200px;margin:0 auto;padding:1.5rem 1rem}
.woocommerce ul.products,.woocommerce-page ul.products{display:grid!important;gap:1.5rem!important;list-style:none;margin:0;padding:0}
.woocommerce ul.products li.product{float:none!important;width:auto!important;position:static;background:var(--color-panel);border:1px solid var(--color-line);border-radius:14px;padding:1rem}
.woocommerce ul.products li.product img{border-radius:10px;width:100%;height:auto}
.woocommerce ul.products li.product .button,.woocommerce a.button{display:inline-block;background:var(--color-accent);color:#0d1117;padding:.5rem 1rem;border-radius:10px;text-decoration:none;font-weight:600;margin-top:.75rem}
.archive-post-item{background:var(--color-panel);border:1px solid var(--color-line);border-radius:14px;padding:1.5rem;margin-bottom:1.5rem}
.entry-title{font-size:1.25rem;font-weight:600;margin-bottom:.5rem}
.entry-title a{color:var(--color-snow);text-decoration:none}
.entry-title a:hover{color:var(--color-accent)}

/* reveal: появление секций (inline-скрипт в footer.php вешает .is-in) */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.is-in{opacity:1;transform:translateY(0)}

/* стикеры чека float-a/float-b (страховка, если main.css скомпилирован до v2) */
.float-a{animation:mi-float-a 7s ease-in-out 1.9s infinite}
@keyframes mi-float-a{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-8deg) translateY(-10px)}}
.float-b{animation:mi-float-b 6s ease-in-out 2.3s infinite}
@keyframes mi-float-b{0%,100%{transform:rotate(6deg) translateY(0)}50%{transform:rotate(6deg) translateY(-8px)}}

@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .float-a,.float-b{animation:none}
}

/* === DROPDOWN FIX === */
nav .sub-menu{display:none;position:absolute;left:0;top:100%;min-width:230px;margin:0;list-style:none;background:var(--color-panel);border:1px solid var(--color-line);border-radius:12px;padding:.4rem;box-shadow:0 12px 30px -14px rgba(0,0,0,.45);z-index:50}
nav li:hover>.sub-menu{display:block}
nav li{position:relative}
/* === END DROPDOWN FIX === */
.nav-link{white-space:nowrap}

/* Hover animation for nav-link */
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-accent-deep);
    transition: width .25s ease;
}
/* === BTN SECONDARY 11.09 === */
.btn-secondary{background:transparent;color:var(--color-ink);border:1px solid var(--color-line);transition:all .2s ease}
.btn-secondary:hover{background:var(--color-accent);color:var(--color-ink);border-color:var(--color-accent)}
.btn-secondary svg{transition:transform .2s ease}
.btn-secondary:hover svg{transform:translateX(3px)}
/* === RELATED CASES ROW 13.09 === */
.mi-related-row{display:flex;gap:1.5rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.5rem}
.mi-related-row>article{flex:0 0 85%;scroll-snap-align:start}
.mt-auto{margin-top:auto}
@media(min-width:768px){.mi-related-row{display:grid;grid-template-columns:repeat(3,1fr);overflow:visible}.mi-related-row>article{flex:none}}

/* === ASPECT 21/9 for WIDE NEWS CARD 16.09 === */
.aspect-\[21\/9\] { aspect-ratio: 21/9; }
/* CONTACTS FORM FIX 16.09 */
.max-w-4xl input:not([type="submit"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),.max-w-4xl textarea{width:100%;border:1px solid #cfd8c2;border-radius:10px;padding:.65rem .9rem;background:#fff;color:#1a1a1a;margin:.35rem 0 1rem;font:inherit}
.max-w-4xl textarea{min-height:130px}
.max-w-4xl input[type="submit"],.max-w-4xl button[type="submit"]{display:inline-block;border:0;border-radius:12px;padding:.8rem 2.4rem;color:#122600;font-weight:800;cursor:pointer;background:linear-gradient(110deg,#a3e635 25%,#e4ffb0 50%,#a3e635 75%);background-size:200% 100%;animation:mi-shine 2.6s linear infinite}
@keyframes mi-shine{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* === P51 MOBILE FIX === */
@media (max-width: 639px) {
    .flex.items-center.gap-2\.5[style*="space-between"] {
      justify-content: flex-end !important;
    }
}

/* === WOO CATALOG FIX 11.09 === */
ul.products::before,ul.products::after{content:none;display:none}
.woocommerce ul.products li.product{background:none;border:none;padding:0;border-radius:0}
/* === UNIFORM PRODUCT CARDS 11.09 === */
.woocommerce ul.products li.product .card-mi p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* === CATALOG CARDS FINAL 11.09 === */
ul.products{align-items:stretch;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
ul.products li.product{display:flex;height:100%}
ul.products li.product .card-mi{width:100%;height:100%}
ul.products li.product .card-mi{background:var(--color-panel, #ffffff);border:1px solid var(--color-line, #e5e7eb);box-shadow:0 1px 3px rgba(0,0,0,0.05);}
ul.products li.product .card-mi figure{aspect-ratio:1/1;margin-bottom:1.25rem}
ul.products li.product .card-mi figure img{object-fit:contain}
@media(max-width:768px){ul.products{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){ul.products{grid-template-columns:1fr}}
/* === END CATALOG CARDS FINAL === */
.woocommerce ul.products::before,.woocommerce ul.products::after,ul.products::before,ul.products::after{content:none!important;display:none!important}
@media(min-width:1024px){ul.products{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1024px){.woocommerce ul.products{grid-template-columns:repeat(4,1fr)}}
ul.products li.product .card-mi{padding:1rem}
ul.products li.product .card-mi figure{margin-bottom:.75rem}
ul.products li.product .card-mi h3{margin-top:.75rem}
header li.current-menu-item>.nav-link:not(:hover){color:var(--color-ink)!important}
header li.current-menu-item>.nav-link:not(:hover):after{transform:scaleX(0)!important}
/* --- новости: контент во всю ширину, картинки как в каталоге --- */
.single-post .entry-title,
.single-post .text-snow { max-width: none !important; }
.single-post .text-snow img {
  display: block; float: none !important; margin: 1.75rem auto;
  max-width: min(100%, 900px); width: auto; height: auto;
  border-radius: 14px;
}
.single-post .text-snow > img:first-child { margin-top: 0; }
.single-post .text-snow p { margin-bottom: 1rem; }
/* --- новости: контент во всю ширину, картинки как в каталоге --- */
.single-post .entry-title,
.single-post .text-snow { max-width: none !important; }
.single-post .text-snow img {
  display: block; float: none !important; margin: 1.75rem auto;
  max-width: min(100%, 900px); width: auto; height: auto;
  border-radius: 14px;
}
.single-post .text-snow > img:first-child { margin-top: 0; }
.single-post .text-snow p { margin-bottom: 1rem; }
/* --- карточки: ровный низ и одинаковые кнопки --- */
.mi-clamp-2, .mi-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.mi-clamp-2 { -webkit-line-clamp: 2; }
.mi-clamp-3 { -webkit-line-clamp: 3; }
.mi-card-foot { margin-top: auto; padding-top: 1rem; }
.btn-sm { padding: .78rem 1.1rem; font-size: 13.5px; min-height: 44px; border-radius: 10px; }

/* === MI-MOBILE-HEADER 2026-10-31 ======================================
   Мобильная шапка (<1024px): бургер слева, логотип по центру, корзина справа.
   Причина: на 320-414px правая группа (соц-иконки + корзина + бургер) не
   сжималась, документ распирало до 397px, бургер уходил за правый край.
   Соц-иконки на мобиле скрыты в шапке (есть в футере), кнопка "Рассчитать"
   есть внутри мобильной панели [data-mi-mobile].
   ВАЖНО: в разметке бургер лежит внутри .mi-header-actions, поэтому правой
   группе ставится display:contents — её дети становятся grid-элементами
   .mi-header-bar, и позицию задаёт CSS Grid (DOM не переставляется). */
.mi-header-social { display: inline-flex; align-items: center; gap: .625rem; }

@media (max-width: 1023.98px) {
  .mi-header-bar {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem;
    align-items: center;
    gap: .75rem;
    padding: .55rem 1rem;
    min-height: 56px;
  }
  .mi-header-bar > .mi-header-actions { display: contents; }
  .mi-header-bar > .mi-header-actions > .mi-burger {
    grid-area: 1 / 1;
    justify-self: start;
    margin: 0;
    flex: none;
  }
  .mi-header-bar > .mi-header-logo {
    grid-area: 1 / 2;
    margin: 0;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
  }
  .mi-header-bar > .mi-header-logo .leading-none > span:last-child { display: none; }
  .mi-header-bar > .mi-header-logo img { max-height: 36px; width: auto; }
  .mi-header-bar > .mi-header-actions > div {
    grid-area: 1 / 3;
    margin: 0;
    justify-self: end;
    gap: 0;
  }
  .mi-header-bar > .mi-header-actions > div > div {
    margin-top: 0 !important;
    justify-content: flex-end !important;
  }
  .mi-header-bar > .mi-header-actions .cart-icon svg { width: 24px; height: 24px; }
  .mi-header-bar .mi-header-cta,
  .mi-header-bar .mi-header-social { display: none !important; }
}

@media (max-width: 359.98px) {
  .mi-header-bar > .mi-header-logo .leading-none > span:first-child { font-size: 11px; }
}

/* MI-MOBILE-HEADER 2026-10-31, дополнение: на самых узких экранах (<=359px)
   H1 hero в Unbounded сжат до 26px — слово «Автоматизация» в 32px занимает
   324px и распирало документ до 348px при вьюпорте 320px. */
@media (max-width: 359.98px) {
  h1.mt-6.font-display { font-size: 26px; }
  .reveal { min-width: 0; }
}

/* MI-MOBILE-HEADER 2026-10-31, дополнение 2: кнопки на <=359px переносят текст.
   .btn имеет white-space:nowrap, из-за чего «Сравнить с облачными системами»
   занимает 315px и распирает документ до 348px при вьюпорте 320px. */
@media (max-width: 359.98px) {
  .btn { white-space: normal !important; text-align: center; }
}

/* === MI-TAP-FIX 2026-10-31 ============================================
   Жалоба владельца: «на телефоне кнопки не нажимаются с первого раза».
   Причина №1 — в JS: в assets/js/calculator.js на одни и те же кнопки висели
   ДВА обработчика, touchstart и click. Один тап давал touchstart+click,
   переключатель срабатывал дважды (вкл→выкл) — кнопка выглядела «мёртвой»,
   а «+»/«−» прыгали через шаг. Дубли сняты, JS слушает только click.
   Причина №2 — 300 мс задержки тапа в мобильных браузерах (ожидание
   double-tap-zoom). Её убирает touch-action: manipulation — только на
   элементах управления, скролл и pinch-zoom страницы не затрагиваются.
   Зона нажатия: не меньше 44×44 px (Apple HIG / Google Material). */
a[href], button, [role="button"], input[type="submit"], input[type="button"],
label[for], .btn, .opt-btn, .step-btn, .mi-burger, .cart-icon,
#mi-fab, #close-modal, .nav-link, .mi-mobile-link {
  touch-action: manipulation;
}
.btn, .opt-btn, .step-btn, #close-modal, .mi-burger, .cart-icon, #mi-fab {
  -webkit-tap-highlight-color: rgba(188, 228, 60, .3);
}

@media (max-width: 1023.98px) {
  /* пальцем сложно попасть в низкие элементы */
  .btn, .opt-btn, .nav-link, .mi-mobile-link { min-height: 44px; }
  .opt-btn { display: flex; flex-direction: column; justify-content: center; }
  #close-modal {
    min-width: 44px; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
  }
}

/* На устройствах без мыши :hover «залипает» на первом тапе и элемент
   подпрыгивает под пальцем. Отключаем только transform — вид не меняется. */
@media (hover: none) {
  .opt-btn:hover, .btn-primary:hover, .btn-secondary:hover,
  .card-squish:hover, .step-btn:hover { transform: none; }
}
/* === /MI-TAP-FIX ==================================================== */

/* === MI-FAB / CF7-MODAL 2026-10-31 =====================================
   Кнопка-конверт #mi-fab и модалка #mi-cf7-modal свёрстаны классами Tailwind
   (w-14 h-14 fixed bottom-6 right-6 z-50 / z-[60] max-w-lg w-11/12 bg-black/60),
   которых в собранном main.css НЕТ: кнопка получалась 0×0 px (невидима и
   ненажимаема), а модалка — без position:fixed и без z-index ниже липкой
   шапки (у неё z-index 100). Задаём геометрию явным CSS, независимо от
   сборки Tailwind. Стрелки/размеры не меняют внешний вид, только чинят. */
#mi-fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; min-width: 56px; min-height: 56px;
  padding: 0; border: 0; border-radius: 9999px;
  background: var(--color-accent, #bce43c); color: #fff;
  box-shadow: 0 10px 24px -10px rgba(20, 24, 29, .45);
  cursor: pointer; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform .2s ease;
}
#mi-fab:hover { transform: scale(1.06); }
#mi-fab:active { transform: scale(.94); }
#mi-fab svg { width: 24px; height: 24px; display: block; }
@media (max-width: 1023.98px) { #mi-fab { right: 14px; bottom: 14px; } }

#mi-cf7-modal {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  padding: 16px; overflow-y: auto;
  background: rgba(0, 0, 0, .6);
}
#mi-cf7-modal.flex { display: flex; }
#mi-cf7-modal.hidden { display: none !important; }
#mi-cf7-modal > div {
  position: relative; background: #fff; color: #1a1a1a;
  width: min(100%, 520px); max-height: calc(100vh - 32px); overflow: auto;
  border-radius: 14px; padding: 24px;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .45);
}
#close-modal {
  position: absolute; top: 6px; right: 6px;
  width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; line-height: 1; color: #5f6873;
  background: transparent; border: 0; border-radius: 10px; cursor: pointer;
}
#close-modal:hover { color: #14181d; background: #e9ebe0; }
/* поля формы заявки: те же размеры, что у формы в контактах (палец попадает) */
#mi-cf7-modal input:not([type="submit"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
#mi-cf7-modal textarea {
  width: 100%; border: 1px solid #cfd8c2; border-radius: 10px;
  padding: .65rem .9rem; margin: .35rem 0 1rem;
  background: #fff; color: #1a1a1a; font: inherit; min-height: 44px;
}
#mi-cf7-modal textarea { min-height: 110px; }
#mi-cf7-modal input[type="submit"], #mi-cf7-modal button[type="submit"] {
  display: block; width: 100%; border: 0; border-radius: 12px;
  padding: .85rem 1.2rem; min-height: 48px;
  color: #122600; font-weight: 800; cursor: pointer;
  background: var(--color-accent, #bce43c);
  touch-action: manipulation;
}
#mi-cf7-modal p { margin: .25rem 0; }
/* === /MI-FAB / CF7-MODAL ============================================= */

/* === MI-MODAL-CALL 2026-10-31 ==========================================
   Модальное окно «Заказать звонок» (кнопка-конверт и «Позвонить сейчас»):
   заголовок + два быстрых действия «Позвонить» / Viber, ниже форма
   ФИО / Телефон / Комментарий — как в блоке «Отправить заявку» на главной. */
.mi-modal-head { margin-bottom: 18px; padding-right: 44px; }
.mi-modal-title {
  margin: 0 0 4px; font-family: var(--font-display, "Unbounded", system-ui, sans-serif);
  font-size: 20px; font-weight: 700; line-height: 1.2; color: #14181d;
}
.mi-modal-sub { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: #5f6873; }
.mi-call-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mi-call-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: .7rem 1rem; border: 1px solid #cfd8c2;
  border-radius: 12px; background: #f3f4ee; color: #14181d;
  font-size: 14px; font-weight: 600; text-decoration: none;
  touch-action: manipulation;
}
.mi-call-btn:hover { border-color: #6d9a10; color: #122600; background: #e9f3cf; }
.mi-call-btn:active { transform: scale(.98); }
#mi-cf7-modal label {
  display: block; margin-bottom: 6px; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #5f6873;
}
#mi-cf7-modal .wpcf7-not-valid-tip { margin: -8px 0 10px; font-size: 12px; color: #b91c1c; }
#mi-cf7-modal .wpcf7-response-output { margin: 4px 0 0; font-size: 13px; }
/* === /MI-MODAL-CALL ================================================== */