/* ГНМЦ · Концепт 4 — топбар + головна навігація + мобільне меню */
.topbar{
  background:var(--blue-900); color:#dce8fb;
  font-size:.82rem;
}
.topbar .container{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding-block:.5rem;
}
.topbar-contacts{ display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; }
.topbar-contacts a{ display:inline-flex; align-items:center; gap:.4em; transition:color var(--dur-s); }
.topbar-contacts a:hover{ color:var(--yellow); }
.topbar-contacts svg{ width:15px; height:15px; opacity:.85; }
.topbar-note{ opacity:.75; }
@media (max-width:860px){ .topbar-note{ display:none; } }
@media (max-width:640px){ .topbar .container{ justify-content:center; } .topbar-contacts a:nth-child(3){ display:none; } }

.site-header{
  position:sticky; top:0; z-index:900;
  background:var(--grad-blue);
  transition: background var(--dur-m) var(--ease-in-out), box-shadow var(--dur-m), backdrop-filter var(--dur-m);
}
.site-header .container{
  display:flex; align-items:center; gap:clamp(.6rem,2vw,1.6rem);
  height:var(--header-h);
  max-width:1600px;
  transition:height var(--dur-m) var(--ease-in-out);
}
.site-header.is-compact{
  background:rgba(0,58,130,.72);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 8px 30px rgba(0,20,50,.25);
}
.site-header.is-compact .container{ height:var(--header-h-compact); }

.brand{ display:flex; align-items:center; gap:.7rem; flex-shrink:0; }
.brand img{ width:48px; height:48px; transition:width var(--dur-m), height var(--dur-m); }
.site-header.is-compact .brand img{ width:38px; height:38px; }
.brand-text{ display:flex; flex-direction:column; line-height:1.2; }
.brand-text strong{ font-family:var(--font-head); color:#fff; font-size:.95rem; font-weight:800; }
.brand-text span{ color:#cfe1fb; font-size:.72rem; }
@media (max-width:960px){ .brand-text{ display:none; } }

.main-nav{ display:flex; align-items:center; gap:0; flex:1; min-width:0; }
.main-nav > ul{ display:flex; align-items:center; gap:0; flex-wrap:nowrap; }
.nav-link{
  display:flex; align-items:center; gap:.25em;
  color:#eef4fe; font-family:var(--font-head); font-weight:700; font-size:.78rem;
  padding:.6em .55em; border-radius:var(--radius-s);
  transition:background var(--dur-s), color var(--dur-s);
  white-space:nowrap;
}
.nav-link:hover, .nav-link.is-active{ background:rgba(255,255,255,.14); color:#fff; }
.nav-link[aria-disabled="true"]{ opacity:.6; cursor:help; }
.nav-link svg{ width:14px; height:14px; transition:transform var(--dur-s); }
.has-children:hover .nav-link svg, .has-children.is-open .nav-link svg{ transform:rotate(180deg); }

.has-children{ position:relative; }
.submenu{
  position:absolute; top:100%; left:0; margin-top:.4rem;
  background:#fff; border-radius:var(--radius-m); box-shadow:var(--shadow-l);
  min-width:290px; padding:.5rem; opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity var(--dur-s) var(--ease-out), transform var(--dur-s) var(--ease-out), visibility var(--dur-s);
  z-index:50;
}
.has-children:hover .submenu, .has-children:focus-within .submenu, .has-children.is-open .submenu{
  opacity:1; visibility:visible; transform:none;
}
.submenu li{ position:relative; }
.submenu a, .submenu .sub-toggle{
  display:flex; align-items:center; justify-content:space-between; gap:.5em; width:100%;
  color:var(--ink-soft); font-size:.87rem; font-weight:600;
  padding:.6em .8em; border-radius:8px; background:none; border:none; text-align:left;
  transition:background var(--dur-s), color var(--dur-s);
}
.submenu a:hover, .submenu .sub-toggle:hover{ background:var(--blue-050); color:var(--blue-700); }
.submenu .sub-toggle svg{ width:13px; height:13px; }
.subsubmenu{
  max-height:0; overflow:hidden; padding-left:.6rem;
  transition:max-height var(--dur-m) var(--ease-in-out);
}
.subsubmenu.is-open{ max-height:520px; overflow-y:auto; }
.subsubmenu a{ font-weight:500; font-size:.83rem; }

.header-actions{ display:flex; align-items:center; gap:.5rem; margin-left:auto; flex-shrink:0; }
.icon-btn{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.3);
  background:transparent; color:#fff; transition:background var(--dur-s), transform var(--dur-s);
}
.icon-btn:hover{ background:rgba(255,255,255,.16); transform:translateY(-1px); }
.icon-btn svg{ width:18px; height:18px; }
.search-kbd{
  display:flex; align-items:center; gap:.5rem;
  border:1px solid rgba(255,255,255,.3); border-radius:var(--radius-full);
  color:#fff; padding:.5em .5em .5em 1em; font-size:.82rem;
  background:rgba(255,255,255,.06);
  transition:background var(--dur-s), border-color var(--dur-s);
}
.search-kbd:hover{ background:rgba(255,255,255,.16); border-color:#fff; }
.search-kbd kbd{
  font-family:var(--font-head); background:rgba(255,255,255,.22); border-radius:6px;
  padding:.2em .5em; font-size:.72rem;
}
@media (max-width:1080px){ .search-kbd span{ display:none; } .search-kbd{ padding:.6em; } }

.burger{ display:none; }
@media (max-width:1200px){
  .main-nav{ display:none; }
  .burger{ display:flex; }
}

/* мобільний drawer */
.drawer-backdrop{
  position:fixed; inset:0; background:rgba(0,20,45,.55); backdrop-filter:blur(2px);
  opacity:0; visibility:hidden; transition:opacity var(--dur-m), visibility var(--dur-m); z-index:998;
}
.drawer-backdrop.is-open{ opacity:1; visibility:visible; }
.drawer{
  position:fixed; top:0; right:0; height:100%; width:min(88vw, 380px);
  background:var(--grad-blue-deep); color:#fff; z-index:999;
  transform:translateX(100%); transition:transform var(--dur-m) var(--ease-in-out);
  display:flex; flex-direction:column; box-shadow:-20px 0 50px rgba(0,0,0,.3);
}
.drawer.is-open{ transform:none; }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:1.1rem 1.2rem; border-bottom:1px solid rgba(255,255,255,.15); }
.drawer-body{ padding:.6rem 1rem 2rem; overflow-y:auto; flex:1; }
.drawer-nav > li{ border-bottom:1px solid rgba(255,255,255,.1); }
.drawer-nav a, .drawer-nav .drawer-toggle{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  padding:1em .3em; font-family:var(--font-head); font-weight:700; color:#fff; font-size:1rem;
  background:none; border:none; text-align:left;
}
.drawer-nav svg{ width:16px; height:16px; transition:transform var(--dur-s); }
.drawer-sub{ max-height:0; overflow:hidden; transition:max-height var(--dur-m) var(--ease-in-out); padding-left:.8rem; }
.drawer-sub.is-open{ max-height:900px; }
.drawer-sub a{ font-weight:500; font-size:.9rem; opacity:.9; padding-block:.7em; }
.drawer-toggle.is-open svg{ transform:rotate(180deg); }
.drawer-cta{ margin-top:1.2rem; display:flex; flex-direction:column; gap:.6rem; }