/* ==========================================================================
   Salam Africa — style.css

   ROLE OF THIS FILE
   --------------------------------------------------------------------------
   This is the base/global stylesheet only. Keep it boring and foundational.
   It should define design tokens, resets, basic typography, and small global
   utilities that are safe everywhere. Structural site chrome such as header,
   fullscreen navigation, footer, breadcrumbs, and grid/layout systems belongs
   in layout.css. Reusable interface components such as CTA bands, cards, chips,
   accordions, buttons, and galleries belongs in components.css.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=Great+Vibes&family=Jost:wght@300;400;500;600&display=swap");

/* ==========================================================================
   1. DESIGN TOKENS / CSS CUSTOM PROPERTIES
   --------------------------------------------------------------------------
   These variables are the source of truth for color, typography, spacing,
   max-widths, easing curves, and global dimensions.
   ========================================================================== */
:root {
  /* Hope palette */
  --brown: #3b2f2f;
  --gold: #c6a46c;
  --gold-deep: #a07840;
  --gold-pale: #f0e4cc;
  --olive: #6b7a4e;
  --forest: #132c08;
  --forest-dark: #051a01;
  --sage: #a7b59a;
  --sage-light: #dce3d3;

  /* Pastel pops — sprinkled like Hope */
  --pastel-pink: #f5d6d6;
  --pastel-yellow: #fff3c4;
  --pastel-mint: #d4ecd4;
  --pastel-peach: #fae3d2;
  --pastel-sage: #dce8d6;
  --pastel-blue: #d6e4f0;

  --bg: #f7f3ed;
  --bg-alt: #ede5da;
  --text: #2b2b2b;
  --muted: #6f6f6f;
  --border: #dcd6cd;
  --white: #ffffff;

  /* Legacy aliases so old CSS still works */
  --black: #3b2f2f;
  --ink: #3b2f2f;
  --ink-70: rgba(59, 47, 47, 0.7);
  --ink-40: rgba(59, 47, 47, 0.4);
  --ink-12: rgba(59, 47, 47, 0.08);
  --accent: #c6a46c;
  --accent-pale: #f0e4cc;
  --accent-mid: rgba(198, 164, 108, 0.18);
  --sage-pale: #dce3d3;
  --sage-dark: #051a01;
  --sage-light: #dce3d3;
  --paper: #f7f3ed;
  --paper-dark: #ede5da;
  --surface: #ffffff;
  --earth: #6b7a4e;
  --earth-pale: #dce3d3;
  --charcoal: #3b2f2f;
  --warm-white: #ffffff;
  --cream: #f7f3ed;
  --parchment: #ede5da;
  --faint: #6f6f6f;
  --section-gap: clamp(5rem, 9vw, 9rem);

  --serif: "Cormorant Garamond", Georgia, serif;
  --script: "Great Vibes", cursive;
  --sans: "Jost", system-ui, sans-serif;

  /* Spacing scale */
  --sp-xs: 0.5rem;
  --sp-sm: 1rem;
  --sp-md: 1.5rem;
  --sp-lg: 2.5rem;
  --sp-xl: 4rem;
  --sp-2xl: 6rem;
  --sp-3xl: 9rem;

  --max-w: 1360px;
  --pad: clamp(1.25rem, 5vw, 3rem);
  --gap: clamp(5rem, 9vw, 9rem);
  --gap-sm: clamp(3rem, 6vw, 5rem);

  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==========================================================================
   2. RESET / ELEMENT NORMALIZATION
   --------------------------------------------------------------------------
   Broad defaults for common elements.
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  color: inherit;
}
ul,
ol {
  list-style: none;
}
address {
  font-style: normal;
}

/* ==========================================================================
   3. BASE TYPOGRAPHY
   --------------------------------------------------------------------------
   Simple defaults for headings and body copy.
   ========================================================================== */
h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.08;
  color: var(--brown);
}
h1 {
  font-size: clamp(3rem, 7vw, 6.5rem);
  letter-spacing: -0.03em;
}
h2 {
  font-size: clamp(2.4rem, 4.5vw, 4.2rem);
  letter-spacing: -0.025em;
}
h3 {
  font-size: clamp(1.7rem, 2.5vw, 2.6rem);
  letter-spacing: -0.015em;
}
h4 {
  font-size: clamp(1.2rem, 1.6vw, 1.5rem);
}
p {
  color: var(--muted);
  line-height: 1.85;
  font-size: 1rem;
}

/* ==========================================================================
   4. EDITORIAL TEXT HELPERS
   --------------------------------------------------------------------------
   Lightweight reusable text treatments.
   ========================================================================== */
.pull-quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.8rem, 3.5vw, 3.2rem);
  line-height: 1.25;
  color: var(--brown);
  letter-spacing: -0.02em;
}
.pull-quote cite {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 1.2rem;
}

/* ==========================================================================
   5. GLOBAL ANIMATION HOOKS
   --------------------------------------------------------------------------
   Reveal effects toggled by JavaScript (IntersectionObserver).
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.85s var(--ease-out),
    transform 0.85s var(--ease-out);
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
.reveal-left {
  opacity: 0;
  transform: translateX(-36px);
  transition:
    opacity 0.9s var(--ease-out),
    transform 0.9s var(--ease-out);
}
.reveal-left.visible {
  opacity: 1;
  transform: none;
}
.reveal-right {
  opacity: 0;
  transform: translateX(36px);
  transition:
    opacity 0.9s var(--ease-out),
    transform 0.9s var(--ease-out);
}
.reveal-right.visible {
  opacity: 1;
  transform: none;
}
.reveal-d1 {
  transition-delay: 0.1s;
}
.reveal-d2 {
  transition-delay: 0.22s;
}
.reveal-d3 {
  transition-delay: 0.36s;
}

/* ==========================================================================
   6. GLOBAL FIXED ACTIONS
   --------------------------------------------------------------------------
   Site-wide floating interactive elements.
   ========================================================================== */
.wa-float {
  position: fixed;
  bottom: 1.8rem;
  right: 1.8rem;
  width: 54px;
  height: 54px;
  background: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 90;
  box-shadow: 0 4px 18px rgba(37, 211, 102, 0.4);
  transition:
    transform 0.3s var(--ease-spring),
    box-shadow 0.3s;
}
.wa-float:hover {
  transform: scale(1.12);
  box-shadow: 0 8px 28px rgba(37, 211, 102, 0.55);
}
.wa-float svg {
  width: 26px;
  height: 26px;
  fill: #fff;
}

/* ==========================================================================
   7. RESPONSIVE UTILITIES
   --------------------------------------------------------------------------
   Global layout overrides for mobile and tablet.
   ========================================================================== */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-lg);
  }
}
@media (max-width: 600px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-lg);
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
  .wa-float {
    bottom: 1rem;
    right: 1rem;
    width: 48px;
    height: 48px;
  }
}