/* ==========================================================================
   EyeGive — stylesheet
   Everything is themed from the variables below. To change the site's colors
   or fonts, edit only this :root block.
   ========================================================================== */

:root {
  /* Brand colors — sampled directly from the EyeGive logo */
  --navy:        #005a76;   /* logo blue — headings, accents */
  --navy-dark:   #003e53;   /* deeper blue — hero + footer */
  --teal:        #f5a93f;   /* logo gold — buttons */
  --teal-dark:   #e0961f;   /* gold hover */
  --gold-ink:    #003e53;   /* text sitting on gold buttons */
  --sand:        #f7f4ee;
  --ink:         #1f2933;
  --muted:       #5b6b7a;
  --line:        #e4e1da;
  --white:       #ffffff;

  /* Type */
  --font-head: "Georgia", "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;

  /* Layout */
  --wrap: 1120px;
  --radius: 10px;
  --shadow: 0 2px 10px rgba(18, 58, 92, 0.08);
}

/* --- reset ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--navy); }

h1, h2, h3 {
  font-family: var(--font-head);
  line-height: 1.2;
  color: var(--navy);
  margin: 0 0 0.5em;
}

h1 { font-size: 2.6rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* --- buttons -------------------------------------------------------------- */

.btn {
  display: inline-block;
  padding: 13px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}

.btn-primary { background: var(--teal); color: var(--gold-ink); }
.btn-primary:hover { background: var(--teal-dark); color: var(--gold-ink); transform: translateY(-1px); }

.btn-outline {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255,255,255,0.8);
}
.btn-outline:hover { background: rgba(255,255,255,0.14); }

.btn-ghost {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--navy);
}
.btn-ghost:hover { background: var(--navy); color: var(--white); }

/* --- header / nav --------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.3s ease, background 0.3s ease;
}
/* deepens once the page scrolls (class added by animations.js) */
.site-header.scrolled {
  box-shadow: 0 4px 20px rgba(0, 62, 83, 0.10);
  background: rgba(255,255,255,0.97);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 74px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--navy);
  font-family: var(--font-head);
  font-size: 1.4rem;
  font-weight: 700;
}
.brand img { height: 44px; width: auto; }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--navy);
  cursor: pointer;
  padding: 6px 10px;
}

.nav ul {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav a {
  text-decoration: none;
  color: var(--ink);
  font-weight: 500;
  font-size: 0.98rem;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--navy); }
.nav a.active { color: var(--navy); border-bottom-color: var(--teal); }

.nav .btn { padding: 9px 20px; font-size: 0.92rem; }
.nav .btn:hover { color: var(--gold-ink); }

/* --- hero ----------------------------------------------------------------- */

.hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  color: var(--white);
  padding: 96px 0;
  text-align: center;
}
.hero h1 { color: var(--white); margin-bottom: 0.3em; }
.hero p {
  font-size: 1.2rem;
  max-width: 620px;
  margin: 0 auto 2em;
  color: rgba(255,255,255,0.9);
}
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.page-head {
  background: var(--sand);
  padding: 60px 0;
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.page-head h1 { margin-bottom: 0.2em; }
.page-head p { color: var(--muted); font-size: 1.1rem; margin: 0; }

/* --- sections ------------------------------------------------------------- */

.section { padding: 76px 0; }
.section-sand { background: var(--sand); }

.section-title { text-align: center; margin-bottom: 8px; }
.section-sub {
  text-align: center;
  color: var(--muted);
  margin-bottom: 48px;
  font-size: 1.05rem;
}

/* --- stats ---------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  text-align: center;
}
.stat {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px 20px;
  box-shadow: var(--shadow);
}
.stat .num {
  font-family: var(--font-head);
  font-size: 2.6rem;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 10px;
}
.stat .label { color: var(--muted); margin: 0; font-size: 1rem; }

/* --- cards ---------------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 28px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.card h3 { margin-bottom: 0.4em; }
.card p { color: var(--muted); flex-grow: 1; }
.card a { font-weight: 600; text-decoration: none; }
.card a:hover { text-decoration: underline; }

/* --- team ----------------------------------------------------------------- */

.team {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}
.member {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 24px;
  align-items: start;
}
.member img {
  width: 190px;
  height: 214px;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--sand);
}
.member .role {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 4px;
}
.member h3 { margin-bottom: 2px; }
.member .email {
  font-size: 0.92rem;
  display: inline-block;
  margin-bottom: 10px;
}
.member p.bio { font-size: 0.97rem; color: var(--muted); margin: 0; }

/* --- mission callout ------------------------------------------------------ */

.mission {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.mission blockquote {
  font-family: var(--font-head);
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--navy);
  margin: 0;
  padding: 0;
}

/* --- events --------------------------------------------------------------- */

.event {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 28px;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 5px solid var(--teal);
  border-radius: var(--radius);
  padding: 28px 32px;
  margin-bottom: 22px;
  box-shadow: var(--shadow);
}
.event .when {
  font-family: var(--font-head);
  color: var(--navy);
  font-weight: 700;
  font-size: 1.05rem;
}
.event h3 { margin-bottom: 0.3em; }
.event p { color: var(--muted); margin: 0; }

/* --- donate --------------------------------------------------------------- */

.donate-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 56px;
  align-items: center;
}
.qr {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
  text-align: center;
}
.qr img { margin: 0 auto; }
.qr .caption {
  margin: 14px 0 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { margin-bottom: 10px; }

/* --- footer --------------------------------------------------------------- */

.site-footer {
  background: var(--navy-dark);
  color: rgba(255,255,255,0.82);
  padding: 60px 0 28px;
  margin-top: 0;
}
.site-footer h4 {
  color: var(--white);
  font-family: var(--font-head);
  font-size: 1.05rem;
  margin: 0 0 14px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 9px; }
.site-footer a { color: rgba(255,255,255,0.82); text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }

.footer-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-size: 1.3rem;
  color: var(--white); font-weight: 700; margin-bottom: 12px;
}
.footer-brand img { height: 42px; width: auto; }
.footer-tag { font-size: 0.95rem; margin: 0; }

.social { display: flex; gap: 14px; margin-top: 6px; }
.social a { font-size: 0.95rem; }

.colophon {
  border-top: 1px solid rgba(255,255,255,0.16);
  margin-top: 44px;
  padding-top: 20px;
  font-size: 0.86rem;
  color: rgba(255,255,255,0.6);
  text-align: center;
}

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 900px) {
  .stats, .cards { grid-template-columns: 1fr; }
  .team { grid-template-columns: 1fr; }
  .donate-grid { grid-template-columns: 1fr; gap: 36px; }
  .qr { max-width: 320px; margin: 0 auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 720px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.6rem; }
  .hero { padding: 64px 0; }
  .section { padding: 56px 0; }

  .nav-toggle { display: block; }

  .nav {
    display: none;
    position: absolute;
    top: 74px; left: 0; right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
  }
  .nav.open { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 24px 20px; }
  .nav li { border-bottom: 1px solid var(--line); }
  .nav li:last-child { border-bottom: 0; padding-top: 14px; }
  .nav a { display: block; padding: 14px 0; }

  .member { grid-template-columns: 1fr; }
  .member img { width: 100%; max-width: 240px; height: auto; aspect-ratio: 190 / 214; }

  .event { grid-template-columns: 1fr; gap: 10px; padding: 24px; }

  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ==========================================================================
   MOTION
   All of it is optional polish. If JavaScript is off, the `.js` class is
   never added and every element below simply renders in its final state.
   Anyone with "reduce motion" enabled in their OS gets no animation at all
   (see the very bottom of this file).
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- scroll reveal -------------------------------------------------------- */

.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  will-change: opacity, transform;
}
.js .reveal.in {
  opacity: 1;
  transform: none;
}

/* children of a grid arrive one after another */
.js .stats .reveal:nth-child(2),
.js .cards .reveal:nth-child(2),
.js .team  .reveal:nth-child(2) { transition-delay: 0.10s; }
.js .stats .reveal:nth-child(3),
.js .cards .reveal:nth-child(3),
.js .team  .reveal:nth-child(3) { transition-delay: 0.20s; }
.js .team  .reveal:nth-child(4) { transition-delay: 0.30s; }

/* events sit alongside the heading, so count by element type instead */
.js .event.reveal:nth-of-type(2) { transition-delay: 0.08s; }
.js .event.reveal:nth-of-type(3) { transition-delay: 0.16s; }
.js .event.reveal:nth-of-type(4) { transition-delay: 0.24s; }

/* the sub-heading trails its title slightly */
.js .section-sub.reveal { transition-delay: 0.08s; }

/* --- hero entrance (runs on load, no JS needed) --------------------------- */

@keyframes rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

.hero h1,
.hero p,
.hero-actions {
  animation: rise 0.9s var(--ease-out) both;
}
.hero p           { animation-delay: 0.12s; }
.hero-actions     { animation-delay: 0.24s; }

.page-head h1 { animation: rise 0.7s var(--ease-out) both; }
.page-head p  { animation: rise 0.7s var(--ease-out) 0.1s both; }

/* a slow drift across the hero gradient, barely perceptible */
@keyframes drift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.hero {
  background-size: 180% 180%;
  animation: drift 22s ease-in-out infinite;
}

/* --- buttons -------------------------------------------------------------- */

.btn {
  position: relative;
  overflow: hidden;
  transition: background 0.25s var(--ease-soft),
              transform 0.2s var(--ease-out),
              box-shadow 0.25s var(--ease-out),
              color 0.25s var(--ease-soft);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(245, 169, 63, 0.38);
}
.btn:active { transform: translateY(0) scale(0.98); }

/* light sweep across the button on hover */
.btn::after {
  content: "";
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg,
              rgba(255,255,255,0) 0%,
              rgba(255,255,255,0.45) 50%,
              rgba(255,255,255,0) 100%);
  transform: skewX(-20deg);
  transition: left 0.55s var(--ease-out);
}
.btn:hover::after { left: 125%; }

.btn-outline:hover { transform: translateY(-2px); }
.btn-ghost { transition: background 0.25s var(--ease-soft), color 0.25s var(--ease-soft), transform 0.2s var(--ease-out); }
.btn-ghost:hover { transform: translateY(-2px); }

/* --- nav ------------------------------------------------------------------ */

.nav a {
  position: relative;
  transition: color 0.22s var(--ease-soft);
}
/* underline grows from the centre */
.nav ul li:not(:last-child) a::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: 0; height: 2px;
  background: var(--teal);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width 0.28s var(--ease-out);
}
.nav ul li:not(:last-child) a:hover::after { width: 100%; }
.nav ul li:not(:last-child) a.active::after { width: 100%; }
.nav a.active { border-bottom-color: transparent; }

.brand img { transition: transform 0.4s var(--ease-out); }
.brand:hover img { transform: scale(1.07) rotate(-3deg); }

.nav-toggle { transition: transform 0.25s var(--ease-out); }
.nav-toggle:active { transform: scale(0.9); }

/* --- cards, stats, events ------------------------------------------------- */

.stat, .card {
  transition: transform 0.32s var(--ease-out),
              box-shadow 0.32s var(--ease-out),
              border-color 0.32s var(--ease-out);
}
.stat:hover, .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 32px rgba(0, 62, 83, 0.13);
  border-color: rgba(245, 169, 63, 0.55);
}

.card a {
  display: inline-block;
  transition: transform 0.25s var(--ease-out);
}
.card:hover a { transform: translateX(5px); }

.event {
  transition: transform 0.3s var(--ease-out),
              box-shadow 0.3s var(--ease-out),
              border-left-width 0.3s var(--ease-out);
}
.event:hover {
  transform: translateX(5px);
  border-left-width: 9px;
  box-shadow: 0 10px 26px rgba(0, 62, 83, 0.12);
}

/* --- team ----------------------------------------------------------------- */

.member img {
  transition: transform 0.5s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.member:hover img {
  transform: scale(1.035);
  box-shadow: 0 12px 28px rgba(0, 62, 83, 0.18);
}
.member .email { transition: color 0.22s var(--ease-soft); }

/* --- donate QR ------------------------------------------------------------ */

.qr {
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.qr:hover {
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 16px 34px rgba(0, 62, 83, 0.15);
}

/* --- footer --------------------------------------------------------------- */

.site-footer a { transition: color 0.22s var(--ease-soft), opacity 0.22s var(--ease-soft); }
.social a { display: inline-block; transition: transform 0.25s var(--ease-out), color 0.22s var(--ease-soft); }
.social a:hover { transform: translateY(-3px); }
.footer-brand img { transition: transform 0.4s var(--ease-out); }
.footer-brand:hover img { transform: rotate(-4deg) scale(1.06); }

/* --- mobile menu slide ---------------------------------------------------- */

@media (max-width: 720px) {
  @keyframes menuDrop {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: none; }
  }
  .nav.open { animation: menuDrop 0.28s var(--ease-out) both; }
}

/* --- respect the user's motion preference --------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  .btn:hover::after { left: -75%; }
}