/* ==========================================================================
   EZ Web Streams — LIGHT NAV SKIN  (2026-08-12)
   Gives /pricing and /blog/* the homepage's floating glass-pill nav, in light
   colours. Body content on those pages stays light and is untouched.

   HOW IT WINS: linked LAST in <head>, after each page's inline <style>, and
   every selector is element-qualified (header.ezn-bar ...) so it outranks the
   inline rules' bare-class !important declarations.

   DO NOT add `display` with !important to .ezn-center / .ezn-cta / .ezn-signin.
   /nav-mobile.js hides those below 820px via `.eznm-on ... {display:none!important}`
   in a <style> it injects at runtime; plain (non-important) display here loses to
   it correctly, which is what keeps the hamburger drawer working.
   ========================================================================== */

/* ---- the bar: transparent rail, pill floats inside it ---- */
header.ezn-bar{
  position:sticky;top:0;z-index:100;
  background:transparent;
  border-bottom:0;
  box-shadow:none;
  padding:14px 18px 0;
}

/* ---- the pill (mirrors homepage .nav geometry) ---- */
header.ezn-bar .ezn-inner{
  display:flex;align-items:center;justify-content:flex-start;gap:8px;
  width:100%;max-width:1240px;margin:0 auto;
  height:auto;min-height:60px;
  padding:10px 10px 10px 20px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 8px 32px rgba(16,24,40,.10);
}

/* ---- brand: homepage sizing ---- */
header.ezn-bar .ezn-brand{flex:0 0 auto;gap:9px}
header.ezn-bar .ezn-brand .brand-ico{width:30px;height:30px}
header.ezn-bar .ezn-word{font-size:19px;font-weight:700;letter-spacing:-.4px;color:#16233b}
header.ezn-bar .ezn-word span{color:#2f6bff}

/* ---- links: pushed RIGHT next to the CTAs, like the homepage ---- */
header.ezn-bar .ezn-center{margin-left:auto;display:flex;align-items:center;gap:4px}
header.ezn-bar .ezn-link{
  padding:9px 13px!important;
  border:0!important;background:transparent!important;
  border-radius:9px!important;
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:14.5px!important;font-weight:500;
  color:#5b6473!important;white-space:nowrap;
  transition:color .16s ease,background .16s ease;
}
header.ezn-bar .ezn-link:hover{color:#16233b!important;background:rgba(15,23,42,.06)!important}
header.ezn-bar .ezn-link.is-active{color:#1f54d6!important;background:rgba(47,107,255,.10)!important}
header.ezn-bar .ezn-link.is-active::after{display:none}   /* pill replaces the underline */

/* ---- right cluster ---- */
header.ezn-bar .ezn-right{display:flex;align-items:center;gap:8px;flex:0 0 auto}

/* pill CTAs, homepage order: Try Recorder (solid) then Try Editor (gradient) */
header.ezn-bar .ezn-cta{
  height:40px;
  padding:0 20px!important;
  border-radius:999px!important;
  border:1px solid transparent!important;
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:14.5px;font-weight:600;gap:7px;justify-content:center;white-space:nowrap;
  transition:background .18s ease,transform .18s ease,box-shadow .24s ease,filter .15s ease;
}
header.ezn-bar .ezn-cta svg{width:16px;height:16px}
/* Try Recorder in the recorder's End Stream red — mirrors index.html .nav .nav-start.
   Change both together or the navs drift apart again. */
header.ezn-bar #eznRecorder{
  order:1;
  background:linear-gradient(135deg,#f2555a,#e11d2b)!important;color:#fff!important;
  border:1px solid #ff7a80!important;
  box-shadow:0 4px 16px rgba(225,29,43,.45)!important;
}
header.ezn-bar #eznRecorder:hover{
  filter:brightness(1.08);transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(225,29,43,.55)!important;
}
/* Try/Open Editor. Every light page carries its own inline dark-gradient rule on
   the id (see pricing.html:167) and the blog auth JS also adds .ezn-dark once signed
   in, so landing the homepage blue needs BOTH the header.ezn-bar prefix (specificity)
   and !important. To restore the old dark pill, delete this block and the pages own
   rules take back over. */
header.ezn-bar #eznEditor{
  order:2;
  background:linear-gradient(135deg,#3b78ff,#1f54d6)!important;
  color:#fff!important;
  box-shadow:0 4px 14px rgba(47,107,255,.4)!important;
}
header.ezn-bar #eznEditor:hover{
  background:linear-gradient(135deg,#4a83ff,#2560e0)!important;
  transform:translateY(-1px);
}

/* ---- the outline rounded pill: Sign In (homepage #signInBtn) ---- */
header.ezn-bar .ezn-signin{
  order:3;
  height:40px;
  padding:0 17px!important;
  border-radius:999px!important;
  background:#fff!important;
  color:#16233b!important;
  border:1px solid rgba(15,23,42,.18)!important;
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:14.5px!important;font-weight:500;
  align-items:center;
}
header.ezn-bar .ezn-signin:hover{
  background:#f4f6fa!important;
  border-color:rgba(15,23,42,.34)!important;
}

/* ---- avatar / profile sit last ---- */
header.ezn-bar .ezn-avatar,header.ezn-bar .profwrap{order:4}
header.ezn-bar .ezn-avatar{width:40px;height:40px;border-radius:50%;border:1px solid rgba(15,23,42,.16)}

/* ---- tighten the pill on small screens (burger takes over under 820px) ---- */
@media(max-width:820px){
  header.ezn-bar{padding:10px 12px 0}
  header.ezn-bar .ezn-inner{min-height:54px;padding:8px 8px 8px 14px}
}
