/**
 * Motorwise FAQ Help Center - Styles
 *
 * Minimal CSS for the FAQ section, independent of articles.css.
 * Most styling is handled by Tailwind CDN configured in index.html.
 *
 * Usage:
 *   <link rel="stylesheet" href="/faq/styles/faq.css">
 */

/* ============================================================================
   Base Styles
   ============================================================================ */
body {
  font-family: 'Jost', sans-serif;
}

/* ============================================================================
   Design Tokens - CSS Custom Properties
   ============================================================================ */
:root {
  /* Layout */
  --header-offset: 80px;

  /* Animation Timing */
  --timing-section-reveal: 150ms;
  --timing-expand-collapse: 200ms;
  --timing-hover: 200ms;
}

/* ============================================================================
   Hero Card Shared Styles
   Used by guide-hero, support-hero, glossary-hero components
   ============================================================================ */

/* Hero card background tilt */
.hero-card-bg {
  transform: rotate(0.5deg);
}

/* Blur accent beneath hero cards - default blue */
.blur-accent {
  position: absolute;
  bottom: -1rem;
  left: 50%;
  transform: translateX(-50%);
  width: 75%;
  height: 1.5rem;
  background: linear-gradient(to bottom right, rgba(239, 246, 255, 0.5), rgba(219, 234, 254, 0.3));
  border-radius: 9999px;
  filter: blur(24px);
  opacity: 0.3;
  z-index: -1;
}

/* Hero background tilt - tab-specific colors */
[data-tab-panel="guide"] .hero-card-bg {
  background: linear-gradient(to bottom right, rgba(236, 253, 245, 0.5), rgba(209, 250, 229, 0.3)) !important;
}

[data-tab-panel="support"] .hero-card-bg {
  background: linear-gradient(to bottom right, rgba(250, 245, 255, 0.5), rgba(243, 232, 255, 0.3)) !important;
}

[data-tab-panel="glossary"] .hero-card-bg {
  background: linear-gradient(to bottom right, rgba(254, 252, 232, 0.5), rgba(254, 243, 199, 0.3)) !important;
}

/* ============================================================================
   FAQ Hero - Chevron Background Design
   ============================================================================ */

/* FAQ Hero Section Container */
[data-component="faq-hero"] {
  position: relative;
  overflow: visible;
  min-height: auto;
  z-index: 0; /* Creates stacking context so chevrons at -z-10 render above main's bg-white */
}

@media (min-width: 1024px) {
  [data-component="faq-hero"] {
    min-height: max(70vh, 540px);
  }
}

/* ============================================================================
   Hero Wrapper
   ============================================================================ */

.faq-hero-wrapper {
  position: relative;
  background: transparent;
}

/* Subtle bottom fade on hero for smooth transition */
.faq-hero-wrapper::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4rem;
  background: linear-gradient(to bottom, transparent, white);
  pointer-events: none;
  z-index: 1;
}

/* ============================================================================
   Sidebar Tab Navigation (vertical on desktop, horizontal on mobile)
   ============================================================================ */

/* Shared: Active tab button */
.faq-sidebar-btn[aria-selected="true"] {
  background: linear-gradient(to bottom, #f8fafc, #f1f5f9);
  color: #171717;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.faq-sidebar-btn[aria-selected="true"] .faq-sidebar-indicator {
  opacity: 1;
}

/* Shared: Inactive tab button */
.faq-sidebar-btn[aria-selected="false"] {
  background: transparent;
  color: #737373;
}

.faq-sidebar-btn[aria-selected="false"]:hover {
  background: rgba(248, 250, 252, 0.8);
  color: #525252;
}

/* Inactive icon containers go neutral */
.faq-sidebar-btn[aria-selected="false"] > div:first-child {
  background: #f5f5f5 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.faq-sidebar-btn[aria-selected="false"] > div:first-child i {
  color: #a3a3a3 !important;
}

/* Hover hints color back */
.faq-sidebar-btn[aria-selected="false"]:hover > div:first-child {
  background: linear-gradient(to bottom right, #fafafa, #f5f5f5) !important;
}

.faq-sidebar-btn[aria-selected="false"]:hover > div:first-child i {
  color: #737373 !important;
}

/* Chevron Background Elements - matching MOT hero pattern (immediate display) */
.faq-hero-chevron {
  /* Chevrons display immediately like MOT hero */
}

/* Blur Accent Decorations */
.faq-hero-blur-accent {
  transition: opacity 1000ms ease-out;
  pointer-events: none;
}

/* FAQ Hero Responsive Adjustments */
@media (max-width: 1023px) {
  [data-component="faq-hero"] {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

@media (max-width: 767px) {
  [data-component="faq-hero"] {
    min-height: auto;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}

/* ============================================================================
   FAQ Dashboard Container (ComparisonDashboard pattern)
   ============================================================================ */

/* Dashboard container entrance animation */
#faq-categories {
  animation: dashboardReveal 0.5s ease-out;
}

@keyframes dashboardReveal {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* FAQ item hover lift effect */
[data-faq-item] {
  transform: translateY(0);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

[data-faq-item]:hover {
  transform: translateY(-1px);
}

/* Smooth answer panel reveal */
[data-faq-answer] {
  animation: answerReveal 0.25s ease-out;
}

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

/* Category pill active state indicator */
#category-pills button[data-category] {
  position: relative;
}

#category-pills button[data-category]::before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 60%;
  height: 2px;
  background: currentColor;
  opacity: 0.3;
  border-radius: 1px;
  transition: transform 0.2s ease;
}

#category-pills button[data-category]:hover::before {
  transform: translateX(-50%) scaleX(1);
}

/* ============================================================================
   Category Filters (in FAQ content area)
   ============================================================================ */

/* Hide scrollbar for mobile category pills */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Category card active state */
#category-cards .category-card.active,
#category-pills .category-pill.active {
  border-color: #3b82f6;
  background-color: #eff6ff;
}

/* ============================================================================
   Animations
   ============================================================================ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* .fade-in-up is controlled by JS inline styles + .is-visible class
   Do not add animation here - it conflicts with the transition-based approach */

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .faq-hero-chevron,
  .faq-fade-in,
  .fade-in-up {
    transition: none;
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ============================================================================
   Category Card Styling (for FAQ hero category filter buttons)
   ============================================================================ */
.category-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: white;
  border-radius: 0.75rem;
  border: 1px solid #e5e5e5;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
}

.category-card:hover {
  border-color: #93c5fd;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.category-card.active {
  background: linear-gradient(to bottom right, #eff6ff, rgba(219, 234, 254, 0.5));
  border-color: rgba(191, 219, 254, 0.5);
}

.category-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  background: linear-gradient(to bottom right, #eff6ff, #dbeafe);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.125rem;
  color: #2563eb;
}

.category-card.active .category-icon {
  background: white;
}

.category-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.category-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: #171717;
  line-height: 1.25;
}

.category-count {
  font-size: 0.75rem;
  color: #737373;
  margin-top: 0.125rem;
}

.category-chevron {
  font-size: 1.25rem;
  color: #d4d4d4;
  flex-shrink: 0;
  transition: color 0.2s ease;
}

.category-card:hover .category-chevron {
  color: #93c5fd;
}

/* Focus-visible states for keyboard navigation */
.category-card:focus-visible,
button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 2px solid rgb(37 99 235);
  outline-offset: 2px;
}