/* Binary-Parse site additions — external stylesheet (CSP: style-src 'self').
   Production CSP blocks ALL inline style attributes, so every style the
   add-on pages need lives here as classes. Contents:
   1) Per-language page font (matches the SPA's own swap: EN mono / AR Changa)
   2) Latin brand wordmark stays mono in BOTH languages (fixed identity)
   3) Unified-number bidi isolation + RTL alignment
   4) RTL mirroring for physical left-side utilities in Arabic mode
   5) Privacy page backgrounds and document layout (CSP-safe) */

/* ---------- 1) page font per language ---------- */
#page-font { font-family: "Share Tech Mono", monospace; }
html[dir='rtl'] #page-font { font-family: Changa, sans-serif; }

/* ---------- 2) brand wordmark — always the Latin mono ---------- */
.text-2xl.tracking-widest { font-family: "Share Tech Mono", monospace; }

/* ---------- 3) unified national number (bidi-safe) ---------- */
/* digits keep LTR order, alignment follows the paragraph direction */
.bp-num { direction: ltr; unicode-bidi: isolate; }
html[dir='rtl'] .bp-num { text-align: right; }

/* ---------- 4) RTL mirroring (Arabic) ---------- */
html[dir='rtl'] .text-left { text-align: right; }
html[dir='rtl'] .border-l-2 { border-left-width: 0; border-right-width: 2px; }
html[dir='rtl'] .pl-4 { padding-left: 0; padding-right: 1rem; }
html[dir='rtl'] .border-l-4 { border-left-width: 0; border-right-width: 4px; }
html[dir='rtl'] .w-24.h-px { left: auto; right: 0; }

/* ---------- 5) privacy page (CSP-safe backgrounds & layout) ---------- */
.doc-body { font-family: Changa, sans-serif; }
html[dir='rtl'] .doc-body p { line-height: 2; }

/* ---------- 6) section order (owner decision 2026-09-11): Portfolio before About ---------- */
/* React owns the DOM order, so sections are reordered with flex `order` only —
   no node moving. NAV is position:fixed (out of flow); hero keeps order 0. */
main.relative.z-10 { display: flex; flex-direction: column; }
main.relative.z-10 > section#portfolio { order: 1; }
main.relative.z-10 > section#about { order: 2; }
main.relative.z-10 > footer { order: 3; }
/* nav menus (desktop row + mobile column are both flex): Portfolio link first */
nav a[href="#portfolio"] { order: -1; }

.pv-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: #000000; }
.pv-bg-img {
  position: absolute; inset: 0; opacity: 0.15;
  background-image: url('/assets/matrix-code.jpg');
  background-size: cover; background-position: center center;
  mix-blend-mode: screen; filter: hue-rotate(60deg) saturate(200%);
}
.pv-bg-grid {
  position: absolute; inset: 0; opacity: 0.2;
  background-image:
    linear-gradient(to right, rgba(0, 255, 65, 0.02) 1px, transparent 1px),
    linear-gradient(rgba(0, 255, 65, 0.02) 1px, transparent 1px);
  background-size: 2rem 2rem;
  -webkit-mask-image: linear-gradient(transparent, black 20%, black 80%, transparent);
  mask-image: linear-gradient(transparent, black 20%, black 80%, transparent);
}
.pv-bg-vig {
  position: absolute; inset: 0;
  background: radial-gradient(circle at center, transparent 30%, #000000 100%);
  pointer-events: none;
}
.pv-doc { padding-top: 9rem; padding-bottom: 3rem; }
.pv-idx { margin-inline-end: 0.6rem; }