/**
 * Event detail page — complements Tailwind utilities in templates/website/event_detail.html
 */

.event-detail {
  --event-detail-ring: var(--brand-teal, #306f8d);
}

.event-detail-prose {
  line-height: 1.65;
}

.event-detail-prose p {
  margin-bottom: 1rem;
}

.event-detail-prose p:last-child {
  margin-bottom: 0;
}

/*
 * full_description renders as sanitized Markdown (website/event_description.py).
 * Tailwind preflight clears list/heading styles; restore them here since this
 * markup isn't covered by the compiled site.css content scan.
 */
.event-detail-prose ul {
  list-style-type: disc;
  list-style-position: outside;
  padding-left: 1.25rem;
  margin: 0.35rem 0 1rem;
}

.event-detail-prose ol {
  list-style-type: decimal;
  list-style-position: outside;
  padding-left: 1.5rem;
  margin: 0.35rem 0 1rem;
}

.event-detail-prose li {
  margin: 0.2rem 0;
}

.event-detail-prose li > p {
  margin: 0.35rem 0;
}

.event-detail-prose h2,
.event-detail-prose h3,
.event-detail-prose h4,
.event-detail-prose h5,
.event-detail-prose h6 {
  font-weight: 600;
  margin: 1.25rem 0 0.5rem;
}

.event-detail-prose h2:first-child,
.event-detail-prose h3:first-child,
.event-detail-prose h4:first-child,
.event-detail-prose h5:first-child,
.event-detail-prose h6:first-child {
  margin-top: 0;
}

.event-detail-prose a {
  color: var(--event-detail-ring, currentColor);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.event-detail-prose blockquote {
  border-left: 3px solid var(--event-detail-ring, currentColor);
  padding-left: 1rem;
  margin: 0.75rem 0;
  color: var(--muted-foreground, #64748b);
}

.event-detail-prose code {
  font-size: 0.875em;
  padding: 0.1rem 0.35rem;
  border-radius: 0.25rem;
  background-color: color-mix(in oklch, currentColor 12%, transparent);
}

.event-detail-prose pre {
  overflow-x: auto;
  margin: 0.75rem 0;
  padding: 0.75rem 1rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  background-color: color-mix(in oklch, currentColor 10%, transparent);
}

.event-detail-prose pre code {
  padding: 0;
  background-color: transparent;
}

.event-detail-cta:focus-visible {
  outline: 2px solid var(--event-detail-ring);
  outline-offset: 3px;
}

.event-detail-unpublished-banner {
  border-bottom-width: 2px;
}

.event-detail-invitation-message a {
  color: var(--event-detail-ring);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.event-detail-invitation-message a:hover {
  text-decoration-thickness: 2px;
}

.event-detail-invitation-message a:focus-visible {
  outline: 2px solid var(--event-detail-ring);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .event-detail-hero img {
    transition: none;
  }
}