/* ============================================================
   HYDROTECH — єдина шапка сайту (desktop dropdown + mobile menu)
   Підключається на всіх внутрішніх сторінках. Самодостатній:
   кольори задані літералами, без залежності від :root сторінки.
   Поведінка (кліки, aria) — у form-handler.js.
   ============================================================ */

/* UA/EN перемикач — активний стан (ставить lang-persist.js) */
.lang-active { background: #0f172a !important; color: #fff !important; }

/* Frosted-glass: напівпрозорий білий + backdrop-blur у верхній смузі
   та шторці мобільного меню. Fallback — щільніший фон без блюру. */
nav.bg-white, nav.\[bg-white\/90\], nav[class*="bg-white"] { background-color: rgba(255,255,255,0.92); }
#mobileMenu { background-color: rgba(255,255,255,0.92); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    nav[class*="bg-white"] { background-color: rgba(255,255,255,0.78); }
    #mobileMenu { background-color: rgba(255,255,255,0.80); }
}

/* Затемнення контенту під відкритою шторкою меню */
body.menu-open::after {
    content: ''; position: fixed; inset: 0; z-index: 90;
    background: rgba(8,15,30,0.28);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body.menu-open::after { background: rgba(8,15,30,0.55); }
}

/* ---- Desktop dropdown «Каталог» ---- */
.nav-dropdown { position: relative; }
.nav-caret { transition: transform .2s ease; }
.nav-dropdown:hover .nav-caret,
.nav-dropdown:focus-within .nav-caret { transform: rotate(180deg); }
.nav-submenu {
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 300px; padding: 10px;
    background: #fff; border: 1px solid #e8edf5; border-radius: 16px;
    box-shadow: 0 20px 40px -12px rgba(15,23,42,.22);
    display: flex; flex-direction: column; gap: 2px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    z-index: 60;
}
/* Невидимий місток, щоб курсор не "падав" у щілині між тригером і меню */
.nav-submenu::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.nav-dropdown:hover .nav-submenu,
.nav-dropdown:focus-within .nav-submenu {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.nav-submenu a {
    display: flex; flex-direction: column; gap: 2px;
    padding: 10px 14px; border-radius: 10px;
    text-transform: none; letter-spacing: normal;
    transition: background .15s ease;
}
.nav-submenu a:hover, .nav-submenu a:focus-visible { background: #f1f5f9; }
.ns-title { font-size: 13px; font-weight: 800; color: #0f172a; transition: color .15s ease; }
.nav-submenu a:hover .ns-title, .nav-submenu a:focus-visible .ns-title { color: #f97316; }
.ns-desc { font-size: 11px; font-weight: 500; color: #64748b; }
.ns-all {
    margin-top: 4px; padding-top: 12px; border-top: 1px solid #eef2f7;
    color: #f97316 !important; font-weight: 800; font-size: 12px;
    border-radius: 0 0 10px 10px;
}

/* ---- Mobile accordion «Каталог» ---- */
.mobile-acc-trigger {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; text-align: left; background: none; border: 0;
    padding: 0; cursor: pointer;
}
.mobile-acc-caret { font-size: 10px; transition: transform .25s ease; }
.mobile-acc-trigger[aria-expanded="true"] .mobile-acc-caret { transform: rotate(180deg); }
.mobile-acc-panel {
    display: flex; flex-direction: column; gap: 12px;
    padding-left: 1rem; border-left: 2px solid #ffe3d3;
    max-height: 0; margin-top: 0; opacity: 0; overflow: hidden;
    transition: max-height .3s ease, opacity .25s ease, margin-top .25s ease;
}
.mobile-acc-panel.open { max-height: 360px; margin-top: 14px; opacity: 1; }

@media (prefers-reduced-motion: reduce){
    .nav-caret, .nav-submenu, .mobile-acc-caret, .mobile-acc-panel { transition: none; }
}