/* ==========================================================================
   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-left: auto;
  margin-right: 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;
  left: 0;
  right: 0;
  z-index: 9990;
  pointer-events: auto;
}

/* ── Hero: canonical Figma 15233:19425 / hero node 15241:25611 ─────────────
   EOR rebuild §1 (2026-06-29). Canonical re-tune from the 2026-06-18 pilot:
     • H1 → 64/72, letter-spacing -2 (kit standard), color #021143. Two-tone
       inline: "Expand your team worldwide" is `.highlight-it-blue` (#114EF7);
       trailing "with our Employer of Record" stays #021143. Authoritative
       per-page H1 token now lives at `body.page-template-page-eor #rp-typo…`
       in components/product-hero.css (#rp-typo + !important beats this rule).
       The .rp-eor selector below is retained as a fallback in case the
       #rp-typo hook is ever stripped from the H1 markup. Letter-spacing
       bumped pilot -1 → canonical -2 to match contractors/local-payroll/spend
       heroes.
     • Subtitle → 20/28 Mulish Regular, color #696969 (Text/70 per Figma); the
       2026-06-18 pilot set 20/28 but no color — explicit #696969 added 2026-
       06-29 to match canonical.
     • Eyebrow slot becomes the "No entity? No problem." LEAD-IN (NOT a pill).
       Figma: Mulish Bold 40/48, color #021143, nowrap. Strip the kit's pill
       background/padding/radius on /eor so the eyebrow renders as a heading.
       The G2 + Capterra rating pills are rendered ABOVE the eyebrow by the
       rating_pills shortcode (already enabled for /eor — see hero-content-
       bindings.php `$rating_pills_slugs`); they keep their pill chrome.
   "Trusted by" brand bar embedded inside the hero (rendered by the shortcode,
   gated to eor) styled to sit transparently on the hero gradient rather than as
   a separate section. Scoped to .rp-eor so only this page is affected. */
.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 override — strip the kit's pill chrome on /eor so the
   `_rp_hero_eyebrow_html` slot renders as a 40/48 Mulish Bold navy heading
   (Figma canonical "No entity? No problem." lead-in above the H1). The pill
   markup is `<div class="rp-hero-eyebrow"><span class="rp-hero-eyebrow__pill">…</span></div>`
   — both elements are restyled below. (0,2,0) beats the (0,1,0) kit defaults
   in qa-fixes-global.css §3417-3424. */
.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;
  white-space: normal;
  /* Strip the remaining pill chrome from the global base rule
     (qa-fixes-global.css .rp-hero-eyebrow__pill: box-shadow 0 2px 8px rgba(17,78,247,.06)
     + 1px #E4EBFE border) — the canonical /eor lead-in is plain bold navy text, no halo.
     Cowork live-gate 2026-06-29. */
  box-shadow: none !important;
  border: 0 !important;
}
@media (max-width: 767px) {
  .rp-eor .rp-hero-eyebrow .rp-hero-eyebrow__pill {
    font-size: 28px !important;
    line-height: 36px !important;
  }
}
/* Hero primary CTA must be canonical blue (#114EF7) on BOTH EN + AR. The shared
   `.btn.w-button` base is RemotePass green (#27C879); EN picked up blue from a global
   LTR rule that doesn't reach RTL, so /ar/eor rendered the CTA green. Force blue,
   scoped to the eor hero, both directions. Cowork live-gate 2026-06-29. */
body.page-template-page-eor .hero_double_section a.btn.w-button {
  background-color: #114EF7 !important;
}
body.page-template-page-eor .hero_double_section a.btn.w-button:hover {
  background-color: #0D3FCB !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;
  /* Full-bleed SOLID light-blue edge-to-edge, rounded-bottom only (Cowork live-gate 2026-06-29).
     The shared product-hero default fades a `linear-gradient(transparent, #e4ebfe 15%, #e4ebfe)`
     over a white background-color, so the hero's top reads as a white full-width section with the
     light-blue sitting on an inset block below. Canonical /eor = the same light-blue across the
     whole hero, top-to-bottom and edge-to-edge. Drop the gradient + white base to a flat fill;
     keep the 0 0 48px 48px radius. (0,8,0) beats the migration 7-class gradient rule. */
  background-color: #e4ebfe !important;
  background-image: none !important;
  border-radius: 0 0 48px 48px !important;
}


/* ===== QA R1 mobile (Greg S8 review) — EOR-only. LTR only (AR hero stays right per A2). ===== */
@media (max-width: 767px) {
  /* Hero was mixed-aligned on mobile (heading left, body centered, button left) → center all to
     match the centered desktop hero. */
  html:not([dir="rtl"]) body.page-template-page-eor .double-slide-landing-page-left-main-header { text-align: center !important; }
  /* The global mobile rule turns .hero-btns into a display:GRID that auto-sizes to two content
     columns (272px 63px), so the pinned-width EOR button fills its own cell and can't center.
     Force a simple centered flex COLUMN instead — the fixed-width button then centers horizontally
     via align-items:center (Greg: EOR CTA stays centered @390). */
  html:not([dir="rtl"]) body.page-template-page-eor .hero-btns,
  html:not([dir="rtl"]) body.page-template-page-eor .new-btn-wrapper-container { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; }
  html:not([dir="rtl"]) body.page-template-page-eor .hero-btns .btn,
  html:not([dir="rtl"]) body.page-template-page-eor .new-btn-wrapper-container .btn { align-self: center !important; margin-left: auto !important; margin-right: auto !important; }
  /* §1.6 "Talk to an expert" (rp-howitworks__cta) → centered, not left. */
  body.page-template-page-eor .rp-howitworks__cta { justify-content: center !important; text-align: center !important; }
  body.page-template-page-eor .rp-howitworks__btn { align-self: center !important; }
  /* M1 (Greg QA R2 2026-07-09): trim the stacked dead space below "Start today" before the embedded
     brand bar. The gap was ~145px (hero-btns mB 32 + lleft-container pB 32 + left-container pB 16 +
     ~24px to the bar); zero the CTA/column bottom padding so it lands at a natural ~73px. */
  body.page-template-page-eor .hero-btns { margin-bottom: 0 !important; }
  body.page-template-page-eor .double-slide-lleft-container { padding-bottom: 0 !important; }
  body.page-template-page-eor .double-section-hero-container-left { padding-bottom: 0 !important; }
}