{% if announcement_content is defined and announcement_content %}
    <div id="lumina-announcement"
         x-data="announcementBanner()"
         data-announcement-id="{{ announcement_id }}"
         role="region"
         aria-label="Site announcement"
         class="bg-[color-mix(in_srgb,var(--lumina-accent),black_40%)] text-white text-center text-sm">
        <div class="mx-auto flex max-w-[90rem] items-center justify-center gap-4 px-4 py-2">
            <div class="flex-1 [&_a]:underline [&_a]:font-medium">{{ announcement_content }}</div>
            <button @click="dismiss()"
                    class="shrink-0 rounded p-0.5 text-white/80 hover:text-white hover:bg-white/10 transition-colors cursor-pointer"
                    aria-label="Dismiss announcement"
                    type="button">{{ lumina_icon("x", size=16) }}</button>
        </div>
    </div>
    {# Reserve wrapped banner height before the page content can paint. #}
    <script>
document.documentElement.style.setProperty(
  '--lumina-announcement-height',
  document.getElementById('lumina-announcement').getBoundingClientRect().height + 'px'
);
    </script>
{% endif %}