/* Custom styling for Convexity docs */

/* Brand Colors - Based on #047afb */
:root {
  /* Primary brand colors */
  --vp-c-brand-1: #047afb;  /* Primary brand color */
  --vp-c-brand-2: #3d9cfc;  /* Hover state (lighter) */
  --vp-c-brand-3: #0368d5;  /* Active/pressed state (darker) */
  --vp-c-brand-soft: rgba(4, 122, 251, 0.14);  /* Soft background */
  
  /* Additional semantic colors */
  --vp-c-tip: #047afb;
  --vp-c-tip-soft: rgba(4, 122, 251, 0.12);
}

/* Dark mode brand colors - Adjusted for better contrast on dark backgrounds */
.dark {
  --vp-c-brand-1: #2d92fc;  /* Slightly lighter and more vibrant for dark mode */
  --vp-c-brand-2: #5aadfd;  /* Hover state (lighter) */
  --vp-c-brand-3: #047afb;  /* Active state */
  --vp-c-brand-soft: rgba(45, 146, 252, 0.16);  /* Soft background */
  
  /* Semantic colors for dark mode */
  --vp-c-tip: #2d92fc;
  --vp-c-tip-soft: rgba(45, 146, 252, 0.14);
}

/* Make navigation bar logo larger */
.VPNavBar .logo {
  height: 2.5rem !important;
  width: auto !important;
}

/* Feature Cards - consistent with brand theme */
.VPFeature,
.VPFeature .box,
.VPFeatureBox,
.vp-feature,
.vp-feature .box,
.VPHomeFeatures .box,
.VPHomeFeatures .VPFeature,
.VPHomeFeatures .VPFeatureBox,
.features .feature,
.features .feature .box,
.VPFeatures .VPFeature,
.VPHomeFeatures .VPFeatures .VPFeature,
div[class*="Feature"],
div[class*="feature"],
.VPHome .VPFeatures div {
  border-radius: 0 !important;
}

/* Also target any child elements that might have border-radius */
.VPFeatures *,
.VPHomeFeatures * {
  border-radius: 0 !important;
} 

/* Glossary tooltip - allow text wrapping with proper paragraph flow */
.glossary-tooltip {
  white-space: normal !important;
  width: 400px !important;
  max-width: 90vw !important;
  word-wrap: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  line-height: 1.5 !important;
  font-size: 12px !important;
  text-align: left !important;
}

/* Gurubase widget styling to match brand theme */
#guru-widget-id,
[data-guru-widget] {
  /* Use brand colors for widget button and accents */
  --guru-primary-color: var(--vp-c-brand-1) !important;
}

/* Dark mode adjustments for Gurubase widget */
.dark #guru-widget-id,
.dark [data-guru-widget] {
  --guru-primary-color: var(--vp-c-brand-1) !important;
}

/* Target the widget button if it has specific classes */
#guru-widget-id button,
[data-guru-widget] button,
.guru-widget-button {
  background-color: var(--vp-c-brand-1) !important;
  color: white !important;
}

#guru-widget-id button:hover,
[data-guru-widget] button:hover,
.guru-widget-button:hover {
  background-color: var(--vp-c-brand-2) !important;
}

#guru-widget-id button:active,
[data-guru-widget] button:active,
.guru-widget-button:active {
  background-color: var(--vp-c-brand-3) !important;
}

/* Change the widget title/header text from "Ask Guru" to "Ask AI" */
/* Note: You may need to inspect the widget to find the exact selector */
#guru-widget-id [class*="title"]:not([class*="subtitle"]),
#guru-widget-id [class*="header"],
[data-guru-widget] [class*="title"]:not([class*="subtitle"]) {
  visibility: hidden;
  position: relative;
}

#guru-widget-id [class*="title"]:not([class*="subtitle"])::after,
#guru-widget-id [class*="header"]::after,
[data-guru-widget] [class*="title"]:not([class*="subtitle"])::after {
  content: "Ask AI" !important;
  visibility: visible;
  position: absolute;
  left: 0;
  top: 0;
}

/* Hero image - switch between light and dark versions based on theme */
.VPHero .image img[src="/convexity-hero-light.png"] {
  content: url(/convexity-hero-light.png);
}

.dark .VPHero .image img[src="/convexity-hero-light.png"] {
  content: url(/convexity-hero-dark.png);
}