/* ==========================================================================
   Kesho Mpya Organization — homepage
   --------------------------------------------------------------------------
   The markup keeps the inline styles that came from the Claude Design source,
   so the desktop layout is defined there. This file adds:
     1. base/document styles (from the design's <helmet>)
     2. hover states (the design's `style-hover` attributes)
     3. components the static site needs (photos, mobile menu, skip link)
     4. the responsive layer — attribute selectors + !important, because they
        have to beat inline styles.
   ========================================================================== */

/* --------------------------------------------------------------- 1. base */

body {
  margin: 0;
  background: #FAF9F6;
  color: #2B2D2A;
  font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
a { color: #1B4332; text-decoration: none; }
a:hover { color: #40916C; }
h1, h2, h3, h4 {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 400;
  margin: 0;
  letter-spacing: -.015em;
}
p { margin: 0; }
strong { font-weight: 700; color: #1B4332; }
img { max-width: 100%; }

/* The English copy carries inline colours on its <strong> tags; the Swahili
   strings in data-sw do not, so on the dark sections they would inherit the
   dark-green default and vanish. Give dark backgrounds a legible default —
   inline colours still win wherever the design set one. */
[style*="background:#1B4332"] strong,
[style*="background:#132E22"] strong { color: #F5C518; }
#top strong,
footer strong { color: #FAF9F6; }
blockquote strong { font-style: normal; }
:focus-visible { outline: 2px solid #40916C; outline-offset: 3px; }
::selection { background: rgba(64, 145, 108, .22); }
html { scroll-behavior: smooth; scroll-padding-top: 120px; }

@keyframes kmMarquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes kmKen { from { transform: scale(1.02) translateY(0); } to { transform: scale(1.12) translateY(-1.5%); } }
@keyframes kmRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-marquee] { animation: none !important; }
  [data-ken] { animation: none !important; }
  [style*="animation:kmRise"] { animation: none !important; }
}

/* ------------------------------------------------------------- 2. hover */

[data-hv="1"]:hover { background: rgba(27, 67, 50, .07) !important; }
[data-hv="2"]:hover { background: #e5b70e !important; }
[data-hv="3"]:hover { background: rgba(237, 228, 211, .14) !important; }
[data-hv="4"]:hover { background: #153728 !important; }
[data-hv="5"]:hover { background: rgba(27, 67, 50, .06) !important; }
[data-hv="6"]:hover { border-color: #40916C !important; background: rgba(64, 145, 108, .05) !important; }
[data-hv="7"]:hover { border-color: #1B4332 !important; }
[data-hv="8"]:hover { background: rgba(43, 45, 42, .08) !important; }

[data-hv] { transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
[data-tab] { transition: background-color .25s ease, border-color .25s ease, color .25s ease; }

/* -------------------------------------------------------- 3. components */

.km-sr,
.km-skip:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.km-skip:focus {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  background: #1B4332;
  color: #FAF9F6;
  font-weight: 600;
  font-size: 15px;
  padding: 12px 20px;
  border-radius: 999px;
}

/* Photographs and the slots waiting for one. */
.km-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.km-photo-slot {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 180px;
  background:
    linear-gradient(135deg, rgba(64, 145, 108, .16), rgba(27, 67, 50, .28)),
    #22513C;
}

.km-photo-slot__mark {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 26px;
  letter-spacing: .1em;
  color: rgba(237, 228, 211, .5);
  border: 1.5px solid rgba(237, 228, 211, .35);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
}

/* Wrappers that only had a height need to stretch their photo child. */
[style*="min-height:420px"],
[style*="height:460px"],
[style*="height:290px"] { display: grid; }

/* Marquee pauses on hover (see app.js) and on keyboard focus within. */
[data-marquee-wrap]:focus-within [data-marquee] { animation-play-state: paused; }

/* Mobile menu button — desktop nav is the default, this appears under 1100px. */
.km-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  border: 1px solid rgba(43, 45, 42, .2);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  color: #1B4332;
}
.km-menu-btn:hover { background: rgba(27, 67, 50, .07); }
.km-menu-btn__bars,
.km-menu-btn__bars::before,
.km-menu-btn__bars::after {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  transition: transform .25s ease, opacity .2s ease;
}
.km-menu-btn__bars { position: relative; }
.km-menu-btn__bars::before,
.km-menu-btn__bars::after { content: ''; position: absolute; left: 0; }
.km-menu-btn__bars::before { top: -6px; }
.km-menu-btn__bars::after { top: 6px; }
.km-menu-btn[aria-expanded="true"] .km-menu-btn__bars { background: transparent; }
.km-menu-btn[aria-expanded="true"] .km-menu-btn__bars::before { transform: translateY(6px) rotate(45deg); }
.km-menu-btn[aria-expanded="true"] .km-menu-btn__bars::after { transform: translateY(-6px) rotate(-45deg); }

/* Newsletter confirmation line. */
.km-form-msg {
  font-size: 14px;
  color: #F5C518;
  margin: -8px 0 16px !important;
}
.km-form-msg[hidden] { display: none; }

/* -------------------------------------------------------- 4. responsive */

/* ---- below 1100px: collapse the main nav into a dropdown ---- */
@media (max-width: 1100px) {
  .km-menu-btn { display: flex; }

  .km-nav {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 10px 24px 22px !important;
    background: #FAF9F6;
    border-bottom: 1px solid rgba(43, 45, 42, .12);
    box-shadow: 0 18px 30px -18px rgba(19, 46, 34, .35);
  }
  .km-header[data-menu-open] .km-nav { display: flex !important; }
  .km-nav a { font-size: 16px !important; padding: 13px 16px !important; }
}

/* ---- below 1240px: pull the wide fixed type down ---- */
@media (max-width: 1240px) {
  [style*="max-width:1320px"] { padding-left: 28px !important; padding-right: 28px !important; }
  [style*="font-size:84px"] { font-size: clamp(40px, 6.6vw, 84px) !important; }
  [style*="font-size:76px"] { font-size: clamp(46px, 5.4vw, 76px) !important; }
  [style*="font-size:52px"] { font-size: clamp(34px, 4.2vw, 52px) !important; }
  [style*="font-size:50px"] { font-size: clamp(33px, 4.1vw, 50px) !important; }
  [style*="font-size:48px"] { font-size: clamp(32px, 4vw, 48px) !important; }
  [style*="font-size:44px"] { font-size: clamp(30px, 3.7vw, 44px) !important; }
  [style*="font-size:40px"] { font-size: clamp(26px, 3.4vw, 40px) !important; }
  [style*="font-size:36px"] { font-size: clamp(25px, 3vw, 36px) !important; }
  [style*="font-size:34px"] { font-size: clamp(24px, 2.9vw, 34px) !important; }
  [style*="gap:80px"] { gap: clamp(40px, 5vw, 80px) !important; }
  [style*="gap:72px"] { gap: clamp(36px, 4.6vw, 72px) !important; }
  [style*="gap:48px"] { gap: clamp(32px, 3.6vw, 48px) !important; }
}

/* ---- below 980px: two-up and one-up grids, tighter vertical rhythm ---- */
@media (max-width: 980px) {
  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1.05fr .95fr"],
  [style*="grid-template-columns:1fr .85fr"],
  [style*="grid-template-columns:1.15fr .85fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1.35fr 1fr 1fr 1.25fr"] { grid-template-columns: 1fr 1fr !important; }

  [style*="padding:104px 48px"] { padding-top: 68px !important; padding-bottom: 68px !important; }
  [style*="padding:104px 48px 0"] { padding-bottom: 0 !important; }
  [style*="padding:0 48px 104px"] { padding-top: 0 !important; padding-bottom: 68px !important; }
  [style*="padding:96px 48px"] { padding-top: 64px !important; padding-bottom: 64px !important; }
  [style*="padding:88px 48px"] { padding-top: 60px !important; padding-bottom: 60px !important; }
  [style*="padding:88px 48px 44px"] { padding-bottom: 36px !important; }
  [style*="padding:52px 48px"] { padding: 36px 28px !important; }

  /* Impact figures sit in a hairline grid; even out the edge padding. */
  [style*="padding:8px 32px 8px 0"],
  [style*="padding:8px 0 8px 32px"],
  [style*="padding:8px 32px"] { padding: 24px !important; }

  /* Programs: photo above the copy rather than a squeezed column. */
  [style*="min-height:420px"] { min-height: 260px !important; }
  [style*="height:460px"] { height: 300px !important; }
}

/* ---- below 760px: single column everywhere, phone-sized spacing ---- */
@media (max-width: 760px) {
  [style*="max-width:1320px"] { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1.35fr 1fr 1fr 1.25fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:112px 1fr"] { grid-template-columns: 88px 1fr !important; gap: 18px !important; }

  /* Hero: fill the viewport rather than a fixed 820px slab. */
  [style*="height:820px"] { height: auto !important; min-height: min(92vh, 720px) !important; }
  [style*="padding:0 48px 76px"] { padding-top: 120px !important; padding-bottom: 52px !important; }

  [style*="padding:104px 48px"] { padding-top: 56px !important; padding-bottom: 56px !important; }
  [style*="padding:96px 48px"],
  [style*="padding:88px 48px"] { padding-top: 52px !important; padding-bottom: 52px !important; }
  [style*="padding:40px"] { padding: 28px 24px !important; }
  [style*="padding:52px 48px"] { padding: 30px 24px !important; }

  /* Marquee tiles scale to phone width. */
  [data-marquee] [style*="height:290px"] { width: 250px !important; height: 178px !important; }

  /* Program tabs scroll horizontally instead of wrapping into a tall block. */
  [role="tablist"] {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  [role="tablist"]::-webkit-scrollbar { display: none; }
  [role="tablist"] button { white-space: nowrap; flex: none; }

  /* Header row: logo, then the controls. */
  [style*="padding:16px 48px"] { padding: 12px 20px !important; gap: 12px !important; }
  [data-support-bar] { font-size: 12.5px !important; padding: 8px 20px !important; text-align: center; }

  blockquote { text-indent: 0 !important; }
}

/* ---- below 620px: compact the header so logo + controls fit one row ---- */
@media (max-width: 620px) {
  .km-header [style*="max-width:1320px"] { padding-left: 16px !important; padding-right: 16px !important; }
  [style*="padding:16px 48px"] { gap: 8px !important; }
  .km-header [style*="gap:14px"] { gap: 8px !important; }

  /* Monogram and wordmark */
  .km-header [style*="width:44px;height:44px"] { width: 36px !important; height: 36px !important; font-size: 16px !important; }
  .km-header [style*="font-size:23px"] { font-size: 16px !important; letter-spacing: 0 !important; }
  .km-header [style*="letter-spacing:.24em"] { display: none !important; }

  /* Controls */
  .km-menu-btn { width: 40px; height: 40px; }
  .km-header [style*="padding:7px 13px"] { padding: 7px 9px !important; font-size: 11px !important; }
  .km-header [style*="padding:12px 22px"] { padding: 10px 13px !important; font-size: 13px !important; }
}

/* ---- below 460px: smallest phones ---- */
@media (max-width: 460px) {
  [data-support-bar] a { display: none; }
  [style*="font-size:16.5px"] { font-size: 15.5px !important; }
  [style*="padding:17px 34px"] { padding: 15px 26px !important; }
  [style*="grid-template-columns:112px 1fr"] { grid-template-columns: 1fr !important; gap: 6px !important; }
}