/* AUTO-GENERATED from qa-fixes-home.css via rtlcss. Do not edit by hand.
   Loaded only on AR pages by inc/i18n-setup.php.
*/
/* ==========================================================================
   qa-fixes-home.css — Home page parity overrides
   --------------------------------------------------------------------------
   Created 2026-05-01 from compare-page.mjs results on home (after the
   tool fix that surfaced the real heading mismatches). Each rule is
   scoped to `body.home` (the WP body class for the front page) to ensure
   no leakage to other pages.

   Pre-flight checks satisfied (RECURRING-ISSUES.md):
   - Talent Pool global rules in qa-fixes-global.css §15 already cover
     home (scoped to .rp-home-countries). v3 (2026-05-01) reverted the
     landscape aspect-ratio mistake — now portrait 336px matching live.
   - Trust Badges navy variant — home uses default navy; no override
     needed beyond the size rule below (live's badges are 32px headings,
     not the 21.6px the migration cascade was producing).
   ========================================================================== */

/* §A. TRUST BADGES heading sizes — REMOVED 2026-06-03 (awards is now the
   Kadence pattern rp-awards; moved to components/awards.css scoped .rp-kawards). */

/* ============ §B. ALL-IN-ONE SUB-GRID HEADINGS — match live's 22.4 px =====
   The "All-In-One Solution" section in home-vertical-cards.html has 4
   sub-grid cards:
     - Onboard Local and Global Talent Compliantly
     - Manage Time Off, Expenses, & Equipment
     - Offer Customized Benefits Suitable for Each Country
     - Automate Tasks and Integrate with Your Tech Stack
   Live: H2 22.4px / 32px. Local: H2 20px / 30px. The headings carry
   `.new-rp-section-vertical-scroll-container-left-content-header
    .vertical-card-content-header`.
   ========================================================================== */
body.home .new-rp-section-vertical-scroll-container-left-content-header.vertical-card-content-header {
  font-size: 22.4px;
  line-height: 32px;
}

/* ============ §C. PRACTICAL GUIDES — card title sizing ==================
   The 3 guide cards under "Practical Guides To Help You Scale Your Global
   Workforce" each have an H3 title. Live: 18px / 26px. Local: 22px /
   28.6px (oversized). Cap to live's value. The cards live in
   home-practical-guides.html under `.rp-home-practical-guides`.
   ========================================================================== */
body.home .rp-home-practical-guides h3,
body.home .rp-home-practical-guides .blog-title,
body.home .rp-home-practical-guides .practical-guide-title {
  font-size: 18px;
  line-height: 26px;
}

/* ============ §D. TALENT POOL SECTION PADDING ===========================
   Live's Talent Pool section padding: `0px 32px 56px` (no top, 32 side,
   56 bottom). Local was rendering `56px 32px` (56 vert, 32 side). Match
   live exactly. Scoped under .rp-home-countries which is the section's
   unique wrapper.
   ========================================================================== */
body.home .new-rp-section.rp-home-countries,
body.home .rp-home-countries.new-rp-section.new-rp-section-blue-bg {
  padding: 0 32px 56px;
}

/* ============ §E. PRACTICAL GUIDES SECTION PADDING ======================
   Live: `padding: 0px 32px 56px` (32px sides, 56px bottom, 0 top).
   Local was rendering `0px 24px` (24px sides, no vertical). Match live.
   ========================================================================== */
body.home .new-rp-section.rp-home-practical-guides {
  padding: 0 32px 56px;
}

/* ============ §F. HERO H1 — FIGMA SOURCE-OF-TRUTH (2026-06-02) ============
   Authoritative Figma frame: BliGiNMu5qH2EStgHwk35S node 7688:68909.
   Figma H1 = Mulish Bold 64/72, navy Primary/130 #021143.
   Was: migration.css .double-slide...-dark-blue = 3.35rem/64px, #18181B.
   Blue "Global and Local" span (.highlight-it-blue #114EF7) already correct.
   ========================================================================== */
body.home .double-slide-landing-page-left-main-header.double-slide-landing-page-left-main-header-dark-blue {
  font-size: 4rem;        /* 64px */
  line-height: 72px;
  color: #021143;
}

/* §G. SOLUTION CARDS — REMOVED 2026-06-03. Section is now the Kadence synced
   pattern rp-solution-cards; its styles live in components/solution-cards.css
   (scoped to .rp-ksolcards), enqueued via inc/kadence-solution-cards.php. */

/* §H. SPENDCARDS BANNER — REMOVED 2026-06-03. Section is now the Kadence synced
   pattern rp-spendcards-banner; styles live in components/spendcards-banner.css
   (scoped to .rp-kspendbanner), enqueued via inc/kadence-spendcards-banner.php. */

/* ============ §J. COUNTRY SLIDER GUIDE CARD — FIGMA (2026-06-02) ==========
   Figma leads the country slider with a navy "Your guide to global employment"
   card (heading + sub + Explore More). Added as the first swiper slide.
   ========================================================================== */
body.home .rp-guide-card-slide {
  display: flex;
}
body.home .rp-guide-card {
  background-color: #021143;
  border-radius: 16px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #ffffff;
  box-sizing: border-box;
}
body.home .rp-guide-card-title {
  font-size: 28px;
  line-height: 1.15;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 14px;
  text-transform: none;
}
body.home .rp-guide-card-sub {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 22px;
}
body.home .rp-guide-card-btn {
  display: inline-block;
  width: fit-content;
  background-color: #114EF7;
  color: #ffffff;
  padding: 11px 22px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}

/* ============ §K. FOOTER — FIGMA NAVY REDESIGN (2026-06-02) ===============
   Figma footer is full navy (#021143): badges/app row, simplified links and
   copyright all sit on navy with white text + white social icons.
   ========================================================================== */
body.home .new-footer-rating-and-hr-container,
body.home .rp-section.footer.new-footer {
  background-color: #021143;
}
body.home .new-footer-awards-orange-hide-move-down {
  display: none;                 /* white decorative shape — not in Figma */
}
body.home .rp-section.footer .f16-semi {
  color: #ffffff;
}
body.home .rp-section.footer .rp-footer-link {
  color: rgba(255, 255, 255, 0.72);
}
body.home .rp-section.footer .rp-footer-link:hover {
  color: #ffffff;
}
body.home .footer-copyright,
body.home .footer-copyright .mb-m0,
body.home .new-footer-app-label,
body.home .dropdown-footer-language-text-rtl {
  color: #ffffff;
}
body.home .footer_social_media_container img {
  filter: brightness(0) invert(1);   /* dark icons → white on navy */
}

/* §L. AWARDS BADGE ROW — REMOVED 2026-06-03 (moved to components/awards.css). */

/* ============ §M. TESTIMONIALS — FIGMA PHOTO CARDS (2026-06-02) ===========
   Large photo cards with gradient overlay + quote/metric, on a light section.
   ========================================================================== */
body.home .rp-photo-reviews {
  background-color: #ffffff !important;
  /* FIX 4 (QA round 1): yellow gradient band — matches components/testimonials.css */
  background-image: linear-gradient(-180deg, rgba(255,231,151,0) 0%, #FFE797 50%) !important;
  padding-top: 80px;
  padding-bottom: 64px;
}
body.home .rp-photo-reviews::before { display: none !important; } /* kill old star bg */
body.home .rp-pt-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 36px;
}
body.home .rp-pt-title {
  color: #021143;
  font-size: 40px;
  line-height: 1.15;
  font-weight: 700;
  margin: 0;
  text-align: right;
  text-transform: none;
}
body.home .rp-pt-rating { text-align: left; }
body.home .rp-pt-stars { color: #FFB400; font-size: 20px; letter-spacing: 2px; }
body.home .rp-pt-rating-txt { color: #2A2A2A; font-size: 14px; margin-top: 4px; }
body.home .rp-pt-rating-txt strong { color: #021143; }
body.home .rp-pt-g2 {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  color: #114EF7;
  background: #EAF0FF;
  border-radius: 999px;
  padding: 4px 12px;
}
body.home .rp-photo-testimonial {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  height: 600px;
}
body.home .rp-pt-photo { width: 100%; height: 600px; object-fit: cover; display: block; }
body.home .rp-pt-overlay {
  position: absolute;
  inset: 0;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(-180deg, rgba(2,17,67,0) 30%, rgba(2,17,67,0.82) 100%);
}
body.home .rp-pt-metricpill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border-radius: 14px;
  padding: 10px 16px;
  width: fit-content;
  box-shadow: 0 6px 24px rgba(0,0,0,0.15);
}
body.home .rp-pt-metric-num { font-size: 22px; font-weight: 700; color: #021143; }
body.home .rp-pt-metric-label { font-size: 13px; color: #545454; font-weight: 600; }
body.home .rp-pt-metric-co { font-size: 15px; font-weight: 700; color: #021143; }
body.home .rp-pt-logo { height: 24px; width: auto; object-fit: contain; }
body.home .rp-pt-body { max-width: 640px; }
body.home .rp-pt-quote { color: #ffffff; font-size: 20px; line-height: 1.5; font-weight: 600; margin: 0 0 16px; }
body.home .rp-pt-author strong { color: #ffffff; display: block; font-size: 16px; }
body.home .rp-pt-author span { color: rgba(255,255,255,0.85); font-size: 14px; }
@media (max-width: 767px) {
  body.home .rp-pt-title { font-size: 26px; }
  body.home .rp-pt-quote { font-size: 16px; }
  body.home .rp-photo-testimonial, body.home .rp-pt-photo { height: 460px; }
  body.home .rp-pt-rating { text-align: right; }
}
body.home .dropdown-footer-language-border {
  border-color: rgba(255, 255, 255, 0.3);
}
body.home .drop-dir-footer {
  filter: brightness(0) invert(1);
}

/* ============ §I. HERO COLUMN WIDTH — FIGMA (2026-06-02) ==================
   Figma hero text column is ~48% (fits the 64px H1 in 3 lines). Local default
   w-col-5/w-col-7 (42/58) made the larger H1 wrap to 5 cramped lines. Widen
   the text column on desktop so the headline wraps like Figma. Mobile keeps
   the stacked w-col-stack behaviour (override is min-width:768px only).
   ========================================================================== */
@media (min-width: 768px) {
  body.home .security-trust-double-section-hero-container .double-section-hero-container-left {
    width: 51%;
  }
  body.home .security-trust-double-section-hero-container .double-section-hero-container-right {
    width: 49%;
  }
}

/* SOLUTION CARDS card title/body stop-gap — REMOVED 2026-06-03 (moved to
   components/solution-cards.css). The shared section-header rule below is kept
   because go-global / country-slider / practical-guides also use it. */

/* Figma "Heading 2": Mulish 40/48/700 (was 35.2/51.2/600) — shared across home sections */
body.home .new-rp-section-header {
  font-size: 40px !important;
  line-height: 48px !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   §N. EN HOMEPAGE QA — 2026-07-07 (RTL twin). Values identical to LTR:
   L/R padding is symmetric (no flip), the Kadence grids auto-mirror in RTL
   (banner image → right / CTA → left = reading-end, per Figma AR), and
   margin auto / max-width are direction-agnostic.
   ========================================================================== */

/* item 5: solution-cards grid gap 32 → 16 */
body.home .rp-ksolcards .kt-row-column-wrap.kt-has-4-columns { gap: 16px !important; }

/* item 6: SpendCards banner inner wrap → max-width 1300 + 24px L/R */
body.home .rp-kspendbanner .kt-row-column-wrap.kt-has-1-columns {
  max-width: 1300px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* SpendCards banner text column: ALWAYS RIGHT-aligned in AR (all breakpoints). Mohamed 2026-07-07. */
body.home .rp-kspendbanner .kadence-columnspendb_mid > .kt-inside-inner-col { text-align: right !important; }
body.home .rp-kspendbanner .kadence-columnspendb_mid .kt-adv-heading-text,
body.home .rp-kspendbanner .kadence-columnspendb_mid h2,
body.home .rp-kspendbanner .kadence-columnspendb_mid h3,
body.home .rp-kspendbanner .kadence-columnspendb_mid p { text-align: right !important; }
body.home .rp-kspendbanner .kadence-columnspendb_mid .kt-inside-inner-col > * { margin-right: 0 !important; margin-left: auto !important; }

/* Tablet: content sticks to the container top → 24px top padding. */
@media (min-width: 768px) and (max-width: 991px) {
  body.home .rp-kspendbanner .kadence-columnspendb_mid > .kt-inside-inner-col { padding-top: 24px !important; }
}

/* item 10 (tablet ≤991): banner keeps side-by-side + 24px pad */
@media (max-width: 991px) {
  body.home .rp-kspendbanner .kt-row-column-wrap.kt-has-3-columns {
    grid-template-columns: auto 1fr auto !important;
  }
  body.home .rp-kspendbanner .kt-row-column-wrap.kt-has-1-columns {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* items 12-14 (mobile ≤767): banner max-width 1300 + 16px pad; hide the card
   image; space-between (CTA pushed to the left reading-end in RTL). */
@media (max-width: 767px) {
  body.home .rp-kspendbanner .kt-row-column-wrap.kt-has-1-columns {
    max-width: 1300px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  body.home .rp-kspendbanner .kt-row-column-wrap.kt-has-3-columns {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    grid-template-columns: none !important;
  }
  body.home .rp-kspendbanner .kadence-columnspendb_illo { display: none !important; }
  body.home .rp-kspendbanner .rp-spendb-illo { display: none !important; }

  /* Mobile: SpendCards banner text column RIGHT-aligned (AR) + 24px padding. Mohamed 2026-07-07. */
  body.home .rp-kspendbanner .kadence-columnspendb_mid > .kt-inside-inner-col {
    text-align: right !important;
    padding: 24px !important;
  }
  body.home .rp-kspendbanner .kadence-columnspendb_mid .kt-adv-heading-text,
  body.home .rp-kspendbanner .kadence-columnspendb_mid h2,
  body.home .rp-kspendbanner .kadence-columnspendb_mid h3,
  body.home .rp-kspendbanner .kadence-columnspendb_mid p { text-align: right !important; }
  body.home .rp-kspendbanner .kadence-columnspendb_mid .kt-inside-inner-col > * { margin-right: 0 !important; margin-left: auto !important; }

  /* item 15 (revised Mohamed 2026-07-07): AR mobile card icons align RIGHT (start in RTL). */
  body.home .rp-ksolcards .rp-solcard-iconbox {
    margin-left: auto !important;
    margin-right: 0 !important;
    display: block !important;
  }
  body.home .rp-ksolcards .rp-solcard-icon { margin-left: auto !important; margin-right: 0 !important; display: block; }
}