/* ============================================================
   NAVBAR COMPONENT STYLES — responsive top navigation
   ============================================================ */

.navbar{
  position:sticky; top:0; z-index:110;
  height:var(--topbar-h);
  background:var(--surface);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  transition:transform .25s cubic-bezier(.4,0,.2,1), background .2s, box-shadow .2s;
}
.navbar--scrolled{ background:var(--surface); box-shadow:var(--shadow-md); }
.navbar--hidden{ transform:translateY(-100%); }

.navbar__container{
  max-width:1560px; height:100%; margin:0 auto; padding:0 var(--gutter);
  display:flex; align-items:center; gap:18px;
}

.navbar__brand{
  display:flex; align-items:center; flex:none; margin-right:10px;
  padding:6px 8px; border-radius:8px;
  transition:background .15s;
}
.navbar__brand:hover{ background:var(--hover); }
.navbar__logo{ height:28px; width:auto; object-fit:contain; }

/* desktop nav */
.navbar__desktop{ display:flex; align-items:center; flex:1; min-width:0; }
.navbar__list{
  display:flex; align-items:center; gap:2px; margin:0; padding:0; list-style:none;
}
.navbar__item{ position:relative; }
.navbar__item + .navbar__item::before{
  content:''; position:absolute; left:-1px; top:50%; transform:translateY(-50%);
  width:1px; height:18px; background:var(--border); opacity:.7;
}

.navbar__link{
  display:inline-flex; align-items:center; gap:5px;
  height:38px; padding:0 13px; border-radius:8px;
  font-size:13px; font-weight:600; letter-spacing:.15px; color:var(--text-2);
  transition:background .15s, color .15s;
  white-space:nowrap;
}
.navbar__link:hover{ background:var(--hover); color:var(--text); }
.navbar__link:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.navbar__link.active{ color:var(--accent); background:var(--accent-soft); font-weight:700; }

.navbar__link--button{ padding-right:8px; }

.navbar__dropdown{
  position:absolute; top:calc(100% + 8px); left:0; z-index:10;
  min-width:220px; max-width:320px;
  background:var(--surface); border:1px solid var(--border-strong);
  border-radius:var(--r-md); box-shadow:var(--shadow-lg);
  padding:6px;
  opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity .18s, transform .18s;
  max-height:calc(100vh - var(--topbar-h) - 24px); overflow-y:auto;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
.navbar__dropdown--open{ opacity:1; transform:translateY(0); pointer-events:auto; }

.navbar__dropdown-list{ list-style:none; margin:0; padding:0; }
.navbar__dropdown-item{
  display:flex; align-items:center; gap:10px;
  padding:9px 11px; border-radius:7px;
  font-size:13px; font-weight:550; color:var(--text-2);
  transition:background .15s, color .15s;
}
.navbar__dropdown-item:hover{ background:var(--hover); color:var(--text); }
.navbar__dropdown-item.active{ background:var(--accent-soft); color:var(--accent); }
.navbar__dropdown-item--disabled{ opacity:.55; cursor:not-allowed; }

.navbar__actions{ display:flex; align-items:center; gap:10px; margin-left:auto; flex:none; }
.navbar__cta{ height:38px; font-weight:650; }
.navbar__toggle{
  display:none; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:10px; color:var(--text);
  background:var(--surface-2); border:1px solid var(--border);
  transition:background .15s, border-color .15s;
}
.navbar__toggle:hover{ background:var(--hover); border-color:var(--border-strong); }
.navbar__toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* mobile drawer */
.navbar__scrim{
  position:fixed; inset:0; z-index:55;
  background:rgba(0,0,0,.5); opacity:0; pointer-events:none;
  transition:opacity .25s;
}
.navbar__scrim--open{ opacity:1; pointer-events:auto; }

.navbar__mobile{
  position:fixed; top:0; right:0; bottom:0; z-index:56;
  width:min(340px, 88vw);
  display:flex; flex-direction:column;
  background:var(--surface); border-left:1px solid var(--border-strong);
  box-shadow:var(--shadow-lg);
  transform:translateX(102%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.navbar__mobile--open{ transform:translateX(0); }

.navbar__mobile-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid var(--border);
}
.navbar__mobile-title{ font-size:15px; font-weight:700; color:var(--text); }
.navbar__mobile-close{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:9px; color:var(--text-2);
  transition:background .15s, color .15s;
}
.navbar__mobile-close:hover{ background:var(--hover); color:var(--text); }
.navbar__mobile-close:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.navbar__mobile-nav{ flex:1; min-height:0; overflow-y:auto; padding:12px 14px; }
.navbar__mobile-group{ margin-bottom:6px; }
.navbar__mobile-section{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  min-height:46px; padding:10px 12px; border-radius:9px;
  font-size:14px; font-weight:650; color:var(--text);
  transition:background .15s, color .15s;
}
.navbar__mobile-section:hover{ background:var(--hover); }
.navbar__mobile-section.active{ background:var(--accent-soft); color:var(--accent); }
.navbar__mobile-section:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.navbar__mobile-children{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .25s cubic-bezier(.4,0,.2,1);
}
.navbar__mobile-children--open{ grid-template-rows:1fr; }
.navbar__mobile-children > div{ overflow:hidden; display:flex; flex-direction:column; padding-left:8px; border-left:2px solid var(--border); margin:4px 0 6px 14px; }

.navbar__mobile-link{
  display:flex; align-items:center; min-height:44px; padding:9px 12px; border-radius:7px;
  font-size:13.5px; font-weight:550; color:var(--text-2);
  transition:background .15s, color .15s;
}
.navbar__mobile-link:hover{ background:var(--hover); color:var(--text); }
.navbar__mobile-link.active{ background:var(--accent-soft); color:var(--accent); }
.navbar__mobile-link--disabled{ opacity:.55; cursor:not-allowed; }

.navbar__mobile-divider{ height:1px; background:var(--border); margin:12px 0; }
.navbar__mobile-cta{ width:100%; justify-content:center; min-height:46px; }

.rotate-180{ transform:rotate(180deg); }

/* responsive breakpoints */
@media (max-width: 1080px){
  .navbar__desktop{ display:none; }
  .navbar__cta{ display:none; }
  .navbar__toggle{ display:inline-flex; }
}

@media (min-width: 1081px){
  .navbar__mobile, .navbar__scrim{ display:none; }
}

@media (max-width: 720px){
  .navbar__container{ padding:0 14px; }
  .navbar__logo{ height:24px; }
}