<script setup lang="ts">
import { computed, onUnmounted, ref, watch } from 'vue'

import { privacyContentToHtml } from '../../lib/privacyContent'

interface HomeSocialLink {
  label: string
  platform: string
  icon: string
  url: string
}

interface FooterLink {
  key: string
  label: string
  url: string
  content: string
}

interface SiteContent {
  newsletterUrl: string
  shareXUrl: string
  shareDiscordUrl: string
}

interface FaqItem {
  question: string
  answer: string
}

const props = defineProps<{
  communitySocialLinks: HomeSocialLink[]
  siteContent: SiteContent
  faqItems: FaqItem[]
  footerLinks: FooterLink[]
  onOpenPrivacy: () => void
  onShowactApply?: () => void
  isUploadedSocialIcon: (icon: string | null | undefined) => boolean
  socialSimpleIconPath: (platform: string | null | undefined) => string
  socialSimpleIconColor: (platform: string | null | undefined) => string
  platformKey: (platform: string | null | undefined) => string
}>()

const openFaqIndex = ref<number | null>(null)

function toggleFaq(index: number) {
  openFaqIndex.value = openFaqIndex.value === index ? null : index
}

const activeFooterLink = ref<FooterLink | null>(null)
const linkCopied = ref(false)
const activeFooterHtml = computed(() => privacyContentToHtml(activeFooterLink.value?.content || ''))
const safeNewsletterUrl = computed(() =>
  isSafePublicUrl(props.siteContent.newsletterUrl) ? props.siteContent.newsletterUrl : '',
)
const safeShareXUrl = computed(() =>
  isSafePublicUrl(props.siteContent.shareXUrl) ? props.siteContent.shareXUrl : '',
)
const safeShareDiscordUrl = computed(() =>
  isSafePublicUrl(props.siteContent.shareDiscordUrl) ? props.siteContent.shareDiscordUrl : '',
)
const isSponsorFooterModal = computed(() => activeFooterLink.value?.key === 'sponsors')
const footerModalEyebrow = computed(() =>
  isSponsorFooterModal.value ? 'Support the show' : 'Footer Seite',
)
const footerModalIntro = computed(() => {
  if (isSponsorFooterModal.value) {
    return 'Partner, Sponsoren und kreative Wegbegleiter machen diese Award-Nacht erst möglich.'
  }

  return 'Alle Infos kommen direkt aus dem Landingpage-Content und bleiben dadurch jederzeit aktuell.'
})

function openFooterLink(event: Event, link: FooterLink) {
  if (link.key === 'showacts' && props.onShowactApply) {
    event.preventDefault()
    props.onShowactApply()
    return
  }
  if (!link.content.trim()) {
    if (!link.url.trim()) {
      event.preventDefault()
    }
    return
  }

  event.preventDefault()
  activeFooterLink.value = link
}

function closeFooterLink() {
  activeFooterLink.value = null
}

async function copyLink() {
  try {
    await navigator.clipboard.writeText(window.location.href)
    linkCopied.value = true
    setTimeout(() => { linkCopied.value = false }, 2000)
  } catch {
    // clipboard not available
  }
}

function isSafePublicUrl(value: string | null | undefined) {
  if (!value) return false

  try {
    const url = new URL(value)
    return url.protocol === 'http:' || url.protocol === 'https:'
  } catch {
    return false
  }
}

watch(activeFooterLink, (link) => {
  document.body.style.overflow = link ? 'hidden' : ''
})

onUnmounted(() => {
  document.body.style.overflow = ''
})
</script>

<template>
  <section id="host" style="background:linear-gradient(180deg,#ece3fa 0%,#e6dcf6 100%);border-top:1px solid #ddd0f2;border-bottom:1px solid #ddd0f2;padding:84px 0;">
    <div style="max-width:1200px;margin:0 auto;padding:0 24px;">
      <div style="position:relative;display:grid;grid-template-columns:1.62fr 1fr;gap:26px;align-items:stretch;" data-community-grid>
        <div class="home-community-card" style="position:relative;overflow:visible;background:#f5f0fc;border:1px solid #e9e0f8;border-radius:28px;padding:46px 46px 42px;min-height:360px;">
          <div class="home-community-card__content" style="position:relative;z-index:2;max-width:62%;">
            <h2 style="margin:0 0 14px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:clamp(26px,3vw,36px);letter-spacing:.5px;color:#5f44ad;">COMMUNITY &amp; UPDATES</h2>
            <p style="font-size:16px;line-height:1.6;color:#7d7491;margin:0 0 26px;">Tritt unserer Community bei und verpasse keine News, Updates und Behind-the-Scenes!</p>
            <div style="display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px;">
              <a
                v-for="social in props.communitySocialLinks"
                :key="`community-${social.platform}`"
                :href="social.url"
                :aria-label="social.label"
                style="display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:13px;background:#fff;border:1px solid #e9e0f8;box-shadow:0 4px 12px rgba(124,86,196,.08);text-decoration:none;"
                style-hover="transform:translateY(-2px);"
              >
                <template v-if="props.isUploadedSocialIcon(social.icon)">
                  <img :src="social.icon" :alt="social.label" style="width:24px;height:24px;object-fit:contain;" />
                </template>
                <template v-else-if="props.socialSimpleIconPath(social.platform)">
                  <svg width="20" height="20" viewBox="0 0 24 24" :fill="props.socialSimpleIconColor(social.platform)"><path :d="props.socialSimpleIconPath(social.platform)" /></svg>
                </template>
                <template v-else-if="props.platformKey(social.platform) === 'twitch'">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="#9146FF"><path d="M4 2L2.4 6v14.5h5V23h2.7l2.5-2.5h4L21.6 16V2H4zm15.3 13.1l-2.9 2.9h-4.4l-2.5 2.5v-2.5H6.7V3.7h12.6v11.4z"/><path d="M11.1 7.1h1.7v5h-1.7zM15.7 7.1h1.7v5h-1.7z"/></svg>
                </template>
                <template v-else-if="props.platformKey(social.platform) === 'youtube'">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="#FF0000"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2 31 31 0 0 0 0 12a31 31 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1A31 31 0 0 0 24 12a31 31 0 0 0-.5-5.8zM9.5 15.5v-7l6.5 3.5z"/></svg>
                </template>
                <template v-else-if="props.platformKey(social.platform) === 'instagram'">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#E1306C" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17" cy="7" r="1.1" fill="#E1306C" stroke="none"/></svg>
                </template>
                <template v-else-if="props.platformKey(social.platform) === 'discord'">
                  <svg width="21" height="21" viewBox="0 0 24 24" fill="#5865F2"><path d="M19.5 5.3A16 16 0 0 0 15.5 4l-.25.5a14.6 14.6 0 0 1 3.3 1.05 13 13 0 0 0-11.1 0A14.6 14.6 0 0 1 10.75 4.5L10.5 4A16 16 0 0 0 6.5 5.3 16.6 16.6 0 0 0 3.7 16.5a16.1 16.1 0 0 0 4.9 2.5l.6-.85a10.5 10.5 0 0 1-1.65-.8l.4-.3a11.5 11.5 0 0 0 9.9 0l.4.3a10.5 10.5 0 0 1-1.65.8l.6.85a16.1 16.1 0 0 0 4.9-2.5 16.6 16.6 0 0 0-2.8-11.2zM9.4 14.2c-.95 0-1.7-.88-1.7-1.95s.75-1.95 1.7-1.95 1.72.88 1.7 1.95c0 1.07-.76 1.95-1.7 1.95zm5.2 0c-.95 0-1.7-.88-1.7-1.95s.75-1.95 1.7-1.95 1.72.88 1.7 1.95c0 1.07-.75 1.95-1.7 1.95z"/></svg>
                </template>
                <template v-else>
                  <span style="font-size:18px;font-weight:800;color:#5f44ad;">{{ social.icon || '✦' }}</span>
                </template>
              </a>
            </div>
            <a v-if="safeNewsletterUrl" :href="safeNewsletterUrl" target="_blank" rel="noopener" style="display:inline-flex;align-items:center;gap:11px;padding:15px 26px;border-radius:14px;background:#fff;border:1px solid #e3d8f5;color:#5f44ad;text-decoration:none;font-family:'Outfit',sans-serif;font-weight:600;font-size:16px;box-shadow:0 8px 22px rgba(124,86,196,.1);" style-hover="transform:translateY(-2px);border-color:#c9b6f0;"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="#8b6cdb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>Newsletter abonnieren</a>
          </div>
          <img class="home-community-card__image" src="/assets/jayu-hero.png" alt="Jayuhime" style="position:absolute;z-index:1;right:-26px;bottom:0;height:430px;width:auto;pointer-events:none;filter:drop-shadow(0 18px 36px rgba(120,80,180,.22));" />
        </div>
        <div class="home-share-card" style="background:linear-gradient(160deg,#fdf6f6,#faf3fb);border:1px solid #f0e7f2;border-radius:28px;padding:46px 38px;display:flex;flex-direction:column;">
          <h2 style="margin:0 0 14px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:clamp(24px,2.6vw,32px);letter-spacing:.5px;color:#5f44ad;">TEILE DIE AWARDS</h2>
          <p style="font-size:16px;line-height:1.6;color:#7d7491;margin:0 0 28px;">Supporte deine Favoriten und teile die Awards mit deinen Freunden!</p>
          <div style="display:flex;flex-direction:column;gap:14px;margin-top:auto;">
            <a v-if="safeShareXUrl" :href="safeShareXUrl" target="_blank" rel="noopener noreferrer" referrerpolicy="no-referrer" style="display:flex;align-items:center;justify-content:center;gap:12px;padding:15px 22px;border-radius:14px;background:#15131c;color:#fff;text-decoration:none;font-family:'Outfit',sans-serif;font-weight:600;font-size:16px;box-shadow:0 10px 24px rgba(20,18,28,.2);" style-hover="transform:translateY(-2px);"><svg width="17" height="17" viewBox="0 0 24 24" fill="#fff"><path d="M18.9 1.6h3.5l-7.6 8.7L23.7 22h-7l-5.5-7.2L4.9 22H1.4l8.1-9.3L1 1.6h7.2l4.9 6.5 5.8-6.5zm-1.2 18.3h1.9L7.1 3.6H5z"/></svg>Auf X teilen</a>
            <a v-if="safeShareDiscordUrl" :href="safeShareDiscordUrl" target="_blank" rel="noopener noreferrer" referrerpolicy="no-referrer" style="display:flex;align-items:center;justify-content:center;gap:12px;padding:15px 22px;border-radius:14px;background:linear-gradient(135deg,#7c5fd0,#6d4fd0);color:#fff;text-decoration:none;font-family:'Outfit',sans-serif;font-weight:600;font-size:16px;box-shadow:0 10px 24px rgba(124,86,196,.3);" style-hover="transform:translateY(-2px);"><svg width="19" height="19" viewBox="0 0 24 24" fill="#fff"><path d="M19.5 5.3A16 16 0 0 0 15.5 4l-.25.5a14.6 14.6 0 0 1 3.3 1.05 13 13 0 0 0-11.1 0A14.6 14.6 0 0 1 10.75 4.5L10.5 4A16 16 0 0 0 6.5 5.3 16.6 16.6 0 0 0 3.7 16.5a16.1 16.1 0 0 0 4.9 2.5l.6-.85a10.5 10.5 0 0 1-1.65-.8l.4-.3a11.5 11.5 0 0 0 9.9 0l.4.3a10.5 10.5 0 0 1-1.65.8l.6.85a16.1 16.1 0 0 0 4.9-2.5 16.6 16.6 0 0 0-2.8-11.2zM9.4 14.2c-.95 0-1.7-.88-1.7-1.95s.75-1.95 1.7-1.95 1.72.88 1.7 1.95c0 1.07-.76 1.95-1.7 1.95zm5.2 0c-.95 0-1.7-.88-1.7-1.95s.75-1.95 1.7-1.95 1.72.88 1.7 1.95c0 1.07-.75 1.95-1.7 1.95z"/></svg>Auf Discord teilen</a>
            <a href="#" @click.prevent="copyLink" style="display:flex;align-items:center;justify-content:center;gap:11px;padding:15px 22px;border-radius:14px;background:#fff;border:1px solid #e9e0f8;color:#5f44ad;text-decoration:none;font-family:'Outfit',sans-serif;font-weight:600;font-size:16px;box-shadow:0 6px 16px rgba(124,86,196,.08);" style-hover="transform:translateY(-2px);border-color:#c9b6f0;"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#8b6cdb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1.5 1.5"/><path d="M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1.5-1.5"/></svg>{{ linkCopied ? 'Kopiert ✓' : 'Link kopieren' }}</a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section id="faq" class="home-section" style="max-width:880px;margin:0 auto;padding:90px 24px;">
    <div style="text-align:center;margin-bottom:46px;">
      <div style="font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent,#8b6cdb);margin-bottom:12px;">✧ Häufige Fragen</div>
      <h2 style="font-family:'Fredoka',sans-serif;font-weight:700;font-size:clamp(32px,4vw,48px);margin:0 0 14px;letter-spacing:0;color:var(--ink,#3f3556);">FAQ</h2>
      <p style="font-size:17px;color:var(--muted,#8a8398);max-width:520px;margin:0 auto;">Alles, was du über Nominierung, Voting und die Show wissen musst.</p>
    </div>
    <div style="display:flex;flex-direction:column;gap:14px;">
      <div
        v-for="(item, index) in props.faqItems"
        :key="item.question"
        class="faq-item"
        :class="{ 'faq-item--open': openFaqIndex === index }"
      >
        <button class="faq-trigger" @click="toggleFaq(index)" :aria-expanded="openFaqIndex === index">
          <span class="faq-question">
            <span class="faq-star" aria-hidden="true">✦</span>
            {{ item.question }}
          </span>
          <span class="faq-toggle" aria-hidden="true">{{ openFaqIndex === index ? '×' : '+' }}</span>
        </button>
        <p v-show="openFaqIndex === index" class="faq-answer">{{ item.answer }}</p>
      </div>
    </div>
  </section>

  <footer style="border-top:1px solid var(--line,rgba(255,255,255,.12));">
    <div style="max-width:1200px;margin:0 auto;padding:50px 24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;">
      <div style="display:flex;align-items:center;gap:10px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:17px;">
        <span style="display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:10px;background:linear-gradient(135deg,var(--accent,#ff5fa2),var(--accent2,#a06bff));color:#fff;font-size:15px;">✦</span>
        VTuber Star Award 2026
      </div>
      <div style="display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;font-size:14px;font-weight:500;">
        <template v-for="link in props.footerLinks" :key="link.key || link.label">
          <button
            v-if="link.content"
            type="button"
            style="background:none;border:none;padding:0;color:var(--muted,#8a8398);text-decoration:none;cursor:pointer;font-size:inherit;font-family:inherit;font-weight:inherit;"
            style-hover="color:var(--accent,#8b6cdb);"
            @click="openFooterLink($event, link)"
          >
            {{ link.label }}
          </button>
          <a
            v-else
            :href="link.url || '#'"
            target="_blank"
            rel="noopener"
            style="color:var(--muted,#8a8398);text-decoration:none;"
            style-hover="color:var(--accent,#8b6cdb);"
            @click="openFooterLink($event, link)"
          >
            {{ link.label }}
          </a>
        </template>
        <button @click="props.onOpenPrivacy" style="background:none;border:none;padding:0;color:var(--muted,#8a8398);text-decoration:none;cursor:pointer;font-size:inherit;" style-hover="color:var(--accent,#8b6cdb);">Datenschutz</button>
      </div>
      <div style="font-size:13px;color:var(--muted,#c9b8da);">© 2026 · Made with ♡ &amp; Chaos</div>
    </div>
  </footer>

  <template v-if="activeFooterLink">
    <div class="home-modal-overlay" @click="closeFooterLink" style="position:fixed;inset:0;z-index:420;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(40,24,70,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);">
      <div class="home-modal" @click.stop style="position:relative;width:100%;max-width:780px;max-height:88vh;overflow:hidden;display:flex;flex-direction:column;background:linear-gradient(180deg,#fffaff 0%,#ffffff 42%,#faf7ff 100%);border:1px solid rgba(221,208,242,.9);border-radius:32px;box-shadow:0 40px 90px rgba(40,24,70,.4);">
        <div style="position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:28px 32px 24px;border-bottom:1px solid #f1ecfb;flex:none;overflow:hidden;background:radial-gradient(circle at top left,rgba(193,163,255,.22),transparent 42%),radial-gradient(circle at top right,rgba(255,191,219,.2),transparent 36%),linear-gradient(135deg,#fbf7ff 0%,#ffffff 54%,#fff7fb 100%);">
          <div style="position:absolute;right:88px;top:20px;font-size:14px;color:#d6c3fb;">✦ ✦ ✦</div>
          <div style="max-width:560px;position:relative;z-index:1;">
            <div style="display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.82);border:1px solid rgba(221,208,242,.95);box-shadow:0 10px 24px rgba(124,86,196,.08);font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#8b6cdb;margin-bottom:14px;">
              <span style="font-size:12px;">✦</span>
              {{ footerModalEyebrow }}
            </div>
            <h2 style="font-family:'Fredoka',sans-serif;font-weight:700;font-size:clamp(28px,4vw,34px);line-height:1.05;margin:0;color:#3f3556;">{{ activeFooterLink.label }}</h2>
            <p style="margin:14px 0 0;font-family:'Outfit',sans-serif;font-size:15px;line-height:1.7;color:#7d7491;">
              {{ footerModalIntro }}
            </p>
          </div>
          <button type="button" @click="closeFooterLink" style="position:relative;z-index:1;width:42px;height:42px;border-radius:50%;border:1px solid rgba(221,208,242,.95);background:rgba(255,255,255,.92);color:#8b6cdb;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 28px rgba(124,86,196,.12);" style-hover="background:#f3ebff;">✕</button>
        </div>
        <div style="overflow-y:auto;padding:28px 32px 32px;flex:1;font-family:'Outfit',sans-serif;font-size:14px;line-height:1.7;color:#6f6685;">
          <div
            v-if="isSponsorFooterModal"
            style="display:grid;gap:14px;margin-bottom:18px;"
          >
            <div style="display:flex;flex-wrap:wrap;gap:10px;">
              <span class="home-sponsor-pill">Für Newcomer, Rising Stars und Legenden</span>
              <span class="home-sponsor-pill">Community, Show und Sichtbarkeit</span>
              <span class="home-sponsor-pill">Gemeinsam tragen wir die Bühne</span>
            </div>
          </div>
          <div v-if="activeFooterHtml" class="home-footer-modal-surface">
            <div class="home-footer-page-content" v-html="activeFooterHtml" />
          </div>
          <p v-else style="margin:0;padding:14px 16px;border-radius:16px;border:1px solid #fde68a;background:#fffbeb;color:#92400e;font-weight:600;">
            Für diese Footer-Seite ist noch kein Inhalt hinterlegt.
          </p>
        </div>
      </div>
    </div>
  </template>
</template>

<style scoped>
/* FAQ accordion */
.faq-item {
  background: #ffffff;
  border: 1px solid rgba(124, 86, 196, 0.16);
  border-radius: 16px;
  padding: 4px 22px;
  box-shadow: 0 8px 24px rgba(124, 86, 196, 0.07);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.faq-item--open {
  border-color: rgba(139, 108, 219, 0.45);
  box-shadow: 0 8px 28px rgba(124, 86, 196, 0.15);
  background: linear-gradient(135deg, #fdfbff 0%, #f5f0ff 100%);
}

.faq-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 18px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: #3f3556;
  text-align: left;
  transition: color 0.2s;
}

.faq-item--open .faq-trigger {
  color: #6b44c0;
}

.faq-question {
  display: flex;
  align-items: center;
  gap: 10px;
}

.faq-star {
  flex: none;
  font-size: 11px;
  color: #c4aef7;
  transition: color 0.2s;
}

.faq-item--open .faq-star {
  color: #8b6cdb;
}

.faq-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #f1ecfb;
  color: #8b6cdb;
  font-size: 18px;
  line-height: 1;
  transition: background 0.2s;
}

.faq-item--open .faq-toggle {
  background: #e4d8ff;
}

.faq-answer {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.65;
  color: #8a8398;
  padding-left: 21px;
  border-left: 2px solid #d8c8ff;
}

.home-footer-page-content :deep(p) {
  margin: 0 0 14px;
}

.home-footer-page-content :deep(p:last-child),
.home-footer-page-content :deep(ul:last-child),
.home-footer-page-content :deep(ol:last-child) {
  margin-bottom: 0;
}

.home-footer-page-content :deep(ul),
.home-footer-page-content :deep(ol) {
  margin: 0 0 14px 20px;
  padding-left: 16px;
}

.home-footer-page-content :deep(li) {
  margin: 3px 0;
}

.home-footer-modal-surface {
  border: 1px solid rgba(221, 208, 242, 0.9);
  border-radius: 24px;
  padding: 22px 22px 20px;
  background:
    radial-gradient(circle at top right, rgba(255, 206, 232, 0.16), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(249, 244, 255, 0.96) 100%);
  box-shadow: 0 20px 44px rgba(124, 86, 196, 0.1);
}

.home-sponsor-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(212, 194, 247, 0.95);
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.95), rgba(245, 238, 255, 0.98)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(243, 235, 255, 0.96));
  color: #6d55a8;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  box-shadow: 0 12px 26px rgba(124, 86, 196, 0.08);
}

.home-sponsor-pill::before {
  content: '✦';
  color: #b089ff;
  font-size: 12px;
}
</style>
