/* Annual Appeal page — /support
   All selectors namespaced .appeal- to avoid colliding with Canvas theme. */

.appeal {
  --app-navy: #262262;
  --app-red:  #d95350;
  --app-blue: #2b99b9;
  --app-ink:  #3a3a42;
  --app-muted:#5b5b63;
  --app-line: #e7e4dd;
  --app-tint: #f6f4ef;
  --app-wrap: 1140px;
  color: var(--app-ink);
  font-family: 'Raleway','Lato',-apple-system,BlinkMacSystemFont,sans-serif;
  line-height: 1.6;
}
.appeal *{box-sizing:border-box;}

.appeal-wrap{
  width:92%; max-width:var(--app-wrap); margin:0 auto;
}

/* ---- Hero ----
   Full-bleed landscape illustration; the headline + payoff live in a
   continuing dark navy band directly beneath so the artwork doesn't
   compete with text. */
.appeal-hero{
  width:100%;
  height:clamp(320px, 44vw, 580px);
  background:#2a2340 url('/images/annual-appeal-hero-wide.jpg') center top/cover no-repeat;
}
.appeal-hero-copy{
  width:100%; background:#2a2340; color:#fff;
  padding:30px 0 36px;
}
.appeal-hero-copy__inner{
  width:92%; max-width:var(--app-wrap); margin:0 auto;
}
.appeal-hero-copy__title{
  color:#fff;
  font-size:clamp(26px, 3.6vw, 42px);
  font-weight:600; letter-spacing:-.01em; line-height:1.18;
  margin:0 0 12px; max-width:28ch;
}
.appeal-hero-copy__payoff{
  font-size:clamp(16px, 1.6vw, 19px);
  color:#f0d9d8; margin:0; max-width:58ch;
}
.appeal-sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---- Sections ---- */
.appeal-section{ padding:48px 0; }
.appeal-section--series{ background:var(--app-tint); }
.appeal-section--annual{ background:#eef2f8; }
.appeal-both{ background:#fff; }

/* ---- Letter copy ---- */
.appeal-letter p{ font-size:16px; max-width:70ch; margin:0 0 14px; }
.appeal-letter__lead{ font-size:19px !important; color:var(--app-navy); }
.appeal-letter__dl{ margin-top:22px !important; }
.appeal-link{
  color:var(--app-navy); font-weight:700; text-decoration:underline;
}

/* ---- Fund identity marks (above each fund block) ---- */
.appeal-fund__logo{
  display:block; width:100%; max-width:480px; height:auto;
  margin:0 0 24px;
}
.appeal-fund__eyebrow{
  color:var(--app-red); font-size:11px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  margin-bottom:6px;
}

/* ---- Fund heading ---- */
.appeal-fund{ max-width:70ch; margin-bottom:28px; }
.appeal-fund__title{
  color:var(--app-navy); font-size:clamp(22px,2.6vw,30px); font-weight:800;
  margin:0 0 10px;
}
.appeal-fund__lede{ font-size:16px; margin:0; }

/* ---- Tier cards ---- */
.appeal-tiers{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  /* Opening one card must not stretch its row-mates to the same height. */
  align-items:start;
}
/* Fixed column counts above phone width so neither fund ends on an orphan
   row: Series (5 tiers) runs 3 + 2 until there is room for 5 across; Annual
   (6 tiers) runs 3 + 3. auto-fit alone gave 4 + 1 and 4 + 2 at desktop. */
@media (min-width:721px){
  .appeal-tiers[data-fund="series"],
  .appeal-tiers[data-fund="annual"]{ grid-template-columns:repeat(3,1fr); }
}
/* 1230px is the narrowest viewport where a five-across card is wide enough
   (~215px) for the open form's "Add to appeal basket" button on one line. */
@media (min-width:1230px){
  .appeal-tiers[data-fund="series"]{ grid-template-columns:repeat(5,1fr); }
}
/* The card is a plain container; the only control that opens it is the
   .appeal-tier__trigger button inside. The amount form, status line and
   Change/Remove links are added by JS as siblings of the trigger. */
.appeal-tier{
  background:#fff; border:1px solid var(--app-line); border-radius:10px;
  padding:18px 20px;
  display:flex; flex-direction:column; gap:4px;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.appeal-tier:hover,
.appeal-tier:focus-within{
  border-color:var(--app-blue);
  box-shadow:0 8px 20px rgba(38,34,98,.12);
  transform:translateY(-2px);
}
/* Centered portrait: seal above the tier name, range and CTA. */
.appeal-tier__trigger{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  width:100%; text-align:center;
  background:transparent; border:0; padding:14px 10px 6px;
  font:inherit; color:inherit; cursor:pointer;
}
.appeal-tier__trigger:focus{ outline:none; }
.appeal-tier__trigger:focus-visible{
  outline:3px solid var(--app-blue);
  outline-offset:2px;
  border-radius:4px;
}
.appeal-tier.is-active{
  border-color:var(--app-navy);
  box-shadow:0 10px 24px rgba(38,34,98,.18);
}
.appeal-tier__name{  font-weight:500; color:var(--app-navy); font-size:19px; }
.appeal-tier__range{ color:var(--app-muted); font-size:14px; }
.appeal-tier__cta{   color:var(--app-blue); font-size:12.5px; font-weight:500; letter-spacing:.02em; margin-top:2px; }

/* ---- Tier badge: the GMF seal (one shared <symbol> in support.php) ----
   The seal's inner circle is filled with currentColor, so the tier colour
   set on the card below flows in through `color`. */
.appeal-tier__badge{
  display:block;
  width:78px; height:78px;
  color: var(--appeal-tier-color);  /* drives the inner circle via currentColor */
  margin-bottom:4px;
}

/* ---- Tier palette: metals for Series, jewels for Annual Fund ---- */
.appeal-tier[data-tier="palladium"]  { --appeal-tier-color: #5A5578; }
.appeal-tier[data-tier="platinum"]   { --appeal-tier-color: #686572; }
.appeal-tier[data-tier="gold"]       { --appeal-tier-color: #A07A1E; }
.appeal-tier[data-tier="silver"]     { --appeal-tier-color: #6E6E75; }
.appeal-tier[data-tier="bronze"]     { --appeal-tier-color: #A26B3A; }
.appeal-tier[data-tier="benefactor"]  { --appeal-tier-color: #8B2439; }  /* ruby */
.appeal-tier[data-tier="sustainer"]   { --appeal-tier-color: #5E2A7A; }  /* amethyst */
.appeal-tier[data-tier="builder"]     { --appeal-tier-color: #1F4D8F; }  /* sapphire */
.appeal-tier[data-tier="contributor"] { --appeal-tier-color: #2C7030; }  /* emerald */
.appeal-tier[data-tier="supporter"]   { --appeal-tier-color: #B4411F; }  /* topaz */
.appeal-tier[data-tier="member"]      { --appeal-tier-color: #3F8691; }  /* aquamarine */

/* ---- Tier card: inline amount form (added by JS) ---- */
.appeal-tier__form{
  display:none; margin-top:14px; padding-top:14px;
  border-top:1px solid var(--app-line);
}
.appeal-tier.is-open .appeal-tier__cta{ display:none; }
.appeal-tier.is-open .appeal-tier__form{ display:block; }
.appeal-tier__label{
  display:block; font-size:12.5px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--app-muted); margin-bottom:6px;
}
.appeal-tier__inputwrap{
  display:flex; align-items:center; justify-content:center;
  gap:8px; margin:6px auto 14px;
}
.appeal-tier__dollar{
  color:var(--app-muted); font-weight:700;
  font-size:clamp(22px, 3.5vw, 30px);
  line-height:1;
}
.appeal-tier__input{
  flex:0 0 auto; width:6.5ch; min-width:0;
  font-size:clamp(36px, 5vw, 46px);
  font-weight:700; letter-spacing:-.015em;
  text-align:center; line-height:1;
  padding:10px 10px; font-family:inherit;
  color:var(--app-navy);
  border:1px solid var(--app-line); border-radius:10px; background:#fff;
  font-variant-numeric: tabular-nums;
  /* Hide the native number spinner — our +/- buttons alongside are the
     primary stepping UI and the native spinner looks tiny next to the big
     digits. */
  -moz-appearance:textfield;
}
/* +/- stepper buttons that bump the input by the tier's data-step. */
.appeal-tier__step{
  flex:0 0 auto;
  width:clamp(40px, 4.4vw, 48px);
  height:clamp(48px, 5.4vw, 58px);
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(22px, 3vw, 28px); font-weight:700; line-height:1;
  color:var(--app-navy); background:#f6f4ee;
  border:1px solid var(--app-line); border-radius:10px;
  cursor:pointer; user-select:none;
  padding:0; font-family:inherit;
  transition:background .15s ease;
}
.appeal-tier__step:hover{ background:#ebe6d8; }
.appeal-tier__step:active{ transform:translateY(1px); }
.appeal-tier__step:focus-visible{
  outline:none; border-color:var(--app-blue);
  box-shadow:0 0 0 3px rgba(43,153,185,.15);
}
.appeal-tier__input::-webkit-outer-spin-button,
.appeal-tier__input::-webkit-inner-spin-button{
  -webkit-appearance:none; margin:0;
}
.appeal-tier__input:focus{
  outline:none; border-color:var(--app-blue);
  box-shadow:0 0 0 3px rgba(43,153,185,.15);
}
.appeal-tier__btns{ display:flex; gap:10px; flex-wrap:wrap; }
/* Five-across cards leave ~176px for the form: keep "Add to appeal basket"
   on one line, full width, with Cancel beneath. */
.appeal-tier__btns .appeal-btn{ font-size:14px; padding:10px 14px; }
.appeal-tier__btns .appeal-btn--primary{ flex:1 1 100%; }
.appeal-tier__input[aria-invalid="true"]{ border-color:#b43b38; }
.appeal-tier__err{
  color:#b43b38; font-size:14px; font-weight:600;
  margin:10px 0 0; padding:0;
}
.appeal-tier__err[hidden]{ display:none; }

/* ---- Tier card: added state ---- */
.appeal-tier.is-added{
  background:#eaf3ee; border-color:#b7d8c4;
}
.appeal-tier.is-added .appeal-tier__cta{ display:none; }
.appeal-tier.is-added .appeal-tier__form{ display:none; }
.appeal-tier__status{
  display:none; font-weight:700; color:#2a7a3c; margin-top:6px;
  text-align:center;
}
.appeal-tier.is-added .appeal-tier__status{ display:block; }
.appeal-tier__links{
  display:none; gap:12px; margin-top:4px;
  font-size:14px; justify-content:center; text-align:center;
}
.appeal-tier.is-added .appeal-tier__links{ display:flex; }
.appeal-tier__link{
  background:none; border:0; padding:0; color:var(--app-blue); cursor:pointer;
  font-family:inherit; font-size:inherit; text-decoration:underline;
}
.appeal-tier__link--danger{ color:var(--app-red); }

/* ---- Buttons ---- */
.appeal-btn{
  display:inline-block; font-family:inherit; font-size:15px; font-weight:700;
  padding:10px 20px; border-radius:8px; text-decoration:none; text-align:center;
  border:1px solid transparent; cursor:pointer;
}
.appeal-btn--primary{ background:var(--app-red); color:#fff; }
.appeal-btn--primary:hover{ background:#c4433f; color:#fff; }
.appeal-btn--ghost{ background:transparent; color:var(--app-navy); border-color:var(--app-line); }
.appeal-btn[aria-disabled="true"],
.appeal-tier__link[aria-disabled="true"]{
  opacity:.6; cursor:progress;
}
.appeal-btn--primary[aria-disabled="true"]:hover{ background:var(--app-red); }

/* ---- Combined CTA ---- */
.appeal-both__title{
  color:var(--app-navy); font-size:clamp(22px,2.6vw,30px); font-weight:800;
  margin:0 0 16px;
}
.appeal-both p{ font-size:16px; max-width:70ch; margin:0 0 14px; }

/* ---- Basket strip (shown by JS once user adds something) ---- */
.appeal-basket{
  position:sticky; bottom:0; z-index:20;
  background:var(--app-navy); color:#fff;
  padding:14px 0; box-shadow:0 -8px 24px rgba(0,0,0,.18);
}
.appeal-basket__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap;
}
/* The theme's fixed back-to-top button sits bottom-right and would cover the
   strip's Continue button. annual-appeal.js publishes the strip's height as
   --appeal-basket-h (0px while hidden); lift the button clear of it. The
   .stretched prefix matches the theme's own `.stretched #gotoTop` rule. */
.stretched #gotoTop{ bottom:calc(30px + var(--appeal-basket-h, 0px)); }
.appeal-basket__chips{
  display:flex; gap:10px; flex-wrap:wrap; font-size:14.5px;
}
.appeal-basket__chip{
  background:rgba(255,255,255,.12); padding:6px 12px; border-radius:16px;
  display:inline-flex; gap:8px; align-items:center;
}

/* ---- Error + footer ---- */
.appeal-err{
  width:92%; max-width:var(--app-wrap); margin:0 auto;
  color:var(--app-red); font-weight:700; font-size:14.5px;
}
.appeal-err:empty{ display:none; }
.appeal-foot{ background:var(--app-tint); font-size:14px; color:var(--app-muted); }
.appeal-foot p{ margin:0 0 10px; }

/* ---- Responsive ---- */
@media (max-width:720px){
  .appeal-hero{ padding:24px 0 16px; }
  .appeal-section{ padding:34px 0; }
  .appeal-tiers{ grid-template-columns:1fr; }
  /* Seal scales down on phones so a stack of 11 portrait cards is less tall. */
  .appeal-tier__badge{ width:64px; height:64px; }
  .appeal-basket__inner{ flex-direction:column; align-items:stretch; }
  .appeal-basket__inner .appeal-btn{ width:100%; }
}