/* ==========================================================================
   MSA 2026 Child: pages.css
   Page layouts for the About, Donate, Activities, Contact and Documents
   patterns (our-story, about-mission, committee-grid, in-the-news,
   donate-methods, donate-impact, donate-proof, activity-catalog,
   contact-section, contact-faq, documents-list).
   Loads after patterns.css. Uses the tokens in tokens.css and the shared
   utilities in brand-signatures.css (.msa-panel-dark, .msa-star-strip,
   .msa-onthispage, .msa-backtotop, .msa-btn--accent); it does not define them.

   Kadence's .single-content rules for p, ul, h1-h6, figure and
   .wp-block-buttons reach specificity (0,2,1), so every rule here that sets
   margins, padding or colours uses (0,2,0) or more (often a doubled class).

   Contrast (WCAG 2.1, computed):
   - years in --color-accent-text (#7A5C00) on white: 6.25:1 (large text, needs 3:1)
   - --color-accent (#FFCD00) on --color-primary (#000000): 14.0:1
   - white (--color-on-dark) on #000000: 21:1
   - #000000 icon badge behind a #FFCD00 icon: 14.0:1 (UI graphic, needs 3:1)
   - gold rules and dots on white are decorative only (1.5:1), never text.
   If --color-primary goes back to the old navy: gold on navy 10.5:1, white 15.8:1.

   Icons: the FAQ chevron below is Lucide "chevron-down" (https://lucide.dev,
   v0.460.0). ISC License. Copyright (c) for portions of Lucide are held by
   Cole Bemis 2013-2022 as part of Feather (MIT). All other copyright (c) for
   Lucide are held by Lucide Contributors 2022.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Jump-link targets: a little room above a section when the browser jumps
   to it (Kadence's own smooth scroll uses its header offset instead).
   -------------------------------------------------------------------------- */
#our-story,
#in-the-news,
#board,
#vision,
#our-mission,
#ways-to-give,
#where-your-gift-goes,
#your-gifts-at-work,
.msa-activities h3[id] {
  scroll-margin-top: var(--space-5);
}

/* --------------------------------------------------------------------------
   About: "Our Story" timeline (our-story.php). Big dark-gold years beside a
   gold rule, echoing the gold rule next to dates on MSA's fall 2026 posts.
   -------------------------------------------------------------------------- */
.msa-timeline.msa-timeline {
  --msa-tl-gutter: 2.25rem;  /* space for the rule and the dots */
  --msa-tl-line-x: 0.5rem;   /* where the rule sits */
  --msa-tl-year-col: 8.5rem; /* year column from tablets up */
  position: relative;
  box-sizing: border-box;
  max-width: 48rem;
  margin: var(--space-7) auto 0;
  padding: 0 0 0 var(--msa-tl-gutter);
}
.msa-timeline.msa-timeline::before {
  content: "";
  position: absolute;
  top: 0.75rem;
  bottom: 0;
  left: var(--msa-tl-line-x);
  width: 3px;
  background-color: var(--color-accent);
}
.msa-timeline.msa-timeline > .msa-timeline__item {
  position: relative;
  margin: 0;
  padding: 0 0 var(--space-6);
}
.msa-timeline.msa-timeline > .msa-timeline__item:last-child {
  padding-bottom: 0;
}
/* The dot on the rule for each moment. */
.msa-timeline.msa-timeline > .msa-timeline__item::before {
  content: "";
  position: absolute;
  top: 0.55rem;
  left: calc(var(--msa-tl-line-x) + 1.5px - 0.5rem - var(--msa-tl-gutter));
  box-sizing: border-box;
  width: 1rem;
  height: 1rem;
  border: 3px solid var(--color-primary);
  border-radius: 50%;
  background-color: var(--color-accent);
}
.msa-timeline.msa-timeline .msa-timeline__heading {
  margin: 0;
  font-family: var(--font-display);
  line-height: var(--leading-heading);
}
.msa-timeline.msa-timeline .msa-timeline__year {
  display: block;
  font-weight: 800;
  font-size: clamp(2rem, 2.5vw + 1rem, 2.75rem);
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
  color: var(--color-accent-text);
  font-variant-numeric: tabular-nums;
}
.msa-timeline.msa-timeline .msa-timeline__title {
  display: block;
  margin-top: var(--space-1);
  font-weight: 700;
  font-size: var(--type-h3);
  color: var(--color-primary);
}
.msa-timeline.msa-timeline .msa-timeline__text {
  margin: var(--space-2) 0 0;
  max-width: var(--width-text);
  line-height: var(--leading-body);
  color: var(--color-ink);
}
@media (min-width: 48rem) {
  .msa-timeline.msa-timeline {
    --msa-tl-gutter: 2.75rem;
  }
  .msa-timeline.msa-timeline > .msa-timeline__item::before {
    top: 1rem;
  }
  .msa-timeline.msa-timeline .msa-timeline__heading {
    display: grid;
    grid-template-columns: var(--msa-tl-year-col) minmax(0, 1fr);
    column-gap: var(--space-5);
    align-items: baseline;
  }
  .msa-timeline.msa-timeline .msa-timeline__title {
    margin-top: 0;
  }
  .msa-timeline.msa-timeline .msa-timeline__text {
    margin-left: calc(var(--msa-tl-year-col) + var(--space-5));
  }
}

/* One left edge: the intro is as wide as the timeline column (48rem), so it
   lines up with the heading instead of sitting indented at 38rem. */
.msa-story.msa-story .msa-section-intro:not(.has-text-align-center) {
  max-width: 48rem;
}

/* The closing line and button after the story. */
.msa-story.msa-story .msa-numbers + .wp-block-group {
  margin-top: var(--space-7);
}

/* --------------------------------------------------------------------------
   Number band (our-story.php "Our community today", donate-proof.php):
   black panel, MTU gold numbers in Montserrat 800, white labels. The panel
   colours come from .msa-panel-dark (brand); they are repeated here from the
   same tokens so the band still reads if that class changes.
   -------------------------------------------------------------------------- */
.msa-numbers.msa-numbers {
  box-sizing: border-box;
  margin: var(--space-7) 0 0;
  padding: var(--space-6) var(--space-5);
  border-radius: 8px;
  background-color: var(--color-primary);
  color: var(--color-on-dark, #FFFFFF);
  text-align: center;
}
.msa-numbers.msa-numbers .msa-numbers__title {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-h4);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-on-dark, #FFFFFF);
}
.msa-numbers.msa-numbers .msa-numbers__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  margin: 0;
}
.msa-numbers.msa-numbers .msa-numbers__item {
  margin: 0;
}
.msa-numbers.msa-numbers .msa-numbers__value {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 3vw + 1.5rem, 3.5rem);
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}
/* The small "about" before an estimated number. */
.msa-numbers.msa-numbers .msa-numbers__about {
  margin-right: 0.3em;
  font-size: 0.4em;
  font-weight: 700;
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
}
.msa-numbers.msa-numbers .msa-numbers__label {
  max-width: 18rem;
  margin: var(--space-2) auto 0;
  font-size: var(--type-body);
  line-height: var(--leading-body);
  color: var(--color-on-dark, #FFFFFF);
}
@media (min-width: 48rem) {
  .msa-numbers.msa-numbers {
    padding: var(--space-7) var(--space-6);
  }
  .msa-numbers.msa-numbers .msa-numbers__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   Donate: "Ways to give" (donate-methods.php), three equal columns echoing
   the Join MSA sign. White cards with a gold top edge; the one gold button
   (Open Venmo) sits at the bottom of its card.
   -------------------------------------------------------------------------- */
/* The three Donate sections and the About board section are "wide" groups
   with no side padding, so on phones their cards touched the screen edges.
   Give them the same 24px gutter as the other page sections. Three classes:
   Kadence's content.min.css sets .entry-content .alignwide {padding: 0} at
   (0,2,0) and loads after this file. */
.msa-give.msa-give.msa-give,
.msa-impact.msa-impact.msa-impact,
.msa-proof.msa-proof.msa-proof,
.msa-committee.msa-committee.msa-committee {
  box-sizing: border-box;
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

/* The intro keeps a readable 38rem measure but lines up with the heading:
   the constrained layout centres narrower children with margin-inline
   auto !important, so the left margin needs !important to stay at 0. */
.msa-give.msa-give .msa-give__intro {
  max-width: var(--width-text);
  margin: 0 0 var(--space-6);
  margin-left: 0 !important;
  line-height: var(--leading-body);
}
.msa-give.msa-give .msa-donate-grid {
  align-items: stretch;
  margin: 0;
}
.msa-give.msa-give .msa-donate-method {
  box-sizing: border-box;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-6) var(--space-5);
  text-align: left;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-accent);
  border-radius: 8px;
}
.msa-give.msa-give .msa-donate-method__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--type-h3);
  line-height: var(--leading-heading);
  color: var(--color-primary);
}
.msa-give.msa-give .msa-donate-method__id {
  margin: 0;
  font-weight: 600;
  color: var(--color-ink);
}
.msa-give.msa-give .msa-donate-method__detail {
  margin: 0;
  line-height: var(--leading-body);
  color: var(--color-ink-muted);
}
.msa-give.msa-give .msa-donate-method > .wp-block-buttons {
  margin: auto 0 0;
  padding-top: var(--space-3);
}
.msa-give.msa-give .msa-donate-note {
  margin-top: var(--space-6);
}

/* Donate: "Where your gift goes" (donate-impact.php). A gold rule on the
   left of each card, like the rule beside the date on the Faith Fair post. */
.msa-impact.msa-impact .msa-impact__grid > .wp-block-column > .msa-card {
  border-left: 4px solid var(--color-accent);
}

/* Donate: "Your gifts at work" (donate-proof.php). The star strip sits
   right under the number band, like the strip under the K-Day thumbnail. */
.msa-proof.msa-proof .msa-numbers {
  margin: var(--space-5) 0 0;
}
.msa-proof.msa-proof .msa-numbers + .msa-star-strip {
  margin-top: 0;
}
.msa-proof.msa-proof .msa-star-strip {
  margin-bottom: var(--space-7);
}
.msa-proof.msa-proof .msa-numbers:has(+ .msa-star-strip) {
  border-radius: 8px 8px 0 0;
}

/* --------------------------------------------------------------------------
   Contact (contact-section.php): a small black badge with a gold Lucide
   icon at the top of each card. The SVGs are inline and aria-hidden.
   -------------------------------------------------------------------------- */
.msa-contact-section.msa-contact-section .msa-contact-section__icon {
  margin: 0 0 var(--space-3);
  line-height: 0;
}
.msa-contact-section__icon > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: var(--color-accent);
}
.msa-contact-section__icon svg {
  display: block;
  width: 1.375rem;
  height: 1.375rem;
}
.msa-contact-section.msa-contact-section .msa-card > h2.wp-block-heading {
  margin: 0 0 var(--space-3);
}

/* Contact FAQ (contact-faq.php): the default triangle becomes a Lucide
   chevron that turns when the answer is open. Drawn with a CSS mask, so the
   summary text and the Details block markup stay unchanged. The summary is
   display:block (not flex) so a question with an inline <span lang> stays on
   one line; block also drops the default marker (Safari's is hidden below). */
.msa-faq.msa-faq .msa-faq__item > summary {
  position: relative;
  display: block;
  padding-right: calc(1.25rem + var(--space-4));
  list-style: none;
}
.msa-faq.msa-faq .msa-faq__item > summary::-webkit-details-marker {
  display: none;
}
.msa-faq.msa-faq .msa-faq__item > summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: -0.625rem;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--transition);
}
.msa-faq.msa-faq .msa-faq__item[open] > summary::after {
  transform: rotate(180deg);
}
@media (forced-colors: active) {
  .msa-faq.msa-faq .msa-faq__item > summary::after {
    forced-color-adjust: none;
    background-color: CanvasText;
  }
}

/* --------------------------------------------------------------------------
   Documents (documents-list.php): the card titles are h2s styled as h3s;
   keep them tight to the top of their cards.
   -------------------------------------------------------------------------- */
.msa-documents.msa-documents .msa-card > h2.wp-block-heading:first-child {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   Motion: the only movement here is the FAQ chevron turn.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .msa-faq.msa-faq .msa-faq__item > summary::after {
    transition: none;
  }
}