/* Donate: rules on top of theme.css, pages.css and home.css. Live on every
   build since 10/19/2026 (--no-donate leaves it out). Owned by tools/donate.mjs.
   Header order: links, Login, Get Help Now, then Donate at the far right. */

/* ---- header button: outlined in red, so Get Help Now stays the loudest ---- */
.btn--give { background: transparent; border-color: var(--red-on-dark); color: var(--text-on-dark); }
.btn--give:hover { background: rgba(255, 77, 94, 0.16); }
.nav__give { margin-top: 14px; align-self: flex-start; }
.nav__give svg { width: 18px; height: 18px; }

/* The row with Donate in it needs about 1,100px and the header is 1,120px wide
   at most, so the row waits for full width. From 1100 to 1199 the menu button
   holds: this block undoes theme.css's 1100px row for that range. */
@media (min-width: 1100px) and (max-width: 1199.98px) {
  .nav__toggle { display: inline-flex; }
  .nav__menu { display: none; position: absolute; flex-direction: column; align-items: normal; gap: 4px; background: var(--ink-2); border-top: 1px solid var(--rule-dark); padding: 12px var(--gutter) 24px; }
  .nav__link { min-height: 52px; font-size: 22px; border-bottom: 1px solid var(--rule-dark); }
  .nav__login { margin: 18px 0 0; }
  .nav__cta { margin: 14px 0 0; }
}
/* Full width: the mockup's spacing. 26px between links, 10px between buttons. */
@media (min-width: 1200px) {
  .nav__menu { gap: 26px; }
  .nav__menu .btn--sm { padding: 0 18px; }
  .nav__login, .nav__cta { margin: 0 -16px 0 0; }
  .nav__give { margin: 0; }
}

/* ---- footer link ---- */
.footer__nav a.footer__give { gap: 8px; color: var(--red-on-dark); }
.footer__nav a.footer__give:hover { color: var(--text-on-dark); }
.footer__give svg { width: 18px; height: 18px; }

/* ---- /donate/ ---- */
.give-hero h1 { max-width: none; text-wrap: balance; }
.give__grid { display: grid; gap: 48px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) { .give__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; } }
.give__why { display: flex; flex-direction: column; gap: 28px; }
.give__lede { font-size: 22px; line-height: 1.45; color: var(--text-2); }
.give-list { list-style: none; margin: 0; padding: 0; }
.give-list a { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; border-top: 2px solid var(--ink); color: var(--ink); text-decoration: none; font-size: 21px; font-weight: 600; line-height: 1.35; }
.give-list li:last-child a { border-bottom: 2px solid var(--ink); }
.give-list svg { width: 28px; height: 28px; flex: none; transition: transform 0.15s ease; }
.give-list a:hover { color: var(--red-dark); }
.give-list a:hover svg { transform: translateX(6px); }

.give-box { display: flex; flex-direction: column; gap: 20px; padding: 32px; border: 2px solid var(--ink); border-radius: var(--radius); background: var(--paper); }
.give-box h2 { font-size: clamp(36px, 3.6vw, 48px); }
.give-box__slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 340px; padding: 32px 24px; border: 2px dashed #8a8d94; border-radius: var(--radius-sm); background: var(--paper-2); text-align: center; }
.give-box__slot svg { width: 34px; height: 34px; color: var(--red-dark); }
.give-box__slot p { max-width: 30ch; font-size: 20px; line-height: 1.45; color: var(--text-2); text-wrap: balance; }
.give-box__methods { font-size: 19px; line-height: 1.45; color: var(--text-2); }

.give-other__in { display: flex; flex-direction: column; gap: 28px; }
.give-ways { margin: 0; max-width: 900px; }
.give-ways > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 32px; padding: 22px 0; border-top: 2px solid var(--ink); }
.give-ways > div:last-child { border-bottom: 2px solid var(--ink); }
.give-ways dt { font-family: var(--display); font-weight: 700; font-size: 32px; line-height: 1; text-transform: uppercase; }
.give-ways dd { margin: 0; font-size: 21px; line-height: 1.45; color: var(--text-2); }
@media (min-width: 640px) { .give-ways > div { grid-template-columns: 180px minmax(0, 1fr); align-items: baseline; } }
.give-tax { max-width: 900px; font-size: 20px; font-weight: 600; line-height: 1.45; color: var(--ink); }

@media (max-width: 639px) {
  .give-box { padding: 24px 20px; }
  .give-box__slot { min-height: 260px; }
}

/* ---- under construction: /donate/ while "open" is false ---- */
.build { background: var(--paper); }
.build__tape { height: 30px; background: repeating-linear-gradient(-45deg, var(--red) 0 24px, var(--ink) 24px 48px); }
.build__in { padding-top: 104px; padding-bottom: 112px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.build__icon { display: inline-flex; color: var(--red); }
.build__icon svg { width: 72px; height: 72px; }
.build h1 { font-size: clamp(56px, 10vw, 128px); line-height: 0.9; text-wrap: balance; }
.build .lede { max-width: 40ch; font-size: 24px; color: var(--text-2); text-wrap: pretty; }
.build .btns { margin-top: 8px; }
.build .build__home { color: var(--ink); }
.build .build__home:hover { background: var(--paper-2); }
@media (max-width: 639px) {
  .build__in { padding-top: 64px; padding-bottom: 72px; gap: 20px; }
  .build__icon svg { width: 56px; height: 56px; }
  .build .lede { font-size: 21px; }
  .build .btns { width: 100%; flex-direction: column; align-items: stretch; }
  .build .btns .btn { justify-content: center; }
}