@import "tailwindcss";
@import "fumadocs-ui/css/lib/default-colors.css";
@import "fumadocs-ui/css/preset.css";
@import "@happyview/design-system/globals.css";
@import "@happyview/design-system/vaporwave.css";

@source "../../node_modules/fumadocs-ui/dist/**/*.js";
@source "../../node_modules/fumadocs-ui/css/**/*.css";

/* --- Layout --- */

@media (min-width: 768px) {
  * {
    --fd-sidebar-width: 300px !important;
  }
}

#nd-docs-layout {
  --fd-layout-width: 100vw;
}

#nd-page > .prose {
  isolation: isolate;
}

#nd-page > .prose :is(h2, h3, h4),
#nd-page > .prose :is(h2, h3, h4) > a,
.prose :is(h2, h3, h4),
.prose :is(h2, h3, h4) > a {
  color: rgb(var(--color-magenta)) !important;
}

/* --- Sidebar --- */

@media (min-width: 768px) {
  #nd-sidebar > :first-child button[aria-label="Collapse Sidebar"] {
    display: none;
  }
}

/* --- Sidebar section labels --- */

#nd-sidebar p {
  color: rgb(var(--color-magenta));
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* --- Sidebar links --- */

@keyframes sidebar-gradient {
  to { background-position: 200% center; }
}

#nd-sidebar a,
#nd-sidebar button:not([aria-label]) {
  white-space: nowrap;
  color: rgb(var(--color-fg));
  transition: color 0.2s, text-shadow 0.2s, transform 0.2s, box-shadow 0.2s, border-radius 0.2s;
}

/* Open folder sections */
#nd-sidebar div[data-state="open"]:not([class]) {
  background: rgb(var(--color-bg));
  border-radius: 12px;
  padding: 4px;
  margin: 2px 0;
}

/* Active — animated gradient pill */
#nd-sidebar [data-active="true"] {
  color: rgb(var(--color-bg)) !important;
  border-radius: 9999px !important;
  background-image: linear-gradient(90deg, rgb(var(--color-aqua)), rgb(var(--color-magenta)), rgb(var(--color-aqua))) !important;
  background-size: 200% 100% !important;
  background-color: transparent !important;
  animation: sidebar-gradient 6s linear infinite;
  text-shadow: none;
}

/* Active inside expandable sections — partial radius */
#nd-sidebar div[data-state="open"]:not([class]) [data-active="true"] {
  border-radius: 8px !important;
}

#nd-sidebar [data-active="true"]::before {
  display: none !important;
}

/* Hover */
#nd-sidebar a:not([data-active="true"]):hover,
#nd-sidebar button:not([aria-label]):hover {
  color: rgb(var(--color-aqua)) !important;
  border-radius: 9999px !important;
  background-color: rgb(var(--color-bg)) !important;
  text-shadow: none;
}

#nd-sidebar div[data-state="open"]:not([class]) a:not([data-active="true"]):hover,
#nd-sidebar div[data-state="open"]:not([class]) button:not([aria-label]):hover {
  background-color: rgb(var(--color-surface)) !important;
  border-radius: 8px !important;
}

/* --- Nav bar --- */

#nd-nav {
  height: auto;
}

#nd-nav > div {
  background: rgb(var(--color-surface)) !important;
  border-color: rgb(var(--color-border));
}

#nd-nav > div > * {
  max-width: none !important;
  margin: 0 !important;
}

#nd-nav nav {
  height: auto;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* Nav links (exclude logo) */
#nd-nav nav ul a,
#nd-nav nav > div a {
  color: rgb(var(--color-fg));
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 9999px;
  transition: color 0.2s, background-color 0.2s;
}

#nd-nav nav ul a:hover,
#nd-nav nav > div a:hover {
  color: rgb(var(--color-aqua)) !important;
  background-color: rgb(var(--color-bg)) !important;
  border-radius: 9999px;
}

#nd-nav nav ul a[data-active="true"] {
  color: rgb(var(--color-aqua)) !important;
  background: rgb(var(--color-bg)) !important;
  border-radius: 9999px;
}

#nd-nav [data-search-full] {
  color: rgb(var(--color-fg-muted));
  border-color: rgb(var(--color-border));
  background: rgb(var(--color-bg)) !important;
}

#nd-nav [data-search-full]:hover {
  border-color: rgb(var(--color-aqua));
  color: rgb(var(--color-aqua));
  background: rgb(var(--color-bg)) !important;
}

#nd-nav [data-search] {
  color: rgb(var(--color-fg-muted));
}

#nd-nav [data-search]:hover {
  color: rgb(var(--color-aqua)) !important;
  background: rgb(var(--color-bg)) !important;
}

/* --- Blog layout --- */

#nd-home-layout {
  background: transparent;
}

#nd-home-layout article > canvas {
  margin-bottom: -40vh;
}

/* --- Blog card hover --- */

.group:hover {
  border-color: rgb(var(--color-aqua)) !important;
  box-shadow: 0 0 20px rgb(var(--color-aqua) / 0.15);
}

.group:hover h2 {
  color: rgb(var(--color-aqua)) !important;
}

/* Reduced motion */
html[data-reduced-motion="true"] #nd-sidebar [data-active="true"],
html[data-reduced-motion="true"] #nd-nav nav a[data-active="true"] {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  #nd-sidebar [data-active="true"],
  #nd-nav nav a[data-active="true"] {
    animation: none;
  }
}

/* --- Prev/Next navigation cards --- */

a[rel="prev"],
a[rel="next"] {
  border-color: rgb(var(--color-border));
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

a[rel="prev"]:hover,
a[rel="next"]:hover {
  border-color: rgb(var(--color-aqua) / 0.4);
  box-shadow: 0 0 16px rgb(var(--color-aqua) / 0.06);
}

/* --- Callout glow ---
   Fumadocs callout containers set --callout-color inline.
   This adds a neon glow matching the callout accent. */

/* --- Code block background ---
   Fumadocs figure uses bg-fd-card (surface), override to use code-bg token. */

figure.shiki {
  background: rgb(var(--color-code-bg)) !important;
}

[style*="--callout-color"] {
  box-shadow:
    0 0 20px color-mix(in srgb, var(--callout-color) 5%, transparent),
    inset 0 0 16px color-mix(in srgb, var(--callout-color) 2%, transparent);
  border-color: color-mix(in srgb, var(--callout-color) 20%, transparent);
}