/* APIs page (Wave-2) — Figma-aligned synced patterns. Scoped under .rp-apis.
   Enqueued AFTER migration.css; presence-gated via inc/kadence-apis.php.
   Figma: BliGiNMu5qH2EStgHwk35S node 16802:32209 (PP-U "APIs"). */

.rp-apis { font-family: "Mulish", sans-serif; }
.rp-apis * { box-sizing: border-box; }
.rp-apis-accent { color: #114ef7; }

/* ===== HERO =====
   APIs P1 pass 2026-06-29 (Issue Tracker row 50, Mohamed audit row 75
   "white square behind the Hero section video"). The previous fallback
   was `#ffffff` which showed through the gradient's transparent top
   (0%→70.5% rgba(228,235,254,0)→1), producing a harsh white band where
   the hero media art sits at the top of the section. Same root-cause
   pattern X-cut row 10 image-backdrops §F3 documented for CoR/Contractors.
   Fix: change the gradient FALLBACK from #ffffff to the gradient's
   end-state lavender (#E4EBFE) so the transparent portion at top renders
   as lavender rather than white. The visible result is a clean soft
   lavender fill across the whole hero, matching the rest of the page's
   lavender accent treatment. Backup:
   specs/p1-batch/backups/apis.css.backup.apis-1782718470.md */
.rp-apis-hero {
  /* Background matched to the cor hero: lavender top-fade to solid by 15% on white. */
  background-color: #fff;
  background-image: linear-gradient(rgba(228, 235, 254, 0), rgb(228, 235, 254) 15%, rgb(228, 235, 254));
  border-bottom-left-radius: 56px;
  border-bottom-right-radius: 56px;
  overflow: clip;
}
.rp-apis-hero__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 72px 24px 40px;
}
.rp-apis-hero__text { flex: 1 0 540px; max-width: 580px; min-width: 0; }
.rp-apis-hero__media { flex: 0 1 640px; min-width: 0; display: flex; justify-content: flex-end; }
/* aspect-ratio:auto + object-fit:contain override the stale square width/height attrs
   baked into the hero <img> (synced block) so the landscape image keeps its real ratio
   instead of being stretched (which ovalled the play button, esp. on mobile). */
.rp-apis-hero__img { width: 100%; max-width: 680px; height: auto; aspect-ratio: auto; object-fit: contain; }
/* Thumbnail is a click-to-play video (wired by assets/js/apis-hero-video.js + the global
   hero-yt-modal.js) — same as cor. Play button is baked into the image. 2026-07-12. */
.rp-apis-hero__media[data-askai-video],
.rp-apis-hero__media[data-askai-video] .rp-apis-hero__img { cursor: pointer; }

/* The AR hero synced block (7620) embeds an old brands bar inside the hero that the EN
   block doesn't. Hide it so only the homepage khero-brands trusted strip (from the body)
   shows — matching EN. 2026-07-12. */
body.page-template-page-apis .rp-apis-hero .rp-hero-brands { display: none !important; }

.rp-apis-hero__pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.rp-apis-hero__pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border-radius: 40px; padding: 8px 12px;
  font-size: 12px; font-weight: 700; line-height: 20px; color: #044d80;
  box-shadow: 0 2px 8px rgba(2,17,67,.06);
}
.rp-apis-hero__pill-icon { width: 20px; height: 20px; display: block; flex: 0 0 auto; }
.rp-apis-hero__title {
  font-weight: 700; letter-spacing: 0; color: #021143; margin: 0 0 16px;
}
/* Title size mirrors cor's hero H1 (47.2/56 desktop). `html body …` + !important
   out-specifies migration.css's frozen 54px H1 cap (cor escapes it via #rp-typo). */
html body .rp-apis-hero .rp-apis-hero__title { font-size: 47.2px !important; line-height: 56px !important; }
.rp-apis-hero__sub {
  font-size: 20px; line-height: 28px; font-weight: 400; color: #545454;
  max-width: 640px; margin: 0 0 16px;
}
/* Buttons matched to the SMBs hero CTAs: solid-blue primary + white/blue-outline
   secondary, both 16.25px/500, 57px tall, radius 8, 1px #114EF7 border, 24px gap. */
.rp-apis-hero__ctas { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
.rp-apis-hero__cta {
  display: inline-flex; align-items: center; justify-content: center;
  height: 57px; padding: 0 32px; border-radius: 8px;
  background: #114ef7; color: #fff; font-size: 16.25px; font-weight: 500; line-height: 22px;
  border: 1px solid #114ef7;
  text-decoration: none; white-space: nowrap; transition: background .15s ease, border-color .15s ease;
}
.rp-apis-hero__cta:hover { background: #0d3fd0; border-color: #0d3fd0; color: #fff; }
.rp-apis-hero__cta--ghost {
  background: #fff; color: #114ef7; border: 1px solid #114ef7; border-radius: 8px; padding: 0 32px;
}
.rp-apis-hero__cta--ghost:hover { background: #f0f4ff; color: #114ef7; }

/* Trusted-by = homepage EN khero-brands component (.rp-khero-brands). Its styling lives in
   qa-fixes-hero.css which only loads on the home hero, so replicate the homepage values here
   (scoped to /apis) and embed it on the hero lavender with the 56px rounded bottom — hero goes
   flat-bottom so hero + brands read as one block, exactly like the homepage/cor. 2026-07-12. */
body.page-template-page-apis .rp-apis-hero { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
body.page-template-page-apis .rp-khero-brands {
  background-color: rgb(228, 235, 254);
  border-bottom-left-radius: 56px;
  border-bottom-right-radius: 56px;
  margin-top: 0;
  padding: 24px max(24px, calc(50% - 620px)) 48px;
}
body.page-template-page-apis .rp-khero-brands .new_landing_page_brands_header {
  text-align: center !important; font-size: 24px !important; line-height: 40px !important;
  font-weight: 700 !important; color: #021143 !important; margin: 0 0 20px !important; text-transform: none !important;
}
body.page-template-page-apis .rp-khero-brands .new_landing_page_brands_header .highlight-it-blue { color: #114EF7 !important; }
body.page-template-page-apis .rp-khero-brands .new-listed-brands-sub-section {
  display: flex !important; flex-wrap: wrap !important; align-items: center !important;
  justify-content: center !important; gap: 16px 28px !important;
}
body.page-template-page-apis .rp-khero-brands .new-listed-brands-sub-section-img { height: 36px !important; width: auto !important; }
body.page-template-page-apis .rp-khero-brands .new-listed-brands-sub-section-img.blue-filter { filter: invert(85%) !important; }
@media (max-width: 991px) {
  body.page-template-page-apis .rp-khero-brands .new-listed-brands-sub-section { gap: 12px 20px !important; }
}

/* ===== shared section frame ===== */
.rp-apis-pain__inner,
.rp-apis-how__inner,
.rp-apis-faq__inner { max-width: 1300px; margin: 0 auto; padding: 0 24px; }

/* ===== PAIN POINTS ===== */
.rp-apis-pain { padding: 80px 0; background: #fff; }
.rp-apis-pain__head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
/* Section header + pain cards matched to relocation: header 35.2/51.2 #2A2A2A,
   cards padding 32 / gap 32, body 18/1.5. */
.rp-apis-pain__title {
  font-size: 35.2px; line-height: 51.2px; font-weight: 700; color: #2A2A2A; margin: 0 0 16px;
}
.rp-apis-pain__sub { font-size: 16px; line-height: 24px; color: #4a5878; margin: 0; }
.rp-apis-pain__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.rp-apis-pain__card {
  background: #fff; border: 1px solid #ECEFF6; border-radius: 16px;
  padding: 32px; min-height: 184px;
}
.rp-apis-pain__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px; background: #FCEAEA; margin-bottom: 18px;
}
.rp-apis-pain__icon svg { width: 18px; height: 18px; display: block; }
/* Match the standard "RP Pain Points (3-up)" X (overrides the inline stroke attr). */
.rp-apis-pain__icon svg path { stroke: #DE2626; }
.rp-apis-pain__text { font-size: 18px; line-height: 1.5; font-weight: 400; color: #2A2A2A; margin: 0; }

/* ===== BENEFITS ===== */
.rp-apis-benefits { padding: 24px 0 40px; background: #fff; }
.rp-apis-benefits__intro { max-width: 760px; margin: 40px auto 24px; padding: 0 24px; text-align: center; }
.rp-apis-benefits__intro-title {
  font-size: 35.2px; line-height: 51.2px; font-weight: 700; color: #2A2A2A; margin: 0;
}
.rp-apis-benefit {
  max-width: 1200px; margin: 0 auto; padding: 40px 24px;
  display: flex; align-items: center; gap: 48px;
}
/* "Automate onboarding…" block = full-bleed light-blue band, same colour as
   .rp-feature-split--blue (#EEF3FF). Full-width bleed with the content re-centred
   to the 1200 column. It's the only --text-right benefit block. */
.rp-apis-benefit--text-right {
  flex-direction: row;
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 64px max(24px, calc(50vw - 600px));
  background: #EEF3FF;
}
.rp-apis-benefit__text { flex: 1 1 0; min-width: 0; max-width: 652px; }
.rp-apis-benefit__media { flex: 0 0 auto; min-width: 0; display: flex; justify-content: center; }
.rp-apis-benefit__media img { width: 100%; max-width: 500px; height: auto; }
.rp-apis-benefit--text-right .rp-apis-benefit__media img { max-width: 540px; }
.rp-apis-benefit__title {
  /* Match relocation feature title: 36/44 navy. */
  font-size: 36px; line-height: 44px; font-weight: 700; color: #021143; margin: 0 0 16px;
}
.rp-apis-benefit__lead { font-size: 18px; line-height: 1.55; color: #4a5878; margin: 0 0 14px; }
.rp-apis-benefit__lead strong { color: #021143; font-weight: 700; }
.rp-apis-benefit__list { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.rp-apis-benefit__list li { display: flex; align-items: center; gap: 12px; font-size: 17px; line-height: 24px; color: #021143; }
.rp-apis-benefit__check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; background: #E4ECFF; flex: 0 0 auto;
}
.rp-apis-benefit__check svg { width: 12px; height: 12px; display: block; }
.rp-apis-benefit__stats { display: flex; gap: 24px; margin-top: 28px; }
.rp-apis-benefit__stat { display: flex; flex-direction: column; flex: 1 1 0; }
/* Stats match relocation .relo-stats-row: 32px blue number, 14px gray label. */
.rp-apis-benefit__num { font-size: 32px; line-height: 1.1; font-weight: 700; color: #114ef7; }
.rp-apis-benefit__lbl { font-size: 14px; line-height: 1.4; color: #545454; margin-top: 4px; }
.rp-apis-benefit__cta {
  display: inline-flex; align-items: center; justify-content: center;
  height: 50px; padding: 0 28px; border-radius: 4px; margin-top: 8px;
  background: #114ef7; color: #fff; font-size: 15px; font-weight: 700; text-decoration: none;
}
.rp-apis-benefit__cta:hover { background: #0d3fd0; color: #fff; }

/* ===== HOW IT WORKS ===== */
.rp-apis-how { padding: 80px 0; background: #fff; }
.rp-apis-how__head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.rp-apis-how__title { font-size: 35.2px; line-height: 51.2px; font-weight: 700; color: #2A2A2A; margin: 0 0 16px; }
.rp-apis-how__sub { font-size: 18px; line-height: 26px; color: #4a5878; margin: 0; }
.rp-apis-how__steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  position: relative; margin-bottom: 56px;
}
/* dashed connector behind the number circles */
/* Stepper matched to relocation .relo-hiw-* : connector #D0D5E0, 2px num border, 22px num,
   pill-shaped (999px) #EEF2FE pill, title #0E1E36, 15px text. */
.rp-apis-how__steps::before {
  content: ""; position: absolute; left: 28px; right: 28px; top: 28px;
  border-top: 2px dashed #D0D5E0; z-index: 0;
}
.rp-apis-how__step { position: relative; z-index: 1; }
.rp-apis-how__num {
  width: 56px; height: 56px; border-radius: 14px; background: #fff;
  border: 2px solid #114ef7; color: #114ef7;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; margin-bottom: 28px;
}
.rp-apis-how__pill {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  background: #EEF2FE; border-radius: 999px; padding: 5px 12px; margin-bottom: 14px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #114ef7;
}
.rp-apis-how__pill svg { width: 18px; height: 18px; display: block; }
.rp-apis-how__step-title { font-size: 20px; line-height: 1.25; font-weight: 700; letter-spacing: -0.36px; color: #0e1e36; margin: 0 0 8px; }
.rp-apis-how__step-text { font-size: 15px; line-height: 1.55; color: #4a5878; margin: 0; }
.rp-apis-how__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.rp-apis-how__chips span {
  background: #EEF3FF; color: #114ef7; border-radius: 6px; padding: 5px 12px;
  font-size: 13px; font-weight: 700; font-family: "Mulish", monospace;
}
.rp-apis-how__preview { margin-top: 8px; }
.rp-apis-how__preview img { width: 100%; height: auto; display: block; }

/* ===== CTA BANNER ===== */
.rp-apis-cta { padding: 40px 0 80px; background: #fff; }
.rp-apis-cta__banner {
  max-width: 1200px; margin: 0 auto; padding: 56px;
  background: #114ef7; border-radius: 24px; overflow: clip; position: relative;
  display: flex; align-items: center; gap: 40px;
}
.rp-apis-cta__pin { width: 118px; height: auto; flex: 0 0 auto; }
.rp-apis-cta__text { flex: 1 1 0; min-width: 0; }
.rp-apis-cta__title { font-size: 40px; line-height: 44px; font-weight: 700; color: #fff; margin: 0 0 12px; }
.rp-apis-cta__sub { font-size: 18px; line-height: 26px; color: rgba(255,255,255,.85); margin: 0; max-width: 480px; }
.rp-apis-cta__action { flex: 0 0 auto; }
.rp-apis-cta__btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 56px; padding: 0 32px; border-radius: 8px; background: #fff; color: #021143;
  font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.rp-apis-cta__btn:hover { background: #f0f4fe; color: #021143; }
/* Redesigned CTA (SMBs .rp-cm-cta icon-bar) — keep the RP pin's aspect (enterprise.css
   forces a 64x64 square on .rp-ent-cta__icon). */
.rp-apis-cmcta .rp-ent-cta__icon { width: auto; height: 64px; }

/* ===== FAQ ===== */
.rp-apis-faq { padding: 16px 0 88px; background: #fff; }
.rp-apis-faq__title { font-size: 35.2px; line-height: 51.2px; font-weight: 700; color: #2A2A2A; margin: 40px 0 8px; }
.rp-apis-faq__lead { font-size: 16px; line-height: 24px; font-weight: 500; color: #3f3f3f; margin: 0 0 24px; }
.rp-apis-faq__list { display: flex; flex-direction: column; gap: 8px; }
.rp-apis-faq__item { background: #f0f4fe; border-radius: 16px; padding: 0 24px; }
/* No focus/selection outline on the FAQ accordion (Mohamed 2026-07-12). */
.rp-apis-faq__item, .rp-apis-faq__q, .rp-apis-faq__q:focus, .rp-apis-faq__q:focus-visible { outline: none !important; }
.rp-apis-faq__q {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: 32px; padding: 24px 0; font-size: 20px; line-height: 28px; font-weight: 600; color: #000;
}
.rp-apis-faq__q::-webkit-details-marker { display: none; }
.rp-apis-faq__q::after {
  content: ""; flex: 0 0 auto; width: 14px; height: 14px;
  border-right: 2px solid #021143; border-bottom: 2px solid #021143;
  transform: rotate(45deg); transition: transform .2s ease; margin-top: -4px;
}
.rp-apis-faq__item[open] .rp-apis-faq__q::after { transform: rotate(-135deg); margin-top: 4px; }
.rp-apis-faq__a { font-size: 16px; line-height: 24px; color: #545454; padding: 0 0 24px; max-width: 920px; }

/* ===== RESPONSIVE ===== */
@media (max-width: 991px) {
  /* Match cor: stack but keep content LEFT-aligned on tablet/mobile (cor stays align:start). */
  .rp-apis-hero__inner { flex-direction: column; text-align: left; padding-top: 48px; }
  .rp-apis-hero__text { flex: 1 1 auto; max-width: 100%; }
  .rp-apis-hero__pills, .rp-apis-hero__ctas { justify-content: flex-start; }
  /* Column layout here → flex-basis is the media HEIGHT, so a fixed 640px basis makes a
     huge tall box. Use auto so the media hugs the image. */
  .rp-apis-hero__media { flex: 0 1 auto; justify-content: flex-start; }
  html body .rp-apis-hero .rp-apis-hero__title { font-size: 36px !important; line-height: 53px !important; }
  .rp-apis-pain__grid { grid-template-columns: 1fr; }
  .rp-apis-benefit, .rp-apis-benefit--text-right { flex-direction: column; text-align: left; }
  .rp-apis-benefit__text { max-width: 100%; }
  .rp-apis-how__steps { grid-template-columns: 1fr; gap: 32px; } /* Adil QA: 32px between stacked step cards on mobile (was 24px) */
  .rp-apis-how__steps::before { display: none; }
  /* Adil QA: pain-points text 16px on mobile (was 18px). figma-fixes-b.css sets 18px!important
     UNCONDITIONALLY on .rp-apis-pain__text (0-1-0), so beat it with 0-2-0 + !important, mobile-scoped. */
  .rp-apis-pain .rp-apis-pain__text { font-size: 16px !important; }
  .rp-apis-pain__title, .rp-apis-how__title { font-size: 34px; line-height: 42px; }
  .rp-apis-benefits__intro-title, .rp-apis-benefit__title, .rp-apis-cta__title, .rp-apis-faq__title { font-size: 30px; line-height: 38px; }
  .rp-apis-cta__banner { flex-direction: column; text-align: center; padding: 40px 24px; }
  .rp-apis-cta__sub { max-width: 100%; }
}
@media (max-width: 600px) {
  html body .rp-apis-hero .rp-apis-hero__title { font-size: 32px !important; line-height: 40px !important; }
  /* Adil QA: keep the 3 benefit stats HORIZONTAL on mobile (they fit — 3×~107px at 342px). */
  .rp-apis-benefit__stats { flex-direction: row; gap: 8px; }
}