/**
 * Bug Fixes for MakeAIHQ Landing Pages
 * Addresses styling issues found after Svelte removal
 */

/* ============================================================================
   BUG #1: Table Styling - Headers and Row Hover Fix
   ============================================================================ */

/* Fix ALL tables in guide/article pages */
table,
.platform-table,
.cost-table,
.comparison-table,
.feature-comparison-table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(10, 14, 39, 0.6);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 12px;
  overflow: hidden;
}

/* Table Headers - Dark background with gold text */
table thead,
table thead tr,
.platform-table thead,
.cost-table thead,
.comparison-table thead {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(184, 134, 11, 0.2)) !important;
}

table th,
.platform-table th,
.cost-table th,
.comparison-table th {
  padding: 1rem;
  text-align: left;
  font-weight: 700;
  color: #D4AF37 !important;
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(212, 175, 55, 0.3);
  background: transparent !important;
}

/* Highlighted column headers */
table th.highlight-column,
.platform-table thead th.highlight-column,
.cost-table thead th.highlight-column {
  background: linear-gradient(135deg, #D4AF37, #B8860B) !important;
  color: #0A0E27 !important;
  font-weight: 700;
}

/* Table Body Cells */
table td,
.platform-table td,
.cost-table td,
.comparison-table td {
  padding: 1rem;
  color: #E8E9ED !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.1);
  font-size: 1rem;
  background: transparent !important;
}

/* Table Row Hover - Gold tinted with readable text */
table tbody tr:hover,
.platform-table tbody tr:hover,
.cost-table tbody tr:hover,
.comparison-table tbody tr:hover {
  background: rgba(212, 175, 55, 0.1) !important;
}

table tbody tr:hover td,
.platform-table tbody tr:hover td,
.cost-table tbody tr:hover td,
.comparison-table tbody tr:hover td {
  color: #FFFFFF !important;
  background: transparent !important;
}

/* Highlighted columns on hover */
table tbody tr:hover .highlight-column,
.platform-table tbody tr:hover .highlight-column,
.cost-table tbody tr:hover .highlight-column {
  background: rgba(212, 175, 55, 0.25) !important;
  color: #FFFFFF !important;
}

/* Article/Guide Page Lists - Improved Bullet Styling */
.post-content ul,
.blog-post ul,
article ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
  margin-bottom: 1.5rem;
}

.post-content ul li,
.blog-post ul li,
article ul li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.75rem;
  line-height: 1.8;
  color: #E8E9ED;
}

.post-content ul li::before,
.blog-post ul li::before,
article ul li::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 0.75rem;
  width: 8px;
  height: 8px;
  background: linear-gradient(135deg, #D4AF37, #B8860B);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
}

/* Nested lists */
.post-content ul ul,
.blog-post ul ul,
article ul ul {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.post-content ul ul li::before,
.blog-post ul ul li::before,
article ul ul li::before {
  background: rgba(212, 175, 55, 0.6);
  width: 6px;
  height: 6px;
}

/* Ordered lists - improved numbering */
.post-content ol,
.blog-post ol,
article ol {
  margin-left: 0;
  padding-left: 2rem;
  margin-bottom: 1.5rem;
  counter-reset: list-counter;
}

.post-content ol li,
.blog-post ol li,
article ol li {
  counter-increment: list-counter;
  margin-bottom: 0.75rem;
  line-height: 1.8;
  color: #E8E9ED;
  position: relative;
}

.post-content ol li::marker,
.blog-post ol li::marker,
article ol li::marker {
  color: #D4AF37;
  font-weight: 700;
}

/* ============================================================================
   BUG #2: Tab Content Grid Layout Fix
   ============================================================================ */

.feature-content {
  display: block !important;
  width: 100%;
}

.feature-content-item {
  display: none;
  grid-template-columns: 1fr 1.2fr;
  gap: 3rem;
  text-align: left;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 2.5rem;
}

.feature-content-item.active {
  display: grid !important;
}

.feature-info {
  display: flex;
  flex-direction: column;
}

.feature-preview {
  display: flex;
  align-items: center;
  justify-content: center;
}

.template-content {
  display: block !important;
  width: 100%;
}

.template-content-item {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  text-align: left;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 2.5rem;
}

.template-content-item.active {
  display: grid !important;
}

.template-features {
  display: flex;
  flex-direction: column;
}

.template-preview {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1024px) {
  .feature-content-item,
  .template-content-item {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================================
   BUG #3 & #4: Numbered Circles/Steps Positioning Fix
   ============================================================================ */

/* Engagement Features Section - Fix numbered cards */
.engagement-card {
  position: relative;
  padding: 2.5rem;
}

.engagement-number {
  position: absolute;
  top: -1rem;
  left: 2rem;
  width: 2.5rem;
  height: 2.5rem;
  background: linear-gradient(135deg, #D4AF37 0%, #B8860B 100%);
  color: #0A0E27;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.25rem;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
  z-index: 10;
}

/* Build Steps Section - Fix step numbers */
.build-steps {
  counter-reset: step-counter;
}

.build-steps li {
  position: relative;
  padding-left: 5rem;
  margin-bottom: 2rem;
}

.build-steps li::before {
  content: counter(step-counter);
  counter-increment: step-counter;
  position: absolute;
  left: 0;
  top: 0;
  width: 3.5rem;
  height: 3.5rem;
  background: linear-gradient(135deg, #D4AF37 0%, #B8860B 100%);
  color: #0A0E27;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.75rem;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
  z-index: 10;
}

.step .step-number {
  width: 3.5rem;
  height: 3.5rem;
  background: linear-gradient(135deg, #D4AF37 0%, #B8860B 100%);
  color: #0A0E27;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.75rem;
  margin: 0 auto 1.5rem;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
}

.steps .step {
  position: relative;
}

/* ============================================================================
   MOBILE MENU FIX - Hamburger Menu Toggle
   ============================================================================ */

/* Z-index hierarchy for mobile menu */
/* Toast notifications (highest - always visible) */
.toast-container {
  z-index: 99999 !important;
}

/* Header and hamburger button */
header,
nav {
  position: relative;
  z-index: 10002 !important;
}

/* Mobile menu button */
.mobile-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  background: none;
  border: none;
  color: #FFFFFF;
  cursor: pointer;
  z-index: 10003 !important;
  position: relative;
}

@media (max-width: 768px) {
  .mobile-menu-btn {
    display: flex;
  }

  /* Hide desktop nav links by default on mobile */
  .nav-links {
    display: none;
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #0A0E27;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 1.5rem;
    overflow-y: auto;
    z-index: 10000 !important;
    border-top: 1px solid rgba(212, 175, 55, 0.2);
  }

  /* Show mobile menu when open */
  .nav-links.mobile-open {
    display: flex !important;
    z-index: 10000 !important;
    height: calc(100vh - 72px) !important;
    min-height: calc(100vh - 72px) !important;
  }

  /* Style mobile menu items */
  .nav-links a,
  .nav-links .nav-dropdown {
    width: 100%;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  .nav-links a:last-child {
    border-bottom: none;
  }

  /* Mobile menu buttons */
  .nav-links .nav-login,
  .nav-links .nav-cta {
    width: 100%;
    text-align: center;
    margin-top: 1rem;
    display: block;
  }

  /* Mobile dropdown adjustments */
  .nav-links .nav-dropdown {
    position: relative;
    z-index: 10000;
  }

  .nav-links .dropdown-menu {
    position: static;
    transform: none;
    margin-top: 0.5rem;
    border-left: 3px solid rgba(212, 175, 55, 0.3);
    margin-left: 1rem;
    z-index: 10001 !important;
  }

  /* Override any conflicting z-index on mobile */
  .mobile-open .dropdown-menu {
    z-index: 10001 !important;
  }
}

/* Desktop dropdown should also be above content */
.dropdown-menu {
  z-index: 10001 !important;
}

/* ============================================================================
   Dropdown Menu - Ensure proper display
   ============================================================================ */

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 280px;
  background: #0A0E27;
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 12px;
  padding: 1rem 0.5rem 0.5rem;
  margin-top: 0.5rem;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
  z-index: 10001 !important;
}

.dropdown-menu::before {
  content: "";
  position: absolute;
  top: -0.75rem;
  left: 0;
  right: 0;
  height: 1rem;
  background: transparent;
}

.dropdown-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s;
  color: #E8E9ED;
}

.dropdown-item:hover {
  background: rgba(212, 175, 55, 0.1);
}

.dropdown-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(212, 175, 55, 0.1);
  border-radius: 8px;
  color: #D4AF37;
  flex-shrink: 0;
}

.dropdown-content {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.dropdown-title {
  color: #FFFFFF;
  font-weight: 600;
  font-size: 0.9375rem;
}

.dropdown-desc {
  color: #718096;
  font-size: 0.8125rem;
}

.dropdown-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0.5rem 0;
}

/* ============================================================================
   FAQ Filter Buttons
   ============================================================================ */

.faq-filters {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 3rem;
}

.faq-filter-btn {
  padding: 0.75rem 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #A0AEC0;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.faq-filter-btn:hover {
  background: rgba(212, 175, 55, 0.1);
  border-color: rgba(212, 175, 55, 0.3);
  color: #D4AF37;
}

.faq-filter-btn.active {
  background: rgba(212, 175, 55, 0.15);
  border-color: #D4AF37;
  color: #D4AF37;
}

.faq-count {
  background: rgba(212, 175, 55, 0.2);
  color: #D4AF37;
  padding: 0.125rem 0.5rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 700;
}

.faq-item[data-category] {
  display: block;
}

.faq-item[data-category].hidden {
  display: none !important;
}

/* ============================================================================
   Override any conflicting styles from main.css
   ============================================================================ */

.feature-content > * {
  grid-column: unset !important;
}

.template-content > * {
  grid-column: unset !important;
}

/* ============================================================================
   GUIDES PAGE - Industry Solutions & Use Case Sections
   ============================================================================ */

.landing-section {
  padding: 3rem 0;
}

.subsection-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #FFFFFF;
  margin: 2.5rem 0 1.5rem;
}

.landing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.landing-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1.5rem;
  text-decoration: none;
  transition: all 0.3s ease;
  display: block;
}

.landing-card:hover {
  border-color: #D4AF37;
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.15);
}

.landing-card h3 {
  font-size: 1rem;
  font-weight: 600;
  color: #FFFFFF;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.landing-card p {
  color: #A0AEC0;
  line-height: 1.7;
  font-size: 0.9375rem;
  margin: 0;
}

/* Templates Section - Guides Page */
.guides-page .templates-section {
  padding: 3rem 0;
  margin-top: 2rem;
}

.guides-page .templates-section h2 {
  font-size: 1.75rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 0.75rem;
}

.guides-page .section-description {
  font-size: 1.125rem;
  color: #B8B9BE;
  margin-bottom: 2.5rem;
  max-width: 700px;
}

.guides-page .templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
}

.guides-page .template-card {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.05), rgba(212, 175, 55, 0.02));
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 12px;
  padding: 1.5rem;
  text-decoration: none;
  transition: all 0.3s ease;
  display: block;
}

.guides-page .template-card:hover {
  border-color: #D4AF37;
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.15);
}

.guides-page .template-card h3 {
  font-size: 1rem;
  font-weight: 600;
  color: #FFFFFF;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.guides-page .template-card p {
  color: #A0AEC0;
  line-height: 1.7;
  font-size: 0.875rem;
  margin-bottom: 0.75rem;
}

.guides-page .template-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #718096;
  font-size: 0.75rem;
}

/* Cluster Cards - Ensure proper styling */
.guides-page .cluster-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1.5rem;
  text-decoration: none;
  transition: all 0.3s ease;
  display: block;
}

.guides-page .cluster-card:hover {
  border-color: #D4AF37;
  transform: translateY(-4px);
}

.guides-page .cluster-card h3 {
  font-size: 1rem;
  font-weight: 600;
  color: #FFFFFF;
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

.guides-page .cluster-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #718096;
  font-size: 0.875rem;
}