/* ==========================================================================
   eda 2026 – 70% smaller feel, fluid, mobile-first, container-aware
   ========================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  --clr-primary: #2e4a69;
  --clr-glow: #FF85C1;
  --clr-glow-soft: color-mix(in srgb, #FF85C1 60%, transparent);
  --transition: 0.38s ease;
}
@media (prefers-reduced-motion: reduce) {
  :root { --transition: 0.01ms; }
}
body {
  font-family: "Poppins", system-ui, sans-serif;
  background: #000;
  color: white;
  min-height: 100dvh;
  overflow-x: hidden;
}
/* Full immersive background */
.background {
  position: fixed;
  inset: 0;
  z-index: -1;
}
.bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}
/* Header – compact, fixed, fully centered */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gab: clamp(1.5rem, 4vw, 3rem);
  padding-inline: clamp(1.2rem, 5vw, 3.5rem);
  padding-block: clamp(0.8rem, 2.5vw, 1.4rem);
  background: rgba(46, 74, 105, 0.92);
  backdrop-filter: blur(8px);
  flex-wrap: wrap;

  /* ── Add / change only these lines to shift everything 20% left ── */
  /*transform: translateX(-20%);*/
  /* Optional: prevent it from going too far off-screen on very narrow viewports */
  max-width: 140%;   /* gives it room to shift left without clipping */
}
.logo-link {
  display: block;
}
.logo {
  width: clamp(36px, 7.5vw, 54px);
  height: auto;
}
/* Navigation – smaller items */
.main-nav {
  container-type: width: 100%;
}
.nav-items {
  display: flex;
  gap: clamp(0.8rem, 2.8vw, 1.8rem);
  list-style: none;
}
.nav-items a {
  color: white;
  text-decoration: none;
  font-size: clamp(0.82rem, 2vw, 0.96rem);
  padding: 0.4rem 0.8rem;
  transition: color var(--transition);
}
.nav-items a:hover {
  color: gold;
}
/* Main content area – centered layout */
.hero-area {
  position: relative;
  z-index: 10;
  padding-block-start: clamp(12vh, 24dvh, 34vh);
  padding-inline: clamp(1.4rem, 7vw, 9vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 6vh, 5rem);
  text-align: center;
}
.hero-area {
  /* ... your existing properties ... */
  pointer-events: none;
}
.hero-area * {
  pointer-events: auto;
}

/* Glowing heading – centered proportionally */
.donation-prompt {
  font-size: clamp(1.6rem, 6.5vw + 0.8rem, 3.2rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  margin: 0 auto;
  max-width: 90%;
  color: lavender;
  text-shadow: 0 0 10px var(--clr-glow), 0 0 20px var(--clr-glow-soft);
  animation: glowPulse 1.8s infinite alternate;
  text-wrap: balance;
}
.donation-prompt p {
  margin: 0;
}
@keyframes glowPulse {
  0% { text-shadow: 0 0 8px var(--clr-glow), 0 0 16px var(--clr-glow-soft); }
  100% { text-shadow: 0 0 22px var(--clr-glow), 0 0 38px var(--clr-glow-soft); }
}
/* Form – centered */
.form-wrapper {
  container-type: inline-size;
  max-width: clamp(280px, 72cqw, 380px);
  width: 100%;
  margin-inline: auto;
}
form[action] {
  background: rgba(255, 255, 255, 0.94);
  border-radius: 0.9rem;
  padding: clamp(1.2rem, 4.5vw, 1.9rem);
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
  color: #222;
}
.form-group {
  margin-block-end: 1.2rem;
}
.form-group label {
  display: block;
  margin-block-end: 0.4rem;
  font-size: clamp(0.88rem, 2.3vw, 1rem);
  color: #444;
}
.form-group input,
.form-group textarea {
  width: 100%;
  padding: clamp(0.7rem, 2.2vw, 0.95rem);
  border: 1px solid #ccc;
  border-radius: 0.45rem;
  font-size: clamp(0.9rem, 2.3vw, 1rem);
  color: #222;
}
button[type] {
  background: var(--clr-primary);
  color: white;
  border: none;
  padding: clamp(0.75rem, 2.8vw, 1rem) clamp(1.5rem, 5.5vw, 2.2rem);
  border-radius: 2.2rem;
  font-size: clamp(0.9rem, 2.8vw, 1.05rem);
  cursor: pointer;
  transition: var(--transition);
  margin: 1.2rem auto 0;
  display: block;
}
button[type]:hover {
  background: #1c3250;
  transform: translateY(-2px);
}
/* Narrow screens – tighten spacing, keep centered */
@media (max-width: 640px) {
  .site-header {
    flex-direction: column;
    gap: 1rem;
    padding-block: 1rem;
  }
  .hero-area {
    padding-inline: 1.2rem;
    padding-block-start: 16vh;
  }
  .form-wrapper {
    max-width: 94%;
  }
  .donation-prompt {
    text-align: center;
  }
}
/* Very narrow – minimal adjustments */
@container (max-width: 420px) {
  .message-form {
    padding: 1rem;
  }
 button[type] {
    padding: 0.8rem 1.8rem;
  }
}