/* African theme overrides: earthy palette, warm accents, subtle pattern */
:root {
  --color-green-deep: #264d1a; /* darker forest green */
  --color-green-mid: #5a7a34;
  --color-green-light: #8fb34a;
  --color-gold-jubilee: #e29b2f; /* warm ochre */
  --color-gold-light: #f3c46b;
  --color-cream: #fff7ee;
  --color-text-primary: #0f1720; /* near-black with warmth */
  --color-text-muted: #596066;
}

/* Decorative accent: woven texture overlay for hero areas */
.african-pattern {
  background-image:
    radial-gradient(
      circle at 10% 10%,
      rgba(0, 0, 0, 0.03) 0.5px,
      transparent 0.5px
    ),
    linear-gradient(135deg, rgba(226, 155, 47, 0.03) 1px, transparent 1px);
  background-size:
    24px 24px,
    48px 48px;
}

/* Accent utility: apply subtle border of terracotta for feature cards */
.accent-terra {
  box-shadow: 0 2px 12px rgba(179, 80, 43, 0.06);
  border-top: 3px solid rgba(179, 80, 43, 0.12);
}

/* Optional font suggestion: enable a display heading with more personality */
.font-heading-african {
  font-family: "Playfair Display", var(--font-serif);
}

/* Timeline photo strip: mobile-friendly horizontal scroll with snap */
.timeline-photo-strip__wrap {
  position: relative;
}
.timeline-photo-strip {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.lightbox {
  display: none;
}
.lightbox:not(.hidden) {
  display: flex;
}
.lightbox__content {
  max-height: 90vh;
}
.lightbox__img {
  max-height: 80vh;
  max-width: 100%;
}
.lightbox__caption {
  color: #fff;
}
.lightbox__close,
.lightbox__prev,
.lightbox__next {
  background: rgba(0, 0, 0, 0.4);
  border: 0;
  padding: 6px 10px;
  border-radius: 6px;
}
.timeline-photo-strip__item {
  flex: 0 0 auto;
  width: min(80vw, 280px);
  scroll-snap-align: center;
}
.timeline-photo-strip__item .js-open-gallery,
.timeline-photo-strip__item button {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  padding: 0;
  text-align: left;
  line-height: 0;
}
.timeline-photo-strip__item .js-open-gallery img,
.timeline-photo-strip__item button img,
.timeline-photo-strip__item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Single-image cards: let the image determine height (avoid forcing 100% height)
   Note: previous selector used direct child which didn't match the actual markup.
   Use a descendant selector so the rule applies where the image wrapper is nested. */
.timeline__item .mt-2 > .js-open-gallery,
.timeline__item .mt-2 > button.js-open-gallery {
  display: block;
  width: 100%;
  height: auto !important;
  padding: 0;
  line-height: 0;
}

/* Multi-image strip: ensure buttons fill the item height */
.timeline-photo-strip__item > .js-open-gallery,
.timeline-photo-strip__item > button.js-open-gallery {
  height: 100% !important;
}

/* Ensure single-image wrapper images are full-width and auto-height */
.timeline__item .mt-2 > .js-open-gallery img,
.timeline__item .mt-2 > button.js-open-gallery img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover;
}

/* Prev/next controls — visible on larger screens, hidden visually for screen readers on mobile */
.timeline-photo-strip__prev,
.timeline-photo-strip__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.06);
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  display: none; /* shown on desktop */
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
}
.timeline-photo-strip__prev {
  left: 8px;
}
.timeline-photo-strip__next {
  right: 8px;
}

@media (min-width: 768px) {
  .timeline-photo-strip__prev,
  .timeline-photo-strip__next {
    display: inline-flex;
  }
}

/* Improve accessible focus for controls */
.timeline-photo-strip__prev:focus,
.timeline-photo-strip__next:focus {
  outline: 2px solid var(--color-gold-jubilee);
}

/* Hide native scrollbar visually but keep it usable */
.timeline-photo-strip::-webkit-scrollbar {
  height: 8px;
}
.timeline-photo-strip::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 9999px;
}