/**
 * Apollo Navbar v2 — Global CSS
 *
 * Pill glass navbar (fixed top-center) + FAB circle (fixed bottom-right)
 * for ALL WordPress pages.
 *
 * Replaces: navbar.v1.css (old .apollo-navbar top-bar style)
 * Classes:  nh-* (new-home design system, now globalised)
 *
 * Load order (via apollo-templates.php):
 *   1. apollo-v2-design-system.css  — design tokens (vars)
 *   2. navbar.v2.css                — this file
 *
 * NOTE: NO html { padding-top } override here.
 * The pill navbar is floating — it does NOT push page content.
 *
 * @package Apollo\Templates
 * @since   6.2.0
 */

/* ═══════════════
   NAVBAR — ultra-discreet pill, invisible on hero / refined on scroll
   Compact height — elements inside stay same size, just less padding
   ═══════════════ */
.nh-navbar {
  position: fixed;
  top: calc(18px + var(--safe-top));
  left: 46%;
  transform: translateX(-50%);
  z-index: 9000;
  width: calc(80% - 28px);
  max-width: 60dvw;
  height: 44px;        /* 50px − 6px freed from nav-btn margin halving */
  max-height: 44px;
  padding: 0 4px 0 0;               /* buttons own their padding — navbar just contains */
  background: rgba(var(--rgb-t),0.04) !important;
  backdrop-filter: blur(10px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(200%) !important;
  border: none !important;
  border-radius: var(--r-pill) !important;
  corner-shape: round;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background .5s var(--ease-smooth);
  will-change: background;
}
.nh-navbar.scrolled {
  background: rgba(var(--rgb-t),0.45) !important;
  border-color: transparent !important;
}
/* Logo = apollo icon only, no text */
.nh-nav-logo {
  max-height: fit-content;
  display: flex;
  align-items: center;
  color: rgba(var(--rgb-t),0.9);
  transition: color .4s;
  user-select: none;
  margin: 0 !important;
  padding: 0 0 3px 20px!important;
  & > i {
    font-size: 27px !important;
    line-height: 1;
    padding: 7px;
    margin: -2px 3px 4px 10px;   /* left 10px = breathing room from pill left edge */
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.nh-navbar.scrolled .nh-nav-logo { color: var(--white-9); text-shadow: inset 10px 10px 30px rgba(var(--rgb-d), 0.8); }
.nh-nav-actions { display: flex; gap: 0; align-items: center; }
.nh-nav-btn {
  /*
   * Right nav btns (chat, notif, profile)
   * icon: 20px  |  padding: 7px (was 10, -3 = 1/3 moved to margin)
   * margin: 6px vertical / 5px horizontal (added the 1/3 from padding)
   * Touch area: 7+20+7 = 34px btn + 6px margins each = 46px ≤ 50px navbar
   * Logo icon stays at 24px with full 10px padding — intentionally larger
   */
  display: flex !important; align-items: center !important; justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(var(--rgb-t),0.09);
  color: rgba(var(--rgb-t),0.78);
  transition: background .3s, color .3s, transform .2s var(--ease-spring);
  position: relative !important;
  overflow: visible !important;
  font-size: 21px !important;  /* +1px from padding: 7→6 */
  padding: 6px !important;
  margin: 3px 3px !important;  /* halved from 6px 5px; freed px removed from navbar height */
  line-height: 1 !important;
  flex-shrink: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: unset !important;
  min-height: unset !important;
  max-width: unset !important;
  max-height: unset !important;
}

.nh-nav-icon { width: 20px; height: 20px; display: block; flex-shrink: 0; }
.nh-navbar.scrolled .nh-nav-btn { background: transparent; color: var(--text-secondary); }
@media (hover: hover) {
  .nh-nav-btn:hover { background: rgba(var(--rgb-t),0.18); transform: scale(1.06); }
  .nh-navbar.scrolled .nh-nav-btn:hover { background: var(--bg-deep); color: var(--text); }
}
.nh-nav-btn:active { transform: scale(0.93)!important; }
.nh-notif-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px; height: 4px;
  background: rgba(var(--rgb-d),0.75); border-radius: 50%;
  border: none; pointer-events: none;
  box-shadow: none;
  animation: nh-pulse-dot 2s ease infinite;
  /* centering is baked into keyframes — do NOT use transform here */
}
.nh-notif-dot[data-notif="false"] { display: none; }
@keyframes nh-pulse-dot {
  0%,100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50%     { transform: translate(-50%, -50%) scale(1.9); opacity: 0; }
}

/* ── Avatar image ── */
.nh-avatar-img {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  pointer-events: none;
}

.nh-nav-btn--avatar {
  padding: 5px !important;
}

.nh-avatar-img--lg {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

/* Badge counter (chat / notif) */
.nh-menu-badge {
  margin-left: auto;
  background: rgba(var(--rgb-d),0.65);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
}


/* ═══════════════════════════════════════════════════════════════
   APPS DROPDOWN (logged only)
   ═══════════════════════════════════════════════════════════════ */
.nh-dropdown {
  position: fixed;
  z-index: 9150;
  background: rgba(var(--rgb-t),0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: none;
  border-radius: var(--r, 16px);
  box-shadow: none;
  padding: 6px;
  opacity: 0;
  transform: translateY(-8px) scale(0.96);
  transform-origin: top center;
  pointer-events: none;
  transition: opacity .22s var(--ease, cubic-bezier(.16, 1, .3, 1)), transform .22s var(--ease, cubic-bezier(.16, 1, .3, 1));
  max-height: 80dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

html.dark-mode .nh-dropdown {
  background: rgba(15,15,17,0.92);
  border-color: transparent;
  box-shadow: none;
}

.nh-dropdown.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.nh-dropdown::-webkit-scrollbar { width: 4px; }
.nh-dropdown::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-t), 0.12);
  border-radius: 2px;
}

/* Apps dropdown — centered below navbar */
.nh-dropdown--apps {
  top: calc(70px + var(--safe-top, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(-8px) scale(0.96);
  transform-origin: top center;
  width: 300px;
  padding: 12px;
}

.nh-dropdown--apps.is-open {
  transform: translateX(-50%) translateY(0) scale(1);
}

.nh-dropdown__header {
  padding: 6px 8px 10px;
}

.nh-dropdown__title {
  font-family: var(--ff-mono, "Space Mono", monospace);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted, rgba(19,21,23,0.45));
}

.nh-dropdown__footer {
  padding: 4px 0 2px;
}

/* Apps grid */
.nh-apps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0 4px;
}

.nh-app-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 4px;
  border-radius: var(--r-sm, 10px);
  transition: background .15s var(--ease, cubic-bezier(.16, 1, .3, 1)), transform .15s var(--ease, cubic-bezier(.16, 1, .3, 1));
  text-decoration: none;
  user-select: none;
}

@media (hover: hover) {
  .nh-app-item:hover {
    background: rgba(var(--rgb-d),0.04);
    transform: translateY(-2px);
  }
}

.nh-app-item:active { transform: scale(0.94); }

.nh-app-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: #fff;
  box-shadow: none;
}

.nh-app-icon i { font-size: 1.2rem; line-height: 1; }

.nh-app-label {
  font-size: 0.65rem;
  color: var(--txt-color, rgba(19,21,23,0.77));
  text-align: center;
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.dark-mode .nh-app-label {
  color: var(--txt-color, rgba(var(--rgb-t),0.77));
}

/* Profile dropdown — top-right anchor */
.nh-dropdown--profile {
  top: calc(70px + var(--safe-top, 0px));
  right: max(14px, calc(50% - 200px));
  width: 240px;
  transform-origin: top right;
}

.nh-profile-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 8px;
}

.nh-profile-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.nh-profile-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--txt-color-hover, rgba(19,21,23,0.92));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nh-profile-handle {
  font-size: 0.7rem;
  color: var(--muted, rgba(19,21,23,0.45));
}


/* ═══════════════════════════════════════════════════════════════
   MENU APP FAB — fixed bottom-right circle
   ═══════════════════════════════════════════════════════════════ */
.nh-menu-fab {
  position: fixed !important;
  bottom: calc(16px + var(--safe-bottom, env(safe-area-inset-bottom, 0px))) !important;
  right: 20px !important;
  z-index: 9200 !important;
  width: 50px;
  height: 50px;
  padding: 0;
  border-radius: 50%;
  background: #0A0A0A;
  color: #ffffff;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px;
  line-height: 1;
  box-shadow: none;
  transition: transform .35s ease, background .3s;
  border: none;
  outline: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
  visibility: visible !important;
}

.nh-menu-fab i,
.nh-menu-fab svg {
  pointer-events: none;
  display: block;
  flex-shrink: 0;
  transition: transform .3s ease;
}

.nh-menu-fab.is-open i,
.nh-menu-fab.is-open svg {
  transform: rotate(45deg);
}

@media (hover: hover) {
  .nh-menu-fab:hover {
    background: rgba(var(--rgb-d),0.7);
    transform: scale(1.08);
    box-shadow: none;
  }
}

.nh-menu-fab:active {
  transform: scale(0.91);
  box-shadow: none;
}


/* ═══════════════════════════════════════════════════════════════
   MENU SHEET — upward from FAB
   ═══════════════════════════════════════════════════════════════ */
.nh-menu-sheet {
  position: fixed;
  bottom: calc(78px + var(--safe-bottom, env(safe-area-inset-bottom, 0px)));
  right: 14px;
  z-index: 9150;
  width: 210px;
  background: rgba(var(--rgb-t),0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: none;
  border-radius: var(--r, 16px);
  box-shadow: none;
  padding: 6px;
  opacity: 0;
  transform: translateY(14px) scale(0.95);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity .26s var(--ease, cubic-bezier(.16, 1, .3, 1)), transform .26s var(--ease, cubic-bezier(.16, 1, .3, 1));
}

html.dark-mode .nh-menu-sheet {
  background: rgba(15,15,17,0.92);
  border-color: transparent;
  box-shadow: none;
}

.nh-menu-sheet.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* ── Sheet items ── */
.nh-sheet-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--r-sm, 10px);
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--txt-color, rgba(19,21,23,0.77));
  cursor: pointer;
  transition: background .17s var(--ease, cubic-bezier(.16, 1, .3, 1)), color .17s var(--ease, cubic-bezier(.16, 1, .3, 1));
  text-decoration: none;
  letter-spacing: -0.01em;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}

.nh-sheet-item i {
  font-size: 15px;
  color: var(--muted, rgba(19,21,23,0.45));
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  transition: color .17s;
}

@media (hover: hover) {
  .nh-sheet-item:hover {
    background: rgba(var(--rgb-d),0.04);
    color: var(--txt-color-hover, rgba(19,21,23,0.92));
  }

  .nh-sheet-item:hover i {
    color: var(--black-1, #121214);
  }
}

.nh-sheet-item:active {
  background: rgba(var(--rgb-d),0.07);
}

.nh-sheet-divider {
  height: 1px;
  background: rgba(var(--rgb-d),0.06);
  margin: 4px 5px;
}

/* CTA item — inverted accent */
.nh-sheet-item--cta {
  background: var(--black-1, #121214);
  color: var(--bg, #fff);
  margin-top: 2px;
  border: none;
}

.nh-sheet-item--cta i {
  color: currentColor;
  opacity: 0.65;
}

@media (hover: hover) {
  .nh-sheet-item--cta:hover {
    opacity: 0.85;
    background: var(--black-1, #121214);
    border-color: transparent;
  }

  .nh-sheet-item--cta:hover i {
    color: currentColor;
    opacity: 0.9;
  }
}

/* Danger item (Sair) */
.nh-sheet-item--danger {
  color: #b71c1c;
}

.nh-sheet-item--danger i {
  color: #b71c1c;
  opacity: 0.65;
}

@media (hover: hover) {
  .nh-sheet-item--danger:hover {
    background: rgba(229,57,53,0.08);
    color: #b71c1c;
  }

  .nh-sheet-item--danger:hover i {
    color: #b71c1c;
    opacity: 0.9;
  }
}

html.dark-mode .nh-sheet-divider {
  background: rgba(var(--rgb-t),0.06);
}

html.dark-mode .nh-sheet-item:hover {
  background: rgba(var(--rgb-t),0.06);
}

html.dark-mode .nh-sheet-item:active {
  background: rgba(var(--rgb-t),0.10);
}

html.dark-mode .nh-sheet-item--danger {
  color: #ff6b6b;
}

html.dark-mode .nh-sheet-item--danger i {
  color: #ff6b6b;
}

html.dark-mode .nh-sheet-item--danger:hover {
  background: rgba(229,57,53,0.14);
  color: #ff6b6b;
}

html.dark-mode .nh-sheet-item--danger:hover i {
  color: #ff6b6b;
}


/* ═══════════════════════════════════════════════════════════════
   FULL-VIEWPORT OVERLAY — blocks ALL clicks behind menus
   ═══════════════════════════════════════════════════════════════ */
.nh-overlay {
  position: fixed;
  inset: 0;
  z-index: 9050;
  background: rgba(0, 0, 0, 0);
  pointer-events: none;
  transition: background .3s cubic-bezier(.16, 1, .3, 1);
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

.nh-overlay.is-active {
  background: rgba(0, 0, 0, 0.45);
  pointer-events: auto;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* Body scroll lock while any menu is open */
body.nh-menu-open {
  overflow: hidden !important;
  touch-action: none;
  overscroll-behavior: none;
}

/* ═══════════════════════════════════════════════════════════════
   FAB — ALWAYS visible on mobile (no aside-gating)
   Hidden on desktop (sidebar/aside visible natively)
   ═══════════════════════════════════════════════════════════════ */

/* Desktop: hide FAB + sheet */
@media (min-width: 1024px) {
  .nh-menu-fab,
  .nh-menu-sheet {
    display: none !important;
  }
}

/* Mobile: always show FAB */
@media (max-width: 1023px) {
  .nh-menu-fab {
    display: flex !important;
  }

  .nh-menu-sheet {
    display: block !important;
  }
}