/* =========================================================
   MIDZ Arabic — compact typography for detail pages ONLY
   Scope:
     - /ar/service/...   => body.service-single-page
     - /ar/projects.php  => body.projects-page
     - /ar/project/...   => body.midz-project-page
   Loaded AFTER ar-user-final.css so global Arabic h1/h2/h3 rules
   cannot re-enlarge these pages.
   Main /ar/services.php archive is intentionally NOT targeted.
   ========================================================= */

/* ---------- Shared compact body copy ---------- */
html[lang="ar"][dir="rtl"] body.service-single-page :where(p, .section-desc),
html[lang="ar"][dir="rtl"] body.projects-page :where(.midz-page-hero-lead, .section-desc),
html[lang="ar"][dir="rtl"] body.midz-project-page :where(
  .midz-project-hero-subtitle,
  .midz-project-about-text,
  .midz-project-research-card p,
  .midz-project-cta-copy,
  .midz-project-cta-copy p
) {
  font-size: clamp(13px, .78vw, 14px) !important;
  line-height: 1.8 !important;
  font-weight: 400 !important;
}

/* =========================================================
   SERVICE DETAIL — /ar/service/...
   ========================================================= */
html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-single-copy h1,
html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-single-copy h1 * {
  font-size: clamp(32px, 2.25vw, 40px) !important;
  line-height: 1.28 !important;
  font-weight: 500 !important;
}

html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-single-copy > p {
  font-size: clamp(13px, .78vw, 14px) !important;
  line-height: 1.82 !important;
}

/* Section headings: clients / tools / journey. */
html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-section-head h2,
html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-section-head h2 * {
  font-size: clamp(23px, 1.55vw, 28px) !important;
  line-height: 1.42 !important;
  font-weight: 500 !important;
}

html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-section-head .section-desc {
  font-size: clamp(13px, .76vw, 14px) !important;
  line-height: 1.82 !important;
}

/* Journey titles and copy. */
html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-journey-copy h3,
html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-journey-copy h3 *,
html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-journey-step h3,
html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-journey-step h3 * {
  font-size: clamp(17px, 1.05vw, 20px) !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
}

html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-journey-copy p,
html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-journey-step p {
  font-size: clamp(12.5px, .72vw, 13.5px) !important;
  line-height: 1.82 !important;
}

/* Selected projects heading inside service detail. */
html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-work-sec .section-title2,
html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-work-sec .section-title2 * {
  font-size: clamp(24px, 1.7vw, 30px) !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
}

html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-work-sec .section-desc {
  font-size: 13.5px !important;
  line-height: 1.82 !important;
}

/* Keep contact CTA on service detail calm too. */
html[lang="ar"][dir="rtl"] body.service-single-page .contact-sec h3,
html[lang="ar"][dir="rtl"] body.service-single-page .contact-sec h3 * {
  font-size: clamp(20px, 1.35vw, 24px) !important;
  line-height: 1.45 !important;
}

/* =========================================================
   PROJECTS ARCHIVE — /ar/projects.php
   ========================================================= */
html[lang="ar"][dir="rtl"] body.projects-page .midz-page-hero-copy h1,
html[lang="ar"][dir="rtl"] body.projects-page .midz-page-hero-copy h1 * {
  font-size: clamp(30px, 2.15vw, 38px) !important;
  line-height: 1.32 !important;
  font-weight: 500 !important;
}

html[lang="ar"][dir="rtl"] body.projects-page .feature-sec .section-title2,
html[lang="ar"][dir="rtl"] body.projects-page .feature-sec .section-title2 * {
  font-size: clamp(24px, 1.7vw, 30px) !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
}

html[lang="ar"][dir="rtl"] body.projects-page .feature-sec .section-desc {
  font-size: 13.5px !important;
  line-height: 1.82 !important;
}

html[lang="ar"][dir="rtl"] body.projects-page .faq-sec .section-title,
html[lang="ar"][dir="rtl"] body.projects-page .faq-sec .section-title * {
  font-size: clamp(22px, 1.5vw, 27px) !important;
  line-height: 1.45 !important;
}

html[lang="ar"][dir="rtl"] body.projects-page .faq-question-text {
  font-size: clamp(15px, .9vw, 18px) !important;
  line-height: 1.55 !important;
}

html[lang="ar"][dir="rtl"] body.projects-page .faq-item p,
html[lang="ar"][dir="rtl"] body.projects-page .accordion-body {
  font-size: clamp(12.5px, .74vw, 13.5px) !important;
  line-height: 1.82 !important;
}

html[lang="ar"][dir="rtl"] body.projects-page .contact-sec h3,
html[lang="ar"][dir="rtl"] body.projects-page .contact-sec h3 * {
  font-size: clamp(20px, 1.35vw, 24px) !important;
  line-height: 1.45 !important;
}

/* =========================================================
   PROJECT DETAIL — /ar/project/...
   ========================================================= */
html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-hero-title,
html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-hero-title * {
  font-size: clamp(26px, 1.9vw, 32px) !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
}

html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-hero-subtitle {
  font-size: 13.5px !important;
  line-height: 1.8 !important;
}

/* Research cards: global Arabic h2 used to blow these up dramatically. */
html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-research-card h2,
html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-research-card h2 * {
  font-size: clamp(16px, 1vw, 19px) !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-research-card p {
  font-size: clamp(12.5px, .75vw, 13.5px) !important;
  line-height: 1.8 !important;
}

/* Main project section/display headings. */
html[lang="ar"][dir="rtl"] body.midz-project-page :where(
  .midz-project-gallery-stack-title,
  .midz-project-related-title,
  .midz-project-cta-title
),
html[lang="ar"][dir="rtl"] body.midz-project-page :where(
  .midz-project-gallery-stack-title,
  .midz-project-related-title,
  .midz-project-cta-title
) * {
  font-size: clamp(22px, 1.55vw, 28px) !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
}

html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-about-text,
html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-text-block p,
html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-cta-copy,
html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-cta-copy p {
  font-size: clamp(12.5px, .78vw, 14px) !important;
  line-height: 1.82 !important;
}

html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-nav-title {
  font-size: clamp(15px, .9vw, 18px) !important;
  line-height: 1.5 !important;
}

html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-related-name {
  font-size: 15px !important;
  line-height: 1.55 !important;
}

/* Section labels remain compact and consistent. */
@media (min-width: 992px) {
  html[lang="ar"][dir="rtl"] body.service-single-page .section-subtitle,
  html[lang="ar"][dir="rtl"] body.projects-page .section-subtitle,
  html[lang="ar"][dir="rtl"] body.midz-project-page .section-subtitle {
    font-size: 15px !important;
  }
}

/* =========================================================
   PHONE / TABLET — reduce one more step
   ========================================================= */
@media (max-width: 991px) {
  html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-single-copy h1,
  html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-single-copy h1 * {
    font-size: clamp(27px, 7vw, 31px) !important;
    line-height: 1.38 !important;
  }

  html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-section-head h2,
  html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-section-head h2 * {
    font-size: clamp(20px, 5.4vw, 23px) !important;
    line-height: 1.5 !important;
  }

  html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-work-sec .section-title2,
  html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-work-sec .section-title2 * {
    font-size: clamp(21px, 5.8vw, 24px) !important;
    line-height: 1.48 !important;
  }

  html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-journey-copy h3,
  html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-journey-copy h3 *,
  html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-journey-step h3,
  html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-journey-step h3 * {
    font-size: clamp(16px, 4.4vw, 18px) !important;
    line-height: 1.55 !important;
  }

  html[lang="ar"][dir="rtl"] body.service-single-page :where(p, .section-desc),
  html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-journey-copy p,
  html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-journey-step p {
    font-size: 13px !important;
    line-height: 1.82 !important;
  }

  html[lang="ar"][dir="rtl"] body.projects-page .midz-page-hero-copy h1,
  html[lang="ar"][dir="rtl"] body.projects-page .midz-page-hero-copy h1 * {
    font-size: clamp(26px, 7vw, 31px) !important;
    line-height: 1.4 !important;
  }

  html[lang="ar"][dir="rtl"] body.projects-page .feature-sec .section-title2,
  html[lang="ar"][dir="rtl"] body.projects-page .feature-sec .section-title2 *,
  html[lang="ar"][dir="rtl"] body.projects-page .faq-sec .section-title,
  html[lang="ar"][dir="rtl"] body.projects-page .faq-sec .section-title * {
    font-size: clamp(20px, 5.5vw, 24px) !important;
    line-height: 1.5 !important;
  }

  html[lang="ar"][dir="rtl"] body.projects-page :where(.midz-page-hero-lead, .section-desc, .accordion-body) {
    font-size: 13px !important;
    line-height: 1.82 !important;
  }

  html[lang="ar"][dir="rtl"] body.projects-page .faq-question-text {
    font-size: clamp(15px, 4.2vw, 17px) !important;
  }

  html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-hero-title,
  html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-hero-title * {
    font-size: clamp(22px, 6vw, 27px) !important;
    line-height: 1.5 !important;
  }

  html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-research-card h2,
  html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-research-card h2 * {
    font-size: clamp(15px, 4.3vw, 17px) !important;
    line-height: 1.55 !important;
  }

  html[lang="ar"][dir="rtl"] body.midz-project-page :where(
    .midz-project-gallery-stack-title,
    .midz-project-related-title,
    .midz-project-cta-title
  ),
  html[lang="ar"][dir="rtl"] body.midz-project-page :where(
    .midz-project-gallery-stack-title,
    .midz-project-related-title,
    .midz-project-cta-title
  ) * {
    font-size: clamp(19px, 5.3vw, 23px) !important;
    line-height: 1.52 !important;
  }

  html[lang="ar"][dir="rtl"] body.midz-project-page :where(
    .midz-project-hero-subtitle,
    .midz-project-about-text,
    .midz-project-research-card p,
    .midz-project-text-block p,
    .midz-project-cta-copy,
    .midz-project-cta-copy p
  ) {
    font-size: 13px !important;
    line-height: 1.82 !important;
  }
}

/* =========================================================
   2026-09-16 — requested service-detail refinements
   Main /ar/services.php is intentionally NOT targeted here.
   ========================================================= */

/* Service-detail hero: smaller and kept on one line. */
html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-single-copy h1,
html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-single-copy h1 * {
  font-size: clamp(26px, 1.75vw, 32px) !important;
  line-height: 1.28 !important;
  max-width: none !important;
  width: max-content !important;
  white-space: nowrap !important;
}

/* Laptop/desktop only: make journey CONTENT a little larger.
   The journey section heading + description above the track are deliberately unchanged. */
@media (min-width: 992px) {
  html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-journey-step {
    grid-template-columns: 62px minmax(0, 1fr) !important;
    column-gap: clamp(22px, 2.4vw, 34px) !important;
    padding: clamp(22px, 2.2vw, 30px) 0 !important;
  }

  html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-journey-number {
    width: 62px !important;
    height: 62px !important;
    font-size: 14px !important;
    box-shadow: 0 0 0 6px rgba(9, 9, 9, 0.94) !important;
  }

  html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-journey-step.is-active .midz-service-journey-number,
  html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-journey-step.is-hover .midz-service-journey-number,
  html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-journey-step:focus-within .midz-service-journey-number {
    box-shadow: 0 0 0 6px rgba(9, 9, 9, 0.94), 0 0 28px rgba(232, 17, 35, 0.42) !important;
  }

  html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-journey-copy h3,
  html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-journey-copy h3 *,
  html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-journey-step h3,
  html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-journey-step h3 * {
    font-size: clamp(20px, 1.25vw, 23px) !important;
    line-height: 1.48 !important;
  }

  html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-journey-copy p,
  html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-journey-step p {
    font-size: clamp(13.5px, .82vw, 15px) !important;
    line-height: 1.82 !important;
    max-width: 66ch !important;
  }
}

/* Phone/tablet: keep service title compact enough to stay on one line. */
@media (max-width: 991px) {
  html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-single-copy h1,
  html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-single-copy h1 * {
    font-size: clamp(15px, 4.4vw, 21px) !important;
    line-height: 1.35 !important;
    max-width: none !important;
    width: max-content !important;
    white-space: nowrap !important;
  }

  /* While the journey is in view, clear the left-side rail so the red journey
     indicator remains visible. It returns automatically below the section. */
  html[lang="ar"][dir="rtl"] body.service-single-page.midz-journey-in-view .floating-social {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-50%) translateX(-12px) !important;
    transition: opacity .2s ease, visibility .2s ease, transform .2s ease !important;
  }
}

/* =========================================================
   2026-09-17 — Arabic project-detail nav + footer alignment
   Scope: /ar/project/... ONLY
   ========================================================= */

/* Prev / next project cards: keep both the label and project name compact
   on laptop/desktop as well as phone/tablet. */
html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-nav-label {
  font-size: clamp(9px, .58vw, 11px) !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-nav-title {
  font-size: clamp(12px, .78vw, 14px) !important;
  line-height: 1.42 !important;
  font-weight: 500 !important;
}


@media (max-width: 991px) {
  html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-nav-label {
    font-size: 8px !important;
    line-height: 1.35 !important;
  }

  html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-nav-title {
    font-size: clamp(10px, 2.9vw, 12px) !important;
    line-height: 1.38 !important;
  }
}

/* =========================================================
   2026-09-17 — Arabic mobile typography refinements
   Scope: mobile only. Desktop/laptop is intentionally unchanged.
   ========================================================= */
@media (max-width: 767px) {
  /* HOME: service feature lines match the calmer Home About copy scale. */
  html[lang="ar"][dir="rtl"] body.home-page .service-sec .service-feature-lists,
  html[lang="ar"][dir="rtl"] body.home-page .service-sec .service-feature-lists span {
    font-family: var(--midz-arabic-font, "Cairo", Tahoma, Arial, sans-serif) !important;
    font-size: 13.5px !important;
    line-height: 1.88 !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
  }

  /* FAQ: questions were still being re-enlarged by the generic Arabic title rule. */
  html[lang="ar"][dir="rtl"] body .faq-sec .faq-question-text,
  html[lang="ar"][dir="rtl"] body .faq-sec .accordion-header .faq-question-text,
  html[lang="ar"][dir="rtl"] body .faq-sec .accordion-header button .faq-question-text {
    font-family: var(--midz-arabic-font, "Cairo", Tahoma, Arial, sans-serif) !important;
    font-size: 13px !important;
    line-height: 1.65 !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
  }

  /* SERVICE DETAIL: selected-projects description stays on one RTL line. */
  html[lang="ar"][dir="rtl"] body.service-single-page
  .midz-service-work-sec .section-header.section-header2 .section-desc {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    direction: rtl !important;
    text-align: right !important;
    white-space: nowrap !important;
    overflow: visible !important;
    font-size: clamp(8px, 2.15vw, 9px) !important;
    line-height: 1.65 !important;
    letter-spacing: 0 !important;
  }
}

/* =========================================================
   2026-09-17 — Service selected-projects description sizing
   Scope: /ar/service/... only
   ========================================================= */
html[lang="ar"][dir="rtl"] body.service-single-page
.midz-service-work-sec .section-header.section-header2 .section-desc {
  direction: rtl !important;
  text-align: right !important;
  unicode-bidi: plaintext !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  font-size: clamp(15px, .92vw, 16px) !important;
  line-height: 1.8 !important;
}

@media (max-width: 767px) {
  html[lang="ar"][dir="rtl"] body.service-single-page
  .midz-service-work-sec .section-header.section-header2 .section-desc {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    direction: rtl !important;
    text-align: right !important;
    unicode-bidi: plaintext !important;
    white-space: normal !important;
    overflow: visible !important;
    font-size: 13px !important;
    line-height: 1.82 !important;
    letter-spacing: 0 !important;
  }
}

/* =========================================================
   2026-09-17 — Arabic Home mobile Follow Us / services overlap
   Scope: /ar/ home only, phone/tablet only.
   The Follow Us rail stays visible normally and hides only while it overlaps
   the Home services section. It returns automatically below the section.
   ========================================================= */
@media (max-width: 991px) {
  html[lang="ar"][dir="rtl"] body.home-page.midz-home-services-social-hidden .floating-social {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .2s ease, visibility .2s ease !important;
  }
}

/* =========================================================
   2026-09-18 — Branding Identity mobile delivery line break
   Mobile only: break after "لضمان" in the final journey step.
   ========================================================= */
html[lang="ar"][dir="rtl"] body.service-branding-identity-page .midz-branding-delivery-mobile-break {
  display: none;
}

@media (max-width: 767px) {
  html[lang="ar"][dir="rtl"] body.service-branding-identity-page .midz-branding-delivery-mobile-break {
    display: block;
    height: 0;
  }
}


/* =========================================================
   2026-09-18 — Arabic service journey mobile safe text gutter
   Mobile only, all service detail pages: reserve clear space before the
   red journey rail so descriptions wrap onto a new line instead of
   running into / across the rail.
   ========================================================= */
@media (max-width: 767px) {
  html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-journey-copy {
    padding-left: 46px !important;
    box-sizing: border-box !important;
  }

  html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-journey-copy p,
  html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-journey-step p {
    max-width: 100% !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
}