/* Custom site CSS — OMPOI overrides.
   This file is served AFTER Framer component styles.
   Updated: Sixth Pass Update 3 — March 2026
*/

/* ============================================================
   1. HIDE PARTNERS SECTION (Section Logos / "Who We Work With")
   ============================================================ */
[data-framer-name="Section Logos"] {
  display: none !important;
}

/* ============================================================
   2. NAV LOGO — superseded by rule 15 below (standalone selectors).
   Kept only for any alt-text-based img fallback.
   ============================================================ */
[data-framer-name="Nav"] [data-framer-name="Logo"],
[data-framer-name="Nav"] a[data-framer-name="Logo"] {
  width: 160px !important;
  min-width: 160px !important;
}
[data-framer-name="Nav"] img[alt="Brand logo"],
[data-framer-name="Nav"] img[alt*="logo"],
[data-framer-name="Nav"] img[alt*="Logo"] {
  width: 160px !important;
  height: auto !important;
  max-height: 42px !important;
}

/* ============================================================
   3. LOCATION / NETWORK SECTION — kept off
   ============================================================ */
/* [data-framer-name="Section Network"] { display: none !important; } */

/* ============================================================
   4. GENERAL TYPOGRAPHY IMPROVEMENTS
   ============================================================ */
[data-framer-name="Nav"] [data-framer-name="OMPOI"],
[data-framer-name="Nav"] .framer-f971jm {
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
}

/* ============================================================
   5. TICKER / MARQUEE — Traders, Processors, Exporters
   Make brand logos bigger and ensure smooth left-scroll animation.
   The He (marquee) component uses direction="left".
   ============================================================ */

/* Increase the size of all brand logo tiles in the marquee */
[data-framer-name="Brand Logo"] {
  width: 160px !important;
  height: 50px !important;
  min-width: 160px !important;
}
/* Ensure the marquee container shows overflow */
.framer-clh8kp-container {
  overflow: visible !important;
}
/* Speed up the marquee scroll — override the ticker gap + speed */
.framer-clh8kp-container > div {
  animation-duration: 20s !important;
}

/* ============================================================
   6. BUSINESS IMPACT CARDS — Feature card redesign
   The Award Badge component (framer-wTiAE) renders:
     - An icon/logo (top)
     - Heading (QJLS0Xh_h)
     - Description pill (yi2jUDZRS)
   We inject additional styles to make them look like feature cards.
   Actual description + link text is injected via js/custom/cards-inject.js
   ============================================================ */

/* Awards Grid — equal-height cards.
   Framer hard-codes pixel heights on each wrapper div and the inner Desktop card.
   Override all direct children + their first child to auto, then use
   align-items:stretch so the grid row sets the common height. */
[data-framer-name="Awards Grid"] {
  align-items: stretch !important;
}
[data-framer-name="Awards Grid"] > div {
  height: auto !important;
  align-self: stretch !important;
}
[data-framer-name="Awards Grid"] > div > [data-framer-name="Desktop"] {
  height: 100% !important;
}

/* Card container baseline — must be flex column + full height so desc can grow */
[data-framer-name="Awards Grid"] [data-framer-name="Desktop"],
[data-framer-name="Awards Grid"] [data-framer-name="Award Badge"],
.framer-wTiAE {
  padding: 28px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  background: #fff !important;
  border-radius: 12px !important;
  position: relative !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

/* The badge pill */
.ompoi-badge-pill {
  display: inline-block;
  background: #e8f5ee;
  color: #1a6b3c;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  width: fit-content;
  margin-top: 4px;
}

/* Description — flex:1 so it expands to fill the card,
   pushing the link to the bottom regardless of line count */
.ompoi-card-desc {
  font-size: 14px;
  line-height: 1.6;
  color: #555;
  margin-top: 8px;
  flex: 1 1 auto !important;
}

/* Link always pinned to the bottom */
.ompoi-card-link {
  font-size: 14px;
  font-weight: 600;
  color: #1a6b3c;
  text-decoration: none;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid #eee;
  display: block;
  flex-shrink: 0 !important;
}
.ompoi-card-link:hover {
  text-decoration: underline;
}

/* ============================================================
   7. ABOUT PAGE — Leadership section photo dimensions
   Sixth pass update 1: 4-column grid (matches original Framer layout),
   slightly taller aspect ratio, reduced section bottom padding
   ============================================================ */

/* Restore 4-column grid + auto row height so added rows expand naturally.
   Also target by class framer-1jl37be (the Framer-generated grid class). */
[data-framer-name="Team Member Grid"],
.framer-1jl37be {
  grid-template-columns: repeat(4, minmax(50px, 1fr)) !important;
  grid-template-rows: auto !important;
  grid-auto-rows: auto !important;
}

/* Reduce bottom padding on the Section Team container */
.framer-tyb86e {
  padding-bottom: 48px !important;
}

/* Team photo container — enforce slightly-taller aspect ratio */
.framer-hwmqq5 {
  height: auto !important;
  aspect-ratio: 5 / 6 !important;
  overflow: hidden !important;
}
.framer-4qkq89 {
  height: auto !important;
  aspect-ratio: 5 / 6 !important;
}
/* Ensure the photo image fills the container */
.framer-hwmqq5 img,
.framer-4qkq89 img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
}

/* ============================================================
   8. SERVICES PAGE — Replace "What OMPOI Enables" / Service Card Wrapper
   The Framer "Service Card Wrapper" and "Section Values" are hidden by
   services-inject.js, which injects 3 correct OMPOI service cards instead.
   These CSS rules provide a safety-net hide in case JS hasn't run yet.
   ============================================================ */

/* Framer "Section Values" wraps the Service Header + Service Card Wrapper */
/* The JS hides these at runtime; this is a fallback for slow connections */
/* [data-framer-name="Section Values"] { display: none !important; } */
/* NOTE: Intentionally left commented. JS handles the hide after render. */

/* Ensure our injected section appears above Framer's z-index stacking */
#ompoi-services-section {
  position: relative;
  z-index: 2;
}

/* ============================================================
   9. FOOTER LOGO — Use Framer's original 212×64 dimensions.
   Sixth pass update 2: white background rectangles removed from
   the SVG source file directly. Framer CSS already sets 212×64.
   ============================================================ */
[data-framer-name="Footer Logo"] {
  width: 212px !important;
  height: 64px !important;
  overflow: hidden !important;
  background: transparent !important;
}
[data-framer-name="Footer Logo"] img {
  width: 212px !important;
  height: 64px !important;
  background: transparent !important;
  display: block !important;
}

/* ============================================================
   10. PRICING/PROJECTS FRAMER HERO — Remove silo background image,
   replace with OMPOI brand green. Targets framer-17k4dls (projects
   page Main wrapper, projects-specific CSS class).
   ============================================================ */

/* Hide the background image img injected by Framer into the hero header */
.framer-17k4dls header img,
.framer-17k4dls > main > header img[src*="0qowlyqvkt3f7lbxvuigvicozwa"] {
  display: none !important;
}

/* Remove the dark overlay div (.framer-1f583hq) that shows as gray
   when the silo image is hidden — replace it with OMPOI green gradient */
.framer-1f583hq {
  background: linear-gradient(135deg, #0a3d1f 0%, #1a6b3c 60%, #236a42 100%) !important;
  background-image: linear-gradient(135deg, #0a3d1f 0%, #1a6b3c 60%, #236a42 100%) !important;
}

/* Replace hero header background with OMPOI brand green gradient */
.framer-17k4dls header {
  background-color: #0a3d1f !important;
  background-image: linear-gradient(135deg, #0a3d1f 0%, #1a6b3c 60%, #236a42 100%) !important;
}

/* Ensure hero title text is white on the new background */
.framer-17k4dls header h1,
.framer-17k4dls header p,
.framer-17k4dls header [class*="framer-"] {
  color: #ffffff !important;
}
/* Restore CTA button text colour — the "Get Started" button has a white/light
   background so its label must NOT be forced white (it would be invisible).
   Force OMPOI dark-green on all button/anchor text inside the hero. */
.framer-17k4dls header a[class*="framer-"],
.framer-17k4dls header button[class*="framer-"],
.framer-17k4dls header a[class*="framer-"] [class*="framer-"],
.framer-17k4dls header button[class*="framer-"] [class*="framer-"] {
  color: #0a3d1f !important;
}

/* ============================================================
   16. SERVICES — "Included list" bullet points.
   The Framer Included list strips list-style; add pseudo-element
   bullet markers that match the OMPOI green brand colour.
   ============================================================ */
[data-framer-name="Included list"] > div,
[data-framer-name="Included list"] > p {
  position: relative !important;
  padding-left: 24px !important;
}
/* Match description text: 18px Inter, -0.4px, lh 27px
   Text lives in: [Included list] > div.container > div (direct text div, confirmed by DOM inspection) */
[data-framer-name="Included list"] > div > div,
[data-framer-name="Included list"] > div p,
[data-framer-name="Included list"] > div span,
[data-framer-name="Included list"] > p {
  font-family: "Inter", "Inter Placeholder", sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 27px !important;
  letter-spacing: -0.4px !important;
  color: var(--token-dd509aef-2116-401a-bbb4-3f3d449e49db, #000000) !important;
}
[data-framer-name="Included list"] > div::before,
[data-framer-name="Included list"] > p::before {
  content: '•' !important;
  position: absolute !important;
  left: 6px !important;
  top: 0 !important;
  color: #1a6b3c !important;
  font-size: 18px !important;
  line-height: 27px !important;
}

/* ============================================================
   11. PRICING PAGE NAV — white text on dark-green hero is correct.
   Framer's inline #fff is fine — no override needed.
   ============================================================ */

/* ============================================================
   12. PRICING PAGE — Hide Framer "Section Projects" (case-study cards).
   Sixth Pass Update 2: this section is Biogax project CMS content
   that should not appear on the OMPOI pricing page.
   ============================================================ */
[data-framer-name="Section Projects"] {
  display: none !important;
}

/* ============================================================
   13. FOOTER LOGO — transparent background. Sixth Pass Update 2/3.
   ============================================================ */
[data-framer-name="Footer Logo"],
[data-framer-name="Footer Logo"] img {
  background: transparent !important;
  background-color: transparent !important;
}
[data-framer-name="Footer Logo"] {
  overflow: hidden !important;
}

/* ============================================================
   14. PRICING — Hide "Section More Projects" (Updates list).
   Sixth Pass Update 3: the list of project updates with View Details
   links is Biogax CMS content; not relevant on pricing page.
   ============================================================ */
[data-framer-name="Section More Projects"],
.framer-18a3dll {
  display: none !important;
}

/* ============================================================
   17. SERVICES — Section Testimonial hidden via services-inject.js JS only
   (not here) so index page testimonials remain visible.
   ============================================================ */

/* ============================================================
   18. BUSINESS IMPACT CARDS — Fix heading overflow.
   Framer applies framer-styles-preset-1l5n1t3 (50px, white-space:pre)
   globally to H2 elements, causing card titles to overflow.
   Inside Section Awards, reduce size and allow wrapping.
   ============================================================ */
[data-framer-name="Section Awards"] h1,
[data-framer-name="Section Awards"] h2,
[data-framer-name="Section Awards"] h3 {
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  font-size: 28px !important;
  line-height: 1.25 !important;
  letter-spacing: -0.4px !important;
}

/* ============================================================
   15. NAV LOGO — Consistent size across ALL pages.
   .framer-1rgz9yb is the logo link/container (all pages).
   .framer-1espn3v is the logo img wrapper (all pages).
   afwxquk9mmdnmdyyze79tcthdle is the ompoi-logo.svg hash.
   Previous rules used .framer-T0UxF which is page-specific —
   these standalone rules override on every page equally.
   ============================================================ */

/* Container — expand width and height, remove overflow clip */
.framer-1rgz9yb {
  width: 160px !important;
  height: 42px !important;
  min-width: 160px !important;
  overflow: visible !important;
}

/* Logo image wrapper */
.framer-1espn3v {
  width: 160px !important;
  height: 42px !important;
}

/* Logo image itself — by src hash (most reliable, page-independent) */
img[src*="afwxquk9mmdnmdyyze79tcthdle"] {
  width: 160px !important;
  height: auto !important;
  max-height: 42px !important;
  object-fit: contain !important;
}

/* Keep earlier nav-scoped rules as belt-and-suspenders */
[data-framer-name="Nav"] img[src*="afwxquk9mmdnmdyyze79tcthdle"],
[data-framer-name="Transparent - Desktop"] img[src*="afwxquk9mmdnmdyyze79tcthdle"] {
  width: 160px !important;
  height: auto !important;
  max-height: 42px !important;
}

/* ============================================================
   16. MOBILE OPTIMISATION — max-width: 809px
   Framer's own mobile CSS is correct for all layout sections.
   These rules only fix conflicts introduced by our !important
   overrides above that inadvertently affect mobile.
   ============================================================ */
@media (max-width: 809px) {

  /* -- Nav logo: shrink to fit mobile header -- */
  .framer-1rgz9yb {
    width: 120px !important;
    height: 32px !important;
    min-width: 0 !important;
  }
  .framer-1espn3v {
    width: 120px !important;
    height: 32px !important;
  }
  img[src*="afwxquk9mmdnmdyyze79tcthdle"] {
    width: 120px !important;
    max-height: 32px !important;
  }
  [data-framer-name="Nav"] img[src*="afwxquk9mmdnmdyyze79tcthdle"],
  [data-framer-name="Transparent - Desktop"] img[src*="afwxquk9mmdnmdyyze79tcthdle"] {
    width: 120px !important;
    max-height: 32px !important;
  }

  /* -- About team grid: restore Framer's single-column mobile layout --
     about-inject.js sets grid-template-columns: 0.10fr 1fr 1fr 1fr !important
     which would force 4 cols on mobile. This overrides it back.          */
  [data-framer-name="Team Member Grid"],
  .framer-1jl37be {
    grid-template-columns: repeat(1, minmax(50px, 1fr)) !important;
  }
  /* Hide the desktop spacer column on mobile */
  [data-ompoi-spacer="1"] {
    display: none !important;
  }

  /* -- Blog / Insights cards: ensure cards stack to single column -- */
  .ompoi-blog-card {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* -- Ensure injected blog cards don't overflow on mobile -- */
  [data-ompoi-injected="1"],
  [data-ompoi-media="1"] {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* -- Services page images: prevent overflow -- */
  [data-framer-name="Section Services"] img,
  [data-framer-name="Section Features"] img {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* ============================================================
   17. TABLET OPTIMISATION — 810px to 1199px
   ============================================================ */
@media (max-width: 1199px) and (min-width: 810px) {

  /* Nav logo: slight reduction for tablet */
  .framer-1rgz9yb {
    width: 140px !important;
  }
  .framer-1espn3v {
    width: 140px !important;
  }
  img[src*="afwxquk9mmdnmdyyze79tcthdle"] {
    width: 140px !important;
  }

  /* About team grid: 2 columns on tablet */
  [data-framer-name="Team Member Grid"],
  .framer-1jl37be {
    grid-template-columns: repeat(2, minmax(50px, 1fr)) !important;
  }
}