/* Shared styles for the Outside Contributions pages
   (/outside-contributions.html and /outside-contributions/*.html).
   Mirrors the scoped rules on /contributions.html so the two sections read
   as one, and is scoped to body.supporter-page so the rest of the site is
   untouched. */

/* Link colours. styles.css sets `.btn { color: var(--white) }` and a global
   `a { text-transform: capitalize }`, both of which are reset here. */
body.supporter-page .supporter-hero a,
body.supporter-page .faq a {
  color: var(--brand-color);
  text-transform: none;
}
body.supporter-page .supporter-hero a:hover,
body.supporter-page .supporter-hero a:focus,
body.supporter-page .faq a:hover,
body.supporter-page .faq a:focus {
  color: var(--dark-primary);
  text-decoration: underline;
}
body.supporter-page .faq .supporter-cta-link {
  font-weight: 800;
}

/* Thank-you band: dark panel, same treatment as the adoption band on
   /contributions.html. */
body.supporter-page .thanks-band {
  background-color: var(--primary-color);
  color: var(--white);
  border-radius: var(--border-radius);
  padding: 40px 32px;
}
body.supporter-page .thanks-band .thanks-headline {
  color: var(--white);
  margin: 0;
}
body.supporter-page .thanks-band .thanks-headline em {
  font-style: normal;
  color: var(--brand-color);
}
body.supporter-page .thanks-band p {
  color: #d8d8d8;
  margin: 0;
}
body.supporter-page .thanks-band i {
  color: var(--brand-color);
}
body.supporter-page .thanks-band .thanks-rule {
  width: 64px;
  height: 3px;
  background-color: var(--brand-color);
  border: 0;
  opacity: 1;
  margin: 4px 0 0 0;
}

/* Supporter cards on the listing page. */
body.supporter-page .supporter-card {
  transition: box-shadow .15s ease, transform .15s ease;
}
body.supporter-page .supporter-card:hover,
body.supporter-page .supporter-card:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(14, 14, 14, .14);
}
body.supporter-page .supporter-logo {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
}
/* Square icons that are not already round get rounded corners and a hairline
   so a white background does not vanish into the grey .bg-box card. */
body.supporter-page .supporter-logo-square {
  border-radius: 16px;
  border: 1px solid #e0e0e0;
  background-color: var(--white);
}
/* Vendor logos. styles.css sets a global `img { width: 100% }`, which
   overrides the width attributes in the markup and stretches a logo to the
   full width of its card (a 2551px PNG fills the whole column). Every logo
   class below therefore pins its size explicitly. */

/* Horizontal wordmark logos (e.g. Horizon3): fixed height, natural width. */
body.supporter-page img.supporter-logo-wide {
  height: 44px;
  width: auto;
  max-width: 100%;
}
/* Square or round icon in a page hero (e.g. Zulip). */
body.supporter-page img.supporter-logo-hero {
  width: 96px;
  height: 96px;
}
/* Wordmark inside the dark tile (e.g. eSHARE). */
body.supporter-page .supporter-wordmark-tile img {
  width: 214px;
  height: auto;
  max-width: 100%;
}
/* Dark tile for white wordmarks (e.g. eSHARE's official logo is white only). */
body.supporter-page .supporter-wordmark-tile {
  display: inline-block;
  background-color: var(--primary-color);
  border-radius: var(--border-radius);
  padding: 18px 28px;
  line-height: 0;
}
body.supporter-page .supporter-card .heading-3 a {
  color: var(--primary-color);
}
body.supporter-page .supporter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.supporter-page .supporter-tag {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid var(--brand-color);
  border-radius: 999px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--brand-color);
}
body.supporter-page .supporter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: auto;
}
body.supporter-page .supporter-card-placeholder {
  border: 2px dashed #d0d0d0;
  background-color: transparent;
}

/* Feature grid on the vendor detail pages. */
body.supporter-page .feature-card i {
  color: var(--brand-color);
}
body.supporter-page .feature-card .heading-4 {
  margin: 0;
}

/* Comparison table. styles.css ships no table rules. The wrapper scrolls
   horizontally on narrow screens so the page body never does. */
body.supporter-page .cmp-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
body.supporter-page table.cmp-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  background-color: var(--white);
  border-radius: var(--border-radius);
  overflow: hidden;
}
body.supporter-page table.cmp-table th,
body.supporter-page table.cmp-table td {
  padding: 14px 18px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #e4e4e4;
}
body.supporter-page table.cmp-table thead th {
  background-color: var(--primary-color);
  color: var(--white);
  font-weight: 700;
  white-space: nowrap;
}
body.supporter-page table.cmp-table thead th.cmp-featured {
  background-color: var(--brand-color);
}
body.supporter-page table.cmp-table tbody tr:nth-child(even) {
  background-color: var(--box-color);
}
body.supporter-page table.cmp-table tbody tr:last-child td,
body.supporter-page table.cmp-table tbody tr:last-child th {
  border-bottom: 0;
}
body.supporter-page table.cmp-table tbody th {
  font-weight: 700;
  color: var(--primary-color);
}
body.supporter-page table.cmp-table td.cmp-featured {
  font-weight: 700;
  color: var(--primary-color);
}
body.supporter-page table.cmp-table td.cmp-featured i {
  color: #1a8f3c;
}

/* Sources list. */
body.supporter-page .sources-list {
  padding-left: 1.2rem;
  margin: 0;
}
body.supporter-page .sources-list li {
  margin-bottom: 6px;
  word-break: break-word;
}

@media (prefers-reduced-motion: reduce) {
  body.supporter-page .supporter-card { transition: none; }
  body.supporter-page .supporter-card:hover,
  body.supporter-page .supporter-card:focus-within { transform: none; }
}