/* =========================
   Narodna Rada — Header (final)
   ========================= */

/* --- Color tokens --- */
:root{
  --ua-blue: #1f6fff;
  --ua-yellow: #ffd33d;

  --light-bg: #f8fbff;         /* нижній поверх */
  --light-fg: #0b1522;
  --light-fg-subtle:#334155;
  --light-hover:#e9eef7;
  --light-border:#d9e1ef;

  --dropdown-shadow: 0 14px 30px rgba(15,23,42,.08);

  /* середній (декор) */
  --mid-grad-start: #e31b23;
  --mid-grad-end: #0b0b0d;
}

/* ================= HEADER WRAPPER ================= */
.nr-header{
  position: sticky; top: 0; z-index: 1000;
  background: linear-gradient(90deg, var(--ua-blue) 0%, var(--ua-yellow) 100%);
  border-bottom: 1px solid rgba(0,0,0,.05);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  backdrop-filter: saturate(1.1);
  transition: box-shadow .2s ease, transform .2s ease, backdrop-filter .2s ease;
}
.nr-header.is-scrolled{
  box-shadow: 0 14px 36px rgba(0,0,0,.18);
  backdrop-filter: blur(6px) saturate(1.2);
}

/* ================= TOP BAR ================= */
.nr-header__top{
  min-height: 72px;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px;
}
.nr-brand{ display:flex; align-items:center; gap:14px; color:#0b1522; text-decoration:none; }
.nr-brand__logo{ width:42px; height:42px; border-radius:12px; object-fit:cover; box-shadow:0 6px 18px rgba(0,0,0,.25); }
.nr-brand__text{ display:flex; flex-direction:column; line-height:1.02; }
.nr-brand__title{
  font-family: "Unbounded","Montserrat Alternates",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-weight: 900; letter-spacing:.2px;
  font-size: clamp(1.6rem, 4.2vw, 2.8rem);
  color: #0b1522;
  text-shadow: 0 1px 0 rgba(255,255,255,.25), 0 2px 14px rgba(0,0,0,.12);
}
.nr-brand__subtitle{ display:none !important; }

.nr-topnav{ margin-left:auto; display:flex; align-items:center; gap:14px; }

/* соц-іконки */
.nr-social{ display:inline-flex; align-items:center; gap:14px; }
.nr-social__link{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:10px;
  color:#fff; background: rgba(0,0,0,.22);
  transition: transform .15s ease, background .2s ease, color .2s ease;
}
.nr-social__link:hover,.nr-social__link:focus-visible{ background:rgba(0,0,0,.32); transform:translateY(-1px); }

/* бургер */
.nr-burger{ display:none; align-items:center; justify-content:center;
  width:44px; height:44px; border:1px solid rgba(0,0,0,.15);
  border-radius:12px; background:rgba(255,255,255,.25); color:#0b1522; cursor:pointer;
}
.nr-burger span{ width:20px; height:2px; background:#0b1522; display:block; position:relative; }
.nr-burger span::before,.nr-burger span::after{ content:""; position:absolute; left:0; width:20px; height:2px; background:#0b1522; }
.nr-burger span::before{ top:-6px } .nr-burger span::after{ top:6px }
.nr-burger[aria-expanded="true"] span{ transform:rotate(45deg) }
.nr-burger[aria-expanded="true"] span::before{ transform:rotate(90deg) } 
.nr-burger[aria-expanded="true"] span::after{ opacity:0 }

/* затемнення фону для моб-меню */
.menu-overlay{ position:fixed; inset:64px 0 0 0; background:rgba(0,0,0,.35);
  opacity:0; pointer-events:none; transition:opacity .18s; z-index:999; }
.menu-overlay.show{ opacity:1; pointer-events:auto; }

/* ================= MIDDLE BAR (decor) ================= */
.nr-header__mid{ height: clamp(8px, 0.6vw + 6px, 14px);
  background: linear-gradient(90deg, var(--mid-grad-start), var(--mid-grad-end)); }

/* ================= BOTTOM NAV (light) ================= */
.nr-subnav{
  background: var(--light-bg); color: var(--light-fg);
  border-top: 1px solid var(--light-border);
  padding: 8px clamp(10px, 3vw, 28px);
}
.nr-menu{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap: 6px 14px; }
.nr-menu--bottom .nr-menu__item{ position:relative; }

.nr-link{
  position:relative; display:inline-flex; align-items:center; gap:6px;
  padding:10px 12px; border-radius:10px; text-decoration:none;
  color: var(--light-fg);
  font-family: "Montserrat Alternates", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  transition: background .2s ease, color .2s ease;
}
.nr-link:hover,.nr-link:focus-visible{ background: var(--light-hover); color: var(--light-fg); }
.nr-caret{ opacity:.9; transition:transform .18s ease; }

/* underline-ефект для активного й hover */
.nr-menu--bottom .nr-link::after{
  content:""; position:absolute; left:10%; right:10%; bottom:-6px; height:3px;
  background: linear-gradient(90deg, var(--ua-blue), var(--ua-yellow));
  border-radius:3px; transform:scaleX(0); transform-origin:center; transition:transform .22s ease;
}
.nr-menu--bottom .nr-link:hover::after,
.nr-menu--bottom .nr-link.active::after,
.nr-menu--bottom .nr-link[aria-current="page"]::after{ transform:scaleX(1); }

/* DROPDOWNS (light) */
.nr-dropdown{ position:relative; }
.nr-dropdown__toggle{ border:0; background:transparent; cursor:pointer; font:inherit; color:inherit; }
.nr-dropdown[data-open="true"] .nr-caret{ transform:rotate(180deg); }

.nr-dropdown__menu{
  position:absolute; left:0; top:calc(100% + 8px); min-width:220px;
  background:#fff; color:var(--light-fg);
  border:1px solid var(--light-border); border-radius:12px; padding:6px;
  box-shadow: var(--dropdown-shadow); display:none; z-index:30;
}
.nr-dropdown[data-open="true"] .nr-dropdown__menu{ display:block; }
.nr-dropdown__link{ display:block; padding:10px 12px; border-radius:8px; color:var(--light-fg); text-decoration:none; }
.nr-dropdown__link:hover,.nr-dropdown__link:focus-visible{ background: var(--light-hover); }

/* ================== RESPONSIVE ================== */
@media (max-width: 900px){
  .nr-burger{ display:flex; }
  /* мобільне меню: виїжджає зверху, темний стиль для контрасту */
  .nr-subnav{
    position:fixed; left:0; right:0; top:64px;
    transform:translateY(-120%); background:#0f1115; color:#e7e9ee;
    border-top:1px solid rgba(255,255,255,.08); box-shadow:0 16px 40px rgba(0,0,0,.35);
    transition:transform .28s cubic-bezier(.22,.8,.24,1); z-index:1000;
  }
  .nr-subnav.open{ transform:translateY(0); }
  .nr-menu--bottom{ flex-direction:column; padding:10px; gap:8px; }
  .nr-menu--bottom .nr-link{ color:#e7e9ee; background:#121821; }
  .nr-menu--bottom .nr-link::after{ background: linear-gradient(90deg, #7aa2ff, #ffe37a); bottom:-4px; }
  .nr-dropdown__menu{ position:static; display:none; background:#1b2230; color:#e7e9ee; border-color:#253140; box-shadow:none; margin-top:6px; }
  .nr-dropdown[data-open="true"] .nr-dropdown__menu{ display:block; }
  body.menu-open{ overflow:hidden; }
}

/* На дуже вузьких — трохи зменшуємо бренд */
@media (max-width: 520px){
  .nr-brand__logo{ width:36px; height:36px; }
  .nr-brand__title{ font-size: clamp(1.35rem, 6vw, 1.8rem); }
}

/* Скрол-стан: компактніше */
.nr-header.is-scrolled .nr-brand__title{
  font-size: clamp(1.4rem, 3.6vw, 2.2rem);
  text-shadow: 0 1px 0 rgba(255,255,255,.2), 0 1px 8px rgba(0,0,0,.08);
}
.nr-header.is-scrolled .nr-header__top{ min-height:64px; }
/* === Normalize: однаковий шрифт для всіх пунктів меню === */
.nr-menu--bottom .nr-link,
.nr-menu--bottom .nr-dropdown__toggle{
  font-family: "Montserrat Alternates", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 1rem;
  line-height: 1.1;
  letter-spacing: .2px;
}

/* Робимо кнопки візуально як лінки */
.nr-dropdown__toggle{
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 10px 12px;         /* як у .nr-link */
  border-radius: 10px;
}

/* Якщо десь всередині лінку є <strong>, не перетискай шрифт */
.nr-link strong{ font-weight: inherit; }

/* На світлому низі зберігаємо однаковий вигляд hover/active і для кнопок */
.nr-menu--bottom .nr-dropdown__toggle:hover,
.nr-menu--bottom .nr-dropdown__toggle:focus-visible{
  background: var(--light-hover);
  color: var(--light-fg);
}

/* Підкреслення-індикатор для кнопок теж */
.nr-menu--bottom .nr-dropdown__toggle::after{
  content:""; position:absolute; left:10%; right:10%; bottom:-6px; height:3px;
  background: linear-gradient(90deg, var(--ua-blue), var(--ua-yellow));
  border-radius:3px; transform:scaleX(0); transform-origin:center; transition:transform .22s ease;
}
.nr-menu--bottom .nr-dropdown__toggle:hover::after,
.nr-menu--bottom .nr-dropdown__toggle[aria-expanded="true"]::after{ transform:scaleX(1); }