:root {
  --color-neutral-50: oklch(98.5% 0 0);
  --color-neutral-100: oklch(97% 0 0);
  --color-neutral-200: oklch(92.2% 0 0);
  --color-neutral-300: oklch(87% 0 0);
  --color-neutral-400: oklch(70.8% 0 0);
  --color-neutral-500: oklch(55.6% 0 0);
  --color-neutral-600: oklch(43.9% 0 0);
  --color-neutral-700: oklch(37.1% 0 0);
  --color-neutral-800: oklch(26.9% 0 0);
  --color-neutral-900: oklch(20.5% 0 0);
  --color-neutral-950: oklch(14.5% 0 0);
  --color-emerald-50: oklch(97.9% 0.021 166.113);
  --color-emerald-100: oklch(95% 0.052 163.051);
  --color-emerald-200: oklch(90.5% 0.093 164.15);
  --color-emerald-300: oklch(84.5% 0.143 164.978);
  --color-emerald-400: oklch(76.5% 0.177 163.223);
  --color-emerald-500: oklch(69.6% 0.17 162.48);
  --color-emerald-600: oklch(59.6% 0.145 163.225);
  --color-emerald-700: oklch(50.8% 0.118 165.612);
  --color-emerald-800: oklch(43.2% 0.095 166.913);
  --color-emerald-900: oklch(37.8% 0.077 168.94);
  --color-emerald-950: oklch(26.2% 0.051 172.552);
}

@import "_reset.scss";
@import "_highlight.scss";

body {
  font-size: 1rem;
  color: var(--color-neutral-200);
  background-color: var(--color-neutral-950);
}

.site-container {
  position: relative;
  display: grid;
  grid-template-areas:
    "."
    "header"
    "."
    "main"
    "."
    "footer";
  grid-template-rows: 1.5rem auto 3rem 1fr 5rem auto;
  grid-template-columns: minmax(0, 1fr);
  font-family: 'Inter', sans-serif;
}

.site-header {
  grid-area: header;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-block: 1.5rem;
  padding-inline: 1.5rem;
}

.logo {
  padding-block: 0.5rem;
}

.logo a {
  display: inline-block;
  padding-block: 0.5rem;
  transition: opacity 0.2s ease;
}

.logo a:hover {
  opacity: 0.8;
}

.site-nav {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.nav-link {
  color: var(--color-neutral-400);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.nav-link:hover {
  color: var(--color-neutral-200);
}

.nav-link.active {
  color: var(--color-neutral-50);
  font-weight: 500;
}

.nav-icon {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  vertical-align: text-bottom;
}

.site-main {
  grid-area: main;
  padding-inline: 1.5rem;
}

.site-main p {
  margin-block-end: 1.5rem;
}

.site-main p:last-child {
  margin-block-end: 0;
}

.site-main ul {
  list-style: disc;
  margin-block-end: 1rem;
}

.site-main li {
  margin-block-end: 0.25rem;
}

.site-main a {
  color: var(--color-emerald-200);
  text-decoration: underline;
  text-underline-position: from-font;
  transition: color 0.2s ease;
}

.site-main a:hover {
  color: var(--color-emerald-300);
}

.site-main em {
  font-style: italic;
  color: var(--color-neutral-300);
}

.site-main strong {
  font-weight: 600;
  color: var(--color-neutral-50);
}

.site-footer {
  grid-area: footer;
  padding-inline: 1.5rem;
  padding-block: 1.5rem;
}

.site-footer p {
  color: var(--color-neutral-500);
}

@media (min-width: 48rem) {
  .site-container {
    grid-template-rows: 3rem auto 7rem 1fr 10rem auto;
  }

  .site-header {
    padding-block: 2rem;
    padding-inline: 6rem;
    gap: 3rem;
  }

  .site-main {
    padding-inline: 6rem;
  }

  .site-footer {
    padding-inline: 6rem;
    padding-block: 2rem;
  }

  .site-main {
    max-width: 60rem;
  }

  .site-nav {
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
    align-items: center;
  }
}

.donation {
  margin-block-end: 2rem;

  @media (min-width: 48rem) {
    width: 40%;
    margin-inline-start: 2rem;
    float: right;
  }
}

.donation-title {
  font-size: 1.25rem;
}

.donation-details {
  margin-top: 1rem;
  background-color: var(--color-neutral-900);
  border: 1px solid var(--color-neutral-800);
  border-radius: 0.5rem;
}

.donation-summary {
  display: flex;
  align-items: center;
  padding-block: 1rem;
  padding-inline: 1rem;
  gap: 0.5rem;
  font-weight: 500;
  font-size: 0.875rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%23737373' fill-rule='evenodd' d='M4.22 6.222a.75.75 0 0 1 1.06 0L8 8.942l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0l-3.25-3.25a.75.75 0 0 1 0-1.06' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-position: right 1rem top 50%;
  background-repeat: no-repeat;
  list-style: none;
  cursor: pointer;
}

.donation-summary + p {
  padding: 1rem;
}

.donation-details[open] .donation-summary {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%23737373' fill-rule='evenodd' d='M11.78 9.783a.75.75 0 0 1-1.06 0L8 7.063l-2.72 2.72a.75.75 0 1 1-1.06-1.06l3.25-3.25a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06' clip-rule='evenodd'/%3E%3C/svg%3E");
  border-bottom: 1px solid var(--color-neutral-800);
}

.donation-note {
  margin-block-start: 1rem;
  font-size: 0.875rem;
  color: var(--color-neutral-600);
}