/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

@import 'nextra-theme-docs/dist/style.css' layer(nextra);

/**
 * Custom styles
 *
 * You can add your own custom styles here. This file will be imported after the theme styles.
 * This is a great place to add your own utility classes or override styles.
 *
 * In this case we're going to fix a glitch with the text size in the code blocks. 
 */
@layer overwrite {
  :root {
    /* Force Nextra base background to pure black to match landing */
    --x-color-nextra-bg: #000;
    --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  }

  :where(.dark) {
    --x-color-neutral-800: var(--mantine-color-dark-6);
  }

  .x\:text-sm {
    font-size: var(--x-text-sm) !important;
    line-height: var(--tw-leading, var(--x-text-sm--line-height)) !important;
  }
}

@layer components, mantine, nextra, overwrite;

/* Global sleek styles */
@layer overwrite {
  html {
    scroll-behavior: smooth;
  }

  body {
    color: var(--mantine-color-text);
    font-family: var(--font-sans);
    background:
      radial-gradient(1200px 600px at 80% -10%, rgba(0, 102, 255, 0.12), transparent 100%),
      radial-gradient(1000px 500px at -10% 10%, rgba(255, 0, 128, 0.09), transparent 100%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.0)) !important;
    /* background: #000000; */
  }

  :where(.dark) body {
    color: rgba(255, 255, 255, 0.92);
  }

  h1, h2, h3, h4, h5, h6 {
    color: inherit;
    font-family: var(--font-sans);
  }

  a {
    color: #1f2937;
  }
  :where(.dark) a {
    color: rgba(255, 255, 255, 0.92) !important;
  }

  /* Stronger override for Nextra link styling in docs */
  :where(.dark) .nextra-content a,
  :where(.dark) .nextra-content a:visited {
    color: rgba(255, 255, 255, 0.92) !important;
  }
  .nextra-content a,
  .nextra-content a:visited {
    color: #1f2937 !important;
  }

  /* Ensure Nextra containers don’t paint a gray background */
  :where(.nextra-container,
    .nextra-content,
    .nextra-sidebar-container,
    .nx-bg-neutral-900,
    .nx-bg-gray-900,
    .nx-bg-black,
    .nx-bg-dark,
    .nx-bg-zinc-900,
    .nx-bg-slate-900) {
    background-color: transparent !important;
  }

  /* Make sticky headers/footers transparent and remove borders/shadows */
  :where(.nx-sticky) {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }
  :where(.nextra-sidebar) header,
  :where(.nextra-sidebar) footer,
  :where(.nextra-container > header) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Glassmorphism utility */
  .glass {
    background: rgba(255, 255, 255, 0.06); 
    -webkit-backdrop-filter: saturate(120%) blur(10px);
    backdrop-filter: saturate(120%) blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
  }

  code, pre {
    border-radius: 10px;
  }

  /* Target article tag for markdown content font styling */
  article {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    font-weight: 400;
    line-height: 1.6;
  }

  /* Specific styling for the main content article */
  article[data-pagefind-body="true"] {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
  }

  /* Override Nextra's default article styling */
  article.x\:w-full {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  }

  /* Sidebar footer background override */
  :where(.nextra-sidebar-footer) {
    background: transparent !important;
    border-top: none !important;
    box-shadow: none !important;
  }

  /* Lightweight parallax blob for landing */
  .parallax-blob {
    position: absolute;
    left: 0;
    top: 0;
    width: 55vmax;
    height: 55vmax;
    transform: translate(-50%, -50%) scale(0.9);
    background: radial-gradient(closest-side, rgba(0, 102, 255, 0.18), transparent 72%);
    pointer-events: none;
    transition: transform 0.18s ease-out, opacity 300ms ease-out;
    will-change: transform;
    filter: blur(12px);
    opacity: 0;
  }

  /* Beacon of light effect */
  @keyframes beamPulse {
    0%, 100% { opacity: 0.45; transform: translateX(-50%) scaleX(1); }
    50% { opacity: 0.7; transform: translateX(-50%) scaleX(1.08); }
  }
  .beacon-beam {
    position: absolute;
    left: 50%;
    top: -10vh;
    height: 120vh;
    width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(180deg,
      rgba(255,255,255,0) 0%,
      rgba(0, 146, 255, 0.4) 40%,
      rgba(0, 146, 255, 0.35) 60%,
      rgba(255,255,255,0) 100%);
    filter: blur(8px);
    opacity: 0.55;
    pointer-events: none;
    animation: beamPulse 4s ease-in-out infinite;
  }
  .beacon-source {
    position: absolute;
    left: 50%;
    bottom: 10vh;
    width: 36vmin;
    height: 12vmin;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(0,146,255,0.28), rgba(0,146,255,0.08) 60%, transparent 70%);
    filter: blur(14px);
    opacity: 0.6;
    pointer-events: none;
  }

  /* Distant beacon cone (perspective beam) */
  .beacon-cone {
    position: absolute;
    left: 50%;
    bottom: -10vh;
    transform: translateX(-50%) perspective(800px) rotateX(60deg);
    width: 4px;
    height: 130vh;
    background: linear-gradient(
      180deg,
      rgba(0, 146, 255, 0.0) 0%,
      rgba(0, 146, 255, 0.28) 30%,
      rgba(0, 146, 255, 0.18) 70%,
      rgba(0, 146, 255, 0.0) 100%
    );
    box-shadow: 0 0 40px 6px rgba(0,146,255,0.18), 0 0 120px 24px rgba(0,146,255,0.10);
    filter: blur(2px);
    pointer-events: none;
    opacity: 0.55;
  }

  /* Beacon outline (SVG stroke glow) */
  .beacon-outline {
    position: absolute;
    left: 50%;
    bottom: 6vh;
    transform: translateX(-50%);
    width: clamp(120px, 22vmin, 220px);
    height: auto;
    opacity: 0.8;
    pointer-events: none;
  }

  /* Custom Pagefind Search Styles */
  .pagefind-search {
    position: relative;
    z-index: 10000;
  }

  .pagefind-search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 10vh;
  }

  .pagefind-search-container {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    min-width: 600px;
    max-width: 90vw;
    max-height: 80vh;
    overflow: hidden;
  }

  .pagefind-search-input {
    background: transparent;
    border: none;
    outline: none;
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    flex: 1;
    min-width: 0;
  }

  .pagefind-search-result {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: background-color 0.2s ease;
  }

  .pagefind-search-result:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  .pagefind-search-result:last-child {
    border-bottom: none;
  }

  /* Universal stronger focus-visible ring*/
  :focus-visible {
    outline: none !important; 
    box-shadow: 0 0 0 2px var(--focus-inner-ring, #000), 0 0 0 4px var(--focus-outer-ring, #fff);
    /* match the element's radius so rings follow shape */
    border-radius: inherit;
  }
}
