/* WG21 Meeting Fund page (#51). Reuses the About-family shell, tokens, and section
   patterns (.about-head, .section-label, .about-card) via @import; .mf-* below are
   the page-specific bits. Sponsor logos are placeholders for now. */
@import "foundation.css";

/* Lead/title/copy sizing tokens (set per page in the About family). */
body.meeting-fund-page { --copy: 16px; --title: 18px; --lead: 20px; }

/* ──────── Meeting Fund ──────── */

/* Center each section to the content column, like the other About-family pages
   (.about-head already does this via about.css; .contrib-section lives in
   contributing.css, which this page doesn't import). */
.contrib-section {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  padding-bottom: 56px;
}

/* Year label: mono, blue, tracked — reused by the featured card and past-year rows. */
.mf-year {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-blue);
}

/* Current contributor: featured card (left) + how-to/balance rail (right). */
.mf-current {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: 22px;
  align-items: start;
}
/* Left column: the section label (its rule stops at the column edge) above the
   featured card. The rail is the second grid column, top-aligned with the label. */
.mf-main { min-width: 0; }
.mf-main .section-label { margin: 0 0 20px; }
.mf-featured-row { display: flex; align-items: flex-start; gap: 22px; margin-top: 21px; }
.mf-logo { flex: none; width: 80px; height: auto; display: block; }
.mf-featured-text { min-width: 0; }
.mf-name { margin: 0; font-family: var(--font-sans); font-size: 19px; font-weight: 600; color: var(--ink); }
.mf-amount { margin: 2px 0 0; font-family: var(--font-sans); font-size: 19px; color: var(--accent-blue); }
.mf-featured-desc { margin: 11px 0 0; font-family: var(--font-mono); font-size: 16px; line-height: 1.65; color: var(--ink-soft); }

/* Sidebar cards. The left column leads with the "List of Contributors" label
   (13px + 20px margin), so nudge the rail down by that block to line the "How to
   contribute" card's top edge up with the featured card's top on the left. */
.mf-rail { display: flex; flex-direction: column; gap: 22px; margin-top: 40px; }
.mf-card {
  padding: 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.mf-card-accent { background: rgba(0, 122, 255, .05); border-color: rgba(0, 122, 255, .2); }
.mf-card-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #011b41;
}
.mf-card-label-blue { color: var(--accent-blue); }
.mf-card-icon { flex: none; display: inline-flex; color: var(--accent-blue); }
.mf-card-icon svg { width: 20px; height: 20px; }
.mf-card-body { margin: 12px 0 0; font-family: var(--font-sans); font-size: 19px; line-height: 1.6; color: var(--ink); }
.mf-inline-link { color: var(--accent-blue); }
.mf-inline-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.mf-balance { margin: 0; font-family: var(--font-sans); font-size: 20px; font-weight: 600; color: var(--ink); }
/* Balance meta splits into two mono lines: the update date (blue) over a muted
   italic figures-currency note. */
.mf-balance-note { margin: 10px 0 0; font-family: var(--font-mono); font-size: 14px; color: var(--accent-blue); }
.mf-balance-sub { margin: 2px 0 0; font-family: var(--font-mono); font-size: 14px; font-style: italic; color: var(--ink-soft); }

/* Blue mono link with a trailing arrow. */
.mf-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 17px;
  color: var(--accent-blue);
  text-decoration: none;
}
.mf-link:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Past contributors: one bordered card; year rows alternate fill (like the Figma). */
.mf-past { padding: 0; overflow: hidden; }
.mf-year-row { padding: 32px; }
.mf-year-alt { background: #f6f7f9; }
.mf-meetings { display: flex; flex-wrap: wrap; gap: 21px; margin-top: 6px; }
.mf-meeting {
  flex: 0 1 303px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.mf-meeting-city { margin: 0; font-family: var(--font-sans); font-size: 19px; font-weight: 600; color: var(--ink); }
.mf-meeting-month { margin: 4px 0 0; font-family: var(--font-sans); font-size: 19px; color: var(--accent-blue); }
/* Each "·"-separated contributor renders on its own line (see template split). */
.mf-meeting-contributor { margin: 8px 0 0; font-family: var(--font-sans); font-size: 19px; line-height: 1.5; color: var(--ink); }
.mf-past-link { margin: 0; padding: 0 32px 32px; }

/* Contribution FAQ (#54): a bordered card of <details> rows with hairline
   separators. Each summary shows the question + a plus that rotates to a minus
   when the row is open. */
.mf-faq { padding: 0; overflow: hidden; }
.mf-faq-item { border-bottom: 1px solid var(--line); }
.mf-faq-item:last-child { border-bottom: 0; }
.mf-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 29px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--lead);
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
  list-style: none;
}
/* Hide the native disclosure triangle (WebKit + standards). */
.mf-faq-q::-webkit-details-marker { display: none; }
.mf-faq-q::marker { content: ""; }
/* Removing the marker also removes the browser's default focus ring, so give
   keyboard users the site's accent outline back on the summary row. */
.mf-faq-q:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; border-radius: 4px; }
/* Plus glyph drawn from two bars; the vertical bar collapses on open → minus. */
.mf-faq-icon { position: relative; flex: none; width: 20px; height: 20px; }
.mf-faq-icon::before,
.mf-faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--ink-faint, #8b95a6);
  transition: transform .15s ease;
}
.mf-faq-icon::before { width: 13px; height: 1.7px; transform: translate(-50%, -50%); }
.mf-faq-icon::after { width: 1.7px; height: 13px; transform: translate(-50%, -50%); }
.mf-faq-item[open] .mf-faq-icon::after { transform: translate(-50%, -50%) scaleY(0); }
.mf-faq-a { padding: 0 29px 22px; }
.mf-faq-a p { margin: 0; font-family: var(--font-sans); font-size: 19px; line-height: 1.6; color: var(--ink-soft); }

/* On tablet/mobile the columns collapse and the how-to/balance rail moves
   above the List of Contributors section. */
@media (max-width: 900px) {
  .mf-current { grid-template-columns: 1fr; }
  /* Stacked: rail moves on top, so drop the desktop label-alignment offset. */
  .mf-rail { order: -1; margin-top: 0; }
}

/* On phones there's no room for the logo beside the copy, so stack it on top
   and let the name/amount/description use the full card width. */
@media (max-width: 600px) {
  .mf-featured-row { flex-direction: column; gap: 16px; }
}