/* ============================================================
   IDM — Landing Redesign 2026-09-07 (LIGHT THEME + new components)
   Extends idm.css design tokens. Light theme is now the default
   public expression; dark tokens remain available via
   [data-theme="dark"] for future use.
   Mobile-first. AR/EN independent ecosystems (RTL-aware).
   ============================================================ */

/* ---------- Light theme refinements (premium corporate) ---------- */
[data-theme="light"] {
  --bg-page: var(--idm-gray-50);
  --bg-surface: var(--idm-white);
  --bg-card: var(--idm-white);
  --bg-inset: var(--idm-gray-50);
  --text-primary: var(--idm-blue-900);
  --text-secondary: var(--idm-gray-600);
  --border-subtle: rgba(11,30,55,.10);
  --border-strong: rgba(11,30,55,.14);
  --accent: var(--idm-blue-600);
  --shadow-card: 0 1px 2px rgba(11,30,55,.06), 0 1px 3px rgba(11,30,55,.08);
  --shadow-card-hover: 0 8px 24px rgba(11,30,55,.12), 0 2px 6px rgba(11,30,55,.08);
}
[data-theme="dark"] {
  --bg-inset: var(--idm-gray-900);
  --border-strong: rgba(255,255,255,.14);
  --shadow-card: var(--shadow-md);
  --shadow-card-hover: var(--shadow-lg);
}

/* Cards: white with border + hover shadow (light mode look) */
.idm-card {
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
}
.idm-card--link:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-card-hover);
}

/* --- Type badge (Service / Product) --- */
.idm-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--idm-blue-700);
  background: color-mix(in srgb, var(--idm-blue-500) 10%, var(--idm-white));
  border: 1px solid color-mix(in srgb, var(--idm-blue-500) 25%, var(--idm-white));
  padding: .25rem .625rem; border-radius: var(--r-full);
  align-self: flex-start;
}
[dir="rtl"] .idm-badge { letter-spacing: 0; }

/* --- Light hero: white/gray bg, gradient accent underline --- */
.idm-hero--light {
  background: linear-gradient(180deg, var(--idm-white) 0%, var(--idm-gray-50) 100%);
  border-bottom: 1px solid var(--border-subtle);
  position: relative; overflow: hidden;
}
.idm-hero--light::before {
  content: ""; position: absolute; inset: 0; opacity: .06;
  background: var(--idm-grad-hero);
  clip-path: polygon(0 0, 100% 0, 100% 72%, 0 100%);
}
.idm-gradtext {
  background: var(--idm-grad-hero);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* --- Page head hero band with blue accent edge --- */
.idm-pagehead--band {
  position: relative; overflow: hidden;
  border-bottom: none;
  background: var(--bg-surface);
}
.idm-pagehead--band::after {
  content: ""; position: absolute; inset-block-start: 0; inset-block-end: 0;
  inline-size: 5px; background: var(--idm-grad-hero);
}
[dir="ltr"] .idm-pagehead--band::after { inset-inline-end: 0; }
[dir="rtl"] .idm-pagehead--band::after { inset-inline-start: 0; }

/* --- Detail two-column layout: content + sticky CTA (desktop) --- */
.idm-detail { display: grid; gap: var(--sp-3); }
@media (min-width: 960px) {
  .idm-detail { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
  .idm-detail__aside { position: sticky; top: calc(var(--header-h) + 1rem); }
}

/* --- Sectioned content cards (service/product pages) --- */
.idm-block {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  box-shadow: var(--shadow-card);
}
.idm-block + .idm-block { margin-top: var(--sp-2); }
.idm-block--alt { background: var(--bg-inset); }
.idm-block__heading {
  display: flex; align-items: center; gap: .6rem;
  font-size: var(--text-xl); font-weight: 600;
  color: var(--text-primary); margin: 0 0 var(--sp-1);
}
.idm-block__icon {
  width: 34px; height: 34px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--idm-blue-600);
  background: color-mix(in srgb, var(--idm-blue-500) 10%, var(--idm-white));
  border-radius: var(--r-sm);
}
.idm-block__icon svg { width: 18px; height: 18px; }
.idm-block__body { color: var(--text-secondary); font-size: var(--text-base); margin: 0; }

/* --- Sticky CTA card --- */
.idm-aside {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--sp-3);
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: var(--sp-1);
}
.idm-aside__title { font-size: var(--text-lg); font-weight: 700; margin: 0; color: var(--text-primary); }
.idm-aside__text { color: var(--text-secondary); font-size: var(--text-sm); margin: 0; }
.idm-aside .idm-btn { justify-content: center; }

/* --- Inquiry form --- */
.idm-form {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--sp-3);
  box-shadow: var(--shadow-card);
  display: grid; gap: var(--sp-1);
}
.idm-form__title { font-size: var(--text-xl); font-weight: 700; margin: 0; color: var(--text-primary); }
.idm-form__hint { color: var(--text-secondary); font-size: var(--text-sm); margin: 0; }
.idm-form__row { display: grid; gap: var(--sp-1); }
@media (min-width: 640px) { .idm-form__row--pair { grid-template-columns: 1fr 1fr; } }
.idm-field { display: flex; flex-direction: column; gap: .375rem; }
.idm-field label { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.idm-field input, .idm-field textarea {
  font: inherit; color: var(--text-primary);
  background: var(--idm-white);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: .75rem .875rem; width: 100%;
}
.idm-field input:focus, .idm-field textarea:focus {
  outline: 2px solid var(--idm-blue-500); outline-offset: 1px;
  border-color: var(--idm-blue-500);
}
.idm-field--error input, .idm-field--error textarea { border-color: var(--idm-danger); }
.idm-field__error { color: var(--idm-danger); font-size: var(--text-xs); margin: 0; }
.idm-form__flash {
  background: color-mix(in srgb, var(--idm-success) 10%, var(--idm-white));
  border: 1px solid color-mix(in srgb, var(--idm-success) 35%, var(--idm-white));
  color: color-mix(in srgb, var(--idm-success) 80%, var(--idm-blue-900));
  border-radius: var(--r-sm); padding: .75rem 1rem; font-size: var(--text-sm);
}

/* --- Article meta (articles section) --- */
.idm-article-meta { display: flex; flex-wrap: wrap; gap: .75rem; color: var(--text-secondary); font-size: var(--text-xs); margin: 0; }
.idm-article-meta time { font-weight: 600; color: var(--accent); }

/* --- Article "parent entity" callout --- */
.idm-entity-callout {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-1);
  background: color-mix(in srgb, var(--idm-blue-500) 7%, var(--idm-white));
  border: 1px solid color-mix(in srgb, var(--idm-blue-500) 25%, var(--idm-white));
  border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3);
}
.idm-entity-callout__text { font-weight: 600; color: var(--text-primary); margin: 0; }
/* --- Mobile header fix (Landing Redesign QA): prevent brand/nav
       overlap at 375px — tighter gaps, smaller mark, allow wrap. --- */
@media (max-width: 480px) {
  .idm-header__inner { gap: .5rem; }
  .idm-brand__mark { width: 32px; height: 32px; }
  .idm-brand__name { font-size: var(--text-lg); }
  .idm-nav { flex-wrap: nowrap; gap: .15rem; }
  .idm-nav a { padding: .5rem .4rem; font-size: 11px; }
  .idm-nav__lang { white-space: nowrap; }
}

/* Skip-link must not create RTL horizontal scroll (left:-9999px in RTL
   pushes the document wide). Use logical off-canvas offset instead. */
.skip-link { left: auto; inset-inline-start: -9999px; }
[dir="rtl"] .skip-link { inset-inline-start: -9999px; left: auto; right: auto; }
.skip-link:focus { inset-inline-start: 0; left: auto; }

/* Hub→funnel article link list (Chunk 88 gap closure, 2026-09-07).
   Simple accessible list: roomy tap targets, locale-aware text flow. */
.idm-linklist { list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-2, 12px); }
.idm-linklist__item { border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 12px 16px; background: #fff; transition: border-color .15s; }
.idm-linklist__item:hover, .idm-linklist__item:focus-within { border-color: #2563eb; }
.idm-linklist__item a { color: #1d4ed8; text-decoration: none; font-weight: 600; display: block; }
[dir="rtl"] .idm-linklist__item a { font-family: 'IBM Plex Sans Arabic', sans-serif; }

/* --- Entity card wrapper: card + store button stay visually one unit --- */
.idm-entitycard { display: flex; flex-direction: column; }
.idm-entitycard .idm-card { flex: 1; }
.idm-entitycard__store {
    margin-top: .75rem; align-self: flex-start;
    padding: .5rem 1.25rem; font-size: var(--text-sm);
}

/* --- Home section separation (Issue B, 2026-09-07):
   services vs products distinct bands + "view all" link. RTL-safe
   (logical properties only, no directional offsets). --- */
.idm-section--alt { background: #f8fafc; }
[dir="rtl"] .idm-section--alt .idm-eyebrow { letter-spacing: 0; }
.idm-section__more { margin: var(--sp-4, 24px) 0 0; }
.idm-section__more .idm-btn { padding-inline-start: 1.25rem; padding-inline-end: 1.25rem; }

/* --- About page (Issue C, 2026-09-07): value-chain steps + fact cards.
   Mobile-first column grid; widens on ≥48rem. --- */
.idm-valuechain { list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-3, 16px);
  grid-template-columns: 1fr; counter-reset: chain; }
@media (min-width: 48rem) { .idm-valuechain { grid-template-columns: repeat(4, 1fr); } }
.idm-valuechain__step { border: 1px solid #e2e8f0; border-radius: 12px;
  background: #fff; padding: 16px; position: relative; counter-increment: chain; }
.idm-valuechain__step::before { content: counter(chain);
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 999px;
  background: #2563eb; color: #fff; font-weight: 700; font-size: .85rem;
  margin-block-end: 8px; }
[dir="rtl"] .idm-valuechain__step::before { font-family: 'IBM Plex Sans Arabic', sans-serif; }
.idm-valuechain__title { font-weight: 700; margin: 0 0 4px; font-size: 1rem; }
.idm-valuechain__text { margin: 0; color: #475569; font-size: .9rem; line-height: 1.6; }
.idm-facts { display: grid; gap: var(--sp-3, 16px); grid-template-columns: 1fr;
  margin: 0; padding: 0; }
@media (min-width: 48rem) { .idm-facts { grid-template-columns: 1fr 1fr; } }
.idm-facts__card { border-inline-start: 3px solid #2563eb; background: #f8fafc;
  border-radius: 0 10px 10px 0; padding: 16px 20px; }
[dir="rtl"] .idm-facts__card { border-radius: 10px 0 0 10px; }
.idm-facts__title { font-weight: 700; margin: 0 0 6px; }
.idm-facts__text { margin: 0; color: #334155; line-height: 1.7; }

/* ============================================================
   HOME — who-we-are + value chain (Dr. Nasser, 2026-09-07)
   ============================================================ */
.idm-who__lead {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  max-width: 56ch;
  margin: 0 auto var(--sp-4);
  text-align: center;
}
.idm-who__grid {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .idm-who__grid { grid-template-columns: repeat(3, 1fr); }
}
.idm-who__card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  box-shadow: var(--shadow-sm);
}
.idm-who__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: var(--r-sm);
  background: rgba(74,144,226,.12);
  color: var(--idm-blue-600);
  margin-bottom: var(--sp-1);
}
.idm-who__card h3 {
  font-size: var(--text-lg);
  color: var(--text-primary);
  margin: 0 0 var(--sp-1);
}
.idm-who__card p {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  margin: 0;
}
.idm-who__more {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: var(--sp-2);
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.idm-chain {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: 1fr;
  counter-reset: chain;
}
@media (min-width: 900px) {
  .idm-chain { grid-template-columns: repeat(4, 1fr); }
}
.idm-chain__step {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  box-shadow: var(--shadow-sm);
}
.idm-chain__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--r-full);
  background: var(--idm-grad-hero);
  color: #fff;
  font-weight: 700;
  font-size: var(--text-sm);
  margin-bottom: var(--sp-1);
}
.idm-chain__step h3 {
  font-size: var(--text-lg);
  color: var(--text-primary);
  margin: 0 0 var(--sp-1);
}
.idm-chain__step p {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  margin: 0;
}
[dir="rtl"] .idm-who__more { flex-direction: row-reverse; }