/*
 * Components — Indlu Yethemba Ministries
 * ----------------------------------------
 * Site-brede onderdelen: knoppen, tekstaccenten, het vaste logo,
 * de hamburger, het overlay-menu, de zwevende donatieknop en de footer.
 * De onderdelen van het scroll-verhaal staan in story.css.
 */

/* ----------------------------------------
 * KNOPPEN
 * ---------------------------------------- */

.btn {
  display:          inline-flex;
  align-items:      center;
  gap:              0.55em;
  font-family:      var(--font-body);
  font-size:        var(--text-base);
  font-weight:      var(--font-extrabold);
  padding:          var(--btn-pad-y) var(--btn-pad-x);
  border:           2px solid transparent;
  border-radius:    var(--radius-pill);
  cursor:           pointer;
  transition:       transform var(--transition-fast),
                    background-color var(--transition-fast),
                    color var(--transition-fast);
}

.btn__arrow {
  transition: transform var(--transition-fast);
}

.btn:hover .btn__arrow {
  transform: translateX(4px);
}

.btn--donate {
  background-color: var(--color-clay);
  color:            #FFFFFF;
}

.btn--donate:hover {
  background-color: var(--color-clay-deep);
  color:            #FFFFFF;
  transform:        translateY(-2px);
}

.btn--outline {
  border-color: var(--color-cream-60);
  color:        var(--color-cream);
}

.btn--outline:hover {
  background-color: var(--color-cream);
  color:            var(--color-ink);
}

/* ----------------------------------------
 * TEKSTACCENTEN
 * ---------------------------------------- */

.eyebrow {
  display:        inline-flex;
  align-items:    center;
  gap:            0.5em;
  font-size:      0.74rem;
  font-weight:    var(--font-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color:          var(--color-sun);
  margin-bottom:  var(--space-6);
}

.textlink {
  display:        inline-flex;
  align-items:    center;
  gap:            0.45em;
  font-weight:    var(--font-extrabold);
  color:          var(--color-sun);
  border-bottom:  2px solid currentColor;
  padding-bottom: 2px;
  margin-top:     var(--space-3);
}

.textlink:hover {
  color: var(--color-clay);
}

/* ----------------------------------------
 * VAST LOGO LINKSBOVEN
 * ---------------------------------------- */

.site-mark {
  position: fixed;
  top:      22px;
  left:     28px;
  z-index:  90;
  display:  block;
  width:    200px;
}

.site-mark__image {
  width:    100%;
  height:   auto;
  display:  block;
  filter:   var(--shadow-logo);
}

.site-mark__text {
  font-family:  var(--font-display);
  font-weight:  var(--font-extrabold);
  font-size:    var(--text-xl);
  color:        var(--color-cream);
}

/* ----------------------------------------
 * HAMBURGER
 * ---------------------------------------- */

.menu-toggle {
  position:         fixed;
  top:              22px;
  right:            26px;
  z-index:          95;
  width:            64px;
  height:           64px;
  border:           none;
  border-radius:    var(--radius-full);
  background-color: var(--color-sun);
  display:          grid;
  place-items:      center;
  box-shadow:       var(--shadow-round);
  transition:       transform 0.25s var(--ease-pop),
                    background-color 0.2s ease;
}

.menu-toggle:hover {
  transform: rotate(-6deg) scale(1.06);
}

.menu-toggle__bars {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            5px;
  width:          30px;
}

.menu-toggle__bar {
  display:          block;
  height:           4px;
  background-color: var(--color-ink);
  border-radius:    var(--radius-sm);
  transition:       0.3s var(--ease-pop);
}

.menu-toggle__bar:nth-child(1) { width: 100%; }
.menu-toggle__bar:nth-child(2) { width: 66%; }
.menu-toggle__bar:nth-child(3) { width: 86%; }

.menu-toggle:hover .menu-toggle__bar:nth-child(2) { width: 100%; }
.menu-toggle:hover .menu-toggle__bar:nth-child(3) { width: 70%; }

.menu-toggle.is-open {
  background-color: var(--color-clay);
}

.menu-toggle.is-open:hover {
  transform: rotate(90deg) scale(1.06);
}

.menu-toggle.is-open .menu-toggle__bar {
  background-color: var(--color-cream);
  width:            100%;
}

.menu-toggle.is-open .menu-toggle__bar:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.menu-toggle.is-open .menu-toggle__bar:nth-child(2) { opacity: 0; }
.menu-toggle.is-open .menu-toggle__bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ----------------------------------------
 * OVERLAY-MENU
 * ---------------------------------------- */

.menu-overlay {
  position:         fixed;
  inset:            0;
  z-index:          92;
  background-color: var(--color-leaf);
  display:          flex;
  flex-direction:   column;
  justify-content:  center;
  padding:          0 var(--gutter);
  clip-path:        circle(0% at calc(100% - 58px) 54px);
  transition:       clip-path 0.5s var(--ease-curtain);
}

.menu-overlay.is-open {
  clip-path: circle(165% at calc(100% - 58px) 54px);
}

.menu-overlay__list {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
}

.menu-overlay__link {
  display:      block;
  font-family:  var(--font-display);
  font-weight:  var(--font-extrabold);
  font-size:    var(--text-menu);
  line-height:  var(--leading-tight);
  color:        var(--color-cream);
  opacity:      0.55;
  transition:   opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.menu-overlay__link:hover {
  opacity:    1;
  transform:  translateX(14px);
  color:      var(--color-sun);
}

/* Donatie-item en de huidige pagina staan altijd vol in beeld */
.menu-overlay__item--give .menu-overlay__link,
.menu-overlay__item.current-menu-item .menu-overlay__link {
  color:    var(--color-sun);
  opacity:  1;
}

/* ----------------------------------------
 * ZWEVENDE DONATIEKNOP
 * ---------------------------------------- */

.donate-float {
  position:         fixed;
  right:            26px;
  bottom:           26px;
  z-index:          90;
  display:          inline-flex;
  align-items:      center;
  gap:              0.55em;
  padding:          15px 26px;
  background-color: var(--color-clay);
  color:            #FFFFFF;
  font-size:        0.98rem;
  font-weight:      var(--font-extrabold);
  border-radius:    var(--radius-pill);
  box-shadow:       var(--shadow-donate);
  transition:       transform 0.18s ease, background-color 0.18s ease;
}

.donate-float:hover {
  background-color: var(--color-clay-deep);
  color:            #FFFFFF;
  transform:        translateY(-3px);
}

.donate-float__arrow {
  transition: transform 0.18s ease;
}

.donate-float:hover .donate-float__arrow {
  transform: translateX(4px);
}

/* ----------------------------------------
 * SCROLL-AANWIJZER
 * ---------------------------------------- */

.scroll-cue {
  position:       fixed;
  bottom:         28px;
  left:           50%;
  transform:      translateX(-50%);
  z-index:        80;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-2);
  font-size:      0.72rem;
  letter-spacing: var(--tracking-cue);
  text-transform: uppercase;
  color:          var(--color-cream-muted);
  transition:     opacity 0.4s ease;
}

.scroll-cue__line {
  width:      1px;
  height:     38px;
  background: linear-gradient(var(--color-sun), transparent);
  animation:  cue-drop 1.8s ease-in-out infinite;
}

@keyframes cue-drop {
  0%    { transform: scaleY(0); transform-origin: top; }
  50%   { transform: scaleY(1); transform-origin: top; }
  50.1% { transform-origin: bottom; }
  100%  { transform: scaleY(0); transform-origin: bottom; }
}

/* ----------------------------------------
 * NIEUWSBRIEFFORMULIER
 * ---------------------------------------- */

.newsletter {
  display:    flex;
  flex-wrap:  wrap;
  gap:        var(--space-3);
  max-width:  560px;
  margin-top: var(--space-6);
}

.newsletter__input {
  flex:             1;
  min-width:        220px;
  padding:          15px 20px;
  font-family:      var(--font-body);
  font-size:        var(--text-base);
  color:            var(--color-cream);
  background-color: var(--color-cream-06);
  border:           2px solid var(--color-cream-40);
  border-radius:    var(--radius-pill);
}

.newsletter__input::placeholder {
  color: var(--color-cream-50);
}

/* ----------------------------------------
 * FOOTER
 * ---------------------------------------- */

.site-footer {
  position:         relative;
  z-index:          20;
  background-color: var(--color-ink);
}

/* De compacte footer sluit het scroll-verhaal op de homepage af: één rij,
   met een dunne scheidingslijn erboven. De binnenpaginas hebben die lijn
   niet; zie pages.css. */
.site-footer--compact {
  display:          flex;
  flex-wrap:        wrap;
  justify-content:  space-between;
  align-items:      flex-start;
  gap:              30px;
  padding:          70px 7vw 44px;
  border-top:       1px solid var(--color-cream-12);
}

.site-footer__brand {
  font-family:  var(--font-display);
  font-weight:  var(--font-extrabold);
  font-size:    1.3rem;
}

.site-footer__tagline {
  display:        block;
  margin-top:     var(--space-1);
  font-family:    var(--font-body);
  font-size:      0.62rem;
  font-weight:    var(--font-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color:          var(--color-cream-muted);
}

.site-footer__details {
  font-size:    0.9rem;
  line-height:  var(--leading-loose);
  color:        var(--color-cream-muted);
  font-style:   normal;
}

.site-footer__meta {
  display:    flex;
  flex-wrap:  wrap;
  gap:        var(--space-2) var(--space-4);
  margin-top: var(--space-2);
  font-size:  0.9rem;
  color:      var(--color-cream-muted);
}

/* ----------------------------------------
 * MOBIEL
 * ---------------------------------------- */

@media (max-width: 760px) {

  .site-mark {
    width:  150px;
    top:    18px;
    left:   20px;
  }

  .menu-toggle {
    top:    16px;
    right:  18px;
    width:  56px;
    height: 56px;
  }

  .menu-toggle__bars {
    width: 26px;
  }

  .menu-overlay {
    padding: 0 var(--gutter-mobile);
  }

  /* Op een klein scherm legt de zwevende knop te veel beslag op de pagina.
     De route naar doneren blijft open via "Steun ons" in het menu. */
  .donate-float {
    display: none;
  }
}