/* ==========================================================================
   AviCore — Global Tokens, Reset, Typography, Utilities
   ========================================================================== */

:root {
  /* Brand — gold gradient family */
  --avic-gold:        #d4af37;
  --avic-gold-bright: #f4cf52;
  --avic-gold-deep:   #a8821e;
  --avic-gold-shadow: #6b520f;
  --avic-gold-grad:   linear-gradient(135deg, #a8821e 0%, #d4af37 25%, #f4cf52 50%, #d4af37 75%, #a8821e 100%);
  --avic-gold-grad-soft: linear-gradient(135deg, #b8860b 0%, #d4af37 50%, #b8860b 100%);
  --avic-gold-line:   linear-gradient(90deg, transparent 0%, #d4af37 20%, #f4cf52 50%, #d4af37 80%, transparent 100%);

  /* Brand — dark + light surfaces */
  --avic-black:        #0a0a0a;
  --avic-black-soft:   #15110a;
  --avic-charcoal:     #1f1a12;
  --avic-cream:        #faf5e8;
  --avic-cream-soft:   #f5ecd6;
  --avic-paper:        #fffdf6;

  /* Text */
  --avic-text:         #1f1a12;
  --avic-text-on-dark: #f5ecd6;
  --avic-muted:        #6b5d3f;
  --avic-muted-on-dark:#9c8d6f;

  /* Spacing scale (8px grid) */
  --avic-s-1: 4px;
  --avic-s-2: 8px;
  --avic-s-3: 16px;
  --avic-s-4: 24px;
  --avic-s-5: 32px;
  --avic-s-6: 48px;
  --avic-s-7: 64px;
  --avic-s-8: 96px;
  --avic-s-9: 128px;

  /* Radii */
  --avic-radius-sm: 6px;
  --avic-radius-md: 12px;
  --avic-radius-lg: 20px;
  --avic-radius-xl: 32px;
  --avic-radius-pill: 999px;

  /* Shadows — gold-tinted layered system */
  --avic-shadow-sm:   0 2px 8px rgba(168, 130, 30, 0.10);
  --avic-shadow-md:   0 8px 24px rgba(168, 130, 30, 0.14);
  --avic-shadow-lg:   0 16px 40px rgba(168, 130, 30, 0.18);
  --avic-shadow-gold: 0 12px 40px rgba(212, 175, 55, 0.32);
  --avic-shadow-dark: 0 8px 30px rgba(10, 10, 10, 0.35);

  /* Motion */
  --avic-ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --avic-ease-back:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --avic-dur-fast:    0.25s;
  --avic-dur:         0.45s;
  --avic-dur-slow:    0.85s;
  --avic-dur-slower:  1.25s;

  /* Typography stacks */
  --avic-font-display: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif;
  --avic-font-body:    "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif;
  --avic-font-en:      "IBM Plex Sans", system-ui, -apple-system, sans-serif;

  /* Type scale (clamp-driven for responsive) */
  --avic-fs-xs:  clamp(11px, 0.7vw + 8px, 13px);
  --avic-fs-sm:  clamp(13px, 0.8vw + 10px, 15px);
  --avic-fs-base:clamp(15px, 0.9vw + 11px, 17px);
  --avic-fs-md:  clamp(17px, 1.1vw + 12px, 20px);
  --avic-fs-lg:  clamp(20px, 1.4vw + 14px, 26px);
  --avic-fs-xl:  clamp(26px, 2.0vw + 16px, 36px);
  --avic-fs-2xl: clamp(34px, 3.2vw + 18px, 56px);
  --avic-fs-3xl: clamp(46px, 4.5vw + 20px, 84px);

  /* Container widths */
  --avic-container: 1240px;
  --avic-container-narrow: 960px;
  --avic-gutter: clamp(20px, 4vw, 48px);

  /* Header height (for sticky offset / scroll-padding-top) */
  --avic-header-h: 88px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, figure, blockquote, fieldset, legend { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--avic-header-h);
  -webkit-text-size-adjust: 100%;
  margin-top: 0 !important; /* Defensive: cancel any WP admin-bar offset. */
}

/* Defensive — if any plugin re-enables the admin bar, hide its 32px offset. */
#wpadminbar { display: none !important; }
body.admin-bar { padding-top: 0 !important; margin-top: 0 !important; }
@media screen and (max-width: 782px) {
  html.admin-bar { margin-top: 0 !important; }
}
body {
  margin: 0;
  font-family: var(--avic-font-body);
  font-size: var(--avic-fs-base);
  line-height: 1.75;
  color: var(--avic-text);
  background: var(--avic-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "liga", "calt";
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* Cleaner Arabic shaping inside SVG text (cycle diagram labels etc.) */
svg text {
  text-rendering: geometricPrecision;
  font-feature-settings: "liga", "calt";
}
body[dir="rtl"], html[dir="rtl"] body { direction: rtl; }

/* ---------- Page Loader ---------- */
.avic-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  gap: 22px;
  align-content: center;
  background:
    radial-gradient(circle at 50% 38%, rgba(212, 175, 55, 0.18), transparent 32%),
    linear-gradient(145deg, #fffdf6 0%, #faf5e8 46%, #f2e5c5 100%);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.65s var(--avic-ease), visibility 0.65s var(--avic-ease);
}
.avic-loader::before,
.avic-loader::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 10px;
  background: var(--avic-gold-grad);
  box-shadow: 0 0 26px rgba(212, 175, 55, 0.28);
}
.avic-loader::before { top: 0; }
.avic-loader::after { bottom: 0; }
.avic-loader__halo {
  position: absolute;
  width: min(58vw, 420px);
  aspect-ratio: 1;
  border: 1px solid rgba(168, 130, 30, 0.14);
  border-radius: 50%;
  animation: avicLoaderHalo 2.4s var(--avic-ease) infinite;
}
.avic-loader__mark {
  position: relative;
  width: clamp(132px, 18vw, 210px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 18px 26px rgba(31, 26, 18, 0.18));
  animation: avicLoaderMark 1.8s var(--avic-ease) infinite;
}
.avic-loader__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.avic-loader__line {
  position: relative;
  width: min(220px, 48vw);
  height: 2px;
  overflow: hidden;
  border-radius: var(--avic-radius-pill);
  background: rgba(168, 130, 30, 0.16);
}
.avic-loader__line span {
  position: absolute;
  inset-block: 0;
  width: 44%;
  border-radius: inherit;
  background: var(--avic-gold-grad);
  animation: avicLoaderLine 1.25s var(--avic-ease) infinite;
}
body.is-loaded .avic-loader,
body.is-loading-timeout .avic-loader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
@keyframes avicLoaderMark {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.025); }
}
@keyframes avicLoaderHalo {
  0% { transform: scale(0.78); opacity: 0.12; }
  50% { transform: scale(1); opacity: 0.36; }
  100% { transform: scale(1.16); opacity: 0; }
}
@keyframes avicLoaderLine {
  0% { inset-inline-start: -44%; }
  100% { inset-inline-start: 100%; }
}

/* Lenis controlled scroll — smooth and performant */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

img, svg, video { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; transition: color var(--avic-dur-fast) var(--avic-ease); }
a:hover { color: var(--avic-gold-deep); }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
ul, ol { list-style: none; }

/* Selection */
::selection { background: var(--avic-gold); color: var(--avic-black); }

/* Focus — accessible gold ring */
:focus-visible {
  outline: 2px solid var(--avic-gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip link (a11y) */
.skip-link {
  position: absolute;
  top: -100px;
  right: var(--avic-s-3);
  background: var(--avic-black);
  color: var(--avic-cream);
  padding: var(--avic-s-2) var(--avic-s-4);
  border-radius: var(--avic-radius-sm);
  z-index: 9999;
  transition: top var(--avic-dur) var(--avic-ease);
}
.skip-link:focus { top: var(--avic-s-3); }

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--avic-font-display);
  font-weight: 800;
  line-height: 1.3;
  color: var(--avic-charcoal);
  padding-bottom: 0.1em;
}
h1 { font-size: var(--avic-fs-3xl); font-weight: 900; }
h2 { font-size: var(--avic-fs-2xl); }
h3 { font-size: var(--avic-fs-xl); }
h4 { font-size: var(--avic-fs-lg); font-weight: 700; }
h5 { font-size: var(--avic-fs-md); font-weight: 700; }
h6 { font-size: var(--avic-fs-base); font-weight: 700; text-transform: uppercase; }

p { font-size: var(--avic-fs-base); line-height: 1.85; }
.lead { font-size: var(--avic-fs-md); line-height: 1.8; font-weight: 500; color: var(--avic-charcoal); }
.muted { color: var(--avic-muted); }

/* English label — auto-applies Inter on .en class */
.en, [lang="en"] {
  font-family: var(--avic-font-body);
}

/* Gold gradient text */
.gold-text {
  background: var(--avic-gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

/* Kicker — small uppercase label above a heading */
.avic-kicker {
  font-family: var(--avic-font-body);
  font-size: var(--avic-fs-xs);
  text-transform: uppercase;
  color: var(--avic-gold-deep);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: var(--avic-s-3);
  margin-bottom: var(--avic-s-3);
}
.avic-kicker::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1.5px;
  background: var(--avic-gold-grad);
}

/* Eyebrow Arabic kicker (no English uppercase) */
.avic-kicker-ar {
  font-family: var(--avic-font-display);
  font-size: var(--avic-fs-sm);
  color: var(--avic-gold-deep);
  font-weight: 700;
  margin-bottom: var(--avic-s-3);
  display: inline-flex;
  align-items: center;
  gap: var(--avic-s-3);
}
.avic-kicker-ar::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1.5px;
  background: var(--avic-gold-grad);
}

/* Section heading EN secondary line (under AR title) */
.avic-h-en {
  font-family: var(--avic-font-body);
  font-weight: 300;
  font-size: var(--avic-fs-sm);
  text-transform: uppercase;
  color: var(--avic-muted);
  margin-top: var(--avic-s-2);
  margin-bottom: var(--avic-s-4);
}

/* Gold rule — used between sections / headings */
.avic-gold-rule {
  height: 1px;
  background: var(--avic-gold-line);
  border: 0;
  margin: var(--avic-s-4) 0;
}

/* Diamond ornament — used decoratively above/below section headings */
.avic-ornament {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--avic-s-2);
  margin: var(--avic-s-4) 0;
}
.avic-ornament .avic-diamond {
  width: 8px;
  height: 8px;
  background: var(--avic-gold-grad);
  transform: rotate(45deg);
  border-radius: 1px;
}
.avic-ornament .avic-diamond.sm { width: 5px; height: 5px; }
.avic-ornament .avic-line { width: 56px; height: 1px; background: var(--avic-gold-grad); }

/* ---------- Layout: container + section ---------- */
.avic-container {
  width: 100%;
  max-width: var(--avic-container);
  margin-inline: auto;
  padding-inline: var(--avic-gutter);
}
.avic-container-narrow {
  width: 100%;
  max-width: var(--avic-container-narrow);
  margin-inline: auto;
  padding-inline: var(--avic-gutter);
}
.avic-section {
  padding-block: clamp(64px, 8vw, 128px);
  position: relative;
}
.avic-section--cream { background: var(--avic-cream); }
.avic-section--paper { background: var(--avic-paper); }
.avic-section--dark  { background: var(--avic-black); color: var(--avic-text-on-dark); }
.avic-section--dark h1, .avic-section--dark h2, .avic-section--dark h3, .avic-section--dark h4 { color: var(--avic-cream); }
.avic-section--dark .avic-kicker, .avic-section--dark .avic-kicker-ar { color: var(--avic-gold-bright); }

/* ---------- Utility classes ---------- */
.text-center { text-align: center; }
.text-balance { text-wrap: balance; }
.flex { display: flex; }
.grid { display: grid; }
.gap-1 { gap: var(--avic-s-1); }
.gap-2 { gap: var(--avic-s-2); }
.gap-3 { gap: var(--avic-s-3); }
.gap-4 { gap: var(--avic-s-4); }
.gap-5 { gap: var(--avic-s-5); }
.mt-3 { margin-top: var(--avic-s-3); }
.mt-4 { margin-top: var(--avic-s-4); }
.mt-5 { margin-top: var(--avic-s-5); }
.mb-3 { margin-bottom: var(--avic-s-3); }
.mb-4 { margin-bottom: var(--avic-s-4); }
.mb-5 { margin-bottom: var(--avic-s-5); }

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Number display elements --- keep Inter for clean numerals */
.avic-stats-item__num,
.avic-stat__num,
.avic-hero__stat-num,
.avic-pillar-card__num,
.avic-meth-card__num,
.avic-meth-card__en,
.avic-goal-card__num,
.avic-methodology-diff__num,
.avic-pillar-detail-card__num,
.avic-about-story__badge-num,
.avic-about-snippet__badge-num,
.avic-coded-by__name,
.avic-feature-card__num,
.avic-workflow-step__num,
[data-counter] {
  font-family: var(--avic-font-en);
}
.en, [lang="en"] { font-family: var(--avic-font-en); }