/* ============================================
   UX Fixes - January 2026
   Addresses issues from comprehensive UX audit
   ============================================ */

/* ============================================
   1. CHATBASE WIDGET - MOBILE FIX (CRITICAL)
   Hide tooltip on mobile, show only chat icon
   ============================================ */

/* Target Chatbase widget tooltip on mobile */
@media (max-width: 768px) {
  /* Hide the persistent tooltip/bubble message on mobile */
  #chatbase-bubble-window,
  .chatbase-bubble-window,
  [class*="chatbase"] > div:not(button):not([class*="icon"]),
  iframe[src*="chatbase"] + div {
    display: none !important;
  }

  /* Ensure chat button itself stays but is smaller */
  #chatbase-bubble-button,
  .chatbase-bubble-button,
  [id*="chatbase-bubble"] {
    transform: scale(0.85) !important;
    bottom: 16px !important;
    right: 16px !important;
  }

  /* Generic tooltip hide for chat widgets */
  .chat-widget-tooltip,
  .chatbot-tooltip,
  [class*="chat-tooltip"],
  [class*="bubble-message"] {
    display: none !important;
  }
}

/* ============================================
   2. HERO CTA BUTTONS - IMPROVED CONTRAST
   Make Work/Kind Words/Experience more visible
   ============================================ */

/* Enhanced button visibility in light mode */
.hero-command {
  /* Stronger border for visibility */
  border: 2px solid rgba(0, 0, 0, 0.15) !important;
  /* Slightly more opaque background */
  background: rgba(255, 255, 255, 0.98) !important;
  /* Enhanced shadow for depth and visibility */
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.12),
    0 4px 16px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

/* Hover state - more prominent */
@media (hover: hover) {
  .hero-command:hover {
    border-color: rgba(0, 0, 0, 0.25) !important;
    background: rgba(255, 255, 255, 1) !important;
    box-shadow:
      0 4px 12px rgba(0, 0, 0, 0.15),
      0 8px 24px rgba(0, 0, 0, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 1) !important;
    transform: translateY(-2px);
  }
}

/* Active/pressed state */
.hero-command:active {
  transform: translateY(0);
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.1),
    inset 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

/* Dark mode - already has good contrast, minor enhancement */
[data-theme="dark"] .hero-command {
  border: 2px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.3),
    0 4px 16px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* ============================================
   3. TOUCH TARGETS - MINIMUM 44x44px
   Ensure all interactive elements are tappable
   ============================================ */

@media (max-width: 768px) {
  /* Hero command buttons - ensure minimum size */
  .hero-command {
    min-height: 48px !important;
    min-width: 100px !important;
    padding: 14px 24px !important;
  }

  /* Navigation tabs in sticky bar */
  .tab-link,
  .nav-tab,
  .section-tab,
  [role="tab"] {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 16px;
  }

  /* Footer links */
  .site-footer-new a,
  .footer-link,
  .social-link {
    min-height: 22px;
    display: inline-flex;
    align-items: center;
    padding: 8px 4px;
  }

  /* Tag pills on case studies */
  .tag-pill,
  .project-tag,
  .skill-tag,
  [class*="tag"] {
    min-height: 36px;
    padding: 8px 14px;
  }

  /* Testimonial cards navigation */
  .carousel-prev,
  .carousel-next,
  .slider-arrow {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ============================================
   4. HORIZONTAL SCROLL INDICATORS
   Show users there's more content to scroll
   ============================================ */

/* Scroll indicator gradient for horizontal scrolling containers */
.hero-terminal-nav,
.tabs-container,
.horizontal-scroll,
[class*="scroll-container"] {
  position: relative;
}

/* Right fade indicator */
.hero-terminal-nav::after,
.tabs-container::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 40px;
  background: linear-gradient(to left,
    var(--bg-primary, rgba(255, 255, 255, 0.95)) 0%,
    transparent 100%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Show indicator when scrollable (add via JS or always show on mobile) */
@media (max-width: 768px) {
  .hero-terminal-nav::after,
  .tabs-container::after {
    opacity: 1;
  }

  /* Hide when scrolled to end (controlled via JS class) */
  .hero-terminal-nav.scrolled-end::after,
  .tabs-container.scrolled-end::after {
    opacity: 0;
  }
}

/* Dark mode scroll indicator */
[data-theme="dark"] .hero-terminal-nav::after,
[data-theme="dark"] .tabs-container::after {
  background: linear-gradient(to left,
    var(--bg-dark, rgba(10, 15, 30, 0.95)) 0%,
    transparent 100%
  );
}

/* ============================================
   5. CODE OVERLAY - MOBILE OPTIMIZATION
   Simplify terminal overlay on small screens
   ============================================ */

@media (max-width: 768px) {
  /* Reduce code overlay size on mobile */
  .hero-terminal-overlay,
  .code-overlay,
  .terminal-widget {
    font-size: 0.7rem !important;
    padding: 12px !important;
    max-width: 200px !important;
  }

  /* Hide less important code lines on mobile */
  .hero-terminal-overlay .terminal-line:nth-child(n+4),
  .code-overlay .code-line:nth-child(n+4) {
    display: none;
  }

  /* Add "..." indicator for truncated code */
  .hero-terminal-overlay::after,
  .code-overlay::after {
    content: '...';
    display: block;
    color: var(--text-muted, #888);
    font-size: 0.75rem;
    margin-top: 4px;
  }
}

/* ============================================
   6. ADDITIONAL MOBILE UX IMPROVEMENTS
   ============================================ */

@media (max-width: 768px) {
  /* Prevent accidental taps with adequate spacing */
  .button-group,
  .action-row,
  .cta-group {
    gap: 12px !important;
  }

  /* Better focus states for touch */
  a:focus-visible,
  button:focus-visible {
    outline: 3px solid var(--accent, #059669) !important;
    outline-offset: 3px !important;
  }

  /* Reduce motion for users who prefer it */
  @media (prefers-reduced-motion: reduce) {
    * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}

/* ============================================
   7. STICKY HEADER IMPROVEMENTS
   Better visibility during scroll
   ============================================ */

.floating-navbar.scrolled,
.site-header.scrolled {
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.1),
    0 4px 16px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="dark"] .floating-navbar.scrolled,
[data-theme="dark"] .site-header.scrolled {
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.3),
    0 4px 16px rgba(0, 0, 0, 0.2) !important;
}

/* ============================================
   8. REMOVE DECORATIVE ELEMENTS
   Hide colored dot below name, keep terminal
   ============================================ */

/* Hide the colored dot/bar below hero name */
.hero-identity-role::before {
  display: none !important;
}

/* Hide decorative lesson category dots */
.lesson-category-dot {
  display: none !important;
}

/* Hide moon/celestial decorative elements in hero background */
.moon-core,
.moon-craters,
.moon-glow {
  display: none !important;
}