/* VEXARO shared brand and responsive navigation system — 2026-10-11 */
:root{--vx-red:#e10600;--vx-bg:#070708;--vx-panel:#111114;--vx-line:rgba(255,255,255,.12);--vx-text:#f7f7f8;--vx-muted:#a4a4ad}
html{scroll-behavior:smooth}body{background-color:var(--vx-bg);color:var(--vx-text)}img{max-width:100%}
.brand,.logo{display:inline-flex;align-items:center;gap:10px;min-width:0;text-decoration:none;white-space:nowrap}
.brand img,.logo img{display:block;width:clamp(124px,15vw,174px);height:34px;object-fit:contain;object-position:left center;flex:0 1 auto}
.brand:focus-visible,.logo:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid #ff3028;outline-offset:3px}
.navlinks,.global-nav{min-width:0;align-items:center}
.navlinks a,.global-nav a{white-space:nowrap}
:where(.panel,.card,.tile,.post,.build-card,.product-card,.setting-card){border-color:var(--vx-line)}
:where(button,.btn,.cta,[role=button]){touch-action:manipulation}
@media(max-width:850px){.nav,.topbar .nav,.bar .nav{gap:12px;flex-wrap:wrap}.navlinks{gap:10px!important;flex-wrap:wrap}.brand img,.logo img{width:140px;height:30px}.global-nav{flex-wrap:wrap}}
@media(max-width:520px){.wrap,.container,.shell{width:calc(100% - 28px)}.navlinks{gap:8px!important}.navlinks a,.global-nav a{font-size:10px}.brand img,.logo img{width:126px;height:28px}main{min-width:0}section,.panel,.card{min-width:0}input,select,textarea,button{max-width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

/* VEXARO cross-page wordmark alignment — keep existing artwork, normalize only its display box. */
:where(.brand,.logo,.site-logo,.brand-logo) img.vxmark,
:where(.brand,.logo,.site-logo,.brand-logo) img,
:where(.brand,.logo,.site-logo,.brand-logo) .vxmark{
  max-width:152px!important;
  width:152px!important;
  height:62px!important;
  object-fit:contain!important;
  object-position:left center!important;
}
@media(max-width:850px){
  :where(.brand,.logo,.site-logo,.brand-logo) img.vxmark,
  :where(.brand,.logo,.site-logo,.brand-logo) img,
  :where(.brand,.logo,.site-logo,.brand-logo) .vxmark{
    max-width:126px!important;width:126px!important;height:51px!important;
  }
}


/* VEXARO RESPONSIVE FIT PASS — shared by website, Members and Admin Hub.
   Prevent content from escaping its component; preserve each page's existing layout. */
:root{--vx-safe-gutter:clamp(12px,2.4vw,28px)}
html{width:100%;max-width:100%;overflow-x:clip}
body{width:100%;max-width:100%;min-width:0;overflow-x:clip}
*,*::before,*::after{box-sizing:border-box}
img,video,canvas,iframe,svg{max-width:100%}
img,video{height:auto}
main,header,footer,nav,section,article,aside,form,fieldset,.wrap,.container,.shell,.panel,.card,.tile,.post,.item,.section,.hero,.toolbar,.nav,.topbar,.top,.bar{min-width:0}
:where(.wrap,.container,.shell){max-width:100%}
:where(.panel,.card,.tile,.post,.item,.section-card,.product-card,.setting-card,.build-card){overflow-wrap:anywhere}
:where(input,select,textarea){max-width:100%;min-width:0}
:where(button,.btn,.cta,.primary,[role=button]){max-width:100%;min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.25}
:where(.actions,.action-row,.button-row,.itemhead,.section-head,.head){min-width:0;flex-wrap:wrap}
:where(.actions,.action-row,.button-row) > :where(a,button,.btn){min-width:0}
:where(.grid,.hq,.hq-grid,.code-grid,.clips,.loadouts,.socials,.layout,.two,.stats){min-width:0}
:where(.grid,.hq,.hq-grid,.code-grid,.clips,.loadouts,.socials,.layout,.two,.stats) > *{min-width:0;max-width:100%}
:where(table){width:100%;max-width:100%;border-collapse:collapse}
:where(pre,code){max-width:100%;overflow-wrap:anywhere;white-space:pre-wrap}
:where(.toolbar,.navlinks,.global-nav){max-width:100%;min-width:0}
:where(.toolbar,.navlinks,.global-nav){scrollbar-width:thin;overscroll-behavior-x:contain}
:where(.icon-button,.icon-btn,[aria-label*="icon" i],button[data-icon]){display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:42px;height:42px;min-width:42px;min-height:42px;padding:0;line-height:1}
:where(.icon-button,.icon-btn,[aria-label*="icon" i],button[data-icon]) svg{width:20px;height:20px;max-width:20px;max-height:20px;flex:0 0 auto}
:where(.brand,.logo,.site-logo,.brand-logo){min-width:0;max-width:100%;flex-shrink:1}
:where(.brand,.logo,.site-logo,.brand-logo) img{max-width:100%;object-fit:contain}
:where(.nav,.topbar .nav,.top .nav,.bar .nav){min-width:0}
:where(.navlinks,.global-nav){flex-wrap:wrap}
:where(.navlinks a,.global-nav a){max-width:100%;overflow-wrap:anywhere}
@media(max-width:900px){
  :where(.wrap,.container,.shell){width:calc(100% - 28px)}
  :where(.grid,.hq,.code-grid,.clips,.loadouts,.socials){grid-template-columns:repeat(2,minmax(0,1fr))}
  :where(.layout){grid-template-columns:minmax(0,1fr)}
  :where(.section-head,.head){align-items:flex-start}
  :where(.nav,.topbar .nav,.top .nav,.bar .nav){gap:10px}
}
@media(max-width:600px){
  :where(.wrap,.container,.shell){width:calc(100% - 24px)}
  :where(.grid,.hq,.hq-grid,.code-grid,.clips,.loadouts,.socials,.two,.stats){grid-template-columns:minmax(0,1fr)}
  :where(.actions,.action-row,.button-row){display:flex;flex-wrap:wrap}
  :where(.actions,.action-row,.button-row) > :where(a,button,.btn){flex:1 1 100%}
  :where(.section-head,.head){gap:12px;flex-direction:column}
  :where(.panel,.card,.tile,.post,.item,.section-card,.product-card,.setting-card,.build-card){padding-inline:clamp(12px,4vw,18px)}
  :where(.toolbar,.navlinks,.global-nav){gap:6px}
  :where(.navlinks a,.global-nav a){white-space:normal}
  :where(.icon-button,.icon-btn,[aria-label*="icon" i],button[data-icon]){width:40px;height:40px;min-width:40px;min-height:40px}
}
@media(hover:none){:where(button,.btn,.cta,.primary,[role=button]):hover{transform:none}}