/* ============================================================
   ARABTECH — BASE
   Browser surfaces are themed here: selection, caret, scrollbar,
   focus ring, underline offset, tabular numerals.
   ------------------------------------------------------------
   WORDPRESS NOTE. The bidi block near the bottom is load-bearing,
   not decoration: inc/bidi.php wraps every rating, standard
   reference, phone number and email in <bdi>/.spec-value at render
   time, and these rules are what stop the bidi algorithm reordering
   "6300 A" into "A 6300" inside Arabic prose.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  color-scheme: light;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

body {
  background: var(--ground);
  color: var(--ink-secondary);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); font-weight: 800; letter-spacing: var(--tr-display); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
p  { text-wrap: pretty; }
p, li { max-width: var(--measure); }

a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-color: var(--red-d); }

/* ---- Browser surfaces ---- */
::selection { background: var(--teal-l); color: var(--teal-d); }
:root { caret-color: var(--red-d); accent-color: var(--teal); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--red-d);
  outline-offset: 2px;
  border-radius: 4px;
  box-shadow: none;
}

* { scrollbar-width: thin; scrollbar-color: var(--gr-300) var(--bg-2); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: var(--gr-300); border: 3px solid var(--bg-2); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--gr-500); }

/* There is no monospace in this world — numbers are set in the text
   face with tabular figures so columns still line up. */
table, .tech, .spec-value, [data-numeric], .t-year {
  font-variant-numeric: tabular-nums lining-nums;
}

/* Latin technical tokens inside Arabic prose must be isolated or the
   bidi algorithm reorders "630 A" to "A 630". */
bdi, .spec-value, .part-no, .std-ref { unicode-bidi: isolate; }
:lang(ar) .spec-value, :lang(ar) .part-no, :lang(ar) .std-ref { direction: ltr; unicode-bidi: isolate; }
.spec-value, .part-no, .std-ref { white-space: nowrap; }

.u-visually-hidden, .sr {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; inset-inline-start: var(--s-4); top: -100%;
  z-index: 999; background: var(--red-d); color: #fff;
  padding: var(--s-3) var(--s-5); font-weight: 700; border-radius: var(--r-sm);
  font-family: var(--font-display); font-size: var(--t-small); text-decoration: none;
}
.skip-link:focus { top: var(--s-4); }