/* ============================================================
   IDM — Advanced Design Code (Design Tokens + System)
   Version 1.0 — 2026-09-05
   Owner: Bunyan (idmwebguru). Source of truth for www.idm.sa.
   Derived from 3 official logos (brand/logos/) + gray extension.
   Mobile-first. AR/EN independent ecosystems.
   ============================================================ */

:root {
  /* ---- 1. CORE BRAND COLORS (from logos) ---- */
  --idm-black:        #000000;  /* logo background */
  --idm-white:        #FFFFFF;  /* logo primary mark / hero text */

  /* Blue ribbon ramp (Logo 3 — hero, most saturated) */
  --idm-blue-900:     #0B1E37;  /* deep midnight — logo 2 typography */
  --idm-blue-700:     #1B4F8A;
  --idm-blue-600:     #2E6DB4;
  --idm-blue-500:     #4A90E2;  /* vibrant steel — PRIMARY brand blue */
  --idm-blue-400:     #5D9CEC;  /* logo 2 mid */
  --idm-blue-300:     #87CEFA;  /* azure light */
  --idm-blue-200:     #91D1FF;  /* pale electric — highlights/glow */

  /* Gray ramp (official extension) */
  --idm-gray-900:     #16181D;  /* near-black surface */
  --idm-gray-800:     #23262E;
  --idm-gray-700:     #323743;
  --idm-gray-600:     #4A505F;  /* muted text on dark */
  --idm-gray-500:     #6B7280;
  --idm-gray-400:     #9CA3AF;  /* secondary text */
  --idm-gray-300:     #C7CBD4;
  --idm-gray-200:     #E2E5EB;
  --idm-gray-100:     #F1F3F6;  /* light surface */
  --idm-gray-50:      #F8F9FB;  /* page background (light mode) */

  /* Semantic */
  --idm-success:      #2FA36B;
  --idm-warning:      #E0A63A;
  --idm-danger:       #D64545;

  /* Gradients (ribbon 3D effect) */
  --idm-grad-hero:    linear-gradient(135deg, #4A90E2 0%, #91D1FF 55%, #4A90E2 100%);
  --idm-grad-corporate: linear-gradient(135deg, #5D9CEC 0%, #87CEFA 100%);
  --idm-grad-dark:    linear-gradient(160deg, #000000 0%, #16181D 60%, #0B1E37 100%);
  --idm-grad-surface: linear-gradient(180deg, #F8F9FB 0%, #E2E5EB 100%);

  /* ---- 2. TYPOGRAPHY ---- */
  /* EN: geometric, wide sans matching wordmark (Inter/Poppins family) */
  /* AR: modern clean Arabic — IBM Plex Sans Arabic / Tajawal fallback */
  --font-en: 'Poppins', 'Inter', system-ui, sans-serif;
  --font-ar: 'IBM Plex Sans Arabic', 'Tajawal', 'Noto Kufi Arabic', sans-serif;

  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 — body */
  --text-lg:   1.125rem;  /* 18 */
  --text-xl:   1.375rem;  /* 22 */
  --text-2xl:  1.75rem;  /* 28 */
  --text-3xl:  2.25rem;  /* 36 */
  --text-4xl:  clamp(2.5rem, 5vw, 3.5rem);   /* hero */
  --text-5xl:  clamp(3rem, 7vw, 4.5rem);     /* display */

  --leading-tight:  1.2;
  --leading-normal: 1.6;
  --tracking-wide:  0.08em;  /* wordmark echo */

  /* ---- 3. SPACING (8px base) ---- */
  --sp-1: 0.5rem;  --sp-2: 1rem;   --sp-3: 1.5rem;
  --sp-4: 2rem;    --sp-5: 3rem;   --sp-6: 4rem;
  --sp-section: clamp(4rem, 10vw, 8rem);  /* section rhythm */

  /* ---- 4. RADII (soft, echoing Reuleaux curves) ---- */
  --r-sm:   0.5rem;
  --r-md:   1rem;
  --r-lg:   1.5rem;
  --r-tri:  2.4rem;   /* signature: one strong curve corner */
  --r-full: 9999px;

  /* ---- 5. ELEVATION & GLOW ---- */
  --shadow-sm:  0 1px 3px rgba(11,30,55,.12);
  --shadow-md:  0 4px 16px rgba(11,30,55,.14);
  --shadow-lg:  0 12px 40px rgba(11,30,55,.18);
  --glow-blue:  0 0 24px rgba(74,144,226,.35);   /* electric accent */

  /* ---- 6. MOTION ---- */
  --ease-brand: cubic-bezier(.22,.61,.36,1);
  --dur-fast:   180ms;
  --dur-base:   320ms;
  --dur-slow:   640ms;

  /* ---- 7. LAYOUT ---- */
  --container:    1200px;
  --container-narrow: 760px;
  --header-h:     72px;
}

/* ---------- Theme modes ---------- */
[data-theme="dark"] {
  --bg-page:    var(--idm-black);
  --bg-surface: var(--idm-gray-900);
  --bg-card:    var(--idm-gray-800);
  --text-primary:   var(--idm-white);
  --text-secondary: var(--idm-gray-400);
  --border-subtle:  rgba(255,255,255,.08);
  --accent:     var(--idm-blue-500);
}
[data-theme="light"] {
  --bg-page:    var(--idm-gray-50);
  --bg-surface: var(--idm-white);
  --bg-card:    var(--idm-white);
  --text-primary:   var(--idm-blue-900);
  --text-secondary: var(--idm-gray-600);
  --border-subtle:  rgba(11,30,55,.10);
  --accent:     var(--idm-blue-600);
}
/* Default: dark — brand's native habitat (all 3 logos live on black) */

/* ============================================================
   COMPONENTS — signature IDM elements
   ============================================================ */

/* --- Ribbon accent: curved underline echoing the logo frame --- */
.idm-underline {
  position: relative;
  display: inline-block;
}
.idm-underline::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 4px;
  border-radius: 4px;
  background: var(--idm-grad-hero);
  box-shadow: var(--glow-blue);
}

/* --- Triangle badge: Reuleaux triangle motif for bullets/icons --- */
.idm-tri {
  width: 12px; height: 12px;
  flex: none;
  background: var(--idm-grad-hero);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  border-radius: 3px;
  margin-top: .35em;
}

/* --- Primary button: gradient with electric hover --- */
.idm-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .875rem 1.75rem;
  border-radius: var(--r-tri);   /* one signature curved corner */
  font-weight: 600; font-size: var(--text-base);
  letter-spacing: var(--tracking-wide);
  background: var(--idm-grad-hero);
  color: var(--idm-white);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-fast) var(--ease-brand),
              box-shadow var(--dur-base) var(--ease-brand);
}
.idm-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), var(--glow-blue);
}
.idm-btn--ghost {
  background: transparent;
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1px var(--border-subtle);
}

/* --- Card: dark surface with top ribbon edge --- */
.idm-card {
  position: relative;
  background: var(--bg-card);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.idm-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--idm-grad-hero);
  opacity: 0; 
  transition: opacity var(--dur-base) var(--ease-brand);
}
.idm-card:hover::before { opacity: 1; }

/* --- Section eyebrow label --- */
.idm-eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-1);
}

/* --- RTL (Arabic) adjustments: independent system, not a mirror --- */
[dir="rtl"] {
  font-family: var(--font-ar);
  letter-spacing: 0;             /* Arabic never gets wide tracking */
}
[dir="rtl"] .idm-underline::after { border-radius: 0 4px 4px 4px; }

/* ============================================================
   USAGE RULES (binding for all idm.sa work)
   1. Dark mode is the default brand expression; light mode for
      content-heavy reading pages.
   2. --idm-blue-500 is the ONLY blue for buttons/links. Never
      invent new blues.
   3. Gray extends the system; it never replaces blue as accent.
   4. Reuleaux triangle + ribbon gradients = the only decorative
      motifs allowed. No random shapes.
   5. Logo variants: monochrome (small/print/avatar), corporate
      (large displays), hero (marketing/hero sections).
   6. Every page: one hero gradient max. Glow on hover only.
   ============================================================ */
/* ============================================================
   LAYOUT — public site (added by Bunyan, extends v1.0 tokens)
   ============================================================ */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-en);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  background: var(--bg-page);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { display: block; max-width: 100%; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--idm-blue-500); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus { left: 0; }

.idm-container { max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-2); }
.idm-container--narrow { max-width: var(--container-narrow); }

/* --- Header --- */
.idm-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: color-mix(in srgb, var(--bg-page) 82%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}
.idm-header__inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: var(--sp-2); }
.idm-brand { display: inline-flex; align-items: center; gap: .625rem; text-decoration: none !important; }
.idm-brand__mark { width: 40px; height: 40px; border-radius: var(--r-sm); }
.idm-brand__name {
  font-weight: 700; font-size: var(--text-xl); letter-spacing: var(--tracking-wide);
  color: var(--text-primary);
}
.idm-nav { display: flex; align-items: center; gap: var(--sp-2); }
.idm-nav a {
  color: var(--text-secondary); font-weight: 600; font-size: var(--text-sm);
  padding: .5rem .75rem; border-radius: var(--r-sm); text-decoration: none;
  transition: color var(--dur-fast) var(--ease-brand), background var(--dur-fast) var(--ease-brand);
}
.idm-nav a:hover { color: var(--text-primary); background: var(--bg-card); text-decoration: none; }
.idm-nav__lang { color: var(--accent) !important; }

/* --- Hero (the ONE page gradient) --- */
.idm-hero { position: relative; overflow: hidden; }
.idm-hero::before {
  content: ""; position: absolute; inset: 0;
  background: var(--idm-grad-hero); opacity: .12;
  clip-path: polygon(0 0, 100% 0, 100% 72%, 0 100%);
}
.idm-hero__inner { position: relative; padding-block: var(--sp-section); max-width: 760px; }
.idm-hero__title {
  font-size: var(--text-4xl); font-weight: 700; line-height: var(--leading-tight);
  margin: var(--sp-1) 0; letter-spacing: -0.01em;
}
.idm-hero__title .idm-underline { text-wrap: balance; }
.idm-hero__sub { color: var(--text-secondary); font-size: var(--text-lg); margin: 0 0 var(--sp-3); }
.idm-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-1); }

/* --- Page head (section/detail pages, no gradient — budget rule) --- */
.idm-pagehead { border-bottom: 1px solid var(--border-subtle); background: var(--bg-surface); }
.idm-pagehead .idm-container { padding-block: var(--sp-4); }
.idm-pagehead__title { font-size: var(--text-3xl); font-weight: 700; margin: var(--sp-1) 0; }
.idm-pagehead__sub { color: var(--text-secondary); font-size: var(--text-lg); margin: 0; max-width: 620px; }

/* --- Sections + grid --- */
.idm-section { padding-block: var(--sp-section); }
.idm-section__title { font-size: var(--text-2xl); font-weight: 700; margin: 0 0 var(--sp-3); }
.idm-grid {
  display: grid; gap: var(--sp-2);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.idm-card--link { display: flex; flex-direction: column; gap: .5rem; text-decoration: none !important; color: var(--text-primary); transition: transform var(--dur-base) var(--ease-brand); }
.idm-card--link:hover { transform: translateY(-3px); }
.idm-card__title { font-size: var(--text-lg); font-weight: 600; margin: 0; }
.idm-card__text { color: var(--text-secondary); font-size: var(--text-sm); margin: 0; flex: 1; }
.idm-card__more { color: var(--accent); font-size: var(--text-sm); font-weight: 600; display: inline-flex; align-items: center; gap: .4rem; }

/* --- Article (detail) --- */
.idm-article__heading { display: flex; gap: .6rem; font-size: var(--text-xl); font-weight: 600; margin-top: var(--sp-3); }
.idm-article__body { color: var(--text-secondary); font-size: var(--text-lg); }
/* Internal-link block (plan §17): funnel page → entity hub. */
.idm-article__link { font-size: var(--text-lg); margin: var(--sp-3) 0 0; }
.idm-article__link a { font-weight: 600; border-bottom: 1px solid var(--accent); }
.idm-cta { margin-top: var(--sp-4); }

/* --- Breadcrumbs --- */
.idm-breadcrumbs { font-size: var(--text-sm); color: var(--text-secondary); display: flex; gap: .5rem; }
.idm-breadcrumbs__sep { opacity: .5; }

/* --- Footer --- */
.idm-footer { border-top: 1px solid var(--border-subtle); background: var(--bg-surface); }
.idm-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); padding-block: var(--sp-3); }
.idm-footer__tag { color: var(--text-secondary); font-size: var(--text-sm); margin: .5rem 0 0; }
.idm-footer__nav { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); color: var(--text-secondary); }
.idm-footer__nav a { color: var(--text-secondary); }
.idm-footer__nav a:hover { color: var(--text-primary); }

/* --- RTL: independent AR system --- */
[dir="rtl"] body { font-family: var(--font-ar); }
[dir="rtl"] .idm-hero__title, [dir="rtl"] .idm-pagehead__title, [dir="rtl"] .idm-section__title { letter-spacing: 0; }
[dir="rtl"] .idm-eyebrow { letter-spacing: 0; }

/* --- Mobile-first tightening --- */
@media (max-width: 640px) {
  .idm-nav { gap: .25rem; }
  .idm-nav a { padding: .5rem .5rem; font-size: var(--text-xs); }
  .idm-hero__title { font-size: clamp(2rem, 8vw, 2.5rem); }
  .idm-footer__inner { flex-direction: column; align-items: flex-start; }
}

/* --- Mobile header overflow fix (audit C95): 2px overflow at 390px in AR RTL
   from header flex (brand 54 + nav 314 + gaps). Tighten gaps and let the
   brand name shrink instead of pushing the nav off-canvas. --- */
@media (max-width: 640px) {
  .idm-header__inner { gap: .375rem; }
  .idm-brand { gap: .375rem; min-width: 0; }
  .idm-brand__name { white-space: nowrap; }
  .idm-nav { gap: .125rem; min-width: 0; }
}

/* --- Mobile header overflow fix (audit C95, step 2): at 390px the header
   cannot fit brand-name + 5 nav links. The logo mark alone carries the
   brand on small screens (it contains the IDM mark); drop the text name
   to reclaim ~38px instead of shrinking links below touch-target size. --- */
@media (max-width: 640px) {
  .idm-brand__name { display: none; }
}