@tailwind base;
@tailwind components;
@tailwind utilities;

@view-transition {
  navigation: auto;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  width: 100%;
  scrollbar-width: auto;
  scrollbar-color: theme("colors.gray.200") transparent;
}

html {
  @apply bg-white;

  &.dark {
    @apply bg-zinc-900;
  }
}

body {
  @apply flex flex-col w-full overflow-x-hidden from-white to-gray-200 bg-gradient-to-b dark:from-zinc-800 dark:to-zinc-900 dark:bg-gradient-to-b dark:text-gray-300;
}

aside,
pre {
  scrollbar-width: thin;
}

aside {
  scrollbar-color: theme("colors.gray.200") transparent;
}

pre {
  scrollbar-color: theme("colors.gray.600") transparent;
}

@media (prefers-color-scheme: dark) {
  html:not(.light) aside {
    scrollbar-color: theme("colors.gray.600") transparent;
  }
}

html.dark aside {
  scrollbar-color: theme("colors.gray.600") transparent;
}

@media (prefers-color-scheme: dark) {
  html:not(.light) {
    scrollbar-color: theme("colors.gray.600") transparent;
  }
}

html.dark {
  scrollbar-color: theme("colors.gray.600") transparent;
}

main {
  @apply container max-w-screen-xl mx-auto flex flex-col flex-1 bg-transparent;

  @media screen(md) {
    @apply flex-row;
  }
}

body > header {
  @apply w-full border-b self-center sticky top-0 h-12 flex items-center bg-white dark:bg-zinc-900 dark:text-gray-300 dark:border-gray-800 z-10 drop-shadow-xl;

  & nav {
    @apply w-full px-4 grid grid-cols-[1fr_3fr_1fr] items-center relative;

    @media screen(sm) {
      @apply gap-8;
    }

    & a svg {
      path {
        @apply fill-black dark:fill-gray-300;
      }
    }

    & > a:first-child {
      @apply py-1 mr-auto;

      & h4 {
        @apply text-[0.5rem] font-normal m-0 -mt-0.5 leading-none;
      }

      & h3 {
        @apply text-lg font-semibold m-0 -mt-0.5 leading-none;
      }
    }
  }

  &::before {
    position: absolute;
    width: 100%;
    height: 100vh;
    left: 0;
    bottom: 100%;
    content: "";
    z-index: 0;
    @apply bg-white dark:bg-zinc-900;
  }

  @media screen(md) {
    @apply mb-4;
  }
}

nav {
  & a {
    position: relative;
    white-space: nowrap;

    &.active {
      @apply cursor-default;
    }

    &:hover:not(.active):not([target="_blank"]) {
      &::after {
        position: absolute;
        width: 100%;
        display: block;
        content: "";
        height: 2px;
        width: 100%;
        left: 50%;
        bottom: 0px;
        transform: translateX(-50%);
        animation: 200ms both indicator;

        @apply from-rose-400 via-fuchsia-500 to-indigo-500 bg-gradient-to-r;

        @keyframes indicator {
          from {
            width: 0;
          }
        }

        @media (prefers-reduced-motion) {
          animation: none;
        }
      }
    }
  }
}

body[data-path="/en"] {
  article {
    view-transition-name: index;
    overflow: visible;

    @media (prefers-reduced-motion) {
      view-transition-name: none;
    }
  }
}

article {
  width: 100%;
  justify-items: left;
  overflow: auto;
  view-transition-name: content;
  position: relative;
  display: flex;
  flex-direction: column;

  @media (prefers-reduced-motion) {
    view-transition-name: none;
  }

  @apply container max-w-screen-xl px-4 mb-8;

  & h1,
  & h2,
  & h3,
  & h4,
  & h5 {
    @apply font-semibold mb-3.5;
  }

  & h1 {
    @apply text-3xl;
  }

  & h2 {
    @apply text-2xl;
  }

  & > h2 {
    @apply border-t pt-4 mt-4 dark:border-gray-800;
  }

  & h3 {
    @apply text-lg;
  }

  & h4 {
    @apply text-base;
  }

  & h5 {
    @apply text-sm;
  }

  & > p {
    @apply text-base mb-4 leading-7;
  }

  & > pre {
    @apply w-full;
  }

  & pre code {
    @apply rounded-lg my-8 text-sm leading-5 border border-gray-500 shadow-xl shadow-gray-500 dark:shadow-[rgba(255,255,255,0.1)] dark:shadow-lg;
  }

  & p ~ pre code {
    @apply mt-0;
  }

  & > code {
    @apply whitespace-nowrap;
  }

  & p code,
  & li code,
  & dt code,
  & dd code {
    @apply bg-gray-100 dark:bg-gray-500 dark:text-white rounded-md text-sm p-1 font-semibold;
  }

  & ul {
    @apply list-none list-inside mb-4;

    & li {
      @apply pl-0 mb-2;

      &:before {
        content: "";
        display: inline-block;
        vertical-align: middle;
        width: 0.25rem;
        height: 2px;
        margin-top: -1px;
        margin-right: 0.5rem;
        background-color: currentColor;
      }

      & ul {
        @apply list-none pl-4 mb-0 mt-2;

        & li {
          @apply pl-0 mb-2;

          &:before {
            content: "";
            display: inline-block;
            vertical-align: middle;
            width: 0.25rem;
            height: 2px;
            margin-top: -1px;
            margin-right: 0.5rem;
            background-color: currentColor;
          }

          & ul {
            @apply list-none pl-4 mb-0 mt-2;

            & li:before {
              content: "";
              display: inline-block;
              vertical-align: middle;
              width: 0.25rem;
              height: 2px;
              margin-top: -1px;
              margin-right: 0.5rem;
              background-color: currentColor;
            }
          }
        }
      }
    }
  }

  & ol {
    @apply list-decimal list-inside mb-4;

    & li {
      @apply pl-0 mb-2;

      &::marker {
        @apply font-semibold text-indigo-500 dark:text-yellow-600;
      }
    }
  }

  & a {
    @apply text-indigo-500 dark:text-yellow-600 hover:underline;
  }

  .contains-task-list {
    @apply list-none;

    & code {
      @apply bg-gray-100 dark:bg-gray-500 text-sm p-1 mx-1.5;
    }
  }

  & blockquote {
    @apply border-l-8 border-blue-300 p-4 mb-4 bg-blue-100 dark:bg-yellow-500 dark:border-yellow-600 dark:text-gray-800 shadow-xl dark:shadow-[rgba(255,255,255,0.1)];

    & code {
      @apply bg-gray-100 dark:bg-gray-100 dark:text-gray-800 text-sm whitespace-nowrap p-1;
    }
  }

  & table {
    @apply border-l-8 border-blue-300 p-4 mb-4 bg-blue-100 dark:bg-yellow-500 dark:border-yellow-600 dark:text-gray-800;

    & th,
    td {
      @apply text-left border-r border-blue-300 dark:border-yellow-600 p-2;

      & code {
        @apply bg-gray-100 dark:bg-gray-100 dark:text-gray-800 text-sm font-semibold p-1;
      }

      & em {
        @apply text-xs leading-none block;

        & code {
          @apply text-xs;
        }
      }
    }

    & tr {
      @apply border-b border-blue-300 dark:border-yellow-600;
    }

    & tbody {
      & tr:last-child {
        @apply border-b-0;
      }
    }
  }

  &[data-path*="/api/"] {
    & ul {
      @apply list-none;
    }
  }

  & input[type="checkbox"] {
    width: 0;
    margin: 0;
  }
}

footer {
  @apply w-full py-8 mt-auto items-center justify-center text-center text-xs border-t bg-white dark:bg-zinc-900 dark:text-gray-300 dark:border-gray-800;
}

.getstarted-code {
  & pre {
    @apply w-full;
  }
}

::view-transition-old(sidebar):only-child {
  animation:
    0.5s both fade-out,
    0.5s both sidebar-out;
}

::view-transition-new(sidebar):only-child {
  animation:
    0.5s both fade-in,
    0.5s both sidebar-in;
}

::view-transition-old(content):only-child {
  animation: 0.5s both fade-out;
}

::view-transition-new(content):only-child {
  animation: 0.5s both fade-in;
}

::view-transition-old(index) {
  transform-origin: top center;
  animation:

    0.5s both fade-out,
    0.5s both index-out;
}

::view-transition-new(index) {
  transform-origin: top center;
  animation:
    0.5s both fade-in,
    0.5s both index-in;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

@keyframes index-in {
  from {
    transform: scale(0.9);
  }
}

@keyframes index-out {
  to {
    transform: scale(0.9);
  }
}

@keyframes scanline {
  0% {
    background-position: 0% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}

.background-effect {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: -1;
  background-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.02) 49.4%,
    rgba(255, 0, 0, 0.5) 49.6%,
    rgba(255, 165, 0, 0.5) 49.8%,
    rgba(255, 255, 0, 0.5) 50%,
    rgba(0, 255, 0, 0.5) 50.2%,
    rgba(0, 0, 255, 0.5) 50.4%,
    rgba(0, 0, 0, 0) 50.6%
  );
  background-size: 100% 205%;
  mask-image: url(/motherboard.svg);
  mask-repeat: no-repeat;
  mask-size: cover;
  mask-position: center;
  animation: scanline 5s ease-out;

  @media (prefers-reduced-motion) {
    animation: none;
    background-image: none;
    background-color: rgba(0, 0, 0, 0.02);
    z-index: 0;
  }
}

/* ── Feature sections on landing page ── */

.full-bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding-left: max(1rem, calc((100vw - 80rem) / 2 + 1rem));
  padding-right: max(1rem, calc((100vw - 80rem) / 2 + 1rem));
}

.feature-section {
  h3 {
    @apply text-2xl sm:text-3xl font-bold m-0 mb-1;
  }

  p {
    @apply text-base leading-7 text-gray-600 dark:text-gray-400 m-0 mb-3;
  }

  pre code {
    @apply my-0 shadow-md dark:shadow-sm;
  }

  .code-label {
    @apply text-sm font-normal leading-relaxed text-gray-600 dark:text-gray-400 m-0 mt-4 mb-2;
  }
}

.dark .background-effect {
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.02) 49.4%,
    rgba(255, 0, 0, 0.5) 49.6%,
    rgba(255, 165, 0, 0.5) 49.8%,
    rgba(255, 255, 0, 0.5) 50%,
    rgba(0, 255, 0, 0.5) 50.2%,
    rgba(0, 0, 255, 0.5) 50.4%,
    rgba(127, 127, 127, 0.01) 50.6%
  );

  @media (prefers-reduced-motion) {
    background-image: none;
    background-color: rgba(255, 255, 255, 0.02);
  }
}

.adapter-card:hover .adapter-card-title::after {
  position: absolute;
  display: block;
  content: "";
  height: 2px;
  width: 100%;
  left: 50%;
  bottom: -2px;
  transform: translateX(-50%);
  animation: 200ms both indicator;

  @apply from-rose-400 via-fuchsia-500 to-indigo-500 bg-gradient-to-r;

  @media (prefers-reduced-motion) {
    animation: none;
  }
}

/* API reference index — classical TOC style: each <dt>/<dd> pair
   separated by vertical spacing, <dd> muted and indented. */
article dl {
  @apply my-6;
}
article dl dt {
  @apply mt-4 first:mt-0;
}
article dl dd {
  @apply ml-6 text-gray-600 dark:text-gray-400;
}

/* Cross-reference links inside code blocks on API pages: keep the
   highlight.js coloring, add a dotted underline to signal they're
   clickable without repainting the token. */
code a.api-xref,
pre code a.api-xref {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
code a.api-xref:hover,
pre code a.api-xref:hover {
  border-bottom-style: solid;
}