/* =========================================================================
   RP KADENCE FOOTER — scoped polish (component-system pilot)
   The navy background (#021143) and padding are set via the Kadence Row
   Layout block attributes and rendered by Kadence's generated CSS.
   This file only styles colour / hover / icon tint / layout — never the
   navy background or padding.
   Scope: .rp-kfooter  (outer Kadence Row Layout className)
   ========================================================================= */

/* ---- generic link colour inside the footer ---------------------------- */
.rp-kfooter a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: color 0.15s ease;
}
.rp-kfooter a:hover {
  color: #ffffff;
}

/* ---- column titles ---------------------------------------------------- */
.rp-kfooter .rp-kf-title {
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 16px;
}

/* ---- link lists ------------------------------------------------------- */
.rp-kfooter .rp-kf-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rp-kfooter .rp-kf-links li {
  margin: 0 0 10px;
}
.rp-kfooter .rp-kf-linkcol .rp-footer-link {
  display: block;
  margin: 0 0 10px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;       /* Figma: Mulish 14 (was 15) */
  line-height: 22px;     /* Figma: 22 (was computed 30) */
}
.rp-kfooter .rp-kf-linkcol .rp-footer-link:hover {
  color: #ffffff;
}

/* ---- top band: badges (left) + app download (right) ------------------- */
/* Override Kadence's 50/50 grid → flex space-between so badges take their
   natural width and the app block is pushed to the far end (direction-aware:
   badges left + app right in LTR; badges right + app left in RTL).
   Desktop only — Kadence stacks to single column at ≤1024px; let it. */
@media (min-width: 1025px) {
  .rp-kfooter .kb-row-layout-idrpft .kt-row-column-wrap {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
}

.rp-kfooter .rp-kf-badgerow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.rp-kfooter .rp-kf-badgerow figure { margin: 0; }

/* App column content: stacked column, start-aligned (left LTR / right RTL — flex-start is direction-aware) */
.rp-kfooter .rp-kf-col-apps .kt-inside-inner-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
}
.rp-kfooter .rp-kf-app-label {
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  text-align: start;
}
.rp-kfooter .rp-kf-approw {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-start;
}
.rp-kfooter .rp-kf-approw figure { margin: 0; }

/* ---- bottom row: brand (left) + socials/language (right) -------------- */
.rp-kfooter .kb-row-layout-idrpfb {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.rp-kfooter .rp-kf-brand {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.rp-kfooter .rp-kf-logo { margin: 0; }
.rp-kfooter .rp-kf-copy {
  color: #ffffff;
  font-size: 14px;
}
/* Bottom-right col: flex-end = right in LTR, but .kt-has-2-columns later in this
   file sets justify-content:center — !important wins. RTL: flex-start = right in RTL. */
.rp-kfooter .rp-kf-col-bottomright .kt-inside-inner-col {
  display: flex;
  align-items: center;
  justify-content: flex-end !important;
  flex-wrap: wrap;
  gap: 20px;
}
.dir-rtl .rp-kfooter .rp-kf-col-bottomright .kt-inside-inner-col {
  justify-content: flex-start !important;
}
.rp-kfooter .rp-kf-socials {
  display: flex;
  align-items: center;
  gap: 16px;
}
.rp-kfooter .rp-kf-socials figure { margin: 0; }
/* dark source SVGs → white on navy */
.rp-kfooter .rp-kf-social img {
  filter: brightness(0) invert(1);
  width: 24px;
  height: 24px;
}

/* ---- language selector (kept from original markup) -------------------- */
.rp-kfooter .dropdown-footer-language-text-rtl { color: #ffffff; }
.rp-kfooter .dropdown-footer-language-border { border-color: rgba(255, 255, 255, 0.3); }
.rp-kfooter .drop-dir-footer { filter: brightness(0) invert(1); }

/* ---- responsive ------------------------------------------------------- */
/* Tablet (768–1024px): keep bottom row (logo + social/language) on one horizontal line.
   Kadence stacks to single column at ≤1024px; this overrides just the bottom row.
   Top row stacking on tablet is intentional (its flex override stays at min-width:1025px). */
@media (min-width: 768px) {
  .rp-kfooter .kb-row-layout-idrpfb .kt-row-column-wrap {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
}

@media (max-width: 767px) {
  /* EN mobile: left-align social/language block */
  .rp-kfooter .rp-kf-col-bottomright .kt-inside-inner-col { justify-content: flex-start !important; }
  /* AR mobile: Kadence stacked grid doesn't inherit direction:rtl — container
     resolves as LTR. flex-end = physical right in LTR. */
  .dir-rtl .rp-kfooter .rp-kf-col-bottomright .kt-inside-inner-col {
    justify-content: flex-end !important;
  }
  .rp-kfooter .rp-kf-brand { justify-content: flex-start; }
}

body.rp-body .rp-kfooter .rp-kf-bottom-right { align-items: center !important; }

/* Paid LP bottom row: social/language block alignment.
   kt-inside-inner-col is flex-direction:column — horizontal = align-self (cross axis).
   LTR column: flex-start=LEFT. RTL column: flex-end=LEFT (social col is on left in RTL row). */
body.rp-body .rp-kfooter .rp-kf-bottom-right {
  align-self: flex-start !important; /* EN: left */
}
body.rp-body.dir-rtl .rp-kfooter .rp-kf-bottom-right {
  align-self: flex-end !important; /* AR: left in RTL column (social col sits on left in RTL row) */
}
/* AR mobile: override kt-mobile-layout-row — stack columns so logo is on top,
   social/language drops below; align social block to the right (flex-start in RTL = physical right) */
@media (max-width: 767px) {
  body.rp-body.dir-rtl .rp-kfooter .kb-row-layout-idrpfb .kt-row-column-wrap {
    flex-direction: column !important;
  }
  body.rp-body.dir-rtl .rp-kfooter .rp-kf-bottom-right {
    align-self: flex-start !important; /* RTL column: flex-start = physical RIGHT */
  }
}

/* 2026-07-22: hide About Us / من نحن footer link sitewide (EN + AR, all pages).
   AR link has no trailing slash (/ar/about) — use href$= (ends-with) to catch both. */
.rp-kfooter li:has(a[href$="/about"]),
.rp-kfooter li:has(a[href$="/about/"]) {
  display: none !important;
}

/* QA: footer language dropdown options rendered white (invisible on the light dropdown panel)
   -> RemotePass blue so the Arabic/English options are readable. */
.dropdown-footer-language-links { color: #114EF7 !important; opacity: 1 !important; }
.dropdown-footer-language-links:hover { color: #0d3fd0 !important; }

/* Footer logo white on the navy footer. */
.rp-kfooter .rp-kf-logo img { filter: brightness(0) invert(1); }
/* Language switcher inline with the social links. */
.rp-kfooter .rp-kf-bottom-right { display: flex; align-items: center; gap: 16px; }

/* Footer 2-column rows: vertically center column content so logo/copyright and
   social/language sit on one horizontal line. */
.rp-kfooter .kt-has-2-columns .kt-inside-inner-col { justify-content: center; }
.rp-kfooter .rp-kf-brand { align-items: center; }
.rp-kfooter .rp-kf-bottom-right { align-items: center; }
.rp-kfooter .kt-has-2-columns.kt-tab-layout-row { align-items: center; }
.rp-kfooter .rp-kf-bottom-right .dropdown-footer-language-container { margin: 0; }

/* Tighten the copyright line spacing. */
.rp-kfooter .rp-kf-copy { margin-block-start: 0.2em; }

/* Right-align the social + language block in the footer bottom row. */
.rp-kfooter .rp-kf-bottom-right { align-self: flex-end; }

/* Footer badge row: middle (G2 Leader) badge larger — 88px (2026-07-23, EN + AR) */
.rp-kf-badgerow .wp-block-image img[src*="g2-summer2026-leader"] {
  width: 88px !important;
  height: auto !important;
}