/* ==========================================================================
   qa-fixes-relocation.css — /relocation/ page parity overrides
   --------------------------------------------------------------------------
   Created 2026-05-01 from compare-page.mjs results on relocation
   (18 mismatches in baseline). Each rule scoped to `.rp-relocation` or
   `body.page-template-page-relocation`.

   Pre-flight items resolved by markup edits in relocation-body.html:
   - 1× H2 → H1 promotion on "Sync & Do more with Integrations"
   - Added zero-width joiner (‍) before "Three" in
     "Get Relocated in Three Simple Steps" so the heading text matches
     live's encoding (live includes a U+200D before "Three")
   - Removed duplicate home-testimonials + home-try-rp includes

   PHP edits:
   - Added 'relocation' to $soft_gradient_slugs in
     inc/hero-content-bindings.php (hero gradient is the standard
     lavender, same as cor — no separate override needed below)

   Global edits (qa-fixes-global.css):
   - Extended `:is(.rp-home-countries, .rp-eor)` → `:is(.rp-home-countries,
     .rp-eor, .rp-relocation)` on 17 Talent Pool rules so the cards
     render at 302×336 portrait on transparent bg (matching live).

   --------------------------------------------------------------------------
   Cosmetic-only floor (compare-relocation 2026-05-02, post-§E/§F/§G):
   trajectory 18 → 5 → 4. Matches the contractors sign-off pattern.
     1. whiteBgMaskHidden live=false / local=true — TRAP per
        RECURRING-ISSUES §2; local hide is correct (live's mask is in
        DOM but at a y where it doesn't overlap visible content).
     2. pageHeight 5630 vs 6089 — informational; delta spreads across
        many sections (Get Relocated, Sync, Footer, Brands bar all run
        slightly taller on local). Not single-fix.
     3. "Trusted by Customers," tag H2 (local) vs H3 (live) — markup
        in shared component-trust-badges.html. Same diff appears on
        every page that consumes the canonical part. Not page-fixable.
     4. Hero image imgLoading=eager (local) vs lazy (live) — set
        intentionally in PHP (inc/hero-content-bindings.php:267) per
        RECURRING-ISSUES §6 to avoid above-fold lazy flash. Eager is
        the correct UX choice; the diff just records the divergence.
   --------------------------------------------------------------------------
   This file handles the few remaining relocation-specific items.
   ========================================================================== */

/* ============ §A. WHITE-BG-MASK — hide on relocation =====================
   Same recurring pattern (RECURRING-ISSUES.md #2). Mask lands at y=772
   over visible content.
   ========================================================================== */
.page-template-page-relocation .white-bg-mask,
.page-template-page-relocation .new-footer-white-bg-mask,
.rp-relocation ~ * .white-bg-mask,
.rp-relocation ~ * .new-footer-white-bg-mask {
  display: none !important;
}

/* ============ §B. HERO SOFT-GRADIENT — match live's lavender top-fade =====
   Live relocation hero gradient: `linear-gradient(rgba(228,235,254,0),
   rgb(228,235,254) 15%, rgb(228,235,254))` — same lavender-blue as cor.
   PHP shortcode now emits `_bg_extra_layer` for relocation; this rule
   provides the gradient color.
   ========================================================================== */
.rp-relocation .hero_double_section.new_rp_hero_double_section.new_rp_hero_double_section_bg.new_rp_hero_double_section_bg_extra_layer {
  background-color: #fff;
  background-image: linear-gradient(rgba(228, 235, 254, 0), rgb(228, 235, 254) 15%, rgb(228, 235, 254));
  background-position: 0 0;
  background-repeat: repeat;
  background-size: auto;
  background-attachment: scroll;
  padding-top: 40px;
  padding-bottom: 24px;
}

/* ============ §C. TRUST BADGES — heading sizes match live ===============
   Same recurring pattern as cor / local-payroll / ai. Live: H3 32px / 48px.
   Local: 21.6px / 25.92px (default migration size). The "Trusted by
   Customers" tag mismatch (live H3, local H2) is a markup issue inside
   `component-trust-badges.html` — accepted as cosmetic for now since
   changing it affects every page.
   ========================================================================== */
.rp-relocation .badges-trusted-new-design-main-header,
.rp-relocation .badges-trusted-new-design-main-header.badges-trusted-new-design-main-header-white {
  font-size: 32px;
  line-height: 48px;
}

/* ============ §C2. TRUST BADGES — lavender bg, kill navy edge fade =======
   2026-05-02: ported the /eor/ pattern (qa-fixes-eor.css §B). Live's
   /relocation/ trust-badges section uses lavender #f0f4fe and has NO
   `.badges-trusted-new-design-mask` element (the radial-gradient navy
   edge-fade from migration.css). Local was rendering both the navy bg
   AND the navy-fading mask, so the section read as solid navy instead
   of lavender. Same four overrides as /eor/.
   ========================================================================== */
.rp-relocation .badges-trusted-new-design.badges-trusted-new-design-blue,
.rp-relocation .badges-trusted-new-design-main.badges-trusted-new-design-main-blue {
  background-color: #f0f4fe;     /* matches live's exact tone */
}
.rp-relocation .badges-trusted-new-design-mask {
  display: none !important;       /* this is what creates the navy edge fade */
}
.rp-relocation .badges-trusted-new-design-main-header.badges-trusted-new-design-main-header-white {
  color: #15113b !important;       /* dark text on light bg */
}
.rp-relocation .badges-trusted-new-design-main-sub-header.badges-trusted-new-design-main-sub-header-white {
  color: #6b7280 !important;
}

/* ============ §D. TALENT POOL SECTION — navy bg + padding ================
   Live: bg=#021143 (navy), padding=0px 32px 56px.
   Local was: bg=#fff, padding=56px 32px (vertical padding instead of
   bottom-only).

   The qa-fixes-global.css §15 rule for the navy bg includes
   `.rp-eor .new-rp-section.new-rp-section-vertical-border-slider-section.
    new-rp-section-blue-bg` with padding 56px top+bottom. Relocation needs
   a different padding (0 top, 56 bottom) so we can't share the rule.
   Adding a relocation-specific rule below.
   ========================================================================== */
.rp-relocation .new-rp-section.new-rp-section-vertical-border-slider-section.new-rp-section-blue-bg {
  background-color: #021143 !important;
  padding: 0 32px 56px;
}

/* ============ §E. HERO IMAGE — match live's 602px render =================
   compare-relocation 2026-05-02: row "Effortless employee relocation"
   reports imgRenderedW=626 (local) vs 602 (live). Live ships an inline
   `width: 602px` on .main-hero-section-img; local has the default 100%
   of its 626px parent column. Cap width to match, plus object-fit:cover
   to match live's computed value (was 'fill' on local).

   Scoped to .rp-relocation since other product pages may rely on the
   default 100% behavior — height auto preserves aspect ratio.
   ========================================================================== */
.rp-relocation .main-hero-section-img {
  width: 602px;
  height: auto;
  object-fit: cover;
}

/* ============ §F. TALENT POOL CONTAINER — remove 24px horizontal padding ==
   compare-relocation 2026-05-02: section "(unlabeled)" padding mismatch
   surfaces as live=0px vs local=0px 24px on the
   `.rp-container.new-rp-section-vertical-scroll-container` inside the
   Countries Carousel ("Hire Globally, Without Borders"). The 24px
   horizontal padding compresses the inner Swiper area by 48px total →
   each of the 4 visible slides loses 12px of width (290 vs 302).

   Removing the padding also corrects the cards-audit width mismatch
   (290 → 302 after this rule).
   ========================================================================== */
.rp-relocation .new-rp-section-vertical-border-slider-section .rp-container.new-rp-section-vertical-scroll-container {
  padding: 0;
}

/* ============ §G. TALENT POOL THUMB — match live's 18.07px margin ========
   Cards-audit reports thumb margin-bottom 16px (local) vs 18.07px (live).
   18.07px ≈ 1.13rem — likely a Webflow-derived rem value. Override on the
   relocation Talent Pool cards specifically; other pages still use 16px
   from qa-fixes-global.css.
   ========================================================================== */
.rp-relocation .swiper-countries-slider .thumb-wrap.countries-wrapper.thumb-wrap-relative {
  margin-bottom: 18.07px;
}

/* §X (removed v2 2026-05-02). The previous flex-override was based on a
   wrong diagnosis. The actual root cause was that the lazy
   IntersectionObserver init in `rpLazyInitSwiper` wasn't firing on this
   page, leaving Swiper uninitialized — slides therefore had no inline
   widths and stretched to the full container width. Fix landed in
   `assets/js/integration-slider.js`: switched to eager init so Swiper
   constructs at DOMContentLoaded. Live's wrapper uses `display: grid`
   from Webflow's `w-layout-grid` class and Swiper works fine on top of
   it; no CSS override needed here. */