/* ===============================
   BASE RESET & GLOBALS
=============================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: #2D2C2B;
  color: #fff;
  overflow-x: hidden;
}

/* ===============================
   HEADER / NAVIGATION
=============================== */
header {
  position: fixed;
  width: 100%;
  z-index: 60;
  transition: all 0.5s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

header.scrolled {
  background-color: rgba(89, 7, 71, 0.95);
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.4);
}

/* Mobile Navigation */
#navMenu a {
  color: #FFD16C;
}

#navMenu a:hover {
  background-color: rgba(45, 44, 43, 0.3);
  color: #fff;
}

/* Donate Button */
.glow-btn {
  box-shadow: 0 0 15px rgba(255, 209, 108, 0.4);
  transition: all 0.3s ease-in-out;
}
.glow-btn:hover {
  box-shadow: 0 0 25px rgba(255, 209, 108, 0.7);
}

/* ===============================
   HERO SECTION
=============================== */
#hero {
  position: relative;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 80px;
  overflow: hidden;
}

.hero-slide-container {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.hero-slide.active {
  opacity: 1;
}

/* Overlay Gradient */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(89, 7, 71, 0.4),
    rgba(45, 44, 43, 0.9)
  );
  z-index: 2;
}

.hero-content {
  position: relative;
  z-index: 3;
  max-width: 850px;
  padding: 0 1rem;
}

/* Hero Text */
.hero-content h1 {
  color: #FFD16C;
  font-size: 3rem;
  line-height: 1.2;
  margin-bottom: 1rem;
  font-weight: 800;
  font-family: 'Playfair Display', serif;
}

.hero-content p {
  color: #f3f3f3;
  font-size: 1.125rem;
  margin-bottom: 2.5rem;
}

/* ===============================
   BUTTONS
=============================== */
.btn-gold {
  background-color: #FFD16C;
  color: #2D2C2B;
  border-radius: 9999px;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-gold:hover {
  background-color: #2D2C2B;
  color: #FFD16C;
}

.btn-outline {
  border: 2px solid #FFD16C;
  color: #FFD16C;
  border-radius: 9999px;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-outline:hover {
  background-color: #FFD16C;
  color: #2D2C2B;
}

/* ===============================
   UTILITIES
=============================== */
a {
  text-decoration: none;
  transition: all 0.3s ease;
}

.hidden {
  display: none;
}


/* Hero Slider animations below */

/* =============================== */
/* HERO SLIDER STYLING */
/* =============================== */

.hero-slide-container {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 2s ease-in-out, transform 10s ease;
}

.hero-slide.active {
  opacity: 1;
  transform: scale(1);
}

/* Text Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOutDown {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(30px);
  }
}

.animate-fadeInUp {
  animation: fadeInUp 1.2s ease forwards;
}

.animate-fadeOutDown {
  animation: fadeOutDown 1s ease forwards;
}

.delay-200 { animation-delay: 0.2s; }
.delay-400 { animation-delay: 0.4s; }



/* About us : Index page */

.fade-in {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease-out forwards;
  }

  @keyframes fadeInUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Tailwind-like clamp for truncation (works in modern browsers) */
  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* .fade-in {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease-out forwards;
  }

  @keyframes fadeInUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  } */

  /* Testimonial */

  @keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-marquee {
  display: flex;
  animation: marquee 30s linear infinite;
  width: max-content;
}

/* Pre-footer */
/* @keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0px); }
}
.animate-float {
  animation: float 6s ease-in-out infinite;
}

@keyframes bounceSoft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.animate-bounce-soft {
  animation: bounceSoft 4s ease-in-out infinite;
}
.animate-bounce-slow {
  animation: bounceSoft 8s ease-in-out infinite;
}
.animate-bounce-delayed {
  animation: bounceSoft 6s ease-in-out infinite 2s;
} */


@keyframes rise {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
.animate-rise { animation: rise 900ms ease-out forwards; }

/* soft bobbing animations for icons */
@keyframes bob {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}
@keyframes bobSlow {
  0% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

.animate-bob { animation: bob 4s ease-in-out infinite; }
.animate-bob-delay { animation: bob 5s ease-in-out 0.6s infinite; }
.animate-bob-slow { animation: bobSlow 6s ease-in-out infinite; }

/* ensure SVGs and CTA are crisp on dark footer */
section[aria-hidden="false"] svg { display: block; }
section[aria-hidden="false"] a { z-index: 30; }

/* responsive tweaks */
@media (max-width: 768px) {
  .animate-bob { left: 12px; top: 8px; width: 36px; height: 36px; }
  .animate-bob-delay { right: 8px; top: 16px; width: 40px; height: 40px; }
}


/* main Header */

 #mainHeader {
    background-color: white;
    color: #2D2C2B; /* Dark text */
  }

  /* Adjust logo and menu icon colors */
  #mainHeader img {
    filter: none; /* prevent logo color change */
  }

  #menuToggle svg {
    color: #590747; /* deep purple or your brand color */
  }

  /* Make navigation links dark by default */
  #navMenu {
    background: white !important;
    color: #2D2C2B !important;
  }

  #navMenu a {
    color: #2D2C2B;
  }

  #navMenu a:hover {
    background-color: rgba(89, 7, 71, 0.05);
    color: #590747;
  }

  /* Donate button styling inside white header */
  #navMenu a.bg-\[\#FFD16C\] {
    color: #2D2C2B;
  }
  #navMenu a.bg-\[\#FFD16C\]:hover {
    background: #2D2C2B;
    color: #FFD16C;
  }



  /* Events */
  @keyframes fade-up {
    0% { opacity: 0; transform: translateY(40px); }
    100% { opacity: 1; transform: translateY(0); }
  }
  @keyframes fade-in {
    0% { opacity: 0; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
  }
  @keyframes expand {
    0% { width: 0; opacity: 0; }
    100% { width: 6rem; opacity: 1; }
  }
  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }

  .animate-fade-up { animation: fade-up 0.8s ease-out forwards; }
  .animate-fade-in { animation: fade-in 1s ease-out forwards; }
  .animate-expand { animation: expand 1s ease-out forwards; }
  .animate-float { animation: float 5s ease-in-out infinite; }


  /* About us page */
  @keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes float-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.animate-float { animation: float 4s ease-in-out infinite; }
.animate-float-slow { animation: float-slow 6s ease-in-out infinite; }
.animate-spin-slow { animation: spin 12s linear infinite; }


/* Events Page */
/* offcanvas visible */
  .off-open { transform: translateX(0) !important; }
  .off-overlay-show { opacity: 1 !important; pointer-events: auto !important; }
  /* small dot for event markers */
  .event-dot { width: 8px; height: 8px; border-radius: 9999px; background: #590747; display:inline-block; margin-left:6px; }
  /* calendar day */
  .calendar-day { min-height: 84px; padding: 6px; border-radius: 8px; background: white; }
  .calendar-day.otherMonth { opacity: 0.35; }
  .calendar-event { display:block; background:#FFD16C; color:#2D2C2B; padding:4px 6px; border-radius:6px; font-size:13px; margin-top:6px; cursor:pointer; text-decoration:none; }



  /* Membership Page */
  /* Example theme color */
  :root {
    --theme-color: #590747; /* Replace with your website primary color */
    --theme-hover: #590747;
  }
  .text-theme-color { color: var(--theme-color); }
  .bg-theme-color { background-color: var(--theme-color); }
  .bg-theme-hover { background-color: var(--theme-hover); }

  /* Animations */
   @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }

  .animate-fadeIn { animation: fadeIn 1s ease forwards; }
  .animate-slideUp { animation: slideUp 0.8s ease forwards; }
  .animate-fadeInUp { animation: slideUp 0.8s ease forwards; }
  .delay-150 { animation-delay: 0.15s; }
  .delay-300 { animation-delay: 0.3s; }


  /* African Strip */

  .african-left-strip {
    position: relative;
    padding-left: 2.2rem; /* space so content does not overlap the strip */
}

.african-left-strip::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 14px;              /* strip width */
    height: 100%;
    background-image: url('../img/pattern.jpg');
    background-size: cover;
    background-position: left center;
    background-repeat: repeat-y;
    border-radius: 0 6px 6px 0;
}


.african-bottom-strip {
    position: relative;
    padding-bottom: 2.5rem; /* space so content does not overlap */
}

.african-bottom-strip::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 25px;           /* height of the strip */
    background-image: url('../img/pattern.jpg');
    background-size: 100% auto;
    background-repeat: repeat-x;
    background-position: bottom;
}