/* ==========================================================================
   Katapult Africa (/africa/) — page styles
   --------------------------------------------------------------------------
   Sits on the KIP foundation: /colors_and_type.css + /styles.css.
   Reuses the kip-* component classes; this file only adds Africa-specific
   pieces (logo lockup, hero actions, apply band, team contacts) and re-skins
   the dark chrome from navy to deep coral by overriding --k-navy.
   ========================================================================== */

:root {
  --kip-accent: var(--k-coral);
  --kip-accent-deep: #A23F35;
  /* Re-skin the dark chrome from navy to a deep coral across this page.
     The kip-* components read --k-navy for nav/hero/footer/portrait surfaces. */
  --k-navy: #5E251F;
}

/* Nav surface (styles.css hardcodes a navy rgba) → deep coral */
.kip-nav { background: rgba(94, 37, 31, 0.94); }

/* Hero italic accent word — lift to a light coral so it reads on deep coral */
.kip-hero--navy h1 em { color: #F4B0A6; }

/* Team portraits: coral-toned duotone (the navy gradient is hardcoded) */
.kip-portrait::after {
  background: linear-gradient(180deg, rgba(94,37,31,0.10) 0%, rgba(94,37,31,0.55) 100%);
}

/* Smooth in-page anchor scrolling, offset for the sticky nav */
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 84px; }

/* -------------------------------------------------------------------------
   Logo lockup (replaces the kip-wordmark mask)
   ------------------------------------------------------------------------- */
.kaf-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.kaf-logo img {
  display: block;
  height: 44px;
  width: auto;
  /* Force the lockup to pure white regardless of the SVG's internal fills */
  filter: brightness(0) invert(1);
}
.kip-nav__brand.kaf-logo img { height: 44px; }

@media (max-width: 520px) {
  .kip-nav__brand.kaf-logo img { height: 36px; }
}

/* A small "part of KIP" tag sitting beside the nav links */
.kaf-nav__back {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.kaf-nav__back:hover { color: var(--k-white); }
@media (max-width: 720px) { .kaf-nav__back { display: none; } }

/* -------------------------------------------------------------------------
   Hero actions — primary Apply + ghost
   ------------------------------------------------------------------------- */
.kaf-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-10);
}
.kaf-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-weight: var(--fw-bold);
  font-size: 1rem;
  letter-spacing: -0.005em;
  text-decoration: none;
  border-radius: var(--radius-pill);
  padding: 0.95rem 1.65rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.kaf-btn svg { flex: none; }
.kaf-btn--primary { background: var(--kip-accent); color: var(--k-white); }
.kaf-btn--primary:hover { background: var(--kip-accent-deep); }
.kaf-btn--primary:active { transform: translateY(1px); }

.kaf-btn--ghost {
  background: transparent;
  color: var(--k-white);
  border-color: rgba(255,255,255,0.35);
}
.kaf-btn--ghost:hover { border-color: var(--k-white); }
.kaf-btn--ghost:active { transform: translateY(1px); }

/* Hero mark watermark (currently unused — symbol left in markup for future) */
.kaf-hero__mark {
  position: absolute;
  right: -6%;
  top: 50%;
  transform: translateY(-50%);
  width: min(46vw, 560px);
  height: auto;
  z-index: 1;
  color: rgba(255,255,255,0.06);
  pointer-events: none;
}

/* -------------------------------------------------------------------------
   Apply band — the conversion moment
   ------------------------------------------------------------------------- */
.kaf-apply {
  background: var(--kip-accent);
  color: var(--k-white);
  position: relative;
  overflow: hidden;
}
.kaf-apply__mark {
  position: absolute;
  left: auto;
  right: -3%;
  top: 50%;
  transform: translateY(-50%);
  width: min(28vw, 320px);
  height: auto;
  color: rgba(255,255,255,0.10);
  z-index: 0;
  pointer-events: none;
}
.kaf-apply__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
  align-items: end;
  padding-block: clamp(4rem, 9vw, 7rem);
}
@media (min-width: 880px) {
  .kaf-apply__inner {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 6vw, 5rem);
  }
}
.kaf-apply__eyebrow {
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  margin: 0 0 var(--sp-5);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
}
.kaf-apply__eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.kaf-apply h2 {
  margin: 0;
  font-weight: var(--fw-bold);
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--k-white);
  text-wrap: balance;
}
.kaf-apply h2 em { font-style: italic; font-weight: var(--fw-light); color: rgba(255,255,255,0.78); }
.kaf-apply__copy p {
  margin: var(--sp-6) 0 0;
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: 1.5;
  color: rgba(255,255,255,0.9);
  max-width: 46ch;
  text-wrap: pretty;
}
.kaf-apply__action {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: flex-start;
}
@media (min-width: 880px) { .kaf-apply__action { align-items: flex-end; } }
.kaf-apply .kaf-btn--invert {
  background: var(--k-white);
  color: var(--kip-accent-deep);
}
.kaf-apply .kaf-btn--invert:hover { background: var(--k-off-white); }
.kaf-apply__note {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.78);
  margin: 0;
  max-width: 30ch;
}
@media (min-width: 880px) { .kaf-apply__note { text-align: right; } }

/* -------------------------------------------------------------------------
   Why-Africa pillars use kip-what; tweak the body intro lead
   ------------------------------------------------------------------------- */
.kaf-lead { max-width: 60ch; }

/* -------------------------------------------------------------------------
   Team contact links row
   ------------------------------------------------------------------------- */
.kaf-member-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  align-items: center;
}
.kaf-member-links .kip-member__link { align-self: auto; }

/* Footer logo sizing */
.kip-foot__brand .kaf-logo img { height: 64px; margin-bottom: var(--sp-6); }