/* ============================================
   VIBECMD NAVIGATION V3 - VS CODE STYLE
   Code editor aesthetic with tabs and activity bar
   ============================================ */

/* ============================================
   CSS CUSTOM PROPERTIES
   ============================================ */
:root {
  /* VS Code Colors */
  --vscode-bg: #1e1e1e;
  --vscode-sidebar: #252526;
  --vscode-titlebar: #323233;
  --vscode-tab-active: #1e1e1e;
  --vscode-tab-inactive: #2d2d2d;
  --vscode-border: #3c3c3c;
  --vscode-text: #cccccc;
  --vscode-text-muted: #858585;
  --vscode-text-bright: #ffffff;
  --vscode-accent: #0078d4;
  --vscode-status-bar: #007acc;
  
  /* VibeCMD Brand Colors */
  --vibe-cyan: #00FFE0;
  --vibe-teal: #00D4AA;
  --vibe-teal-dark: #00B894;
  
  /* Transitions */
  --vscode-transition: 0.15s ease;
}

/* ============================================
   FONTS
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* ============================================
   HEADER - VS CODE STYLE
   ============================================ */
.site-header-v3 {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 100000 !important;
  background: #1e1e1e;
  font-family: 'JetBrains Mono', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}

/* Title Bar Row */
.vscode-titlebar-v3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 38px;
  background: #323233;
  border-bottom: 1px solid #404040;
  padding: 0 20px;
}

.titlebar-left-v3 {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.titlebar-center-v3 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 2;
}

/* Window Controls */
.window-controls-v3 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.window-dot-v3 {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transition: var(--vscode-transition);
}

.window-dot-v3.close { background: #ff5f57; }
.window-dot-v3.minimize { background: #febc2e; }
.window-dot-v3.maximize { background: #28c840; }

/* VS Code Logo */
.vscode-logo-v3 {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #ffffff;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: var(--vscode-transition);
}

.vscode-logo-v3:hover {
  color: var(--vibe-cyan);
}

.vscode-logo-v3:hover img {
  filter: drop-shadow(0 0 15px rgba(0, 255, 224, 0.9));
}

.vscode-logo-v3 img {
  filter: drop-shadow(0 0 10px rgba(0, 255, 224, 0.7));
  transition: var(--vscode-transition);
}

.vscode-logo-v3 svg {
  width: 20px;
  height: 20px;
  color: var(--vibe-cyan);
}

.vscode-logo-v3 span {
  color: var(--vibe-cyan);
}

/* Titlebar Right */
.titlebar-right-v3 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  flex: 1;
  justify-content: flex-end;
}

.titlebar-btn-v3 {
  background: none;
  border: none;
  color: #cccccc;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 0.8rem;
  border-radius: 4px;
  transition: var(--vscode-transition);
  font-family: inherit;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.titlebar-btn-v3:hover {
  background: rgba(255,255,255,0.1);
  color: #ffffff;
}

.titlebar-btn-v3 svg {
  width: 14px;
  height: 14px;
}

.titlebar-btn-v3:hover {
  background: rgba(0, 255, 224, 0.15);
  color: var(--vibe-cyan);
}

/* ============================================
   TAB BAR
   ============================================ */
.vscode-tabbar-v3 {
  display: flex;
  align-items: stretch;
  background: #252526;
  height: 40px;
  overflow-x: auto;
  overflow-y: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
  border-bottom: 1px solid #1e1e1e;
}

.vscode-tabbar-v3::-webkit-scrollbar {
  display: none;
}

.nav-tab-v3 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  height: 100%;
  color: #969696;
  text-decoration: none;
  font-size: 0.8rem;
  border-right: 1px solid #1e1e1e;
  background: #2d2d2d;
  transition: all 0.15s ease;
  white-space: nowrap;
  position: relative;
}

.nav-tab-v3:hover {
  background: #323233;
  color: #ffffff;
}

.nav-tab-v3.active {
  background: #1e1e1e;
  color: #ffffff;
}

.nav-tab-v3.active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--vibe-cyan);
}

/* Tab Icon */
.tab-icon-v3 {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* File Extension Colors */
.nav-tab-v3[data-ext="tsx"] .tab-icon-v3 { color: #3178c6; }
.nav-tab-v3[data-ext="php"] .tab-icon-v3 { color: #777bb3; }
.nav-tab-v3[data-ext="json"] .tab-icon-v3 { color: #f5de19; }
.nav-tab-v3[data-ext="md"] .tab-icon-v3 { color: #519aba; }
.nav-tab-v3[data-ext="css"] .tab-icon-v3 { color: #264de4; }

/* Tab Close Button */
.tab-close-v3 {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  opacity: 0;
  transition: var(--vscode-transition);
  margin-left: 4px;
}

.nav-tab-v3:hover .tab-close-v3,
.nav-tab-v3.active .tab-close-v3 {
  opacity: 0.6;
}

.tab-close-v3:hover {
  opacity: 1 !important;
  background: rgba(255,255,255,0.1);
}

/* New Tab Button */
.new-tab-btn-v3 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  color: var(--vscode-text-muted);
  font-size: 1.2rem;
  transition: var(--vscode-transition);
}

.new-tab-btn-v3:hover {
  color: var(--vscode-text);
  background: rgba(255,255,255,0.05);
}

/* ============================================
   BODY PADDING
   ============================================ */
body {
  padding-top: 78px !important; /* 38 + 40 (titlebar + tabs) */
}

/* ============================================
   FOOTER - SLIM VS CODE STATUS BAR STYLE
   ============================================ */
.footer-v3 {
  background: var(--vscode-sidebar);
  border-top: 1px solid var(--vscode-border);
  font-family: 'JetBrains Mono', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Slim Footer Content */
.footer-slim-v3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px 24px;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-left-v3 {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-brand-link-v3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--vscode-text-bright);
  text-decoration: none;
}

.footer-brand-link-v3 span {
  color: var(--vibe-cyan);
}

.footer-divider-v3 {
  color: var(--vscode-border);
}

.footer-left-v3 a,
.footer-right-v3 a {
  color: var(--vscode-text-muted);
  text-decoration: none;
  font-size: 0.8rem;
  transition: var(--vscode-transition);
}

.footer-left-v3 a:hover,
.footer-right-v3 a:hover {
  color: var(--vibe-cyan);
}

.footer-right-v3 {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Status Bar Footer */
.footer-statusbar-v3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 24px;
  background: var(--vscode-status-bar);
  padding: 0 12px;
  font-size: 0.7rem;
  color: #fff;
}

.statusbar-left-v3 {
  display: flex;
  align-items: center;
  gap: 16px;
}

.statusbar-right-v3 {
  display: flex;
  align-items: center;
  gap: 16px;
}

.statusbar-item-v3 {
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0.9;
}

.statusbar-item-v3 a {
  color: inherit;
  text-decoration: none;
}

.statusbar-item-v3 a:hover {
  text-decoration: underline;
}

.statusbar-item-v3 svg {
  width: 12px;
  height: 12px;
}

/* Social Icons in Status Bar */
.statusbar-social-v3 {
  display: flex;
  align-items: center;
  gap: 12px;
}

.statusbar-social-v3 a {
  color: #fff;
  opacity: 0.8;
  transition: var(--vscode-transition);
}

.statusbar-social-v3 a:hover {
  opacity: 1;
}

.statusbar-social-v3 svg {
  width: 14px;
  height: 14px;
}

/* ============================================
   MOBILE STYLES - NAV AT TOP
   ============================================ */
@media (max-width: 768px) {
  /* Hide Desktop Elements */
  .vscode-titlebar-v3 {
    display: none;
  }
  
  /* Mobile Header */
  .site-header-v3 {
    background: var(--vscode-titlebar);
  }
  
  /* Mobile Tab Bar - All tabs visible, no scroll */
  .vscode-tabbar-v3 {
    display: flex;
    height: 44px;
    background: var(--vscode-titlebar);
    padding: 0;
    gap: 0;
    overflow: visible;
  }
  
  /* All tabs equal width */
  .nav-tab-v3 {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 4px;
    font-size: 0.65rem;
    border-right: 1px solid var(--vscode-border);
    border-radius: 0;
    min-width: 0;
    height: 100%;
    gap: 2px;
    text-align: center;
  }
  
  .nav-tab-v3:last-of-type {
    border-right: none;
  }
  
  .nav-tab-v3.active {
    background: var(--vscode-bg);
  }
  
  .nav-tab-v3.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--vibe-cyan);
    top: auto;
  }
  
  /* SHOW text on mobile */
  .nav-tab-v3 .tab-name-v3 {
    display: block !important;
    font-size: 0.6rem;
    line-height: 1;
  }
  
  /* Hide close buttons and new tab on mobile */
  .tab-close-v3,
  .new-tab-btn-v3 {
    display: none;
  }
  
  /* Tab icons on mobile - smaller, above text */
  .tab-icon-v3 {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }
  
  /* Services tab mobile - only highlight when active */
  .nav-tab-v3.services-tab-v3.active {
    background: linear-gradient(180deg, rgba(0, 255, 224, 0.15), rgba(0, 212, 170, 0.08));
  }
  
  /* Mobile body padding - minimal gap */
  body {
    padding-top: 44px !important;
    padding-bottom: 0 !important;
  }
  
  /* Remove extra margin/padding from first content element */
  body > main:first-of-type,
  body > section:first-of-type,
  body > div:first-of-type,
  .hero,
  [class*="hero"] {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* Slim Footer Mobile */
  .footer-slim-v3 {
    flex-direction: column;
    text-align: center;
    gap: 16px;
    padding: 20px 16px;
  }
  
  .footer-left-v3,
  .footer-right-v3 {
    justify-content: center;
  }
  
  /* Status Bar */
  .footer-statusbar-v3 {
    flex-wrap: wrap;
    height: auto;
    padding: 8px 12px;
    gap: 8px;
    justify-content: center;
  }
  
  .statusbar-left-v3,
  .statusbar-right-v3 {
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* ============================================
   MOBILE MENU TOGGLE (for hamburger if needed)
   ============================================ */
.mobile-menu-toggle-v3 {
  display: none;
  background: none;
  border: none;
  color: var(--vscode-text);
  padding: 8px;
  cursor: pointer;
}

.mobile-menu-toggle-v3 svg {
  width: 20px;
  height: 20px;
}

/* Small phones - compact text */
@media (max-width: 380px) {
  .nav-tab-v3 {
    padding: 4px 2px;
  }
  
  .nav-tab-v3 .tab-name-v3 {
    font-size: 0.55rem;
  }
  
  .tab-icon-v3 {
    width: 16px;
    height: 16px;
  }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.desktop-only-v3 {
  display: block;
}

.mobile-only-v3 {
  display: none;
}

@media (max-width: 768px) {
  .desktop-only-v3 {
    display: none !important;
  }
  
  .mobile-only-v3 {
    display: block !important;
  }
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideDown {
  from { 
    opacity: 0;
    transform: translateY(-10px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

.site-header-v3 {
  animation: slideDown 0.3s ease;
}

/* ============================================
   SCROLL BEHAVIOR
   ============================================ */
html {
  scroll-behavior: smooth;
}

/* ============================================
   SERVICES DROPDOWN (Desktop)
   ============================================ */
.services-dropdown-v3 {
  position: relative;
}

.dropdown-menu-v3 {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--vscode-sidebar);
  border: 1px solid var(--vscode-border);
  border-radius: 6px;
  min-width: 220px;
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: var(--vscode-transition);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  z-index: 1000;
}

.services-dropdown-v3:hover .dropdown-menu-v3 {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item-v3 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  color: var(--vscode-text);
  text-decoration: none;
  font-size: 0.75rem;
  transition: var(--vscode-transition);
}

.dropdown-item-v3:hover {
  background: rgba(0, 255, 224, 0.1);
  color: var(--vibe-cyan);
}

.dropdown-item-v3 svg {
  width: 14px;
  height: 14px;
  color: var(--vscode-text-muted);
}

.dropdown-item-v3:hover svg {
  color: var(--vibe-cyan);
}