/* Vaporwave Theme for Prism PHP Documentation */

:root {
  /* Light mode colors */
  --vp-c-brand-1: #ff71ce;
  --vp-c-brand-2: #b967ff;
  --vp-c-brand-3: #01cdfe;

  /* Base */
  --vp-c-bg: #f8f9fc;
  --vp-c-bg-soft: #f0f3f9;
  --vp-c-bg-mute: #e7ecf5;

  /* Borders */
  --vp-c-border: #e5e9f0;
  --vp-c-divider: #e5e9f0;

  /* Text */
  --vp-c-text-1: #2e3440;
  --vp-c-text-2: #434c5e;
  --vp-c-text-3: #4c566a;

  /* Code blocks */
  --vp-code-block-bg: #f0f3f9;

  /* Button */
  --vp-button-brand-bg: var(--vp-c-brand-1);
  --vp-button-brand-hover-bg: var(--vp-c-brand-2);
  --vp-button-brand-active-bg: var(--vp-c-brand-3);

  /* Custom vaporwave gradients */
  --vaporwave-gradient-1: linear-gradient(90deg, #ff71ce, #b967ff);
  --vaporwave-gradient-2: linear-gradient(90deg, #01cdfe, #05ffa1);

  /* Banner/Image */
  --vp-home-hero-image-background-image: linear-gradient(325deg, var(--vp-c-brand-1) 50%, #01cdfe 50%);
  --vp-home-hero-image-filter: blur(71px);
}

.dark {
  /* Dark mode colors */
  --vp-c-brand-1: #ff71ce;
  --vp-c-brand-2: #b967ff;
  --vp-c-brand-3: #01cdfe;

  /* Base */
  --vp-c-bg: #191b28;
  --vp-c-bg-soft: #222436;
  --vp-c-bg-mute: #2a2d45;

  /* Borders */
  --vp-c-border: #373a54;
  --vp-c-divider: #373a54;

  /* Text */
  --vp-c-text-1: #e4e9f7;
  --vp-c-text-2: #c7d0e2;
  --vp-c-text-3: #a3b0cc;

  /* Code blocks */
  --vp-code-block-bg: #222436;

  /* Button */
  --vp-button-brand-bg: var(--vp-c-brand-1);
  --vp-button-brand-hover-bg: var(--vp-c-brand-2);
  --vp-button-brand-active-bg: var(--vp-c-brand-3);

  /* Custom dark mode styling */
  --vp-c-glow: rgba(255, 113, 206, 0.15);
}

/* Custom Vaporwave Styling */

/* Header styling */
.VPNav {
  background-color: var(--vp-c-bg);
  box-shadow: 0 2px 12px 0 rgba(185, 103, 255, 0.1);
}

/* Brand name with gradient */
.VPNavBarTitle .title {
  background: var(--vaporwave-gradient-1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  text-shadow: 0 0 8px rgba(255, 113, 206, 0.3);
  letter-spacing: 1px;
}

/* Logo animation */
.VPNavBarTitle .logo {
  transition: all 0.3s ease;
}

.VPNavBarTitle:hover .logo {
  filter: drop-shadow(0 0 8px rgba(255, 113, 206, 0.5));
  transform: rotate(-5deg) scale(1.1);
}

/* Links with hover effects */
.VPLink:hover {
  color: var(--vp-c-brand-1);
  text-shadow: 0 0 8px rgba(255, 113, 206, 0.5);
  transition: all 0.3s ease;
}

/* Disable hover effects for feature links on home page */
.VPLink.no-icon.VPFeature:hover {
  color: inherit;
  text-shadow: none;
}

/* Feature titles with gradient */
.VPFeature .title {
  background: var(--vaporwave-gradient-1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* Special styling for sidebar */
.VPSidebar {
  background-color: var(--vp-c-bg) !important;
}

/* Sidebar elements */
.VPSidebarNav {
  background-color: var(--vp-c-bg) !important;
}

.VPSidebarItem .text,
.VPSidebarItem .link {
  color: var(--vp-c-text-2);
}

/* Active sidebar item with gradient and glow */
.VPSidebarItem.is-active .link {
  color: var(--vp-c-brand-1) !important;
  font-weight: 600;
}

/* Buttons with hover glow effect */
.VPButton.brand {
  transition: all 0.3s ease;
}

.VPButton.brand:hover {
  box-shadow: 0 0 12px rgba(255, 113, 206, 0.7);
  transform: translateY(-1px);
}

/* Code blocks with custom styling */
div[class*="language-"] {
  border: 1px solid var(--vp-c-divider);
  border-radius: 8px;
  overflow: hidden;
}

/* Home hero section with retro feel */
.VPHero .name,
.VPHero .text {
  background: var(--vaporwave-gradient-2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.VPHero.has-image.VPHomeHero .image-bg {
  width: 372px;
	height: 182px;
}

.VPHero.has-image.VPHomeHero .VPImage {
  filter: drop-shadow(-4px 8px 7px #0003);
  transition: all 0.3s ease;
}

.VPHero.has-image.VPHomeHero .image-container:hover .VPImage {
  filter: drop-shadow(-4px 8px 7px rgba(255, 113, 206, 0.5));
}

/* Main content area styling */
.VPContent {
  background-color: var(--vp-c-bg);
}

.VPDoc {
  background-color: var(--vp-c-bg);
}

/* Footer styling */
.VPFooter {
  background-color: var(--vp-c-bg-soft);
  border-top: none !important;
}

.header-anchor {
  -webkit-text-fill-color: currentColor;
}

/* Header anchors with vaporwave color */
.header-anchor:hover {
  color: var(--vp-c-brand-1);
}

/* Tables with soft grid styling */
.vp-doc table {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(185, 103, 255, 0.1);
}

.vp-doc th {
  background-color: var(--vp-c-bg-soft);
  border-bottom: 2px solid var(--vp-c-border);
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--vp-c-bg-soft);
}

::-webkit-scrollbar-thumb {
  background-image: var(--vaporwave-gradient-1);
  border-radius: 5px;
}

/* Removed page decorations */

/* Code block enhancements */
div[class*="language-"] {
  box-shadow: 0 3px 15px rgba(185, 103, 255, 0.1);
  border-radius: 8px;
  margin: 1.5rem 0;
}

.dark div[class*="language-"] {
  box-shadow: 0 3px 15px rgba(255, 113, 206, 0.1);
}

/* Headings with subtle gradient */
.vp-doc h1,
.vp-doc h2 {
  background: var(--vaporwave-gradient-1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.vp-doc h3,
.vp-doc h4 {
  color: var(--vp-c-brand-1);
}

/* Custom blockquote */
.vp-doc blockquote {
  border-left: 3px solid var(--vp-c-brand-2);
  background-color: rgba(185, 103, 255, 0.05);
  border-radius: 0 8px 8px 0;
  padding: 16px 24px;
}

/* Mobile responsiveness fixes - removing custom mobile sizing */
@media (max-width: 768px) {
  .VPContent::before,
  .VPContent::after {
    display: none;
  }
}

.VPNavBarTitle.has-sidebar .title {
  border-bottom: none;
}

.VPNav .divider {
  display: none !important;
}

.VPLocalNav {
  border-bottom: none !important;
}