/* ==========================================================================
   BINEXA — Base layer
   Reset, layout primitives, typography, accessibility helpers.
   Direction-agnostic: logical properties only (works for RTL and LTR).
   ========================================================================== */

:root {
  --container-pad: 16px;
  --section-pad: 72px;
  --fs-display-fluid: clamp(34px, 6vw, var(--fs-display));
  --fs-h1-fluid: clamp(30px, 4.6vw, var(--fs-h1));
  --fs-h2-fluid: clamp(26px, 3.4vw, var(--fs-h2));
  --fs-h3-fluid: clamp(19px, 2vw, var(--fs-h3));
}

@media (min-width: 768px) {
  :root { --container-pad: 24px; --section-pad: 96px; }
}
@media (min-width: 1280px) {
  :root { --section-pad: 120px; }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h); /* anchor targets clear the fixed header (single source of the offset) */
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--surface-page);
  color: var(--text-primary);
  text-rendering: optimizeLegibility;
}

html[lang="en"] body { font-family: var(--font-body); }

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
img { font-style: italic; } /* readable alt text if an image fails */

h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"], .list-reset { list-style: none; padding: 0; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

a { transition: color var(--dur-fast) var(--ease-standard); }
a:hover { text-decoration: none; }

[hidden] { display: none !important; }

/* ---------- Focus (visible, brand gold) ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--gold-400);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* ---------- Layout primitives ---------- */
.container {
  width: 100%;
  max-width: calc(var(--container-max) + var(--container-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  position: relative;
  padding-block: var(--section-pad);
}
.section--deep  { background: var(--surface-deep); }
.section--navy  { background: var(--surface-navy); }
.section--flush { padding-block: 0; }

.stack   { display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-4)); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--space-3)); }

/* ---------- Typography ---------- */
.t-display { font: var(--weight-extra) var(--fs-display-fluid)/var(--lh-tight) var(--font-arabic); }
.t-h1      { font: var(--weight-extra) var(--fs-h1-fluid)/var(--lh-tight) var(--font-arabic); }
.t-h2      { font: var(--weight-extra) var(--fs-h2-fluid)/var(--lh-tight) var(--font-arabic); }
.t-h3      { font: var(--weight-bold) var(--fs-h3-fluid)/var(--lh-snug) var(--font-arabic); }
.t-lead    { font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--text-secondary); }
.t-body    { font: var(--type-body); color: var(--text-secondary); }
.t-small   { font-size: var(--fs-small); line-height: var(--lh-snug); }
.t-muted   { color: var(--text-muted); }
.t-gold    { color: var(--text-accent); }
.t-latin   { font-family: var(--font-display-latin); letter-spacing: var(--tracking-latin-caps); }
.t-wordmark{ font-family: var(--font-display-latin); letter-spacing: var(--tracking-wordmark); }

/* Phone numbers and emails always read left-to-right */
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* ---------- Accessibility helpers ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  z-index: 1000;
  padding: var(--space-3) var(--space-5);
  background: var(--gold-500);
  color: var(--ink-900);
  font-weight: var(--weight-extra);
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
  transition: transform var(--dur-base) var(--ease-out);
}
.skip-link:focus-visible { transform: none; color: var(--ink-900); }


/* Image that failed to load (e.g. a generated asset still pending): hide the broken-image
   glyph and let the container's surface show through. Flag set in the <head> boot script. */
img.is-missing { visibility: hidden; }

/* Long-page rendering: sections far from the viewport skip layout & paint until approached.
   `auto` in contain-intrinsic-size remembers each section's real height once rendered.
   Note: this applies paint containment — keep position:fixed UI (toast, call bar) outside sections. */
main > section:not(.hero),
.site-footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}
/* Before an in-page jump, nav.js renders everything (html.cv-full) so anchor targets land exactly
   (estimated heights of unrendered sections would otherwise shift the destination). */
html.cv-full main > section,
html.cv-full .site-footer { content-visibility: visible; }