/* ============================================================
 * MediaNet · Single-row header redesign (v2, May 2026)
 *
 * Replaces the old 3-row stack with a single 64px navbar:
 *   LEFT:  Logo + primary destinations (text-only links, no icons)
 *   RIGHT: JARVIS icon + expandable search + profile avatar
 *
 * Active state = subtle red underline (not chip background).
 * Search collapses to an icon by default, expands on click.
 * Glassmorphism backdrop activates on scroll.
 * Content filters now live under hero, not in the header.
 *
 * Activated when navbar has .mn-nav-v2 class. Older .np-btn /
 * .nav-tool styles are neutralized so the new chrome wins without
 * editing legacy CSS files.
 * ============================================================ */

/* ---------- Root nav container ---------- */
.mn-nav-v2.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: 64px;
  padding: 0;
  background: linear-gradient(180deg, rgba(8,9,11,0.92) 0%, rgba(8,9,11,0.62) 70%, rgba(8,9,11,0) 100%);
  border-bottom: 1px solid transparent;
  transition: background var(--mn-dur-normal, 200ms) var(--mn-ease-out, ease),
              backdrop-filter var(--mn-dur-normal, 200ms) var(--mn-ease-out, ease),
              border-color var(--mn-dur-normal, 200ms) var(--mn-ease-out, ease);
}
.mn-nav-v2.navbar.scrolled,
.mn-nav-v2.navbar.glass {
  background: rgba(8, 9, 11, 0.78);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* ---------- Single row layout ---------- */
.mn-nav-v2 .nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 32px;
  gap: 24px;
}
.mn-nav-v2 .nav-left,
.mn-nav-v2 .nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mn-nav-v2 .nav-left { gap: 32px; flex: 1; min-width: 0; }
.mn-nav-v2 .nav-right { gap: 12px; flex-shrink: 0; }

/* ---------- Burger (mobile only) ---------- */
.mn-nav-v2 .mn-burger {
  display: none;
  width: 40px; height: 40px;
  background: transparent;
  border: 0;
  color: var(--mn-on-surface, #e8e6e1);
  font-size: 20px;
  cursor: pointer;
  border-radius: 8px;
}
.mn-nav-v2 .mn-burger:hover { background: rgba(255,255,255,0.06); }

/* ---------- Logo ---------- */
.mn-nav-v2 .logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-family: var(--mn-font-headline, "Fraunces", serif);
  font-weight: 700;
  font-size: 22px;
  color: var(--mn-on-surface, #e8e6e1);
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.mn-nav-v2 .logo-mark {
  color: var(--mn-primary, #e50914);
  margin-right: 0;
}
.mn-nav-v2 .logo-text { color: var(--mn-on-surface, #e8e6e1); }

/* ---------- Primary navigation links ---------- */
.mn-nav-v2 .nav-primary {
  display: flex;
  align-items: center;
  gap: 28px;
  min-width: 0;
  overflow: hidden;
}
.mn-nav-v2 .nav-link {
  position: relative;
  display: inline-block;
  padding: 8px 0;
  font-family: var(--mn-font-ui, "Inter Tight", system-ui, sans-serif);
  font-size: 14px;
  font-weight: 500;
  color: rgba(232, 230, 225, 0.72);  /* default = muted */
  text-decoration: none;
  letter-spacing: 0.005em;
  white-space: nowrap;
  transition: color 150ms ease-out;
  /* Reserve underline space so hover doesn't jump layout */
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}
.mn-nav-v2 .nav-link:hover {
  color: var(--mn-on-surface, #ffffff);
}
.mn-nav-v2 .nav-link.is-active,
.mn-nav-v2 .nav-link[aria-current="page"] {
  color: var(--mn-on-surface, #ffffff);
  font-weight: 600;
}
.mn-nav-v2 .nav-link.is-active::after,
.mn-nav-v2 .nav-link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--mn-primary, #e50914);
  border-radius: 1px;
  animation: nav-link-in 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes nav-link-in {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* ---------- Right cluster: icon-only ghost buttons ---------- */
.mn-nav-v2 .nav-icon-btn {
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: rgba(232, 230, 225, 0.85);
  border-radius: 50%;
  cursor: pointer;
  transition: background 150ms ease-out, color 150ms ease-out, transform 150ms ease-out;
}
.mn-nav-v2 .nav-icon-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  transform: translateY(-1px);
}
.mn-nav-v2 .nav-icon-btn:focus-visible {
  outline: 2px solid var(--mn-primary, #e50914);
  outline-offset: 2px;
}

/* ---------- Expandable search pill ---------- */
.mn-nav-v2 .search-pill {
  display: inline-flex;
  align-items: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  overflow: hidden;
  transition: width 220ms cubic-bezier(0.22, 1, 0.36, 1),
              background 180ms ease-out,
              border-color 180ms ease-out;
}
.mn-nav-v2 .search-pill[data-expanded="true"] {
  width: 320px;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}
.mn-nav-v2 .search-pill[data-expanded="true"]:focus-within {
  border-color: var(--mn-secondary, #d4a574);
  background: rgba(255, 255, 255, 0.12);
}
.mn-nav-v2 .search-toggle {
  width: 40px; height: 40px;
  flex-shrink: 0;
  background: transparent;
  border: 0;
  color: rgba(232, 230, 225, 0.85);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 150ms ease-out, color 150ms ease-out;
}
.mn-nav-v2 .search-pill[data-expanded="false"] .search-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}
.mn-nav-v2 .search-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--mn-on-surface, #e8e6e1);
  font-family: var(--mn-font-ui, "Inter Tight", system-ui, sans-serif);
  font-size: 14px;
  padding: 0 14px 0 4px;
  opacity: 0;
  transition: opacity 180ms ease-out 60ms;  /* fade in after width starts */
}
.mn-nav-v2 .search-pill[data-expanded="true"] .search-input { opacity: 1; }
.mn-nav-v2 .search-input::placeholder { color: rgba(232, 230, 225, 0.45); }

/* ---------- Profile avatar ---------- */
.mn-nav-v2 .avatar {
  width: 36px; height: 36px;
  border-radius: 6px;
  border: 0;
  background: var(--mn-primary, #e50914);
  color: #ffffff;
  font-family: var(--mn-font-ui, "Inter Tight", sans-serif);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 150ms ease-out, box-shadow 150ms ease-out;
}
.mn-nav-v2 .avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(229, 9, 20, 0.4);
}

/* ---------- Neutralize legacy navbar children ---------- */
/* If old .np-btn / .nav-tool nodes leak into the new shell, hide them. */
.mn-nav-v2 .navbar-row-secondary,
.mn-nav-v2 .navbar-row-filters,
.mn-nav-v2 .nav-prime,
.mn-nav-v2 .np-btn,
.mn-nav-v2 .nav-tool {
  display: none !important;
}

/* ---------- Hide nav fade ::after (old style) ---------- */
.mn-nav-v2.navbar::after { display: none !important; }

/* ============ CONTENT FILTER PILLS (below hero) ============ */
.content-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 1600px;
  margin: -40px auto 24px;
  padding: 0 60px;
  position: relative;
  z-index: 3;
}
.filter-pill {
  font-family: var(--mn-font-ui, "Inter Tight", sans-serif);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 18px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(232, 230, 225, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: background 150ms ease-out, border-color 150ms ease-out,
              color 150ms ease-out, transform 150ms ease-out;
}
.filter-pill:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  transform: translateY(-1px);
}
.filter-pill.is-active,
.filter-pill.active,
.filter-pill[aria-current="page"] {
  background: rgba(229, 9, 20, 0.14);
  border-color: var(--mn-primary, #e50914);
  color: #ffffff;
  font-weight: 600;
}

/* ---------- Push hero up under fixed navbar ---------- */
.mn-nav-v2 ~ .hero,
body:has(.mn-nav-v2) .hero { margin-top: 0; }

/* ============ MOBILE ============ */
@media (max-width: 880px) {
  .mn-nav-v2 .nav-row { padding: 0 16px; gap: 12px; }
  .mn-nav-v2 .mn-burger { display: inline-flex; }
  .mn-nav-v2 .nav-primary {
    position: fixed;
    top: 64px; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: rgba(8, 9, 11, 0.96);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 12px 0;
    transform: translateY(-110%);
    transition: transform 200ms ease-out;
  }
  .mn-nav-v2.nav-open .nav-primary { transform: translateY(0); }
  .mn-nav-v2 .nav-link {
    width: 100%;
    padding: 14px 24px;
    border-bottom: 0;
    margin-bottom: 0;
  }
  .mn-nav-v2 .nav-link.is-active::after { display: none; }
  .mn-nav-v2 .nav-link.is-active { background: rgba(229, 9, 20, 0.08); }
  .mn-nav-v2 .search-pill[data-expanded="true"] {
    /* Mobile: full-overlay search instead of pinching the topbar */
    position: fixed;
    top: 12px; left: 8px; right: 8px; width: auto;
    z-index: 1000;
  }
  .content-filters {
    padding: 0 16px;
    margin-top: -24px;
    /* Horizontal scroll instead of wrap → "Surprize-mă" stays on the same row */
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .content-filters::-webkit-scrollbar { display: none; }
  .filter-pill {
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 10px 16px;
    font-size: 14px;
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mn-nav-v2 *,
  .filter-pill,
  .mn-nav-v2 .nav-link.is-active::after { transition: none !important; animation: none !important; }
}