/* Flexe-like header: білий, тонка лінія, багато повітря, мінімум декору */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.header-flex{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  min-height:72px;
  padding: 8px 0;
}

/* Лого — без фону, без плиток */
.region-header .block,
.site-branding, .site-branding *{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.site-branding img{
  max-height: 40px;
  width:auto;
  display:block;
}

/* Меню — прості текстові лінки, як у Flexe */
.site-nav .menu{
  display:flex; gap:20px; margin:0; padding:0; list-style:none;
}
.site-nav .menu > li{margin:0; padding:0;}
.site-nav a{
  display:inline-block;
  padding:10px 4px;
  color:var(--ink);
  text-decoration:none;
  font-weight:500;
  border-bottom:2px solid transparent;
  transition: border-color .15s, color .15s;
}
.site-nav a:hover{
  border-bottom-color: var(--ink);
}
.site-nav .is-active > a{
  border-bottom-color: var(--brand);
  color: var(--ink);
}

/* Мобільно: перенос рядка, трохи менші відступи */
@media (max-width: 900px){
  .site-nav .menu{ gap:14px; flex-wrap:wrap; }
  .site-branding img{ max-height: 36px; }
}
@media (max-width: 640px){
  .site-nav a{ padding:8px 2px; }
}