/* ============================================================================
   G Web3 Networks — inner-page skin.
   Re-skins the Bootstrap theme pages (origin, verticals, expositories, 404, …)
   to match the Genesis homepage: cinematic neutral palette (no neon), the "G."
   Orbitron wordmark in place of a logo, film grain, and a soft page-load
   fade-in. Shared by every inner page, so this single file restyles
   them all. (Also inherited by the _index.html backup — harmless.)
   ========================================================================== */

/* Brand wordmark — self-hosted Orbitron, subset to just "G." (no logo asset). */
@font-face {
    font-family: "Orbitron";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../assets/fonts/orbitron-g.woff2") format("woff2");
    unicode-range: U+2E, U+47;
}

/* Body + headings — self-hosted Inter (variable: all weights in one 48KB file).
   The theme asked for "Plus Jakarta Sans" but never loaded it, so text fell back
   to plain system sans. Self-hosted so it loads everywhere (incl. China). */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../assets/fonts/inter-var.woff2") format("woff2");
}

:root {
    --color-dark: #0f1115;
    --color-light: #fbf5f3;
    --color-primary: #8fb0c9;   /* steel accent (replaces neon pink) */
    --color-secondary: #fbf5f3; /* neutral highlight (replaces neon green) */
    --color-heading: #fbf5f3;
    --color-body: #a6a39e;      /* neutral warm grey body text */
    --color-border: rgba(251, 245, 243, 0.12);
    --color-bg: #0f1115;
    --gx-muted: #9a9792;
    --gx-accent: #d4d0cb;       /* neutral label grey (matches homepage eyebrows) */
    --gx-steel: #8fb0c9;        /* desaturated accent (matches homepage CTA) */
    --gx-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
    /* Override the theme's never-loaded "Plus Jakarta Sans" with Inter. */
    --font-primary: "Inter", system-ui, -apple-system, sans-serif;
    --font-heading: "Inter", system-ui, -apple-system, sans-serif;
}

/* ── Hide-and-reveal page load: a steel spinner over a dark veil that fades away
   for a slow, cinematic fade-from-black once everything has loaded ─────────────
   The inline critical <style> in each <head> holds body{visibility:hidden} so
   nothing paints unstyled; the .gw-loader veil (a child) overrides that to stay
   visible and show the spinner. main.js adds .is-ready on window 'load' (or a
   failsafe), which makes the body visible and fades the veil out, then removes it.
   A <noscript> fallback reveals the body and hides the veil when JS is off. */
body.is-ready { visibility: visible; }

.gw-loader {
    position: fixed;
    inset: 0;
    z-index: 100000;
    visibility: visible;                 /* override body{visibility:hidden} so the spinner shows */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0f1115;
    opacity: 1;
    transition: opacity 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.gw-loader__spinner {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid rgba(251, 245, 243, 0.14);
    border-top-color: #8fb0c9;           /* steel accent */
    animation: gwSpin 0.8s linear infinite;
}
@keyframes gwSpin { to { transform: rotate(360deg); } }

/* Reveal: a slow fade-from-black as the veil dissolves to the loaded page. */
body.is-ready .gw-loader { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
    .gw-loader { transition: none; }
    .gw-loader__spinner { animation: none; }
}

/* Force dark background regardless of theme toggle */
body,
[data-theme="light"],
[data-theme="dark"] {
    background-color: #0f1115 !important;
    color: #fbf5f3;
}

/* ── Film grain (fixed overlay) ───────────────────────────────────────────────
   Corner brackets are exclusive to the index page, so there are none here.
   Same isotropic SVG noise as the homepage, kept subtle over text. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 99991;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='gxGrain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23gxGrain)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    /* No mix-blend-mode: a plain composited layer never re-blends on scroll. */
    opacity: 0.05;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.main-header,
.main-header.header--sticky {
    background-color: rgba(15, 17, 21, 0.92) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Brand: replace the logo image with the "G." Orbitron wordmark.
   The theme cross-fades the two logos with OPACITY (not display), and on
   data-theme=dark it sets .logo-dark{opacity:0}, .logo-light{opacity:1}. We carry
   the wordmark on the in-flow .logo-dark (it sizes the overflow:hidden container),
   so force it visible and hide the absolutely-positioned .logo-light overlay. */
.main-header__logo { overflow: visible !important; }   /* theme clips it; never clip the "G." */
.main-header__logo .logo-light { display: none !important; }
.main-header__logo .logo-dark  { display: block !important; opacity: 1 !important; }
.main-header__logo .logo-dark a {
    display: inline-flex;
    align-items: center;
    font-family: "Orbitron", var(--gx-mono) !important;
    font-weight: 700 !important;
    font-size: 23px !important;
    letter-spacing: 0.06em;
    line-height: 1;
    color: #fbf5f3;
}
.main-header__logo .logo-dark a img { display: none; }
.main-header__logo .logo-dark a::after { content: "G."; }

/* ── Header geometry: match the homepage nav position ─────────────────────────
   The theme caps the header at 1320px and centres it, so the brand sits inset.
   Make it a full-width bar with the homepage's gutters + vertical rhythm, so the
   "G." lands at the left gutter and the links at the right, at the same height. */
.main-header__layout .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.main-header__layout .main-header__inner {
    max-width: 100% !important;
    padding: 30px clamp(28px, 5vw, 64px) 26px !important;
}
/* Brand left, links right (homepage layout) — the theme centres the menu.
   Desktop only, so the mobile drawer + trigger layout is left untouched. */
@media (min-width: 1025px) {
    /* The theme gives the logo flex-basis:0 and relied on flex-grow:1 to expand it;
       with grow:0 it collapses to zero width and overflow:hidden clips the "G." away.
       flex:0 0 auto sizes it to the wordmark; overflow:visible stops the clipping. */
    .menu-center .main-header__logo { flex: 0 0 auto !important; }
    .main-header.menu-center .main-header__nav { margin-left: auto !important; margin-right: 0 !important; }
}

/* ── Navigation: same mono / size / spacing as the homepage links ─────────── */
.main-header__layout .main-header__default .navbar-nav .menu-item a,
.main-header__layout .main-header__default .navbar-nav .menu-item a span,
.navbar-nav > li > a,
.navbar-nav > li > a span {
    font-family: var(--gx-mono) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: #9a9792 !important;
}
.navbar-nav > li > a:hover,
.navbar-nav > li > a:hover span,
.navbar-nav > li.current-menu-item > a,
.navbar-nav > li.current-menu-item > a span { color: #fbf5f3 !important; }
.sub-menu li a {
    font-family: var(--gx-mono) !important;
    font-size: 12px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #9a9792 !important;
}
.sub-menu li a:hover { color: #fbf5f3 !important; }

/* ── Buttons (neutral outline, steel on hover) ────────────────────────────── */
.btn,
.btn-circle {
    border-color: rgba(251, 245, 243, 0.45);
    color: #fbf5f3;
}
.btn:hover,
.btn-circle:hover {
    border-color: #8fb0c9;
    color: #8fb0c9;
}
.circle-fill { background-color: #8fb0c9 !important; }

/* ── Typography: Inter for body + headings, with real bold titles ──────────── */
body, p, blockquote, li,
h1, h2, h3, h4, h5, h6,
.heading-title, .title, .sub-title, .disc {
    font-family: "Inter", system-ui, -apple-system, sans-serif !important;
}
h1, h2, h3, h4, h5, h6 { color: #fbf5f3; }
p { color: #a6a39e; }
/* The theme rendered headings at normal weight; give titles real bold + tight tracking. */
h1, h2, .heading-title { font-weight: 800 !important; letter-spacing: -0.02em; }
h3, h4 { font-weight: 700 !important; letter-spacing: -0.01em; }
h5, h6 { font-weight: 600 !important; }

/* ── Links ────────────────────────────────────────────────────────────────── */
a { color: #fbf5f3; }
a:hover { color: #8fb0c9; }

/* ── Breadcrumb ───────────────────────────────────────────────────────────── */
.breadcrumb-area {
    background-color: #0f1115 !important;
    border-bottom: 1px solid rgba(251, 245, 243, 0.08);
}
.breadcrumb-area .heading-title,
.breadcrumb-area .sub-title { color: #fbf5f3; }

/* ── Blog / post cards ────────────────────────────────────────────────────── */
.post-meta-cont h3 { color: #fbf5f3; }
.post-meta-cont h3:hover,
.post-meta-cont h3 a:hover { color: #8fb0c9; }
.post-meta__author,
.post-meta__date,
.ms-p--ttr { color: #9a9792; }
.post-categories li a { color: #d4d0cb !important; cursor: default; }
/* Category pills are non-clickable cues, not links — drop the hover affordance. */
.ms-single-post .ms-sp--header .post-category__list .post-categories li:hover {
    background: var(--color-contrast-lower);
}

/* ── Smooth image load-in (heroes + card thumbnails) ──────────────────────────
   Heavy header/thumbnail images popped in abruptly once decoded. Show a steel
   placeholder colour in the media frame while loading, then fade the image in.
   main.js hides each loading image and adds .is-loaded once decoded; cached
   images and no-JS show immediately (the !important beats the inline opacity:0). */
.ms-single-post--img .media-wrapper,
.ms-posts--card .media-wrapper {
    background-color: #1b1f27;
}
.ms-single-post--img .media-wrapper img,
.ms-posts--card .media-wrapper img {
    transition: opacity 0.6s ease;
}
.ms-single-post--img .media-wrapper img.is-loaded,
.ms-posts--card .media-wrapper img.is-loaded {
    opacity: 1 !important;
}

/* ── About / list / portfolio backgrounds ─────────────────────────────────── */
.ms-about--area,
.about-inner,
.ms-portfolio--wrap,
.project-list-wrap { background-color: #0f1115; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.ms-footer,
footer {
    background-color: #0f1115 !important;
    border-top: 1px solid rgba(251, 245, 243, 0.08);
    color: #9a9792;
}

/* ── _index.html backup slider (swiper / canvas) — neutralised ────────────── */
.video-slide .slider-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(ellipse at center, transparent 15%, rgba(15, 17, 21, 0.96) 100%);
}
.swiper-wrapper,
.swiper-slide {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
[data-swiper-parallax] {
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
#dot-mesh-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: block;
    background: #0f1115;
}
.swiper-slide .slider-inner { position: relative; overflow: hidden; }
.swiper-slide .swiper-content { position: relative; z-index: 2; }
.swiper-button-next,
.swiper-button-prev { color: #fbf5f3 !important; }
.swiper-button-next:hover,
.swiper-button-prev:hover { color: #8fb0c9 !important; }
.swiper-pagination-progressbar-fill { background: #8fb0c9 !important; }
.slide-range { color: #fbf5f3; }

/* ── Error page ───────────────────────────────────────────────────────────── */
.error-page-inner { background-color: #0f1115; }
.error-page-inner h1,
.error-page-inner h2,
.error-page-inner p { color: #fbf5f3; }

/* ── Removed chrome: theme toggle, search, back-to-top ────────────────────── */
.ms_theme_mode { display: none; }
.main-header--widgets { display: none; }
.back-to-top { display: none !important; }

/* ── Small accent labels (tags) → neutral grey, not neon ──────────────────── */
.tag,
.post-categories a,
.post-category a { color: #d4d0cb; }

/* ── Menu trigger: icon only ──────────────────────────────────────────────────
   Drop the visible "Menu" label (the button's aria-label still names it) and the
   theme's little left-border divider (a leftover from when the label was there). */
.main-header__nav-trigger span { display: none !important; }
.main-header__nav-trigger { border-left: none !important; padding-left: 0 !important; }
/* Center the bars: the theme's 2px top nudge (to align with the old label) pushed
   them below centre now that it's icon-only. */
.main-header__nav-trigger-icon { margin-top: 0 !important; }
.main-header__nav-trigger-icon,
.main-header__nav-trigger-icon::before,
.main-header__nav-trigger-icon::after {
    background-color: #fbf5f3;
}

/* ── Single-post header meta: space the date + label spans ─────────────────────
   The theme only inserts a separator before .post-author__name, so two plain
   <span>s (date + version) render flush ("July 7, 2026Practice Utility"). Add the
   same dot the post cards use between them. */
.ms-single-post .ms-sp--header .post-meta-date.meta-date-sp span:not(:first-child) {
    display: flex;
    align-items: center;
}
.ms-single-post .ms-sp--header .post-meta-date.meta-date-sp span:not(:first-child)::before {
    content: "";
    width: 3pt;
    height: 3pt;
    margin: 1pt 10pt 0;
    border-radius: 50%;
    background-color: rgba(154, 151, 146, 0.6);
}

/* ── Bottom breathing room for single-post pages with no prev/next nav ─────────
   The .post-navigation block's margin-bottom normally separates the article from
   the footer. Standalone pages without it (e.g. the practice utility) had their
   content sitting flush against the footer — restore the same gap when absent. */
main.ms-single-post:not(:has(.post-navigation)) {
    padding-bottom: calc(40px + var(--global--spacing-vertical, 30px));
}
