/* ============================================================
   INVERSIS — Mega-menu (wariant 1c)
   Wzbogaca istniejącą .main-nav: hover-dropdown na desktopie
   (granatowa kolumna + lista produktów + „Zobacz wszystko"),
   oraz hamburger + rozwijana harmonijka na mobile.
   Kolory wpisane wprost — działa w kontekście home-restyle.css
   (--orange…) i product-restyle.css (--inv-orange…).
   Budowane przez js/mega-menu.js (jedno źródło produktów).
   ============================================================ */

/* ---- pozycja nawigacji z rozwijaniem ---- */
.main-nav .nav-item{position:relative;display:inline-flex;align-items:center;gap:5px}
.mm-chev{width:9px;height:9px;flex:none;transition:transform .2s ease}
.main-nav .nav-item.open .mm-chev{transform:rotate(180deg)}

/* ---- desktop dropdown (1a — minimalny panel-lista) ---- */
.mm-dd{
  position:absolute;top:100%;left:0;
  min-width:250px;transform:translateY(20px);
  background:#fff;border:1px solid #E3E1DA;border-top:3px solid #8E1F1F;border-radius:0 0 4px 4px;
  padding:6px;
  box-shadow:0 18px 40px -16px rgba(26,39,66,.32);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,transform .18s ease;
  z-index:120;
}
.main-nav .nav-item.open .mm-dd{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
/* niewidzialny „mostek" żeby kursor nie gubił menu w drodze w dół */
.mm-dd::before{content:"";position:absolute;top:-25px;left:0;right:0;height:25px}

.mm-dd a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 14px;font-size:13px;font-weight:500;color:#1A2233;text-decoration:none;text-transform:none;letter-spacing:.2px;border-radius:3px;line-height:1.3;white-space:nowrap;transition:background .12s,color .12s}
.mm-dd a:hover{background:#EFEDE6;color:#8E1F1F}
.mm-dd a svg{width:16px;height:8px;flex:none;opacity:0;transform:translateX(-4px);transition:opacity .12s,transform .12s}
.mm-dd a:hover svg{opacity:1;transform:translateX(0)}

/* ---- hamburger (ukryty na desktopie) ---- */
.mm-burger{display:none;width:28px;height:28px;flex-direction:column;justify-content:center;gap:5px;background:none;border:0;padding:0;cursor:pointer}
.mm-burger span{display:block;height:2px;width:100%;background:#1A2742;border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.mm-burger.x span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mm-burger.x span:nth-child(2){opacity:0}
.mm-burger.x span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---- mobile drawer ---- */
.mm-backdrop{position:fixed;inset:0;background:rgba(26,39,66,.5);opacity:0;visibility:hidden;transition:opacity .25s ease;z-index:998}
.mm-backdrop.open{opacity:1;visibility:visible}
.mm-drawer{position:fixed;top:0;right:0;height:100%;width:min(86%,360px);background:#fff;z-index:999;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;display:flex;flex-direction:column}
.mm-drawer.open{transform:translateX(0)}
.mm-drawer__head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-top:3px solid #1A2742;border-bottom:1px solid #E3E1DA}
.mm-drawer__logo{display:inline-flex;align-items:center;line-height:0}
.mm-drawer__logo img{height:26px;width:auto;display:block}
.mm-drawer__close{background:none;border:0;font-size:26px;line-height:1;color:#1A2742;cursor:pointer;padding:0 4px}
.mm-drawer nav{padding:4px 0}
.mm-mitem{border-bottom:1px solid #E3E1DA}
.mm-mrow{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 22px;background:none;border:0;font:600 13px/1.2 'Montserrat',sans-serif;letter-spacing:1px;color:#1A2233;text-transform:uppercase;text-align:left;text-decoration:none;cursor:pointer}
.mm-mitem.open>.mm-mrow{color:#8E1F1F}
.mm-mrow .mm-chev{width:12px;height:12px;color:#5A6A82}
.mm-mitem.open>.mm-mrow .mm-chev{transform:rotate(180deg);color:#8E1F1F}
.mm-msub{max-height:0;overflow:hidden;transition:max-height .3s ease;background:#EFEDE6}
.mm-mitem.open>.mm-msub{max-height:460px}
.mm-msub__inner{border-left:3px solid #8E1F1F;margin:0 0 6px}
.mm-msub__inner a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 22px;font-size:13px;font-weight:500;color:#1A2233;text-decoration:none;text-transform:none;letter-spacing:.2px}
.mm-msub__inner a svg{width:15px;height:8px;flex:none;opacity:.4}

/* ---- logo nie kurczy się (dłuższe etykiety nawigacji w UA/AM) ---- */
.site-header .logo-link{flex:0 0 auto}
.site-header .logo{flex:0 0 auto}
.site-header .header-actions{flex:0 0 auto}

/* ---- DESKTOP: pełne poziome menu, normalna czcionka (bez ściskania,
        bez zwijania). Logo i przełącznik języka mają stałe miejsce
        (flex:0 0 auto powyżej). Nav wypełnia środek i ma min-width:0,
        żeby NIGDY nie wypchnąć guzika języka z prawego rogu. ---- */
.site-header .main-nav{flex-wrap:nowrap;min-width:0}

/* ---- HAMBURGER tylko w wersji mobilnej (≤1024px). ---- */
@media (max-width: 1024px){
  .main-nav{display:none !important}
  .mm-burger{display:flex;order:0}
  .site-header .header-actions{margin-left:auto}
  /* zjazd w dół, żeby wyspa/notch iPhone'a nie zasłaniała logo */
  .site-header .header-inner{padding-top:max(18px, env(safe-area-inset-top))}
}

/* ---- TABLET (~600–1024px): hamburger jako większy guzik obok PL,
        dla symetrii z przełącznikiem języka. ---- */
@media (min-width: 600px) and (max-width: 1024px){
  .site-header .header-actions{order:2}
  .site-header .mm-burger{
    order:3; width:52px; height:34px; gap:6px;
    border:1px solid var(--border,#E3E1DA); border-radius:6px;
    align-items:center; padding:0 14px; margin-left:12px;
  }
  .site-header .mm-burger span{width:100%}
  .site-header .mm-burger.x span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .site-header .mm-burger.x span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ---- iPHONE / małe telefony (≤480px): logo minimalnie mniejsze, żeby
        zmieściło się w jednym rzędzie z hamburgerem, równo z „PL", oraz
        większy zjazd w dół pod wyspę. ---- */
@media (max-width: 480px){
  .site-header .header-inner{padding-top:max(30px, env(safe-area-inset-top)); gap:14px}
  .site-header .logo{height:30px}
  .site-header .mm-burger{width:24px;height:22px;gap:5px}
}

/* ---- Wersja ormiańska: etykiety menu są znacznie dłuższe, przez co
        pierwsza pozycja („Ciepłownictwo i para") wchodzi zbyt blisko logo.
        Na desktopie minimalnie zmniejszamy czcionkę i ściskamy odstępy
        w GÓRNYM menu, żeby całość ładnie się zmieściła z marginesem od
        logo. Dotyczy tylko górnej nawigacji i tylko AM. ---- */
@media (min-width: 1025px){
  html[lang="hy"] .site-header .main-nav{gap:22px}
  html[lang="uk"] .site-header .main-nav{gap:32px}
  html[lang="hy"] .site-header .main-nav a{font-size:11.5px;letter-spacing:.5px}
  html[lang="uk"] .site-header .main-nav a{font-size:12px;letter-spacing:.7px}
}