/* Virexon: page layer on top of Nocturne (assets/css/nocturne.css).
   Mirrors the <style> block of the Claude Design handoff "Virexon Website.dc.html"
   plus the hover states the prototype declared with style-hover. */

/* Inter, self-hosted (no Google Fonts request: faster and GDPR-friendly). */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/inter-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/inter-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ── Design tokens specific to Virexon (magenta + lime on the Nocturne ground) ── */
:root{--vx-mag:oklch(0.70 0.26 328);--vx-mag-300:oklch(0.85 0.12 328);--vx-mag-800:oklch(0.32 0.11 328);--vx-lime:oklch(0.90 0.21 128);--vx-lime-800:oklch(0.34 0.09 128);--color-accent:oklch(0.70 0.26 328);--color-accent-800:oklch(0.32 0.11 328);--color-accent-100:oklch(0.95 0.04 328)}
html{scroll-behavior:smooth}
[hidden]{display:none!important}
body{margin:0;background:var(--color-bg)}
a{color:var(--vx-mag-300)}a:hover{color:var(--vx-lime)}
@keyframes vxPulse{0%,100%{opacity:.55}50%{opacity:1}}

/* Page wrapper. The prototype used overflow:hidden, which silently disables
   position:sticky on the header; overflow-x:clip keeps the intent (no sideways
   scroll from the glows) and lets the sticky header and sticky column work. */
.vx-page{position:relative;overflow-x:clip;min-height:100vh;font-family:var(--font-body);color:var(--color-text)}

/* Phosphor icons as inline SVG (same box as the icon font: 1em square). */
.vx-ico{display:inline-block;width:1em;height:1em;flex:none;vertical-align:-0.125em;fill:currentColor}
.btn .vx-ico{vertical-align:middle}

/* Skip link (accessibility). */
.vx-skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--color-surface);color:var(--color-text);padding:8px 12px;border-radius:var(--radius-md)}
.vx-skip:focus{left:8px}

/* ── Hover states (style-hover in the prototype). !important because the
   prototype's base values are inline styles, which hover must override. ── */
.vx-feature{transition:box-shadow .2s, transform .2s}
.vx-feature:hover{box-shadow:0 0 0 1px var(--vx-mag),0 0 28px color-mix(in srgb,var(--vx-mag) 22%,transparent)!important;transform:translateY(-2px)}
.vx-map{transition:box-shadow .2s}
.vx-map:hover{box-shadow:0 0 0 1px var(--vx-lime),0 0 30px color-mix(in srgb,var(--vx-lime) 18%,transparent)!important}
.vx-wizard-btn:hover{background:color-mix(in srgb,var(--vx-lime) 12%,transparent)!important}
.vx-faq-btn:hover{color:var(--vx-lime)!important}
.vx-faq-btn:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:var(--radius-md)}

/* Mods table: long mod names may wrap on phones instead of forcing a sideways scroll. */
.vx-mods-table td>span{vertical-align:-1px} /* matches the icon-font baseline of the prototype */
@media (max-width:560px){.vx-mods-table td:first-child{white-space:normal!important}}

/* ── Elementor neutraliser: our widgets draw their own sections edge to edge,
   so Elementor's wrappers must add no spacing, width or colours of their own. ── */
.vx-page .elementor-widget[class*="elementor-widget-vx-"]{margin:0!important;width:100%}
.vx-page .elementor-widget[class*="elementor-widget-vx-"] > .elementor-widget-container{margin:0;padding:0}
.vx-page .e-con.vx-root, .vx-page .e-con.vx-root > .e-con-inner{padding:0!important;gap:0!important;max-width:none!important;width:100%}
.vx-page .elementor a{box-shadow:none}
.vx-page .elementor-widget-container h1,.vx-page .elementor-widget-container h2,.vx-page .elementor-widget-container h3{color:inherit}

/* Plain WordPress pages (privacy policy etc.) in the same style. */
.vx-prose{max-width:760px;margin:0 auto;padding:64px 24px 96px}
.vx-prose h1{font-size:clamp(32px,4vw,48px);letter-spacing:-.03em;margin:0 0 24px}
.vx-prose p,.vx-prose li{color:var(--color-neutral-300);font-size:16px;line-height:1.65}

/* Logged-in admins: keep the sticky header below the WordPress toolbar. */
body.admin-bar .vx-header{top:32px!important}
@media (max-width:782px){body.admin-bar .vx-header{top:46px!important}}
@media (max-width:600px){body.admin-bar .vx-header{top:0!important}}

/* Phones: the prototype let the anchor links wrap into two extra rows, which made
   the sticky header cover a third of the screen. Here the header stays two rows:
   logo + Discord button, then the anchor links as one row that scrolls sideways. */
@media (max-width:760px){
  .vx-header .nav{padding:10px 16px!important;row-gap:8px}
  .vx-header .vx-nav-links{order:3;flex:1 0 100%;flex-wrap:nowrap!important;overflow-x:auto;gap:18px!important;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,#000 85%,transparent)}
  .vx-header .vx-nav-links::-webkit-scrollbar{display:none}
  .vx-header .vx-nav-links a{white-space:nowrap;font-size:13px}
}

/* Long-form pages (privacy policy): book-like rhythm on the dark ground. */
.vx-prose h2{font-size:clamp(24px,2.6vw,30px);letter-spacing:-.02em;margin:52px 0 14px;color:var(--color-text)}
.vx-prose h3{font-size:19px;letter-spacing:-.01em;margin:30px 0 8px;color:var(--color-text)}
.vx-prose p{margin:0 0 16px}
.vx-prose ul{margin:0 0 18px;padding-left:22px}
.vx-prose li{margin:0 0 8px}
.vx-prose li::marker{color:var(--vx-mag-300)}
.vx-prose strong{color:var(--color-text);font-weight:600}
.vx-prose code{font:13px ui-monospace,Menlo,monospace;background:var(--color-surface);padding:1px 6px;border-radius:var(--radius-sm);color:var(--vx-mag-300)}
.vx-prose article > p:first-of-type{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-neutral-400)}

/* "Why Virexon": the design made the intro column sticky next to the feature grid.
   In practice the text seemed to hang in the screen while you scrolled (reported
   twice), so it now scrolls along on every screen size. */
.elementor-widget-vx-why section > div > div:first-child{position:static!important}