/**
 * JIA Design System — Phase 1
 * Source of truth for colors, type, surfaces, buttons.
 * Legacy aliases keep existing templates working.
 * Elementor/theme.json mirror these tokens.
 */

:root {
  /* —— Primary —— */
  --jia-deep-navy: #041C3D;
  --jia-navy: #082B4C;
  --jia-royal-blue: #1769C2;
  --jia-deep-blue: #0F4F8A;
  --jia-bright-blue: #2587E8;

  /* —— Surfaces —— */
  --jia-white: #FFFFFF;
  --jia-soft-blue: #F3F8FD;
  --jia-light-blue: #DCEEFF;
  --jia-soft-gray: #F7F9FB;

  /* —— Functional surfaces (Contrast + Motifs v1; aliases over brand palette) —— */
  --jia-surface-white: var(--jia-white);
  --jia-surface-soft: var(--jia-soft-gray);
  --jia-surface-blue-tint: #EEF4F8;
  --jia-surface-navy: var(--jia-navy);
  --jia-surface-deep-navy: var(--jia-deep-navy);

  /* —— Motif strokes (opacity controlled in CSS, not here) —— */
  --jia-motif-navy: var(--jia-navy);
  --jia-motif-blue: var(--jia-royal-blue);
  --jia-motif-gold: var(--jia-gold);
  --jia-motif-opacity: 0.07;
  --jia-motif-opacity-soft: 0.05;
  --jia-motif-opacity-dark: 0.06;

  /* —— Text (readable hierarchy) —— */
  --jia-ink: #082B4C;
  --jia-secondary-text: #536579;
  --jia-muted: #718096;

  /* —— Borders —— */
  --jia-border: #D5DEE8;

  /* —— Accents —— */
  --jia-emerald: #008B72;
  --jia-gold: #B88A3B;

  /* —— Semantic (not brand CTAs) —— */
  --jia-success: #008B72;
  --jia-error: #B42318;

  /* —— Spacing scale (Premium Design Refinement v1) —— */
  --jia-space-0: 4px;
  --jia-space-1: 8px;
  --jia-space-1b: 12px;
  --jia-space-2: 16px;
  --jia-space-3: 24px;
  --jia-space-4: 32px;
  --jia-space-5: 48px;
  --jia-space-6: 64px;
  --jia-space-7: 80px;
  --jia-space-7b: 96px;
  --jia-space-8: 120px;
  --jia-space: 8px;

  /* —— Radius —— */
  --jia-radius: 4px;
  --jia-radius-sm: 2px;
  --jia-radius-pill: 999px;

  /* —— Layout —— */
  --jia-max: 1240px;
  --jia-max-wide: 1320px;
  --jia-read: 720px;
  --jia-hero-text: 680px;

  /* —— Typography —— */
  --jia-font: "Sora", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --jia-display: "Sora", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --jia-font-ar: "IBM Plex Sans Arabic", "Sora", system-ui, sans-serif;

  /* —— Type scale (Premium Design Refinement v1) —— */
  --jia-text-body: 17px;
  --jia-text-body-mobile: 16px;
  --jia-text-nav: 14.5px;
  --jia-text-label: 12.5px;
  --jia-text-meta: 13px;
  --jia-text-btn: 14.5px;
  --jia-text-practice: clamp(1.25rem, 2vw, 1.625rem);
  --jia-text-section: clamp(1.875rem, 3vw, 2.5rem);
  --jia-text-hero: clamp(2.5rem, 4.2vw, 3.75rem);
  --jia-text-hero-ar: clamp(2.125rem, 3.8vw, 3.25rem);
  --jia-lh-body: 1.7;
  --jia-lh-body-ar: 1.85;
  --jia-lh-heading: 1.15;
  --jia-lh-heading-ar: 1.32;
  --jia-section-pad: 80px;
  --jia-section-pad-md: 64px;
  --jia-section-pad-sm: 56px;
  --jia-header-h: 76px;
  --jia-header-stuck: 66px;
  --jia-btn-h: 46px;

  /* —— Motion (Premium Motion System v1) —— */
  --jia-motion-fast: 180ms;
  --jia-motion-base: 280ms;
  --jia-motion-medium: 420ms;
  --jia-motion-slow: 700ms;
  --jia-motion-cinematic: 900ms;
  --jia-ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --jia-ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --jia-ease-linear: linear;
  --jia-reveal-y: 24px;
  --jia-reveal-y-sm: 12px;

  /* —— On-dark text —— */
  --jia-on-navy-muted: #9AA8BC;
  --jia-on-navy-soft: #D5DEEA;
  --jia-on-navy-kicker: #C5D0E0;

  /* —— Dark section gradient (subtle) —— */
  --jia-dark-gradient: linear-gradient(145deg, #041C3D 0%, #082B4C 55%, #0F4F8A 140%);

  /* —— Legacy aliases (preserve existing CSS class bindings) —— */
  --jia-deep: var(--jia-deep-navy);
  --jia-primary: var(--jia-navy);
  --jia-royal: var(--jia-royal-blue);
  --jia-secondary: var(--jia-royal-blue); /* interactive / links / primary CTA */
  --jia-bright: var(--jia-bright-blue);
  --jia-accent: var(--jia-bright-blue);
  --jia-tint: var(--jia-light-blue);
  --jia-paper: var(--jia-soft-gray);
  --jia-text: var(--jia-ink);
  --jia-slate: var(--jia-secondary-text);
  --jia-muted-blue: var(--jia-secondary-text);
  --jia-intelligence: var(--jia-secondary-text);
  --jia-primary-dark: var(--jia-deep-navy);
  --jia-surface: var(--jia-white);
  --jia-soft: var(--jia-soft-blue);
}

/* Arabic prefers IBM Plex as primary stack */
html[lang^="ar"] body,
html[dir="rtl"] body {
  font-family: var(--jia-font-ar);
  line-height: var(--jia-lh-body-ar);
  font-weight: 400;
  -webkit-font-smoothing: auto;
}

body {
  color: var(--jia-ink);
  background: var(--jia-white);
  font-family: var(--jia-font);
  font-size: var(--jia-text-body);
  font-weight: 400;
  line-height: var(--jia-lh-body);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--jia-royal-blue);
}
a:hover {
  color: var(--jia-deep-blue);
}

h1, h2, h3, h4 {
  font-family: var(--jia-display);
  color: var(--jia-ink);
  letter-spacing: -0.02em;
  line-height: var(--jia-lh-heading);
}
h1 { font-weight: 600; }
h2 { font-weight: 600; }
h3 { font-weight: 600; }
h4 { font-weight: 600; }

html[lang^="ar"] h1,
html[lang^="ar"] h2,
html[lang^="ar"] h3,
html[lang^="ar"] h4,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4 {
  font-family: var(--jia-font-ar);
  letter-spacing: 0;
  line-height: var(--jia-lh-heading-ar);
}
html[lang^="ar"] h1,
html[lang^="ar"] h2,
html[dir="rtl"] h1,
html[dir="rtl"] h2 {
  font-weight: 600;
}
html[lang^="ar"] h3,
html[lang^="ar"] h4,
html[dir="rtl"] h3,
html[dir="rtl"] h4 {
  font-weight: 600;
}

/* —— Surface utilities —— */
.jia-surface--white { background: var(--jia-white); color: var(--jia-ink); }
.jia-surface--soft-blue { background: var(--jia-soft-blue); color: var(--jia-ink); }
.jia-surface--soft-gray { background: var(--jia-soft-gray); color: var(--jia-ink); }
.jia-surface--light-blue { background: var(--jia-light-blue); color: var(--jia-ink); }
.jia-surface--navy {
  background: var(--jia-navy);
  color: #fff;
}
.jia-surface--deep {
  background: var(--jia-deep-navy);
  color: #fff;
}
.jia-surface--dark-gradient {
  background: var(--jia-dark-gradient);
  color: #fff;
}

.jia-section--navy {
  background: var(--jia-surface-navy, var(--jia-navy));
  color: #E8EEF3;
}
.jia-section--deep {
  background: var(--jia-surface-deep-navy, var(--jia-deep-navy));
  color: #E8EEF3;
}
.jia-section--soft-blue { background: var(--jia-soft-blue); }
.jia-section--soft-gray { background: var(--jia-surface-soft, var(--jia-soft-gray)); }
.jia-section--paper { background: var(--jia-surface-soft, var(--jia-soft-gray)); }
.jia-section--blue-tint { background: var(--jia-surface-blue-tint, #EEF4F8); }
.jia-section--white { background: var(--jia-surface-white, var(--jia-white)); }

/* Optional arc motif — logo-inspired, restrained (micro gold only) */
.jia-arc-motif {
  position: absolute;
  inset-inline-end: -8%;
  top: 12%;
  width: min(42vw, 480px);
  height: min(42vw, 480px);
  border: 1px solid color-mix(in srgb, var(--jia-gold) 14%, transparent);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-18deg);
  pointer-events: none;
  opacity: 0.28;
}
.jia-arc-motif::after {
  content: "";
  position: absolute;
  inset: 18%;
  border: 1px solid color-mix(in srgb, var(--jia-bright-blue) 18%, transparent);
  border-radius: 50% 50% 42% 8%;
}

/* —— Buttons —— */
.jia-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--jia-royal-blue);
  color: #fff;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--jia-radius);
  min-height: var(--jia-btn-h, 46px);
  padding: 12px 20px;
  font-weight: 600;
  font-size: var(--jia-text-btn);
  letter-spacing: 0.01em;
  text-transform: none;
  cursor: pointer;
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}
.jia-btn:hover {
  background: var(--jia-deep-blue);
  color: #fff;
}
.jia-btn--navy {
  background: var(--jia-navy);
}
.jia-btn--navy:hover {
  background: var(--jia-deep-navy);
}
.jia-btn--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}
.jia-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
}
.jia-btn--line {
  background: transparent;
  color: var(--jia-navy);
  border-color: var(--jia-navy);
}
.jia-btn--line:hover {
  background: var(--jia-navy);
  color: #fff;
}
.jia-btn--soft {
  background: var(--jia-soft-blue);
  color: var(--jia-navy);
  border-color: var(--jia-border);
}
.jia-btn--soft:hover {
  background: var(--jia-light-blue);
  color: var(--jia-deep-navy);
}
/* Emerald ONLY for value / procurement accents — not default CTA */
.jia-btn--value {
  background: var(--jia-emerald);
  color: #fff;
}
.jia-btn--value:hover {
  background: #007A64;
  color: #fff;
}
.jia-btn--sm {
  padding: 9px 14px;
  font-size: 13px;
}

.jia-text-link {
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border-bottom: 1px solid var(--jia-gold);
  color: var(--jia-royal-blue);
}
.jia-text-link:hover {
  color: var(--jia-deep-blue);
}

/* —— Tags / pills (only for labels) —— */
.jia-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--jia-radius-pill);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  background: var(--jia-soft-blue);
  color: var(--jia-navy);
  border: 1px solid var(--jia-border);
}
.jia-tag--gold {
  background: transparent;
  color: var(--jia-gold);
  border-color: color-mix(in srgb, var(--jia-gold) 40%, transparent);
}
.jia-tag--growth {
  background: color-mix(in srgb, var(--jia-emerald) 12%, white);
  color: var(--jia-emerald);
  border-color: color-mix(in srgb, var(--jia-emerald) 28%, transparent);
}

/* —— Logo swap —— */
.jia-logo__img--on-dark { display: none; }
.jia-hero-page .jia-header:not(.is-stuck) .jia-logo__img--on-light { display: none; }
.jia-hero-page .jia-header:not(.is-stuck) .jia-logo__img--on-dark { display: block; }
.jia-logo__mark {
  width: auto;
  height: 64px;
  max-width: 180px;
  object-fit: contain;
}
.jia-logo span strong { color: var(--jia-deep-navy); }
.jia-hero-page .jia-header:not(.is-stuck) .jia-logo span strong,
.jia-hero-page .jia-header:not(.is-stuck) .jia-logo span small {
  color: #fff;
}
.jia-hero-page .jia-header:not(.is-stuck) .jia-logo span small {
  color: var(--jia-on-navy-kicker);
}

/* Header stuck surface */
.jia-header.is-stuck {
  background: var(--jia-white);
  border-bottom: 1px solid var(--jia-border);
}

/* Hero foundation uses deep navy / gradient — pages adopt in later phases */
.jia-hero {
  background: var(--jia-dark-gradient);
}
.jia-hero .jia-btn:not(.jia-btn--ghost) {
  background: var(--jia-royal-blue);
}
.jia-hero .jia-btn:not(.jia-btn--ghost):hover {
  background: var(--jia-bright-blue);
  border-color: transparent;
}

/* CTA / footer dark surfaces */
.jia-cta-band,
.jia-footer {
  background: var(--jia-deep-navy);
}

/* Trust / index paper → soft gray */
.jia-trust,
.jia-index {
  background: var(--jia-soft-gray);
}

/* Focus */
:focus-visible {
  outline: 2px solid var(--jia-royal-blue);
  outline-offset: 3px;
}

/* Cards — restrained */
.jia-card {
  background: var(--jia-white);
  border: 1px solid var(--jia-border);
  border-radius: var(--jia-radius);
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .jia-btn { transition: none; }
}

/* ==========================================================================
   Visual Refinement — reusable media / composition hooks
   Future photography plugs into these without template rewrites.
   ========================================================================== */

.jia-media {
  margin: 0;
  overflow: hidden;
  background: var(--jia-soft-gray);
  border-radius: 0;
}
.jia-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.jia-media--hero {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.jia-media--split {
  min-height: 280px;
  aspect-ratio: 16 / 10;
}
.jia-media--thumb {
  width: 120px;
  min-width: 120px;
  aspect-ratio: 4 / 3;
  align-self: start;
}
.jia-media--rail {
  aspect-ratio: 21 / 9;
  max-height: 220px;
}
.jia-media--portrait {
  aspect-ratio: 3 / 4;
  max-width: 280px;
}
.jia-media--cta-bg {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  z-index: 0;
}
.jia-media--slot {
  min-height: 160px;
  border: 1px dashed var(--jia-border);
  background:
    linear-gradient(135deg, var(--jia-soft-gray) 0%, var(--jia-soft-blue) 100%);
}
.jia-media--slot::after {
  content: attr(data-jia-image-slot);
  display: none; /* visible only when debugging; slots documented in report */
}
.jia-split-editorial {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.jia-split-editorial--reverse {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
}
.jia-split-editorial--reverse .jia-media--split {
  order: -1;
}
[dir="rtl"] .jia-split-editorial--reverse .jia-media--split {
  order: 0;
}
.jia-cta-band {
  position: relative;
  overflow: hidden;
}
.jia-cta-band__inner {
  position: relative;
  z-index: 1;
}
.jia-cta-band--navy {
  background: var(--jia-dark-gradient);
}
.jia-cta-band--navy h2 {
  color: #fff;
}
.jia-cta-band--navy p {
  color: var(--jia-on-navy-soft);
}
@media (max-width: 900px) {
  .jia-split-editorial,
  .jia-split-editorial--reverse {
    grid-template-columns: 1fr;
  }
  .jia-split-editorial--reverse .jia-media--split {
    order: -1;
  }
  .jia-media--thumb {
    width: 100%;
    max-width: 280px;
    min-width: 0;
  }
}
@media (max-width: 640px) {
  .jia-media--split {
    min-height: 200px;
    aspect-ratio: 16 / 11;
  }
}