@import "tailwindcss";
@plugin "flowbite/plugin";
@source "../../../node_modules/flowbite";

@layer components {
  .btn-accent {
    @apply inline-flex items-center justify-center rounded-full bg-[var(--club-accent)] px-5 py-3 text-sm font-bold text-white transition hover:opacity-90;
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center rounded-full px-5 py-3 text-sm font-bold transition hover:opacity-90;
    border: 1px solid color-mix(in srgb, var(--club-accent) 20%, transparent);
    background: color-mix(in srgb, var(--club-surface) 92%, white 8%);
    color: var(--club-text);
  }

  .dropdown-trigger {
    @apply inline-flex items-center gap-3 rounded-full px-4 py-2.5 text-sm font-bold transition hover:opacity-90;
    border: 1px solid color-mix(in srgb, var(--club-accent) 20%, transparent);
    background: color-mix(in srgb, var(--club-surface) 92%, white 8%);
    color: var(--club-text);
  }

  .dropdown-menu {
    @apply absolute right-0 top-full z-20 mt-2 min-w-56 rounded-[1.5rem] p-2 shadow-xl shadow-black/10;
    min-width: min(14rem, calc(100vw - 1rem));
    max-width: calc(100vw - 1rem);
    border: 1px solid color-mix(in srgb, var(--club-accent) 18%, transparent);
    background: color-mix(in srgb, var(--club-surface) 96%, white 4%);
  }

  .dropdown-item {
    @apply flex w-full items-center rounded-2xl px-4 py-3 text-left text-sm font-semibold transition;
    color: var(--club-text);
  }

  .dropdown-item:hover {
    background: color-mix(in srgb, var(--club-accent) 10%, transparent);
  }

  .dropdown-divider {
    @apply my-2 border-t border-black/10;
  }

  .dropdown-avatar {
    @apply inline-flex h-8 w-8 items-center justify-center rounded-full bg-[var(--club-accent)] text-sm font-black text-white;
  }

  .nav-link {
    @apply inline-flex items-center rounded-full px-3 py-2 transition;
    color: color-mix(in srgb, var(--club-text) 75%, transparent);
  }

  .nav-link:hover {
    background: color-mix(in srgb, var(--club-accent) 10%, transparent);
    color: var(--club-text);
  }

  .nav-link-active {
    @apply inline-flex items-center rounded-full px-3 py-2;
    background: color-mix(in srgb, var(--club-accent) 16%, transparent);
    color: var(--club-text);
  }

  .form-label {
    @apply mb-2 block text-sm font-semibold;
    color: color-mix(in srgb, var(--club-text) 72%, transparent);
  }

  .form-input {
    @apply w-full rounded-2xl px-4 py-3 outline-none transition focus:ring-2;
    border: 1px solid color-mix(in srgb, var(--club-accent) 18%, transparent);
    background: color-mix(in srgb, var(--club-surface) 88%, white 12%);
    color: var(--club-text);
  }

  .form-input:focus {
    border-color: var(--club-accent);
    --tw-ring-color: color-mix(in srgb, var(--club-accent) 15%, transparent);
  }

  .markdown-content {
    @apply space-y-4 leading-7;
  }

  .markdown-content a {
    @apply font-semibold text-[var(--club-accent)] underline decoration-black/20 underline-offset-3;
  }

  .markdown-content p:first-child {
    @apply mt-0;
  }

  .markdown-content p:last-child {
    @apply mb-0;
  }

  .markdown-content ul {
    @apply list-disc pl-6;
  }

  .markdown-content ol {
    @apply list-decimal pl-6;
  }

  .markdown-content blockquote {
    @apply border-l-4 border-[var(--club-accent)]/30 pl-4 italic text-black/70;
  }

  .markdown-content code {
    @apply rounded bg-black/6 px-1.5 py-0.5 font-mono text-[0.95em];
  }

  .markdown-content pre {
    @apply overflow-x-auto rounded-3xl bg-black px-5 py-4 text-sm text-white;
  }

  .markdown-content pre code {
    @apply bg-transparent p-0 text-inherit;
  }
}

.committee-photo img {
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.committee-photo:focus-visible {
  z-index: 10;
}
.committee-photo:focus-visible img {
  transform: scale(1.16);
  box-shadow: 0 16px 36px rgb(0 0 0 / 22%);
}
@media (hover: hover) {
  .committee-photo:hover { z-index: 10; }
  .committee-photo:hover img {
    transform: scale(1.16);
    box-shadow: 0 16px 36px rgb(0 0 0 / 22%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .committee-photo img { transition: none; }
}