/* ==========================================================================
   qa-fixes-geo-pages.css — KSA/UAE geo-specific landing-page parity overrides
   --------------------------------------------------------------------------
   Shared fixes for the 7 geo-specific landing pages: ksa-employer-of-record,
   ksa-payroll-software, local-payroll-ksa, uae-contractor,
   uae-employer-of-record, uae-local-payroll, uae-payroll-software.
   Created 2026-05-03 after dedup + H2→H1 + no-gradient hero batch passes.
   Targets the patterns common to all 7. Per-page CSS overrides go in
   qa-fixes-{slug}.css.
   ========================================================================== */

/* ---- Common scope shorthand ------------------------------------------------ */
/* All 7 pages have a body wrapper class .rp-{slug}; this stack covers them. */
.rp-ksa-employer-of-record,
.rp-ksa-payroll-software,
.rp-local-payroll-ksa,
.rp-uae-contractor,
.rp-uae-employer-of-record,
.rp-uae-local-payroll,
.rp-uae-payroll-software {
  /* shared scope marker; rules below scope by individual class for specificity */
}

/* ============ §A. PRODUCT-SLIDE H1 SIZING — 32/42 ========================
   Live ships the product-slide titles (Compliant KSA Onboarding, Automated
   Payroll & GOSI, etc.) as H1 32/42. The H2→H1 batch swap put these in
   markup, but the .rp-h1 / global H1 cascade renders them at 56-67. Cap to
   32/42 across all 7 pages. */
.rp-ksa-employer-of-record h1.double-slide-landing-page-left-main-header,
.rp-ksa-payroll-software h1.double-slide-landing-page-left-main-header,
.rp-local-payroll-ksa h1.double-slide-landing-page-left-main-header,
.rp-uae-employer-of-record h1.double-slide-landing-page-left-main-header,
.rp-uae-local-payroll h1.double-slide-landing-page-left-main-header,
.rp-uae-payroll-software h1.double-slide-landing-page-left-main-header {
  font-size: 32px;
  line-height: 42px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

/* ============ §B. PRODUCT-SLIDE COL WIDTH — match live's 626 (5/7 layout)
   Live: leftColW=626 / rightColW=626 (1252 / 2 = 626 with no inner gap).
   Local: 650 default. Cap to 626. */
.rp-ksa-employer-of-record .double-section-hero-container > .w-col-6,
.rp-ksa-payroll-software .double-section-hero-container > .w-col-6,
.rp-local-payroll-ksa .double-section-hero-container > .w-col-6,
.rp-uae-contractor .double-section-hero-container > .w-col-6,
.rp-uae-employer-of-record .double-section-hero-container > .w-col-6,
.rp-uae-local-payroll .double-section-hero-container > .w-col-6,
.rp-uae-payroll-software .double-section-hero-container > .w-col-6 {
  width: 626px;
  max-width: 626px;
  flex: 0 0 626px;
}

/* ============ §C. PRODUCT-SLIDE IMAGE SIZE — match live's 532 ===========
   Live: imgRenderedW=532 on the side-by-side product-slide images. Local
   was rendering at 150-189 px (image was being shrunk by some inherited
   rule). Force 532 px max with width:100% inside the col. */
.rp-ksa-employer-of-record .double-section-img.double-section-img-side-by-side-img,
.rp-ksa-payroll-software .double-section-img.double-section-img-side-by-side-img,
.rp-local-payroll-ksa .double-section-img.double-section-img-side-by-side-img,
.rp-uae-employer-of-record .double-section-img.double-section-img-side-by-side-img,
.rp-uae-local-payroll .double-section-img.double-section-img-side-by-side-img,
.rp-uae-payroll-software .double-section-img.double-section-img-side-by-side-img {
  max-width: 532px;
  width: 100%;
  height: auto;
}

/* ============ §D. HERO HEIGHT IMG CAP — match live's 706 ===============
   Component product hero on these geo pages renders the hero image; live
   caps at 706. Same fix as /cor/ §H, /ai/ §H. */
.rp-ksa-employer-of-record .main-hero-section-img,
.rp-ksa-payroll-software .main-hero-section-img,
.rp-local-payroll-ksa .main-hero-section-img,
.rp-uae-employer-of-record .main-hero-section-img,
.rp-uae-local-payroll .main-hero-section-img,
.rp-uae-payroll-software .main-hero-section-img {
  max-width: 706px;
  width: 100%;
  height: auto;
}

/* ============ §E. HERO 20%-STOP GRADIENT — bare wrapper variant =========
   Live's KSA/UAE pages use a soft 20%-stop lavender gradient on the hero
   wrapper (vs the default 15% stop). Apply via the bare-wrapper selector
   that the no_gradient_slugs list emits (3 base classes only). */
.rp-ksa-employer-of-record .hero_double_section.new_rp_hero_double_section.new_rp_hero_double_section_bg,
.rp-ksa-payroll-software .hero_double_section.new_rp_hero_double_section.new_rp_hero_double_section_bg,
.rp-local-payroll-ksa .hero_double_section.new_rp_hero_double_section.new_rp_hero_double_section_bg,
.rp-uae-employer-of-record .hero_double_section.new_rp_hero_double_section.new_rp_hero_double_section_bg,
.rp-uae-local-payroll .hero_double_section.new_rp_hero_double_section.new_rp_hero_double_section_bg,
.rp-uae-payroll-software .hero_double_section.new_rp_hero_double_section.new_rp_hero_double_section_bg {
  background-color: #fff;
  background-image: linear-gradient(rgba(228, 235, 254, 0), rgb(228, 235, 254) 20%, rgb(228, 235, 254));
  background-position: 0 0;
  background-repeat: repeat;
  background-size: auto;
  background-attachment: scroll;
  padding-top: 40px;
  padding-bottom: 24px;
}

/* ============ §F. FAQs HEADING — 36/38 ===================================
   Common across these pages — the "FAQs" H2 in the FAQ section is 36/38
   on live. Local default is ~28/36.4. */
.rp-ksa-employer-of-record .guide_hiring_faq_h,
.rp-ksa-payroll-software .guide_hiring_faq_h,
.rp-local-payroll-ksa .guide_hiring_faq_h,
.rp-uae-employer-of-record .guide_hiring_faq_h,
.rp-uae-local-payroll .guide_hiring_faq_h,
.rp-uae-payroll-software .guide_hiring_faq_h {
  font-size: 36px;
  line-height: 38px;
}

/* ============ §G. WHITE-BG-MASK — keep visible ===========================
   These pages: live whiteBgMaskHidden=false (mask visible). The default
   migration.css behavior keeps it visible — no override needed. uae-contractor
   is the exception (its qa-fixes-uae-contractor.css §A hides it because
   live HIDES it on that one page). Documenting here for consistency. */