/* brands-bar.css — shared "Trusted by" brand-bar component (.brands-bar-component)
   Scoped overrides for parts/component-brands-bar.html (used on ~14 landing pages:
   eor, apis, relocation, comparison, super-app, integrations, ksa-eor, finance-managers,
   hr-managers, case-studies, pricing-hero, etc.). Kept OUT of the frozen migration.css
   per project convention; scoped to .brands-bar-component so it can't affect other
   .new_landing_page_brands_* sections (e.g. inline brand strips on KSA/demo pages). */

/* Section top padding -> 56px.
   migration.css resolves this element to padding-top:0 via its 5-class
   .new_landing_page_brands_blue_bg rule; appending .brands-bar-component to that exact
   selector (6 classes) wins by specificity + source order, scoped to this component. */
.rp-teams-landing-page.new_landing_page_brands.new_landing_page_brands_extra_styel.new_landing_page_brands_extra_styel_padding.new_landing_page_brands_blue_bg.brands-bar-component {
  padding-top: 56px;
}

/* Title -> 1.35rem. Already the computed value via migration.css's .text-blue rule
   (line ~1168); restated here, scoped to the component, so it owns its own spec. */
.brands-bar-component .new_landing_page_brands_header.new_landing_page_brands_header_white_color.txt-left.text-blue {
  font-size: 1.35rem;
}

/* "The World's Leading Companies" highlighted royal blue, matching the homepage brand bar. */
.brands-bar-component .new_landing_page_brands_header .highlight-it-blue {
  color: #114EF7;
}

/* ============================================================
   X-cut row 9 logo-colour standardization (2026-06-28)
   ------------------------------------------------------------
   Canonical brand-logo treatment for the shared brands-bar
   component: `filter: invert(85%)` (dark/grey monochrome).

   Figma anchor: homepage hero `.rp-khero` — `qa-fixes-hero.css:119`
   ("dark/grey monochrome, matching live + Figma (NOT blue)").
   This is the verified-to-Figma treatment used on the signed-off
   homepage. Applies wherever `.brands-bar-component` is rendered
   (~14 landing pages).

   AR (RTL) per-page filter forks live at (0,3,0) specificity in
   migration-rtl.css and silently beat the global (0,2,0) default:
     .rp-eor, .rp-contractors, .rp-apis, .rp-automations,
     .rp-bill-pay, .rp-calendar, .rp-time-off, .rp-remote-team
       -> filter: grayscale(1) brightness(0.4); opacity: 0.7
                  + hover opacity 1
     .rp-bulk-actions, .rp-relocation, .rp-spend
       -> filter: grayscale(100%); opacity: 0.5
                  + hover filter none, opacity 1
       (.rp-spend AR fork REMOVED this pass — was EN/AR mismatch
        on an in-progress page; AR Spend now inherits canonical.)
     .rp-super-app, .rp-direct-employee
       -> filter: grayscale(100%); opacity: 0.6 (no hover-reveal)
     .rp-org-charts
       -> filter: grayscale(100%) brightness(0.3); opacity: 0.6
     .rp-cor
       -> filter: brightness(0); opacity: 0.9 + hover opacity 0.5
          (BLACK silhouette, signed-off page)
     .rp-demo-request
       -> filter: none; opacity: 0.6 (full colour, just faded)
   The corresponding LTR pages have NO per-page filter override at
   all — they all inherit the global invert(85%). So the AR forks
   are the source of EN/AR drift Mohamed flagged ("Company brands
   logos look different color in multiple pages, should be
   standardized").

   The rule below sits at (0,4,0) — two classes on the wrapper
   (.rp-teams-landing-page + .brands-bar-component, both always
   present on the same element in parts/component-brands-bar.html
   line 10) + two on the image (.new-listed-brands-sub-section-img
   + .blue-filter). That beats every (0,3,0) per-page fork in
   migration-rtl.css regardless of source order, anchoring the
   canonical treatment wherever the shared component is rendered.

   Out of scope this pass: page-scope `.rp-local-payroll .blue-filter`
   override (migration.css:12499-12505, migration-rtl.css:11265-11271)
   is left as-is — it is functionally dead on /local-payroll/ (the
   only `.blue-filter` element on that page is inside `.rp-hero-brands`,
   which already has its own (0,3,0) rule farther down in this file
   beating it). Flagged in the report; cleanup belongs in a future
   componentization sweep.

   ⚠ Greg's visual eyes-on (Layer 2 of the sign-off gate) needed on AR
   signed-off pages (/ar/eor, /ar/cor, /ar/contractors) — this pass
   aligns those AR brand bars to their EN counterparts. If a Figma
   page-specific treatment was intentional for any of them (e.g.,
   CoR's black silhouette), call it out and a per-page exception
   can be re-added at (0,5,0) for that scope only.
   ============================================================ */
.rp-teams-landing-page.brands-bar-component .new-listed-brands-sub-section-img.blue-filter,
.rp-teams-landing-page.brands-bar-component .new-listed-brands-sub-section-img.blue-filter:hover {
  /* 2026-07-07 (reverted same day): the wave-1 brand SVGs are authored near-white
     (#FAFBFF/white). A brief change to filter:none assumed .brands-bar-component sits on a
     NAVY band — but in the actual render it's on LIGHT backgrounds (eor transparent,
     enterprise lavender #EAF0FE, smbs #FAFBFF), so near-white logos went invisible. Keep
     invert(85%) → dark-grey logos, visible on the light bars. (If a genuinely-navy brands
     bar ever appears, add a per-page white-logo exception for that scope only.) */
  filter: invert(85%);
  opacity: 1;
}

/* ── Brand bar embedded in a hero (.rp-hero-brands, rendered by the product-hero
   shortcode): match the homepage hero's brand strip EXACTLY — mirrors the .rp-khero
   rules in qa-fixes-hero.css so embedded bars are identical to the homepage. Transparent
   (no separate-section bg/padding), 24px navy title with royal-blue highlight, and a
   centered flex logo row with the Figma 16/28 gap + 36px logos (migration lays these out
   as a 2-col grid by default — hence the size/spacing drift before). */
.rp-hero-brands .rp-teams-landing-page {
  background: transparent !important;
  background-image: none !important;
  padding: 0 !important;
}
.rp-hero-brands .new-listed-brands-section { margin: 0 !important; }
.rp-hero-brands .new_landing_page_brands_header {
  text-align: center;
  font-size: 24px !important;
  line-height: 40px;
  font-weight: 700;
  text-transform: none;
  color: #021143;
  margin: 8px 0 20px;
}
.rp-hero-brands .new_landing_page_brands_header .highlight-it-blue { color: #114EF7; }
.rp-hero-brands .new-listed-brands-sub-section {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 28px !important;
}
.rp-hero-brands .new-listed-brands-sub-section-img { height: 36px !important; width: auto !important; }
.rp-hero-brands .new-listed-brands-sub-section-img.blue-filter { filter: invert(85%); }
/* 16px breathing room below the logo row (the .rp-container.adjust-spacing inner wrapper). */
.rp-hero-brands .rp-container.adjust-spacing { padding-bottom: 16px !important; }

/* ── Mobile (≤767) — match Figma mobile Logo Cloud (frame 12129:31354 → node
   16638:186078): heading 24/32, ~24px logos, 2 rows (4 + 3), 256 footprint.
   Live defaults (heading line-height 43.2 from a global 1.8, 28px logos, 28px
   col-gap) wrapped the 7 logos into 3 rows and overran to 376px. Logos here are
   22px (Figma 23.75, within tolerance) and the col-gap is tightened to 6px — the
   live SVG assets are intrinsically wider than Figma's, and /eor's hero adds 18px
   side padding (row only 339px wide), so Figma's 17.5px gap still wrapped a 4th
   logo. 22px/6px fits row-1's 4 logos inside the narrowest (eor) row. min-height
   pins the strip to Figma's 256 footprint (content ≈232; logos top-aligned with
   space below, mirroring the Figma card). Shared across every .rp-hero-brands
   page — no per-page fork. */
@media (max-width: 767px) {
  .rp-hero-brands { min-height: 256px; }
  .rp-hero-brands .new_landing_page_brands_header {
    font-size: 24px !important;
    line-height: 32px !important;
    margin: 8px 0 16px !important;
  }
  .rp-hero-brands .new-listed-brands-sub-section {
    gap: 16px 6px !important;
  }
  .rp-hero-brands .new-listed-brands-sub-section-img {
    height: 22px !important;
  }
  .rp-hero-brands .rp-container.adjust-spacing { padding-bottom: 0 !important; }
}

/* ── Homepage-style hero treatment for embedded pages (.rp-hero-embedded, set on the
   product-hero wrapper by the shortcode for Solutions pages): match the homepage hero —
   H1 64/72, subtitle 20/28 — and zero the wrapper's top/bottom padding so it's tight around
   its content + the embedded brand bar. !important beats any per-page hero sizing. */
.rp-hero-embedded { padding-top: 0 !important; padding-bottom: 0 !important; }
.rp-hero-embedded .double-slide-landing-page-left-main-header {
  font-size: 64px !important;
  line-height: 72px !important;
  letter-spacing: -1px !important;
}
.rp-hero-embedded .double-slide-landing-page-left-label {
  font-size: 20px !important;
  line-height: 28px !important;
}