/* AUTO-GENERATED from qa-fixes-eor.css via rtlcss. Do not edit by hand.
   Loaded only on AR pages by inc/i18n-setup.php.
*/
/* ==========================================================================
   qa-fixes-eor.css — EOR-page-specific QA fixes loaded by functions.php
   --------------------------------------------------------------------------
   Phase 2-eor (2026-05-01): split out from qa-fixes-global.css because the
   bash sandbox used by the build pipeline was seeing a stale truncated copy
   of qa-fixes-global.css (Local-by-Flywheel sync issue, same family as task
   #26's null-byte bug). Edits at the tail of qa-fixes-global.css were
   visible to the file tools but not to bash + Apache, so .min.css regen
   never picked them up. This standalone file isolates EOR-specific rules
   from the affected tail.

   Rules included:
     §A. Talent Pool slider — extend home rules to .rp-eor parent
     §B. Trust badges — light-blue variant override
     §C. Hero light-blue gradient — covered by hero-content-bindings.php
         shortcode change; no CSS needed here.
     §D. Wrapper class fix — applied directly in parts/eor-body.html.

   Load order: enqueue AFTER qa-fixes-global.css so these win on cascade.
   ========================================================================== */

/* §A TALENT POOL SLIDER fork (EOR scope) — REMOVED 2026-06-27: the slider is now a
   self-contained component. Its correct (homepage) values — container width, swiper
   padding, full-bleed photo card, gradient ::after, flag, name — live in
   components/country-slider.css under .rp-country-slider. No page fork. */

/* ============ §B. TRUST BADGES — match live's lavender, no navy fade =====
   2026-05-01 v3: corrected. Earlier confusion was about color — live uses
   lavender #f0f4fe, home uses navy. The user's actual issue with the
   previous lavender attempt was the navy *fade* on each edge of the
   section. That fade came from `.badges-trusted-new-design-mask` which
   carries `radial-gradient(circle, transparent 67%, #021143 90%)` from
   migration.css — designed to vignette the edges into the navy variant.
   Live's EOR has NO such mask element (verified via Chrome MCP DOM
   inspection), so the lavender bg sits clean across the full row.
   Fix: 1) restore the lavender bg matching live's #f0f4fe, 2) hide the
   navy-fading mask element so the edges stay clean.
   ========================================================================== */
.rp-eor .badges-trusted-new-design.badges-trusted-new-design-blue,
.rp-eor .badges-trusted-new-design-main.badges-trusted-new-design-main-blue {
  background-color: #f0f4fe;     /* matches live's exact tone */
}
.rp-eor .badges-trusted-new-design-mask {
  display: none !important;       /* this is what creates the navy edge fade */
}
.rp-eor .badges-trusted-new-design-main-header.badges-trusted-new-design-main-header-white {
  color: #15113b !important;       /* dark text on light bg */
}
.rp-eor .badges-trusted-new-design-main-sub-header.badges-trusted-new-design-main-sub-header-white {
  color: #6b7280 !important;
}

/* ============ §B3. PRODUCT SLIDE HEADINGS — match live's 32px ============
   migration.css defines `.double-slide-landing-page-left-main-header` at
   3.5rem (56px). On product pages live renders the H2 product-slide
   headings at 32px. The previous version of this rule also matched the
   bare `.double-slide-landing-page-left-main-header` class, which is ALSO
   used on the page hero (H1 "Hire Globally, Without Borders"). That made
   the hero shrink to 32px when it should stay at ~54px like live.
   Fix: nest the selector under `.hero_double_section_2` so it only catches
   the product-slide H2s. The hero uses `.hero_double_section` (no _2),
   so it keeps its full size.
   ========================================================================== */
.rp-eor .hero_double_section_2 .double-slide-landing-page-left-main-header,
.rp-eor .hero_double_section_2 h2 {
  font-size: 2rem !important;       /* 32px to match live */
  line-height: 1.2 !important;
  margin-bottom: 16px !important;
}

/* ============ §B5. PRODUCT SLIDE IMAGE — constrain width to match live ===
   Local's image renders at 618 px wide (fills the entire 50% right column);
   live's image renders at 532 px wide (centered inside its column with
   ~47 px breathing room on each side). The visible result on local is the
   image card pressing right up against the heading column — no gap. Live
   has clear horizontal whitespace between the image and the text.
   Fix: cap the image at ~532 px and center it inside its column.
   ========================================================================== */
.rp-eor .hero_double_section_2 .double-section-img.double-section-img-side-by-side-img {
  max-width: 532px;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  display: block;
}

/* ============ §B6. PRODUCT SLIDE TEXT COLUMN — narrow body text =========
   Local's body paragraph wraps to 2 lines, live's to 3. The reason is the
   `.double-slide-lleft-container` on local has no max-width so the text
   uses the full ~570 px of the right column. Live constrains the text to
   roughly 420 px so the paragraph wraps an extra time and the visual
   weight of each slide stays balanced with the image card on the left.
   Fix: cap the text-side container at 440 px max-width on EOR product
   slides only.
   ========================================================================== */
.rp-eor .hero_double_section_2 .double-slide-lleft-container {
  max-width: 440px;
}

/* §B4 TALENT POOL slider wrapper fork — REMOVED 2026-06-27: componentized into
   components/country-slider.css scoped to .rp-country-slider. */

/* ============ §C. SPENDCARDS PROMO BANNER — float bottom-fixed ===========
   2026-05-05 CORRECTION: prior version of this rule used `z-index: -997`
   (per a phase-2-eor 2026-05-01 comment that mistakenly claimed it
   "made the banner float above the page content"). A negative z-index
   does the OPPOSITE — it puts the banner BEHIND every page block with
   z-index ≥ 0, so on staging the banner was visible only through the
   thin white gutters between sections and the close-X was unclickable
   because page content intercepted pointer events. Bumped to a high
   positive z-index so the banner reliably floats above content. Greg
   verified on /contractors/ staging.

   Applied unscoped (no .rp-eor parent) so the banner floats consistently
   on every page that uses parts/promo-banners.html (i.e., every product
   landing page that includes home-footer.html). The same JS in
   promo-banners.html still handles localStorage dismissal + report-vs-
   spendcards visibility.
   ========================================================================== */
.banner-main-container.spendcard-banner-main-container,
.banner-main-container.report-banner-main-container {
  position: fixed;
  bottom: 8px;
  right: 0;
  left: 0;
  z-index: 9990;
  pointer-events: auto;
}

/* ── Hero: canonical Figma 15233:19425 / hero node 15241:25611 ─────────────
   EOR rebuild §1 (2026-06-29) — RTL twin of the EN rules in qa-fixes-eor.css.
   See that file for the per-property rationale. AR-specific: the eyebrow
   "No entity? No problem." needs an MSA translation (machine draft pending
   native review — flagged in eor-section1-hero-build-report.md).
   ========================================================================== */
.rp-eor .double-slide-landing-page-left-main-header {
  font-size: 64px;
  line-height: 72px;
  letter-spacing: -2px;
  color: #021143;
}
.rp-eor .double-slide-landing-page-left-label {
  font-size: 20px;
  line-height: 28px;
  color: #696969;
}
/* Eyebrow-as-leadin RTL — strip pill chrome on AR /eor so the eyebrow slot
   renders as a 40/48 Mulish Bold navy heading right-aligned. */
.rp-eor .rp-hero-eyebrow {
  margin-bottom: 16px;
}
.rp-eor .rp-hero-eyebrow .rp-hero-eyebrow__pill {
  display: block;
  background: transparent !important;
  color: #021143 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-family: Mulish, -apple-system, sans-serif !important;
  font-size: 40px !important;
  font-weight: 700 !important;
  line-height: 48px !important;
  letter-spacing: -1px !important;
  text-align: right !important;
  white-space: normal;
}
@media (max-width: 767px) {
  .rp-eor .rp-hero-eyebrow .rp-hero-eyebrow__pill {
    font-size: 28px !important;
    line-height: 36px !important;
  }
}
/* Embedded brand-bar styling (transparent, 24px title, royal-blue highlight, centered
   flex logo row with 16/28 gap, 36px logos) now lives in components/brands-bar.css under
   .rp-hero-brands — a single block that matches the homepage strip for every embedded bar. */
/* Hero wrapper (default light-blue gradient variant): drop its top + bottom padding
   so the hero is tight around its content + the embedded brand bar. Full 7-class chain
   matches the wrapper the shortcode emits; !important beats the migration padding rule. */
.rp-eor .hero_double_section.new_rp_hero_double_section.new_rp_hero_double_section_bg.new_rp_hero_double_section_bg_extra_layer.rounded-bottom.bg-light-blue.adjust-padding {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}