/* =========================================================
   AC-v3 Support modal (28.05.26)

   The nav heart button (.nav__item--support, see nav.css)
   opens this modal inside the existing lightbox shell via
   data-lightbox-open="support-panel" + a hidden figure that
   references the #support-panel-tpl template. The lightbox
   handles overlay backdrop / close / Esc / focus trap; this
   stylesheet paints the panel content and tweaks the lightbox
   close-X to track the heart's on-screen position.

   Ported from ET (25.05.26 + 27.05.26 EOD refinements). AC
   funnels to the existing ET PayPal/Patreon (single fundraising
   story across both sites).
   ========================================================= */

/* Close X tracks the heart's on-screen position when the
   Support modal is open. At desktop (>767), the right anchor
   resolves to the right edge of nav__inner: s-5 inset from the
   centred max-content's right side. At mobile (<=767), CSS
   centres the X horizontally to match the heart's centred
   position (see nav.css mobile block); the inline script in
   index-v5.html refines exact vertical alignment via
   getBoundingClientRect. Scoped via :has(.support-modal) so
   the image viewer's close button keeps its original panel-
   anchored position from lightbox.css. */
.lightbox__panel:has(.support-modal) .lightbox__close {
  position: fixed;
  top: calc(var(--nav-height) / 2);
  right: max(var(--s-5), calc((100vw - var(--max-content)) / 2 + var(--s-5)));
  left: auto;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background: transparent;
  color: #FFFFFF;
  border-radius: 999px;
}
.lightbox__panel:has(.support-modal) .lightbox__close:hover,
.lightbox__panel:has(.support-modal) .lightbox__close:focus-visible {
  background: transparent;
  color: var(--accent);
}
.lightbox__panel:has(.support-modal) .lightbox__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.lightbox__panel:has(.support-modal) .lightbox__close svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 767px) {
  .lightbox:has(.support-modal) {
    padding-top: calc(var(--nav-height) + var(--s-4));
  }
  .lightbox__panel:has(.support-modal) .lightbox__close {
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
  }
}

/* ---------- The modal panel itself ----------
   White card on the lightbox's dark backdrop with dark ink
   for the copy. Icons carry their authentic brand colours:
   Patreon coral + PayPal navy. The links use brand-coloured
   icons against dark-ink labels rather than colour-the-whole-
   link so the icon reads as the brand mark, the label reads
   as our copy. */
.support-modal {
  background: #FFFFFF;
  border-radius: var(--radius-lg, 12px);
  padding: clamp(28px, 4vw, 44px) clamp(20px, 3vw, 36px);
  color: #0F1419;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
.support-modal__title {
  margin: 0 0 var(--s-3);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(22px, 2.5vw, 28px);
  line-height: 1.2;
  color: #0F1419;
}
.support-modal__intro {
  margin: 0 auto var(--s-5);
  max-width: 42ch;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(14px, 0.4vw + 13px, 16px);
  line-height: 1.5;
  color: #5E7780;
}
.support-modal__icons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: clamp(20px, 4vw, 48px);
}
.support-modal__link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius-md, 8px);
  color: #0F1419;
  text-decoration: none;
  transition: background-color 160ms ease, transform 160ms ease;
}
a.support-modal__link:hover,
a.support-modal__link:focus-visible {
  background-color: rgba(15, 20, 25, 0.05);
  transform: translateY(-2px);
}
.support-modal__link--pending {
  cursor: default;
  opacity: 0.55;
}

/* Brand wordmarks: cap-height matching rather than bounding-box
   matching so the two columns align visually. PayPal 26px gives
   caps ~14px; Patreon 16px gives caps ~14px, padded 5px top + 5px
   bottom for matching OUTER height of 26px. The marks carry their
   own colour, so no currentColor tinting rule is needed. */
.support-modal__icon {
  display: block;
}
.support-modal__icon--wordmark {
  width: auto;
  height: 26px;
  box-sizing: content-box;
}
.support-modal__link[aria-label*="Patreon" i] .support-modal__icon--wordmark {
  height: 16px;
  padding: 5px 0;
}
.support-modal__link-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: #0F1419;
}
.support-modal__link-meta {
  font-family: var(--font-sans);
  font-size: 11px;
  color: #7B8E94;
  letter-spacing: 0.02em;
}
@media (prefers-reduced-motion: reduce) {
  a.support-modal__link:hover,
  a.support-modal__link:focus-visible { transform: none; }
}