/* ══════════════════════════════════════════════════════════════════════════
   Navbar (#25)
   Sticky application header: brand · nav · actions (search, lang, user)
   Варіанти: default (white) · navbar--transparent (hero overlay, white text)
   Адаптивність: desktop-first; burger menu <1024px
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Root ───────────────────────────────────────────────────────────────── */
.navbar {
  position: sticky;
  top: 0;
  z-index: var(--uris-component-navbar-z-index);
  width: 100%;

  background-color: var(--uris-color-semantic-surface);
  border-block-end: 1px solid var(--uris-color-semantic-border);
  font-family: var(--uris-font-family-body);
  -webkit-font-smoothing: antialiased;
}

/* ── Transparent variant (hero overlay) ─────────────────────────────────── */
.navbar--transparent {
  background-color: transparent;
  border-block-end-color: transparent;
}

/* Дефолтний синій focus-ring дає <3:1 на темному/непередбачуваному hero —
   білий outline тієї ж геометрії (прецедент: Footer, _shared/README.md; аудит П7). */
.navbar--transparent .navbar__brand:focus-visible,
.navbar--transparent .navbar__link:focus-visible,
.navbar--transparent .navbar__icon-btn:focus-visible,
.navbar--transparent .navbar__lang-item:focus-visible,
.navbar--transparent .navbar__user-btn:focus-visible,
.navbar--transparent .navbar__burger:focus-visible,
.navbar--transparent .navbar__mobile-link:focus-visible {
  outline-color: var(--uris-color-semantic-overlay-text-strong);
}

/* ── Inner container ────────────────────────────────────────────────────── */
.navbar__container {
  display: flex;
  align-items: stretch;
  height: var(--uris-component-navbar-height);
  padding-inline: var(--uris-spacing-6);
  gap: var(--uris-spacing-2);
  max-width: 1440px;
  margin-inline: auto;
}

/* ── Brand (logo area) ──────────────────────────────────────────────────── */
.navbar__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--uris-spacing-3);
  flex-shrink: 0;
  margin-inline-end: var(--uris-spacing-6);
  text-decoration: none;
  color: inherit;
}

.navbar__brand:focus-visible {
  outline: 2px solid var(--uris-color-semantic-focus-ring);
  outline-offset: 2px;
  border-radius: var(--uris-radius-sm);
}

.navbar__brand-logo {
  display: flex;
  align-items: center;
  gap: var(--uris-spacing-2);
  color: var(--uris-color-semantic-primary);
}

/* Divider between coat of arms and wordmark */
.navbar__brand-sep {
  width: 1px;
  height: 24px;
  background-color: var(--uris-color-semantic-border);
  flex-shrink: 0;
}

.navbar__brand-wordmark {
  display: flex;
  align-items: center;
  gap: var(--uris-spacing-2);
  font-family: var(--uris-font-family-head);
  font-size: var(--uris-text-sm-size);
  font-weight: var(--uris-font-weight-medium);
  letter-spacing: var(--uris-font-letter-spacing-caps);
  color: var(--uris-color-semantic-primary);
  white-space: nowrap;
}

.navbar--transparent .navbar__brand-wordmark,
.navbar--transparent .navbar__brand-logo {
  color: var(--uris-color-semantic-surface);
}

.navbar--transparent .navbar__brand-sep {
  background-color: var(--uris-color-semantic-overlay-separator);
}

/* ── Primary navigation ─────────────────────────────────────────────────── */
.navbar__nav {
  display: flex;
  align-items: stretch;
  flex: 1 1 0;
  min-width: 0;
}

.navbar__list {
  display: flex;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
}

/* ── Nav item ───────────────────────────────────────────────────────────── */
/* Без position:relative — full-width dropdown позиціонується від .navbar root */
.navbar__item {
  display: flex;
  align-items: stretch;
}

/* ── Nav link (base) ────────────────────────────────────────────────────── */
.navbar__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--uris-spacing-1);
  padding-inline: var(--uris-spacing-4);
  padding-block: 0;

  background: none;
  border: none;
  cursor: pointer;
  text-align: left;

  font-family: var(--uris-font-family-body);
  font-size: var(--uris-text-base-size);
  font-weight: var(--uris-font-weight-regular);
  line-height: var(--uris-text-base-line);
  white-space: nowrap;
  text-decoration: none;

  color: var(--uris-color-semantic-text-muted);
  transition:
    color var(--uris-duration-fast) var(--uris-ease-default),
    font-weight 0s;
}

/* Active indicator bar */
.navbar__link::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline: var(--uris-spacing-4);
  height: var(--uris-component-navbar-link-indicator-height);
  background-color: transparent;
  transition: background-color var(--uris-duration-fast) var(--uris-ease-default);
}

/* ── States ─────────────────────────────────────────────────────────────── */
.navbar__link:hover {
  color: var(--uris-color-semantic-text);
}

/* Hover underline — like Tabs (#21): indicator appears under inactive link */
.navbar__link:not([aria-current="page"]):not(.is-active):hover::after {
  background-color: var(--uris-color-semantic-primary);
}

.navbar__link:focus-visible {
  outline: 2px solid var(--uris-color-semantic-focus-ring);
  outline-offset: -2px;
  border-radius: var(--uris-radius-sm);
  color: var(--uris-color-semantic-text);
}

/* Active (current page) — diiaBlue, узгоджено з sidebar (аудит #5, 2026-07-02) */
.navbar__link[aria-current="page"],
.navbar__link.is-active {
  color: var(--uris-color-semantic-accent);
  font-weight: var(--uris-font-weight-medium);
}

.navbar__link[aria-current="page"]::after,
.navbar__link.is-active::after {
  background-color: var(--uris-color-semantic-accent);
}

/* Dropdown trigger chevron */
.navbar__link--dropdown .navbar__chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform var(--uris-duration-fast) var(--uris-ease-default);
}

.navbar__item.is-open .navbar__link--dropdown .navbar__chevron {
  transform: rotate(180deg);
}

/* ── Mega menu (#46): ряди-категорії + scrim ──────────────────────────────
   Розширення повноширинної панелі: ряди «мітка-категорія ліворуч + сітка
   посилань праворуч» («Євратом», «LIFE», «COST»), розділені тонкими лініями.
   На відміну від .navbar__dropdown-cols (легасі role=menu), ряди — ЗВИЧАЙНІ
   навігаційні списки без menu-ролей (посилання-маршрути, не команди). */
.navbar__dropdown-rows {
  margin-block-start: var(--uris-spacing-6);
}

.navbar__dropdown-row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  column-gap: var(--uris-spacing-8);
  padding-block: var(--uris-spacing-5);
  border-block-start: 1px solid var(--uris-color-semantic-border);
}

.navbar__dropdown-row-label {
  margin: 0;
  font-size: var(--uris-text-xs-size);
  line-height: var(--uris-text-xs-line);
  font-weight: var(--uris-font-weight-medium);
  color: var(--uris-color-semantic-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--uris-font-letter-spacing-caps);
  padding-block-start: var(--uris-spacing-2);
}

.navbar__dropdown-row-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--uris-spacing-2) var(--uris-spacing-8);
}

@media (max-width: 767px) {
  .navbar__dropdown-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--uris-spacing-3);
  }
}

/* Scrim: візуальний шар (pointer-events:none — кліки проходять до контенту,
   і наявний click-outside у navbar.js закриває меню). Псевдоелемент BODY у
   кореневому stacking-контексті: z-index = navbar−1 — гарантовано над
   контентом сторінки і під навбаром/панеллю (негативний z-index усередині
   контексту навбара пофарбувався б нижче його фону — ненадійно). */
body:has(.navbar__item.is-open)::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: calc(var(--uris-component-navbar-z-index) - 1);
  background: var(--uris-component-navbar-scrim);
  pointer-events: none;
}

/* ── Transparent variant — nav links ────────────────────────────────────── */
.navbar--transparent .navbar__link {
  color: var(--uris-color-semantic-overlay-text);
}

.navbar--transparent .navbar__link:hover {
  color: var(--uris-color-semantic-surface);
}

.navbar--transparent .navbar__link:not([aria-current="page"]):not(.is-active):hover::after {
  background-color: var(--uris-color-semantic-surface);
}

.navbar--transparent .navbar__link[aria-current="page"],
.navbar--transparent .navbar__link.is-active {
  color: var(--uris-color-semantic-surface);
}

.navbar--transparent .navbar__link[aria-current="page"]::after,
.navbar--transparent .navbar__link.is-active::after {
  background-color: var(--uris-color-semantic-surface);
}

/* ── Nav dropdown — full-width mega-panel (стиль Дія) ───────────────────────
   Панель розкривається на всю ширину навбара (від .navbar root, edge-to-edge),
   вміст вирівняний по container'у; пункти — сітка колонок. */
.navbar__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--uris-component-dropdown-z-index);

  background-color: var(--uris-color-semantic-surface-muted);
  border-block-start: 1px solid var(--uris-color-semantic-border);
  border-block-end: 1px solid var(--uris-color-semantic-border);
  box-shadow: var(--uris-shadow-lg); /* аудит #8: єдина шкала тіней замість bespoke-токена */

  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(-1 * var(--uris-spacing-2)));
  pointer-events: none;
  transition:
    opacity    var(--uris-duration-fast) var(--uris-ease-default),
    transform  var(--uris-duration-fast) var(--uris-ease-default),
    visibility 0s linear var(--uris-duration-fast);
}

.navbar__item.is-open .navbar__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0s;
}

/* Навбар із розкритим меню підіймається над наступним контентом/навбарами,
   щоб непрозора панель повністю його перекривала (а не просвічувала). */
.navbar:has(.navbar__item.is-open) {
  z-index: calc(var(--uris-component-navbar-z-index) + 1);
}

/* Внутрішній контейнер — вирівняний по .navbar__container (1440px, padding-inline) */
.navbar__dropdown-grid {
  margin-inline: auto;
  max-width: 1440px; /* = .navbar__container max-width */
  padding-block: var(--uris-spacing-8);
  padding-inline: var(--uris-spacing-6);
}

/* Заголовок секції меню */
.navbar__dropdown-title {
  margin: 0 0 var(--uris-spacing-6);
  font-family: var(--uris-font-family-head);
  font-size: var(--uris-text-2xl-size);
  line-height: var(--uris-text-2xl-line);
  font-weight: var(--uris-font-weight-bold);
  color: var(--uris-color-semantic-text);
}

/* Колонки пунктів — заповнюються згори вниз, потім наступна колонка
   (grid-auto-flow:column + фіксовані 4 рядки → групування як у Дія) */
.navbar__dropdown-cols {
  list-style: none;
  margin: 0;
  padding: 0;

  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(4, auto);
  grid-auto-columns: minmax(0, 1fr);
  column-gap: var(--uris-spacing-8);
  row-gap: var(--uris-spacing-4);
}

/* Пункти меню — текстові посилання (без row-пігулки) */
.navbar__dropdown-item {
  display: inline-flex;
  align-items: center;
  gap: var(--uris-spacing-2);
  padding-block: var(--uris-spacing-2);

  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  text-decoration: none;

  font-family: var(--uris-font-family-body);
  font-size: var(--uris-text-base-size);
  font-weight: var(--uris-font-weight-medium);
  line-height: var(--uris-text-base-line);
  color: var(--uris-color-semantic-text);

  transition: color var(--uris-duration-fast) var(--uris-ease-default);
}

/* Hover — підкреслення під текстом (та сама логіка, що в Tabs/nav-лінках) */
.navbar__dropdown-item:hover {
  text-decoration: underline;
  text-decoration-thickness: var(--uris-component-navbar-link-indicator-height);
  text-underline-offset: 4px;
  text-decoration-color: var(--uris-color-semantic-primary);
}

.navbar__dropdown-item:focus-visible {
  outline: 2px solid var(--uris-color-semantic-focus-ring);
  outline-offset: 2px;
  border-radius: var(--uris-radius-sm);
}

/* ── Right-side actions ─────────────────────────────────────────────────── */
/* align-items:stretch → контроли на всю висоту, щоб їхнє hover-підкреслення
   сідало на нижній край навбара, як у nav-лінків (єдина Tabs-логіка). */
.navbar__actions {
  display: flex;
  align-items: stretch;
  gap: var(--uris-spacing-2);
  margin-inline-start: auto;
  flex-shrink: 0;
}

/* ── Icon button (search) ───────────────────────────────────────────────── */
.navbar__icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-width: 44px; /* тач-таргет ≥44px (аудит #11, 2026-07-02) */
  padding-inline: var(--uris-spacing-2);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--uris-color-semantic-text-muted);
  transition: color var(--uris-duration-fast) var(--uris-ease-default);
}

/* Hover-індикатор на нижньому краї навбара (як у nav-лінків) */
.navbar__icon-btn::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline: var(--uris-spacing-2);
  height: var(--uris-component-navbar-link-indicator-height);
  background-color: transparent;
  transition: background-color var(--uris-duration-fast) var(--uris-ease-default);
}

.navbar__icon-btn:hover {
  color: var(--uris-color-semantic-text);
}

.navbar__icon-btn:hover::after {
  background-color: var(--uris-color-semantic-primary);
}

.navbar__icon-btn:focus-visible {
  outline: 2px solid var(--uris-color-semantic-focus-ring);
  outline-offset: -2px;
  color: var(--uris-color-semantic-text);
}

.navbar--transparent .navbar__icon-btn {
  color: var(--uris-color-semantic-overlay-text-strong);
}

.navbar--transparent .navbar__icon-btn:hover {
  color: var(--uris-color-semantic-surface);
}

.navbar--transparent .navbar__icon-btn:hover::after {
  background-color: var(--uris-color-semantic-surface);
}

/* ── Language switcher ──────────────────────────────────────────────────── */
.navbar__lang {
  display: inline-flex;
  align-items: stretch;
  gap: var(--uris-spacing-1);
  font-size: var(--uris-text-sm-size);
  font-weight: var(--uris-font-weight-medium);
  color: var(--uris-color-semantic-text-muted);
}

.navbar__lang-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  padding: 0 var(--uris-spacing-1);
  transition: color var(--uris-duration-fast) var(--uris-ease-default);
  text-decoration: none;
}

.navbar__lang-item::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  height: var(--uris-component-navbar-link-indicator-height);
  background-color: transparent;
  transition: background-color var(--uris-duration-fast) var(--uris-ease-default);
}

.navbar__lang-item:hover {
  color: var(--uris-color-semantic-text);
}

.navbar__lang-item:hover::after {
  background-color: var(--uris-color-semantic-primary);
}

.navbar__lang-item:focus-visible {
  outline: 2px solid var(--uris-color-semantic-focus-ring);
  outline-offset: -2px;
}

.navbar__lang-item[aria-current="true"],
.navbar__lang-item.is-active {
  color: var(--uris-color-semantic-primary);
  font-weight: var(--uris-font-weight-bold);
}

.navbar__lang-sep {
  display: inline-flex;
  align-items: center;
  color: var(--uris-color-semantic-border);
  user-select: none;
  font-weight: var(--uris-font-weight-regular);
}

.navbar--transparent .navbar__lang {
  color: var(--uris-color-semantic-overlay-text);
}

.navbar--transparent .navbar__lang-item:hover {
  color: var(--uris-color-semantic-surface);
}

.navbar--transparent .navbar__lang-item:hover::after {
  background-color: var(--uris-color-semantic-surface);
}

.navbar--transparent .navbar__lang-item[aria-current="true"],
.navbar--transparent .navbar__lang-item.is-active {
  color: var(--uris-color-semantic-surface);
}

.navbar--transparent .navbar__lang-sep {
  color: var(--uris-color-semantic-overlay-separator);
}

/* ── User trigger button (avatar + name) ────────────────────────────────── */
.navbar__user-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--uris-spacing-2);
  height: 100%;
  padding-inline: var(--uris-spacing-2);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--uris-font-family-body);
  font-size: var(--uris-text-sm-size);
  font-weight: var(--uris-font-weight-regular);
  color: var(--uris-color-semantic-text);
  white-space: nowrap;
  transition: color var(--uris-duration-fast) var(--uris-ease-default);
}

.navbar__user-btn::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline: var(--uris-spacing-2);
  height: var(--uris-component-navbar-link-indicator-height);
  background-color: transparent;
  transition: background-color var(--uris-duration-fast) var(--uris-ease-default);
}

.navbar__user-btn:hover::after {
  background-color: var(--uris-color-semantic-primary);
}

.navbar__user-btn:focus-visible {
  outline: 2px solid var(--uris-color-semantic-focus-ring);
  outline-offset: -2px;
}

.navbar__user-chevron {
  width: var(--uris-component-icon-size-sm);
  height: var(--uris-component-icon-size-sm);
  flex-shrink: 0;
  color: var(--uris-color-semantic-text-muted);
  transition: transform var(--uris-duration-fast) var(--uris-ease-default);
}

.navbar--transparent .navbar__user-btn {
  color: var(--uris-color-semantic-overlay-text-strong);
}

.navbar--transparent .navbar__user-btn:hover::after {
  background-color: var(--uris-color-semantic-surface);
}

.navbar--transparent .navbar__user-chevron {
  color: var(--uris-color-semantic-overlay-text-muted);
}

/* ── Burger button (mobile) ─────────────────────────────────────────────── */
.navbar__burger {
  display: none;
  align-items: center;
  justify-content: center;
  /* Тач-таргет ≥44px (аудит #11, 2026-07-02) */
  width: 44px;
  height: 44px;
  padding: 0;
  margin-inline-start: auto;
  background: none;
  border: none;
  border-radius: var(--uris-radius-sm);
  cursor: pointer;
  color: var(--uris-color-semantic-text);
  flex-shrink: 0;
  transition:
    background-color var(--uris-duration-fast) var(--uris-ease-default);
}

.navbar__burger:hover {
  background-color: var(--uris-color-semantic-surface-muted);
}
/* focus-visible: глобальне кільце фокуса — _shared/utilities.css */

.navbar--transparent .navbar__burger {
  color: var(--uris-color-semantic-surface);
}

.navbar--transparent .navbar__burger:hover {
  background-color: var(--uris-color-semantic-overlay-surface);
}

/* ── Burger icon lines ──────────────────────────────────────────────────── */
.navbar__burger-icon {
  width: 20px;
  height: 14px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.navbar__burger-icon span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  border-radius: 1px;
  transform-origin: center;
  transition:
    transform  var(--uris-duration-normal) var(--uris-ease-default),
    opacity    var(--uris-duration-fast)   var(--uris-ease-default),
    top        var(--uris-duration-normal) var(--uris-ease-default);
}

/* Open state: X icon */
.navbar.is-menu-open .navbar__burger-icon span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.navbar.is-menu-open .navbar__burger-icon span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.navbar.is-menu-open .navbar__burger-icon span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ── Mobile menu drawer ─────────────────────────────────────────────────── */
.navbar__mobile-menu {
  display: none;
  flex-direction: column;
  background-color: var(--uris-color-semantic-surface);
  border-block-end: 1px solid var(--uris-color-semantic-border);
  padding-block: var(--uris-spacing-2);
}

.navbar--transparent .navbar__mobile-menu {
  background-color: var(--uris-color-semantic-overlay-scrim);
  border-block-end-color: var(--uris-color-semantic-overlay-border);
}

.navbar.is-menu-open .navbar__mobile-menu {
  display: flex;
}

.navbar__mobile-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--uris-spacing-3) var(--uris-spacing-6);
  font-family: var(--uris-font-family-body);
  font-size: var(--uris-text-base-size);
  font-weight: var(--uris-font-weight-regular);
  color: var(--uris-color-semantic-text);
  text-decoration: none;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--uris-duration-fast) var(--uris-ease-default);
}

.navbar__mobile-link:hover {
  background-color: var(--uris-color-semantic-surface-muted);
}

.navbar__mobile-link:focus-visible {
  outline: 2px solid var(--uris-color-semantic-focus-ring);
  outline-offset: -2px;
}

.navbar__mobile-link[aria-current="page"],
.navbar__mobile-link.is-active {
  font-weight: var(--uris-font-weight-medium);
  color: var(--uris-color-semantic-accent);
  border-inline-start: var(--uris-component-navbar-link-indicator-height) solid var(--uris-color-semantic-accent);
  padding-inline-start: calc(var(--uris-spacing-6) - var(--uris-component-navbar-link-indicator-height));
}

.navbar--transparent .navbar__mobile-link {
  color: var(--uris-color-semantic-overlay-text-strong);
}

.navbar--transparent .navbar__mobile-link:hover {
  background-color: var(--uris-color-semantic-overlay-surface);
}

.navbar--transparent .navbar__mobile-link[aria-current="page"],
.navbar--transparent .navbar__mobile-link.is-active {
  color: var(--uris-color-semantic-surface);
  border-inline-start-color: var(--uris-color-semantic-surface);
}

.navbar__mobile-sep {
  height: 1px;
  background-color: var(--uris-color-semantic-border);
  margin-inline: var(--uris-spacing-6);
  margin-block: var(--uris-spacing-2);
}

.navbar--transparent .navbar__mobile-sep {
  background-color: var(--uris-color-semantic-overlay-border);
}

/* ── Responsive: show burger, hide desktop nav ──────────────────────────── */
@media (max-width: 1023px) {
  /* Компактний навбар разом із мобільною навігацією (burger): 56px замість 60px.
     Токен component.navbar.height-mobile існував і документувався в README,
     але не був підключений — навбар лишався 60px на всіх ширинах. */
  .navbar__container {
    height: var(--uris-component-navbar-height-mobile);
  }

  .navbar__nav,
  .navbar__actions {
    display: none;
  }

  .navbar__burger {
    display: inline-flex;
  }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .navbar__link,
  .navbar__link::after,
  .navbar__chevron,
  .navbar__dropdown,
  .navbar__icon-btn,
  .navbar__icon-btn::after,
  .navbar__lang-item,
  .navbar__lang-item::after,
  .navbar__user-btn,
  .navbar__user-btn::after,
  .navbar__burger,
  .navbar__burger-icon span,
  .navbar__mobile-link,
  .navbar__dropdown-item {
    transition: none;
  }
}