/* ==========================================================================
   Brandbuilder Africa — site CSS (Revision 2)
   Paste into Appearance › Customize › Additional CSS.
   Works with Elementor Free (Flexbox Containers). Each rule targets a class
   that is already set on the matching element in the JSON templates
   (Advanced › CSS Classes), so nothing else needs wiring.
   ========================================================================== */

:root {
  --bb-ink: #12191E;
  --bb-navy: #21323C;
  --bb-orange: #DE832D;
  --bb-white: #FFFFFF;
  --bb-mist: #F3F2F0;
  --bb-graphite: #3F464B;
  --bb-silver: #C9CFD2;
}

/* Stop theme styles from overriding the brand (capitalised headings,
   lowercase buttons, coloured links, extra letter-spacing). */
.elementor .elementor-heading-title,
.elementor .elementor-widget-text-editor,
.elementor .elementor-button {
  text-transform: none !important;
}
.elementor .elementor-button {
  letter-spacing: 0 !important;
}
.elementor .elementor-heading-title a {
  font-family: inherit !important;
  font-weight: inherit !important;
  font-size: inherit !important;
  font-style: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  text-transform: none !important;
  color: inherit !important;
  text-decoration: none !important;
}
.elementor .elementor-widget-text-editor a {
  font-family: 'Jost', sans-serif !important;
  font-weight: inherit !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-decoration: none;
}
.elementor .elementor-widget-html:has(#bb-brand-css) {
  display: none !important;
}

body {
  font-family: 'Jost', sans-serif;
  color: var(--bb-graphite);
  background-color: var(--bb-white);
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   1. Speech-bubble frame (from the logo)
   Class: bb-frame            → orange top-left, navy bottom-right + tail
   Add:   bb-frame--light     → white bottom-right + tail (for dark sections)
   Add:   bb-frame--text      → slimmer brackets for quotes and statements
   Put the class on a container. The container gets 24px padding automatically.
   -------------------------------------------------------------------------- */
.bb-frame {
  position: relative !important;
  padding: 24px !important;
  overflow: visible !important;
  margin-bottom: 71px;
}

.bb-frame::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  width: 62% !important;
  height: 70% !important;
  border-top: 14px solid var(--bb-orange);
  border-left: 14px solid var(--bb-orange);
  background: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  border-radius: 0 !important;
  pointer-events: none;
  z-index: 0;
}

/* Bottom-right bracket and tail drawn together. The tail is a filled shape traced
   from the logo, so it ends in the same sharp point (no chip, no flat end). */
.bb-frame::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  right: 0 !important;
  bottom: -70.88px !important;
  left: auto !important;
  top: auto !important;
  width: calc(56% + 104.12px) !important;
  height: calc(46% + 70.88px) !important;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='109.96' height='84.88' viewBox='0 0 109.96 84.88'%3E%3Cpolygon points='0.0,0.0 14.0,0.0 14.0,60.14 102.35,0.0 109.96,0.0 109.96,14.0 104.12,14.0 0.0,84.88' fill='%2321323C'/%3E%3C/svg%3E") left bottom / 109.96px 84.88px no-repeat,
    linear-gradient(#21323C, #21323C) right 0 bottom 70.88px / calc(100% - 104.12px) 14px no-repeat,
    linear-gradient(#21323C, #21323C) right 0 top 0 / 14px calc(100% - 70.88px) no-repeat !important;
  pointer-events: none;
  z-index: 0;
}

.bb-frame--light::after {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='109.96' height='84.88' viewBox='0 0 109.96 84.88'%3E%3Cpolygon points='0.0,0.0 14.0,0.0 14.0,60.14 102.35,0.0 109.96,0.0 109.96,14.0 104.12,14.0 0.0,84.88' fill='%23FFFFFF'/%3E%3C/svg%3E") left bottom / 109.96px 84.88px no-repeat,
    linear-gradient(#FFFFFF, #FFFFFF) right 0 bottom 70.88px / calc(100% - 104.12px) 14px no-repeat,
    linear-gradient(#FFFFFF, #FFFFFF) right 0 top 0 / 14px calc(100% - 70.88px) no-repeat !important;
}

.bb-frame--text {
  padding: clamp(36px, 5vw, 72px) !important;
}
.bb-frame--text::before {
  width: 40% !important;
  height: 55% !important;
}
.bb-frame--text::after {
  width: calc(55% + 104.12px) !important;
  height: calc(50% + 70.88px) !important;
}

.bb-frame > .elementor-element,
.bb-frame > .e-con-inner {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   2. Hero box (ink box sitting on the hero photo's bottom-left corner)
   Parent container: bb-hero-media   Box container: bb-bubble
   -------------------------------------------------------------------------- */
.bb-hero-media {
  position: relative !important;
}

.bb-bubble {
  position: absolute !important;
  /* Sits exactly on the photo's bottom-left corner: the frame has 24px padding
     and 71px space below it for the tail, so the photo ends 95px above the bottom. */
  left: 24px;
  bottom: 95px;
  margin: 0 !important;
  width: 290px !important;
  max-width: 290px;
  padding: 26px 28px !important;
  background-color: var(--bb-ink);   /* default; change it in Elementor › Style › Background */
  z-index: 3;
}

/* --------------------------------------------------------------------------
   3. Portrait that pops out of an orange block (Thembe)
   Container: bb-popout (holds one Image widget)
   -------------------------------------------------------------------------- */
.bb-popout {
  height: 540px !important;
  min-height: 0 !important;
  margin-top: 90px !important;
  background-color: var(--bb-orange);   /* default; change it in Elementor › Style › Background */
  justify-content: flex-end !important;
  align-items: center !important;
  overflow: visible !important;
  padding: 0 !important;
}

.bb-popout .elementor-widget-image {
  width: 94% !important;
}

.bb-popout .elementor-widget-image img {
  width: 100% !important;
  height: 630px !important;
  max-width: none !important;
  object-fit: contain;
  object-position: center bottom;
  display: block;
}

/* --------------------------------------------------------------------------
   4. Client logo strips (upload the one-colour PNGs from /assets/logos-mono)
   Container: bb-logos            → 85% opacity (white logos on Ink)
   Add:       bb-logos--grey      → 55% opacity (ink logos on white = dark grey)
   -------------------------------------------------------------------------- */
.bb-logos {
  opacity: 0.85;
}
.bb-logos--grey {
  opacity: 0.55;
}
.bb-logos .elementor-widget-image img {
  height: 52px !important;
  width: auto !important;
  max-width: 150px !important;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   5. Image cards with a gentle zoom on hover
   Container: bb-card
   -------------------------------------------------------------------------- */
.bb-card .elementor-widget-image {
  overflow: hidden;
}
.bb-card .elementor-widget-image a,
.bb-card .elementor-widget-image img {
  display: block;
  width: 100% !important;
}
.bb-card .elementor-widget-image img {
  transition: transform 0.5s ease;
}
.bb-card:hover .elementor-widget-image img {
  transform: scale(1.03);
}

/* --------------------------------------------------------------------------
   6. Text links with an orange arrow
   Text Editor widget: bb-link
   -------------------------------------------------------------------------- */
.bb-link a {
  color: inherit !important;   /* follows the Text Editor widget's Text Color */
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}
.bb-link a::after {
  content: "→";
  color: var(--bb-orange);
}
.e-con > .bb-link {
  flex: 0 0 auto !important;
  width: auto !important;
}
@media (min-width: 1025px) {
  .bb-link a,
  .elementor-button .elementor-button-text {
    white-space: nowrap;
  }
}
.e-con > .elementor-widget-button,
.e-con > .bb-link {
  flex-shrink: 0 !important;
}

/* --------------------------------------------------------------------------
   7. Equal-height grey highlight boxes (About › Our impact)
   Card container: bb-impact-card   Highlight Text Editor: bb-highlight
   -------------------------------------------------------------------------- */
.bb-impact-card {
  display: flex !important;
  flex-direction: column !important;
}
.bb-highlight {
  margin-top: auto !important;
  min-height: 230px;   /* fallback; Brandbuilder Posts sets all boxes to the tallest one */
  box-sizing: border-box;
  background: var(--bb-mist);
  padding: 28px 30px;
}
.bb-highlight p:last-child {
  margin-bottom: 0;
}
.bb-highlight strong {
  font-weight: 500;
  color: var(--bb-ink);
}

/* --------------------------------------------------------------------------
   8. Buttons — square, sentence case, gentle hover
   -------------------------------------------------------------------------- */
.elementor-button {
  border-radius: 0 !important;
  transition: filter 0.2s ease;
}
.elementor-button:hover {
  filter: brightness(1.06);
}

/* --------------------------------------------------------------------------
   9. Small details
   -------------------------------------------------------------------------- */
.e-con .elementor-widget-text-editor p {
  margin: 0 0 1em;
}
.e-con .elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}
.e-con .elementor-widget-text-editor ul,
.e-con .elementor-widget-text-editor li {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.e-con .elementor-widget-text-editor ul {
  margin: 0;
  padding-left: 1.2em;
}
.e-con .elementor-widget-text-editor li {
  margin-bottom: 0.6em;
}
.e-con .elementor-widget-text-editor strong {
  font-weight: 500;
}
.bb-hook p {
  white-space: pre-line;
}
.bb-stats {
  column-gap: 56px !important;
}
.bb-stats > .e-con {
  --width: auto !important;
  width: auto !important;
  flex: 0 0 auto !important;
}
.bb-dark-panel {
  background-color: rgba(18, 25, 30, 0.82);   /* default; change it in Elementor */
}
.bb-countries ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 32px;
}

.bb-footer a {
  color: var(--bb-silver) !important;
  text-decoration: none;
}
.bb-footer a:hover {
  color: var(--bb-white) !important;
}
.bb-footer p {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   10. Tablet and mobile
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* Hero: stack the text above a full-width photo, so the box sits on the
     photo's corner the same way it does on desktop. */
  .e-con:has(> .bb-hero-media) {
    --flex-direction: column !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    row-gap: 56px !important;
  }
  .e-con:has(> .bb-hero-media) > .e-con {
    --width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 767px) {
  .bb-bubble {
    left: 16px;    /* the frame's padding on phones */
    bottom: 87px;  /* 71px tail space + 16px padding */
    width: calc(100% - 72px) !important;
    max-width: 290px;
    padding: 20px 22px !important;
  }
  .bb-frame {
    padding: 16px !important;
    margin-bottom: 71px;
  }
  .bb-frame--text {
    padding: 32px 24px !important;
  }
  .bb-popout {
    height: 420px !important;
    margin-top: 70px !important;
  }
  .bb-popout .elementor-widget-image img {
    height: 490px !important;
  }
  .bb-highlight {
    min-height: 0;
  }
  .bb-logos .elementor-widget-image img {
    height: 40px !important;
  }
}