/*
 * RoboMecs P4B.3G — Site-wide Typography Standardization
 * Version V6.4.24
 * Purpose: one semantic H1/H2/H3/eyebrow system across EN + AR while preserving
 * intentional exceptions (dark/image heroes, editorial blog body, privacy/legal,
 * compact contact/form states, and the frozen CTA/footer geometry).
 */
:root {
  --rm-type-heading: #000061;
  --rm-type-red: #c10a0a;
  --rm-type-copy: #667085;
  --rm-type-copy-strong: #344054;
  --rm-type-h1-size: clamp(3.1rem, 4.7vw, 5rem);
  --rm-type-h1-line: 1.01;
  --rm-type-h1-weight: 800;
  --rm-type-h2-size: clamp(2.55rem, 3.35vw, 3.5rem);
  --rm-type-h2-line: 1.04;
  --rm-type-h2-weight: 800;
  --rm-type-h3-size: clamp(1.05rem, 1.12vw, 1.2rem);
  --rm-type-h3-line: 1.28;
  --rm-type-h3-weight: 750;
  --rm-type-eyebrow-size: .72rem;
  --rm-type-eyebrow-line: 1.3;
  --rm-type-eyebrow-weight: 850;
  --rm-type-eyebrow-tracking: .15em;
}

/* ============================================================
   A. Shared eyebrow language
   ============================================================ */
main .eyebrow,
.rm-engineering-action-head .eyebrow {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 18px !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  color: var(--rm-type-red) !important;
  font-size: var(--rm-type-eyebrow-size) !important;
  font-weight: var(--rm-type-eyebrow-weight) !important;
  line-height: var(--rm-type-eyebrow-line) !important;
  letter-spacing: var(--rm-type-eyebrow-tracking) !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}
main .eyebrow::before,
.rm-engineering-action-head .eyebrow::before {
  content: "";
  display: block !important;
  flex: 0 0 auto !important;
  width: 28px !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: var(--rm-type-red) !important;
}

/* Contrast exception: eyebrows placed directly over dark/image heroes remain light,
   while retaining the same size, weight, spacing and red accent line. */
main :is(.home-hero, .solution-hero, .service-hero, .rm-industry-hero, .blog-article-hero) .eyebrow {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ============================================================
   B. H1 — page / hero level
   Generic light-surface page H1s share one system. Purpose-built 3-line heroes keep
   their existing hero-standard responsive geometry to avoid clipping/regression.
   ============================================================ */
main h1:not(.rm-hero-title-3lines):not(.rm-industry-hero__title) {
  margin-top: 0 !important;
  color: var(--rm-type-heading) !important;
  font-size: var(--rm-type-h1-size) !important;
  font-weight: var(--rm-type-h1-weight) !important;
  line-height: var(--rm-type-h1-line) !important;
  letter-spacing: -.05em !important;
  text-wrap: balance;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: var(--rm-type-heading) !important;
  opacity: 1 !important;
}

/* Hero H1 exceptions: geometry/color is intentionally owned by hero-standard.css. */
main :is(.rm-hero-title-3lines, .rm-industry-hero__title, .blog-article-hero h1) {
  font-weight: var(--rm-type-h1-weight) !important;
}
main .blog-article-hero h1 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ============================================================
   C. H2 — primary section level
   ============================================================ */
main h2 {
  color: var(--rm-type-heading) !important;
  font-size: var(--rm-type-h2-size) !important;
  font-weight: var(--rm-type-h2-weight) !important;
  line-height: var(--rm-type-h2-line) !important;
  letter-spacing: -.045em !important;
  text-wrap: balance;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: var(--rm-type-heading) !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Engineering in Action: explicit neutralization of legacy gradient/fill effects. */
.rm-engineering-action-head h2 {
  max-width: 900px !important;
  margin: 10px 0 12px !important;
  color: var(--rm-type-heading) !important;
  font-size: var(--rm-type-h2-size) !important;
  font-weight: var(--rm-type-h2-weight) !important;
  line-height: var(--rm-type-h2-line) !important;
  letter-spacing: -.045em !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: var(--rm-type-heading) !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}
.rm-engineering-action-head p {
  color: var(--rm-type-copy) !important;
  font-size: .96rem !important;
  line-height: 1.65 !important;
  opacity: 1 !important;
}

/* ============================================================
   D. H3 — component / card level
   ============================================================ */
main h3 {
  color: var(--rm-type-heading) !important;
  font-size: var(--rm-type-h3-size) !important;
  font-weight: var(--rm-type-h3-weight) !important;
  line-height: var(--rm-type-h3-line) !important;
  letter-spacing: -.018em !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: var(--rm-type-heading) !important;
  opacity: 1 !important;
}

/* Dark media/panel H3 exception: maintain readable contrast without changing scale. */
main :is(.service-scope-panel, .industry-integrated-visual, .solution-scope-media figcaption, .industry-feature-media figcaption, .blog-card-media-overlay) h3 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ============================================================
   E. Intentional editorial / utility exceptions
   These are not marketing-section headings and keep compact reading/form hierarchy.
   ============================================================ */
.blog-article-content h2 {
  color: var(--rm-type-heading) !important;
  font-size: clamp(1.75rem, 2.2vw, 2.25rem) !important;
  font-weight: 800 !important;
  line-height: 1.16 !important;
  letter-spacing: -.025em !important;
  -webkit-text-fill-color: var(--rm-type-heading) !important;
}
.blog-article-content h3 {
  color: var(--rm-type-heading) !important;
  font-size: clamp(1.3rem, 1.55vw, 1.55rem) !important;
  font-weight: 750 !important;
  line-height: 1.25 !important;
  letter-spacing: -.018em !important;
  -webkit-text-fill-color: var(--rm-type-heading) !important;
}
.blog-author-card h2,
.contact-form h2,
.contact-success h2 {
  color: var(--rm-type-heading) !important;
  font-size: clamp(1.55rem, 1.8vw, 1.9rem) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -.025em !important;
  -webkit-text-fill-color: var(--rm-type-heading) !important;
}
.privacy-content h2 {
  color: var(--rm-type-heading) !important;
  font-size: clamp(1.45rem, 1.65vw, 1.75rem) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -.02em !important;
  -webkit-text-fill-color: var(--rm-type-heading) !important;
}

/* ============================================================
   F. Frozen contextual CTA exception
   The V6.4.23 CTA geometry/proportion is approved and must not be resized here.
   We standardize only heading/eyebrow colors; its existing font envelope remains frozen.
   ============================================================ */
.rm-contextual-cta-home .eyebrow,
.solutions-hub-cta .eyebrow,
.industry-hub-cta .eyebrow,
.service-final .eyebrow,
.blog-cta .eyebrow,
.rm-company-section.is-white:last-of-type .eyebrow,
.solution-related-layout > :first-child .eyebrow,
.industry-final-layout > :first-child .eyebrow {
  color: var(--rm-type-red) !important;
  -webkit-text-fill-color: var(--rm-type-red) !important;
}
.rm-contextual-cta-home h2,
.solutions-hub-cta h2,
.industry-hub-cta h2,
.service-final h2,
.blog-cta h2,
.rm-company-section.is-white:last-of-type h2,
.solution-related-layout > :first-child h2,
.industry-final-layout > :first-child h2 {
  color: var(--rm-type-heading) !important;
  font-size: clamp(2.25rem, 2.95vw, 3.2rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -.04em !important;
  -webkit-text-fill-color: var(--rm-type-heading) !important;
}

/* ============================================================
   G. Arabic typography exceptions
   Same hierarchy/colors, but Arabic should not inherit Latin tracking/negative spacing.
   ============================================================ */
html[dir="rtl"] main h1,
html[dir="rtl"] main h2,
html[dir="rtl"] main h3,
html[dir="rtl"] .rm-engineering-action-head h2 {
  letter-spacing: 0 !important;
}
html[dir="rtl"] main .eyebrow,
html[dir="rtl"] .rm-engineering-action-head .eyebrow {
  letter-spacing: 0 !important;
  text-transform: none !important;
}
html[dir="rtl"] main .eyebrow::before,
html[dir="rtl"] .rm-engineering-action-head .eyebrow::before {
  flex: 0 0 auto !important;
}

/* ============================================================
   H. Responsive hierarchy
   ============================================================ */
@media (max-width: 900px) {
  :root {
    --rm-type-h2-size: clamp(2.2rem, 5.7vw, 3rem);
    --rm-type-h3-size: clamp(1.02rem, 2.2vw, 1.15rem);
  }
}
@media (max-width: 640px) {
  :root {
    --rm-type-h1-size: clamp(2.45rem, 11vw, 3.4rem);
    --rm-type-h2-size: clamp(2rem, 9vw, 2.65rem);
    --rm-type-h3-size: 1.05rem;
    --rm-type-eyebrow-size: .69rem;
  }
  main .eyebrow,
  .rm-engineering-action-head .eyebrow {
    margin-bottom: 10px !important;
  }
}

/* P4B.3L RevA V6.4.34 — Blog Hero H1 white contrast exception
   Root-cause correction: the generic site-wide H1 selector has greater specificity
   than the Blog Hero H1 rule. Keep all Blog Hero geometry/typography sizes unchanged;
   only restore white contrast on image Heroes. */
main .blog-index-hero h1:not(.rm-hero-title-3lines):not(.rm-industry-hero__title),
main .blog-article-hero h1:not(.rm-hero-title-3lines):not(.rm-industry-hero__title) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  background-image: none !important;
  opacity: 1 !important;
}