/* PixlRun shared site chrome: the HOMEPAGE top bar, live ticker and footer. ONE copy for every page.
   Markup: wp-content/themes/pixlrun-obsidian/inc/pxr-chrome.php (pxr_site_header_html / pxr_site_footer_html).
   Source of truth = front-page.php inline CSS + mu-plugins/pxr-home-v2skin/skin.css as rendered 2026-10-18.
   Every rule is scoped to header.topbar / div.status-ribbon / footer.pxr-footer so it never restyles page
   content, and is specific enough to beat the older per-page copies of .topbar/.brand/.primary-nav/footer. */

@property --pang{syntax:'<angle>';inherits:false;initial-value:0deg}

/* placeholder wrappers (static pages that inject the chrome client-side) must not break position:sticky */
#pxr-site-header,#pxr-site-footer{display:contents}

/* ---------- shared base ---------- */
header.topbar,div.status-ribbon,footer.pxr-footer{
  --pxc-sans:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --pxc-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --pxc-display:'Inter Tight','Inter',-apple-system,sans-serif;
  --pxc-sys:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --pxc-sysmono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --pxc-e:cubic-bezier(.2,.7,.2,1);
  --pxc-grad:linear-gradient(135deg,#6D28D9 0%,#BE185D 100%);
  font-family:var(--pxc-sys);
  font-size:16px;font-weight:400;font-style:normal;line-height:1.4;letter-spacing:-0.176px;
  text-align:left;text-transform:none;text-indent:0;text-shadow:none;
  -webkit-font-smoothing:antialiased;
  box-sizing:border-box;float:none;
}
header.topbar *,header.topbar *::before,header.topbar *::after,
div.status-ribbon *,div.status-ribbon *::before,div.status-ribbon *::after,
footer.pxr-footer *,footer.pxr-footer *::before,footer.pxr-footer *::after{box-sizing:border-box}
header.topbar a,div.status-ribbon a,footer.pxr-footer a{text-decoration:none}

/* ---------- top bar: night glass ---------- */
header.topbar{
  display:block;position:sticky;top:0;z-index:20;
  width:auto;max-width:none;height:auto;margin:0;padding:0;
  color:#0F172A;
  background:rgba(10,10,15,.88);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  border:0;border-bottom:1px solid rgba(255,255,255,.06);border-radius:0;box-shadow:none;
}
header.topbar::before{content:none;display:none}
header.topbar::after{content:"";display:block;position:absolute;left:0;right:0;bottom:-1px;top:auto;width:auto;height:1px;background:linear-gradient(90deg,transparent,#6D28D9 30%,#BE185D 70%,transparent);opacity:.75;pointer-events:none}
header.topbar .topbar-inner{
  max-width:1280px;margin:0 auto;padding:13px 20px;
  display:flex;align-items:center;gap:24px;flex-wrap:nowrap;
  width:auto;height:auto;background:none;border:0;
}
header.topbar .brand{
  display:flex;align-items:center;gap:8px;
  font-family:var(--pxc-display);font-size:20px;font-weight:800;letter-spacing:-.03em;line-height:1.03;color:#fff;margin:0;padding:0;
  text-transform:none;
}
header.topbar .brand-link{
  display:flex;align-items:center;gap:8px;
  font-family:var(--pxc-display);font-weight:800;letter-spacing:-.03em;color:#fff;text-decoration:none;
}
header.topbar .brand-link:hover{color:#fff;text-decoration:none}
header.topbar .brand-mark{width:28px;height:28px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
header.topbar .brand-mark svg{width:100%;height:100%;display:block;filter:drop-shadow(0 6px 14px rgba(139,92,246,.45))}
header.topbar .brand-tag{
  display:inline-block;
  font-family:var(--pxc-mono);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.72);background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);border-radius:99px;padding:4px 9px;white-space:nowrap;
}
header.topbar .primary-nav{
  display:flex;gap:18px;flex:1;margin:0;padding:0;background:none;border:0;
}
header.topbar .primary-nav::-webkit-scrollbar{display:none}
header.topbar .primary-nav a{
  display:inline;font-family:var(--pxc-sans);font-size:13.5px;font-weight:500;line-height:1.4;text-transform:none;
  color:rgba(255,255,255,.64);white-space:nowrap;padding:7px 10px;margin:0;border-radius:9px;background:none;border:0;
  transition:color .2s,background .2s;
}
header.topbar .primary-nav a:hover{color:#fff;background:rgba(255,255,255,.07);text-decoration:none}

header.topbar .search-form{
  display:flex;align-items:center;gap:6px;min-width:220px;width:auto;height:auto;margin:0;
  background:linear-gradient(#15151D,#15151D) padding-box,conic-gradient(from var(--pang),rgba(255,255,255,.12) 0 55%,#8B5CF6 72%,#BE185D 82%,rgba(255,255,255,.12) 96%) border-box;
  border:1.5px solid transparent;border-radius:12px;padding:6px 6px 6px 12px;
  animation:pxcSpin 5s linear infinite;box-shadow:0 10px 30px -14px rgba(109,40,217,.7);
}
@keyframes pxcSpin{to{--pang:360deg}}
header.topbar .search-form svg{flex-shrink:0;width:15px;height:15px;color:rgba(255,255,255,.5);display:block;margin:0}
header.topbar .search-form input{
  border:none;background:transparent;outline:none;box-shadow:none;margin:0;padding:0;height:auto;min-width:0;
  font-family:var(--pxc-sans);font-size:13.5px;font-weight:400;line-height:normal;letter-spacing:normal;text-transform:none;
  color:#fff;width:100%;border-radius:0;
}
header.topbar .search-form input::placeholder{color:rgba(255,255,255,.45);opacity:1}
header.topbar .search-form button,header.topbar .search-form button:hover{
  font-family:var(--pxc-sys);font-size:12.5px;font-weight:600;line-height:normal;letter-spacing:normal;text-transform:none;
  background:#fff;border:0;color:#0A0A0F;border-radius:8px;padding:6px 14px;margin:0;height:auto;width:auto;
  cursor:pointer;white-space:nowrap;box-shadow:none;transition:transform .25s var(--pxc-e),background .2s;
}
header.topbar .search-form button:hover{background:#EDE9FE}

/* ---------- ticker ribbon ---------- */
div.status-ribbon{
  display:flex;align-items:center;width:auto;max-width:none;height:36px;margin:0;padding:0;
  background:#111118;border:0;border-bottom:1px solid rgba(255,255,255,.05);border-radius:0;box-shadow:none;
}
div.status-ribbon .ticker-wrap{
  max-width:1280px;margin:0 auto;width:100%;padding:0 20px;
  display:flex;align-items:center;gap:10px;height:auto;
}
div.status-ribbon .live-dot{position:relative;display:block;width:8px;height:8px;flex-shrink:0;margin:0;padding:0;background:none}
div.status-ribbon .live-dot-core{position:absolute;inset:0;background:#fff;border-radius:50%}
div.status-ribbon .live-dot-ping{
  position:absolute;inset:-4px;border-radius:50%;
  border:1.5px solid #fff;opacity:.65;background:none;
  animation:pxcPing 1.8s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes pxcPing{0%{transform:scale(.4);opacity:.7}100%{transform:scale(1.9);opacity:0}}
div.status-ribbon .ticker-viewport{
  flex:1;min-width:0;overflow:hidden;height:100%;display:flex;align-items:center;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);
}
div.status-ribbon .ticker-track{
  display:inline-flex;align-items:center;
  animation:pxcTicker 38s linear infinite;will-change:transform;
}
div.status-ribbon .ticker-wrap:hover .ticker-track{animation-play-state:paused}
@keyframes pxcTicker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
div.status-ribbon .ticker-item{
  margin:0;padding:0 64px 0 0;
  font-family:var(--pxc-mono);font-size:11.5px;font-weight:400;line-height:1.4;letter-spacing:.03em;text-transform:none;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
  color:rgba(255,255,255,.72);white-space:nowrap;background:none;border:0;
}

/* ---------- footer ---------- */
footer.pxr-footer{
  display:block;position:relative;width:auto;max-width:none;height:auto;margin:0;padding:20px 0 0;
  background:#F8FAFC;color:#0F172A;border:0;border-radius:0;box-shadow:none;
}
footer.pxr-footer::before,footer.pxr-footer::after{content:none;display:none}
footer.pxr-footer .pxr-footer-in{
  max-width:1280px;margin:0 auto;padding:22px 20px 40px;
  border-top:1px solid #E2E8F0;position:relative;
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
}
footer.pxr-footer .pxr-footer-in::before{
  content:"";display:block;position:absolute;top:-1px;left:0;right:0;height:3px;background:linear-gradient(135deg,#6D28D9 0%,#BE185D 100%);
}
footer.pxr-footer .footer-links{display:flex;flex-wrap:wrap;gap:16px;margin:0;padding:0}
footer.pxr-footer .footer-links a{font-family:var(--pxc-sys);font-size:13px;font-weight:500;line-height:1.4;color:#475569;text-decoration:none;white-space:normal;margin:0;padding:0}
footer.pxr-footer .footer-links a:hover{color:#6D28D9;text-decoration:underline}
footer.pxr-footer .footer-meta{font-family:var(--pxc-sys);font-size:12px;font-weight:400;line-height:1.4;color:#64748B;display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:0;padding:0}
footer.pxr-footer .footer-meta span{color:#64748B;font-size:12px}

/* ---------- responsive ---------- */
/* The homepage row (brand + 7 links + search) is 1373px wide inside a 1280px container, so below ~1466px the
   old homepage pushed the search box off the edge. Keep the look at >=1466px; tighten the links up to 1465px
   (they still fit from ~1270px and scroll sideways below that); under 1080px drop the link row and keep
   brand + search; under 760px switch to the compact phone bar below. */
@media (max-width:1465px){
  header.topbar .primary-nav{gap:2px;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}
  header.topbar .primary-nav a{padding:7px 8px}
  header.topbar .search-form{flex:0 0 220px;width:220px}
}
@media (max-width:1080px){
  header.topbar .primary-nav{display:none}
  header.topbar .search-form{margin-left:auto}
}
/* Phones/small tablets (<=760px): ONE 56px row = brand + search icon + menu button. The search field opens as a
   floating card under the bar, the link list as a dropdown sheet; the ticker shrinks to 28px. */
header.topbar .topbar-btn{display:none}
@media (max-width:760px){
  header.topbar .topbar-inner{height:56px;padding:0 14px 0 16px;gap:8px;flex-wrap:nowrap}
  header.topbar .brand{flex:1;min-width:0}
  header.topbar .topbar-btn{
    display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:40px;height:40px;margin:0;padding:0;
    color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:11px;cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  header.topbar .topbar-btn:hover,header.topbar .topbar-btn[aria-expanded="true"]{background:rgba(255,255,255,.14)}
  header.topbar .topbar-menu-toggle .i-close,header.topbar .topbar-menu-toggle[aria-expanded="true"] .i-open{display:none}
  header.topbar .topbar-menu-toggle[aria-expanded="true"] .i-close{display:block}
  header.topbar .search-form{
    display:none;position:absolute;top:calc(100% + 8px);left:12px;right:12px;width:auto;min-width:0;margin:0;order:0;
    z-index:2;padding:8px 8px 8px 14px;box-shadow:0 18px 40px -12px rgba(0,0,0,.6),0 10px 30px -14px rgba(109,40,217,.7);
  }
  header.topbar.is-search-open .search-form{display:flex}
  header.topbar .search-form input{font-size:16px} /* >=16px stops iOS zooming on focus */
  header.topbar.is-menu-open .primary-nav{
    display:flex;flex-direction:column;gap:2px;position:absolute;top:100%;left:0;right:0;z-index:2;
    padding:8px 12px 14px;overflow:visible;
    background:#0A0A0F;-webkit-backdrop-filter:none;backdrop-filter:none;
    border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 24px 40px -16px rgba(0,0,0,.6);
  }
  header.topbar.is-menu-open .primary-nav a{display:block;padding:13px 12px;font-size:15px;border-radius:10px}
  div.status-ribbon{height:28px}
  div.status-ribbon .ticker-item{font-size:11px}
}
@media (max-width:480px){
  header.topbar .brand-tag{display:none}
}
@media (prefers-reduced-motion:reduce){
  header.topbar *,header.topbar *::after,div.status-ribbon *{transition:none !important;animation:none !important}
}