globals.css

@import url('https://fonts.googleapis.com/css2?family=Domine:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&display=swap');

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

@layer base {
  .prose-compact {
    & > * + * {
      margin-top: 0.75em;
      margin-bottom: 0;
    }
    & h2 {
      margin-top: 1.5em;
    }
  }

  /* Feature section headers */
  h2.feature-heading {
    @apply text-4xl md:text-5xl lg:text-[56px] font-medium;
    font-family: 'Domine', serif;
  }

  :root {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 240 4.8% 95.9%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* Custom styles for the terminal */
.terminal {
  @apply bg-black border border-zinc-800 rounded-md font-mono text-sm p-4;
  text-shadow: 0 0 4px rgba(170, 255, 51, 0.1);
}

.terminal-command {
  @apply flex items-center gap-2 text-white;
}

/* Codebuff specific styles */
.codebuff-container {
  @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

/* Full-width section styles */
.full-width-section {
  @apply w-full;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
}

.hero-heading {
  @apply text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-medium;
  font-family: 'Domine', serif;
  letter-spacing: 0.005em;
  word-spacing: 0.005em;
  /* Enable proper text shaping */
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
}

.hero-subtext {
  @apply text-lg md:text-xl text-zinc-300 max-w-3xl mx-auto font-paragraph;
}

/* Terminal demo section */
.terminal-demo-section {
  @apply relative w-full flex justify-center text-left mt-12;
}

/* Glowing effect for primary elements */
.glow-effect {
  box-shadow: 0 0 15px rgba(170, 255, 51, 0.5);
}

/* Code highlighting */
.highlight-line {
  @apply relative;
}

.highlight-line::before {
  content: '';
  @apply absolute left-0 top-0 h-full w-1 bg-primary rounded-sm;
}

/* Custom terminal scrollbar */
.terminal-code::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.terminal-code::-webkit-scrollbar-track {
  @apply bg-zinc-900 rounded-md;
}

.terminal-code::-webkit-scrollbar-thumb {
  @apply bg-zinc-700 rounded-md;
}

.terminal-code::-webkit-scrollbar-thumb:hover {
  @apply bg-zinc-600;
}

/* Enhanced docs sidebar scrollbar */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  @apply bg-transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  @apply bg-border/60 rounded-full;
  transition: background-color 0.2s ease;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  @apply bg-border;
}

.custom-scrollbar::-webkit-scrollbar-thumb:active {
  @apply bg-foreground/20;
}

/* Firefox scrollbar */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--border) / 0.6) transparent;
}

/* Code blocks within headings - lighter styling to prevent mobile layout issues */
:where(h1, h2, h3, h4, h5, h6) code {
  @apply border-0 text-current;
  padding: 0.15em 0.75em;
  margin: 0 0.4em;
  font-size: 0.9em;
  font-weight: inherit;
  border-radius: 2px;
  background-color: rgba(255, 255, 255, 0.1);
}

/* Ensure proper text wrapping in headings on mobile */
@media (max-width: 767px) {
  :where(h1, h2, h3, h4, h5, h6) {
    /* Revert to normal text flow for proper kerning */
    display: block;
    line-height: 1.2;
    margin-top: 0rem;
    /* Enable proper text shaping and kerning */
    font-kerning: normal;
    font-feature-settings: "kern" 1, "liga" 1;
    text-rendering: optimizeLegibility;
  }

  /* Keep code snippets from breaking on mobile */
  :where(h1, h2, h3, h4, h5, h6) code {
    white-space: nowrap;
  }

  /* Specific spacing fixes for hero text */
  .hero-heading {
    line-height: 1.15;
    margin-bottom: 2rem;
    text-wrap: balance;
  }

  .hero-subtext {
    line-height: 1.5;
    margin-bottom: 2rem;
    letter-spacing: 0.015em;
    word-spacing: 0.01em;
  }
}